Download Web Design - WordPress.com

WebDesign
An Introduction
Web Design Overview
Trainer:
Phil Jackson
Web fundamentals:
What is the World Wide Web?
Web fundamentals:
Internet vs World Wide Web?
Internet:
Massive network of networks, a networking infrastructure. It connects millions of
computers together globally, forming a network in which any computer can
communicate with any other computer
World Wide Web:
A way of accessing information over the medium of the Internet. It is an informationsharing model that is built on top of the Internet.
Web fundamentals:
Structure of the internet
World Wide Web
• It’s the graphical user interface of the Internet
• The software is called a browser
• Navigate using hypertext links (hyperlinks)
• Hypertext Transfer Protocol (HTTP)
Web fundamentals:
How was the internet/web invented?
1957 - the Soviet Union launched the first satellite, Sputnik I, triggering US President Dwight
Eisenhower to create the ARPA agency to regain the technological lead in the arms race. A
country-wide communications network.
1969 - ARPANET goes live connecting 2 universities. Hypertext used and emails are sent.
The internet is an academic technical environment.
1989 - Tim Berners-Lee invents HTML and HTTP and the WorldWideWeb is born. This is
the ‘interface’ of the internet.
1990 - the ARPANET was retired and transferred to the NSFNET. The NSFNET was soon
connected to the CSNET, which linked Universities around North America, and then to the
EUnet, which connected research facilities in Europe
1990+ - Current Web usage takes over Universities sending documents to each other and
the modern Web starts to flourish
Web fundamentals:
What is the World Wide Web?
The Inventor of the modern internet
Tim Berners Lee
One of the First web pages
One of the First web pages - Stanford
http://www.w3.org/History/19921103hypertext/hypertext/WWW/TheProject.html
Old websites
http://www.archive.org/
Web fundamentals:
Current internet statistics
Web fundamentals:
Vital Internet Statistics
How many people are on-line worldwide?
UK internet usage
How many websites are there worldwide?
Internet usage by language
The dot.com bubble bursts
How to determine our overall site design environment
Web Browser / OS / Resolution – Statistics
Mobile usage as overall percentage
Resolution Viewer - http://www.pagerank.net/screen-resolution-check/
Web fundamentals:
Accessing the internet
The browser
• Microsoft Internet Explorer 6 / 7 / 8 (PC only)
• Firefox (PC/Mac)
• Google Chrome (PC/Mac)
• Safari (PC/Mac)
• Opera (Good on mobiles)
• Flock (Good for Web 2.0)
First Browser: http://en.wikipedia.org/wiki/WorldWideWeb
List of browsers: http://en.wikipedia.org/wiki/List_of_web_browsers
Web fundamentals:
What’s so special about the web?
Web Design Intro:
Web design: What is different?
Varied and unpredictable audience
Note:
Colour
Media
Design
Function
Web Design Intro:
Web design: What is different?
Interface between
people and people
Web Design Intro:
Web design: What is different?
• A web site is not a fixed entity
• Different platforms
• Screen sizes
• Flexible designs
• CSS
Web Design Intro:
Web design as a discipline
So the web medium is different from traditional media
• Bandwidth / Download time
• Websafe colours & fonts
• Text
• Images & animation
• Browser compatibility
• Browser settings
• Plugins/Flash animation
• Navigation
Print to Web: http://www.brown.edu/Research/Primate/ (Primate)
Print to Web: Another site still trying to be a print document (Stanford)
Web Design Intro:
What online does best
• A potentially multi-sensory experience
• Caters for a wide diversity of learning styles
• Interactivity is perceived as fun. Can inspire and motivate
• Feedback can be instantaneous
• Ability to contribute/publish on the Internet increases
motivation
• Flexible / adaptive - differentiated levels of information
• Hypertext online (as opposed to printed matter) can operate
like the brain, jumping from one idea to another, in a non-linear
fashion. This stimulates how some users think and is thus an
invaluable tool.
Web Design: Planning
Planning your website
Web Design: Planning
Current thought: style vs. design
Two distinctly different things:
Design:
Tells you where you are, cues you what to do, and facilitates the
doing
Style:
Is an aspect of design; colour choices, font choices: aesthetics
Web Design: Planning
Setting Goals
Web Design: Planning
Setting goals
Whether you are established
Whether you are a new site
- Re-evaluate
- Restructure
- Redesign
Web Design: Planning
You MUST have a
clear idea of GOALS!
Web Design: Planning
Setting a goal for your site
• Why? Many/most websites fail because their brief is too broad
• Write down a short, clear goal - and only ONE goal
• Whenever you have to make a decision, satisfy the goal only
Web Design: Planning
What are you selling?
What is your goal / goals?
• Download a brochure
• Sign up for a newsletter
• Subscribe to a mailing list
• Request a product sample
• Book a sales consultation
• Purchase a product
• Book a service
Web Design: Planning
The JOURNEY to the GOAL
Web Design: Planning
Define a customer ‘JOURNEY’
The USER:
Entrance >> Information >> Goal Completion
Web Design: Planning
Define a customer ‘JOURNEY’
The USER:
Landing Page >> Information >> Money Page
Web Design: Planning
Define a customer ‘JOURNEY’
• Site may have several journeys
• Look for ‘journey leakage” – people drop out
• (Google) Analytics will show you where (bounce rate)
Web Design: Planning
The Brief
Web Design: Planning
Write a brief: Why?
• Many clients & producers are incapable of giving a proper
brief.
• They have a rough idea of what they want, maybe they've
seen something on another site and want something similar.
• Maybe they have no idea what they want and are looking for
suggestions.
• When you write a brief and you all know where you are
heading, and it's down on paper and agreed.
Web Design: Planning
Write a brief
• It is what your designers need so everyone
has the same vision
• It ensures the satisfaction of the most
important member of the group: –
THE USER
Web Design: Planning
The audience: The User
Web Design: Planning
The audience - understanding your visitors
• A public website is available for everyone. But “everyone”
is not necessarily the best definition of the audience for your
site.
• Think specifically about the people you want to attract to
the site - their: age, job, financial status, geographical location,
computer/Web literacy
• Categorising audiences The categories will lead you to think
about what content to include and how to organise the content
Web Design: Planning
Check out the Competition
Web Design: Planning
Check out the competition!
Why?
• There is no such thing as an original idea
• Think of this as free market research for your own site
How?
• Type in a keyword and look at the top 5 sites
• Look at their site like an awkward customer:
things that work and things that don’t work
• Look at their meta tags for keywords and code for other
clues…
• Try carrying out a task on their site
Web Design: Planning
Who are your competitors?
• Check on local and worldwide Google
• Concentrate on business ideas in competitor’s site
• How are these ideas presented?
Planning
What are they doing?
How are they doing it?
• Perform SWOT analysis on top 5-10 competitors
• Look at competitor site objectively
• Do you like the look of the site?
• Is it easy to use?
• Look at their site like an awkward customer:
things that work and things that don’t work
• Try carrying out a task on their site
Web Design: Planning
Case Study – Bishops Printers
http://www.bishops.co.uk/
1.Page too confused
2.No clear call to action
3.Covers too much
4.Ineffective design
5.Ineffective SEO
Web Design: Planning
Case Study – LightCMS
http://www.speaklight.com/
1.Clear page layout
2.Clear call to action
3.Covers basics
4.Attractive design
5.Effective SEO
Web Design: Planning
Check out the competition!
http://www.animaland.org/Kids site
http://www.totalkiss.com/ Kiss FMYoung audience site
www.classicfm.com Classic FM – More mature audience
http://service.real.com/realplayer/ Customer Support
http://www.jaguar.co.uk/uk/en/home.htm Sales centred
http://www.illustrationworks.com/ Designers site
http://fingertips.newdamage.com/ Strange design site
http://www.delmore.com/ Funeral Chapel
Web Design: Page Types
Types of Web Page
Web Design: Page Types
THE most important page:
Your Homepage
Web Design: Page Types
Homepage / Landing Page
• 50% of people never go past your homepage
• Be true to your target audience and be upfront and direct
• 10 second rule - your audience has a 10 second attention span!
Homepage Content
• Describe what your site is about - even if only a couple of lines
• No splash page unless absolutely necessary
• Work out your content from who your audience is likely to be
• Use a visual guide to inside content
• Use your latest or greatest content on the homepage as a teaser
Make sure to ‘Chunk’ information - As the BBC site
Web Design: Page Types
What is a Landing Page?
•
Screen Design: Elements
Branding
Navigation
Orientation
Content
Emotion
Interaction
Web Design: Page Types
4 types of web page
www.ineasysteps.com
• Homepage
- Most important page. One simple message
• Transitional page
- Pages that give people a choice of which page to look at next
- Should be quick to load as people are interested in the next page
• Content page
- There to be read - often longer than other pages
- These are most likely to be printed - test them first
Or a combination
• Action page
- Require your visitor to take some action; filling in a form, giving
Credit card details
- Split forms into sections if necessary
Web Design: Page Types
Anatomy of a web page
• Some statistics about an ‘average’ web page (2011).
• Page size – 320k (2003 – 93k)
• Page Download (ie to appear in browser) – 2.3 seconds
• Words Per page: 474
• Links per age: 41 (30 onsite – 10 offsite)
• Page Height: 1440 pixels
• Graphics cause most page download delays
•http://www.websiteoptimization.com/speed/tweak/average-web-page/
Web Design: Page Types
Anatomy of a web page
• Logo (top left)
• Navigation - (Primary and Secondary)
• Header - (header - banner blindness)
• Footer - copyright info
• Body Copy (content is King!)
• Headings (h1 to h6 and SEO)
• Images
• Hyperlinks
• Forms
• Search box (top right)
• Pop-up windows
• Advertising
Web Design: Navigation
Navigation
Web Design: Navigation
Navigation - Styles
Sequence
http://www.actden.com/pp/
Hierarchy
http://www.apple.com/
Web
http://www.cnet.com/
Web Design: Navigation
Navigation - 3 Click Rule
Your visitor should be able to get to any part of your site in no
more than 3 clicks
• Ask yourself what the major tasks are on your site
• Point them in the right direction: not everyone comes
to your site for the same reason or for the reason you
might want them there
Find the price of bathroom lights in 3 clicks:
http://www.habitat.net
http://www.ikea.co.uk
Web Design: Navigation
Navigation types
Sequence
http://www.actden.com/pp/
Hierarchy
http://www.apple.com/
Web
http://www.cnet.com/
Web Design: Navigation
Deciding on Navigation
• User testing using Card Sorting
• User testing using marketing companies
• User testing using colleagues and/or friends
This will tell you how to create your navigation from a
USER’S point of view
Web Design: Navigation
Key to good Navigation
• Use consistent words, positioning, actions and icons
• Don’t abbreviate / Do use short sentences in link anchor text
• Drop down menus - use five or more items for credibility
• Consider jump menu - user will read long list, alphabetically
• Simple and easy to remember interface design
• Consistent and clear positioning of icons
• Provide feedback to inform the user of what is happening
• Exit routes and error messages clearly marked and consistent with clear
explanations
• Choices must be in distinct, appropriate language
Web Design: Navigation
How a user really navigates a site
Web Design: Writing for the Web
How the eye reads a page:
We don’t read pages – we scan them
• Look for words or phrases that catch our eye
• Exception: news stories, reports, product descriptions (if long will print out)
Why do we scan?
• We’re usually in a hurry
• We know we don’t need to read everything
• What we see on the webpage depends on what we have in mind
(Steve Krug - Don’t Make Me Think)
http://www.sensible.com/chapter.html - Steve Krug
http://www.poynterextra.org/eyetrack2004/viewing.htm - Eye Tracking
Web Design: Navigation
Designing for scent
• Your content must give off scent
• Scent is about pulling the user to the content
You need to know:
• Why the users are coming to the site
• What are their trigger words?
• Where are they likely to look?
• Avoid site search engines
Test users
If you need something like a search engine, consider a list/
menu instead
Web Design: Navigation
How to design for scent
• Clear, usable design elements contribute to users
confidence
• Before they click: link quality, new graphics, and
information organisation
• After they click: seeing the desired information, or a
more stronger scent
GOOD DESIGN = CONFIDENCE OF USERS
Web Design: Navigation
How to design for scent
• Clear, usable design elements contribute to users
confidence
• Before they click: link quality, new graphics, and
information organisation
• After they click: seeing the desired information, or a
more stronger scent
GOOD DESIGN = CONFIDENCE OF USERS
Web Design: Navigation
Things that prevent scent
1. Search engines –
• Up to 60% of all searches fail.
• Can’t know the trigger/key words people use. If they get
results, it is usually more than one and the whole process
becomes overwhelming
2. Navigation – links need to look like links. Beware of “banner
blindness”. This is where people ignore the top of the page for
navigation as they are used to this area have useless banner
advertising.
3. Cute / weak / ambiguous links
Web Design: Writing for the Web
Writing for the web:
How a user ‘reads’ a web page
Web Design: Writing for the Web
Writing for the web - key tips:
• Highlighted keywords (hypertext links serve as one form of highlighting; typeface
variations and colour are others)
• Plentiful use of sub-headings for paragraphs
• Meaningful sub-headings (not "clever" ones)
• Bulleted lists
• One idea per paragraph (users will skip over any additional ideas if they are not
caught by the first few words in the paragraph)
• The inverted pyramid writing style, starting with the conclusion or summary, then
giving more facts.
• Halve the word count (or less) than conventional writing.
Web Design: SEO
SEO – Search Engine Optimisation
Making it easier for search engines to ‘see’ your site
1.Onsite SEO – optimise site elements
2. Offsite SEO – optimise inbound links
•Google places more emphasis on offsite optimisation than the other search
engines making offsite SEO very important
Web Design: SEO
Onsite SEO
1. Optimise your page title
2. Optimize your text content – 5-7% keywords, first words of main para
3. Optimize your headlines (H1, H2)
4. Emphasize keywords
5. Optimize your images (for text – filename, alt tags)
Web Design: SEO
Offsite SEO
Off-Site SEO refers to search engine optimization techniques that are
not performed on your own website or page, and are therefore
termed "off-site."
Backlinks:
• Getting quality links relevant to your topic linking to your site
• Think of each backlink as a vote for your page
• This is what Google's PageRank measures, albeit in a complex way,
taking many factors into consideration
Web Design: SEO
Offsite SEO
There are many ways to get backlinks; unfortunately, few of them are
quick and easy. Here are some options:
•
•
•
•
•
•
•
Creating content that makes people link to it
Doing link exchanges (be wary of this)
Getting directory listings
Writing and syndicating articles
Making forum postings
Posting comments to theme related blogs
Buying links (be wary of this)
Web Design: SEO
Offsite SEO
• One link from a high quality site is worth tens from a poor site. And
linking to bad sites can negatively effect your own website's rankings.
• One-way links into your website from another are of greater value than
reciprocal links from carrying out link exchanges.
• Links to your pages should use the relevant keywords in the anchor text.
Web Design: SEO
SEO – Optimising META tags
Title tag
• One of the most important parts in today’s SEO.
• Put most important keywords in the title tag.
• Put your company name in the end of the tag
• Use a maximum of 10 words and 80 characters.
Meta Description
• The description of a webpage shown in the search engine result.
• Don’t use more than 130 characters in the Meta Description
Meta Keywords
• 20-25 keywords separated by a comma.
• The Meta Keywords are not that important for the search engines anymore
Web Design: SEO
SEO – How to:
• Look at your competition – choose 5 top sites by keyword
• Look at website code: What keywords do they use?
• Who do they have links from? In Google - link:sitename.com
• Learn from Google: About Google/Webmaster Info
• Use Google Analytics
Web Design: SEO
SEO – Good Sites:
How your site looks to Google: http://www.seo-browser.com/
Good SEO Tools - http://www.addme.com/keyword-density.htm
Horse’s Mouth – Google’s advice on SEO best practice
Page Rank Site - http://www.prchecker.info/check_page_rank.php
Web Design: Hosting
Website Hosting – What you need:
1. Domain name – the website name
2. Hosting – where you put your website whilst it’s online
Web Design: Hosting
Website Hosting
1. Domain name – Buy for 2 years – cost: around £8
2. Hosting – Buy for 1 year – cost: around £25+
All domain name and hosting must be renewed every 1 or 2 years
Web Design: Hosting
Domain names - Buying
1. Go to 123-reg.co.uk (for example)
2. Type in the name you want
3. See if this is still available (.com good names gone)
4. Buy it (can be addictive, be warned…)
Web Design: Hosting
Setting up Domain & Hosting – Procedure
1. Buy your Domain name
2. Buy your Hosting
3. If domain name and hosting bought at same place you are now set
4. If domain name bought at different place to hosting you have to point
your domain name at the hosting – change DNS settings (Nameservers)
via your control panel of your domain name company. Get the hosting
nameserver addresses from your HOSTING company
5. FTP details will have been sent to you by hosting company
6. Enter these FTP details into Dreamweaver or other FTP software
7. Connect to hosting company via Dreamweaver
8. Upload your site to relevant folder – See hosting docs for info
Web Design: Hosting
Getting Online – FTP
FTP – File Transfer Protocol
FTP Details:
1. FTP Host Address
2. Username
3. Password
Web Design: Hosting
Getting Online – FTP
FTP – Software
Dreamweaver – FTP built in
Rapidweaver – FTP built in
Filezilla – FREE - PC/Mac (GOOD)
Cyberduck – FREE - Mac
Coffee Cup – FREE - PC
Web Design: Hosting
Website Domain names
What to look for:
1. Short names
1. Names with keywords
1. Names related to Your Core Business or Business Name
1. Use country specific extension
Web Design: Hosting
Website Domain names
What to look for:
.com
.co.uk
.org / .org.uk
.ac.uk
.net
– Commerce worldwide
– Commerce UK, general UK address
– Charities UK
– Education UK
– IT companies worldwide
• Buy the domain which best reflects your core buyer/viewer
• Are they in the UK or worldwide
• Can buy all and point to same address. Yearly renewal fees
Web Design: Hosting
Website Domain names
How to find:
1. Go to any domain name seller site (eg www.123-reg.co.uk)
1. Search for your name
2. Either buy there or elsewhere
Web Design: Hosting
Website Domain names
• Your domain name needs to be pointing at your hosting
1. Buy domain name and hosting at the same company
2. Point your name (bought at one company) at another company where you
bought your hosting – Changing nameserver address
3. Transfer your domain name to the hosting company’s website – Changing IPS
Tags
Web Design: Hosting
Website Hosting
What to look for:
1. Linux (usually go for Linux)
2. Windows
•
•
•
•
•
•
Not much difference
Linux more widely used
Linux open source
Linux very stable
Windows if running exclusively Microsoft server applications
Windows hosting sometimes more expensive
Web Design: Hosting
Website Hosting
What to look for:
1. Disk Space
Disk space is the amount of data you can store on your server
2. Bandwidth Transfer Allowance
Transfer allowance (bandwidth) is how much data that can be downloaded
from your website.
3. Age / Reliability of host company
Use Web Designer magazine and Google search for reviews
Web Design: Hosting
Website Hosting
What to look for:
4. Help/ Technical Support - Are they in the UK? / Phone / Email?
You WILL need support – make sure it’s easy to access and understand
5. Bandwidth Transfer Allowance
Transfer allowance (bandwidth) is how much data that can be downloaded
from your website.
6. PHP And MySQL Support
Scripting languages especially designed for website development.
Web Design: Hosting
Website Hosting
What to look for:
7. Reseller Account
Most hosting only allows ONE domain per hosting. Consider a Reseller
account if you are going to host many websites
8. Price
The web hosting business is getting very cut throat lately, which is great
for the consumer. Can get free hosting with links
Web Design: Hosting
Website Hosting
What to consider:
• Can buy names anywhere and redirect to hosting
• Can usually only put one website on a regular hosting
• Need a ‘Reseller’ hosting package to host more than one site
Web Design: Hosting
Website Hosting
Some good sites
Domain Names: http://www.123-reg.co.uk/
General Hosting: http://www.streamline.net/
Reseller (and personal): http://www.haisoft.co.uk/
Cheap and Free hosting (with a catch) http://www.ukcheaphosts.com
Web Design: Getting Online
How to get your website online:
FTP – File Transfer Protocol
Using either free or paid for FTP software, or FTP through Dreamweaver
Free - PC
Coffee Cup - http://www.coffeecup.com/free-ftp/
Filezilla - http://filezilla-project.org/
Free - Mac
Cyberduck - http://cyberduck.ch/
Filezilla - http://filezilla-project.org/download.php