Basics of Web Design Chapter 6 More CSS Basics Key Concepts 1.
The Basics Of Web Design
-
Upload
jon-m-bishop -
Category
Documents
-
view
1.030 -
download
1
description
Transcript of The Basics Of Web Design
![Page 1: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/1.jpg)
The Basics of Web design
![Page 2: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/2.jpg)
Get a web presence video
![Page 3: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/3.jpg)
![Page 4: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/4.jpg)
What makes forgood web design?
![Page 5: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/5.jpg)
Elements of Good Design• Navigation• Layout• Ease of use• Consistency.• Graphics• Call to action• Simplicity – Save the pixel!
![Page 6: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/6.jpg)
Navigation• Top or left navigation
bars• Stand out with
different colours• 3-click best practice• No more than 7 top
level headers
![Page 7: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/7.jpg)
Layout• Consistent layout across
all pages• Simple, clear navigation• Top or left nav bars• Key links at the bottom.
Why?
![Page 8: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/8.jpg)
![Page 9: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/9.jpg)
![Page 10: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/10.jpg)
![Page 11: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/11.jpg)
![Page 12: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/12.jpg)
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
![Page 13: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/13.jpg)
![Page 14: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/14.jpg)
Graphics• Keep your graphics as
small as possible.• ‘Save for web’ on
Photoshop• Use only JPG, PNG, GIF
![Page 15: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/15.jpg)
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
![Page 16: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/16.jpg)
![Page 17: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/17.jpg)
![Page 18: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/18.jpg)
Save the Pixel!
![Page 19: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/19.jpg)
![Page 20: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/20.jpg)
![Page 21: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/21.jpg)
Case Study:Turning the Netcare website
around
![Page 22: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/22.jpg)
Old Website Design
Lack of navigatio
n planning
Large white
spaces
Random placemen
t of banners
Cluttered old-style artwork
![Page 23: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/23.jpg)
Old Website Design
News after ‘low
level’ adverts
Ineffective placement
of company links
![Page 24: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/24.jpg)
Old Website Design
Hospitals sorted by Netcare regions
![Page 25: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/25.jpg)
New Website Features
Doctorand
hospital search
General search
Clean, clear design layout
Font sizeadjuster
![Page 26: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/26.jpg)
New Website Features
Drop down navigation
Auto-refreshing baby pictures
![Page 27: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/27.jpg)
New Website Features
Company quick
links
![Page 28: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/28.jpg)
The good and the bad
![Page 29: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/29.jpg)
![Page 30: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/30.jpg)
![Page 31: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/31.jpg)
![Page 32: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/32.jpg)
![Page 33: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/33.jpg)
![Page 34: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/34.jpg)
![Page 35: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/35.jpg)
What do youthink ?
![Page 36: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/36.jpg)
![Page 37: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/37.jpg)
![Page 38: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/38.jpg)
![Page 39: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/39.jpg)
![Page 40: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/40.jpg)
Web design tools
![Page 41: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/41.jpg)
Web design tools
• Synthasite• Wordpress.com• Squarespace• Blogger• Google sites• Dreamweaver
![Page 42: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/42.jpg)
Synthasite• www.synthasite.com• Free• Fexible• Takes a bit of getting used
to• Lots of layout options• Use the simple templates
![Page 43: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/43.jpg)
Wordpress• www.wordpress.com• Blogging tool only• Not very flexible• Free• Widely used in both
forms• Some templates• Simple
![Page 44: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/44.jpg)
Squarespace• www.squarespace.com• Highly flexible• Great looking templates &
sites• Anyone can create great
looking sites.• Not free• Takes getting used to
![Page 45: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/45.jpg)
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
![Page 46: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/46.jpg)
Google sites• Sites.google.com• Quite easy to use• Some tricky features• Free• Can be boring at times
![Page 47: The Basics Of Web Design](https://reader036.fdocuments.in/reader036/viewer/2022062319/554a00d0b4c9055b7a8b4f66/html5/thumbnails/47.jpg)
Dreamweaver• Not online• Expensive• Good level of web knowledge
needed• Will need a host site• Completely flexible• Weapon of choice amongst
web designer