april.holle.blog

Sometimes design is all about the details. Recently, the following design Easter egg was pointed out to me. On the inside flap of Moo Stickers is a lil happy guy that says, “You ain’t seen me, right?” and if you break the flap stapled on the other side he says, “Eeek! You broke it. No cookies for you!”.

Secret moo man

Originally uploaded by hallywoods

When the detail is put into these little corners where often it is overlooked by designers and never given a second thought to consumers, something magical happens, a clever little bit of “secret” is shared between designer and consumer, both are enriched by the process.

If you liked this lil design Easter egg, check out Paul Annett’s recent SXSW panel, “Oooh that’s Clever!: Unnatural Experiments in Web Design” on slideshare for more magical design moments both in print, envirnoment and web.

Has web design transcended into it’s full potential? If you ask Dan Willis of Sapient, he’ll say it’s just print in disguise. He believes that while web design certainly has just begun to blossom into the medium that interactivity the world wide web has to offer, it’s not quite there yet.

Even as Web 3.0 edges its way, web design is still ruled by “print-style” design, pushing web centric content (such as up-to-minute story updates or geo-targeted results). He argues that there is more growth into “Transcendent Web” on the horizon, and cites five different primary elements that will push web design to new heights.

1. Ambient Awareness
   Micro-blogging such as Twitter allows users to become aware of a bigger picture of who someone is via small 140 character updates, allowing a fuller personalize perspective into that person’s life, culture and perhaps society in general.
2. User Created Context
   Users now create their own experience online, selecting the ways to they want receive their information (RSS feeds vs. reading on the blog), the more you try to control how the user moves about the web, the more they rebel and go else where for their information.
3. Random Voyeurism
   Humans like to experience what it’s like to be someone else, to share an honest moment that provides insight into others, the web offers new ways to experience this through personal blogs, micro-blogging, photo and video sharing.
4. Self-aware (but ultimately uncontrollable) Content
   Content on the web now knows what kind of content it is through the use of xml, tagging and keywords, but ultimately this content can be used by anyone for anything in or out of context. Once you put content out there, it can be mashedup and reused completely.
5. Experiential Content
   With video, images, real-time micro-blogging, and other content available, many web interactions could be exploded into entire experiences as if the users were almost “there”.

To learn more check out the SXSW Highlights Video or download the 15-page paper by Dan Willis.

I presented at AIGA Arizona Say Anything on November 10th. Here is the write up of the talk based on the slides that were presented that evening. I hope everyone got something out of this presentation and please feel free to post comments regarding questions you may have on this material. Thank you to AIGA Arizona for the opportunity to present and I hope to be back real soon.

Step 1: What is Web Design?

Often fear is simply a lack of understanding, so to begin this journey, let’s start by defining what web design, as a craft, is. I feel that Jeffery Zeldman of Happy Cog Studios put it best when he summarized web design as:

Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.

Wow, lots to digest there, let’s break it up a bit.

The creation of digital environments that facilitate and encourage human activity.
So basically all this is saying that web design is design within a digital space (i.e. the web) but more importantly that it’s main purpose is to facilitate and encourage human activity. We want to interact with them, give and get from the user. This allows for a special kind of communication that we haven’t ever seen from media before. Instead of dictating to the consumer, we can now receive and act on information provided to us, very powerful.

Reflect or adapt to the individual voices and content.
While the web is still a relatively new media format in the grand scheme of media and advertising, it’s still very customizable. We should harness this adaptability and use it to the best of our abilities to reflect and present the content in a very specialized manner. The web was created for the purpose of collecting and sharing information; web design cannot forget these roots as we move forward. Content is king, it’s the most important part, and should be treated that way.

Change gracefully over time while always retaining its identity.
Web design is unlike many other forms of media because of the way it can be changed over time. Unlike print, we can continue to add, take away and mold this space over and over again. The tricky part is doing it gracefully and staying true to the original brand and statement. If we change too often or off course of our brand in can alienate our users instead of creating those core connections and communications levels we would like to have.

