Visual Design for the Web. Keep the end in mind What is the purpose of the webpage?

Slides:



Advertisements
Similar presentations
UI Best Practices Application Developer’s Intro School Week 1 Day 1.
Advertisements

Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Chapter 4 Planning Site Navigation. 2 Principles of Web Design Chapter 4 Objectives Understand navigation principles Build navigation schemes that meet.
Principles of Web Design 5th Edition
Web Site Design. Dorky Web Pages Below are features that can make a web design look dorky. These are not just my personal opinions, but are ideas I have.
. Website and file organization. How websites work.
Design Elements of a Web Page. Focal Point Each page should have a focal point to attract the viewer. This can be one large picture or a headline, a combination.
Good Websites. 2. Submit one good web interface. This website is a good because of it usability and appears of the website.
Web Design: Best Practices The “why’s” of web page creation.
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.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Instructional Design Tips Janet Holland. Impression on First Entry Meaningful Images Small Loads Quickly Text Visible Text Steady.
Chapter 4 Planning Site Navigation. Principles of Web Design 2nd Ed. Chapter 4 2 Principles of Web Design Chapter 4 Objectives Create usable navigation.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
3.02G Website Components 3.02 Develop webpages.. Website Components  The website MUST contain an Index/Home Page.  A business website should contain:
Analyzing a Webpage/site. Authority Who is the author? What are the author’s credentials? Is the webpage/site sponsored by any organization or corporate?
Color Theory in Web Design Web Design – Sec 2-2. Objectives  The student will: –Have a better understanding of effective use of color on the web. –Be.
Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.
So You Want a Web Page!. What is a Web Page? According to Webopedia, a web page is: A document on the World Wide Web. A Web site is really a bunch of.
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
Accessible Web Design Carolyn Fiori Assistive Technology Specialist, College of San Mateo November 2011.
Web-designWeb-design. Web design What is it? Web-design features Before…
Chapter 2 Web Site Design Principles
Web Site Design Principles
Copyright © 2002 by Pearson Education, Inc., publishing as Longman publishers. All rights reserved. Chapter 8 Designing Pages and Screens Professional.
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;
An Introduction To Websites With a little of help from “WebPages That Suck.
Using Adobe ® Dreamweaver ® and Photoshop ® An Introduction PART ONE The design phase before launching Dreamweaver.
Design Principles The good and the bad Alyssa Mendiola Summer 2009.
Creating Reader- Centered Web Pages and Websites Paul V. Anderson’s Technical Communication, 6 th ed.
Web Pages That Suck By Vincent Flanders William Featherstone.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Interface Design.
Group 3: Art Gallery Monica Almendarez Content/Project Manager Willliam Egle Technology Manager Christina Pié Usability/ADA Compliance Manager Mirjana.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Basic Design Tips for Web Pages. Alignment Left, right, center Choose one alignment and use it on the entire page Align form elements, table elements,
Innovation AMS Center for Advanced Technologies Web Navigation Eugene Tiller & Phillip Green AMS Center for Advanced Technologies.
Principles of Web Design 6 th Edition Chapter 9 – Site Navigation.
Building Your Web Page. Build Your Web Page Orfordville Public Library held at: Parkview High School Tue. April 8 Tue. April 15 Tue. April 22.
Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins.
Principles of Web Design Keep it simple Content is critical--Form is not. Speed is “King”. Consistent filenames are key. Design efficiently. Cite your.
?. When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® INTRODUCTION TO INFORMATION ARCHITECTURE.
Graphics Navigation Usability Typography Content Clarity & Consistency.
Kevin Murphy Building a Good Web Page Masters Project CS 490.
Creating Reader-Centered Web pages and Websites. Designing Websites Design with same qualities as other workplace communications ▫Usability and Persuasiveness.
We looked at these two presentations and talked about the structure of setting up the table.
By: Your Name ELEMENTS OF WEB DESIGN. VISUAL APPEAL Optimization of Graphics, for people to stay on your website, your pictures have to load out as soon.
DMT612 Professional Preparation EFFECTIVE WEB DESIGN.
Images were sourced from the following web sites: Slide 2:commons.wikimedia.org/wiki/File:BorromeanRing...commons.wikimedia.org/wiki/File:BorromeanRing...
Can the Web be Made Accessible? John Richards IBM T. J Watson Research Center and University of Dundee New Directions for Work in Digital Scotland, May,
Chapter 2 Web Site Design Principles
Understanding the principles of website development
8/18/2016 Web Development and Interactive Media
Web Site Design Plan Checklist
Web-design.
Objective % Explain concepts used to create websites.
Step 1: Design for a Computer Medium
Web Site Analysis By:.
Instructional Design Tips
Public Services Information Management
Instructional Design Tips
Website production.
Interface Design Interface Design
Chapter 4 Planning Site Navigation
Chapter 2 Web Site Design Principles
Objective Explain concepts used to create websites.
Question Examples Is the interactive Google map useful?
Presentation transcript:

Visual Design for the Web

Keep the end in mind What is the purpose of the webpage?

Organizing principals

Grids

Color

White Space

Contrast

Proximity

Consistency

Simplify Simplify the users experience by using consistent navigation and visual cues

Simplify Subtle changes provide navigation clues

Remember Visual Organization Grids Color Variety Contrast Space Order

Usability Guidlines Consistency helps navigation Visual clues User centered Site map or index Visited links Alt tags for images Images load quickly

Paul Rand “Design is the synthesis of form and content… When form predominates meaning is blunted, but when content predominates interest lags.”