• No results found

How to Design a Website - Class 2 Overview

N/A
N/A
Info
Download
Protected

Academic year: 2021

Share "How to Design a Website - Class 2 Overview"

Copied!
55
0
0

Loading.... (view fulltext now)

Download now ( 55 Page )

Full text

(1)

Simple principles for website (and

other) design

(2)

Class 2: Agenda

Before you begin

Setting up a website

Basic design

Accessibility by Donna Haugh

(3)
(4)

Planning your website

Project Planning will be discussed in

detail in another session

In the mean-time look at:

The Web Styleguide

(5)

Equipment

Computer – where the pages are

created

Internet Connection

Broadband

Dialup

(6)

Web host

Internet Service Provider (ISP)

Connect to the Web and create pages

on:

Home pages

(7)

Web host

Hosting Service

Page copied from your computer

To the Host computer by a file transfer

programme

FTP

(8)

Web Page Creation

HTML

Dreamweaver

Open Office

Acehtml – free html editor

(9)

Web Server

Or the Web Host can be on your own

computer acting as a Web Server

Complicated

Expensive

(10)
(11)

3 Principles

Know Your Audience

Design the Web Site So It Can Be

Found

There is no point having a good web site

if no one can find it!

In some cases content is as important

(12)

Domain Name

Choose a Domain Name

Something unique that can be

remembered and found

www.bbc.co.uk

www.bm.ac.uk

(13)

Google Friendly

Make sure key search terms are in:

URL www.bm/ac.uk/archaeology

Title: 'Archaeology at the British

Museum'

In the First Paragraph

In the meta tags

<meta name="keywords"

content="Archaeology, British Museum">

meta name="description"

content="Archaeology in the British

Museum">

(14)

Link Friendly

High Page Rank

(15)

Market the Web Site

On leaflets

Emails

Letters

Publicity

Press Releases

Collaborators

(16)

Check the marketing

Analysis the web site statistics

- to be discussed another time

Aim

Number 1 on Google search page

Or on first page of Google

(17)

Simple principles for website (and

other) design

(18)

4 main factors

Proximity

Alignment

Repetition

Contrast

and Colour

(19)
(20)

Proximity

Objects close together become a

visual and conceptual unity

Items relating to each other should be

(21)

Proximity

Anne Smith 020 7679 2010

Better Websites

126 Langer Rd London W14

Better Websites

Anne Smith

126 Langer Rd, London W14

020 7679 2010

(22)

Proximity - more

e-conomy

innovations

internet

museum

higher ed.

education

library

Europe

how-to

conferences

Topics

e-conomy

innovations

internet

Organisations

museum

higher ed.

education

library

Europe

Resources

Topics

e-conomy

innovations

internet

Organisations

museum

higher ed.

education

library

Europe

(23)
(24)

Alignment

The simplest way towards a neat page

Nothing should be placed arbitrarily:

everything should be related to

something else

(25)

Alignment

Anne Smith 020 7679 2010

Better Websites

Better Websites

Anne Smith

126 Langer Rd, London W14

020 7679 2010

Better Websites

Anne Smith

Better Websites

Anne Smith

126 Langer Rd, London W14

020 7679 2010

(26)

Alignment

Anne Smith 020 7679 2010

Better Websites

Anne Smith

126 Langer Rd, London W14

020 7679 2010

Better Websites

Anne Smith

126 Langer Rd, London W14

020 7679 2010

(27)

Alignment

Better Websites

Anne Smith

126 Langer Rd, London W14

020 7679 2010

Better Websites

Anne Smith

126 Langer Rd, London W14

020 7679 2010

Better Websites

Better Websites

Anne Smith

(28)

Alignment

Better Websites

Anne Smith

126 Langer Rd, London W14

020 7679 2010

Better Websites

Anne Smith

126 Langer Rd, London W14

020 7679 2010

Better Websites

(29)

Living Daylights

Poems from

my misspent youth

Blah blah blah

blah blah

Alignment

