EK Web Design

I’m no spring chicken to typography on the web. In fact, when I first started focusing on web design, good typography was just starting to break onto the scene. I remember that designers where super excited for more choices, and some folks where worried that people would begin to litter the WWW with poor typography. In my opinion people would be hard pressed to make web pages look any worse than they had been since the birth of the web. 

The key to great web typography is context. If the site is for a bank, users probably wont appreciate display typefaces like grunge, retro, or most everything you’d see on a cheap concert poster. Those typefaces are too playful for the brass tacks environment of official corporate sites. Any good designer knows to save their favorite display face for their tumblr blog or something playful in which there are relaxed stakeholders if any.

Just because you can load up any typeface you can get your hands on now doesn’t change the rules of typography that the publishing industry has employed for decades. Use logic when picking a font to use and to state the obvious, don’t use crazy font’s for body copy or I will hunt you down. 

I have on loose rule on web typography post @font-face.

Users should never feel like the type choice is out of place.

Keep type legible and if you do decide to use a face that’s visually interesting, do so in a way that people can still enjoy the purpose of the web site, and honestly, the more conservative you are with your type choices the better cross-browser/device support you have. 

Previously, I thought wireframes where these cute little sketches a designer would do on the fly to help guide them through the process of designing something, but after reading this I find that much consideration has gone into wireframes.

I typically will scratch out a quick wireframe for personal reference and then immediately jump into designing or coding, but I could be taking much, much, much more time in the consideration of each block or chunk of information that will be stubbed into the layout instead of doing what I like to think of as “the cool stuff” first. This approach works for me because I have a long process of going back and forth between the two resulting in my finished product, but this is just for my personal projects and doesn’t take developers, production managers and stakeholders into consideration.

After working on various teams I’ve grown to acknowledge that there are some very powerful visual elements that come into play when displaying your work. Often it has to do with color, type, and images and I’ve learned to tread lightly on visual creativity in the early stages of a project because someone may react negatively to something as small as an image of an orange cat instead of a white one. Because people can get off track so frigging easily, simple wire frames come to save the day.

No art. No eye catching design elements. No bullshit for now. Good wireframes are devoid of all “the fun stuff” and serve as a brass tacks arrangement of “must have” content. Whether your handing off wireframes for a developer, project manager, or client, they’re soul function is to answer “what goes where” and “what happens when a user does this”. 

There are several numbering conventions that can be used for complex wireframes that aid very well in cataloging all the placement of content on a page. This way when your client wants add or amend something they can communicate to you that 2.3 needs to have another list item added to the drop down. 

In a nut shell there are many intelligent ways to go about creating wire frames for your team, but it’s up to you to find out what the most successful method may be. Wire frames don’t have to be cute little chicken scratch boxes in your moleskin that never get seen. They CAN be a perfectly documented skeletal structure to a large website that aids the entire team in the early stages of production and standardizes the organization that will be used from here on out.