Overall, web design is very similar to other types of design; there are still guidelines, best practices, and techniques that separate good design from the bad.  Also, just like all other types of media, it’s centered on communication, however there is a new addition that makes this a new frontier, the interactivity of the users who use it.

Now that we know our adversary, let’s delve into those guidelines, best practices and techniques that will allow you to be empowered to go head first into the fight.

Step 2: Knowledge is Power.

The more you know about why and what you’re designing for the web will help you in your quest.

Start with a purpose.
What’s the real reason behind why the design needs to be created? Perhaps it’s to share product information or to be able to process online orders. What ever it is, nail it down and keep it simple. Even if there are a few reasons, keep them concise and in front of you at all times. This will help you stave off the needs for the “wouldn’t it be nice if?” scope creep that can really get you in trouble later.

Define your users and what they need.
Who are your users? What do they want from you? More often than not they won’t need a sales pitch, they’re qualified leads or else they wouldn’t be there. So veer away from the extended sales pitch and instead focus on giving your users the information they need & want about your services or products. Need help figuring out what your users want the most? Check out your current google analytics statics to see what your users are looking for the most, or check out a heat mapping service such as Crazy Egg that will help you visualize what your users are looking for and clicking on.

Communicate to develop correct functionality scope.
Talk with your client, project manager, and development team to come up with a correct scope of functionality. When the client signs off on designs, often they’re not only signing off on look and feel but functional items such as searches, drop downs, user functionality, etc. Make sure that everything that’s depicted within the comps is with in functionality scope and doable.

Collect all content.
This is a tough one to accomplish, but stick in there and this one will pay off! More often than not timelines slip because the client doesn’t realize the scope of content needed to complete a web project. When you focus on getting these items right off the bat it allows the client to become more of an active participant in the planning and will help them understand how much work is involved in the design and development process. It will also keep them busy so they’re not prodding for more features or badgering you about deliverables sooner than the timeline suggests. Collecting all the content also helps you plan out an accurate site information architecture and will help you design with the voice and content already in place.

Step 3: Organize for the user.

Once you’ve got all your parts and pieces remember to organize them keeping the users and their needs in the forefront at all times. Knowing more about usability will help you out here, so check out this definition from Jakob Nielsen.

Usability: the users perception of how consistent, intuitive, and organized it is to accomplish tasks within a system.

Offer the user clear choices.
Don’t overload the user with options, stick to the purposes and users needs that you had outlined earlier. Keep it clear, easy to understand, and if you can make it so easy that the user feels like a GENIUS because it was so easy to use.

Use conventional terms, icons and positioning.
Sure we all want to create something new and fun, but try to stick with the normal terms, icons, and placement on standard web stuff. Such as don’t replace the e-mail envelope with the @ symbol, it will require your users to think, and to break that stream of consciousness enables poor usability.  However, just because you should stick with the standards doesn’t mean you can’t bend the rules, you just have to do it in such a easy way that it can be picked up with minimal effort. Most users scan the page in a F-Shaped eye tracking, so you most likely want to place your most important pieces within this pathing.

Easily digestible content blocks.
Avoid large / lengthy blocks of content if possible. Most web users tend to scan content vs. read it fully so keep it short and concise. If you want to overview content, stick to three to five bullet points with links that go to the full content for those who are interested.

Consider user flow.
Remember for every link you create in your design there must be somewhere that goes to. Remember standard user flows like what are the steps/process when a user registers, signs in, or tries to buy a product? Remembering these steps as you design will help you comprehend the whole flow and layout of the website as a whole.  If you would like help with some of these steps, check out a handy service called Product Planner.

Wireframes are your friends, you can’t have to many.
Wireframes can help considerably when you’re still planning out the placement of major items and user flows, they’re less time consuming and can be really amazing tools when trying to understand what should be the most important elements within a page.

Step 4: Roll up your sleeves.

Alright, with all that collecting and planning I guess you should be ready to actually design something right? Check out some of these tips to make your design to implementation time shorter.

Be smart about imagery/graphics

