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

Slides:



Advertisements
Similar presentations
Web Usability Starring the Webcredibles: Link, Dr. Web Credible, & Wendy Warner.
Advertisements

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.
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Certificate in Digital Applications – Level 02 Website Design and Creation.
Starting and Customizing a PowerPoint Slide Show
INTERACTIVE BRAND COMMUNICATION Class 7 Creative Issues II: Creating Effective Online Advertising.
Website: Best Practices. Sources: The World Wide Web Consortium the main international standards organization for the World Wide Web Research-Based Web.
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
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,
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.
Creating an Online Portfolio Creating your Electronic Portfolio.
Website Design. Designing and creating different elements involved in developing a website for e- commerce can help you identify and describe the components.
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 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.
Expression Web 2 Concepts and Techniques Expression Web Design Feature Web Design Basics.
Section 2.1 Compare the Internet and the Web Identify Web browser components Compare Web sites and Web pages Describe types of Web sites Section 2.2 Identify.
Designing Brochures
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
3.02D Design Multimedia Presentations 3.02 Demonstrate interactive multimedia presentations.
PRESENTATION SOFTWARE PowerPoint, Keynote, Prezi Purpose?
Web Technologies Website Development Trade & Industrial Education
© Anselm Spoerri Lecture 14 Course Review –Course Objectives –Design Principles Evaluation Criteria used for Term Project.
Web-designWeb-design. Web design What is it? Web-design features Before…
3.02D Design Multimedia Presentations 3.02 Demonstrate interactive multimedia presentations.
We Are Learning To (WALT): Evaluate existing web graphics What I am Looking For (WILF): 4 evaluations that contain: – Detailed descriptions of target.
PassMeritDistinction Candidates will collect and display examples of: navigation buttons navigation bar advertising banner from at least two different.
The Internet Writer’s Handbook 2/e Web Page Design Writing for the Web.
Web Site D e s i g n and Usability INBS 510--Introduction to Internet Business Presented by Gita Persad and Virna Wong.
WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.
Copyright © 2002 by Pearson Education, Inc., publishing as Longman publishers. All rights reserved. Chapter 8 Designing Pages and Screens Professional.
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.
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.
Project Manager: Lead Designer: Information Architect: Lead Developer: Lakeshia Burnside Myrtle Nurse Ashlei Evans Stacey Jeanpaul Web site Visual 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.
Unit 4 – Design and produce multimedia products AO1 – Review several existing multimedia products Mr Farmer.
INTERACTIVE BRAND COMMUNICATION Class 6 Creative Issues II: Creating Effective Online Advertising.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Unit 3, Lesson 8 Principles of Design AOIT Web Design Copyright © 2008–2013 National Academy Foundation. All rights reserved.
 Good navigation is consistent, clearly labeled, and reflects the needs of the site’s audience.  Navigation labels are short, clear, and user-friendly.
Software. A web site is a collection of web pages on a particular topic. A web page is a document written in HTML code. Web pages are linked together.
Principles of effective web design NOTES Flo Morris-Duffin.
DIGITAL DESIGN Digital Design is the art and process of creating a single Web page or entire Web sites and may involve both the aesthetics and the mechanics.
 Network  A _____ of computers that can _________ w/ each other  Examples of hardware  ______________ & communication lines  Internet  Hardware.
