User Experience • Primary Purpose: Understand the user, their needs, and help make it easy for them to accomplish their tasks • Work: • Research, User interviews, etc. • Deliverables: • Personas • Flows • Wireframes • Prototypes
Personas • Definition! • A persona is a user-archetype, a fictional representation of target users designers and developers can use to help guide decisions about product, features, navigation, visual design. • Goals! • Establish the user (primary) for the product • Help clients/designers/developers to separate themselves from the project • Tools • Photoshop: Rastertastic, Action • InDesign: Master, Text Variables, Paragraph Styles • Example! • Lindsey.psd • Personas.indd
Wireframes • Definition! • A basic visual guide used in interface design to suggest the structure of a website and relationships between its pages. A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface. • Goals! • Information Hierarchy • Preliminary Layout (respect the visual/interface designer) • Initial testable product • Tools • Illustrator: Symbols • InDesign: Libraries, Master, Text Variables, Paragraph Styles • Example! • Service • Product
Prototypes • Definition! • An interactive representation of an application design created for testing and communication to clients and developers. • Goals! • Client Sign Off • Communication to Developer • Usability Study • Tools • HTML/CSS/JS • InDesign • AfterEffects (non-interactive) • Example! • Skullcandy
Visual Design • Primary Purpose: communication, stylizing, and problem-solving through the use of type, space, and image. • Work: • Visual Research • Deliverables: • Mood Board • StyleTile • Comps • Prototypes
Mood Board • Definition: • A mood board is a type of collage that may consist of images, text, and samples of objects in a composition of the choice of the mood board creator. • Goals: • Quick iteration • Determine overarching mood/feeling of visual design • Tools: • Illustrator • Example:
Style Tiles • Definition: • A mood board is a type of collage that may consist of images, text, and samples of objects in a composition of the choice of the mood board creator. • Goals: • Form common language • More structure than mood board • Design + context • Tools: • Photoshop • Illustrator • Examples:
Comps • Definition: • Visual compositions are the as close as possible to the final visual design. • Goals: • Define UI elements and layout • Full context • Tools: • Photoshop • Illustrator • Examples:
Prototypes • Definition! • An interactive representation of an application design created for testing and communication to clients and developers. • Goals! • Client Sign Off • Communication to Developer • Usability Study • Tools • HTML/CSS/JS • InDesign • AfterEffects (non-interactive) • Example! • Skullcandy