UX Design

information architecture

The way an organization structures and organizes the information that is required by their employees and/or customers.

Visual Hierarchy

Using design techniques to carry the viewer's eye from one component to the next; helps the audience process information in design and what is most important

User-Centricity

Focusing on the user; collecting data/feedback

Consistency

use of the same accounting principles and methods from year to year within a company

hierarchy

information arch, visual hierarchy, important stuff easy to find

context

understand users

user control

The user is given a much higher degree of control over the scheduling of tasks in a real-time OS.

usuability

The degree to which a system is easy to learn and efficient and satisfying to use, over aesthetics,

-learnability

-efficiency

-memorability

-errors

-satisfaction

ease of navigation

users must be able to find what they are looking for in as few clicks as possible

-predictability

-simple

-dont overdo minimalism

-clear struct hierarchy

-consistent navigate

-manageable

-link homepage logo

-sitemap and navigation menu and search bars

sitemap

Overview of a web site and all the links and pages within it.

navigation menu

Provides a method for moving or navigating around a site. These can be on the left or right side margins or the top margin.

search bar

a search box integrated in a browser for doing query on a specific search engine

Responsive Web Design

An approach to web design aimed at crafting sites to provide an optimal viewing experience across a wide range of devices.

Adaptive Design

a process that adjusts content to the screen size of a device used to access a webpage

-combination of CSS and HTML

-media query

-fluid and flex layouts

-responsive images

-loading speed

Cascading Style Sheets (CSS)

A technology that allows greater style definition and formatting control of HTML elements. Formatting can be placed within the HTML or called remotely from an external style sheet. The part of a website template that controls the fonts, colors, and styles that appear when an editor identifies some text as a page heading, a paragraph title, or some other style.

Hyper Text Markup Language (HTML)

The standard markup language used to create web pages. It is written in the form of HTML elements consisting of tags enclosed in angle brackets (like ).

Media Query

Adaptable content rendering in response to conditions like screen resolution, css

Fluid Layout

A layout design in which element sizes are proportioned relative to the screen resolution.

flex layout

A layout model that is used to arrange items within a container.

Copyright Law

laws designed to protect intellectual property rights and to provide monetary rewards for inventiveness and hard work; protects works "fixed in any tangible form of expression"

Fair Use

The ability to use a small amount of copyrighted work without permission, but only in certain ways and in specific situations (schoolwork and education, news reporting, criticizing or commenting on something, and comedy/parody).

• purpose/character of use

-nature of copyrighted work

-amount of sustainability

-effect of use on potential market for value of work

UX Design Process

1. user research

2. analysis

3. design

4. prototype

5. user testing

role of UX design

good user experiences, saves time,

Pantone

a system for matching colors, used in specifying printing inks, expensive

CMYK (Cyan, Magenta, Yellow, Black)

the four ink colors used to create most process color printing

RGB (red, green, blue)

color model used to display color on computer monitors, televisions, and similar devices

RGBA

RGBA is a color coding system that was added later to CSS, based off the original RGB system, which provides for transparency levels. The last value specified is the A, and it stands for "alpha transparency". It supports a range from 0 to 1, where 0 is no transparency (solid color) and 1 is fully transparent (absence of any coloring). All decimal values between 0 and 1 designate some partial level of transparency, such as 0.4 being 40% transparent. Example: rgba(10%, 10%, 70%, 0.75) for a 75% transparent blue.

HEX UI design

short form of RGB, six digits

hues

colors

Triadic color scheme

Three colors equally distant from each other on the color wheel

monochromatic color scheme

Use of different tints, shades, & intensities of ONE color

Tetradic Color Scheme

Color Harmony that uses four colors in two complementary pairs. (Two warm, and two cool colors.)

complementary color scheme

Use of TWO colors that are directly across from each other on the color wheel

analogous color scheme

colors next to each other on the color wheel

Square color scheme

similar to the rectangle, but with all four colors spaced evenly around the color circle

split complementary color scheme

Uses three colors, one color with the two colors on each side of its complement

shade

Adding black to a color

Tint

Adding white to a color

tone

adding gray

color distribution

60-neutral bases

30-primary

10-secondary

Role of a UX designer

create good user experiences, save org's time money effort, adds profit

UX Design Process

1. user research

2. analysis

3. design

4. prototype

5. user testing

UX

user experience

UI

user interface

UX design

The practice of designing products, processes, services, events, and environments with a focus placed on the quality and enjoyment of the total experience, concerns the way that users interact with a product and focuses on the user's onscreen/offscreen experience

UX research

the systematic study of users to determine and better understand their needs, behaviors, motivations

Content Strategy

a plan that outlines what content is needed for a web project and when and how it will be created.

wireframing

Blueprints that define the layout and functionality of a website

prototyping

the process of building a model that demonstrates the features of a proposed product, service, or system

usability testing

Testing to determine the extent to which the software product is understood, easy to learn, easy to operate and attractive to the users under specified conditions.

accessibility

the analyzation of how well a product has been designed for a vast array of peoples; ensuring that a design is usable by as many people as possible, inclusive

Information Architect

clarifies the mission and goals of the site; assists in determining the functionality of the site; and is instrumental in defining the site organization, navigation, and labeling

interaction designer

Focus on designing the experience of a product and how it functions

UI designer

establishes look, feel, experience of a product from layout and placement to the visual look

product designer

a career relating to the design and creation of models for commercial products

Front-end Developer

Take the designs from UI and UX, and combine with the Interaction and Visual Designs

Tools: CSS, HTML, JavaScript

Deliver: Working website

Back-end Developer

A developer who focuses mainly on the server side of code for a web application. They are knowledgeable about databases, server internals, system administration and technologies used once a site reaches scale.

T-shaped designer

has an arsenal of skills and depth in 1 discipline but a breadth of experience across other disciplines

design thinking

Methodology used by designers to solve complex problems, and find desirable solutions for clients.

deliverables

Tangible, verifiable work products

Reports, presentations, prototypes, etc.

artifacts

concrete items produced by the designer, single source of truth, guides and specifications for implementation/ref

persona

fictional profile used to communicate and summarize user research from a group of users

empathy map

a graphical tool used to help you imagine things from a user's perspective

Quantitative survey

a survey in which findings are presented in numerical form, such as percentages and frequencies

Qualitative Research

informal research methods, including observation, following social media sites, in-depth interviews, focus groups, and projective techniques