WHITE SPACE and USER INTERACTION Ebuba Udoh 0313957 Idris Kargbo 0317960 Linda Mensah 0508699.

Slides:



Advertisements
Similar presentations
Creating Flyers Flyers are generally used to advertise a product or service that is available for a limited amount of time.
Advertisements

Designing a Graphical User Interface (GUI) 10 IST – Topic 6.
How to create a PowerPoint Presentation Where do you start Click on the icon on your screen that resembles the one on the below.
User Interface design Teppo Räisänen
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.
How the edges of a line, paragraph, object, or table are positioned horizontally and vertically between the margins or on a page.
Web Usability By Chao Liang Based on Jakob Nielsen’s Book “ Designing Web Usability”
WHITE SPACE and USER INTERACTION Ebuba Udoh Idris Kargbo Linda Mensah
Part 3: Design Chapter 8: Work Reengineering and Conceptual Design Chapter 9: Design Guidance and Design Rationale Chapter 10: Interaction Design Chapter.
Lecture 7 Date: 23rd February
SIMS 213: User Interface Design & Development Marti Hearst Thurs Feb 8, 2001.
DESIGNING INTERFACE FOR DISABILITIES Ebuba Udoh Idris Kargbo Linda Mensah
Designing Pages and Screens Comm Arts II Mr. Wreford.
Part 3: Design Chapter 8: Work Reengineering and Conceptual Design Chapter 9: Design Guidance and Design Rationale Chapter 10: Interaction Design Chapter.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
A02 Creating my website NAME ______________. UNIT 2 – A02 – Creating my Website The purpose of this assessment objective is to create 5 web pages containing.
PAGE DESIGN PAGE DESIGN Giving Your Work the Best Possible Appearance.
Week 2 Web Site Design Principles. 2 Design for the Computer Medium Craft the look and feel Make your design portable Design for low bandwidth Plan for.
Dreamweaver – Setting up a Site and Page Layouts Web Design Section 7-2 Part or all of this lesson was adapted from the University of Washington’s “Web.
CO1552 – Web Application Development Lists, Special Characters, and Tables.
Ch 6 - Menu-Based and Form Fill-In Interactions Yonglei Tao School of Computing & Info Systems GVSU.
CORE 2: Information systems and Databases COLLECTING AND DISPLAYING FOR DATABASE SYSTEMS.
IT3 Human Computer Interface [HCI] Human Computer Interfaces Factors that should be considered when designing a Computer Interface.
Chapter 2 Web Site Design Principles
Web Site Design Principles
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.
COMMON APPLICATION FUNCTIONS Presentation. Bullets  Symbols used to organize data into a list.  This  Is  An  Example  Of  A  Bullet  List.
Word Lesson 9 Enhancing Documents Microsoft Office 2010 Advanced Cable / Morrison 1.
Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward.
Welcome! The Topic For Today Is Word Processing and Desktop Publishing.
Screens are a direct copy of the physical text. To learn the material for this course, begin by reading the textbook section. At first glance, the pages.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Web Site Design 15 Easy Steps to an Excellent Web Site.
Publisher Lesson 5 Working with Style and Design Elements.
Microsoft Access 4 Database Creation and Management.
_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the.
0707 IAT 102 Graphic Design Design Basics Design Tools.
Using COLOR Bristol Community College Bristol Community College Business Creativity Sources: Non Designers Design Book.
“Just look at our web site…” I hate the title of this session, and so should you.
Chapter 9 Creating a Reference Document with a Table of Contents and an Index Microsoft Word 2013.
Different Types of HCI CLI Menu Driven GUI NLI
Posters, Magazines, Websites
Interactive history. To provide a visually attractive and interactive timeline of the major scientific discoveries throughout history.
IMD 315 Designing Interactive Interfaces Assignment #2 Oral Presentation by Allin Harmon USER INTERFACE DESIGN PATTERNS.
(Desktop View) Introducing the new dawsonera Online Reader.
Do Now You have 10 minutes to finish your About Me essay. When you are done, print out both your new About Me Ad and your typed essay.
Dreamweaver – Setting up a Site and Page Layouts Web Design Section 7-2 Part or all of this lesson was adapted from the University of Washington’s “Web.
Fermilab Education Office Homepage Updated in 2014 We want to appeal to our main audiences providing them with pathways to get the information they need.
Principles of Design Lesson Khuzaima Jallad. Principles of Design Lesson Balance Proximity / Unity Alignment Repetition / Consistency Contrast White Space.
WHAT ARE WE DOING TODAY? GET READY TO MAKE NOTES iMedia Students – get ready to make notes 1.Bateman, Jordan 2.Buckle, Aimee 3.Coulthard, Nicole 4.Crichton,
Planning a Web Site Planning a Web Site. The Home Page Think of this as your storefront. It is the first thing seen by your customer when they log on.
INPUT AND OUTPUT DEVICES. INPUT ALL THE ELEMENTS THAT HELP TO PUT INFORMATION INSIDE THE COMPUTER.
Evidence-Based Design
Chapter 2 Web Site Design Principles
Section 6.1 Section 6.2 Write Web text Use a mission statement
Dreamweaver – Setting up a Site and Page Layouts
Computer Fundamentals
Principles of Good Screen Design
Page Design in Canvas.
Chapter 2 Developing a Web Page.
Applications Software
Chapter 14 Moving from choosing components into design areas
Introduction UI designer stands for User Interface designer. UI designing is a type of process that is used for making interfaces in the software or the.
For use on your feedback page
Chapter 2 Web Site Design Principles
A02 Creating my website NAME ______________.
Human and Computer Interaction (H.C.I.) &Communication Skills
Lesson 5 Working with Style and Design Elements
Presentation transcript:

WHITE SPACE and USER INTERACTION Ebuba Udoh Idris Kargbo Linda Mensah

What is white space? The space between elements on a screen ( element in this case is the content i.e. text &graphics) Ignoring the content gives one the layout of the interface

Uses of white space Space to Separate Space to Structure Space to highlight

History and more about White Space The term arises from graphic design practice, where printing processes generally use white paper - it is that portion of a page left un-marked: In some types of magazine, newspapers, e.t.c, white space is limited in order to get as much vital information on to the page as possible. A page crammed full of text or graphics with very little white space appears busy, cluttered, and will be difficult to read without careful attention being paid to it. A page with a lot of white space can appear either incomplete, or large amounts of white space applied judiciously can give a page a classic, elegant, or rich appearance. Upscale brands often use ad layouts with little text and a lot of white space, for example.

How it helps user interaction Interaction not just about interface The devices dictate the style of interaction that the system support If we use different devices then the interface will support a different style of interaction To understand human-computer interaction need to understand computer

User Interaction, with most computing and other devices (cont) Rapid feedback Navigator system The user tell the computer what they want (input) The computer then answer by result (output) The user should be in control Doing rather than thinking

User Interaction, with most computing and other Devices (cont) Table and chair Drawing plans on the paper Mobile phone Photocopier Car

User Interaction, with most computing and other Devices Interaction Model - translation between user and system - the nature of user /system dialog - User decide where to go, what to see, what to do and when to leave - system should response for user interest of using the product/system