Fundamentals of design

Line - weight, color, texture, style

Shape - geometric or organic

Form - 3d shape, layers and sense of place with shadow and perspective

Texture - real or implied

Balance - color, size, number | symmetrical vs asymmetric | rule of thirds

Branding and Identity

Every element works together to show what brand is about

Consistency - with a style guide possibly

• Logo - sharp, high quality
• Color - include some neutrals, don't vibrate or overwhelm
• images - signature color, subject, graphical style | authentic

Layout and composition

Think like a designer

• Proximity - show relationships of content with visual space
• White Space - negative space defines different sections
• Alignment - Consistency | arrange inside an invisible grid
• Contrast - create emphasis | color, size, style | Decide what elements you want the user to notice first
• Repetition - repeat or echo specific elements

Color

Hue - color

Saturation - intensity

Value - darkness to lightness

Color schemes:

Monochromatic - one color with different values

Analogous - colors next to each other

Complementary - opposite

Split complementary - opposite and split to left and right

Dos and Don'ts:

If colors vibrate, play with the value of one color

Every color sends a message - use some neutral

What is a user interface?

Three parts: user interface and content

Interface is any bridge connecting a user to content

The medium shapes the experience

UI - how it looks, surface and visual identity (design driven) / (tangible)

UX - how it feels, content engagement (user driven) / (propositional)

UI/UX develops from 4 areas

• Ideation
• UI or front end
• coding or back end (not touched in this course)
• UX or testing

All 4 areas interact to develop and tune a digital experience

Other connected areas

• marketing
• testing
• content development
• production
• upkeep & updates

Interface Conventions

Old fixed experiences (atm/calculator) have moved to transfixed screen based experiences. Now we have digital and physical conventions.

• Real world models (buttons)
• Learned behavior (conventions)
• Cause and effect (reaction)
• Consistency (systematic)
• Seamless (fast and easy) no unnecessary steps
• Immediate intuition (learn one you learn a whole set)
• Fulfillment (payoff and results)
• undo/redo (feel safe)

Blank screen we start with is NOT a blank slate - what is the user bringing to the interface?

Template vs Content

Template ≠ content.

• As content gets more complex, it may be a good idea to organize it in more of a template.
• When content is specific it may be a bad idea to use a template.

Retaining generic website functionality but modifying to take content into account is a standard way to go

You can take alternate approach - content specific design

Aesthetics & Functionality

How it looks vs how it works

Goal is to push these two factors into one - functionality and user interest

A brief 🕐

• Content
• Context
• Audience

Define what you are going to make - NON VISUAL

Example:

Content: A digital microscope

Context: Phone App

Audience: Amateur scientists

Brief: A digital microscope for amateur scientists on your phone

Understand every aspect of your project. Design and content.

Assignment Brief:

Content: Find vegan food for a roadtrip

Context: A desktop app

Audience: Vegan travel people

Brief: A desktop app where vegans/vegetarians can plan trips

Copy of Brainstorm with text

Look and feel

Style Frames and Mood Boards - envision the overall design direction

This is pre-commitment and pre-production and pre-spending money

Trying to visualize the invisible.

Broad color, typeface, imagery - also shapes and experience of actually using the app

This can be done visually and/or with small word pools - explore related words and phrases and put them together and mix and match to discover structure. This should all be done in multiple directions. What actions do each different look and feels do? Describe the whole app as a person or an agent performing actions.

• Language is a design tool to set mood and tone

Color and Shape

Start restricted and analyze cultural connotations. Each color creates an emotion - a pallet creates a mood. Some pallets come from real world and some are created. Color is relatively subjective.

Color also relates to context. Use and learn from existing associations. Make some items active and some passive. Show progression.

Shapes

Used in two primary ways:

Interface - functional

Design - more emotive and build up look and feel

Imagery

Content - Mood - Navigation

All three elements effect the others - there is no way to escape

Content:

• Contained - Print layout
• Immersive - fluidity, animation, games

Mood:

• Set a tone with photos or illustration
• Mood / lifestyle

Navigation:

• Recognizable
• Set the tone and expectation

Typography

content - interface - branding

Text is fast, accurate, economical, can represent unpresentable things

Great for representing complex, non-visual, concepts

Connotation + Individuality = branding | Ex: Logotype, swoosh, netflix-color, modular google system

Icons

Every app HAS to have an icon or symbol to recognize

An apps interface itself also has icons

An Icon shows us a visual of a thing, while a symbol does not look like the thing it represents. Icons are pictorial. Sometimes you want an icon, sometimes a symbol

Magnifying glass is used as both an icon (zooming) and symbol (searching)

Some GREAT examples also live in the middle ground (Apple, Scissors, Trash Can, Envelope)

What makes a good Icon?

• Communication (ideas + aesthetics)
• Functionality (technical)
• Audience (user understands)
• Recognition (saturation + simplicity)

Static to Active

Form - function - experience are all connected

How do you know how to interact?

• Build a predictable system that is easy to learn 100% of the time
• Make the system economical - more choices for less clicks and use visual hierarchy to have more choices for less on-screen real-estate. Empower the user - make them in control
• Expand on the system, then compact into hierarchy, repeat

Invisible and visible UI

• Simple/Direct
• Unambiguous
• Rapidly adoptable
• Familiar/predictable
• Logical

Cons of simple - BORING

Can you create value in the experience?

cons of experience - Obstruct content, dates, time-consuming, unnecessary

Does your audience care about speed or style? You have both - how do you weight it?

Composition and structure

Again this is content specific

User priorities should drive the layout. Start at a super high level, and dive into the details of each space. Make the app look like it actually works and handles edge cases. Every detail of every section should be dealt with recursively.

Pattern library

http://styleguides.io/examples

Points of interaction

familiar forms = fast forms

• size
• shape (function/label/screen)
• color (signifiers/system)
• dimension (modern drop shadow)
• system (logical placement)

https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/

https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556

Not Buttons

Abide by conventions that relate to the domain you are working inside - not just any convention

• shape
• scale
• contrast
• clarity
• economy

Micro decisions all contribute to the ultimate look and feel

Don't reinvent the wheel unless you have to - you can change the style of the wheel

Similar interaction - different micro decisions for style

When a micro decision is made look at how it impacts the ecosystem

State and changes

Simple and clean, but consider the contrast between each state. Should not really ever leave the family when changing states

• Recognition
• Confirmation
• Activation
• Rejection

Not everything has all 4 states

In mobile: the swipe replaces the click (as much as possible)

Making a whole from the parts

Hierarchy of content

What is important to the user? What is important to the client? What is NOT important to the user or the client?

Hierarchy of intention and hierarchy of function will hopefully match

1. What is the first thing a user sees
2. What is the first thing a user thinks
3. What is the first thing a user does
4. Repeat for the second thing and so on…

Articulate the problem and give structural shape to a solution.

Conventions and Expectations

Use conventions and create variables within them

On an app, everything is sequential

On an app - people understand that there are more things outside of the scope of a window

Structures and grids

When making a grid - define each property of the mathematical structure exactly. Ensure the system is modular. There can be variables within the system, but define limitations on those variables.

Again - this is a number of micro decisions that all make up the final product

Moving between screen sizes - you typically just adjust constant scale factors. Maintain the structural relationship between screen sizes. Design first for the screen your audience is most likely to use