You are currently browsing the monthly archive for September 2010.

Wireframe for a website

A hastily drawn wire frame for a fictitious site.

I’ll always be the first to admit that a blank page scares me because there’s no structure on which to start hanging ideas. When designing web sites and web pages, that’s where wireframes are a lifesaver.

In order for content on a site—and on an individual page—to be relevant, easy to consume, and quick to find there needs to be agreement between the designer, the clients, and the site users. Wireframes provide the opportunity to have a dialog between these three entities, albeit usually the site user is in the form of a developed persona.

I’ve used wireframes from the beginning and have never considered creating a website without first sitting down with the client to discuss the needs of the site and how to navigate it.  But, I’ve only used wire frames for the site navigation. Having just read Shades of Gray: Wireframes as Thinking Device by semanticwill, I’ve realized that there’s so much more I can do with wireframes to make the design and implementation process of web site creation easier and more enjoyable. (It’s never fun trying to get somewhere when you have no map and a deadline.)

Wireframes are great for proposed data location on an individual page, which takes into account the relevance of the information and it’s hierarchical position in context with other information elements. Often there’s disagreement on the position of individual elements and wireframes offer a visual perspective that can help answer questions like, Is this where customers expect to see this kind of information? or What is the best place for this type of information?

Like creating thumbnails and roughs when working on a graphic design solution, wireframes allow the designer to try different ideas in order to determine the best information layout. And, clients appreciate seeing the proposed solution rather than listening to a description of it and trying to imagine what it will look like.

With an “updated” tool in my toolbox, I’ll be better able to meet the client’s needs and, just as important, enjoy the process.

I had the opportunity to hear John Allsopp speak today about the future of web design. John is a web evangelist, author, speaker, and teacher of CSS. And, his enthusiasm for the future of the web is contagious.

As I previously wrote, my interest in the web started about 18 years ago, when the web was in it’s infancy. Bad design abounded causing limited access to information and frustration for designers and developers alike.

John took us on a history tour of the web, which sounded a lot like the “we had to walk barefoot uphill – both ways- to school when I was your age” speech a lot of us have heard from our parents as kids. But, in terms of browser capabilities in the 90’s and early ’00’s, that’s certainly how it felt.

Creating functional, good looking sites required lots of graphics that had to be cut and precisely placed to reduce the page loading time. One large graphic might actually be 4 smaller ones. If a link to a graphic was broken, 1/4 of the picture was missing. Animation was limited to GIFs and, really, it was best not to use it at all.

CSS (Cascading Style Sheets) was introduced in 1995 allowing developers to control the look of a site for the whole page instead of element by element.This was a major breakthrough. It’s use expanded with CSS2 in 1998. I started learning CSS2 just before I changed course for parenthood. At the time, I was amazed by what CSS made possible.

After seeing what John demonstrated today, I’m chomping at the bit to learn CSS3. Editable type independent of the user’s computer?!? Wow. GPU generated background gradients?!? Neat. Clean, beautiful animation that adds to the user’s experience?!? Unheard of – until now that is.

Pair CSS3 with HTML5 and the future of the web looks amazing. I’m excited that I no longer have to trudge uphill -both ways- to make great looking websites.

Close up of paper edge showing paper fibers

Photo credit: ChP94 on http://commons.wikimedia.org/

I have had a love affair with paper since I was old enough to scribble on it with crayons. I don’t mean I like paper because I can write on it or draw on it or fold it into some interesting shape. I do like those things, but that’s not why I obsess with paper.

I mean I love paper. I love the feel of it, the smell of it, the amazing variations in texture and color. I love that it’s made from so many different materials – cotton, linen, hemp, wood, rags, and banana leaves – and that each of those papers has a different look, feel, and weight. I’m sure there are more materials paper is made from and I just don’t know about them – yet.

I would go into paper shops just to look at the racks of possibilities and end up buying some kind of paper solely because it looked so neat or felt so luxurious. Then I’d go home and add it to the stack of other possibilities waiting for me. I realized that one of the aspects of paper that I love is that each blank sheet could be anything. While I’m the first to admit that scares the hell out of me when I have to come up with an idea, I still find a blank page without any expectations a beautiful thing.

