Unit 3, Lesson 8 Principles of Design AOIT Web Design Copyright © 2008–2013 National Academy Foundation. All rights reserved.

Slides:

Advertisements

Similar presentations

Multimedia Web Site Design Chapter Building an Effective Web Site Creating a Web site is easy, but creating one that is useful and attractive takes.

Advertisements

DIVISIONS FOR ALL WEB PAGES Web Page Elements.  All Web Pages should have the following 4 elements (Also called divisions).  header  navigation  content.

Usability Information Systems 337 Prof. Harry Plantinga.

Presented by Ryan Walters. The Site  The main page of the site (seen left) is the users first introduction to the whole site.  The look is clean and.

Assignment 1 Pointers ● Be sure to use all tags properly – Don't use a tag for something it wasn't designed for – Ex. Do not use heading tags... for regular.

Instructional Design Tips Janet Holland. Impression on First Entry Meaningful Images Small Loads Quickly Text Visible Text Steady.

Visual Organization and Website Design Unit 5 (no CSS) September 19.

14-Aug-15 Design Principles. Design principles In The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice, Robin Williams.

1.Learning the Terms Learning the TermsLearning the Terms 2.Accessing the Internet from a PC Accessing the Internet from a PCAccessing the Internet from.

Nick Donnarumma. We are either very lazy or very efficient because we tend not to read pages. We scan them instead to save time. We don’t figure out how.

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

Analyzing a Webpage/site. Authority Who is the author? What are the author’s credentials? Is the webpage/site sponsored by any organization or corporate?

Slide 1 Today you will: think about criteria for judging a website understand that an effective website will match the needs and interests of users use.

Title Slide On your first slide, include the name of your Human Body System and a graphic. Your name, period and date should be here also.

1 After completing this lesson, you will be able to: Define your goals for a Web site. Analyze your audience. Create a blueprint for your Web site. Design.

Lesson 1 Text, Graphics Links Content Navigation Video, Audio.

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…

MERLOT’s Peer Review Report Composed from reports by at least two Peer Reviewers. Description Section Provides the pedagogical context (i.e. learning goals,

1. 2 OVERVIEW First Impressions Content Purpose Design Distinction Closing.

Web Page Design. Some Terms Cascading Style Sheet, (CSS) –a style sheet language used to describe the look and formatting of a document written in html;

Evaluating web pages Stuart Lloyd-Green Celia Korvessis Lindsay Krieger Shane Sullivan.

An Introduction To Websites With a little of help from “WebPages That Suck.

Level 2 IT Users Qualification – Unit 1 Improving Productivity Chris.

Web site development: Basics & MS FrontPage. What I hope to demonstrate n n Basics of a good web site n n How to most effectively communicate via the.

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

Web Pages That Suck By Vincent Flanders William Featherstone.

5 Elements of Good Web Design A powerpoint by Himyt Kang & Harman Lidder.

PRINCIPLES OF WEB DESIGN. EDGAR GARCIA – WEB DESIGN 2/8/13.

Chapter 17 Designing for the Web Ryan Galloway Andy O’Neil Joe Ahn.

Interface Design Web Design Professor Frank. Design Graphic design and visual graphics are equally important Both work together to create look, feel and.

Web Design Guidelines by Scott Grissom 1 Designing for the Web  Web site design  Web page design  Web usability  Web site design  Web page design.

Building an Effective Website. Start with a plan  Have clear goal and design your entire site with those goals in mind.  Research and develop a sketch.

COM 205 Multimedia Applications St. Joseph’s College Fall 2003.

Jacob Mortensen 2/8/13. Visual design is the look of the Web page and the colors and graphics used. VISUAL DESIGN.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 5 Key Concepts 1 Copyright © Terry Felke-Morris.

Screen Design Critique Page One Page Two Reflection on Project.

Information Literacy. Addressing a new challenge in society.

Appreciating Human Diversity Identify diversity and its impact on education.

Computer-based Media Language Elements Understanding how we communicate through media Stewart.C. (2007). Media: New Ways and Means. John Wiley & Sons:

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

Basic Elements.  Design is the process of collecting ideas, and aesthetically arranging and implementing them, guided by certain principles for a specific.

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

Creating Reader-Centered Web pages and Websites. Designing Websites Design with same qualities as other workplace communications ▫Usability and Persuasiveness.

We looked at these two presentations and talked about the structure of setting up the table.

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

Learning Aim C.  Once the website is complete, you should test it using the test plan you created at the design stage.

Is This Website A Useful Resource? Helpful Tips. A Useful Website Has... Quality, depth and usefulness of content clear statement of the content, including.

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.

Company LOGO Web site Do’s and Don’ts What Works and What Doesn’t.

DMT612 Professional Preparation EFFECTIVE WEB DESIGN.

Introducing the World Wide Web

Web Design and Development

VCT 251Competitive Success/snaptutorial.com

VCT 251 Education for Service-- snaptutorial.com

Objective % Explain concepts used to create websites.

Website Design and Management Section 3 - Design

Unit 14 Website Design HND in Computing and Systems Development

Applications Software

Instructional Design Tips

Design Principles 8-Dec-18.

Web Design Tips.

Instructional Design Tips

Design Principles 5-Apr-19.

COM 205 Multimedia Applications

Multimedia Web Site Design

Elements of Effective Web Design

Objective Explain concepts used to create websites.

Presentation transcript:

Unit 3, Lesson 8 Principles of Design AOIT Web Design Copyright © 2008–2013 National Academy Foundation. All rights reserved.

A website’s design creates a first impression What is your first impression of this site? Do you immediately know what the site does? Do you know who the site belongs to?

There are five elements of effective web design Content Functionality Navigation Visual design Media (graphics, video, animation, and audio) Can you give a specific example of how one of the photo book websites you looked at in the beginning of this lesson was successful with each of these elements?

Content is logical, accurate, web-friendly Logical, labeled categories Up-to-date, accurate, nonoffensive Clear, concise bullet points Contact info included Clear instructions where needed Obvious links/visited links Text: high contrast, consistent, correct size, no movement Does the web page on this slide meet these criteria?

Functionality makes sites easy to use All links work Works on all of the major browsers Pages load quickly No registration needed to view basic information Back button not disabled Site map and/or site search engine available Short, memorable URL Describe an error you have experienced while surfing the Internet.

Navigation is clear, logical, persistent Clear, logical site navigation persists throughout the entire site. Additional shortcuts or navigation methods are used as needed. Logo in the top left corner always leads to the home page. Have you ever found something really cool on the web that you then weren’t able to find again? Home Page My ClassGradingNewsletter CommentsClassmates

Visual design is professional and pleasing The site clearly represents the purpose. All pages have a consistent look. A coherent, elegant color scheme represents the company or products. The background color or design is simple and does not interfere with the body of the page.

Media enhances a site Meaningful graphics, video, animation, audio, and links to social media Not too many bells and whistles Highest quality media, optimized for the web Appropriate, consistent, and relevant buttons and icons Not done “because you can” or “because everyone is doing it” Apple.com has a lot of graphics. Why is the site still appealing and logical?

Review: The five areas of good web design ElementWhat to Aim For ContentSimple, audience-appropriate, and organized, and only necessary elements are included FunctionalityWorks on every browser and platform, with no errors NavigationConsistent on each page, and the path is always clear Visual designIntuitive, easy to read, consistent, clearly illustrates message/purpose MediaUse of media is relevant, meaningful