Slides badge

User interface Design

What is user interface design?

  • User interface design or UI design, is the process of developing a website or digital media document in a way that makes it accessible to the end user.
  • Google Sites aims to do this in its editor by only giving you control to do certain things. When building a website or digital media from scratch, it becomes much harder.
  • However, it's possible to still create a bad user interface using Google Sites!

Bad user interfaces

Microsoft Word (2000) - before Microsoft introduced the ribbon we had menu madness

Bad user interfaces

Adobe Photoshop

Bad user interfaces

Bulk Rename Utility

Bad user interfaces aren't always cluttered!

  • Not all bad interfaces are down to clutter.
  • Poor choice of colour such as low contrast, overuse of text or images, lack of representation of UI elements such as clickables or too many menus to access common tools can also be contributing factors to a bad user interface. 

Apple iOS 15: Safari

Answer this:

  • What's different here?
  • How could this new change cause problems?
  • How do I print a file from my iPhone?

What does this button actually mean?!

Design language

  • A design language is a set of rules that are followed by a company and all those that develop digital products for that company. 
  • Design languages keep interfaces and user experiences very consistent across multiple products or webpages.
  • For example, a magazine company might decide that they are going for a very bright and colourful design language.
  • By agreeing on this first, the developers of the product can focus more on creating content for the magazine.

Design language

  • Companies like Apple, Google and Microsoft all lead the way in digital design with their design languages. 
  • These designs are consistent across all the applications they create.

Design language

Digital design agency or company often develop their own design language. This is a way of ensuring several things:

  • Software developers will be able to focus on what they need to get done, and don't need to think about the design of the UI
  • The customers will be able to get used to the interface and not suddenly expect things to change between applications or products.

Examples of design languages

The most obvious design languages are:

  • Apple's Aqua UI
  • Google's Material UI
  • Microsoft's Fluent Design

Skeuomorphism vs flat designs

  • Prior to Apple making the change in iOS 7 (2012), all designers followed a skeuomorphic pattern.
  • In 2012, there was a shift to flatter interfaces. These are much easier to build, more colourful but less visually appealing and less obvious.

Mr Incredible. discovers flat icons

Answer the questions on design language in the worksheet.

Task

Building a good user interface

  • There are some rules we need to obey when designing our user interfaces.
  • These rules help us make the user experience as perfect as possible.

Keep the user interface consistent

  • It seems obvious, but when you are building a digital media products such as a website, keep the user interface and experience similar between different webpages.
  • If one page has the search bar at the bottom, then every other page on the website should do this too. 

Put things where the user expects them to be

  • Adhere to standards! Websites generally have the main search feature at the top right, the site links at the bottom and the site footer at the very bottom.

Use colour appropriately

  • Use colour as a separation/differentiation tool to separate elements of a user interface
  • But do not rely solely on colour for this job and do not overuse colours
  • Neutral colours work better for the job of separation that bright and bold colours

Good design

=

Good user experience

Wireframing

  • Wireframing tools exist to save us time in development. 
  • From the client a web developer will try to get a rough idea as to what the website should look like. They will then create a wireframe (or mockup) of the website that shows what the web developer thinks the website should look like and show it to the client.

Wireframing

The client can then decide if this is what they are looking for or not.

We all think differently. Using wireframe.cc, create a mockup website for any of the following:

  • A new social media platform
  • A multinational tech company
  • An information wiki
  • A school website

Task

Presentation Overview
Close
JB
User Interface Design
© 2020 - 2024 J Balfour
20:27 | 14-04-2024
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Widget Screen
Canvas Controls
Random Selector
Timer
Volume Meter
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
Help
!
Keywords
    DragonDocs Management
    Random selector
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      ×
      All slideshow files