Copyright © 2003/4 Bolton Institute Revision Layout A few basic concepts here: –Balance –Contrast –Unity –Proportion –White space Balance Equal layout.

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

Usability and Performance Rules of Thumb for Mobile Java Developers Jackson Feijó Filho Software Developer Lightning talk at Java Mobile, Media & Embedded.
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.
Basic Design Principles and Hazards to Avoid
Presenting with PowerPoint Real Life Examples. 1. How can we use PowerPoint to present well? Two Big Questions:
SEMIOTICS What is Semiotics? Semiotics is the study of signs. A sign is something that stands for something other than itself.
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.
Usability presented by the OSU Libraries’ u-team.
Copyright © 2005 Bolton Institute Exam Revision You exam will be on Tuesday 25 th January at 10am (at the moment – check the website for changes
CMPUT 301: Lecture 25 Graphic Design Lecturer: Martin Jagersand Department of Computing Science University of Alberta Notes based on previous courses by.
Copyright © 2003/4 Bolton Institute Semiotics Semiotics – the study of signs –Taken from the Greek word for sign – Sema What do we mean by Sign?
Principles of Graphics Design
Making Meaning Visual Literacy AAD4002
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.
CSI-553 Internet Information Presented by: Ignacio Castro June 28, 2006 Internet Usability.
Principles of Graphic Design
CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western.
Introduction to Usability By : Sumathie Sundaresan.
3.02D Design Multimedia Presentations 3.02 Demonstrate interactive multimedia presentations.
Desktop Publishing Your Guide to Concepts and Terminology.
Design. Hard design - increase control. - Displays are more virtual / artificial. Marketplace pressure: - Adding operations cheaper. Adding controls expensive.
What Is Usability? Usability is a quality attribute that assesses how easy Web sites are to use. “Usability" also refers to methods for improving ease-of-use.
Developing A Website. Reminder 1 You want your website to be _______? 1)Artistic 2)Easy to use 3)Interactive 4)Multimedia-driven.
BASIC PRINCIPLES OF DESIGN DESIGN, MULTIMEDIA, AND WEB TECHNOLOGIES (DMWT)
Your organisation’s presence on the Internet “To look good is to be good”-- that's the primary test when people assess a Web site's credibility The graphic.
3.02D Design Multimedia Presentations 3.02 Demonstrate interactive multimedia presentations.
Large Corporation Web Sites Efficient process Maximum effectiveness.
Usability. Definition of Usability Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers.
Web Development. Presentation Design Visualizing your web site or Visual Design.
Creating visually attractive and appealing publications.
Web Site Design. Overview Why? Internet and Intranet Common Mistakes. Elements of a Web Site. Structure. Navigation.
Enhance Your Website Using Design Elements Objective: The students will understand that basic design principles are used to enhance the visual appeal of.
Understand the principles of interactive media design Deliver a presentation describing the principles of interactive design. Graphic design (Unit 61)
Large Corporation Web Sites Efficient process Maximum effectiveness.
0303 IAT 102 Graphic Design. Reminders: Draft 1 of project two – bring with you to Lab next week (see WebCT for requirements) If you do not have a team.
Designing Web Pages Layout and Composition. Defining Good Design Users are pleased by the design but drawn to the content Design should not be a hindrance.
Audiovisual Literacy. • Educated • Cultured • Able to read and write What is LITERACY?
Four Principles of Design Dr. Allene Cooper. I gratefully acknowledge the ideas and words of Robin Williams which I’ve used liberally in this presentation.
The basic Principles of Design The following is a brief overview of the principles of design. Although they are discussed separately, they are really interconnected.
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.
Introduction to Usability By : Sumathie Sundaresan.
 Lecture 6 Lecture 6: Bitmap and Raster Images Adjustment Layers in Image Manipulation Software And Visual Design Principles.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Planning and Design.
