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.

Slides:



Advertisements
Similar presentations
Designing for Multiple Screen Resolutions Screen resolution is the width and height of the computer screen in pixels Most monitors have many screen resolutions.
Advertisements

Principles of Web Design 5th Edition
. Website and file organization. How websites work.
Conceptual Design of the Website Site Architecture andNavigation.
Web Page Design Tips & Tricks Layering Choose Insert – Layout Objects – Layer Click anywhere along the outline of the layer box to select it Click &
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Visual Organization and Website Design Unit 5 (no CSS) September 19.
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.
Web Page Design ECE 3940 Megan O’Byrne 10 September 09.
Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.
Website Design BTT1OC/2OC. What is web design? O A web site is a digital page consisting of HTML (hypertext markup language) files, images, movies, sound,
14-Aug-15 Design Principles. Design principles In The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice, Robin Williams.
UNDERSTANDING WEB AND WEB PROJECT PLANNING AND DESIGNING AND EFFECTIVE WEBSITE Garni Dadaian.
Multimedia Design. Table of Content 1.Navigational structures 2.Storyboard 3.Multimedia interface components 4.Tips for interface design.
Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2 Identify color scheme guidelines.
Chapter 8 Document Design 2 Page Layout
Principles of Web Design 6 th Edition Chapter 2 – Web Site Design Principles.
Designing for the Web 7 Useful Design Principles.
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.
Multimedia and the Web Chapter Overview  This chapter covers:  What Web-based multimedia is  how it is used today  advantages and disadvantages.
Successful Website Layout EWD Chapter 2. Defining Client’s Needs Many clients don’t know exactly what they want What they ask for may not be what’s needed.
Week 2 Web Site Design Principles. 2 Design for the Computer Medium Craft the look and feel Make your design portable Design for low bandwidth Plan for.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
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.
Web-designWeb-design. Web design What is it? Web-design features Before…
Chapter 2 Web Site Design Principles
Web Site Design Principles
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.
1 Committed to Shaping the Next Generation of IT Experts. 02: Enhancing the Web Page HTML.
Copyright © 2002 by Pearson Education, Inc., publishing as Longman publishers. All rights reserved. Chapter 8 Designing Pages and Screens Professional.
Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.
W eb D esign Concepts. The Web Design Process  Design Phase  Production Phase  Distribution Phase  Maintenance Phase.
Understanding the Web Design Environment. External factors that affect Web design Many variables affect how Web pages appear New screen resolutions Wide-screen.
Lecture 3 Web Design What makes a "good" website? Getting started on your website. Planning the layout. Picking a theme. Effective Design Tips.
General Information: This document was created for use in the "Bridges to Computing" project of Brooklyn College. This work is licensed under the Creative.
Objective Understand concepts used to web-based digital media. Course Weight : 5%
Logo Website Design & Development Presenter: Aamir Khan(Rocxtar) Class: Information Technology-P1 Topic: Web Designing & Development ROLL NO # 2k14/IT/02.
Design Principles The good and the bad Alyssa Mendiola Summer 2009.
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.
Design Principles for the Web Lavanya Koppaka. Why follow design principles? Structure the information being presented Increase the readability Ease of.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Interface Design.
Introduction to Web Page Design. General Design Tips.
Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Click on the link to answer questions 1-8. View the examples of each element to help you understand each principle. You will have to scroll down to find.
Web Site Design 15 Easy Steps to an Excellent Web Site.
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.
Principles of Web Design Keep it simple Content is critical--Form is not. Speed is “King”. Consistent filenames are key. Design efficiently. Cite your.
Informational Design.  Informational Design involves determining a Web page’s content  Content – text and graphics  A successful Web page uses words.
Web page design. Web Site Design Principles Design for the Medium What is meant by Hyper Media? Hypertext links.
Web page layout in elegance.  Specific Designs for Target Audiences Consider your audiences tastes when creating your website.
Basic of web Design and Basic Fundamentals of HTML Devendra Shukla (Senior web designer)
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.
Chapter 2 Web Site Design Principles
Understanding the principles of website development
Web Design Principles.
Web-design.
PBA Front-End Programming
Objective % Explain concepts used to create websites.
Step 1: Design for a Computer Medium
Introduction to Web Design
What is HTML?.
Web Design 1 Website Construction.
Interface Design Interface Design
Chapter 2 Web Site Design Principles
Objective Explain concepts used to create websites.
Web Design Principles.
Presentation transcript:

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. Different browsers, screens and displays can change how a page looks. From Principles of Web Design By Joel Sklar.

How We Read Text Following normal reading habits, the user’s eye moves from left to right.

How We View Screens Looking at a screen, the user’s eye scans in a more clockwise pattern.

How Will Your User’s Read/View? If a page uses a lot of text, the user will read in a more traditional, left to right manner. If a page has more graphical elements, the user is more likely to take in the whole page.

Accepted Relative Areas of Importance

Questions to Ask Yourself What is the Purpose of my Website? What is my Main Audience? My secondary Audience? What Information do I want to present?

Designing Your Site Step 2: Plan your site’s Hierarchy How are your pages linked together? How many links exactly? Where does the User go next?

A Structure That is More Wide Than Deep

A Structure That is More Deep Than Wide

How Would You Structure It?

Designing Your Content Step 3: The “Do’s” of Good Web Design Use all lower-case and no spaces when naming files. Keep a Consistent Look and Feel. Use Colors that are High in Contrast. Design for Low Bandwidth. Use a Grid Structure.

Designing Your Content More Do’s Use Active White Space. Design for Interaction. Use Hypertext Linking Effectively. Design for Accessibility. Keep Your Site Updated on a Regular Basis

Designing Your Content Step 4: Things to Avoid. aka – The “Don’ts” Don’t Overuse Media Don’t Make Your Users Scroll Too Much. Don’t Flood Your Pages with Content. Don’t Choose Colors or Images that Make the Page Hard to Read.

Designing Your Content Don’t Forget to Title Everything: images and pages. Don’t Assume that Your Users Know Where to Go. DON’T USE FRAMES!

The Worst of the Worst For a good luck at what not to do, visit