 Understand the problem  Brainstorm solutions  Introduce the constraints  Choose the solution  Paper design  Actual design  Evaluate  Revise.

Slides:



Advertisements
Similar presentations
AHEAD HTML Accessibility Topics: Keyboard Accessibility Content and Structure Links Headings and Lists Images in HTML Pages Tables Forms.
Advertisements

Multimedia Web Site Design Chapter Building an Effective Web Site Creating a Web site is easy, but creating one that is useful and attractive takes.
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Unit 3 Day 4 FOCS – Web Design. No Journal Entry.
UNIT 12 LO4 BE ABLE TO CREATE WEBSITES Cambridge Technicals.
IUPUI Speaker’s Lab CA 001G
Visual Organization and Website Design Unit 5 (no CSS) September 19.
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
Start -> All Programs -> Classes -> Web Expressions -> Dreamweaver.
IV. “Regular” Web Pages: HTML A Web Accessibility Primer: Usability for Everyone Office of Web Communications.
Do’s and Don’ts of Web Design By: Cassandra VanHumbeck.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
7 Selecting Design and Color Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2.
Designing a Classroom Web Site Using NVU Beginning Level.
© 2011 Delmar, Cengage Learning Chapter 2 Developing a Web Page.
Human Geography for Teachers: GCU673 Arizona State University Valerie Mervine.
Website design Feng Zhao College of Educatioin California State University, Northridge.
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
Web Technologies Website Development Trade & Industrial Education
Creating an Attractive Site How will your site look. Think about what your customers are seeking and what type of Web site they find attractive.
Press Association Websites The job of a website is to house information and make it easily accessible.
 Understand the problem  Brainstorm solutions  Introduce the constraints  Choose the solution  Paper design  Actual design  Evaluate  Revise.
Web-designWeb-design. Web design What is it? Web-design features Before…
Creating a PowerPoint Presentation
WELCOME EF 105 Spring EF 105 Computer Methods in Engineering Problem Solving Week 2: FrontPage Introduction to Software Use to create Web Pages.
Website Development with Dreamweaver
Using Dreamweaver Web Page Design. Introduction to Web Page Design Developing a New Site Building a web site involves creating individual pages and linking.
Web Page Design. Some Terms Cascading Style Sheet, (CSS) –a style sheet language used to describe the look and formatting of a document written in html;
Web Development. Interaction Design How is information organized? How will people find their way around the site? How will people work with the information?
An Introduction To Websites With a little of help from “WebPages That Suck.
Lecture 3 Web Design What makes a "good" website? Getting started on your website. Planning the layout. Picking a theme. Effective Design Tips.
WWW via the Internet Local via an Intranet Individual Computer.
Good Web Design. The Four A’s of Good Design Accessible Accurate Appropriate Appealing.
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.
Introduction to Web Page Design. General Design Tips.
Lecture 6 Title: Web Planning, Designing, Developing for E-Marketing By: Mr Hashem Alaidaros MKT 445.
Web Design. Keep a Consistent Appearance Visually show that the site is the same Always use the same background Same graphic style Same type formatting.
IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Designing Web Site Layout Using.
Links in HTML What you need to know….. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another.
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
Microsoft FrontPage 2003 Illustrated Complete Working on the Web Site’s Hyperlinks and Appearance.
Web Site Development - Process of planning and creating a website.
Easy WP Guide V2.6 for WordPress 3.8. easywpguide.com Adding Tags within your Post Adding Tags whilst editing your Post, will automatically assign those.
Human Computer Interaction: World Wide Web Rebecca W. Boren, Ph.D. Introduction to Human Factors & Ergonomics Engineering IEE 437/547 November 2, 2011.
 Add one element at a time  If it doesn’t do what you want, › Delete it › DON’T just keep piling on more items.
 Lesson 6: App Design. Objectives Introduce concepts such as splash screen, logo, marketing, and branding Understand how color is used to emote specific.
What Is Firefox? __________ is a Web ___________ that you use to search for and view Web pages, save pages for use in the future, and maintain a list.
1 PROJECT 3 WEB/HTML PROJECT USING NOTEPAD Management Information Systems, 9 th edition, By Raymond McLeod, Jr. and George P. Schell © 2004, Prentice Hall,
Web Page Elements Writing For the Web
With Microsoft FrontPage 2000
Designing Web Pages.
Basics of Website Development
Blog and its Steps.
Making Templates Accessible
Web-design.
Year 7 E-Me Web design.
PBA Front-End Programming
Objective % Explain concepts used to create websites.
Fixed Positioning.
MIS 201 Web Design.
New PowerPoint Template
Unit 14 Website Design HND in Computing and Systems Development
Applications Software
New PowerPoint Template
Making Templates Accessible
Multimedia Web Site Design
Elements of Effective Web Design
Designing Web Site Layout Using Fireworks
Presentation transcript:

 Understand the problem  Brainstorm solutions  Introduce the constraints  Choose the solution  Paper design  Actual design  Evaluate  Revise  Evaluate, revise, ….

