Head First Web Design

Chapter 1. Building Beautiful Web Pages: Beauty is in the eye of your user

It’s a great big (wide) world... but who’s really out there?

So you’ve got your nice shiny XHTML and CSS diploma hanging on the wall, and the prospective clients are ringing your new business line off the hook. Cool, right? Yeah... until you get your first complaint about a bad layout, or a logo that’s just so 1998. So how do you create really beautiful websites and still make sure they satisfy your users? It all begins with good planning. Then you’ve got to write for the Web, know your audience, and, above all else, make sure you’re designing for your users, not yourself.

Your big chance with Red Lantern Design

Jane’s just bought a small web design studio. Red Lantern Design’s been producing small sites for local businesses for several years, and now Jane wants to expand their client-base. But there’s a problem...

The old Red Lantern webmaster used a WYSIWYG editor to create the company’s own site, and now no one can edit the files. Jane’s hired you to build a new site that will bring Red Lantern up to modern web standards and bag the company more lucrative clients.

Well, sure you can. Where do you think you should start?

Sharpen Your Pencil

Here’s the current Red Lantern site. Take a look at the screenshot and, using your web design expertise, annotate it. Note what you like. What do you dislike? Do you see any problems?

Sharpen Your Pencil Solution

Here’s what we thought about the site. Your answers may be a little different, so don’t worry if you didn’t catch all of these.

Where do you start?

There’s not a lot that’s good about the existing Red Lantern site—the logo’s nice, but that’s a pretty damning comment on the rest of the design if that’s all there is to like. But if there’s so much wrong, how can we figure out what to work on next? Where would you start?

Sharpen Your Pencil

Is Joe right? Is there anything else to do? Where would you start?

____________________________________________________________________________________

____________________________________________________________________________________

____________________________________________________________________________________

____________________________________________________________________________________

____________________________________________________________________________________

“Where should I start?” and “Where should I go from there?” are really good questions.

The fact you’re still asking yourself those questions without opening a text editor is a good sign. The answer to both is, always follow a design process. A design process structures your project so that you stay on task and don’t go off in every different direction all at once without accomplishing anything but stress, stress, and more stress.

A process is really just a workflow that determines the order you do things on a web design project. Imagine you’re building a house for someone. It’s their dream home, they’ve got a ton of ideas on their wishlist, and you also need to include the usual things you’d expect to find in a house: walls, floors roof, kitchen, bedroom, bathroom, living areas...

Now ask yourself where you’d start? Would you build the walls first? Would you pick out fabrics, or draw up a blueprint? Which one is going to pay off two weeks from now? Two months? Two years?

Draw up a blueprint FIRST

So building a website is a lot like building a house. If you start with a blueprint, you’ll know exactly where you’re headed at every step: foundations, load-bearing walls, and so on. For a website, you use Information Architecture (or IA). IA is the process by which you break your website’s content into chunks and then organize those chunks hierarchically in relation to one another in a way that’s logical.

Most of the time, each chunk of information is content (text, images, etc.) that lives on a single page. IA is also closely linked with building your site’s navigation. So, if you’ve got bad IA, chances are, you’ll have a bad navigation system as well. If your site doesn’t have solid IA, it will feel disorganized and confusing to users. And that will make users go someplace else to get what they’re looking for.

Brain Power

What content do you have for the Red Lantern site? How will you order it? Will you need any more material?

Sharpen Your Pencil

Start the Information Architecture process by asking Jane about the content she wants for the site.

Here’s a memo from Jane telling you what sections she wants on the site. Write down a one or two word description for that “chunk” of content.

Once you’ve worked out the sections of information for the Red Lantern Design site, you can start to build your Information Architecture diagram. Fill in the spaces provided with your individual sections from the facing page.

Sharpen Your Pencil Solution

You started the Information Architecture process by asking Jane about the content she wants on the site.

Jane let you know what she thought the sections should be. Here are some possible one or two word descriptions for each “chunk” of content.

Given these “chunks” of information, how does your IA diagram look?

There are no Dumb Questions

