the basics of web design
DESCRIPTION
Lecture about Basics of web design at University of WestminsterTRANSCRIPT
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
