Web Design Workshop

You should now have enough technical skills to do a lot with your website. Now you need to start thinking about the really important part: how to design it. This is about the aesthetics of it, how it looks, but also very importantly about the usability of the site.

This workshop will be about you reading and thinking about your design. This is about you developing your own design and aesthetic in the context of what other people have done or said, not about slavishly following rules. We have provided some material below, there is far too much for you to read it all in one session, you should select the links that you think you can learn most from. All of these will lead to more material that you can discover for yourself. Throughout your degree you will need to read independently and select materials that you find relevant to your work, this is the time to start.

Task

By the end of this class you need to come up with some concrete suggestions of how you could improve your site. These suggestions should be based on what you have read. Tell us about them and write a short post. You will need to justify the plan in terms of what you have read (reference specific articles and include links in your post).

Materials

The following 3 principles are a good starting point:

1) Coherence

this is why we have CSS – it’s the purpose of a stylesheet.

Don’t mix and match fonts or font sizes, image sizes, header sizes, background colours, column widths ANYTHING. Doing so basically means you don’t have a design. A design is a fixed set of choices that you stick to. All things of each type MUST be identical in their properties. This includes WHITESPACE. Space is a thing. Keep all spaces the same size for each category of space.

2) Simplicity

Don’t throw everything in. JUST put in what NEEDS to be there. If something doesn’t have a purpose, REMOVE IT. If it seems cluttered,
GET RID OF IT. Make a new page for it and see if it is interesting. If not, kill it.

3) Usability

How will users understand what to do with your site? Where will they start? If they start somewhere else, how will they find the thing they want? Where is your primary navigation? is it clear? can the user always find all the information they need?

This is really about mental models – how do users behave? Your site must reflect this.

W3

The W3 is the web standards organisation, its a good place to start.

www.w3.org/

They have a lot of material on accessabiliy:

www.w3.org/WAI/intro/components.php

Writing on Web Design

The web contains a lot of writing on web design and usability. There are a lot of different opinions and some disagreement, but also many principles most people agree on. Good web design combines many issues, technical, psychological (how people interact with computers) and social among others. There are some examples.

www.useit.com/

www.rosenfeldmedia.com/books/mental-models/

emilychang.com/

gettingreal.37signals.com/toc.php

tim.oreilly.com/

A lot of this falls under the general banner if interaction design that covers both web and other types of computer software, here is the wikipedia definition and some good sites:

en.wikipedia.org/wiki/Interaction_design

www.id-book.com/starters.htm

interaction-design.org/

You shouldn’t necessarily take the design principles as gospel, but you shouldn’t dismiss them too easily. This is a typical “myths busted” article, you need to form your own opinion, is the author correct on each one, or is the design principle valid?

www.techradar.com/news/internet/web/the-most-common-web-design-myths-busted-602622

galleries of designs

As well as reading about the theories its worth looking at a lot of designs for inspiration. Be critical, what do you think of each design? How would you rate it based on what you have read?

wordpress.org/extend/themes/

www.oswd.org/

Technical Articles

This workshop isn’t about learning new technical skills so don’t concentrate on these, but they are useful tips for extending your CSS knowledge.

www.blueprintcss.org/

www.oreillynet.com/pub/a/javascript/2001/03/23/rollovers.html

Another important topic is getting your site recognised by search engines:

codex.wordpress.org/Search_Engine_Optimization_for_WordPress

Create PDF    Send article as PDF to