Web-designWeb-design. Web design What is it? Web-design features Before…

Slides:



Advertisements
Similar presentations
Usability Prepared by: The NYS Forum for Information Resource Management IT Accessibility Committee.
Advertisements

Chapter 3 – Web Design Tables & Page Layout
UI Best Practices Application Developer’s Intro School Week 1 Day 1.
CSE2MA Multimedia Authoring Semester 2, 2011 Web Page Design Week 2.
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.
Web Site Design. Dorky Web Pages Below are features that can make a web design look dorky. These are not just my personal opinions, but are ideas I have.
Unit 14 Website Design HND in Computing and Systems Development
Interface / navigation COM 366 Web Design & Production.
. Website and file organization. How websites work.
Good Websites. 2. Submit one good web interface. This website is a good because of it usability and appears of the website.
Web Design Principles Joan Naturale NTID Reference Librarian.
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.
Review of last session The Weebly Dashboard The Weebly Dashboard Controls your account and your sites Controls your account and your sites From here you.
Basic Principles of DESIGN Bristol Community College Bristol Community College Paula Mailloux Sources: The Non-Designers Design Book The Non-Designers.
LESSON #3 WEB DESIGN. WHAT IS WEEBLY? Weebly.com is web 2.0 like online site builder with some advanced features. Is the perfect tool for creating classroom.
Expression Web 2 Concepts and Techniques Expression Web Design Feature Web Design Basics.
Good Web Design And other life skills…. “I can recognize good and poor web design.”
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
Multimedia & The World Wide Web winny HCI 201 Multimedia and the www.
Document and Web design has five goals:
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
BASIC PRINCIPLES OF DESIGN DESIGN, MULTIMEDIA, AND WEB TECHNOLOGIES (DMWT)
© Anselm Spoerri Lecture 14 Course Review –Course Objectives –Design Principles Evaluation Criteria used for Term Project.
Web Design.
The Internet Writer’s Handbook 2/e Web Page Design Writing for the Web.
Chapter 7. Designing Documents and Web Sites © 2013 by Bedford/St. Martin's1 Document and Web design has five goals: to make a good impression on readers.
HTML H yper T ext M arkup L anguage. HTML HTML is NOT case sensitive However, proper coding etiquette if for all to be in ALL CAPS and for text to be.
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;
Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.
W eb D esign Concepts. The Web Design Process  Design Phase  Production Phase  Distribution Phase  Maintenance Phase.
Good Web Design. The Four A’s of Good Design Accessible Accurate Appropriate Appealing.
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.
Web Pages That Suck By Vincent Flanders William Featherstone.
Introduction to Web Page Design. General Design Tips.
Group 3: Art Gallery Monica Almendarez Content/Project Manager Willliam Egle Technology Manager Christina Pié Usability/ADA Compliance Manager Mirjana.
Web Design. Keep a Consistent Appearance Visually show that the site is the same Always use the same background Same graphic style Same type formatting.
Do’s and Don’t In Web Page Design. Good Designs Text Background does not interrupt the text Background does not interrupt the text Text is big enough.
 Good navigation is consistent, clearly labeled, and reflects the needs of the site’s audience.  Navigation labels are short, clear, and user-friendly.
