Design Principles

1. What are design principles?

Design Principles are a set of considerations that form the basis of any good design or product.

2. Why use them?

Design Principles help teams with decision making. A few simple principles or constructive questions will guide your team towards making appropriate decisions.

3. Who uses them?

Organizations, individuals and product teams have benefited from writing and following their principles.

4. Purpose

The purpose of having design principles is to align people around what really matters.

We all have a shared sense of what’s important and true to us. Principles move us away from superficial things like what “feels right” and what “looks good” and gives purpose in the things we create.

5. Dieter Rams: Principles for Good Design

1. Good design is innovative
2. Good design makes a product/service useful
3. Good design is aesthetically pleasing
4. Good design makes a product understandable
5. Good design is unobtrusive
6. Good design is honest
7. Good design is long-lasting
8. Good design is thorough down to the last detail
9. Good design is as little design as possible

6. Accessibility

Accessibility is more than "anti-disability". Someone holding a baby is no different than someone with one arm. Someone struggling with glare from the sun is the same as someone with low/poor vision. Someone distracted by traffic is similar to someone with severe ADHD.

After years of meeting with accessibility experts, Chris Feix revised his 1999 UX "Chart of Awesomeness". It all starts with accessibility, because if everyone can't use it, what's the purpose?

Colors

The following color palette came directly from OG&E Design System and passes Adobe's accessibility testing.

Typography

Font

Poppins is a free-use Google font and works well in print and digital. It is very light weight and loads quickly on the web. This version contains the complete 897 character set, which includes the standard ISO Latin 1, Latin CE, Greek and Cyrillic character sets. Poppins was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.

<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700" rel="stylesheet">

Headings

Display titles

Specialized titles

Paragraphs

Images

Image

Circle Image

Raised

Circle Raised

Labels

Placeholder Text should be avoided. Labels should be outside and on top of the input field. Helper Text should be placed below the input field.

Button Types

There are several types of buttons for forms:

• Submit
  Submit is any button (Send, Apply, Submit, Login) that is the final step of a form. Submit buttons are blue (class="btn btn-primary").
• Next
  Next is any button (Next, Verify, Step 2) that leads to another step of a form. Next is often used in wizards. Next buttons are green (class="btn btn-success").
• Default
  Default is used for many actions. The most popular Default buttons are: Cancel, Upload, Advanced, and Settings. Default buttons are grey (class="btn btn-default").
• Link
  Link is any button (Forgot password, Create account, Not my account) that is not a core function of a form. Link buttons are not styled (class="btn").

Button Placement

Button Placement is based on the button type:

• Submit
  Submit is on the right (class="pull-right").
• Next
  Next is on the FARTHEST right (class="pull-right") If there is a Submit and a Next button on the same form, Next will be farthest right.
• Default
  Default is on the left.
• Link
  Link is usually under the main button row.