Q:	Q: Do IA diagrams always have to look like a reverse branching bush?
A:	A: No, though the reverse branching bush is probably the most common way IA diagrams are done. Honestly, any kind of diagram that accurately and clearly represents the sections and subsections of content (and the hierarchical relationship between them) works just fine.
Q:	Q: Will the people I design sites for always be as clear as Jane about what sections they want?
A:	A: Yes... and no. You’ll be amazed at the extra details about sections and design ideas that come from just talking to people. Just because they may not know the names that sections on a site are commonly called, doesn’t mean they don’t have a clear idea about what they want their site to contain. Then it’s up to you to organize the sections logically and hierarchically.
Q:	Q: Couldn’t I just skip this part of the process? This IA diagram and the one in Draw up a blueprint FIRST look pretty similar...
A:	A: No! Don’t skip IA, as it can often determine parts of the design when you come to lay out the site. Besides, although there are some similarities of structure, every site is different, and some sites will have a lot of subsections. The more content you have and the deeper your IA diagram, the more complex your navigation system will be. You’ll not only need top level navigation, but second tier navigation as well. But don’t worry, we’ll cover dealing with IA in a lot more detail in Chapter 3.
Q:	Q: Is an IA diagram just like a sitemap? The “chunks” just look like links...
A:	A: An IA diagram shows a hierarchical relationship between sections and subsections of content in a site. It isn’t meant to show links between sections, but you will use it when you put together the navigation for your site. In fact, let’s take a look at that next...

Will that be enough to help your users find their way around the site?

You need to think about navigation twice in the design process? First, you need to think about your navigational elements—yes, things like buttons and nav bars—while you work on the overall layout of the site.

Navigation will show up again when you begin writing the code and building the layout elements that have to do with users finding their way around the site, as well as linking your pages together. But don’t jump the gun, you need to start by organizing your top level navigation.

Information Architecture isn’t just important for organizing your site’s information; it’s a big deal for your navigation as well. So, when it comes to building your site’s navigation, keep your IA diagram close at hand.

Determine your top level navigation

Top level navigation is usually the most prominent navigational element—the tabbed nav bar at the top of the page, the vertical nav menu in a secondary column, etc. More often that not, your top level navigation links to those sections one tier below the home page in your IA diagram.

Sharpen Your Pencil

Draw a few sketches of the kinds of menu you’re already familiar with and start thinking about which menu type would suit the Red Lantern site.

Sharpen Your Pencil Solution

Which top level navigation design do you think will work best for the Red Lantern Design site? If you don’t know, how do you think you’ll work it out?

Put it all in context

The point of the top level navigation is to show your users where they are within your site’s main structure. We’ll come back to navigation in a lot more detail in Chapter 6, but for now, you need to ask yourself how you’ll style the menu on the Red Lantern site. Time to start thinking about which menu type would suit the site and where it would fit on the page.

Horizontal tabs

Horizontal buttons

Vertical menu

Vertical tabs

Show Jane some basic design sketches

So you’ve got the main content mapped out. What will you need to do next? At this stage, it’s a good idea to show Jane some basic design sketches...

Having a clear idea of where you want to put the building blocks on screen saves valuable development time.

It’s much quicker to sketch a few designs on paper and get Jane’s reaction before you start than it is to waste time working up the code for a bunch of designs when she can only pick one...

Sketches keep the focus on functionality

Your first sketches should be black and white and drawn on paper. That way, Jane will be completely focused on the basic layout of the design (instead of what color the background of the page is or how great her logo looks placed over that image or... you get the picture).

Your designs should show Jane some basic layouts with the content she’s requested in various configurations on the page. The sketches should make Jane ask herself questions like: “Do I want a large image at the top of the page?”, “How many columns do I want?”, “Where should the menu go?”, and so on.

Sharpen Your Pencil

Here’s the first sketch we showed Jane. She didn’t like it because it looks almost exactly like the existing design, but with the main content section broken into two columns.

Now it’s up to you to come up with a basic design Jane does like. Draw at least three more concepts on your own sheets of paper.

Sharpen Your Pencil Solution

Basic black and white sketches keep the focus on the main layout. It’s time to show the basic layout concepts to Jane. Which will she choose?

Great, you’ve agreed on a basic design, what will you do next?

Frank: Nope. We’re going to stick to pen and paper for now. What do you think about adding some color to those sketches?

Jim: Why would I do that? Can’t I just get going with the code and test different colors using CSS stylesheets?

Frank: Well, this way, you get a chance to see how colors interact with one another, how interface and layout elements play off one another once they’re in color, how your navigation system looks in relation to the rest of the layout, and generally whether content’s represented in the best way possible.