Living Daylights

Poems from

my misspent youth

Blah blah blah

blah blah

To centre?

Living Daylights

Poems from

my

misspent youth

Blah blah blah

blah blah

blah blahblah blah

(30)
(31)

Repetition

= consistency

Repeat a distinctive design element

throughout the piece

Allows a user to know where to expect

(32)
(33)

Contrast: 4 elements

Typeface

Size

Weight

Colour

(34)

Contrast: typeface

Serif – easiest to read blocks of text

Sans Serif – good for headlines

(35)

Contrast: Size

Typeface

Size

Weight

(36)

Contrast: Colour

Typeface

Size

(37)

Contrast: 1 Rule

Keep it Simple

1 Headline Font 1 body font

If you break the Rule:

(38)

contrast: the rule

Break it

Boldly

Then they know

(39)

An Afterthought

(40)

Text: simple rules

Avoid long lines of text

Use margins

Write concisely – short interesting

points

(41)
(42)

Design for Usability

'The idea is that, no matter what you're

doing, there's a user-centered way of

doing it. Users should be considered

throughout the website design

process.'

(43)

Design for Usability

Without a big development team how

do you achieve usability?

1. Use a simple clear design

2. Seek good web sites – see how they do it and

emulate them

3. Web site navigation is beginning to become more

(44)

Design for Usability

Some Examples:

http://www.thecreationmuseum.org/

http://www.recoveredhistories.org/index.php

http://www.screenonline.org.uk/tours/index.html

http://www.featherstone-associates.co.uk/

http://www.christies.com/home_page/home_page.asp

(45)

Design for Usability

(46)

Design for Usability

(47)

Design for Usability

Some Examples:

http://www.thecreationmuseum.org/

http://www.recoveredhistories.org/index.php

(48)
(49)
(50)
(51)
(52)
(53)

Colour

(54)
(55)

Colour

hue = what colour is it?

saturation = vivid or faint?

chroma = pure colour or chalkey/grey?

colour wheel

Tate

References

Download now ( PDF - 55 Page - 2.74 MB )

Related documents

IN T H E UNI T E D ST A T ES DIST RI C T C O UR T DIST RI C T O F N E W JE RSE Y

multiple surgeries, extensive medical treatment, and will require significant physical rehabilitation. As a direct and proximate result of the physical injuries sustained by Mr.

The large groups, contractors and new lead projects come mainly in these sectors:

Agriculture • Mining • Forestry • Animal husbandry (breeding, milking) • Space Robots help the person. Homehelp for seniors• Wellness• E-health

AN APPROACH TO THE ORIGIN OF KEBAN LEAD-ZINC MINERALIZATIONS, ELAZIĞ, TURKEY: A PRELIMINARY STUDY

Primary ores of Keban Pb-Zn mineralizations in Nimri formation, whether they are classified as SEDEX type or MVT, are not skarn type mineralizations directly related with

Proposed an upgrading of beauty and health spa at No.5, Jalan PP3, Bandar Universiti, 32610 Seri Iskandar Perak for Ratna Mutiara Enterprise / Hasmahani Azizan

This project is about proposed upgrading of beauty and health spa at No.5 Jalan PP3, Bandar Universiti, 32610 Seri Iskandar, Perak Darul Ridzuan.The client is

Detailed Results of Photocopied Maps

[r]

A nested heuristic for parameter tuning in Support Vector Machines

Keywords: supervised classification, Support Vector Machines, parameter tuning, nested heuristic, Variable Neighborhood Search, Multiple Kernel Learning.... It is well-known that

Physical Attacks on Tamper Resistance: Progress and Lessons

• Data remanence analysis of Flash in modern chips to estimate possibility to recover previously erased data • Improving side-channel attacks with new techniques • Testing

Presentation. KEYTECH S.r.L. Business Unit

Strong experience in automotive parts Technical Ability &amp; experience Numerical Codesign With Customer knowledge High quality Materials Technical support KEYTECH S.r.l..