/ notes

# 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

# Layout and composition

Think like a designer

# 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

All 4 areas interact to develop and tune a digital experience

Other connected areas

# Interface Conventions

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

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

# Template vs Content

Template ≠ content.

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 🕐

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.

# 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:

Mood:

Navigation:

# 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?

# Static to Active

Form - function - experience are all connected

How do you know how to interact?

# Invisible and visible UI

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

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

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

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