user interface (UI)
refers to graphical elements of your application
user experience (UX)
involves a person’s behaviors, attitudes, and emotions about using a particular product, system, or service
UX is
everyone’s responsibility
back-end code does have a direct influence on
the UX, may not directly involve UI elements
4 principles
- proximity (group related items together)
- alignment (every item should have visual connection with something else on the page)
- repetition (repeat some aspect of design throughout entire piece like color or bullet style)
- contrast (contrast various elements to draw reader’s eye)
wireframing practices and principles
low vs high fidelity
low fidelity and basic functions
- types of page elements used (nav bars, dropdowns)
- page content (links, graphics)
- general locations of page content
- static pages
- sketchy look and feel
high fidelity and dynamic features
- exact locations and spacing of page elements
- design elements and color scheme
- variables and interactive features (passwords, type-ahead)
as a design progresses, the focus shifts from
basic functionality to visual fidelity and dynamic features
explanation of increasing wireframe complexity
early stages low fidelity wireframe to get agreement on general page goals. when you move into detailed design you should increase interactive features and add visual fidelity to highlight unique features and add detail.
high flexibility, low complexity
storyboard/screen flow
storyboard/screen flow
whiteboard/sketch look with screen layout and flow
mid flexibility, mid complexity
low fidelity
low fidelity
basic building-block style page layout and key functionality
low flexibility, high complexity
high fidelity
high fidelity
detailed visuals with realistic end-user experience and rich interactions
benefits of wireframing
- improves visual representation of website/application
- increases efficiency in website or app development
- accelerates user engagement
improve visual representation
- stakeholders are able to see functionality and not just read about it
- enables clearer communication by reducing the ambiguity of requirements
increases efficiency
- allows for quick changes that accommodate modifications large or small
- minimizes number of change requests
- allows for frequent demonstrations of functioning models
accelerates user engagement
- brings in non-technical stakeholders/users early on in design process to guide business decisions
- promotes collaboration and improves requirements elicitation
