Web Design Principles.

Slides:



Advertisements
Similar presentations
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Advertisements

Good Websites. 2. Submit one good web interface. This website is a good because of it usability and appears of the website.
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.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Web Page Design ECE 3940 Megan O’Byrne 10 September 09.
14-Aug-15 Design Principles. Design principles In The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice, Robin Williams.
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.
Expression Web 2 Concepts and Techniques Expression Web Design Feature Web Design Basics.
Choose Text Styles Sparingly for Emphasis with or without COLOR Bold Italic Underline Combination.
Designing for the Web 7 Useful Design Principles.
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.
Web Development & Design Foundations with HTML5 7th Edition
Effective Web Site Design Written by Jimmy Ellis.
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.
 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…
The Internet Writer’s Handbook 2/e Web Page Design Writing for the Web.
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.
IS1824: Introduction to Internet Multimedia Lecture 7: Style 1 (Layout and Colour) Rob Gleasure
Lecture 3 Web Design What makes a "good" website? Getting started on your website. Planning the layout. Picking a theme. Effective Design Tips.
Web Page Design Principles
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Tools For State and Local Web Sites Web Style, Site Headers and Promotion Banners.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Web Site Design 15 Easy Steps to an Excellent Web Site.
Web Design Basics Creating Appealing Websites Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.c.
Web Site Design: Layout Fall Basic Concepts Basic Web Design Concepts – Proximity – Alignment – Repetition – Contrast
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 5 Key Concepts 1 Copyright © Terry Felke-Morris.
Web Design. 5 Characteristics of Good Web Design.
?. When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Planning and Design.
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.
Lesson 13 – Color and Typography. 2 Objectives Understand basic color theory. Understand the color wheel. Understand how color is presented on a computer.
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.
DMT612 Professional Preparation EFFECTIVE WEB DESIGN.
Chapter 2 Web Site Design Principles
Planning Site Design and Page Layout
Understanding and Applying Typography in CSS
8/18/2016 Web Development and Interactive Media
Page Design.
Chapter 2 Developing a Web Page.
Color Theory in Web Design
Introduction to Layouts
Web-design.
Understanding and Applying Typography in CSS
Lesson 5 - Colour Schemes and Use in Displays
Objective % Explain concepts used to create websites.
Step 1: Design for a Computer Medium
Fixed Positioning.
COLOR SCHEMES.
PowerPoint Guidelines
PowerPoint Guidelines
Better Design Understand how to incorporate key design concepts to the entire site Guidelines for site design Use color, balance, alignment, and other.
Design Principles 8-Dec-18.
Introduction to Web Design
Web Page Design CIS 300.
Web Design Principles.
PUBLISHING TO THE WORLD WIDE WEB
Design Principles 5-Apr-19.
Section 1.02.
Elements of Effective Web Design
Tips on good web site Design
Chapter 2 Web Site Design Principles
Objective Explain concepts used to create websites.
Introduction to Layouts
“Drive Me Wild” *.
Web Design Principles.
Presentation transcript:

Web Design Principles

Choosing a Color Scheme: Different color schemes can evoke different moods for visitors to your website. Generally, the more contrast between colors, the more "energy" that the site will convey. Limit the number of colors on a website to four main colors (excluding black and white).

A Monochromatic Scheme: Monochromatic color schemes use a series of shades of the same color. This tends to give the site a calm, soothing appearance.

An Analogous Color Scheme: Analogous color schemes use one main color and two other colors very nearby on the color wheel. This type of scheme is pleasing to the eye and generates a cheerful effect.

A Complementary Color Scheme: Complementary colors are directly across from each other on the color wheel. This contrast lends a more energetic feeling to a site.

A Triadic Color Scheme: Complementary colors are directly across from each other on the color wheel. This contrast lends a more energetic feeling to a site.

White Space: White space is the space between the elements of your web page. It does not literally have to be white; it can be the color of your background. Allowing plenty of white space in your page will make for an uncluttered appearance which makes reading and scanning much easier. Avoid placing so many elements and so much text on a page that a visitor becomes overwhelmed when they first arrive.

Use of Screen Real Estate: Use all of your web page space, both vertically and horizontally. Websites that center everything and run down the middle are not visually appealing:

Width of Content: Most modern computers and browsers have at least 1024 pixels of screen resolution in width. Setting your web pages to be in the 900px-1000px range in width should prevent users from having to scroll left and right to see your page. Modern web designers make their websites "fluid" in width. The content dynamically expands out to fill the available screen resolution, without breaking the page layout.

Navigation Menus: Most websites have their navigation links across the top or down the left side of the screen. Navigation menus should remain in the same place consistently on all pages of a site. Every subpage should have a link to return directly to the home page.

Text: Make intelligent choices when it comes to fonts and font sizes. Do not mix more than two fonts on the same page, as this detracts from the smoothness of the design. Ensure that all text is large enough to read. Use bright-colored text sparingly and always make sure there is enough contrast between the text and the background. Avoid making text blue to emphasize it, as this can easily be mistaken for a link. The same applies to underlining text (bold or italics is preferred for emphasis).

Multiple Web Browsers: Don't forget that there are numerous web browsers in use, including: Internet Explorer Firefox Safari (Macintosh) Google Chrome Opera Different web browsers can display the same page very differently. Sometimes, a page will look great in one browser but broken in another. Good web designers test their pages in multiple browsers before posting content live.