Copyright © 2003 Bolton Institute The Web is a new medium Writing for the web is not like writing a print document Users tend to browse and glance at information.

Slides:



Advertisements
Similar presentations
Website Design What is Involved?. Web Design ConsiderationsSlide 2Bsc Web Design Stage 1 Website Design Involves Interface Design Site Design –Organising.
Advertisements

How can Microsoft PowerPoint 2007 help you share information?
Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines.
DIVISIONS FOR ALL WEB PAGES Web Page Elements.  All Web Pages should have the following 4 elements (Also called divisions).  header  navigation  content.
JSTOR User Services l February 2009 Using the JSTOR Interface User Services, February 2009.
Chapter 6: NavigationCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach.
Copyright © 2001 Bolton Institute Faculty of Technology Multimedia Integration and Applications Multimedia Integration and Applications Lecture.
Multimedia & Website Design Initial Planning (Part 2)
Chapter 4 Planning Site Navigation. Principles of Web Design 2nd Ed. Chapter 4 2 Principles of Web Design Chapter 4 Objectives Create usable navigation.
IWebFolio Using a Template Tutorial Images in this tutorial:
Your Website Chat & Live Customer Support Solution "Instant Customer GratificationSM" Brought to you by: Affordable Business Productivity and Communications.
THE BASICS OF THE WEB Davison Web Design. Introduction to the Web Main Ideas The Internet is a worldwide network of hardware. The World Wide Web is part.
Tutorial Home Improvement Reference Center support.ebsco.com.
Navigation and Menus Hillary Funk. Agenda  Overview of Navigation and Menus  Types of Navigation  What good navigation includes  Navigation Stress.
Computer Science : Information Systems Design and Development Unit Web Sites - National 4 / 5 St Andrew’s High School-Revised January 2013 Slide 1 St Andrew’s.
Chapter 12: The Internet The ultimate direct. Internet Facts U.S. firms spend $14.7 billion on Internet advertising in 2005 By 2010, they are expected.
Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
Unit 12 LO3 Be able to design websites
Simple Pages for Omeka Lauren Dzura LIS
Web Technologies Website Development Trade & Industrial Education
Creating a Presentation
Creating Integrated Web-based Projects using Microsoft Word.
December 2010Brad Hudson AO3 Homework Task > All you need to know about sending s.
Micro sites Basic training guide. Welcome to your Micro site. Here you can create your own personal page within the Countrywide website. When you first.
Learning.com for New Users. This presentation will help educators… Login to Edit your Learning.com educator account Access resources.
How to use the internet The internet is a wide ranging network that thousands of people use everyday. It is a useful tool in modern society that once one.
Internet absolute basics getting you started with the internet Click to enter.
An Introduction To Websites With a little of help from “WebPages That Suck.
Cipro.co.za content pages look & feel | usability | navigation redesign © Copyright Rob Cowie 2009 live demo | home page:
Copyright ©: SAMSUNG & Samsung Hope for Youth. All rights reserved Tutorials The internet: Web searches Suitable for: Beginner Improver.
Organizing Information AGCJ 407 Web Authoring in Agricultural Communications.
G053 - Lecture 07 Designing Your Web Pages Mr C Johnston ICT Teacher
Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.
Dreamweaver MX BTA3Open. Dreamweaver MX Application used for creating web sites Homepage must always be saved as index.htm All files names must be in.
Enjoy-a-Ball Franchisee Basic training guide. Welcome to your Enjoy-a-Ball Micro site. Here you can create your own personal page within the Enjoy-a-Ball.
>> HTML: Structure Elements. Elements in HTML are either Inline or Block. Block-level Elements – Begins on a new line – Occupy the whole width – Stacks.
Chapter 17 Designing for the Web Ryan Galloway Andy O’Neil Joe Ahn.
Interface Design Web Design Professor Frank. Design Graphic design and visual graphics are equally important Both work together to create look, feel and.
IWM 14 Information Architecture: Designing Navigation.
Principles of effective web design NOTES Flo Morris-Duffin.
By Lauren Mayer WEBSITE RESEARCH. NYLON MAGAZINE WEBSITE Header, this is the title of the website and should be the main attraction. This example had.
APICS Website Tutorial. Searching is easy with the new search function, which appears on every page. Shop APICS is accessible from here and is linked.
Welcome to Good Reading Online (GRO). Part 3 of this tutorial will show you how to browse the archive of past magazines as well as perform keyword searches.
Web Site Development - Process of planning and creating a website.
Web page design. Web Site Design Principles Design for the Medium What is meant by Hyper Media? Hypertext links.
Ecommerce Applications 2009/10 Session 41 E-Commerce Applications Step by step building of a shop in Shopcreator.
Qmags At The Cutting Edge of Digital Publishing. Mobile (Platform, Specification and Features) Template Elements ( Your home page will be the only unique.
WHY DO YOU NEED IT? What is a wireframe?. A wireframe is… A wireframe is a simple visual guide to show you what a Web page would look like. Wireframes.
Complete Ordering System for Promotional Literature and Samples Quick Reference and Training Guide.
MARK3030 Navigational Testing Navigation Design Basics all of the ways that users can move around a site and understand where to go revealed in the appearance.
Multimedia Web site development Plan your site Steps for creating web pages.
Destiny: Your Library’s Online Catalog Finding Books, Magazines Websites & More! Basic Search Power Search Visual Search Destiny Quest.
School District U-46 Metadot Portal Training. Agenda Intro – Objective Working knowledge of “how to” use this tool to create a personal page Your Expectations?
Section 6.1 Section 6.2 Write Web text Use a mission statement
Landscape Institute Introducing the new Branch Websites
Webtech has 3 main pages: WebTech Home, Students’ Page and Module’s Home. Using the top buttons, you can quickly navigate different levels. Each module.
Imran Hussain University of Management and Technology (UMT)
Small Engine Repair Reference Center
GCE Applied ICT G053: Lesson 07 Design Tools and Techniques
Windows Internet Explorer 7-Illustrated Essentials
Page plans A01 Design.
Legal Information Reference Center
Website Planning EIT, Author Gay Robertson, 2018.
Design Considerations
Homepage and taglines.
Website production.
Where am I? Navigating a website: Browsing, searching, menus & breadcrumbs.
Presentation transcript:

Copyright © 2003 Bolton Institute The Web is a new medium Writing for the web is not like writing a print document Users tend to browse and glance at information until they find something they are after Web users have a very limited attention span

Copyright © 2003 Bolton Institute Non-linear authoring Don't assume users want to read a long piece of text Think for a moment about how you surf the web… Typically you are navigating to an answer – you don't stop to read the detail on the way

Copyright © 2003 Bolton Institute Pyramid structure Start with general content Enough information to explain Engaging and interesting Add detail on lower level pages Once the user is confident they are in the right place, they start to pay attention Follow the magazine analogy here Cover headlines attract attention Contents page explains more Article contains the detail

Copyright © 2003 Bolton Institute Site Mapping Navigational structure is normally defined by a sitemap This consists of a formalised plan/location allocation for every conceivable area of the multimedia artefact and produced at the planning stages

Copyright © 2003 Bolton Institute Site Mapping homepage Homepage Contact pageServicesProducts Software

Copyright © 2003 Bolton Institute Navigation Space devoted to helping users get around your site Can be either graphical or textual Top toolbars or side navigation bars are good examples Tends to have more space on home pages than on lower levels – white space as discussed previously

Copyright © 2003 Bolton Institute Navigation elements Consistent items for every page ie. Toolbar at the top Context dependent navigation Panel to one side Where am I? A breadcrumb trail Home > Products > Hair Dryers > Manufacturer > product details

Copyright © 2003 Bolton Institute Navigation as branding The design of navigation is integral to the branding of multimedia artefacts Has a consistent appearance Useful to people who enter a site without visiting the home page

Copyright © 2003 Bolton Institute Inside looking out Many websites follow a company's organisational chart exactly Every division wants a navigation button on the home page What do you do when the company reorganised? Users are goal-oriented – the best web sites reflect this

Copyright © 2003 Bolton Institute On every page? Should the same navigation appear on every page? Yes for some elements Link back to home page Search and site maps Major sections of a site No for others Material with no relevance to current page

Copyright © 2003 Bolton Institute Screen real estate Space on screen is a valuable commodity Important to get important information in the first eyeful Navigation tends to sit around the edges of the page

Copyright © 2003 Bolton Institute