Transcript Website Design

Website Design
BTA3OC
What is web design?
O A web site is a digital page consisting of
HTML (hypertext markup language) files,
images, movies, sound, and other media.
O The code in these HTML files are read by
your internet browser and displayed in the
format you see every time you go onto the
internet.
O As a designer, you create the websites that
the world sees.
Web Design
O As a web designer, you (or a team of you) are
responsible for the code behind the page (what
makes it work), the layout, the flow from page to
page, and of course, the visual appearance.
O A primary task of web design is to create a
strong, consistent visual hierarchy in which
important elements are emphasized and
content is organized logically and predictably.
O Graphic design is visual information
management, using the tools of page layout,
typography, and illustration to lead the reader's
eye through the page.
What makes bad web design?
O Student examples …
O Fonts and backgrounds that don’t contrast
O Really small or large fonts
O Poor quality of images
O Difficult to navigate
O CAPITAL LETTERS OVERUSED … YOU PROBABLY
SHOULDN’T DO IT, BECAUSE IT LOOKS LIKE YOU
ARE SCREAMING AT YOUR VIEWERS!!!
O Too busy (either too much text or too many
graphics)
O Using animated graphics.
Read more
Bad websites
O http://msy.com.au/
O http://www.dokimos.org/ajff/
O http://www.sixtiespress.co.uk/
O http://www.pinesol.com/#/explorer/
O http://www.richardsbrothersseafoods.com.a
u/
What makes good web design?
O Student examples …
Get an
answer …
Dos and Don’ts of web design
Dos
O Use contrast
O Easy to navigate
O High quality images
O Engaging visually
O Good content
O Design for your
audience
O Use consistency
O KISS – Keep it simple
smartie!
Don’ts
O Use typography that
O
O
O
O
O
is hard to read
Colours that don’t
contrast
Too many colours
Too many images or
low quality images
Too busy / cluttered
Too much text
Designing
O We will design in two ways:
1.
Design using web tools, such as:
http://www.wix.com/
(We’ll start here)
2.
Design ourselves using Adobe CS4
(Dreamweaver).
Using Wix
O Log on to:
O
O
O
O
http://www.wix.com/
View the demo:
http://www.wix.com/how-to/getting-started
Create an account
Choose a template and begin designing.
Design one of the following …
Practice websites
1. Create a website for restaurant that you
make up (not an existing one).
2. Create a personal bio website.
3. Create a website on an environmental topic
of your choice.
4. Create a website for a store (ie: sports
store, clothing store, etc) that you make up.