Joe: Wow. That sounds like a tall order for one little sketch. Couldn’t we just have shown Jane a few color versions instead of going with the black and white sketches?

Frank: Clients can get distracted by color too early in the process. It’s best to show them something that gives them an idea of the functionality of the site—

Joe: —before we start on the look and feel part of the design process. I get it. The sketches provide us with a painless way to catch any potential design problems before we start coding our design, and they become major obstacles.

Frank: There you go. But we’re not just doing one sketch here, Joe.

Joe: No?

Frank: —

Jim: —No. We’re going to do a ton, all in different colors, and show them all to Jane like we did with the first sketches, right?

Frank: Kinda. What we’re actually doing is creating storyboards to test a few variations. We’ll show Jane the best one or two.

Jim: Wait. What?

Frank: Yeah, these are like the storyboards—you know, that sequence of little sketches that look like a comic strip—the film industry uses to test out shots before rolling the cameras. We’re doing the same thing. Here, let me show you a neat trick for creating good storyboards.

Sharpen Your Pencil

Now that you know what kind of layout Jane wants for the Red Lantern Design site, it’s time to storyboard it. Take a sheet of paper and a pencil and go to work. Be as detailed as possible in what you come up with. If you’ve got some handy, use pencil crayons to add color to your storyboards.

Browser Template

Here’s a cool little trick to use when you’re designing storyboards. Take a screenshot of a website—any will do. Open up your favorite image editing program, and erase the actual website content.

Now you have a browser template to draw your storyboards in.

Sharpen Your Pencil Solution

Finished Red Lantern storyboard. Yours might look a little different, but this is the level of detail you want to see in a final storyboard.

Fireside Chats

Tonight’s talk: Pencil and Design Program discuss Storyboards

Pencil:	Design Program:
Yo, Design Program, can you clear something up for me?	Â
Â	Sure. What’s up?
Well, I’ve gotten a little confused over here. Some people have started calling me “wireframe,” but I thought that was a term that’s used to describe code mockups...	Â
Â	Yeah. It can be confusing, as people also use the term “wireframe” to refer to a code mockup that isn’t totally fleshed out yet. But now isn’t the time to get into code.

Code [eavesdropping]:

Hey! I heard that.

Pencil:	Â
Sorry, buddy, but Design Program’s right. You might think you’re saving time by diving right into HTML, but it could end up costing you in the long run. See, if your client (or you) doesn’t like the design you came up with and wants to go in a completely different direction, you’ve just invested tons of time in to HTML (and probably CSS) that you’re not going to use. It’s a lot easier to file a storyboard away and start with a fresh sheet of paper.	Design Program:
Â	—or a new file. I’d go the formal route right from the start. It saves a ton of time as you can copy details right out of the storyboards into the final design if they work.
I’m not so sure. I prefer not to get all hung up on detail. The whole point of storyboards is that they’re a quick and flexible way to brainstorm ideas and get some designs down. Besides, why waste a ton of time slaving over every pixel’s placement in several designs when the client’s only going to pick one?	Â
Â	I guess you might have kind of a point there, but are you really going to show your messy, smudged, coffee-stained, self to the client, Pencil?
I guess if you’re preparing a pitch for a potential client, it might be a good idea to come up with something more polished and formal. But I still think detailed hand-drawn storyboards should be your first stop when you start to design a new site.	Â

Now it’s time to prototype the site in code

Building a prototype in code has some great advantages. First, even though your design might look great on paper, it might not work (technically speaking) when you code it up. The prototype will give you an opportunity to quickly fix anything (code-wise) before you invest too much time in building a polished finished product.

Also, if you’re working with clients, a code prototype gives you something to show them, and just like your storyboards, you can get useful feedback and make iterative changes.

Relax

What do you mean, iterative?

Iteration is a design methodology that lets you test, analyze, and refine prototypes of work in progress. At each stage, you go through each of the steps in the design process—it’s cyclical—until you get something you (and your client) are happy with.

Ready Bake Code

Go ahead and grab the files for the first code prototype from:

www.headfirstlabs.com/books/hfwd/ch01

Then we’ll give it a quick test drive to see how everything’s looking.

Repeat yourself

