Web Design: Best Practices The “why’s” of web page creation.

Slides:



Advertisements
Similar presentations
Web Usability Starring the Webcredibles: Link, Dr. Web Credible, & Wendy Warner.
Advertisements

HTML Semantic Structure
Build Your Teacher Web Page
Add Images to Improve Your Presentation Day 8. You will learn to Understand Graphics Formats Find Graphics Create Your Own Images Insert an Image on Your.
. Website and file organization. How websites work.
1 of 5 This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation.
Copyright © The McGraw-Hill Companies, Inc. Permission required for reproduction or display. Chapter 4 Image Slides.
1 The Planning Process Creating a Business Web Site By Paul Lazarony 2 Business Web Site Design Steps in the Planning Process u Software u Purpose u.
Chapter 4 Planning Site Navigation. Principles of Web Design 2nd Ed. Chapter 4 2 Principles of Web Design Chapter 4 Objectives Create usable navigation.
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
Visual Design for the Web. Keep the end in mind What is the purpose of the webpage?
Copyright © 2006 by The McGraw-Hill Companies, Inc. All rights reserved. McGraw-Hill Technology Education Copyright © 2006 by The McGraw-Hill Companies,
1/12. 2/12 Who is this Lawrence guy? Why am I here? Why is effective web design important? :: See whySee why We will discuss: General Suggestions User.
Multimedia Elements – Text and Graphics. Text in Multimedia Applications Of all multimedia elements, text is the easiest to manipulate General guidelines:
ISTC 301 Standards Web Design & Development. Teaching with Tech Standards “The digital-age teaching professional must demonstrate a vision of technology.
Web Design, 4 th Edition 5 Typography and Images.
Graphics Ms. Brewer Spring Bellwork Edmodo – log on! Quiz? Take it if you need to! Policies and Procedures Powerpoint in Shared Folder! Get to Know.
Unit 30 Digital Graphics – Course overview Anne Sewell
Website Tutorial. Administration  Log on by clicking Login on the footer of almost any page  Your Username is.
Tutorial 3: Working with Images. Objectives Session 3.1 – Identify the differences among image file types – Evaluate the purpose of alternative text –
COMPUTATIONAL THINKING FOR INFORMATION TECHNOLOGY HOMEHOME | OBJECTIVES | TASK 1 | TASK 2 | TASK 3 | TASK 4 | TASK 5 | TASK 6 | TASK 7 | HELPOBJECTIVESTASK.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® WRITING FOR THE WEB.
Push the Portfolio Envelop Laura Yost KCELT Dog Days 2008.
Adding Images & Working with Images Unit 2. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date:08/10/2009 Period : Summary: To display Art To display Photographs.
BritLink 5 Webinar Part 3 Resizing Images. Welcome! “BritLink 5 –Part 3” Hosted by: William Bourne, Britannia System Trainer Please MUTE your telephone.
_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.
Accessible Web Design Carolyn Fiori Assistive Technology Specialist, College of San Mateo November 2011.
Unit E. Image Measurements The size of an image can be measured 2 ways: Dimensions: the height and width, measured in pixels. File Size: measured in Kilobytes.
.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.
IT Introduction to Website Development Welcome!
1 Mastering the Internet and HTML Images and Image Tags.
 Scaling an image is resizing the image in a graphic editing software so it is the proper size before adding it to a site.  Important NOTE: If you insert.
Images Inserting an image on a web page. chcslonline.org2 ITEMS REQUIRED Go to the course download page on the course website and download the 3 images.
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.
An Introduction To Websites With a little of help from “WebPages That Suck.
1 Web Developer Foundations: Using XHTML Chapter 4 Key Concepts.
Section 8.1 Create a custom theme Design a color scheme Use shared borders Section 8.2 Identify types of graphics Identify and compare graphic formats.
Lesson 8. Test 1 Topics Browser incompatibility Design Tips Site Navigation Browser- safe color Monitor resolution Content Copyright Use of tables vs.
Group 3: Art Gallery Monica Almendarez Content/Project Manager Willliam Egle Technology Manager Christina Pié Usability/ADA Compliance Manager Mirjana.
 CSM 583 CAPSTONE ADA Compliance: Easy Steps to Get Started with Accessibility By Jeff Statham.
