Designing Web Pages

by
19 Aug 2013

A web page ideally helps the owner of the website to convey information to its audience, while helping the audience find information or be entertained. Desinging web pages is about creating a place that promotes clear and effective communication. Typically, people assume websites are about one-way communication: from the site owner to the visitor / audience. An excellent website is more about two-way communication, from the site owner to the visitors / audience, and from the other way around.

Preparing to Design

Create a Visual Mood Board. If the website is for an organisation or business, this should be based on the organisation’s brand guidelines. If you do not have these guidelines, either get them or create them.

Decide on the web page and medium you’re designing the webpage for. Over the last decade, most websites have been designed for computer screens that are around the common 1024 pixels wide by 768 pixels high size. More recently, however, as mobile screens (phones and tables) have become more common, webpages are designed to dynamically respond to the screen (or other medium) that the webpage is being viewed on.

As it’s now common to design webpages that can accommodate various screen sizes and environments, you need to decide which size your design will initially be targeted at. When you’re finished the design, you can save time by re-use the webpage design by adapting it for a new, different medium. While some web designers begin by designing a ‘desktop computer site’, others start by designing the ‘mobile site’; the most appropriate starting medium for your webpage design will depend on your situation and audience.

Websites usually have a different, unique design for each type of web page; one for the home page, one for an ordinary web page, one for the blog page, one for an individual blog post, and so on. You should choose one to begin with.

Draw the important visual guides. This includes the guidelines, such as the page edges, margins, and gridlines if you use them

Creating the Layout

Start with a simple sheet of paper and a pencil or pen. This is often the best way to start designing a website — even the best website designers start in this way.

Sketch the Welcoming Focal Point. This arguably the most important part of your webpage, because it will be the first thing that the visitor will see. This is present on a ‘home page’ of a website, and some other webpages, but not every webpage. This will be ‘above the fold’.

Draw the Header. This will be a visual anchor for the visitor, and thus should be comfortable to look at and provide valuable information. Headers typically display the organisation’s logo and name, a slogan, and sometimes contains a login area or search box.

Draw the navigation menus. These are typically a horizontal or vertical boxes containing several links to other pages in the website. Unless the website has very few web pages (10 or fewer), it isn’t a good idea to include links to every web page.

Draw the Primary Content Area. Keep in mind that a line of text (such as the first line of a paragraph) should be between 50 and 75 characters long (very roughly around 10 to 15 words per line).

Draw any Secondary Content Areas (sidebars). These sections can provide two kinds of information: info that is relevant throughout the website, and info that is relevant (related) to the content of the specific page. Below are a few sections that are common to popular websites:

  • Secondary navigation menu
  • Search box
  • Related or interesting pages or posts
  • Featured content or products
  • Webpage author information
  • Contact information

Draw the Footer. A footer has two purposes; to conclude the webpage (which helps the visitor stay focussed on the content), and provides any additional information that is necessary useful. Below are a few examples of such information:

  • Legal (copyright) information
  • Technical website information (like sitemaps)
  • Popular sections of the website

Some modern websites also have a ‘pre-footer’ just above the footer that provides links to the most popular or important pages of the website.

Determine / Set the appearance of types of content. This is important because the owner of the website will inevitably want to add content to the pages of the website, and this new content should visually fit into the design of your webpage. These types of content are primarily based on the formats available through HTML elements.

  • headings
  • paragraphs
  • images and videos
  • lists
  • tables (of data)
  • forms
  • links (as text and as buttons)
  • quotes
  • code
  • rules (lines)

Adding the Other Visual Elements

Add colours to the design. As the cornerstone of all design, getting the colours of a webpage right is critical. While most webpages are restricted to using shades and tints of the website owner’s brand, you may have some freedom to choose the best colours and variations of them; check the brand guidelines. If the branding colours are bold / bright hues, don’t use them in large areas of the website that contain text (which becomes less legible and may harm the branding); use them as highlights instead.

Adding colour to a webpage needs to keep the content easy and pleasant to read. Colours of a webpage also convey meaning; for example, blue words among black text is a convention for a link; green means an action’s success; yellow means a warning; and red means an error.

Add typography. Choosing the right typefaces (fonts) is not simply about choosing the fonts you like the most; it is part art and part science. The artistic element is about choosing typefaces that convey the right mood and attitude of the webpage. The scientific part is about choosing typefaces that are clearly legible, and the right size and thickness for the design. Related concepts are the text’s leading (line-height) and measure (characters per line).

Add illustrations and other images. Where images are among paragraphs of information, they should either take up the full width of the paragraph, or be aligned to the left or right side, and not leave a thin column of text beside it.

Useful Related Techniques and Skills

Colour Schemes

Layout Design

Typography

Completion: 

Average: 9 (1 vote)

Add new comment