Remember, you need HTML for every page in your IA diagram. Once you’ve downloaded it, duplicate the code and name the files accordingly. You’ll link them together in the end.

Test Drive

Time to check the site out in your browser. Once you’ve tested the site, show it to Jane to get some fast feedback on this iteration.

Exercise

Here’s the text Jane just sent over. Grab a stopwatch and set it for 15 seconds. Hit the Start button, and begin reading this text. When your time’s up, write down what this text is about.

Note

MEMO

From: Jane

Subject: Site content

People are more conscious of design than ever before. Whatever the service or product, whatever the consumption or value, an intangible context surrounds all interactions. Successful businesses realize that they offer designed experiences, regardless of service or product, and invest the necessary resources to enhance both. People are not only more conscious of design, they are hungry for images, themes and experiences that satisfy them on many levels: aesthetic, pragmatic, ideological, cultural. They are hungry for “good” design. Design is about connecting. Working with our clients, we emphasize a thorough, deeply considerate research process with an emphasis on learning and listening. At the same time, we center the process on audiences and contexts. We design for real people, not demographic targets. We understand that real people are looking for something more and guide our clients, processes and designs in creating greater tangible value for all. Red Lantern designs and builds simple, usable, and attractive websites that are fast, readable, and accessible - all using web standards.

We specialize in: interface design - designing and building web interfaces and templates using web standards; web site redesign - if you are looking to update your site or move it into CSS; markup and css optimization - simplify markup and css to improve speed and make your site more structurally sound; consulting - help with design strategy, css and markup suggestions, and seminars.

____________________________________________________________________________________

____________________________________________________________________________________

____________________________________________________________________________________

Don’t ruin a good design with bad copy

All the awesome design work, storyboarding, and prototyping in the world is not going to save your site if you don’t have any content (or if the way you present your content stinks). So how will you ensure your content’s interesting?

Writing for the web is different than writing for regular print.

Instead of reading your content from left to right, beginning to end, like a book, users scan the text for keywords and concepts—to give them an idea about the contents of the page.

When you combine this with the fact that users generally don’t spend that much time on individual pages, you know you are going to have to write differently. The word of the day is scannability!

What makes text scannable?

There are several techniques you can use to make your text scannable. Short paragraphs, headings, bullet points, and clear meaning will all help users scan your content more easily.

Long Exercise

Here’s the text Jane just sent over again. Rework the copy so that follows the scannability checklist.

Note

MEMO

From: Jane

Subject: Site content

People are more conscious of design than ever before. Whatever the service or product, whatever the consumption or value, an intangible context surrounds all interactions. Successful businesses realize that they offer designed experiences, regardless of service or product, and invest the necessary resources to enhance both. People are not only more conscious of design, they are hungry for images, themes and experiences that satisfy them on many levels: aesthetic, pragmatic, ideological, cultural. They are hungry for “good” design. Design is about connecting. Working with our clients, we emphasize a thorough, deeply considerate research process with an emphasis on learning and listening. At the same time, we center the process on audiences and contexts. We design for real people, not demographic targets. We understand that real people are looking for something more and guide our clients, processes and designs in creating greater tangible value for all. Red Lantern designs and builds simple, usable, and attractive websites that are fast, readable, and accessible - all using web standards.

We specialize in: interface design - designing and building web interfaces and templates using web standards; web site redesign - if you are looking to update your site or move it into CSS; markup and css optimization - simplify markup and css to improve speed and make your site more structurally sound; consulting - help with design strategy, css and markup suggestions, and seminars.

Scannability Checklist

You don’t have to use them all, just the ones that work for your content.

	Clearly written headers
	Small(ish) paragraphs
	Use bold and italics to emphasize important words or phrases.
	Use lists (ordered or unordered) for appropriate content.

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

____________________________________________________________________

Long Exercise Solution

You edited Jane’s text, following the scannability checklist.

Scannability Checklist

	Clearly written headers
	Small(ish) paragraphs
	Use bold and italics to emphasize important words or phrases.
	Use lists (ordered or unordered) for appropriate content.

Note

MEMO

From: Jane

Subject: Site content

