ruk·si

🕸️ Web
Design

Updated at 2015-11-17 11:08

Web design is about planning interaction and visuals of basic websites.

This is related to web development.

Structure

Design around the content. Don't just create a good looking website. Create a design around the usage case and purpose of the website. Quality or tricks used isn't the main focus but the message you are communicating.

Before starting design, you must figure these out: - Audience: age, race, gender, culture? - Tone: casual, formal, friendly, sarcastic, humorous? - Purpose: informative or conversions?

Aim for focus and clarity. Each page should have only one action you want visitor to do. Having a single column layout instead of multicolumn layout helps you to narrow the focus to that specific thing. Merge similar functions to keep the options low e.g. you can merge customer service, call us now and contact us. If you want user to read an article, make it the biggest element on the screen.

Don't make visitors think. Visitors should easily be able to answer these following questions on every page:

- Call-to-Action: What does the page suggest me to do next? Remove the irrelevant and emphasize important links and buttons. - Value: Why should I do what the page suggest me to do? Remove the less relevant and emphasize the benefits for the user.

Keep in mind the update frequency. Does the page have content that changes once a week or once a quarter. Websites that change weekly should be built on top of a CMS so you should check how that restricts your design.

Prefer fewer pages over short pages. Scrolling is better than pagination or changing the page. But scrollbar should always be over approximately 10 cursors high or the page will be intimidating.

Bad: Customer Service, Contact Us, Call Us, Reach Out

Good: Contact Us

Visual

Use the same base layout for all pages inside a website. Totally different layout might make the visitor doubt if they left the website. Especially showing the same navigation on each page is very important.

Mark visited links with a different color. Default browser behaviour that you should never change, although you may change the colors.

Link: Blue Visited Link: Violet

Don't place audio on websites. If you still want to use audio, make it muted by default or press to play. It's really annoying when you open sites on tabs and some of them starts playing music.

Don't use splash pages. Splash screen forces visitors one step further from our and their goal.

Don't show more than one scrollbar at a time. If you, for some reason, have to show a scrollbar for a single element, consider showing it only when the mouse is over the container.

You can break the rules to get noticed. For example, placing logo and brand after the fold, next to call-to-action, so it give an expression that you place customers before yourself. Or breaking away from your established baseline.

Placement

Relative element placement is more important than whitespace. Double check that everything aligns together in a pixel perfect way and related elements are grouped.

Use baselines. You should define a baseline height, e.g. 9px, that all of your element heights will be multitudes of e.g. 18px for body text line height. There are more tips about using baselines in CSS guide.

Use grid layout. Use percentages to specify 12 uniform columns with uniform margin between then (gutter). All elements must anchor their width to the horizontal borders of those columns. More about this in the responsive design notes.

Be consistent in your element placement. There are some web elements that should always be at the same position and have the standard behaviour:

  • Logo should be at top left and clicking logo brings you to home page.
  • Main content should be as close to the logo as possible.
  • Login and logout should be at top right.
  • Navigation should be at top or left and redirect to other pages.
  • Contact info should be at bottom.
  • Search box should be at top right and at least 27 characters wide.

Manage the fold. Avoid using visual horizontal lines where browser window might end on some devices. This leads to people missing that the page continues. Use min-height media queries to manage the fold e.g. for tall images.

Communication

Don't talk like a company. Website should talk like a person. More about text content style in copywriting notes.

Headline and the following paragraphs on the landing place should clarify and excite.

  • What problems can you solve for them?
  • What benefits can you deliver?
  • Why should a client do business with you?
  • Why should a client choose you over a competitor?

Include at least 3 testimonials. Usually customer testimonials stating how awesome the product is.

Include contact info. Many people use contact info to check if the site seems legit. Consider using "contact" link in the main navigation or the footer. If it's a personal website, consider adding contact info on sidebar or footer of each page.

Include legal links. Usual legal links are privacy policy and terms of use, but only include them if you need them. Privacy policy states what customer information you are collecting, using and sharing. Terms of use is a set of rules which one must agree to use the service.

Sources