Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Bits & Pieces: A Systems Approach to Web Design for Brands

595 visualizaciones

Publicado el

This presentation is a compilation of personal work, resources and inspiration on systems design / branding for the web. It was prepared for the How Interactive Design Conference happening in San Francisco, Nov. 2014.

Publicado en: Diseño
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Bits & Pieces: A Systems Approach to Web Design for Brands

  1. 1. A Systems Approach to Web Design for Brands INDHIRA ROJAS BITS &PIECES
  2. 2. Bits & Pieces: A Systems Approach to Web Design for Brands A little bit about me.
  3. 3. NY SF
  4. 4. Altos de Chavon Dominican Republic - GRAPHIC DESIGN, AAS Parsons New York - COMMUNICATION DESIGN, BFA CCA San Francisco - DESIGN (INTERACTION), MFA
  5. 5. Bits & Pieces: A Systems Approach to Web Design for Brands Brand Systems on the Web
  6. 6. Bits & Pieces: A Systems Approach to Web Design for Brands Graphic standards are not new…
  7. 7. Source: Dan Rupert http://daverupert.com/2013/04/responsive-deliverables/
  8. 8. Bits & Pieces: A Systems Approach to Web Design for Brands NASA Graphic Standards Manual and Applications Danne & Blackburn New York, 1975 Source: Tim George, Flickr flickr.com/photos/timgeorge/sets/72157627210540947/
  9. 9. Bits & Pieces: A Systems Approach to Web Design for Brands New York City Transit Authority Graphics Standards Manual Massimo Vignelli Unimark International New York, 1970 Source: thestandardsmanual.com
  10. 10. Bits & Pieces: A Systems Approach to Web Design for Brands Documentation of the graphic standards allow the brand to scale.
  11. 11. Bits & Pieces: A Systems Approach to Web Design for Brands The documentation of the system facilitates the consistent application of the visual identity.
  12. 12. Bits & Pieces: A Systems Approach to Web Design for Brands The good, the bad and the ugly about the web design.
  13. 13. Bits & Pieces: A Systems Approach to Web Design for Brands The speed of iteration will drive the design and development process.
  14. 14. Bits & Pieces: A Systems Approach to Web Design for Brands Iteration Speed Informational Websites Editorial Content Websites Web / Mobile Apps and Platforms
  15. 15. Bits & Pieces: A Systems Approach to Web Design for Brands Building the System
  16. 16. Bits & Pieces: A Systems Approach to Web Design for Brands 1. Think in components, from basic to complex. “We’re not designing pages, we’re designing systems of components.” —Stephen Hay
  17. 17. Bits & Pieces: A Systems Approach to Web Design for Brands Atomic Web Design Framework Brad Frost Source: http://bradfrost.com/blog/post/atomic-web-design/
  18. 18. Source: https://dribbble.com/airbnb
  19. 19. Source: https://dribbble.com/caro
  20. 20. Bits & Pieces: A Systems Approach to Web Design for Brands Modern Farmer Indhira Rojas, Matthew Canton and Elizabeth Brown Design Theorem San Francisco, 2013
  21. 21. Homepage Template
  22. 22. 1240px 960px 500px
  23. 23. Standard Posts The standard template can accommodate short posts and longer artciles. There are several standard post templates that allow for options such as video and slide shows. Homepage Template Post Page Template The Hidden Delights of Cranberries: Jam and More By Sarah Smith on January 9th, 2013 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis tristique venenatis. Quisque facilisis congue leo, vel ultricies velit pellentesque nec. Nunc imperdiet mi id dui porttitor id condimentum massa scelerisque. Vivamus pellentesque, sem blandit gravida aliquet, sem lorem iaculis nisi, eu auctor lorem mi vitae sem. Vivamus cursus adipiscing libero, a tempus dolor commodo non. Curabitur tempor dolor quis ipsum condimentum et semper sapien mattis. Aliquam blandit, mauris non cursus posuere, purus massa volutpat arcu, eu commodo ante justo ut risus. Suspendisse congue interdum magna, tincidunt tempus urna varius nec. Fusce est odio, eleifend et cursus et, convallis sed felis. Vestibulum et ante nec eros dapibus fringilla vitae sed orci. Cranberries can be used in various ways, including canned for jams, and frozen until you are ready to consume them. PHOTO BY JOHN SMITH Nulla erat ipsum, gravida nec cursus quis, pellentesque facilisis urna. Cras viverra ante quis sapien feugiat vestibulum. Nunc massa nisi, ullamcorper quis placerat rutrum, pellentesque vel dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum libero id libero dignissim iaculis. Praesent laoreet molestie metus ac gravida. Suspendisse at sodales metus. Vestibulum a mauris vitae quam luctus eleifend ac et ante. Donec aliquam, arcu ut volutpat mattis, risus nisl eleifend justo, pretium fermentum lorem massa non diam. Morbi aliquet urna eget ipsum commodo vehicula. Aliquam eget risus ligula. Aenean leo nisl, rhoncus ac bibendum at, congue vel ante. Nulla sollicitudin nisl et velit blandit ut posuere dolor fringilla. Aliquam a ultricies nisl. Vestibulum nisi dui, faucibus vitae venenatis a, consequat. Nulla erat ipsum, gravida nec cursus quis, pellentesque facilisis urna. Cras viverra ante quis sapien feugiat vestibulum. Nunc massa nisi, ullamcorper quis placerat rutrum, pellentesque vel dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum libero id libero.` FOOD NEWS BLOG POST VIDEO PLANTS AND ANIMALS FOOD Related FEATURES NEWS FOOD PLANTS AND ANIMALS CULTURE SHOP PREVIOUS STORY How to butcher a Pig in 10 steps NEXT STORY Chernobyl’s Newly Instated Wildlife Preserve Minimized Menu The global nav is condensed and shows the titles of the previous and next story. Social Shares Hero This is selected while creating a post. See page 34. Standard posts can have various types of heros, depending on the Template used. Hero: Example No Hero: What Chicken is Right? Body Content There are many ways to customize content. The first is to select a specific template. There are hero templates (seen above) as well as other options: Infographic: Example List with Images: Example Featured and Sponsored: Stories that have advertising partners. See Shortcodes, pages 41-67, for more options. Categories and Tags Categories are chosen from a predetermined group, and tags are manual. See page 18. Comments Comments on the site are 5 managed with Disqus. Homepage Sub Navigation Custom menu items set by tags. See page 17. Homepage Featured Stories This section of the homepage can be used to highlight 3 stories or a single story. See page 17. Story - Small Featured Image Stories appear in chronological order in this section. Story - Large Featured Image Homepage images can be set to display larger for some stories. See page 20. Things We Love These products are selected by the MF team. See page 29 for more information. Sidebar The sidebar appears on the homepage and category pages. It has the following widgets: Subscribe Today: Links to magazine subscription. Issue thumbnail can be changed in the widgets section. What We’re Reading: Links can be set in the widgets section. Most Read: Stories with the most views from the last day. How To’s Posts with the tag “How To” will only appear in this section of the homepage.
  24. 24. Bits & Pieces: A Systems Approach to Web Design for Brands 2. Build piece by piece. Determine overall principles.
  25. 25. Bits & Pieces: A Systems Approach to Web Design for Brands Codecademy Pentagram New York, 2014 Source: Codecademy Blog / Brand New http://www.codecademy.com/blog/141-codecademy-reimagined
  26. 26. Bits & Pieces: A Systems Approach to Web Design for Brands 3. Create the library. Take it as far as you can.
  27. 27. Bits & Pieces: A Systems Approach to Web Design for Brands Google: Material Design Google, Inc Mountain View, 2014 Source: Material Design http://www.google.com/design/spec/material-design/introduction.html
  28. 28. Bits & Pieces: A Systems Approach to Web Design for Brands Mailchimp The Rocket Science Group Atlanta, GA
  29. 29. Bits & Pieces: A Systems Approach to Web Design for Brands Salesforce1 Salesforce UX Team San Francisco, 2013 Source: Salesforce1 Guidelines http://sfdc-styleguide.herokuapp.com/
  30. 30. Custom Objects Custom Objects are the simplest Salesforce1 integration point. Any object associated with a Salesforce1 app will be available to users within Salesforce1 (as long as the users have permission to see it). When to use: ĭ You need to store data in Salesforce ĭ You want to attach your data to a parent record in Salesforce (e.g. - Accounts, Contact, Opportunities) ĭ You have limited development resources Version 1.0 - 11.18.2013 Salesforce1 App Guidelines - © Copyright Apps Apps are the most visible Salesforce1 integration point. They are shown within the Navigation Menu (subject to Admin control). When to use: You need a global hub that provides rich information across objects. What you get, out of the box: ĭ Flexible Page Apps (recommended) - Use Salesforce1 components and CSS, no styling required. - The Publisher button ( icon) can appear on the Flexible Page if publisher actions are defined within the XML. - Low implementation effort, simple to define using XML. ĭ Visualforce Apps - Complete control over the page layout, but you are responsible for visual appearance (which should comply with Salesforce1 visual standards) - The Publisher button is not available. - High implementation effort Implementation Effort: Low to High Flexible Page apps are simple to construct. Visualforce apps take significantly more effort, depending on the complexity of your app. NAVIGATION MENU FLEXIBLE PAGE APP VISUALFORCE APP MAIN NAVIGATION LIST VIEW Version 1.0 - 11.18.2013 Salesforce1 App Guidelines - © Copyright 2013 Salesforce.com 7
  31. 31. Bits Pieces: A Systems Approach to Web Design for Brands 4. Maintenance: As you add components, be mindful of trade-offs, but don’t be afraid to evolve.
  32. 32. Bits Pieces: A Systems Approach to Web Design for Brands Diverge Create Make Choices Choices Converge
  33. 33. Bits Pieces: A Systems Approach to Web Design for Brands The design consistency of the web components will influence the credibility and authenticity of the site.
  34. 34. Bits Pieces: A Systems Approach to Web Design for Brands Designing and documenting the system enables rapid scale.
  35. 35. Bits Pieces: A Systems Approach to Web Design for Brands Who’s responsible for identifying the system?
  36. 36. Bits Pieces: A Systems Approach to Web Design for Brands Thank you. @redindhi

×