User Interface & Design

Intro

Create a usable and user-friendly design to provide a consistent experience for new users. The environment (TV, Mobile, pc) are designed differently to cater to the environment specific needs.

UI Environment

Mobile UI (Designing for Small Screens & Responsiveness & Simplicity)

Small Screens

  • Fewer Elements than website/application
  • Targets should be easier to hit on screen
  • Keep it Minimalistic, apps seldom have lots of frames, decorative elements
  • Try to keep it on One Screen, switching screens may throw users off

Responsiveness

  • Take as little time to complete a task as possible
  • If an operation is going to take a long time, show some kind of spinner icon, loading bar or progress bar

Simplicity

  • Common function should be easy to find
  • Button to create a message could be a different color than all others

Visual Elements & Principles of Design

Visual Elements (appeal to sight): Line, Shape, Direction, Size, Texture, Color, Value Principles (How these Visual Elements can be used): Balance, Gradation, Repetition, Contrast, Harmony, Dominance, Unity

Importance of Principles of Design

Accessibility: The practice of building digital content and applications that can be used by a wide range of people, including, visual, motor, auditory, speech disabilities

Elements of Design

Design elements have an impact on how a piece of work is perceived, executed and used and are present in design

  1. Form. Refers to the object you’re designing for
  2. Shape. E.g. Button on website, 2 different types: geometric and organic. It can live in a form
  3. Line. E.g Nav bar could have a line to divide itself from content
  4. Texture. The way a surface feels or in the digital space the way it’s perceived to feel
  5. Color. Help the organization of a design, and give emphasis to specific areas or actions
  6. Space. The area around, below or behind an object. For e.g button within a shadow to make it feel closer to the user
  7. Movement. Applied to lines, shapes, forms and textures and move objects in space

Principles of Design

  1. Balance - entails the equal use of 2 or more EoD in creating a design that has a harmonious relationship of elements to each other
  2. Emphasis - Capture focus on a user interface - H1 Header text ,
  3. Movement - Move the visitor’s attention that leads him/her to content. Such as Sign up for the newsletter page.
  4. Variety & Contrast - The use of complementary colors to keep user’s attention without making it boring
  5. Proportion - Correlation of a design element to other elements. Has to be in an informed arrangement. E.g. Font sizes, the usage of rems
  6. Unity - Refers to how successful the coming together of all the design elements and PoD are complemented