FBLA 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

Problem Statement

A part of a design brief that clearly and concisely identifies a client's or target consumer's problem, need, or want.

Competitive Analysis report

outlines the strengths and weaknesses of your competitors compared to those of your own business

Human/User-Centered Design

- Early focus on users (cognitive, behavioral, attitudinal characteristics) and tasks.

- Actual measurement: observe, record, analyze users' reactions and performance.

- Iterative design: find problems, fix them, test again.

- Users' involvement in process.

user research

Obtaining users' responses through questionnaires/surveys and interviews.

Full Stack Development

Developer who is comfortable working with both back-end and front-end technologies, data and visual sides of web design

multidisciplinary team

a group of professionals from different disciplines who function as a team but perform their roles independent of one another

universal design

the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design

Web Content Accessibility Guidelines (WCAG)

Developed by the Web Accessibility Initiative (WAI) to provide a universal set of standards promoting accessibility.

usability

The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.

journey map

A visualization of the process that a person goes through in order to accomplish a goal.

Generative Research

generate ideas at the start of a project/improvement

proto-persona

A sketch or simple description of a typical user based on the team's assumptions

touchpoints

anytime a user comes into contact with the product/rep on the product

formative research

assess performance of a prod thru lifestyle

summative research

assesses current state of a prod

visual design

the process of planning, arranging, and integrating visual elements of art to accomplish or address a particular purpose

-colors, lines, space, shape, typography, texture, alignment

Principles of Visual Design

unity, balance, dominance, hierarchy, scale, variety, contrast, proximity

unity

a sense of harmony between all elements in a design

balance

The distribution of elements in a design

hierarchy

ranking of elements

dominance

focus to a single element

scale

relative sizes of elements in a design

variety

varying elements in designs to avoid monotony

proximity

elements that are close to one another tend to be grouped together

Skeuomorphism

design concept of making items represented resemble their real-world counterparts

minimalism

style strips designs down to essentials, flat and material

flat design

minimalist design style that removes all stylistic textures imitating real world

material design

uses minimalistic shapes and colors, but also suggest "material" or physical layers, uses shadows and highlights to create depth in visual designs

opening tag

The tag that goes before the content it is describing on the website, for example

.

closing tag

The tag that goes after the content it is describing on the website, it includes forward slash, for example

.

empty element

An HTML object that does not have textual content; for example, (images),
(line breaks), or

---

(horizontal rule).

root element

The container element for all other elements in the document, goes before and after everything In an HTML document, the root element is .

Head tag

The first tag placed immediately inside the HTML tag. It provides code about the document, rather than actual page content. This includes the title, meta tags about the document, and access to resources like CSS, favicons or immediately used JavaScript.

title tag

This tag identifies the document title. Most browsers will display the title in the browse's title bar. The

body tag

info

This is the second and last tag nested directly inside the HTML tag, and contains the content of the page that will be rendered onscreen in the browser. It may also contain JavaScript code or links, typically at the bottom, for scripts that don't require immediate implementation.