The Web is finally, fully here — central, essential media. Not embryonic, not peripheral, not optional. It is fluid, interactive, and useful in ways that no other medium has ever been. It is changing everything.
Including our design lives!
For me, as for many of you, it’s been foreign. My own sense of design — the intuitive “feel” that comes with artistry and experience — is tuned to a static page. On a static page — a magazine page, for example — the designer controls the entire experience. The size, color, style and position of every element creates a visual harmony, like a painting. You move through the page in the way and at the pace I’ve designed. If I want you to feel tension or curiosity or delight, I can probably make that happen.
But not on the Web, at least not usually. The Web is not a page. It’s a place. It’s the mall, the market, the town square. On a good day, it hums. On bad days, it’s chaos, loose paper, a million filing cabinets dumped open, the TV left on, a picnic in the wind.
The biggest part of design is editing. Editing — whether prose or music or movies — is a matter of deciding what to include and in what sequence. Who wants to read the end of a story first? What freshman sits down in senior Greek and expects to get it? Data has no meaning until it’s sorted, edited, presented. Without this, there is no story. There can be no thrill, no surprise, no delight. We go to movies not to see explosions but the right kind of explosions, in the right places, at the right times. We go not to hear people talk but to hear a certain kind of talk, with a certain air and emotion. If the audience could click its way through a stack of scenes, jumping here, shuffling there, in any sequence, it would be bored by what it produced more often than not.
The Web has no transcendent rhythm. Everything comes at you differently — flickering, stuttering, demanding. There are few pauses, few silent spaces, little room for contemplation or even real thought. Get in, move around, move on. Hurry. Skim. Jump. Click. Don’t stop. It’s an agitating environment that, unlike a book or a song, has no end. No climax, no closure. There is always another click.
Here are a few tips before you dive in.
1) Before you start designing, know what you want to say and what you want to have happen. Getting clarity up front is a make-it-or-break-it first step and the hardest part of any design. Failure to define a vision — and work to it — is the most common failure on the Web and why the Web is so dissonant.
2) Think not in pages but in sound bites. Condense a message to a few words, a picture, a square inch. That’s good practice in print, but it’s essential on the Web. Viewers don’t see pages, really; they see bits.
3) Think top-down, like a newspaper — big news first, less important as the page descends, the inverted triangle. It sounds obvious, but the viewer can’t see the page all at once.
4) Limit your links. A page with 50 links each leading to 50 links puts 2,500 destinations within two clicks. People can’t process that many options! Focus your choices, too. It’s easier to decide between two shirts than bleu cheese, a new sofa, and a back rub.
5) Be consistent. If your navigation button is in 11-pt Verdana, upper right corner, leave it there on every page. Imagine your car radio buttons rearranging themselves tomorrow.
6) Limit your fonts, sizes and colors. Every difference alters the message in some way, so don’t use differences arbitrarily. On this page you’ll see only two text typestyles, all black or gray or blue, a clear hierarchy, very deliberate.
7) More of a personal opinion than design advice, avoid shocking colors that don’t occur in nature. Even if you’re selling cotton candy, an entire screen in radioactive pink may cost your viewer his lunch.
8) Before approving your design, ask yourself three questions: 1) Is it beautiful? 2) Is it simple? 3) Is it clear? You want a yes on all three.
That’s my list. What are your experiences designing for the Web, and do you have any tips that you would add?
———-
By the way, we’ve recently indexed Before & After articles by topic. You can find 23 that are useful for Web design here.
.
Eight very good points! Well written and to the point! Thank you. I share this with several friends.
For additional info on designing and writing:
Don’t Make Me Think by Steve Krug — How to design a website so that people will find what they need quickly. One of his pieces of great advice: Think of your website as a billboard, and people are driving by at 65 miles per hour.
Writing for the web:
Letting Go of the Words: Writing Web Content that Works by Janice Redish — Focuses how to write effective content for your website. It is especially helpful if you have an information-type site.
9) #5 Part 2: Consistency is king. [Home] should always be to the left or top, and [Contact Us] should be to the right or bottom.
10) “Simple” duplicate menu at the bottom of the page, so the user doesn’t have to scroll back up to go to the next page.
11) Logo should always be an active link to the Home page.
I do the layout for a computer club newsletter, and we have recently moved from a print to an electronic PDF copy. We have, for many years, used Palatino for body text, but folks are asking me to switch to a sans-serif font, which they claim will be easier to read on screen. This goes against my elementary-level design training, and yet I see it happening in lots of places. Is there really a preferred body text font for onscreen viewing?
A critical 4th question you should ask yourself: Is it useful?
The only web site I have designed is my own, and I have made it the way I like it. I think it is clean, simple and to the point. It has evolved over the years to what you see today, and I “think” I have stumbled upon the tips listed in this Before & After conversation. Perhaps some would think otherwise, but I will be vulnerable and post my web address to let the readers decide. Visit: http://www.textualcreations.ca
Personally, I don’t respond well to most Flash, because it usually takes too long to load. When I am researching I simply don’t have time for these delays, and I will likely click right on by. Just to be fair, though, I do see the value in Flash, because it really is an art form that should be shared on some level.
Here is a great example of Flash used as a whole web production. I find the music that comes after the intro hauntingly beautiful, and I stay just for it. I love to take my time wandering this site.
This site has a tasteful use of Flash that loads quickly. I actually created the 3D coolers for this Flash, although someone else put it together. It looks like they changed it a bit, as it used to transition quite smoothly and not at the hurried pace it appears today. It would also be nice if it did a continual loop.
There are also many web sites that are just plain beautiful and make me feel comfortable and at ease. I am often envious of the look that they have achieved and wish I had the skill (and time) to pull it off with my own website. A case in point would be something along the line seen in the Before & After magazine 0667 | Lessons from a beautiful site. Very tastefully done.
Interesting conversation starter.
In my experience, there are far too many businesses, especially smaller ones, that use more of a ready-fire-aim approach to getting their website going.
The latest attraction for me has been to try to find out where the client makes their money and to help users find about that as quickly as possible (since that is probably what they are visiting the page the first time for). It is a revolutionary question for some clients, who prefer to lead with “about us.”
#3 — Stop thinking in pages. Think screens. A web site visitor can see only the part of the page that fits the screen — “above the fold,” if you are still in newspaper-land.
Better to be screen-based. Think interactively. Think “drill down,” not page down. And not deep dive down either.
Map your pages:
Work with sheets of paper (landscape orientation), and lay them out on a table top, overlap one sheet over the next layer, and you will start to organize your “pages” in terms of screen-based flow.
One top sheet for each top navigation header . . . then the pages under each header. You will learn to work more broadly and start thinking in “drill down.” Think also of the links from section to section.
Your “pages” turn into screens, structured and sequenced.
Over the years, I have struggled so much with each site I designed through trial and error. Fonts, colours, dimensions, tension points, contrast, ability to expand . . . etc, etc — mistakes I made from the onset. I have listed these so that now, I just start from back to front, meaning I take the list, review all my limitations, and then avoid repeating them before I get going. It saves me from reworking my designs over and over.
I also find that if the clients see too much too soon, they start envisioning more and more and want to change their ideas and direction, and I never get anywhere. Hold off showing them anything untll you want them to sign off at that stage.
I agree about the Flash. Another thing to avoid like the plague: animations! They are so 20th-century! Animations are distracting when you’re trying to read a page.
I like pages that load quickly. I’ve heard it said that if your page doesn’t load in 30 seconds or less, your viewers will go elsewhere.
I love the suggestions people are adding to the list.
The 8-point list is great. I would like to add 2 more points:
(1) A site that exceeds 10 pages should consider having a functional search feature or a site map. This is so visitors can have another way to find what they are looking for other than navigating on their own.
(2) If you are going to use dynamic design tactics, input in alternate capabilities for the users who have Javascript turned off. Usability and accessibility, combined with the wow factor from design — this formula results in the ultimate website.
Karen,
Yes! The type of font that you use on-screen matters. There are no “pre-set standards,” but the strengths of a serif font, namely its elegance and complexity, become drawbacks in the world of the web.
Every person viewing an on-screen document will see it slightly differently. Their screen size may range from the size of an iPhone to that of a 30″ monitor. The screen may be set to a very high or low resolution. Old screens sometimes lose brightness and contrast. All of these things factor into readability, and these are things you can’t control as a designer.
Of course, you can choose the font. The elegant variations in line intensity and the decorative serifs in the font Palatino start to run together when seen at a small size. Serif fonts in general can become a problem when the thin portions of the font (say the curve of an “f”) are visually “lost” at low resolution.
Sans-serif fonts eliminate the “noise.” They are simple and clear. When the reader is on their laptop in a brightly lit airport, or trying to check mail on their BlackBerry while riding the subway, a simple, easy-to-read font is important.
Serif fonts are great for larger text on the web, such as headings or pulled quotes that require some elegance. In print, the quality of paper and printing is enough to overcome the “distracting” elements of a font. But for the average body text on the web, serif fonts can become difficult to read.
I find the most difficult thing about making a website is getting clients to organize their material. A lot of them think that everything is important, and they can’t rank-order what they have to present. Others can’t seem to understand that an online reader doesn’t want to scroll down for 15 endless paragraphs of prose. People are often totally at sea when it comes to self-presentation, and they’re depending on us to magically make that happen. So I would have to say that frequent sessions with the client before even beginning the design are key.
John raises some important and relevant points, but having studied web design, I was taught that the most important thing is function.
Web sites tend to fall into one of six categories:
1) E-commerce (function: to sell products, tickets, etc.)
2) Corporate (function: to provide information about a company, its products and services)
3) News (function: to deliver real-time information on current affairs, weather, stock prices, etc. — may be specific to a particular TV network, newspaper or radio station)
4) Information (function: to inform users on specific topics; e.g., online encyclopedia, city information, etc.)
5) Entertainment (function: to provide entertainment/interactivity with games, video clips, music, etc.)
6) Personal (function: to share individual thoughts, experiences and interests)
As designers we tend to emphasize aesthetics, but to most people using the web, function is more important; the most beautiful site is wasted if it doesn’t deliver what the user wants. The key is to find a balance between visual design and content, and a lot will depend on the function of the site and target user.
If people can’t get to what they want quickly and easily, then they’ll move on.
Unless essential to the function of the site, don’t include music, animations, cartoons, videos, etc., which serve only to slow down loading time.
As John says, keep navigation simple and consistent.
Also, make sure that your navigation and links work and are kept updated. Navigation buttons or links that lead nowhere only leave the user feeling frustrated.
Nice list. One of my mantras is “make it easy for people to do business with you” (whatever you might mean by “business” on your site). That means make it easy for people to understand you, find what they are looking for, contact you, and pay you; so no clutter, not too much material, good design that easily leads the visitor’s attention correctly around the page. It also means, except in special cases, to avoid Flash unless your audience is desperate for your material. I was always told you had eight seconds to grab them (not 30).
I suppose another mantra might be, “make it easy for people to want to do business with you, so make it interesting, appealing, intriguing, promising.
Re: the introduction; I wonder if the internet is not so much a “place” as an “event”?
I definitely agree with point five and the comments about consistency in design; this is absolutely key to easy navigation. Many sites make it incredibly difficult to find the information you are looking for. I will exit a site straight away if it assaults my eyes with links everywhere and a lack of coherent design.
This was one of the biggest challenges when I built my site, where a large amount of content needed to be made easily accessible. It may not be the flashiest site on the web, but as a functional way to impart information to the reader, I hope it succeeds.
Karen
Adding to Naomi’s comments, Verdana (sans-serif) and Georgia (serif) were specifically designed for screen usage. Happily, all Macs and PCs come with them, so you can use them on your sites and know that the vast majority of visitors will get reasonably legible text.
Responsibilities for designers are growing along with the Internet. Looks are not everything.
1. Always be sure to include keywords in the meta tags and in the on-page text. This helps the search engines find and index your Web site on what the site is about.
2. Use real text on every Web page. Search engines still cannot read text embedded in graphics.
3. Avoid long pages that require a lot of scrolling. Keep it short and simple for a better user experience.
4. The design should complement the content and not overwhelm it. If I leave a web site and remember only what it looked like and not what it was about, the owner of the Web site loses.
Very good article. I would only add these two ideas: Think about your audience. And treat your site as a tour guide. What you want to say and how you want to say it is only as good as the intended outcome you expect.
For instance, if you want more tech-savvy, elderly people to sign up for your newsletter, you have to consider that the color, contrast, type size and style, and tone may need to be more conservative than your tastes. And you have to consider the best means of attracting them to your site are not usually electronic, but through direct-mail, TV ads, or magazine ads that they read.
Most businesses do not start with the audience. They are more interested in what they want to say, thinking the value is having said it. But, seldom do they realize people want a reason to value your message.
So, in addition, treat the website like signage in a huge building. Be the tour guide. You have to tell people what’s significant and where to go. They have to have a sense of where they are in relation to everything else. This eases the experience for site visitors, and helps them understand what you want to say and why it’s important.
Great topic and comment submissions! I, too, am trying to make the transition from print-based to web-based design, and I have a couple of tips / comments to share with anyone else doing the same:
#5 is key — consistency! If you are making some of the hyperlinks in your body text bold and red with no underline, make them ALL that way in the body text on every page.
Speaking of hyperlinks: Print designers, it’s time to nix using underlined text as headline text embellishments. An underlined word or phrase on the web = hyperlink in everyone’s mind now, even if the links on your site are all formatted completely differently with CSS. Underline = link.
Avoid the temptation to use tables as a layout method! Doing so automatically dates your site to the ’90s, despite whatever content is being shown within those tables. Tables are for statistics, figures, etc. only.
Finally, don’t be afraid to use white space or empty space in your web projects. Because the internet is so data-driven, it seems as though many clients want to cram lots of text, links, buttons, and banners together. When showing designs to clients, keep them light and airy — CSS allows you to set leading and kerning just like print design apps do!
Thanks again for the great conversation-starter!
One good way to think about web site design is to think about the user experience, which is a much more open concept than thinking about design in a static environment like a magazine page or a brochure.
What kind of person is coming to your site, and how will their experience differ from that of another visitor? Mapping out different user experiences through the use of personas is a crucial element of successful web site design. Site design must satisfy various users in a non-linear fashion. The path taken through your site, and the experience of your site will vary widely among different visitors.
Just a brief word about the home page: Visitors should know within about five seconds what you do and what you stand for, or you may lose them before they get further. Often, designers delight in whimsy and mystery. This isn’t a luxury we often have online. Web comprehension needs to be instantaneous.
Obviously, there are exceptions to any such maxim. But those are for people who have truly mastered the medium.
I took a web class years ago and the instructor had one good rule of thumb. He told us to check his website to be sure our site wasn’t on it!
Great topic. Tip 9: Phone book! I use the internet business sites instead of the Yellow Pages, and I hate a site where I have to dig through two to four pages for basic contact information. Check out the Apple site for basic phone and direction to your local Apple store. . . . it takes several minutes and pages! Regardless of the site, please put basic info in an easy-to-find location, including stuff like employee directory, etc.
My local HMO site has no information on its entire site about its 12 clinics. It has info on its two main hospital but not the clinics. I can’t tell you how frustrated I was when I fell on some ice and found myself in bed with an iced knee trying to find the nearest Urgent Care clinic’s phone number on my laptop. Ended up hobbling to the phone book and using my microscope to read the phone book’s number 2 font, and finally found the number!
Check out another helpful site, How not to display your artwork on the Web. This site has two articles on how to and how to not display art on the internet. Artists have absolutely the worst sites on the internet!!
Great tips on web design, Before & After; I have enjoyed reading other designers comments also.
I recently re-designed The Forum‘s website with the help of some great designers at Redback Solutions.
Our old site was difficult to navigate due to having so many pages of information, and it really needed a fresh new look.
I’m so happy with our new-look website; it is beautiful, fresh, clean, informative, easy to navigate and interactive.
Some main issues I had to think carefully about were:
• A large site must be planned carefully, where do you want your visitors to go first?
• What information is most important to share?
• How to attract people to sign up to newsletters (increase database).
• What are the main products and services that you want people to see (and therefore sign up for/participate in)?
I agree that a large site must have an internal search function (which is stage two of my new website design) and site map to assist navigation, as navigation is so important.
Click-throughs are another important consideration in navigation. Give readers the information that they want quickly and easily, or they will go elsewhere.
A simple, clean, fresh design will attract readers to your website. Don’t clutter your home page with information, but provide easy navigation and direction through hyperlinks (images and text).
There’s a great book out there called “Taking Your Talent to the Web” by Jeffrey Zeldman. It’s now available as a free download from his website.
As the author notes, the book was written in 2001, and “while browser references and modem speeds may reek of 2001, much of the advice about transitioning to the web still holds true.” I read it years ago and loved it.
Any book by Jeffrey Zeldman, Eric Meyer, Steve Krug (already mentioned above), or any of the people who speak at An Event Apart will be a valuable resource for making well-designed, usable websites.
John:
Thanks for this great article that puts so many issues into perspective. My experience from the print design world and lessons learned are similar; it’s so helpful to see these principles clearly articulated.
I’ve never thought of it in this way but how true: “The biggest part of design is editing. Editing — whether prose or music or movies — is a matter of deciding what to include and in what sequence.”
I think another important point is that as digital media evolve, so do their design principles and best practices. What works today may be out of date tomorrow.
My personal favorite tip: “8) Before approving your design, ask yourself three questions: 1) Is it beautiful? 2) Is it simple? 3) Is it clear? You want a yes on all three.”
As always, a great, thought-provoking article, and great comments.
First, a disclaimer from me: I don’t work for Adobe, but I do use Flash :-)
As this is a site and forum for designers, it pains me to see a potent design tool such as Flash being sidelined and rejected out of hand because so many on the Internet have misused it.
In the hands of a capable and experienced designer, the elegance and dynamism that Flash can add to a site is unmatched by other web-scripting tools. It can generally load faster than any CSS or Javascript-enabled page — provided designers know what they are doing, and don’t “weigh” it down with images.
I’d say the main problem is that search engines cannot see what is inside a Flash movie. For this reason, do not create your site entirely in Flash, but use search-friendly CSS and Javascript pages, with Flash embedded within those pages as needed and where it serves a purpose.
Flash gives the designer complete and total control over how the site will look across all platforms, all browsers, all operating systems. It is analogous to a movie experience in a theatre, with the addition of interactivity, which is really what the web is all about.
I would suggest creating pages with CSS and Javascript, optimize for search engines and browsers, and use Flash seamlessly within the pages as individual movies.
In my opinion, a company’s philosophy, mission statement, or future goals are kind of boring. All that stuff is just “fluff.” And by “fluff” I mean text on the page that’s not useful to me. The only people who care about that stuff are the people who work for that company. But more times than not, I see them on a lot of websites. Sometimes you have to ask yourself, is that stuff important to the viewer? Really?
To me, what’s important is content that’s useful to the viewer. Content that answers a question. Content that provides a solution. Content that benefits your viewer.
Sometimes you have to remember that your website is not for you, but for your viewers (or clients). Don’t put content on your website that you care about, put content on your website that your viewers care about. Your viewers will thank you for it.
From a viewers point of view, it really comes down to two things:
1) What are you offering?
2) Why should I care?
Answering those two questions could essentially sell the viewer. If you can explain or show your viewer what you’re offering and why they should care, as in how it BENEFITS them, you have a good chance of winning them over!
You can have a nice-looking website — a clean, organized layout, beautiful fonts and colors, and other stuff — but if you don’t have valuable, beneficial content, then why would a viewer stick around, let along return to your website?
Example: I’m addicted to Before & After. Why? Because they offer really cool design articles in print and pdf format. The reason why I care is because they make graphic design easy and fun while helping me provide beautiful results (websites, brochures, business cards, etc.) for my clients.
So remember, it’s two things:
1) Tell your viewers what you’re offering
2) And tell them why they should care (why it’s beneficial to them).
All of this is easier said than done, but boy is it fun!
It’s a pleasure to share so much info; thank you for all the commentators and for Before & After. I, too, am trying to shift from print to web. That’s why I am now taking a “course” in web design. After a month and a half in an introduction to HTML, I found the best way to think of building a web site is through tables, though I read not to approach the matter from this point of view. What do you advise? Should I wait before starting to design a website until I have taken more in Dreamweaver or Flash?
A pleasure to have read you all.
Well, a lot of interesting ideas and comments.
A few points I would add:
• Realize that only 30% of your visitors are actually going to “land” first on your home page (Nielsen data), which is why navigation is so important.
• Tell your clients that they need to have a focused message that jumps out at visitors throughout the website, and that navigation needs to reflect that key message. Otherwise, they’ll create cacophony and chaos (too many shouting voices in a crowd and you can’t hear anything anymore).
• To explain why they need to start the page content with the most important elements, I tell my clients (as Ellen mentioned) to think newspapers and “above the fold,” and I tell them that only 30% of visitors actually scroll down (Nielsen data again).
• Beg your clients to keep texts short. People don’t read on the web, they “scan” the first 3-4 words of each paragraph to see if they are interested (Nielsen eye-tracking studies). So clients should edit down a first time to shorten to the essential . . . and then edit down again! . . . And start paragraphs with key words.
• BEST TIP FOR THE END: Yes, people struggle to organize their website content. What has worked wonders for me is the following: Get the client’s key decision-makers together for three hours (tell them how essential it is), and have them go through the “Post-it-notes exercise” (I call it). Their objective is to build the whole architecture (with sections and sub-sections) on the wall of their conference room, before they leave, where each Post-it note is a single webpage! And get them to sign off on it!
1. When you, the client, or both of you, are considering loading up with Flash and other gimmicks, remember this truism: Just because you can, doesn’t mean you should.
2. Spend a lot of time planning the hierarchy of your site. When you’re all finished with the planning, go back and plan some more. A lot more.
3. Be prepared to explain to your client why (in most cases) they should cut out 90 percent of their over-written content.
4. Don’t hide the basic contact information on a “contact us” page.
5. Tell the client at the beginning of the job that they will have to pay for changes they order after a certain point in the process. Put it in writing.
6. Put everything in writing. Spell out exactly what the client will get for the price you propose. And more important, spell out exactly what is not included in your price. Domain name registration . . . hosting services . . . lots of other stuff . . . customers often assume your design price covers all that . . . but if your price does not include all that, make sure they know it.
7. Get everything in writing. Signed by them.
8. Be prepared for the client’s 12-year-old nephew (who’s a computer genius) to be mentioned several times during the process.
9. Get at least one-third of the cost estimate paid in advance. One of the first things customers seem to “forget” about is a web site they’ve gotten you started working on. Priorities change. Cash-flow problems happen. And you may have done a lot of work . . . a lot of work . . . but the customer doesn’t want to pay until the job is finished . . . but he (or she) is “too busy” to get back to working on it.
10. The project will take longer than you thought it would. Probably a lot longer.
Great comments here. Such an important topic and whenever it gets discussed you get to see how the various schools of thought are evolving.
Unfortunately, you always get a few third-hand ideas that have been recycled so often they come across as gospel.
The one I worry about for designers and clients is the caution on long content.
“Nobody reads” is a half-truth, and a whole lie.
Truth is, if your reader doesn’t care about your topic, no content is short enough. And if they don’t care, you don’t care. Your site is not for them.
But if they find your topic interesting, then don’t shortchange them with skimpy content. Give them the detail they’re looking for. Be their source.
For example, this comment is well down a long page of text. You may have skimmed some comments, but here you are.
So there’s no content that’s too long. There’s only content that’s too boring.
I have a different set of criteria:
1. Can it be found? SEO trumps all. That means lots of pertinent text up high on he page.
2. Can it be read? This criterion rules out overly fancy text.
3. Is the content pertinent and valuable to the reader?
4. Is the page attractive, with a few well-placed decorative elements?
5. Is it browser agnostic? A page should be OK with the major browsers, and understandable with a text-only browser or a reader for the blind. Consider also the color-blind. Can it be easily read when reduced to grayscale?
Note that I de-emphasize beauty as such. I am not against beauty, but it is not the most important thing by far. Under-design is better than over-design, where web pages are concerned.
John Culleton
For thoughts about streamlining Web content, you might check out “How the Web Made Me a Better Copywriter,” originally published in Voice: AIGA Journal of Design.
Great topic. Thanks, as always.
Patrick — do not design a site using tables. Absolutely learn CSS. And I also highly recommend learning the basics of Javascript and JQuery instead of Flash.