1 Basic Web site Design  PMEHS Web Design  Dr. Kerby.

Slides:

Advertisements

Similar presentations

Chapter 3 – Web Design Tables & Page Layout

Advertisements

Planning and Designing My Personal Website By Michael Gill.

Chapter 13 Web Page Design Studio

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.

6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines.

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

Difference between content, layout and styles Miss Allgar

Web Design. Look and Feel Way your web site works Personality it conveys to the user Plan the way to looks Test against the variable nature of the web.

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.

Web Page Design ECE 3940 Megan O’Byrne 10 September 09.

Effective Presentations Effective Presenters Body language Gestures Eye contact Voice Filler words.

Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2 Identify color scheme guidelines.

Process of __________, arranging, & ______________ visual elements of art to accomplish or address a particular purpose  Elements of Visual Design 

A Brief Glimpse of Web Design By: Samantha Beckett.

Expression Web 2 Concepts and Techniques Expression Web Design Feature Web Design Basics.

Bingoopile It’s More Than Just a Search Engine…. By: Khalid Taha, Anna Bierma, & Tristen Eivins.

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.

Apiitfreeware websites is about all free sources such as software, video, wallpaper, games in different categories We use different technologies for.

PowerPoint Etiquette What works in the world of presentations…color, fonts, and transitions.

Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.

The Internet Writer’s Handbook 2/e Web Page Design Writing for the Web.

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.

Copyright © 2002 by Pearson Education, Inc., publishing as Longman publishers. All rights reserved. Chapter 8 Designing Pages and Screens Professional.

 Word doc for you to download › Link at the beginning of class › 10 Questions › Answers to be added inline  Post to Sakai when completed › No resubmits.

Project Manager: Lead Designer: Information Architect: Lead Developer: Lakeshia Burnside Myrtle Nurse Ashlei Evans Stacey Jeanpaul Web site Visual Design.

the rhetorical situation  audience  purpose  context design principles  arrangement  emphasis  contrast  repetition  alignment  proximity (some)

Good Web Design. The Four A’s of Good Design Accessible Accurate Appropriate Appealing.

Website Usability presentation by Pasha Souvorin for Georgia Pathway in Advanced Web Design evaluating and planning for web design.

4 Simple Web Design Rules. Your Web Site Should Be Easy To Read  Choose your text and background colors very carefully  Don't use backgrounds that obscure.

Design Principles The good and the bad Alyssa Mendiola Summer 2009.

 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.

MI.GOV Site Design Evaluation October MI.GOV Usability Review  MSU Usability and Accessibility Center (UAC)  Reviewed rankings by studies like.

Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.

Introduction to Web Page Design. General Design Tips.

Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.

Homework Assignment You are going to research any artist of your choosing from any time period or genre. You are going to complete a one page double- spaced.

Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance.

Development and Design of Multimedia. Planning Your Title 1)Develop the concept or idea – a multimedia project starts with an idea that supports a vision.

Design Principles 3.02 Design Principles revised 9/24/09.

BY: DAN PREVI Composite Materials. Consistent style and format Easy to find and use links Inviting colors and themes Efficient use of space Convinces.

Creating Basic Elements of a Newsletter Chapter 10.

Design Principles EDUC 6307: Design of Print Based Media Summer 2009 Ranelle Woolrich.

Interactive history. To provide a visually attractive and interactive timeline of the major scientific discoveries throughout history.

Microsoft Expression Web 3 Expression Web Design Feature Web Design Basics.

Web Site Development - Process of planning and creating a website.

Informational Design.  Informational Design involves determining a Web page’s content  Content – text and graphics  A successful Web page uses words.

Web page layout in elegance.  Specific Designs for Target Audiences Consider your audiences tastes when creating your website.

Web Interface Design Basic GUI and Web layouts Fig H.12: Basic Layouts of Web and Graphic User Interfaces.

Copyright © Terry Felke-Morris Learning Outcomes  In this chapter...  common types of website organization  principles of visual design  your target.

 Add one element at a time  If it doesn’t do what you want, › Delete it › DON’T just keep piling on more items.

PowerPoint Etiquette What works in the world of presentations…color, fonts, and transitions.

1 Committed to Shaping the Next Generation of IT Experts. Chapter 4: Online Publishing: Creating a Web Site Exploring Microsoft Office Publisher 2013 Robert.

Section 6.1 Section 6.2 Write Web text Use a mission statement

8/18/2016 Web Development and Interactive Media

Section 7.1 Section 7.2 Identify presentation design principles

Elements of Design.

Elements of Design.

How to customize your Microsoft SharePoint Online website

Step 1: Design for a Computer Medium

How to customize your Microsoft SharePoint Online website

Page plans A01 Design.

Fixed Positioning.

Better Design Understand how to incorporate key design concepts to the entire site Guidelines for site design Use color, balance, alignment, and other.

PRESENTATION LAYOUTS This is a title slide

How to customize your Microsoft SharePoint Online website

Basic Web site Design PMEHS Web Design Dr. Kerby.

What: The heading and banner are at the top

What Color is it?.

Tips on good web site Design

Presentation transcript:

1 Basic Web site Design  PMEHS Web Design  Dr. Kerby

2 Designing for the User Who is your audience...  Who will read these pages? Young people?Young people? Old people?Old people? Muscians?Muscians? Politicians?Politicians? Athletes?Athletes? What is the purpose of the site?

3 Consistent, Unified Look  Colors  Graphics  Layout NavigationNavigation

4 Color scheme examples:  Army Web site Army Web site Army Web site  Nick Jr. Web site Nick Jr. Web site Nick Jr. Web site

5 Alignment  Consistent Horizontal ORHorizontal OR VerticalVertical  Left (easier to read)  Right  Center (eyes draw down the center)

6 White Space  Types: Active – separates content/imagesActive – separates content/images Passive – blank areas that result in incomplete or mismatched shapesPassive – blank areas that result in incomplete or mismatched shapes  Well placed white space makes a Web page easier to follow/read.  Recommended - 2:1  Lycos Web page Lycos Web page Lycos Web page

7 White space sample Banner Navigation Text block Image Footer Active White Space Passive White Space

8 Organize long lists of information and links.  Microsoft Web site Microsoft Web site Microsoft Web site Or use a navigation bar...  Adobe Web site Adobe Web site Adobe Web site

9 Organize Navigation  User friendly  Group like links together  Give links specific names

10 Use of Color   Red – stimulates emotion   Green – inspires involvement or interaction   Gray – indicates lack of commitment or neutrality   Blue – shows calm and conservative   Yellow – shows cheerfulness and hope for the future, restlessness and change, feelings of anxiety   Purple – implies mystical quality   Black – indicates power and sophistication

11 Online Resources  Usability First Web page design tips Usability First Usability First  Web evaluation form for secondary grades Web evaluation form Web evaluation form  Ten Good Deeds in Web Design Ten Good Deeds Ten Good Deeds

12

13 Ten Good Deeds in Web Design 1. Place Name and Logo on every page 2. Provide a search box if Web site has over 100 pages. 3. Clear headings and page titles. 4. Use grouping and sections to make pages easy to scan.

14 5. Use hypertext links for navigation. 6. Use thumbnails for catalogue pages. 7. Create relevant thumbnails. 8. Write clear link titles. 9. Add accessibility to users with disabilities. accessibility 10. Design sites in a way viewer will expect.

15 Ten Good Mistakes in Web Design  Original Top Ten Mistakes Original  Top Ten New Mistakes New  The REALLY Bad Web Page guide REALLY Bad REALLY Bad

16 Basic Web site Design  PMEHS Web Design  Mrs. Kerby