» How do I shot web design? | information rain

How do I shot web design?

This leads off a series of articles on some basic concepts relating to building websites for some friends. The article title is a play on the famous how do I shot web? meme that I believe the Spiderman movie series created.

Web design, like all design, is meant to solve a problem.

Web design is not about decoration, it is really about communication.

Making sites pretty is a fine goal, but they must be usable above all. This is always my first focus.

Why usability is paramount

Magazine covers and newspapers and book covers and all sorts of other products need to be visually attractive to catch your attention when surrounded by competing options.

If you’re trying to decide which item to get here, you’re probably going to go after the one that catches your attention somehow: whether through an interesting picture or clever headline. Photo from FreeDigitalPhotos.net.

news stand

The internet is an entirely different medium. Users don’t decide to click on a link that leads to your site based on how pretty anything is, they click on a link based on the content. Links on the internet are just text.

links
What a user does is click on a text link and quickly scan the page they arrive at. Usability tests suggest that people figure out if a site will work out for them within 1/20th of a second.

You need to make a site usable so people think your site is useful enough to explore, while containing content credible and memorable enough so that they actually want to come back.

So what do you really do?

A few ideas for making text legible will be covered in part II, with grid systems and a few related issues appearing later.

A web designer is really just arranging the necessary pieces of content so that people will be able to use it best: which is really typography.

As Information Architects Japan famously said…

95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.

Select good content

Your first job when building sites requires a lot of thought.

You must make intelligent decisions about what type of content is actually valuable to the site’s users and the business’s overall strategy. Don’t put stuff on the screen just because you can. There has to be a purpose behind every element.

Using Lorem Ipsum when doing web design is foolish. You need to be able to design sites from the point of view of your users to ensure that you’re getting it right.

You don’t make a design and fit the content into it, you evaluate the content and decide how best to display it.

This can be sort of strenuous when dealing with building sites for other people, because they might have a certain impression of what they need and you have to talk them out of the worst decisions they want to make. They’ll respect you more in the end if you stick to your guns.

Simple navigation

As mentioned, the internet contains vast quantities of text. Links are text. Most of the content on the internet is text. URLs are just text. It makes sense that the method of navigation is just text.

Look at some of the more successful sites of the past few years, particularly, take a peek at their main navigation systems.

Search Engine: Google
Videos: YouTube
Trade: eBay, Craigslist
Photos: Flickr
Social News: Digg, Reddit
Links: Del.icio.us
Social: FaceBook

All of these sites have plain text navigation systems and generally very plain designs with lots of whitespace. Compare this with sites like Yahoo that try and put useless little icons into their navigation and try and fill the page with useless, overlapping, clutter. ”Iconitis” should generally be avoided.

yahoo navigation

Use the simplest, most legible font you’ve got for your navigation. Links should not be images: they should be standard text.

Simple forms

User interface friction is a big deal.

If you want to contact a friend online, it is usually easier to IM them rather than using email. Why is this? Fewer steps are necessary to IM somebody.

For instance, for this site I originally had a contact form that asked for a user’s name, email address, subject, message, and a few other bits of information. After considering it for a bit, I realized that was wasteful and I simplified it by asking for 3 bits of information: name, email, and message.

The more work you do behind the scenes, getting rid of useless forms and making it easier for your users to use your site, the better off you’ll be.

For instance, you might decide to make it possible to enter phone numbers in several different formats. Ideally, a user should be able to enter his phone number in a format like this: (555) 922-4869 or this 555 922-4869 or even this 5559224869 without getting an error message.

You have to make smart decisions behind the scenes and based on user feedback, continue refining features so they’re easy to use.

So how do you do web design?

Slicing images in Photoshop is not the best way to go about learning how to build websites. You end up with sites filled with too many graphics. They end up being hard to maintain and load slowly. And you really don’t learn anything.

Learning through Dreamweaver isn’t a good way either. You end up succumbing to the temptation to let the program do everything and you don’t end up learning the code.

CSSEdit and TextMate are my two favorite development tools here, but they’re Mac only. On Windows, I’ve had some luck with the free NotePad++, but I’m sure there are better tools around.

If you really want to build sites, you need to learn xhtml and css from scratch. Tables should never be used for layout: CSS should.

A text-editor with syntax-highlighting is all you really need to learn how to build websites.

Dynamic web pages

If you’re just going to be slicing things out in photoshop, you’re never going to be able to figure out how to work with any sort of rapidly changing content.

Most sites use some type of content-management system that allows the owner to update the site’s content without having to touch the underlying HTML. Business sites, blogs, music sites, message boards, and most others use a database and server-side scripting language such as Ruby On Rails or PHP to dynamically change content.

Even if you’re not a programmer by trade, if you’re building websites, it is a good idea to familiarize yourself with how this works. Even if you work in a team and don’t touch the backend at all, it is helpful to understand a bit of what programmers do so that you don’t make life impossible for them by asking for something silly.

Personally, I prefer WordPress for most types of small and medium-sized sites because of the active developer community and numerous free extensions, but there are plenty of other options that are useful.

Conclusion

I touched on some initial observations I’ve made based on what I’ve seen from people. The next article will deal with making text legible.

Posted on June 16th, 2007 by Chris Papadopoulos.

Subscribe to the RSS feed, Trackback, or contact me privately.

Spread the Love These icons link to social bookmarking sites where readers can share and discover new web pages.