COMM1PCOMM1P Alan Woolrych E-store lectures Monday 12/11/01 11:00 EC 13:00 ECA Page Layout 7.

Slides:

Advertisements

Similar presentations

Website Design What is Involved?. Web Design ConsiderationsSlide 2Bsc Web Design Stage 1 Website Design Involves Interface Design Site Design –Organising.

Advertisements

Peer Feedback. In the homework section on the web for today: In the homework section on the web for today: 1. Open the link in the file and log into

Web Design Principles 5th Edition

Basic Principles of Web Page Design CSCI 150, CSCI 155, CSCI , MSTI 131 and MSTI 260 Developed by BNapoli.

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.

LAYOUT OF PAGE ELEMENTS September 28 th, PATTERNS Common ways to use the Layout Elements of Visual Hierarchy, Visual Flow, Grouping and Alignment,

M I S Dr. Ernst-Gerd vom Kolke 1 Web Design - Introduction n Design for printed and electronic information isn’t very different n Special aspects for web.

Web design criteria University of Stellenbosch. What is on a web page? Navigational elements Text Graphics.

Format for Ease of Access Importance Design Principles Design Elements.

SIMS 213: User Interface Design & Development Marti Hearst Thurs, March 6, 2003.

SIMS 213: User Interface Design & Development Marti Hearst Thurs, March 3, 2005.

SIMS 213: User Interface Design & Development Marti Hearst Tues, March 5, 2002.

SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 26, 2004.

NOAC 2002 E-Scouting1 Design and Layout Sage Lichtenwalner National OA Web Site Youth Coordinator.

Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,

A Beginners Guide to Web Site Design. What we will cover…. Planning your site. Creating a template. Images and Fonts. Absolute vs. Relative Links.

I213: User Interface Design & Development Marti Hearst March 1, 2007.

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.

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

© De Montfort University, Design Process Howell Istance Department of Computer Science De Montfort University.

Principles of Graphics Design

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

Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.

Www: Greeked Templates Jakob Nielsen (useit.com & jnn.org) Thomas S. Tullis (Fidelity Investments)

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

Page Design Web Design Professor Frank. Page Design Effective web design creates visual logic and seeks an optimal balance between visual sensation and.

Web Design Part 2 Page Size, Screen Layout and Content.

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 Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.

1 Technical Communication A Reader-Centred Approach First Canadian Edition Paul V. Anderson Kerry Surman

Multimedia & The World Wide Web winny HCI 201 Multimedia and the www.

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

COMM1PCOMM1P Alan Woolrych Accessibility 9 COMM1P9COMM1P9 SCET MSc EC/ECA © Alan Woolrych 2001 Introduction Accessibility “Making Content Available to.

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.

IS1824: Introduction to Internet Multimedia Lecture 7: Style 1 (Layout and Colour) Rob Gleasure

Starting your course from scratch January Outline Should already know Moodle basics Layout best practice Moodle course formats Using blocks Key.

Using Adobe ® Dreamweaver ® and Photoshop ® An Introduction PART ONE The design phase before launching Dreamweaver.

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.

PBA Front-End Programming Page Composition. Page composition Now we know about – Colors – Fonts, texts and editorial style – Links and navigation – …

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

Interface Design.

Introduction to Web Page Design. General Design Tips.

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.

Click on the link to answer questions 1-8. View the examples of each element to help you understand each principle. You will have to scroll down to find.

Click on the link to answer questions 1-8. View the examples of each element to help you understand each principle. You will have to scroll down to find.

1 CP586 © Peter Lo 2003 Multimedia Communication Visual Interface Design & Product Design.

Design Principles 3.02 Understand business publications.

Storyboard, Design, Layout.  Create storyboards  Decide upon navigation  Prepare short page summaries.

Windows layout. During the design process, the individual elements, or building blocks, of screens will have been identified. A logical flow of information.

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

Web page design. Web Site Design Principles Design for the Medium What is meant by Hyper Media? Hypertext links.

Kevin Murphy Building a Good Web Page Masters Project CS 490.

Fakultas Informatika ITTelkom -HTT- Organize and Layout Windows and Pages 1.

Click on the link to answer questions 1-8. View the examples of each element to help you understand each principle. You will have to scroll down to find.

Structuring and Managing Online Learning Environments.

Design Elements Continued Dave Curro. Last time Touched on C.R.A.P Mentioned semiotics Gave some examples.

Section 6.1 Section 6.2 Write Web text Use a mission statement

Section 7.1 Section 7.2 Identify presentation design principles

Web Design ECT 270 Robin Burke.

Color Theory in Web Design

Elements and Principles

PBA Front-End Programming

Step 1: Design for a Computer Medium

Web Programming– UFCFB Lecture-4

CARP Principles By [put your name here].

Interface Design Interface Design

Tips on good web site Design

Presentation transcript:

COMM1PCOMM1P Alan Woolrych E-store lectures Monday 12/11/01 11:00 EC 13:00 ECA Page Layout 7

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Context Design Evaluation 3 Fundamentals: Reminder

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 "Man is the great pattern-maker and pattern perceiver. No matter how primitive his situation, no matter how tormented, he cannot live in a world of chaos." Edmund Carpenter Introduction

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Harmony All elements fit together seamlessly Movement from one element to another is effortless When all blend into a satisfying whole Universal Principles (Howlett)

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Balance Universal Principles (Howlett)

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Simplicity Is not the opposite of complex Does not mean dull, boring Simplicity is Clarity Restrained Direct Universal Principles (Howlett)

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Any Comments?

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Home Page Index Page Contents page Search Page FAQ’s Page Standard Page Types

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Site title & paging buttons Page title Link to site home Local Links Text & graphics (main page content) Jump-to-link Footer Standard Page Elements

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Objective: To establish the basic layout for your pages, including the space Templates then set the placement for: Page titles Subtitles Navigation buttons Grids

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 From Grids to Templates

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Chunking Information Write for scannability: don't require users to read long continuous blocks of text (Nielsen 1997) Modularity

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Navigation Within Pages CW- After the action is taken, will users understand feedback? Telephone Test Fidelity ‘Greeking’ Paper prototypes Evaluation

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Template 1

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Template 3

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych Main content selections for this page 2.Page title 3.Person responsible for this page 4.Intranet-wide navigation (e.g., intranet home, search) 5.Last updated date 6.Intranet identifier/logo 7.Site navigation (e.g, major sections of this section of the intranet) 8.Confidentiality/security (e.g, Public, Confidential, etc.) 9.Site news items Which is Which?

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Back By 9.55 Monday Lecture at (EC) & 1.00 (EC/A) Estore design Break

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Graphic Design Principles 1 Scale Size is important Proportion Visual Impact Contrast Too much Too little

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Hierarchy What comes 1st…2nd…3rd etc. Layering A sense of priority Emphasis & Focus Creates contrast Acts as a directional signal Graphic Design Principles 2

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 White Space (negative space) use of.. Colour Cultural conditioning Grouping consistent with common sense, logical organisation Graphic Design Principles 3

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Monitor size Scrolling Printing Wide Pages..loss of information Graphic Design Principles 4

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 Universal Principles Grids (template) Consistency Evaluate Guideline checking as part of inspection Summary

COMM1P7COMM1P7 SCET MSc EC/ECA © Alan woolrych 2001 A Few Specific Guidelines Establish a high-to-low level of importance of information (hierarchy) Place logos, text, buttons etc., in a consistent position on all pages Make subtle use of unused space (white space) on pages Now find your own!