Web design styles: index

Posted on Fri Aug 06, 2010, 3:14 pm in design commentary by Siasan.
Tags:
128 Comments
Share

Alternatively, you can view the series in the assignment format.

Share

Web design theory

Posted on Fri Jul 30, 2010, 10:43 am in design commentary by Siasan.
Tags: , ,
158 Comments
Share

Introduction

Web design is a relatively ‘young’ form of design, since the web is so much newer than other design media. There are unique aspects to web design such as the different nature of a computer screen compared to something like paper or canvas. However, the core design concepts that apply to other design disciplines are also used in web design, and web designers make use of the same elements and principles of design as other designers.

Read the rest of this entry »

Share

How changes to technology have affected web design

Posted on Thu Jul 29, 2010, 3:06 pm in design commentary by Siasan.
Tags: , ,
386 Comments
Share

Introduction

Since Tim Berners-Lee published what is believed to be the first website in 1991 the world wide web has become more complex and flexible. The original HTML specification only allowed the most basic definition of paragraphs and headings, but it created a new form of navigation as users became able to use hyperlinks to move from page to page. In 1993 the first freeware web browser – Mosaic – became available and within a year over 2 million people were browsing ‘first generation’ websites.

‘First generation’ websites were designed to deliver information, not amaze viewers. They had linear layouts, few if any graphics and a lot of text. They were delivered via modems and slow dial-up internet connections, so the pages had to be as simple and fast-loading as possible. ‘Second generation’ websites built on this basic formatting a little, but it was not until the third generation that the web began to include coloured backgrounds and animated images. This was when ‘web design’ finally began to be a factor.

An example ‘first-generation’ website found at http://www.wilsonweb.com/wmt3/980901firstgen.htm

An example ‘first-generation’ website found at http://www.wilsonweb.com/wmt3/980901firstgen.htm

Read the rest of this entry »

Share

Web design style project review

Posted on Fri Jul 23, 2010, 2:10 pm in design commentary by Siasan.
Tags: , ,
147 Comments
Share

With the post on ‘Glossy’ web design, my series on web design styles is now at an end. I hope you’ve enjoyed reading it. If you have any suggestions on topics for the future, please add them to the comments.

Things I’ve learnt

Nobody should ever use ‘mystery meat’ navigation. This form of navigation is at best confusing to users and at worst will chase them away. Here’s an example: http://www.flatpakhouse.com/. Mystery Meat is commonly used with ‘real life’ and ‘collage’ style websites, with the result that navigating the website can be a guessing game. The navigation should always be obvious to the user.

Read the rest of this entry »

Share

Web design style: glossy

Posted on Fri Jul 23, 2010, 10:36 am in design commentary by Siasan.
Tags: , , ,
302 Comments
Share

General description

A great deal of controversy surrounds the naming of this style. Although the title ‘web 2.0’ is in common use, there is an equally widespread opinion that ‘web 2.0’ only refers to actual web applications and that using this name to describe a design style is misleading at best. In the hope of placating both sides, the title ‘glossy style’ is being used in this text. Readers are invited to contribute suggestions or references to other names in use.

Glossy style has a number of distinctive features such as a simple, centred layout with elements that have heavy use of gradients, 3D effects and bright colours. Big, shiny buttons and appealing icons are an important feature.

Important features

  • Single focus
  • Simple layout
  • Centred orientation
  • 3D effects
  • Neutral background colours
  • Strong colour for text, headings, buttons, icons etc.
  • ‘Cute’ or friendly icons
  • Plenty of white space
  • Big text
  • Large shiny ‘call to action’ buttons

Read the rest of this entry »

Share