Web Design Workshop

Web Design Introduction

5 Second Web Critique - Initial thoughts on web pages

ollymoss.com - DULL / EMPTY / BORING / BLACK / SPACE / "I like it"

malikafavre.com - BUSY / GIFS / FUN / HECTIC / BRIGHT

360langstrasse.sf.tv - PHOTOGRAPHIC / CLASSY

mercertavern.com - HIPSTER / MONOTONE / VINTAGE

noble-design.co.uk - NICE - PRETTY - GIRLY

caavadesign.com - PHOTOSHOP

sb-studio.co.uk - SWEDISH / CLINICAL / BORING / WHITE

equ.com.au - ANNOYING / TACKY / DULL

smart-heart.ru - MINIMALIST / ANNOYING

formfiftyfive.com - BORING / DARK

First rule of web design is that the content should be what makes the website look good.
The design of the site can take away from the content. The site should be functional first.

Questions to Ask

What is the Point? - what is the purpose of the website being created, for our brief?
Who is the Target Audience? - who are you creating it for, who is going to use it?
What do the target audience need? This informs what you put on the website, how you lay it out etc.

Fit these questions to the websites you have looked at.

Answering what do the target audience need?
Search websites that have a similar target audience, take surveys of a focussed group.

On every website
Type and Image
Navigation


To use certain fonts on a website, you will need to pay an annual licence fee.
To get around paying to use fonts, you can use standard fonts. You do not embed fonts on the internet, so if you have a font someone else doesn't, then they would not view it.
You need to specify a font family, eg use helvetica, if not available, use arial, if not available, use any other sans serif typeface.
To use custom fonts and get around it, you can use something called Web Kit, but you still have to pay a licence fee.
Dafont.com and Fontsquirrel are free to use for print, but not for web. Using the fonts in print, they cannot be stolen, whereas on the internet they can be.

Good website for web fonts = Font Squirrel

Another limitation is the use of colour on your website.
Have to be working with a specific variant of RGB that is safe for web.
The next limitation is the size. Screens all have different sizes so the design has to be consistent
Final limitation is ppi - Pixels Per Inch. Standard size = 72 ppi, should actually be 227 ppi, as 72 dates back to the original ppi of screens when computers were first created, not appropriate any more. Using 227 ppi would appear the actual size on a mobile, but too large on a computer screen.
One option to solve this is to design several websites appropriate for different devices of the internet such as mobi, ipad etc. If you have one design for all devices, it is bound to look bad on one kind of screen.
Best to design for the lowest common denominators screen, ppi wise, as we are designing for a client or a target audience, and not graphic designers using iMacs.
eg. 1024 x 768

Everything is constructed out of code. Colour is specified using a Hexadecimal code.

Terminology of HTML - Hypertext Markup Language
URL (Uniform Resource Locator) - Domain name
CSS (Cascading Style Sheets) - An add on to HTML.
FTP (File Transfer Protocol) - Transferring from a website being local on the computer to live on the internet.
CMS (Content Management System/Solution) - The ability to manage and update the content on the website.
WYSIWYG (What you see is what you get) - The dreamweaver application.