Unfortunately, if all the paper around has no expectations attached to it, it tends to remain there, unused, taking up space. I realized my mom had a point about my paper obsession when I had to clean out a closet and most of what I took out of it was blank, beautiful paper. If I wasn’t going to do anything with it, she argued, why keep it? Point taken. I stopped myself from going to paper shops or picking up the tablets at conferences, but my love of paper didn’t abate. I just put it on hold.

Now I’m learning about paper from a designer’s perspective, which is very different from a layperson’s. Designer’s actually do things with paper and (yikes!) have expectations of paper. I’m having to conquer my fear of the blank page, although I still prefer some sort of structure on which to begin.

My class visited PaperPlus this week. We got to see first hand what a paper supplier looks like and ask questions about the process of working with a supplier and print shop. The process of speccing a paper for a project and working it into the budget seems daunting right now, but I’m sure by the time I graduate I’ll have a pretty good grasp on it. I do know the first thing to do now, though. Form a good working relationship with a paper supplier.

Densmore Typewriter ad 1896Writing is everywhere – boxes, bottles, billboards, magazines, newspapers, flyers, email,  and websites- to name a few places. There’s one commonality between these disparate forms of writing: they use language. How each form uses language differs greatly and each has different expectations from the reader’s point of view.

Writing in newspapers and magazines is informative, educational, and opinionated depending on which section of the paper, or what kind of magazine, you’re reading. We, as readers, expect newspapers and magazines to have high editorial standards and be written clearly. OK, you got me there. I don’t think Us or People consider their editorial standards much, but I digress. Generally, we read these materials at leisure – over coffee in the morning, waiting in a doctor’s office, or riding on public transit.

From other printed ephemera (boxes, bottles, billboards, flyers, etc.) we decidedly expect less. The copy used on them is primarily for persuading – “Buy XYZ because it’s chock full of vitamins and minerals!” (Gee, I didn’t know foot powder needed vitamins and minerals.) The copy on these sources is written for accessibility and generally has a friendlier approach. These materials are typically read in passing – walking down grocery aisles, driving down freeways, grabbing the flyer off the windshield in the parking lot before tossing it in the back seat.

Websites, while including all genres of printed material, are read differently. We go to a website for information, to answer a question, to complete a task, and in doing so we expect to access that information or perform that task quickly and easily. Anything that gets in the way of our purpose is, at best, annoying, if not downright frustrating.

Across all these disparate forms of writing is an overarching expectation – good grammar. Reading something that’s well written imparts a sense of confidence in the information. If the writer misuses their, they’re, and there can we really trust him to know what he’s talking about? Likewise, if the writer’s writing lazily and using netspeak are you going to respect his opinion or knowledge?

In exploring writing, I came across a blog post on how to write a good first message for an online dating service. The number one rule was “Be Literate.” Messages that used netspeak, had gross misspellings, or bad grammar (or all three!) didn’t get a a response. I can’t agree more. Well written messages, articles, etc. give confidence to the information and, more importantly, eschew obfuscation. (One of my favorite phrases, because it doesn’t follow it’s advice.)

I was first introduced to the world wide web in 1992 by my brother. I found it fascinating and wonderful and compelling and ugly and awesome. And, it was something very few people knew about. I remember when I lived in Chicago, my brother and I would always point out the URLs we saw in ads, usually on the sides of buses, because they were so rare.  That was 1993/1994.

Homepage for Morgan Adams website (2001)

Homepage for Morgan Adams website (2001)

Fast forward a bit, and I had the opportunity to put my fascination to work. I had learned quite a bit about website construction and disliked most of what I saw. (If you’re ever curious about early website “design”, check out the Wayback Machine for some gross examples.) I started creating websites, for pay even, and getting complements on them, which was even better – not that I’m dissing a good pay check, mind you.

What I liked most about my work was making the information accessible. Most people were putting wizzbangs and fugliness on the sites to make them eye-catching, but in turn, rendering them almost useless. My mission was to make clean, simple, useful websites that gave people the information they wanted in the least amount of clicks.

Injury Law page of Morgan Adams website (2001)

Injury Law page of Morgan Adams website (2001)

Fast forward again to today and that’s still my goal. However, I’m playing catch-up because I took some time out to be a stay-at-home parent and the technology passed me by. When I went back to work I was mainly working on internal sites for clients where I was not the developer, but the maintenance tech. So, I can’t wait to find out the answers to questions I’ve wondered about, but not found the answers to, like why was <bold> replaced with <strong>. I know it’s standard now, but haven’t discovered the reasoning behind it.

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 8 other followers