• Too many images means it will take too long to load, while it loads it will look like crap. So, be smart and use the less is more approach. Also, all those images won’t have the search engine weight as text would have, so remember that when choosing typefaces as images, etc.
• If you REALLY want to use a non-standard font face, check out sIFR for your implementation, but a few notes on this, sIFR uses flash to render the font so it will still impede load time. It will be SEO compliant, but it will also require flash.
• Images can be an accessibility nightmare, if seriously informational text is included in graphics it needs to be in full text as the alt attribute for the image. Instead of having to remember all this, using a regular font and HTML text would be a better decision.

File organization

• Organize your PSD to have all elements grouped together by area such as header, footers, callouts, etc this will make selecting and merging for cutting easier later.
• Include on and over states for navigation, since this is an interactive space these styles will need to included so that they can be implemented later.
• Keep all your layers editable, you never know when you’ll need to change a piece of text or a background color later, instead of redoing the entire PSD, just be smart and don’t merge layers.
• Create a style guide that outlines all fonts, colors, and styles used so that creation on the CSS style sheet can be easily created without having to re-examine your PSD later

Stay true to the end user
Even though you’ve focused on the users during the gathering and planning processes, you can’t forget about them now. Through out design iterations it’s easy to forget about the end user in hopes to quell the client, keep in mind that this website isn’t for your client to use, its for their customers, so they’re most important.

Alright so I thought that I’d have time between sessions and parties to really capture everything I’ve done while I was at my first SXSW, unfortunately, that was not the case. However! I took really great notes, so sit back and relax as I tell my story of one girl, one conference and thousands of geeks with great ideas.

I packed, I got into a cab, I stood in security, I boarded, I flew, I landed, what now? Taxi! Hopped in and jetted over to my hotel, while my room wasn’t quite ready I got to check in and have them hold my baggage which was nice. Stayed at the Radisson, which was alright, but next year I’ll definitely be staying at the OMNI, it’s just more… well… COOL. Anyhow, off to the conference!

Walking down to the conference center I’m already spotting people with SXSW badges and gear rolling down the street. The conference center was swarming with geeky peeps all excited and not quite sure what to do or where to go yet. Instantaneously greeted by the Integrumlins hacking in the halls already working on some new inspired SXSW twitter application. I am directed to the check in line, which spans AROUND the corner of the conference center, estimated wait time, 40 minutes. Vaguely reminded of college registration, I step in line and begin my journey to check in. The line moved surprisingly quickly and before I knew it I had a new shiny badge and my very own SXSW bag of swag.

Met back up with the integrum peeps and proceeded to elimnate about 98% of the paper products in the swag bag, poor trees!  Chilled for a bit before the first session, Respect! by featuring team members of Happy Cog and Douglas Bowman of Google.

Respect!

The main premise of the panel was how to gain respect in our careers, from our colleagues and our clients, by developing concepts on how we can translate what we do in a way they can understand and respect it, as well as interpreting the value of what we do.

The Client