Ecom6010 Presentation Bing Gao, Hui Li Lijuan Zeng, Wei Li.
Principles of effective web design NOTES Flo Morris-Duffin.
Building Your Web Page. Build Your Web Page Orfordville Public Library held at: Parkview High School Tue. April 8 Tue. April 15 Tue. April 22.
Web Page Concept and Design :
Information Literacy. Addressing a new challenge in society.
?. When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience.
HOW TO RECOGNIZE GOOD AND BAD DESIGNS BY DILLON SPONSELLER AND TYLER KELLY.
(OF WEB DESIGN) The Seven Deadly Sins. 1. Too Much Template Website templates are a convenient, inexpensive and quick way to create a website. They are.
Microsoft Expression Web 3 Expression Web Design Feature Web Design Basics.
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.
AGCJ 407: Web Authoring in Agricultural Communications Design Characteristics AGCJ 407 Web Authoring in Agricultural Communications.
Human Computer Interaction: World Wide Web Rebecca W. Boren, Ph.D. Introduction to Human Factors & Ergonomics Engineering IEE 437/547 November 2, 2011.
1 CSE 403 Web Patterns and Design These lecture slides are copyright (C) Marty Stepp, 2007, with significant content taken from slides written by Valentin.
Essential Elements to Keep in Mind While Designing a Website.
1 MIT 5316 Web-Based Computing Lecture #2. 2 Quiz Quiz #1 Quiz #1 An image is 1200x1700 pixels and has a color depth of 1024, what is the uncompressed.
Section 6.1 Section 6.2 Write Web text Use a mission statement
Formatting Text and Paragraphs
Web-design.
Objective % Explain concepts used to create websites.
Fixed Positioning.
Good and Bad Design Mandy Smetana.
Website Design and Management Section 3 - Design
Design Principles 8-Dec-18.
Web Design Tips.
Dreamweaver Fireworks Flash
Unit 14 Website Design HND in Computing and Systems Development
Design Principles 5-Apr-19.
Elements of Effective Web Design
Objective Explain concepts used to create websites.
Presentation transcript:

Web-designWeb-design

Web design What is it? Web-design features Before…

What is it? The arrangement and creation of web pages that in turn make up a web site. There are many aspects to this process, and due to the rapid development of the Internet, new aspects are continually being added. As far as business oriented web sites go, the basics currently consist of: a) The "visibility" of the site on the Internet, particularly within the major Search Engines. b) The informational value of the site, from its target public's point of view. c) The aesthetic / professional appearance of the pages. Theoretical layout of graphics, text, and images which will eventually be developed into a Web site

The basic aspects are The site design is defined by the topic and content. The content, substance, and information on the site should be relevant to the site. The site should be user-friendly, with the interface and navigation simple and reliable. The appearance should include a single style that flows throughout, to show consistency. The visibility of the site's text and information should be paramount as that is what the users are visiting for. The site must also be easy to find on the internet

Web-design features

Good design features Text Navigation Links Graphics General Design

Text Background does not interrupt the text Text is big enough to read, but not too big The hierarchy of information is perfectly clear Columns of text are narrower than in a book to make reading easier on the screen

Navigation Navigation buttons and bars are easy to understand and use Navigation is consistent throughout web site Navigation buttons and bars provide the visitor with a clue as to where they are, what page of the site they are currently on Frames, if used, are not obtrusive A large site has an index or site map

Links Link colors coordinate with page colors Links are underlined so they are instantly clear to the visitor

Graphics Buttons are not big and dorky Every graphic link has a matching text link Graphics and backgrounds use browser-safe colors browser-safe colors Animated graphics turn off by themselves

General Design Pages download quickly First page and home page fit into 640 x 460 pixel space Good use of graphic elements (photos, subheads, pull quotes) to break up large areas of text Every web page in the site looks like it belongs to the same site; there are repetitive elements that carry throughout the pages

Bad design features Backgrounds Text Navigation Blinking and animations Links General Design

Backgrounds Default grey color Color combinations of text and background that make the text hard to read Busy, distracting backgrounds that make the text hard to read

Text Text that is too small to read Text that stretches all the way across the page Centered type over flush left body copy Paragraphs of type in all caps Paragraphs of type in bold Paragraphs of type in italic Paragraphs of type in all caps, bold, and italic all at once Underlined text that is not a link

Navigation Unclear navigation; over complex navigation Complicated frames, too many frames, unnecessary scroll bars in frames No links back to where they came from, no identification Useless page titles that don't explain what the page is about

Blinking and animations Anything that blinks, especially text Rainbow rules that blink or animate Animated pictures for Animations that never stop Multiple animations that never stop

Links Links that are not clear about where they will take you Links in body copy that distract readers and lead them off to remote, useless pages Text links that are not underlined so you don't know they are links Dead links

General Design Entry page or home page that does not fit within standard browser window Frames that make you scroll sideways Navigation buttons as the only visual interest, especially when they're large Cluttered, not enough alignment of elements Lack of contrast Pages that look okay in one browser but not in another

Before… Before creating and uploading a website, it is important to take the time to plan exactly what is needed in the website. Define the purpose Define the audience Plan documentation

Good luck