The Basics of Web design

Get a web presence video

What makes for good web design?

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

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

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?

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

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

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

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 navigation planning Large white spaces Random placement 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 Doctor and hospital search General search Clean, clear design layout Font size adjuster

New Website Features Drop down navigation Auto-refreshing baby pictures

New Website Features Company quick links

The good and the bad

What do you think ?

Web design tools

Web design tools Synthasite Wordpress.com Squarespace Blogger Google sites Dreamweaver

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

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

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

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

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

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

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: jonin60seconds [email_address] Twitter.com/jonin60seconds