The important message here is getting the client to understand what exactly goes into the process of great web design. As Jason Santa Maria put it, “[It's] difficult to respect something I don’t understand, you have to get what went into it to respect it.”  To have the client get what gets into it, you have to involve them early, letting the client draw and express what they really would like to get out of the website and giving them ownership of ideas, making them part of the process of initial strategy.

Having all the right research of what the client really needs is important. Happy Cog conducts extensive client research, going into their client’s office and really discussing with everyone regarding what they really need. “It’s the tipping point when you’re in individual meetings and they go to shut the door, you know they’re going to open up to you and trust you”, Liz Danzico stated, “creating an understanding with them that they find valuable.” If you feel you usually don’t have time to really get to know the client and their needs, start to make time within your proposals.

Another way you can gain client respect for you and the work you do is to not nickel and dime them on small changes and corrections. It’s awesome that the client wants to make it perfect, just make sure you’re consulting them through the process.

Also, when you help clients through the process remind them of the WHOLE process and what they’re doing right now at this very step. We sometimes forget that clients don’t have the website on their minds at all times, they have other business issues to worry about as well, how the company is doing, if they have to hire or fire, what about those health benefits their employees want? So remember that while their website might be forefront in your mind, they have other things going on and they need you to remind them what they’re doing in the web design process and why it’s important to the website.

Also be aware of how web savvy your client is. If they’re pretty good at knowing the small stuff, don’t be lazy, use that to your advantage by being able to teach and push their knowledge farther regarding some of the more advanced techniques that are involved. Remember, understanding is the key to respect.

Copy is one thing, visual representation can be the sticking point in a client relationship. “Visual representation is VERY personal” Jeff mentioned. Happy Cog gave us some solutions on how to get over this extreme hurdle in the relationship unscathed by giving the client two completely seperate solutions to their problems offering them up as “this says this about you, that says that about you” Jeffrey Zeldman recommended. Jason Santa Maria suggested “have the client focus on the problems rather than solutions” since the solutions are your specialty and your clients problems are their specialty. This gives the client a feeling that you’re holding the keys and they have to consult you on “the best way” to achieve a solution.

Awards

Jeffrey raised the question regarding awards and whether awards really  provide any metric to our clients regarding how good we are at our jobs. The panel concluded that while awards may have some impact as a metric on how clients respect you, that it’s both small and perhaps deceptive since there are so many awards out there that don’t really attest to great web design at all.

Within the Team

Within your team it’s important to have a certain amount of respect as well. To do this the panelists suggested to make sure everyone on the team was somewhat cross trained or familiar with what each staff member contributes to the project and how their job is also vital to the project completion and success. As said before, it’s hard to respect something your teammates may not fully understand.

Other Interesting Thoughts

I found that during the course of this years conference a reoccuring theme appeared with content collection and creation, lots of shops are demanding content be provided before the design process ever begins, which is great because we’re shifting focus from the aesthetics to the real reason the web began in the first place, CONTENT!

Happy Cog team members also stressed the importance of good content, they make actual editorial documents regarding the voice and use of the content throughout the site to really define and bring life to the brand. Also, the content needs to really be informative, as Jeffrey cautioned, “Sites [are] reading too marketing and not enough web.”

Overall a very interesting session and a great way to start off the conference. I’ll be posting more take aways from more sessions as I have the time today and tomorrow, so keep your eyes peeled. Now I have to hop in the shower for the last day of exciting SXSW action!

Great Refresh meeting last night over at Inza Coffee. There were about 10 to 15 5 minute demos of new and exciting web projects coming out of Phoenix. Some of the highlights were:

Show in a Box – If you’re interested in starting a video blog, but you’re not technically savvy, check out Show in a Box, a wordpress based starter kit that comes with everything you need to start your very own vlog.

Square Mile Web – Ever want to see a square mile of interesting user generated photographs? Look no further than Square Mile Web, where you can broadcast your images, tag and rate them.

DurtBagz – If you need a new satchel and you have an affinity for street signs check out DurtBagz.

My Community Board – Want to get to know your neighbors, using My Community Board you can. You can also post classifieds to get rid of that old barbecue, post the new HOA regulations documents, and more.

Crowd Box – Ever wish you could revisit that great presentation you saw at that last conference? Crowd box offers conferences the ability to create social networks for their attendees and to make videos of the presentations.

Read Phoenix – Want to know what Phoenix is all about? look no further than the blogs of Phoenix. Showcasing blogs from all over the metro area you can find someone you’re bound to get along with.

XID Card – Wish you knew all the social networking sites your friends are involved in? Now you can get the skinny on where your people are at and what they’re into using XID card.

Neh Meh Yeh – Ever wonder if you’re just having a bad day or if your life is perpetually unhappy? Now you can track your moods on Neh Meh Yeh! Each day you can select one of three happiness faces and track whether or not you’re really in a bad mood all the time. Now if only they could track it by hour…

Twitter Sign – Ever twitter when you see an awesome sign? Now start your post with sign: and it will show up on Twitter Sign.

After Halloween – Steam Crow Press is at it again! Amazing illustrator Daniel Davis graces the world with his third book, After Halloween. What’s it about? Why.. it’s about what monsters do for careers… after Halloween! Also, if you’re an illustrator, check out the new illustrators group Daniel Davis is starting called, Tiny Army.