?. When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience.

Slides:



Advertisements
Similar presentations
Chapter 3 – Web Design Tables & Page Layout
Advertisements

Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
Cascading Style Sheets
Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 5 Key Concepts 1 Copyright © Terry Felke-Morris.
. Website and file organization. How websites work.
Visual Organization and Website Design Unit 5 (no CSS) September 19.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 5 Key Concepts 1 Copyright © Terry Felke-Morris.
Web Development & Design Foundations with XHTML
IS 360 Web Site Design. Slide 2 Overview Types of Web Site Organization.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 5 Key Concepts 1 Copyright © Terry Felke-Morris.
Chapter 3 Web Design Basics Key Concepts
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.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2 Identify color scheme guidelines.
Expression Web 2 Concepts and Techniques Expression Web Design Feature Web Design Basics.
1 Web Developer & Design Foundations with XHTML Chapter 7 Key Concepts.
Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.
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.
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
Web Development & Design Foundations with HTML5 7th Edition
Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.
Web Technologies Website Development Trade & Industrial Education
Web Development & Design Foundations with XHTML Chapter 5 Key Concepts.
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.
The Internet Writer’s Handbook 2/e Web Page Design Writing for the Web.
Informatics Computer School CS114 Web Publishing HTML Lesson 2.
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.
Website Development with Dreamweaver
An Introduction To Websites With a little of help from “WebPages That Suck.
Website Development Instructor: Brad Atkinson. Planning Save valuable time Create mock-up drawing Provide useful content.
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.
Introduction to Web Page Design. General Design Tips.
Tools For State and Local Web Sites Web Style, Site Headers and Promotion Banners.
Group 3: Art Gallery Monica Almendarez Content/Project Manager Willliam Egle Technology Manager Christina Pié Usability/ADA Compliance Manager Mirjana.
Web Design Basics Creating Appealing Websites Basics of Web Design: HTML 5 and CSS3, Felke-Morris, T.c.
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,
Principles of effective web design NOTES Flo Morris-Duffin.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 5 Key Concepts 1 Copyright © Terry Felke-Morris.
Technical Communication A Practical Approach Chapter 14: Web Pages and Writing for the Web William Sanborn Pfeiffer Kaye Adkins.
Planning Site Design and Page Layout. Identify Best Practices Demonstrate Consistency: – One way to ensure a professional look and feel to a website –
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Webpages 7 th Grade Quest What Are Your Webpage Pet Peeves? Incorrect Spelling and Grammar Errors Page Takes Forever to Load Information is Out.
1/19/2016Page 1 Web Site Design Modified by Linda Kenney Nov. 1, 2010.
Microsoft Expression Web 3 Expression Web Design Feature Web Design Basics.
Web Site Development - Process of planning and creating a website.
Web page layout in elegance.  Specific Designs for Target Audiences Consider your audiences tastes when creating your website.
Copyright © Terry Felke-Morris Learning Outcomes  In this chapter...  common types of website organization  principles of visual design  your target.
WEB DESIGN PRINCIPLES Dale Blasingame School of Journalism & Mass Communication Texas State University.
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.
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.
Creating Web Pages in Word. Sharing Office Files Online Many Web pages are created using the HTML programming language. Web page editors are software.
Section 6.1 Section 6.2 Write Web text Use a mission statement
Planning Site Design and Page Layout
Section 7.1 Section 7.2 Identify presentation design principles
Web Design Principles.
Web Development & Design Foundations with HTML5
Writing Good Web Pages: Do’s and Don’ts
Objective % Explain concepts used to create websites.
Web Development & Design Foundations with HTML5
Web Development & Design Foundations with HTML5
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Web Design Principles.
Objective Explain concepts used to create websites.
Web Development & Design Foundations with HTML5
Web Design Principles.
Presentation transcript:

?

When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience

In addition… Make sure that your webpage is technically compatible with your users (target audience) Keep in mind: -Screen Resolution (If the screen has more pixels, how will my webpage look?) -Browser Compatibility (Does my webpage look the same on Mozilla Firefox as it does on Google Chrome?)

Website Organization? When your webpage users get to the site, how will they navigate it? Common Layouts -Hierarchical (Several Major pages; a well defined homepage) -Linear (sequential, you can’t directly access pages from a home) -Random (No recognizable organization; the site offers no clear directions)

Principles of Visual Design Repetition – Parts of a webpage are repeated, creating a uniform style which is recognizable throughout website Contrast – Page elements are different from one another. Can direct attention toward certain aspects Proximity – Related items are grouped with one another. Information can thus be organized by meaning Alignment – Certain elements may be vertical or horizontal in order to deliver a clearer message to users

Universal Accessibility Certain considerations should be made for people that may need extra accessibility features Features include: -alternate text for images -descriptive hyperlinks -descriptive titles -search engine optimization (better search results)

Font and Text Considerations Using the right font for your website is very important It is good practice to do the following before publishing your webpage: -Readability of fonts -Test How well the font appears on different computers -Length of text -Hyperlink tags -Spelling and Grammar

ColorColor Colors in webpage code are written using a special numbering system (Hexadecimal) Hexadecimal Color Values -Hexadecimals specify the amount of red, green and blue that a computer displays

Considerations for Color When designing your webpage: -Colors should not interfere with reading -Colors should reflect your audience -If designing with everybody in mind, use a neutral colored background (white)

Navigation Design Websites should have some of navigation in order to provide information quickly Navigation Bars – Navigation bars are added Breadcrumb Navigation – Sidebar uses hierarchical trail Graphics Navigation – Images may be used as hyperlinks Dynamic Navigation – Composed of complex site elements Site Map – Website is outlined with hyperlinks to major pages Site Search – Search features are added to help navigate

Layout Design There are several different layouts which can be used in the design process Wireframe – shows major structure but omits details Ice – pages have a fixed width, with a fixed side bar Jello – Fixed width, but elements are centered Liquid – Content takes up 100% of window, no margins

Page Optimization Web pages need to be optimized so that they load at a reasonable speed. People will go to other webpages if they are known to load faster and or they are more convenient and easy to use Optimizations -Image Slicing: (images can be broken up into smaller pieces which load quicker) -”Above the Fold”: Important stuff needs to be placed at the top, so that it is seen first -White Space: white space can be used to improve readability and make graphics stand out