Embed Size (px)
Citation preview
Website DesignBTT1OC/2OC
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 DesignO 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 contrastO Really small or large fontsO Poor quality of imagesO Difficult to navigateO 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 websitesO http://msy.com.au/
O http://www.dokimos.org/ajff/
O http://www.sixtiespress.co.uk/
O http://techcrunch.com/tag/apple/
O http://www.pinesol.com/#/explorer/
O http://www.richardsbrothersseafoods.com.au/
What makes good web design?
O Student examples …
Get an answer …
Dos and Don’ts of web design
Dos Don’ts
O Use contrastO Easy to navigateO High quality imagesO Engaging visuallyO Good contentO Design for your
audienceO Use consistency O KISS – Keep it
simple smartie!
O Use typography that is hard to read
O Colours that don’t contrast
O Too many coloursO Too many images
or low quality images
O Too busy / cluttered
O Too much text
DesigningO 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 WixO Log on to:
http://www.wix.com/O View the demo:
http://www.wix.com/how-to/getting-started
O Create an account O Choose a template and begin
designing.O Design one of the following …
Practice websites1. 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.
