The Basics Of Web Design

The Basics of Web design

Get a web presence video

What makes forgood web design?

Elements of Good Design• Navigation• Layout• Ease of use• Consistency.• Graphics• Call to action• Simplicity – Save the pixel!

Navigation• Top or left navigation

bars• Stand out with

different colours• 3-click best practice• No more than 7 top

level headers

Layout• Consistent layout across

all pages• Simple, clear navigation• Top or left nav bars• Key links at the bottom.

Why?

Ease of use• Make it easy for your

reader to go where you want them to

• Don’t clutter/overcrowd the front page.

• Talk to your defined audiences

Graphics• Keep your graphics as

small as possible.• ‘Save for web’ on

Photoshop• Use only JPG, PNG, GIF

Call to action• There must be a reason you

want people to come to your site

• What is it you want them to do when there?– Buy?– Subscribe?– Comment?– Interact?– Read / learn

Save the Pixel!

Case Study:Turning the Netcare website

around

Old Website Design

Lack of navigatio

n planning

Large white

spaces

Random placemen

t of banners

Cluttered old-style artwork

Old Website Design

News after ‘low

level’ adverts

Ineffective placement

of company links

Old Website Design

Hospitals sorted by Netcare regions

New Website Features

Doctorand

hospital search

General search

Clean, clear design layout

Font sizeadjuster

New Website Features

Drop down navigation

Auto-refreshing baby pictures

New Website Features

Company quick

links

The good and the bad

What do youthink ?

Web design tools

Web design tools

• Synthasite• Wordpress.com• Squarespace• Blogger• Google sites• Dreamweaver

Synthasite• www.synthasite.com• Free• Fexible• Takes a bit of getting used

to• Lots of layout options• Use the simple templates

Wordpress• www.wordpress.com• Blogging tool only• Not very flexible• Free• Widely used in both

forms• Some templates• Simple

Squarespace• www.squarespace.com• Highly flexible• Great looking templates &

sites• Anyone can create great

looking sites.• Not free• Takes getting used to

Blogger• www.Blogger.com• Blog only• Very easy to use• Can look terrible so need

to work hard on layout• Free• Widely used for beginners• Not that flexible

Google sites• Sites.google.com• Quite easy to use• Some tricky features• Free• Can be boring at times

Dreamweaver• Not online• Expensive• Good level of web knowledge

needed• Will need a host site• Completely flexible• Weapon of choice amongst

web designer

Thank You

skype: jonin60secondsjonmichaelbishop@gmail.comTwitter.com/jonin60seconds