Introduction to Web Design

Slides:



Advertisements
Similar presentations
Usability Prepared by: The NYS Forum for Information Resource Management IT Accessibility Committee.
Advertisements

© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
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?
INTERACTIVE BRAND COMMUNICATION Class 7 Creative Issues II: Creating Effective Online Advertising.
Designing Your Page Step 1: Design for a Computer Medium A computer screen is not a printed page. Readability changes depending on color, layout and format.
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
Web Page Design ECE 3940 Megan O’Byrne 10 September 09.
What Is A Web Page? An Introduction to the Internet.
UNDERSTANDING WEB AND WEB PROJECT PLANNING AND DESIGNING AND EFFECTIVE WEBSITE Garni Dadaian.
Expression Web 2 Concepts and Techniques Expression Web Design Feature Web Design Basics.
Section 2.1 Compare the Internet and the Web Identify Web browser components Compare Web sites and Web pages Describe types of Web sites Section 2.2 Identify.
 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
Planning a Web Site Unit Two Planning Steps 1. Determine the audience & objectives. 2. Sketch a storyboard or flowchart of the pages. 3. Create a folder.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
Website Development. Internet Internet (Net) – Global network connecting millions of computers. Network – Group of computers and associated devices that.
Build a Free Website1 Build A Website For Free 2 ND Edition By Mark Bell.
Web-designWeb-design. Web design What is it? Web-design features Before…
Chapter 2 Developing a Web Page. Chapter 2 Lessons Introduction 1.Create head content and set page properties 2.Create, import, and format text 3.Add.
Developing Content and Layout Lesson 6. Creating Web Site Content Online users scan a page, read key words of text, and check out graphics Reading from.
Creating Web Pages with Links, Images, and Formatted Text
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;
Good Web Design. The Four A’s of Good Design Accessible Accurate Appropriate Appealing.
4 Simple Web Design Rules. Your Web Site Should Be Easy To Read  Choose your text and background colors very carefully  Don't use backgrounds that obscure.
Touring the Web Figuring out the best roads to take in web page design.
INTERACTIVE BRAND COMMUNICATION Class 6 Creative Issues II: Creating Effective Online Advertising.
Introduction to Web Page Design. General Design Tips.
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.
 Good navigation is consistent, clearly labeled, and reflects the needs of the site’s audience.  Navigation labels are short, clear, and user-friendly.
Macromedia Dreamweaver 8 Revealed WEB PAGE DEVELOPING A.
?. When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience.
Microsoft Expression Web 3 Expression Web Design Feature Web Design Basics.
Web page layout in elegance.  Specific Designs for Target Audiences Consider your audiences tastes when creating your website.
Human Computer Interaction: World Wide Web Rebecca W. Boren, Ph.D. Introduction to Human Factors & Ergonomics Engineering IEE 437/547 November 2, 2011.
Web Design Principles. Designing a Website Choice of a site color scheme. Choice of text font and size. Placeholder text. Use of white space. Location.
B USINESS W EB P AGE D ESIGN Review for State Competency Exam
Section 6.1 Section 6.2 Write Web text Use a mission statement
Microsoft Office 2010 Basics and the Internet
Microsoft Office 2010 Basics and the Internet
Web Page Elements Writing For the Web
Web-based structures, links and testing
What this activity will show you
What is Microsoft Internet Explorer?
Section 7.1 Section 7.2 Identify presentation design principles
Web Design Principles.
Chapter A - Getting Started with Dreamweaver MX 2004
15 Basic Web Designing Tips
Lawson System Foundation 9.0
Web-design.
Microsoft Word 2003 Illustrated Complete
Getting Started with Dreamweaver
Objective % Explain concepts used to create websites.
A Brief Introduction to the Internet
Step 1: Design for a Computer Medium
How to customize your Microsoft SharePoint Online website
Windows Internet Explorer 7-Illustrated Essentials
What is the World Wide Web (www)
Citation Map Visualizing citation data in the Web of Science
ICT Communications Lesson 4: Creating Content for the Web
Creating and Linking New Pages
HOW TO MAKE PAGES FOR A WEB SITE
Creating a Website.
Web Design Principles.
Elements of Effective Web Design
Tips on good web site Design
Objective Explain concepts used to create websites.
Designing a Web Site.
Web Design Principles.
An Introduction to the Internet
Presentation transcript:

