Browsing articles in "Flash"
Nov
11

Fear and Mystery of Web Design

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.

Feb
1

Links of the Week Vol. 5

A collection of user interface design patterns and trends that are becoming “standard”.

A standard design gallery featuring your not so standard oriental designs.

The perfect carrying case for your new Mac Air.

Great article on selling customers on emotion rather than technology and process.

Scientists create robots that lie to save themselves.

Stickk, a new service real financial motivations for meeting your own goals.

Domino’s BFD builder makes building your favorite pizza a creative experience.

Dec
1

Lots to Do This Week

I just wanted to make sure you were invited to all the awesome web and design happenings this week in Phoenix!

Tues, Dec 4th – Refresh Phoenix

Refresh Phoenix meets every first Tuesday of the month to discuss current internet issues and trends. The topics range from becoming your own boss to css frameworks to make your work more efficient. This month the topic is results from the 2007 Web Design Survey that was put out by A List Apart. This should be a very interesting conversation since there really has never been a survey of the internet industry.

When: Tuesday, December 4th 6:30 – 9:30 pm (come early to get some networking in)

Where:
Inza Coffee
8658 East Shea Blvd, Scottsdale

Fri, Dec 7th – 16th Annual AIGA Art Auction

AIGA Arizona is holding it’s annual Art Auction event in Downtown Phoenix at MonOrchid Studios during December First Friday! AIGA Arizona is pleased to present over 100 original works of art (paintings, mixed media, photography, digital art, sculpture, jewelry, and more) displayed on sale in live and silent auction formats. Plus bid on a selection of special packages that include dining, entertainment and recreation. This year’s art auction will also feature the Mohawk Show.

When: Friday, December 7th 6-10 pm

Where:
MonOrchid Studios
214 E. Roosevelt Street, Phoenix

Sat, Dec 8th – BarCamp Phoenix

BarCamp is an ad-hoc un-conference born from the desire for people to share and learn in an open environment. It is an intense event with discussions, demos and interaction from attendees. All attendees must give a demo, a session, or help with one. This is great because you can both speak and be an audience member.

When: Friday, December 8th 9 am – 5 pm

Where:
University of Advancing Technology (UAT)
2625 W. Baseline Road, Tempe

Nov
16

Girls Love Money

Call me a girl who loves money, but I think the security features in all the new American currency are fascinating. The different levels of complexity of design, the material the dollars are made out of, the metallic inks, the list goes on. Anyhow, I was reading The New Old Five Dollar Bill article over at A Brief Message when I got curious as to what the new $5 actually looked like. I followed through to one of their reference links only to find a really cool interactive flash piece that actually goes through, highlights, points out and explains some (I’m sure not all) of the security features that the new currency provides. Neat huh? I’d wager that cost a pretty penny to make. 😉

Nov
7

Mentioned on TextDrive: sIFR as List Navigation

My sIFR 3.0 inline post was mentioned by Mark Wubben,  in the TextDrive forums for sIFR yesterday, in response to Norman’s request for sIFR 3.0 in a list format for navigational use. I had a little time this morning, so I created an example of sIFR 3.0 used in a list as navigation. You can view the example page here, or download a zip of the files. The css code is the exact same as the inline example, I just needed to set the class on the list item and set the inline style width. 🙂 Enjoy!

Nov
6

Wanda Sykes: Spokesapple for Applebee's

Applebee’s has a new logo, and a new Spokesapple.  Brand New has a reveiw of the new logo, and most of the reviewers are as mixed as the logo elements themselves. Personally, I think the logo brings Applebee’s to the current design trends, but the offset of the apple illustration and the monotone between the company name and the slogan is a little bland. The font choice for the tagline is a bit much, perhaps too much serif going on here.

Identity aside, I like the way Applebee’s has introduced a viral marketing video as part of the rebranding. Setting up Apple auditions for a new Spokesapple. Some of the clips are pretty funny, including the pineapple, orange and pear who auditioned, or Alan the Karate Chopping Apple. Check out the auditions here.

When all auditions were through, Wanda Sykes is the new voice over for the new Spokesapple. I love Wanda, and I think she’ll really bring out the comedy in having a Spokesapple. She is fun, funky, and still very fresh.

Oct
26

sIFR 3.0 Inline

Recently we’ve completed four sites for Civigroup Companies. Within those sites you’ll notice several instances of sIFR (flash replacement text) inline with content. This is no easy task for sIFR text.

While trying to accomplish this feat of magic, I spent quite a bit of time researching different aspects of sIFR and how it works with CSS to understand how to make this work properly and of course, all while being cross browser compliant! So, in order to perhaps save someone else the time and hassle of trying to figure out the magic equation, I figured I’d share my experience.

Step 1: set the sIFR class on a span tag where you want the text to be.

<span class="h1inline" style="width: 325px;">Heritage. Commitment. Vision.</span>

Notice the width style attribute, this is required to make sure safari does not include extra space behind the span and before the rest of the copy.

Step 2: set the attributes in the sIFR-screen.css sheet to make it an inline block element along with the rest of your styles.

height: 25px;
display: inline-block;
overflow: hidden;

Notice the display: inline-block; this is also a safari required attribute.

Step 3: Tune height if necessary in the sifr-config.js

tuneHeight: '-5'

This will help if you plan no not only having your sIFR text inline, but also a link. I was having difficulties with the underline of the hover state being cut off by the flash doc.

 And viola you have sIFR text inline!

Oct
11

Couture Book – Build Your Own Photo Book

Terralever has recently finished a flash application addition for Couture Book that allows the user to personally design they’re own one off luxurious photo book. The books feature hand-bound stitching as well as a slue of personalized options such as torn page edges and photo framing. These books are a great way to showcase personal photography, special moments in your life, or as family keepsakes.

The flash appilcation we’ve created allows the user to pick cover options, upload photos, select personalized options, review their book and then purchase. The usability of the application makes this so easy anyone could create they’re own personalized photo book. Also, the page display for the review of your book includes turning and shadows to make you feel as if you’re really flipping through your creation, so you know what you’re getting before you buy.

Couture Book and some of the application highlights was recently showcased on Fox 10, check out the video clip. After you see it, go pull those photos out from under the bed or out of the closet and make your very own Couture Book. 🙂

Sep
5

Desert Code Camp

Come one, come all to Desert Code Camp! Want to learn more about a new technology or how your peice of the development puzzle fits in with another? Maybe you just want to hang out with a bunch of geeks for two days? 

When: September 15th & 16th

Where: UAT Campus

Classes are filling up now, so sign up on the Desert Code Camp website asap to reserve your seat.

Jul
9

Laura Foy Zero Gravity Interview

Terralever employees, Scott McAndrew and Casey Rayl, were interviewed on Tuesday by Laura Foy regarding the newly released Zero Gravity game that employs Microsoft’s new rival flash technology, Silverlight.

What is this?

This little blog happens to be the personal ramblings of one April Holle - I'm female, outspoken, webbie, a community evangelist, and Principal of Made Better Studio. Check out the about section for more info.

What People Are Saying…