Design Practice

Last updated: June 17, 2018

Introduction

Design is the creation of a plan or convention for construction, system or measurable human interaction. The direct construction of an object in graphic design is also considered to use design thinking.

Design philosophies are fundamental guiding principles that dictate how a designer approaches his/her practice. This is my research into creating my design philosophy.

Design Systems

A well-documented design system can play a huge part in success of any major design project. There are many systems with pro's and con's. Design systems include Component-Based Systems and Atomic Design.

Component-Based

Component-based systems are based on components or modules: re-usable chunks of code that are intended for multiple uses. It allows you to modify a module once and see it updated in every instance; have a more clear app architecture and have a unified development process. There are two common approaches when designing a website: Frameworks and Style guides.

Frameworks are very common and have been around for a while. They include Bootstrap, Materialize and Foundation.

Pro's
  • ready-to-use components
  • saves tons of time and effort
  • many fromwork styles are free and easy to find online
Con's
  • not for designers - no .sketch, .psd or other source files
  • deep customization requires a large amount of additional development effort and negates the very essence of a framework
  • for every element there will be 5 that you don’t need that slows things down

Style guides are built from scratch and you can quickly use components from it in your mock-ups.

Pro's
  • defines what styles to use and when
  • reduces questions about when a component should be used
  • not everything needs to be mocked up: ie a form page with error states
Con's
  • it is difficult to trace the inheritance of components
  • components often get implemented not in the intended way
  • it can drastically decrease re-usability of your design components

Atomic Design

Atomic design is a methodology that allows (and requires) you to describe and organize every component of your design system. This approach divides design components into 5 different categories.

1. Atoms:

These are the smallest building blocks; individual legos. These elements cannot be divided into smaller parts without losing any use (ex. a button needs a label or icon).

2. Molecules:

These are more complex entities consisting of several atoms. Molecules are already functional elements that could be put anywhere on the page and work on their own. Usually they need to be a part of an organism, to truly have a value.

  • Includes: notification toasts, data values (label: value), input fields with buttons
3. Organisms:

Truly functional parts of a page, made from groups of atoms and molecules. Many organisms function on their own, without relying on other elements on the page. They are usually huge components. Organisms can become quite sophisticated and have smaller organisms inside.

  • Includes: navigation, sidebars, forms, popups with lots of data
4. Templates:

Pages without real content. They combine organisms into a proper website layout.

5. Pages:

Once you have a template, you can create pages from it by adding content.

Buttons

Buttons are an essential element of interaction design. In atomic design buttons are atoms, the basic parts of UI.

Make buttons look like buttons
  • The more time needed for users to decode the UI the less usable it becomes
  • Mobile users are unable to use rollover to help identify interactivity
  • Don’t assume that something in your UI is obvious for your users
  • It is a good idea to use familiar designs for your buttons
    • Filled button with square borders
    • Filled button with rounded corners
    • Filled button with shadows
    • Hollow button with square or rounded corners
  • Don’t forget about the whitespace
Put buttons where users expect to find them
  • Don’t make users hunt for buttons
  • Use traditional layouts and standard UI patterns as much as possible
  • This can be tested with user stories and someone new to the design
It should be obvious what buttons do
  • Label buttons with what they do - inside or outside the button
  • Never designed a dialog box or form that consisted solely of the two buttons ‘OK’ and ‘Cancel’
  • This can be tested with user stories and someone new to the design
Properly size buttons
  • Make the most important button look like it’s the most important one
  • Make buttons finger-friendly for mobile users
    • MIT Touch Lab study found that averages for finger pads are between 10–14mm and fingertips are 8–10mm. This makes 10mm x 10mm a good minimum touch target size.
  • This can be tested with user stories and someone new to the design
Avoid using too many buttons
Provide visual or audio feedback on interaction