Basic Elements.  Design is the process of collecting ideas, and aesthetically arranging and implementing them, guided by certain principles for a specific.
Web page design. Web Site Design Principles Design for the Medium What is meant by Hyper Media? Hypertext links.
Usability Olaa Motwalli CIS764, DR Bill – KSU. Overview Usability factors. Usability guidelines.  Software application.  Website. Common mistakes. Good.
COMPOSITION THE RULE OF THIRDS, VISUAL CENTER AND GRIDS.
Guilford County SciVis V104.01
Music Magazine Case Study Total Guitar September 2013 issue.
Designing for all Making your VLE accessible. Universal Design for Learning “Universal Design for Learning is a set of principles for curriculum development.
1 Web Site Usability Motivations of Web site visitors include: –Learning about products or services that the company offers –Buying products or services.
Basic Design Principles and Hazards to Avoid
8/18/2016 Web Development and Interactive Media
Desktop Publishing Notes
Usability engineering
Basic Design Principles and Hazards to Avoid
Principles of Design.
Web Site Analysis By:.
CIS 210 Systems Analysis and Development
Enhancing Student Learning and Retention with Community Partnerships
Unit 14 Website Design HND in Computing and Systems Development
Making Web pages.
SEMIOTICS.
Desk Top Publishing.
Tips on good web site Design
Guilford County SciVis V104.01
SEMIOTICS.
Strategies for Successful PowerPoint Design
Usability Created by Brett Oppegaard for Washington State University's
Presentation transcript:

Copyright © 2003/4 Bolton Institute Revision Layout A few basic concepts here: –Balance –Contrast –Unity –Proportion –White space Balance Equal layout to each side of the design

Copyright © 2003/4 Bolton Institute Layout

Copyright © 2003/4 Bolton Institute Layout Contrast is also used in layout. Juxtaposition of objects, text, logos orientation and size

Copyright © 2003/4 Bolton Institute Unity Golden Rectangle, golden section, rule of thirds Said to naturally achieve order, proportion and aesthetic beauty

Copyright © 2003/4 Bolton Institute Proportion Obviously this relates directly to golden section Harmony in design is important White space – the area around objects to allow them to breathe metaphorically obviously! White space does not have to be white Remember the site we looked at in the first week?

Copyright © 2003/4 Bolton Institute Consistency and Usability This relates to how we read a document, aiding the speed and accuracy information is digested –Text left to right –Title always at the top in bold 12 points –Page numbers always bottom right Consistency should be invisible but expected (examples of consistency) The BBC website is a good example of consistency

Copyright © 2003/4 Bolton Institute Consistency and Usability

Copyright © 2003/4 Bolton Institute Consistency and Usability These lack consistency No formal layout No standard page Change in colour Changing typeface No branding

Copyright © 2003/4 Bolton Institute Usability Usability is a quality attribute that assesses how easy the interface is to use The word usability also refers to methods used to improve ease of use in the design process –Learnability: Ease to accomplish basic tasks at first time viewing Efficiency: Once the design is learnt, how quickly can they perform tasks? –Memorability: On return after a period how easily can they re- establish proficiency? –Errors: How severe and how often? –Satisfaction: How pleasant is it to use the design?

Copyright © 2003/4 Bolton Institute Semiotics Semiotics – the study of signs –Taken from the Greek word for sign – Sema What do we mean by Sign?

Copyright © 2003/4 Bolton Institute Semiotics Signs are everywhere and help us read messages when there isn’t time to actually read reams of text. –Road signs are the obvious example Semiotics therefore is the study of visual signs –This is true but it is also the understanding of: Drawings Painting Photography Words Sounds – onomatopoeia for example Body language

Copyright © 2003/4 Bolton Institute Semiotics At semiotics lies sign. –We use sign and signification of object in 3 ways: Icon Index symbol

Copyright © 2003/4 Bolton Institute Semiotics Icon – a sign that stands for an object by resembling it, not just visibly but by any means We use icons heavily in multimedia in this way Indexes – refer to their objects by relation or linkage between sign and object Indirect like smoke to signify fire Symbols – objects by virtue of law Direct in the example of text meaning the thing it represents like ‘dog’ allows us to visualise just that.

Copyright © 2003/4 Bolton Institute Semiotics Our natural inbuilt humanity allows us the ability to read this meaning without the need in many cases to have the experience of the object itself Semiotics is controlled/nurtured by culture manipulated by: Religion Government Education etc This is so natural that we only really notice its existence when we travel to a different country

Copyright © 2003/4 Bolton Institute Icons, Picons & Micons We use 3 different methods in multimedia based semiotics: –Icons – representing an idea or area symbolically –Picons – take this further and make a clearer –Representation of this mostly through photography –Micons – move into animation (animated gifs, flash etc)