They want/need information They want/need to make a purchase / donation. They want/need to be entertained.

 What is the objective of your web site?  Who is the intended audience?  What should be on the home page and what should be on linked pages?  What is the best layout? – use of heading, paragraph text, images, color, special effects (VISTA).  What navigation is needed? – obvious links to and from your pages.

 Poor Use of Text Size, Contrast, Font  You should be able to look at the home page of any site and figure out what the site is about within four seconds. If you can't, your site has failed.  Using design elements that get in the way of your visitors  Too much material on one page.  Boring, Useless Intro

 Some of the mistakes include  Images that don’t fit the objective  using the wrong image format e.g. GIF for JPG,  large graphics  ugly background images  Images appear “pasted” on  lack of contrast

All web navigation must answer: Where am I? Where have I been? (“visited link” color) Where can I go next Where's the Home Page Navigation must be simple and consistent.

You should be able to look at the home page of any site and figure out what the site is about within four seconds. If you can't, your site has failed.

Mystery Meat Navigation occurs when, in order to find specific pages in a site, the user must mouse over unmarked navigational "buttons" -- graphics that are usually blank or don't describe their function. JavaScript code then reveals what the real purpose of the button is and where it leads.

Yes, it's called a web page, but that doesn't mean you have to cram all your material on one page. It's very easy to keep adding material to your home page until it gets out of control. OR You can add additional web pages with links

Graphic mistakes make the list because they keep showing up again and again.

You have to watch a boring, soundless, twenty second flash intro with no option to skip it. If you're still around when the content loads, the pain doesn't stop. There is a lovely 8 or 10 second delay between when you click one of the navigation options and when the content actually arrives.

If you use a vague link description or just say "Click Here" and don't tell people where they'll end up, they could be horribly surprised (and/or shocked and/or disgusted). Also, remember Web Sites come and go and change content -- be careful about depending on an existing web site.

The thirty square inches at the top of a home page comprise the most visible area of the Web site. Most readers will be looking at your site on a seventeen- to nineteen-inch monitor, and the top four or five vertical inches are all that is sure to be visible on their screens.

The best visual metaphor here is to a newspaper page — position matters. It's nice to be on the front page, but stories "above the fold" are much more visible than those below. In sites designed for efficient navigation the density of links at the top of the home page should be maximal — you'll never get a better chance to offer your readers exactly what they want in the first page they see:

Here are some thoughts about web content. Does your content solve your customers' problems or does it create problems? Look at it from the customer’s standpoint! Does your content match your audience's expectations? Do you know your target audience? Have you determined the purpose of your site? Ask yourself: "What content do I have that would cause anybody to visit my site a second, third, or fourth time?" This is extremely important. You might con (seduce) someone to visit your site once, but why would they want to come back a second, third, or fourth time? Is the content technically correct? Does your customer want to know the content you're presenting? Or is it for you? Is the content current and updated frequently? Can people find the content they're looking for?

 All Web sites are organized around a home page that acts as a logical point of entry into the system of Web pages in a site. All pages in the Web site should contain a direct link back to the home page. The World Wide Web URL for a home page is the Web "address" that points users to the Web site.  Your Web Site URL is  IF your home page is in the Home folder and named “home”  Your Home Page file pathname is M:\Home\home.htm

The Master page Layout Grid The goal is to establish a logical and consistent approach to where basic graphic identity elements, navigation links, and other essential information appear on every page within your site. Terminology is also crucial here: choose your words carefully for links and titles, and solicit comments (peer review) and feedback from fellow team members and site users. A misleading or confusing label or phrase can ruin the functionality of a link.

The Grid Layout

Text Only-- Left, Center, Right on page Tables – provided better organization using a grid layout with cells Frames – more precise but inflexible layouts CSS -- far more flexible and adaptable for your users and for all the devices they may use to visit your site.

SPLIT THE AUDIENCE for Web Sites With a variety of Information

As a Reviewer – Can you tell the objective of the web site? Can you tell who is the intended audience? Is the layout – use of heading, paragraph text, images, color, special effects (VISTA) effective or distracting? Are there obvious links to and from the pages and is the content of those pages evident.

From Web Pages That Suck