Web design lesson 1

Web DesignWeb DesignM6/12M6/12

English Program – Satree PhuketEnglish Program – Satree PhuketAj. JamieAj. Jamie

Web DesignWeb Design

For this course we will be using For this course we will be using Macromedia Dreamweaver.Macromedia Dreamweaver.

Dreamweaver is a WYSIWYG Web Dreamweaver is a WYSIWYG Web authoring tool.authoring tool.

WYSIWYG stands for What You See Is WYSIWYG stands for What You See Is What You Get.What You Get.

Web DesignWeb Design

This semester you will create a portfolio of This semester you will create a portfolio of your work which you will display online.your work which you will display online.

We will also take a look at different types We will also take a look at different types of recent web technology.of recent web technology.

Web DesignWeb Design

Last school year you used Adobe Flash Last school year you used Adobe Flash (Graphic Animation) and Adobe (Graphic Animation) and Adobe Photoshop (Graphic Design).Photoshop (Graphic Design).

We will be using these tools to improve We will be using these tools to improve and enhance your Web Pages.and enhance your Web Pages.

Web DesignWeb Design What makes a well designed website?What makes a well designed website? We’ll look today at 7 important web design We’ll look today at 7 important web design

features:features: Easy NavigationEasy Navigation ImagesImages GraphicsGraphics ColourColour Interesting ContentInteresting Content ConciseConcise AnimationsAnimations

Easy NavigationEasy Navigation How easy is it to move from one page of a How easy is it to move from one page of a

website to another?website to another? Does it fit nicely on the screen?Does it fit nicely on the screen? Does it have a clear menu on every page?Does it have a clear menu on every page? Drop down menu?Drop down menu? Search Box?Search Box? Link to Help?Link to Help? Example:Example:

www.flickr.comwww.flickr.com

ImagesImages A high quality photo related to your A high quality photo related to your

website can improve the overall look.website can improve the overall look. Simple and clear.Simple and clear. Interesting.Interesting. Introduces theIntroduces the

websitewebsite Example:Example:

www.pizzahut.comwww.pizzahut.com

GraphicsGraphics A logo is an important graphic for your A logo is an important graphic for your

website or company.website or company. Graphics can also be used for navigation.Graphics can also be used for navigation. Can include yourCan include your

website or companywebsite or companyname.name.

Example:Example: www.funkypool.comwww.funkypool.com

ColoursColours The colours you choose to use for your The colours you choose to use for your

website are also important. Using a colour orwebsite are also important. Using a colour orset of colours for your menus, text and imagesset of colours for your menus, text and imagescan give your website a neat and tidy look.can give your website a neat and tidy look.

But be careful,But be careful,bright colours or bright colours or too much of one too much of one colour can make colour can make your websiteyour websitelook untidy andlook untidy anddifficult to read….difficult to read….www.facebook.comwww.facebook.com

Interesting ContentInteresting Content Is the information on the website Is the information on the website

interesting for people using the site?interesting for people using the site? A good website will always be changing A good website will always be changing

and evolving to serve the needs of it’s and evolving to serve the needs of it’s customers.customers.

Example:Example: www.hi5.comwww.hi5.com

ConciseConcise Concise - expressing or covering much in Concise - expressing or covering much in

few words.few words. Pages and pages of long boring text will Pages and pages of long boring text will

scare web surfers away.scare web surfers away. Example:Example:

www.phuketgazette.comwww.phuketgazette.com

AnimationsAnimations Animations can add humour and life to a Animations can add humour and life to a

web page.web page. Be careful, too many animations can make Be careful, too many animations can make

a page look untidy and childish!a page look untidy and childish! Example:Example:

http://coraline.com/http://coraline.com/

Web DesignWeb Design Task today:Task today:

Work in Groups of 3 or 4 to create a PowerPoint Work in Groups of 3 or 4 to create a PowerPoint presentation.presentation.

Find 1 website that displays a Find 1 website that displays a goodgood example of example of each of the 7 important web design features.each of the 7 important web design features.

Find 1 website that displays a Find 1 website that displays a badbad example of example of each of the 7 important web design features.each of the 7 important web design features.

(Total 14 websites = 14 slides plus title, (Total 14 websites = 14 slides plus title, introduction and conclusion)introduction and conclusion)

ExampleExample

In my opinion In my opinion www.wibblywobbly.com has has an excellent example of really easy an excellent example of really easy navigation. I think it is easy because .....navigation. I think it is easy because .....