Good Vs. Bad UI & Oakley Airwave 1.5 Sean Gergen & Derik Wright.

Slides:

Advertisements

Similar presentations

The Web Wizards Guide to HTML Chapter Six Tables.

Advertisements

Chapter 3 – Web Design Tables & Page Layout

PRESENTER: MATTHEW DILLON E SCHOOL VIEW CMS TEACHER TRAINING.

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

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.

Microsoft Office Illustrated Fundamentals Unit M: Creating a Presentation.

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

Access Lesson 4 Creating and Modifying Forms

Accessible Word Document Training Microsoft Word 2010.

With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)

Design Principles 3.02 Understand business publications Slide 1.

Basic Principles of DESIGN Bristol Community College Bristol Community College Paula Mailloux Sources: The Non-Designers Design Book The Non-Designers.

CHAPTER 14 Formatting a Workbook Part 1. Learning Objectives Format text, numbers, dates, and time Format cells and ranges CMPTR Chapter 14: Formatting.

Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.

Using PowerPoint: a beginner’s tutorial Betsey Davis MathScience Innovation Center 2005.

Web Technologies Website Development Trade & Industrial Education

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

11-1 Chapter 11 Designing Forms and Reports Modern Systems Analysis and Design Fourth Edition.

Website Development with Dreamweaver

1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.

Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Lecture 3 Web Design What makes a "good" website? Getting started on your website. Planning the layout. Picking a theme. Effective Design Tips.

 Word doc for you to download › Link at the beginning of class › 10 Questions › Answers to be added inline  Post to Sakai when completed › No resubmits.

XP New Perspectives on Microsoft Word 2002 Tutorial 31 Microsoft Word 2002 Tutorial 3 – Creating a Multiple-Page Report.

Formatting a Workbook.  Formatting: process of changing a workbook’s appearance by defining fonts, styles, colors, and decorative features.  Theme:

With Microsoft Office 2007 Intermediate© 2008 Pearson Prentice Hall1 PowerPoint Presentation to Accompany GO! with Microsoft ® Office 2007 Intermediate.

Design Principles The good and the bad Alyssa Mendiola Summer 2009.

Visual Organization Layout. Importance Users form their 1 st impression of your website in SECONDS When users know what they want, they want to find it.

 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.

Reports 5.02 Understand database queries, forms, and reports used in business.

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

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,

Innovation AMS Center for Advanced Technologies Web Navigation Eugene Tiller & Phillip Green AMS Center for Advanced Technologies.

BIS 360 – Lecture Nine Ch. 13: Designing Forms and Reports.

Miscellaneous 1 Miscellaneous 2 Slide ShowEditingGraphics

Planning Site Design and Page Layout. Identify Best Practices Demonstrate Consistency: – One way to ensure a professional look and feel to a website –

Design Principles EDUC 6307: Design of Print Based Media Summer 2009 Ranelle Woolrich.

2 VISUAL JOURNAL Hannah Hanif Ng Jas Min Prethiba Esvary Subramanian 0801G65256 Sim Pei Xuan

Accessible Word Document Creation Using Microsoft Word 2010.

Web Site Development - Process of planning and creating a website.

Graphics Navigation Usability Typography Content Clarity & Consistency.

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

Design Principles 3.02 Understand business publications Slide 1.

Design Principles 5.01 Understand business publications Slide 1.

Design Principles 5.01 Understand business publications Slide 1.

 Add one element at a time  If it doesn’t do what you want, › Delete it › DON’T just keep piling on more items.

Introduction to Programming the WWW I CMSC Winter 2003 Lecture 5.

Creating Web Pages in Word. Sharing Office Files Online Many Web pages are created using the HTML programming language. Web page editors are software.

Formatting Text and Paragraphs

Layout - you need to understand that a simple navigation bar:

Page plans A01 Design.

Fixed Positioning.

Good and Bad Design Mandy Smetana.

Design Principles 3.02 Understand business publications

Some Layouts have both Animated & Static. Main Title Page Animated

Additional Information

Design Principles 3.02 Understand business publications

PowerPoint Wide screen template November 2016

Multipage Sites.

2.00 Understand Publications

Design Principles 3.02 Understand business publications

Powerpoint Widescreen Updated 4/1/2019.

Welcome To Microsoft Word 2016

Use a Large Bold Type for the Main Title (80 pt):

Permeability (% of Control)

Use a Large Bold Type for the Main Title (80 pt):

Use a Large Bold Type for the Main Title (70 pt):

Permeability (% of Control)

Use a Large Bold Type for the Main Title (70 pt):

Presentation transcript:

Good Vs. Bad UI & Oakley Airwave 1.5 Sean Gergen & Derik Wright

Poor Application UI Poor GUI Unclear/vague title - Same font as entire application Inadequate spacing between buttons and text boxes Poor use of highlighting on column labels/buttons Overall hard to navigate, information is too dense The Application Manager

Poor Application UI Navigation can be tricky with many tiles Different layouts for compatible programs Troubleshooting system issues is trickier Can fill up with tiles quickly Windows 8 Tiles

Good Application UI Clear title in application header Navigation bars are clearly highlighted (green) displaying exactly where the user is in the application Information is separated by boxing - with line spacing in between - with clear bolded titles Text is double spaced and left justified Nvidia Preferences

Good Application UI Clear table number Ticket print up with item and price separated Sub menus in the center for categories of items Separate items on the right Aloha POS System

Poor Website Interface Visually straining on the eyes Very unbalanced layout - Variety or different texts - Compact together with no spacing Everything looks like advertising Numerous animated GIFs that slow down the downloading time of the page Lingscars.com

Poor Website Interface Bad use of the window size Poor use of the graphic and the text combination Links are corrupt - Misc. link is blank - Some pages have multiple links labeled differently Pages have different layouts Stcloudbonanza.com

Good Website Interface Light, complimentary colors make it visually soothing Navigation bar with highlighting (black) makes for easy navigation No external advertisements Balanced layout - Separate boxing for products - Adequate spacing Rich imageary Apple.com

Good Website Interface Organized layout - no ads on the side - spacing Large title on top so you know where you are and what it is No external advertisements Sub-sections labeled Large images for the quick scan Well contrasting link color Uncrate.com

New Technology Bluetooth connectivity Statistics of your slope time -Airtime -Vertical distance -Speed -Coordinates Heads Up Display -Time -Battery life -Connection Oakley Airwave 1.5