Principles of Web Design & Development
With the number of tools, programs, and resources available, the actual building and publishing of a website is pretty simple. But just because you can build one, doesnt mean it will look good or be effective. The actual design, organization, and content of the site still require a great deal of specialized skill. The following guidelines will help you avoid common mistakes that separate professional from amateur.
Beginning a New Website or Redesigning an Existing Site
- Define the purpose of the website. Why are you building it? What do you want it to do? What do you want visitors to do or see?
- Define what you site isnt. This may sound strange, but many times people will come up with ideas to add to a website that not only dont add value to it, but may actually take away from it. Decide what your website isnt so you dont waste your time on fruitless tangents.
- Figure out who will visit your website, who you want to visit your website, what they are looking for, and what will bring them back. People have a lot of competition for their time. You need to offer something they think they want or need and cant get anywhere else or else theyll go someplace else.
- Set goals for your website. Be specific, dont just say to make lots of money or sell lots of stuff. How much money do you want to make? How much stuff do you want to sell? Figure out what success means, how you will measure it (using actual numbers), when you will measure it (should be often), and the steps you will take to continuously improve the website and keep it going. A website isnt a build-it-once-and-never-touch-it-again work. Others are constantly improving their sites, and youll have to do the same to keep up.
The Three (3) Major Parts of any Website
When building your site, there are three main parts you must focus on in this order: Content, Navigation, and Look. Again, the order is essential.
- Content is the most important part of your website—its the reason the visitors came in the first place. It doesn't matter how pretty the graphics are or how technically amazing the navigation is if there is nothing behind it all. Have quality content, original content, and regularly update it. New content will keep visitors coming back.
- Navigation is how visitors will find the content on your site. The best content in the world is useless if no one can find it.
Look, also known as design, is what will make people stop and say, Wow, thats cool, and want to copy you.
- Navigation is more than just a menu or navigation bar—its the layout and organization of the site. Its the superstructure of the site. The process of organizing the content is sometimes called Information Architecture.
- A good site can be navigated intuitively and effortlessly. If the user has to stop and think about where something is, youve failed as a designer. When designing the site, think about why the user is coming here and what he is trying to accomplish and then design around that. Every component should have a logical place and be in that place.
- Be sure to consider how new sections will be added to the site. Websites will inevitably grow and new sections will need to be add easily. Make sure there is room in the structure for both major sections and minor additions.
- Sitemaps are a sign of failure. A sitemap means the navigation is so poor, the user cant find anything without a complete listing. The only reason to have a sitemap is for search engine optimization.
- Users dont want to click more than a couple of times to find what they are looking for, so a good rule of thumb is never make your site more than three levels deep with the home page being the first level.
- The navigation should not compete with the content. It is merely a frame, not the main attraction. Use good design principles to help it be subordinate to the content.
- No amount of paint is going to save a house that's falling apart. Make sure the content and navigation are there and let them dictate the look.
- There is a difference between Enhancement and Decoration. Enhancement takes into consideration the structure and the work as a whole and adds to it. Decoration is superfluous and usually used to hide something not so good underneath. Enhance your site; dont decorate it.
- Be sure consider if the design is distracting or takes too long to load. No picture is so wonderful people are willing to wait long for it to load unless that is the only thing they are looking for.
Hierarchy is the arrangement of elements from the most important (or most general) to least important (or most specific). Tt applies to content, navigation, and the look. Good hierarchy leads the users eye (and mouse) thru the site in a logical, planned way. Bad hierarchy creates confusion and uncertainty and eventually chases visitors away. Use good design principles to lead the user's eye in a way that will accomplish your goals.
- Position – Where something is on a page influences in what order the user sees it. Objects at the top and to the left are seen before objects at the bottom and to the right.
- Color – Using bold and subtle colors is a simple way to tell your user what to look at first, second, and third.
- Contrast – Being different makes things stand out, while being the same makes them blend in. More important content should look different than boilerplate notices.
- Size – Big takes precedence over little (unless everything is big, in which case little might stand out thanks to Contrast)
- Design Elements — if there is a gigantic arrow pointing at something, guess where the user will look?
A lot of people—both print and web designers—make the mistake of filling up every bit of space. If you are Amazon.com, you can get away with this. But sites that people sit and look at with awe usually have areas of unused space. Breathing room is as good on websites as in a car or airplane.
There are three types of space:
- White Space is blank space, not wasted space. It doesnt have to be white—itll be whatever color the background is.
- Leading is the space between lines in a paragraph. A certain amount of space makes words easier to read, but dont go overboard and add too much space or it wont look like a paragraph.
- Padding is the space between elements. A site is more comfortable if every element has some personal space or breathing room. In typography it is called tracking.
Simplicity and Consistency
Good design requires restraint. Too often websites are cluttered and complicated by the enthusiasm of their developers who add in features and functionality because they can. Users also often get carried away in their requests for features, thinking, Wouldnt it be great if the application did this, that, and the other thing, and not taking into account the complexity that inevitably results. In the end, everyone benefits more from simple, well-considered designs than from a multitude of features.
- Simple is almost always the best option. That refers to both the design and the coding. Just because you can make your site flashy doesnt mean you should. By taking the simplest route, you open your site up to the broadest audience and range of usability.
- A small site with a few, well designed pages filled with useful content is much more effective than a large site with a lot of filler, useless content, and broken links.
- Use short, descriptive names for each page both in the Page Title and the Filename. This will not only help visitors find what they are looking for but search engines as well.
- Use short, descriptive headings and subheadings to organize content on a page. Include brief text under images that require explanation.
- Some people equate creative with different, unique, and unusual. While those can be part of creativity, they usually lead to chaos, disorder, and confusion, none of which are good for a website (or anything else for that matter).
- Be consistent with how you name pages, how your navigation works, how pages are laid out, how the site is organized, and with the graphics and typography.
- Dont give each page a unique look, layout, or navigation style—the confusion it creates will dwarf any artistic merit you are striving for.
- All top-level headings should use the same font (typeface, size, style, color).
- All paragraph text should use the same font.
- The site should have a color scheme (2-5 main colors) and use it throughout.
- Images, photos, and other graphics should have the same look and feel.
- Make everything as simple as possible, but no simpler. – Albert Einstein
- Good design is clear thinking made visible. – Edward Tufte
In the 90s it was trendy to have a splash page—some cool graphic or animation the user had to click on to enter the site. This was cool the first time a visitor came to the site, but a nuisance every other time.
The front page should have useful information. It should establish the tone, briefly tell the user about the organization using words and pictures but not be a complete history, and let the user know what is new. Nothing more than a pretty picture and navigation bar is pretty but annoying. Have content, but dont go into too much detail. Thats what interior pages are for.
Good Web Design is as much a science as it is an art. The programming side and the design side are merely parts of the same coin. Neither is more important than the other, and neither can exist without the other.
- Screen size – You cant control what size your site will be viewed at, so make sure it works and looks good on a small screen as well as a big one.
- Browser capabilities – You cant control what browser a user will use. Adding notes like This site best viewed’Ä¶ or Upgrade your browser to see’Ä¶ tend to upset the user and give your site a bad taste. Design your site for the widest possible audience using techniques like HTML 5 or Flash to add flair but not to be essential to use the site.
- OS and Browser Support – Your site must support Windows, Macintosh, Unix, Linux operating systems and Firefox, Internet Explorer, Safari, and Opera browsers at a minimum.
- Best practices is a term used by web design snobs. The code generated by it and the sites built are no better or no more usable or accessible than sites built using HTML 3.2 from the 90s. Its just a different way to accomplish the same thing. The advantage of old code is everything can use it and handicap accessible browsers have had 15 years to learn how to read and surf them.
- Sound takes a long time to load, is annoying, and rarely adds. Avoid it.
- Video is cool the first time a visitor lands on your site, but becomes a nuisance after that. Do not set your videos to play automatically. And make sure you have more on the home page than just it.
- Freestanding means each page in a site can stand on its own with headers, footers, copyright information, navigation, date, etc. on every page much like magazines do, because pages can be viewed individually from the site much like magazine articles can be ripped or photographed.
Web Design is a different art from Print Design
With the control CSS gives a designer, there is a temptation to turn a website into a print brochure. Resist. Just as a watercolor shouldnt look like an oil painting, there are unique qualities to a website and things it can do that nothing else can. Take advantage of these. Make a website look like a website.
For clear, concise writing, consider George Orwells Six Rules For Writing:
- Never use a metaphor, simile, or other figure of speech that you are used to seeing in print.
- Never use a long word where a short one will do.
- If it is possible to cut a word out, always cut it out.
- Never use the passive where you can use the active.
- Never use a foreign phrase, a scientific word, or a jargon word if you can think of an everyday English equivalent.
- Break any of these rules sooner than say anything outright barbarous.
- Front-load your content. Place the most important information first so it will be found. Get straight to the point. Dont waste time with welcome messages, instructions, or introductions unless they are essential. Say hi, then present the information. Don't wait until the third or fourth paragraph for the main course.
- Remember that you are designing documents for the World Wide Web. That means your site can be (an probably will be) viewed by visitors in other countries who may not be familiar with conventions specific to your corner of the world. Consider explaining information clearly in direct, simple terms.
- Use keywords. Wisely. Readers today are busy and generally skim text to get an overview of a page before reading it word for word. Many may just skim. Place keywords at the beginning of sentences, headings, and links so the reader is more likely to find what he is looking for when skimming.
Just as naming your child is important and can have long-term consequences affecting the rest of his life, naming your pages is very important.
- Use descriptive names for the page title and headline titles. Make sure they are specific and clear so the user (and search engines) know exactly what is on the page.
- Use carefully chosen keywords that also occur in the filename (use hyphens to separate words in the filename).
- Form a concise, plainly worded description of the pages contents
- Page Titles should be unique for each page, as should Page Descriptions and Keywords.
Many have the incorrect perception that all you need to do is build a website using the latest SEO tricks and millions will flock to your site and buy your product or service because you are number one on Google. That is not true. A successful website needs much more than just a high search engine ranking. In fact, many successful sites may have very low search engine rankings.
- Create a marketing plan. How are you going to tell people about your site? How are potential customers going to find you? Realize marketing isnt just advertising so you need more than a good AdWord campaign. Use traditional marketing techniques including giveaways, word of mouth, unique selling proposition, links from other sites, testimonials, advertisements, etc.
- Decide who your audience is and where they live. If you target local customers, being listed on major search engines like Google and Bing may not be as effective as advertising your site in local movie theaters, libraries, local radio stations, on billboards, at local events, fliers at a grocery store, or the local newspaper.
A website is dynamic—you dont just make one and never touch it again. Make plans to continuously update it, what will be updated, how often, and who will do it. Assign one person to own the site. This means he or she will make sure all links function and updates are made regularly. A website everyone is responsible for will become forgotten, ignored, and/or splintered by being pushed and pulled in dozens of different directions.
To successfully measure your websites effectiveness, you need data. Web Analytics is a fancy term for visitor statistics. Good web analytics include the following:
- Hits – total number of visits, number of visits by unique individuals, number of return visitors, which pages were accessed and for how long, how many pages were accessed in a single visit, duration of a single visit
- Visitor Information – browser and operating system, which language their computer is set to, what part of the world they live in
- Traffic Sources – what site sent them to your site, which keywords pointed to your site
Whenever you change something, even if it is from terrible to great, someone is going to hate it and complain. When someone gets used to something, they are resistant to change, even if the change is for the better. Plan how you are going to handle the complaints, phone calls, emails, etc. Here are a few items to consider:
- A web redesign usually means things arent where they were before, and someone (or a lot of someones) are going to be upset you moved their favorite link. Make sure you educate them on the new layout, where their favorite links have moved, and why they will be more convenient. If they arent more convenient, ask yourself why you moved it and consider moving it back.
- If the site you are redesigning has an internal search function, look at that and see what terms are most commonly searched for. Most likely this is vital information visitors want but either cant find or arent sure where it should be so youll want to make it obvious.
Click on a lesson below:
Elements of Art
Principles of Design
Essential Reading & Online Resources
Web Design & Development
Lettering & Typography