Webpages 7 th Grade Quest What Are Your Webpage Pet Peeves? Incorrect Spelling and Grammar Errors Page Takes Forever to Load Information is Out.
Microsoft Expression Web 3 Expression Web Design Feature Web Design Basics.
For this course please make your website address your first initial, last name. If this is unavailable, try your first initial, middle initial, last name.
Graphics Navigation Usability Typography Content Clarity & Consistency.
Informational Design.  Informational Design involves determining a Web page’s content  Content – text and graphics  A successful Web page uses words.
Microsoft Expression Web 3 – Illustrated Unit G: Designing Site Navigation.
Web page layout in elegance.  Specific Designs for Target Audiences Consider your audiences tastes when creating your website.
introductionwhyexamples What is a Web site? A web site is: a presentation tool; a way to communicate; a learning tool; a teaching tool; a marketing important.
Essential Elements to Keep in Mind While Designing a Website.
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.
What makes a Good Website?. Examples of Bad Websites For more really.
Understanding the principles of website development
Page Design.
Section 7.1 Section 7.2 Identify presentation design principles
Web-design.
Your First & Last Name (Make sure you capitalize your first and last name!) Follow these instructions: 1. Center your name on the slide (use the “Centered”
Objective % Explain concepts used to create websites.
Applications Software
Web Design 1 Website Construction.
Multimedia Web Site Design
Elements of Effective Web Design
Tips on good web site Design
Designing Pages and Documents
Presentation transcript:

Good Web Design

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

Good Web Design There are 3 key aspects to a well designed web page: Presentation – how the page appears, e.g. use of background and text colour Usability – how user friendly the page is, e.g. positioning of navigation buttons Functionality – how thoroughly the page operates, how quickly images load

Good websites: Load quickly Make the purpose of the website immediately obvious Grab attention Are easy to navigate Include links that are easy to identify Provide the option to obtain further information Use contrasting backgrounds and font colours Are formatted for easy reading Project an image relevant to the topic at hand Limit interactivity and multimedia

Good Web Design When you evaluate a web page or web site as well as assessing the web page or site based on presentation, usability and functionality you also assess on: Content Credibility Purpose

Your web site should be easy to read The most important rule in web design is that your web site should be easy to read. What does this mean? You should choose your text and background colours very carefully. You don't want to use backgrounds that obscure your text or use colours that are hard to read. Dark-coloured text on a light-coloured background is easier to read than light- coloured text on a dark-coloured background.

Easy To Read You also don't want to set your text size too small (hard to read) or too large (it will appear to shout at your visitors). All capitalized letters give the appearance of shouting at your visitors. Keep the alignment of your main text to the left, not centred. Centre-aligned text is best used in headlines. You want your visitors to be comfortable with what they are reading, and most text (in the West) is left aligned.

Easy To Navigate All of your hyperlinks should be clear to your visitors. Graphic images, such as buttons or tabs, should be clearly labelled and easy to read. Place tags on your images for those viewers who do not want to download the image Your should select the colours, backgrounds, textures, and special effects on your web graphics very carefully. It is more important that your navigational buttons and tabs be easy to read and understand than to have "flashy" effects.

Easy To Navigate Link colours in your text should be familiar to your visitor (blue text usually indicates an unvisited link and purple or maroon text usually indicates a visited link), if possible. If you elect not to use the default colours, your text links should be emphasized in some other way (boldfaced, a larger font size, set between small vertical lines, or a combination of these). Text links should be unique, they should not look the same as any other text in your web pages. You do not want people clicking on your headings because they think the headings are links. Your visitors should be able to find what they are looking for in your site within three clicks. If not, they are very likely to click off your site as quickly as they clicked on.

Easy to Find How are your visitors finding you online? The myth, "If I build a web site, they will come," is still a commonly held belief among companies and organizations new to the Internet. People will not come to your web site unless you promote your site both online and offline.

Easy to Find Not only should your web site be easy to find, but your contact information should be easy to find. People like to know that there is a person at the other end of a web site who can help them in the event that: They need answers to questions which are not readily available on your web site OR Some element on your site is not working and end users need to be able to tell you about it

Easy to Find By giving all relevant contact information (physical address, telephone numbers, fax numbers, and address), you are also creating a sense of security for your end users. They can contact you in the way that makes them feel the most comfortable.

Your web page layout and design should be consistent throughout the site Just as in any document formatted on a word processor or as in any brochure, newsletter, or newspaper formatted in a desktop publishing program, all graphic images and elements, typefaces, headings, and footers should remain consistent throughout your web site. Consistency and coherence in any document, whether it be a report or a set of web pages, project a professional image.

Layout and design should be consistent For example, if you use a drop shadow as a special effect in your bullet points, you should use drop shadows in all of your bullets. Link-colours should be consistent throughout your web pages. Typefaces and background colours, too, should remain the same throughout your site. Typefaces, alignment in the main text and the headings, background effects, and the special effects on graphics should remain the same. Only the colours should change.

Your web site should be quick to download Studies have indicated that visitors will quickly lose interest in your web site if the majority of a page does not download within 15 seconds. Artists' pages should have a warning at the top of their pages. Even web sites that are marketed to high-end users need to consider download times.

Fast Download A good application of this rule is adding animation to your site. Sure, animation looks "cool" and does initially catch your eye, but animation graphics tend to be large files. Test the download time of your pages first. If the download time of your page is relatively short and the addition of animation does not unreasonably increase the download time of your page, then and ONLY then should animation be a consideration.

Fast Download Finally, before you consider the personal preferences of your web page design, you should consider all of the above rules FIRST and adapt your personal preferences accordingly. The attitude "I don't like how it looks" should always be secondary to your web site's function. Which is more important: creative expression or meeting the needs of the target audience?