Use of layout and consistency in designing interfaces Michael, Paul, Jason, Augusto.

Slides:



Advertisements
Similar presentations
Layout of a Desktop Publishing Document 1.03 Demonstrate desktop publishing.
Advertisements

House Style. What do we mean by House Style? Consistent use of text type, graphics, logo, colours etc throughout our work Positioning of logo and graphics.
Designing a Graphical User Interface (GUI) 10 IST – Topic 6.
Chapter 13 Web Page Design Studio
Graphic Standards The Essentials, and Adobe InDesign Tips for Graphic Standards Layout ~ Eric J. Schiff.
Creating Effective Conference Posters using PowerPoint
Designing a Poster Difference between content, layout and styles Miss Allgar.
Difference between content, layout and styles Miss Allgar
Week 7 Web Typography. 2 Understanding Type Design Principles.
Analysing Letters 1.Do the documents do the job they were intended to do? Are they informative, persuasive or information gathering? 2.Is the layout right.
Chapter 11 Designing Effective Output Systems Analysis and Design Kendall & Kendall Sixth Edition © 2005 Pearson Prentice Hall.
Designing Pages and Screens Comm Arts II Mr. Wreford.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Membership Card Research Marta Kaptur. Card 1 The purpose of this card is to hold personal information. It is a personal business card which is given.
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.
Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2 Identify color scheme guidelines.
WEB DESIGN TIPS FOR DESIGNING A WEB PAGE. PURPOSE OF WEBSITE To inform To persuade To market/sell To entertain To advocate KNOW YOUR PURPOSE!
Multimedia & The World Wide Web winny HCI 201 Multimedia and the www.
Chapter 7 Web Typography Principles of Web Design, 4 th Edition.
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.
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…
Guidelines For Effective Presentations. Agenda Getting started on a presentation Creating a presentation Guidelines for creating a presentation Final.
Unit 21 – Creating Computer Graphics. Logo Static ButtonRoll Over Button Advertising Banner Navigation Bar.
The applied art of arranging image and text to communicate a message.
Chapter 19 Visual Design. Copyright © Houghton Mifflin Company. All rights reserved.19 | 2 Chapter overview Two reasons to consider visual design in a.
Call to Write, Third edition Chapter Nineteen: Visual Design.
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.
Good Web Design. The Four A’s of Good Design Accessible Accurate Appropriate Appealing.
Design Principles The good and the bad Alyssa Mendiola Summer 2009.
Chapter 11 Designing Effective Output
Introduction to Web Page Design. General Design Tips.
Create Stylish Newsletters LLGI Diane M. Coyle Spring 2009.
Basic Design Tips for Web Pages. Alignment Left, right, center Choose one alignment and use it on the entire page Align form elements, table elements,
Unit 12 Additional Evidence Faye carter. 1.1 I can describe what types of information are needed. Logo Idea 1 I do not want this logo to be my final logo.
Slide 1-1 The Web Wizard’s Guide to Web Design by James Lengel.
By Lauren Mayer WEBSITE RESEARCH. NYLON MAGAZINE WEBSITE Header, this is the title of the website and should be the main attraction. This example had.
With a focus on screen design and CRAP. The Joshua Tree Epiphany.
You Must… Gather answers to the following questions: Decide what your website will be about. Identify who your audience would be for this site. Outlined.
Graphics Navigation Usability Typography Content Clarity & Consistency.
Web page layout in elegance.  Specific Designs for Target Audiences Consider your audiences tastes when creating your website.
Codes and Conventions of contents pages. By Eleanor Raftery.
Ross Creating a Logo and Tagline. What is a Logo? A name, symbol, or trademark designed to easily recognize. Can be words (text) only, or a combination.
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.
Planning and Creating a Web Site. Stages in planning a web site planning the project decide on the purpose and audience for the web site create mind map.
What makes a Good Website?. Examples of Bad Websites For more really.
Web technologies Session 2. Slide 2. 1 Objectives for session 2  To develop participants’ knowledge, skills and understanding of web-page design  To.
Robin Marsh 11T. This pack uses the companies consistent theme, including its orange colour scheme and font. There is a flap inside the pack which allows.
1. Storyboarding a Website. How to start a storyboard: Have Blank Squares!
Section 7.1 Section 7.2 Identify presentation design principles
Web-design.
Principles of Graphic Design
Unit 17 Website Development
WEBSITE DESIGN TOOLS.
Web Design and Development
Layout - you need to understand that a simple navigation bar:
Screen Based Design: An Introduction DW9V 34
Objective % Explain concepts used to create websites.
Page plans A01 Design.
Layout of a Desktop Publishing Document
Layout of a Desktop Publishing Document
Elements of Effective Web Design
Designing Pages and Documents
Objective Explain concepts used to create websites.
Layout of a Desktop Publishing Document
(should run across the top of your poster)
Presentation transcript:

Use of layout and consistency in designing interfaces Michael, Paul, Jason, Augusto

Main Topics for Discussion  What are/is an interface?  What is layout and how should it be implemented when designing Interfaces?  How should layout be kept consistent?

Interfaces

What is Classed as an Interface?  An interface is what you see when you look at your monitor: the collection of words, pictures, buttons, menus, etc.  The interface is also sometimes referred to as the graphic user interface, which can be abbreviated to GUI.

Types of Interfaces  Websites  CD-ROM  DVD  Games  Mobiles  TV

Layout

What is Layout?  Layout is the way photos, graphics, text are placed on screen based or print based media which is perfect and pleasing to the eye.  Colour and the size of type or graphics make the layout more interesting and also making the media not cluttered helps.

Guidelines for layout  Create a very simple, easy-to-understand navigation system that doesn't take up too much space.  All else fails when user’s cant read the text.  Use colours with high contrast between the text and background.

Guidelines for layout 2  Use either plain coloured text backgrounds or extremely subtle background patterns.  Use large enough fonts e.g. (12 pt)  Body text 40 – 60 characters per line or 10 – 15 words.  Avoid animation text.

Guidelines for layout 3  Remember how users find and read information on the web.  Use 50% fewer words than you would in print.  Use objective non-promotional writing style.  Make your text and page scan-able.

Guidelines for layout 4  Use different approaches suited for your content.  Make sure that everything on the page is where it is for a purpose.  The basic principle to remember is that related things should be pulled closely together.  The same font style can be used throughout a document

Layout in Print  Layout is a big part in the print industry because it can not only be used for Magazine articles to align and columnise sections of type but also to align the most appealing images and type on posters, leaflets, flyers etc.

Consistency

What is Consistency?  “The property of holding together and retaining its shape.”  If a company has a corporate image e.g. colour, logotype, these should be kept consistent throughout the media, to make sure the media relates to the company.

Consistency in Print  This is shown through corporate branding or even advertising campaigns. Corporate branding relates to a style or theme, related to that company such as letter heads, business cards and logos all appearing similar.

What should be kept consistent?  Fonts / Typeface  Colours  Navigation  Logo  Structure

Summary  Layout Use colours with high contrast between the text and background. Use very simple, easy-to-understand navigation system. All else fails when users can’t understand the layout of the media and won’t return to view the media. So make sure that everything on the page is where it is for a purpose.

 Consistency Fonts / Typeface, Colours, Navigation, Logo & Structure, should all be kept consistent throughout a document. This makes the media relate to the company.

Useful links   n/sofar.htm n/sofar.htm n/sofar.htm 

References skyactivemenu.jpg pics/new/O2_Xda_ii_b.jpg microsoft/microsoft.03.jpg