Introduction to Web Design Technology II Mrs. Huddleston

Huddleston - Introduction to Web Design DEFINE THE SITE Determine the purpose. Is the site the best medium to serve the purpose? Who will the audience be? What type of language will appeal to the audience? Is it possible to expand the site? If yes, how far? If no, why not? How often will it need to be updated? Next Huddleston - Introduction to Web Design

Huddleston - Introduction to Web Design Medium Medium—a method of getting your information across to other people Examples: Newspaper, magazine, brochure, flyer, blogs Telephone, radio, TV, billboards Word of mouth Back Huddleston - Introduction to Web Design

Huddleston - Introduction to Web Design IDENTIFY THE AUDIENCE Age Gender Race Religion Technical Level Nationality Language Political Affiliation Education Marital Status Back Huddleston - Introduction to Web Design

CHOOSE A PRESENTATION FORMAT Linear Sequential: only 1 logical way to move through the site Best for training materials Page 1 Page 2 Page 3 Page 4 Huddleston - Introduction to Web Design

CHOOSE A PRESENTATION FORMAT Hierarchical Allows user more freedom in navigation Can navigate through site in many logical ways Huddleston - Introduction to Web Design

CHOOSE A PRESENTATION FORMAT Combination of Linear and Hierarchical Shipping Address Billing Address Credit Card Confirmation Huddleston - Introduction to Web Design

Huddleston - Introduction to Web Design WHY DO VISITORS LEAVE? Loading time is too long Has no useful information or clear purpose Pop Ups Unclear navigation/confusing Links don’t work properly Poorly laid out and/or poorly written Huddleston - Introduction to Web Design

Huddleston - Introduction to Web Design REASONS VISITORS STAY Loads quickly Site purpose immediately and clearly identified Site is well laid out and well written Links work correctly No pop ups Huddleston - Introduction to Web Design

Tips for Quality Pages

Huddleston - Introduction to Web Design AVOID EXTREMES Large (slow loading) image Too many fonts Use only commonly accepted fonts. The more obscure or exotic the font, the less likely viewers will have it loaded on their computers. Too much text Huddleston - Introduction to Web Design

Huddleston - Introduction to Web Design FIND A “HOOK” Hook—Something to keep visitors coming back on a regular basis. Examples Contests Daily drawings Joke of the day Huddleston - Introduction to Web Design

TITLE EACH PAGE CAREFULLY Should convey the purpose of each page What uses the title? Search engines use titles Browsers use title to “Bookmark” User history recorded through titles Next Huddleston - Introduction to Web Design

Huddleston - Introduction to Web Design TITLES The blue bar at the very top of the browser display area contains the title In this example, the title is “Welcome to Franklin Road Academy – Microsoft Internet Explorer” Back Huddleston - Introduction to Web Design

TO SCROLL OR NOT TO SCROLL? Home page should have no scrolling if possible Avoid long pages requiring a lot of scrolling Avoid horizontal scrolling Huddleston - Introduction to Web Design

Huddleston - Introduction to Web Design LINKS Keep link colors at default (if possible) Blue is the color of unvisited links Purple is the color of visited links Save underlining for links only Keep navigation controls uniform in appearance and location Links go across top or down left side of pages Huddleston - Introduction to Web Design

Huddleston - Introduction to Web Design TEXT HEAVY? Use white space, graphics, borders, etc. White Space: space on a page with no content Split long pages into smaller pages Don’t overload on images and animations just to fill space. Huddleston - Introduction to Web Design

Huddleston - Introduction to Web Design IMAGES Use small images Use alternate text with each graphic, animation, image, etc. Logos go in upper left corner of pages Huddleston - Introduction to Web Design

Huddleston - Introduction to Web Design TIPS FOR TESTING PAGES Test each page using default settings on Internet Explorer Firefox Chrome Print hard copies and proofread them Get user feedback (include a “mail to” link) Huddleston - Introduction to Web Design

MORE TIPS FOR TESTING PAGES Test the download time of each page Different ISPs Different locations Different types of connections When everything works, test it again. Huddleston - Introduction to Web Design