People are more conscious of design than ever before. Whatever the service or product, whatever the consumption or value, an intangible context surrounds all interactions. Successful businesses realize that they offer designed experiences, regardless of service or product, and invest the necessary resources to enhance both. People are not only more conscious of design, they are hungry for images, themes and experiences that satisfy them on many levels: aesthetic, pragmatic, ideological, cultural. They are hungry for “good” design. Design is about connecting. Working with our clients, we emphasize a thorough, deeply considerate research process with an emphasis on learning and listening. At the same time, we center the process on audiences and contexts. We design for real people, not demographic targets. We understand that real people are looking for something more and guide our clients, processes and designs in creating greater tangible value for all. Red Lantern designs and builds simple, usable, and attractive websites that are fast, readable, and accessible - all using web standards.

We specialize in: interface design - designing and building web interfaces and templates using web standards; web site redesign - if you are looking to update your site or move it into CSS; markup and css optimization - simplify markup and css to improve speed and make your site more structurally sound; consulting - help with design strategy, css and markup suggestions, and seminars.

Your text might look a little different, but as long as you’ve used the techniques to make the text more scannable, your users will thank you.

Welcome to the New Red Lantern Design

Note

Headings orient the user within the text. Note, you won’t need one at the top of the page, as the logo will serve as a header for the page.

Red Lantern is a small web design and consulting firm specializing in standards-based web design and development. Our goal is to build simple, beautiful webpages that make your information easy to find and your users happy.

If you or your company are interested in working with us, please check out our portfolio of design and branding work and contact us with your project details. We look forward to hearing from you and making your presence on the web a little simpler and easier to find.

View our full portfolio

Contact Red Lantern

Note

These links will be a short unordered list with the bullet points removed by our CSS.

Sure, she could be. But this version is short, to the point, and a lot more compelling.

It tells users exactly what Red Lantern does, and what they can expect from working together. We edited out a ton of content—long words, sentences that you had to read three times to understand, and so on—that would have clouded this simple message.

Besides, worst case, we can compromise with Jane and put back in some of her text... carefully edited, of course!

Test Drive

Once you’ve edited your text so that it’s more scannable, all you need to do is update the text in the code markup that you’ve already developed for Red Lantern, test it in your browser, and if you’re happy with it, show it to Jane.

Web design is all about communication, and your USERS

So how do the two versions of Jane’s site compare? Every site’s ultimate aim is to communicate something to its users. If your website doesn’t communicate what you want it to, your audience will go to another site looking for the experience or content that you couldn’t give them.

This is known as User-Centered Design. When you build a website, you’re building it for your users, not for you. You design for your user’s strengths and weaknesses. You want to use every technique possible to bring users to your site, help them find what they’re looking for, make sure they have a rewarding experience, and keep them coming back.

The process you followed in this chapter—

• Pre-production. using Information Architecture and storyboards to build a blueprint for your site so that you’re as efficient and focused as possible when you go digital.

• Navigation. is based on your IA diagram. It’s more than just linking pages together. Navigation helps your users find information.

• Layout. uses HTML and CSS to build the site’s interface (which you already came up with on paper back in the pre-production phase).

• Writing. “fills” the design up with the scannable content that your visitors come to the site for.

—had just one aim: to produce a great-looking site that tells users all about Red Lantern Design.

Your Web Design Toolbox

Wow... 36 pages in and you’ve already managed to totally rework a pretty crummy looking website. Next chapter: we dig deeper into pre-production.

Bullet Points

• When you design sites, you should practice user-centered design—creating sites that focus on meeting the needs of your users.

• A design process helps you structure a project so that you stay on task and get things done in an efficient manner.

• Most, if not all, web design projects have 4 components: pre-production, layout, navigation, and writing.

• Information Architecture is the process by which your website’s content is broken into chunks and then organized hierarchically in relation to one another.

• Developing your site’s IA is a two step process: organizing your site’s information, and building an IA diagram.

• An IA diagram visually represents the hierarchical organization of sections and subsections of information in your site.

• Top level navigation usually links to those sections in your information architecture one tier below your home/main page.

• The design of your top level navigation depends on the overall design and layout.

• There are a handful of great models for designing top level navigation: horizontal tabs, horizontal buttons, vertical menu, vertical tabs.

• Storyboards are used to visualize your design and test basic layout concepts before you jump into code.

• Storyboards are a great way to catch potential design problems before you spend time coding your site.

• Writing for the web is different than writing for print.

• Web users scan webpages instead of reading them from beginning to end.

• Web content needs to be written so that it’s scannable.