Web Layout Basics

1. J 187 – Introduction to Interactive Media
Interactive Design

2. J 187 – Introduction to Interactive Media
Understanding the
Interactive
Design Process

3. J 187 – Introduction to Interactive Media
1
Discovery
Research
Competitive Analysis
Target Audience
Platform Support
Interactive Design Process

4. J 187 – Introduction to Interactive Media
2
Concepting
Interactive Design Process

5. J 187 – Introduction to Interactive Media
3
Wireframes
Interactive Design Process

6. J 187 – Introduction to Interactive Media
4
Responsive
Design Comps
Interactive Design Process

7. J 187 – Introduction to Interactive Media
Who Makes it Happen?

8. J 187 – Introduction to Interactive Media
Information Architect
The 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.

9. J 187 – Introduction to Interactive Media
Information Architecture

10. J 187 – Introduction to Interactive Media
User Interface Designer
We 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.​

11. J 187 – Introduction to Interactive Media
User Interface

12. J 187 – Introduction to Interactive Media
Visual Designer
Put 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.

13. J 187 – Introduction to Interactive Media
Visual Design

14. J 187 – Introduction to Interactive Media
Website Anatomy

15. J 187 – Introduction to Interactive Media
Container
Header (sticky?)
Navigation
Content
Footer
Negative Space - Padding
Parts of a Webpage
thepaintdrop.com
skinnyties.com
www.ourstate.com
magazine.good.is
packdog.com
starbucks.com
sasquatchfestival.com/

16. J 187 – Introduction to Interactive Media
Main
Global
Primary
Mobile
Hamburger Menus
Local
Subnav
2nd Tier
Page Level
Contextual
Related Links
Utility
Search, help, social
media, etc.
Many Types of Navigation
http://www.coca-colaproductfacts.com/en/homepage/#
http://www.ourstate.com/

17. J 187 – Introduction to Interactive Media

18. J 187 – Introduction to Interactive Media
WEB LAYOUT

19. J 187 – Introduction to Interactive Media
Rule of
Thirds

20. J 187 – Introduction to Interactive Media

21. J 187 – Introduction to Interactive Media
Old Models: Fixed and Fluid Width
• Fluid Changes with browser size
• Fixed is static size no matter the browser window
size

22. J 187 – Introduction to Interactive Media
Standard
Layouts
1 column
2 column
3 column

23. J 187 – Introduction to Interactive Media
1 column
fluid

24. J 187 – Introduction to Interactive Media
2 column
fluid

25. J 187 – Introduction to Interactive Media
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.

26. J 187 – Introduction to Interactive Media

27. J 187 – Introduction to Interactive Media
Responsive Design

28. J 187 – Introduction to Interactive Media
WIREFRAMES AND
PANELS

29. J 187 – Introduction to Interactive Media
what is a
wireframe?

30. J 187 – Introduction to Interactive Media
annotated
wireframes

31. J 187 – Introduction to Interactive Media
how it works

32. J 187 – Introduction to Interactive Media
wireframes and
color comps

33. J 187 – Introduction to Interactive Media
another example