layout

J 187 – Introduction to Interactive Media

Interactive Design


Understanding the Interactive

Design Process


1 Discovery

ResearchCompetitive Analysis

Target AudiencePlatform Support

Interactive Design Process


2 Concepting



3 Wireframes



4 Responsive

Design Comps



Who Makes it Happen?


Information ArchitectThe Information Architect is responsible for website/user interface design and development, including layout, navigation and flow. This person will design, lead, and analyze end user needs and leverage the findings into site architectures, wireframes, and functional specification documentation for web sites and applications. The IA will collaborate closely with relationship managers, designers, and developers to create the best possible user interactions and task flows while being mindful of key branding and marketing concerns.


Information Architecture


User Interface DesignerWe are looking for a talented UI Designer to create amazing user experiences. The ideal candidate should have an eye for clean and artful design, possess superior UI skills and be able to translate high-level requirements into interaction flows and artifacts, and transform them into beautiful, intuitive, and functional user interfaces.


User Interface


Visual DesignerPut your beauty mark on the digital beauty map with this one. Sane hours (at a startup!), a warm friendly design team, a growing and well-funded company that's already highly lauded in the beauty world, and the opportunity to work on sexy web + mobile projects that delight and surprise the consumer - what could be finer? Visual design chops comprise 60-80% of the role, with a secondary focus on UX best practices, research, and prototyping. You'll do designs across web + mobile, talk to users, and create fabulous UI from scratch. Fashion/beauty experience a plus but not required. You just gotta love the space and be excited about it.


Visual Design


Website Anatomy


ContainerHeader (sticky?)

NavigationContentFooter

Negative Space - Padding

Parts of a Webpage

thepaintdrop.comskinnyties.com

www.ourstate.commagazine.good.is

packdog.comstarbucks.com

sasquatchfestival.com/

http://thepaintdrop.com/

http://skinnyties.com/

http://www.ourstate.com/

http://magazine.good.is/

http://packdog.com/

http://starbucks.com/

http://sasquatchfestival.com/


MainGlobal

Primary

MobileHamburger Menus

LocalSubnav2nd Tier

Page Level

Contextual

Related Links

UtilitySearch, help, social

media, etc.

Many Types of Navigationhttp://www.coca-colaproductfacts.com/en/homepage/#


http://www.coca-colaproductfacts.com/en/homepage/#



WEB LAYOUT


Rule of Thirds


Old Models: Fixed and Fluid Width• Fluid Changes with browser size• Fixed is static size no matter the browser window size


Standard Layouts1 column2 column3 column


1 column fluid


2 column fluid


New Models: Adaptive and Responsive Design

• Adaptive Design uses static layouts and chooses the appropriate one for the screen size that is detected. It uses separate layouts to change the styles based on the device.

• Responsive Design uses a single fluid layout that adapts to the size of the screen no matter what the target device is. It uses CSS Media Queries to change the styles based on the device.


Responsive Design


WIREFRAMES AND PANELS


what is a wireframe?


annotated wireframes


how it works


wireframes and color

comps


another example