Chapter 8B Graphics and Multimedia. 8B-2 Graphic File Formats Bitmapped images –Most common image type –Also called raster images –Image is drawn using.
Site Optimization Module 8: Web Publishing and Maintenance LESSON 3.
HTML IMAGES. CONTENTS IMG Tag Alt Attribute Setting Width and Height Of An Image Summary Exercise.
Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.
The Good, the Bad & the Ugly: Style and design in Website creation Chris Webster: Information Officer and Website Manager at the EARL Consortium for Public.
XP New Perspectives on HTML and XHTML, Comprehensive 1 Developing a Basic Web Page Week 2.
Graphics Navigation Usability Typography Content Clarity & Consistency.
GIF vs. JPEG GIF and JPEG (JPG) image formats are different. You should know which to use when. Here are some examples.
GRAPHICS. PURPOSE OF GRAPHICS IN WEB DESIGN Graphics add visual/aesthetic appeal to the information on the web page, helping to maintain viewer interest.
Creating Reader-Centered Web pages and Websites. Designing Websites Design with same qualities as other workplace communications ▫Usability and Persuasiveness.
WEB DESIGN PRINCIPLES Dale Blasingame School of Journalism & Mass Communication Texas State University.
What is Photoshop? An image editing software developed and manufactured by Adobe Systems Inc. Photoshop is considered one of the leaders in photo editing.
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.
Planning and Creating a Web Site. Stages in planning a web site planning the project decide on the purpose and audience for the web site create mind map.
Section 8.1 Section 8.2 Create a custom theme Design a color scheme
Content Managers Meeting
How to get the best results from your website and images.
Web Site Design Web site diagrams from the Yale Style Manual at:
Chapter Lessons Start Adobe Photoshop CS
Web Design M. Jacie Yang Assistant Professor
Multimedia Elements – Text and Graphics
Adobe Dreamweaver CS4 OPEN YOUR NOTEBOOK FILES
Creating & Managing for Teaching Purposes
Content Managers Meeting
Web Editing Group September Meeting
Terms 1 Terms 2 Terms 3 Terms 4 Terms 5 1pt 1 pt 1 pt 1pt 1 pt 2 pt
Web Accessibility Guidelines
WRITING FOR THE WEB ® Copyright 2012 Adobe Systems Incorporated. All rights reserved.
Editing images using Microsoft Photo Editor and Paint
Question Examples Is the interactive Google map useful?
Presentation transcript:

Web Design: Best Practices The “why’s” of web page creation

Why does anyone visit your site? Information Entertainment Shopping

Define your audience Professionals/Hobbyists General population Students/kids Underprivileged/ Disabled/Elderly

Easy to understand Anyone should be able to figure out what the site is about within four seconds

Easy to read: Use your tags! P tags – Computers see as the same H tags – Maintains your hierarchy of subtitles Alt text tags – Allows screen readers to understand what is being displayed

Easy to load Compress images when possible Edit images in photo software Adobe Photoshop Microsoft Office Picture Manager Start> Programs> Accessories> Paint

Easy to load cont’d. GIF or JPG? GIF records pixels for up to 256 colors – good for artwork JPG records for all colors – good for photos

Easy to find – and navigate through Put a concise, accurate description in your summary Organize information for the user Keep text brief Use links

Easy for you to maintain Where will the content come from? If your content already exists somewhere, do you need copyright permission?

Easy for you to maintain How often will content be updated? Who will be responsible for updating information?

Resources General Guidelines Web Style Guide –webstyleguide.com Accessibility Issues Building accessible web sites –joeclark.org/book/sashay/serialization Universal usability –universalusability.com