Web design beginning

Web DesignJ Thrasher

2011

Monday, 7 February 2011

Researching Web Sites

START -- Research Purposes and Functions of web Sites (Brainstorm)

Investigate Web Sites that are similar - TV Channels (E4, Ch4, Dave, FX, Nick or Boomerang)

Investigate how audiences use the internet

Identify bad sites, using www.websitesthatsuck.com - to work out what NOT to do

GETTING GOING --Learn HOW to design a site overview - it has to be APPROVED before you can continue

Follow the Instructions on how to use iWeb/Attend the class

Use the guides online, google and Youtube if you get stuck and your teacher is busy :-)

Make sure you line things up and maintain coherence - Fonts should be the same or similar, colours should go

together - you’re creating a BRAND IMAGE so it should be recognisable.

Check the blog!


http://www.websitesthatsuck.com

http://www.websitesthatsuck.com

Planning for design - Key Ideas

Site Level

Deep or wide?

Navigability

Page Level

Colour Theory

Layering

Pictures and shapes

Multimedia

Video

Sound


Example of deep design using sub groups to ‘hide’ depth; This plan is for a Media Department site

Home

About

Us

Why

Study

@

AS M

Yr12

A2 M

Yr13

BTEC

MediaTopics

Prac Prod

LinksStudy skills

Blogs &

Forums

Resou

rces

Detail

about

Dept

Why

study

explain

Page with more links

Hwk,

Assignme

nts &

Support

Wire in

the

Blood

Bond

Pract

Prod AS

guidance

Advice

on Pract

Prod

Schedul

es/past

papers

DOWNLOADS ON PAGE

Yr12 Production Guide, Producing Magazines for Practical Work, Thriller Opening Sequences etc (all .doc) How

to...music for film, Storyboarding - how to! etc (all .pdf)

Other links from page e.g. NMT, Sitcom, Video Games and Game Culture, Textual Analysis-

Action/Adventure, Institutions, Trips, events and exams, Discussions, Course outline & specs

These pages all have main pages with sub pages, all of which have information and sub pages with downloads


Colour Theory

What is colour theory?

Why is it important?


Basic Colour Theory


Complementary & Analogous Colours


Active colour


Combining Colour


Analogous Colour


Good Web Sites...This link explains the basics of colour theory;

http://www.colourmatters.com/colourtheory.html

This is the best summary resource and is on wikipedia;

http://en.wikipedia.org/wiki/Colour_theory

This link is specifically aimed at applying colour theory to web design;

http://www.coloursontheweb.com/

This has the most wonderful SPIN function where you can press a spin button and it generates three working colours. You can then jiggle them around to see the affects when changing them between text, background or complement. This will give you hours of endless fun and lots of ideas for your own sites.

Also try http://www.worqx.com/color/index.htm - source for many of my slides


http://www.colormatters.com/colortheory.html

http://www.colormatters.com/colortheory.html

http://en.wikipedia.org/wiki/Color_theory

http://en.wikipedia.org/wiki/Color_theory

http://www.colorsontheweb.com/

http://www.colorsontheweb.com/

http://www.worqx.com/color/index.htm

http://www.worqx.com/color/index.htm

Layering...


SoundJust a few points here...

Music seems like a good idea but think about how you feel about it when you’re browsing a site and

music comes on! Unless it’s a music web site or the user can choose to click for sound I wouldn’t

bother.

Think USER, USER, USER!

If you must have music, make sure you/the user can turn it off!

Think about copyright

Think about page loading time


Other Key Points to consider

Buttons, links and Hypertext

Mouse Over - clarity and labels

Events - what happens when and how to stop it!

Home - Nav Bar

Load times

Differing browsers, screen size, resolution etc

Keep it simple

Coherence and ‘Brand Identity’


Traversals/Trajectories ! - Testing your site

Look at how you want your audience to navigate around your site

Check that the site navigates as you want

How does one get around? How do you exit? Return to home page? Are your links obvious? How easily can you link out of the site and back?

To ensure your site works, you MUST try it out on others and record their paths

Ask your testers about their experiences and comments

It is absolutely vital you test you site on others who do not know about your site - they will quickly find errors and faults in your navigation


After the design - Evaluation

Before you’ve finished and you’re writing your evaluation (i.e. in the middle of production), you should try a couple of each other’s web sites for errors - you know how to navigate your own site - do others? They’ll spot broken links and dead ends and have good advice on the experience.

After all the checks and revisions, when the site is “finished” , a second check of how others navigate your site is always important, nay imperative! There will/might still be mistakes!

Don’t forget to check trajectories - are the users visiting the places you want them to go? How are they actually using your site? Do you want to alter this? How?

All these checks and a reference to the relevant theory in the production log are all VERY useful and link

practical skills, research, audience research and evaluation

make sure you keep notes of all your changes and revisions as you goa long and write them in your

sketchbooks - this is where a lot of the MARKS come from!!


Key Terms

Coherence - Does your site hold together - does it all look similar?

Traversal - How do you get around the site?

Trajectory - (How) can your users jump across media and other sites?

Hypertextual depth - How deep are your links? Do you have to click lots of thinsg to get to content?


Demand/Offer - what are you offering? what is your audience demanding?

Hypermodal Connections - What links have you got to other sites and web content?

Orientation - How do you get around your site?

Choices/Constraints - What choices did you make and why? What could you NOT do that you wanted to?

Shapes of text, site, pictures

Anchorage - Writing that secures meaning and makes it clear to the audience


Static and Dynamic elements - Mix of moving and non-moving elements? Not too much?

Horizontal and Vertical elements - How are you going to arrange your key elements in your site?

Interpretation - What does your audience think about your site (what it is for? How do they use it?)

Motivation - What meanings did you aim for? Why did you use particular colours etc


and finally...Don’t Panic!

You can do it!

GOOD LUCK

Extra Info in packs...

[email protected]


mailto:[email protected]

mailto:[email protected]

Web design beginning

Documents

Transcript of Web design beginning