Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Layout

584 views

Published on

Web Layout Basics

Published in: Design
  • Be the first to comment

  • Be the first to like this

Layout

  1. 1. J 187 – Introduction to Interactive Media Interactive Design
  2. 2. J 187 – Introduction to Interactive Media Understanding the Interactive Design Process
  3. 3. J 187 – Introduction to Interactive Media 1 Discovery Research Competitive Analysis Target Audience Platform Support Interactive Design Process
  4. 4. J 187 – Introduction to Interactive Media 2 Concepting Interactive Design Process
  5. 5. J 187 – Introduction to Interactive Media 3 Wireframes Interactive Design Process
  6. 6. J 187 – Introduction to Interactive Media 4 Responsive Design Comps Interactive Design Process
  7. 7. J 187 – Introduction to Interactive Media Who Makes it Happen?
  8. 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. 9. J 187 – Introduction to Interactive Media Information Architecture
  10. 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. 11. J 187 – Introduction to Interactive Media User Interface
  12. 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. 13. J 187 – Introduction to Interactive Media Visual Design
  14. 14. J 187 – Introduction to Interactive Media Website Anatomy
  15. 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. 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. 17. J 187 – Introduction to Interactive Media
  18. 18. J 187 – Introduction to Interactive Media WEB LAYOUT
  19. 19. J 187 – Introduction to Interactive Media Rule of Thirds
  20. 20. J 187 – Introduction to Interactive Media
  21. 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. 22. J 187 – Introduction to Interactive Media Standard Layouts 1 column 2 column 3 column
  23. 23. J 187 – Introduction to Interactive Media 1 column fluid
  24. 24. J 187 – Introduction to Interactive Media 2 column fluid
  25. 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. 26. J 187 – Introduction to Interactive Media
  27. 27. J 187 – Introduction to Interactive Media Responsive Design
  28. 28. J 187 – Introduction to Interactive Media WIREFRAMES AND PANELS
  29. 29. J 187 – Introduction to Interactive Media what is a wireframe?
  30. 30. J 187 – Introduction to Interactive Media annotated wireframes
  31. 31. J 187 – Introduction to Interactive Media how it works
  32. 32. J 187 – Introduction to Interactive Media wireframes and color comps
  33. 33. J 187 – Introduction to Interactive Media another example

×