bits & pieces: a systems approach to web design for brands
TRANSCRIPT
BITS&PIECES
A Systems Approach to Web Design for BrandsINDHIRA ROJAS
Bits & Pieces: A Systems Approach to Web Design for Brands
A little bit about me.
NY
SF
Altos de Chavon Dominican Republic-GRAPHIC DESIGN, AAS
ParsonsNew York-COMMUNICATION DESIGN, BFA
CCASan Francisco-DESIGN (INTERACTION), MFA
Bits & Pieces: A Systems Approach to Web Design for Brands
Brand Systemson the Web
Bits & Pieces: A Systems Approach to Web Design for Brands
Graphic standards are not new…
Source: Dan Rupert http://daverupert.com/2013/04/responsive-deliverables/
Source: Tim George, Flickrflickr.com/photos/timgeorge/sets/72157627210540947/
Bits & Pieces: A Systems Approach to Web Design for Brands
NASA Graphic Standards Manual and ApplicationsDanne & Blackburn New York, 1975
Source: thestandardsmanual.com
Bits & Pieces: A Systems Approach to Web Design for Brands
New York City Transit Authority Graphics Standards ManualMassimo Vignelli Unimark International New York, 1970
Bits & Pieces: A Systems Approach to Web Design for Brands
Documentation of the graphic standards allow the brand to scale.
Bits & Pieces: A Systems Approach to Web Design for Brands
The documentation of the system facilitates the consistent application of the visual identity.
Bits & Pieces: A Systems Approach to Web Design for Brands
The good, the bad and the ugly about the web design.
Bits & Pieces: A Systems Approach to Web Design for Brands
The speed of iteration will drive the design and development process.
Bits & Pieces: A Systems Approach to Web Design for BrandsIte
ratio
n
Speed
Informational Websites
Editorial Content Websites
Web / MobileApps and Platforms
Bits & Pieces: A Systems Approach to Web Design for Brands
Building the System
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
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/
Source: https://dribbble.com/airbnb
Source: https://dribbble.com/caro
Bits & Pieces: A Systems Approach to Web Design for Brands
Modern FarmerIndhira Rojas, Matthew Cantonand Elizabeth Brown Design TheoremSan Francisco, 2013
Homepage Template
1240px 960px 500px
7
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.`
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
The Hidden Delights of Cranberries: Jam and More By Sarah Smith on January 9th, 2013
FOOD NEWS BLOG POST VIDEO
PLANTS AND ANIMALS
FOOD
FOOD
Related
NEWSFEATURES FOOD SHOPPLANTS AND ANIMALS CULTURE
PREVIOUS STORYHow to butcher a Pig in 10 steps
NEXT STORYChernobyl’s Newly Instated Wildlife Preserve
FOOD
Standard PostsThe 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.
Social Shares
HeroThis 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?
Minimized MenuThe global nav is condensed and shows the titles of the previous and next story.
Body ContentThere 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 TagsCategories are chosen from a predetermined group, and tags are manual. See page 18.
CommentsComments on the site are managed with Disqus.5
Homepage
Homepage Featured StoriesThis section of the homepage can be used to highlight 3 stories or a single story. See page 17.
Story - Small Featured ImageStories appear in chronological order in this section.
Sub NavigationCustom menu items set by tags. See page 17.
Story - Large Featured ImageHomepage images can be set to display larger for some stories. See page 20.
Things We LoveThese products are selected by the MF team. See page 29 for more information.
How To’sPosts with the tag “How To” will only appear in this section of the homepage.
SidebarThe 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.
Homepage Template Post Page Template
Bits & Pieces: A Systems Approach to Web Design for Brands
2. Build piece by piece. Determine overall principles.
Source: Codecademy Blog / Brand Newhttp://www.codecademy.com/blog/141-codecademy-reimagined
Bits & Pieces: A Systems Approach to Web Design for Brands
Codecademy
PentagramNew York, 2014
3. Create the library. Take it as far as you can.
Bits & Pieces: A Systems Approach to Web Design for Brands
Source: Material Design http://www.google.com/design/spec/material-design/introduction.html
Bits & Pieces: A Systems Approach to Web Design for Brands
Google: Material Design
Google, IncMountain View, 2014
Bits & Pieces: A Systems Approach to Web Design for Brands
Mailchimp
The Rocket Science Group Atlanta, GA
Source: Salesforce1 Guidelineshttp://sfdc-styleguide.herokuapp.com/
Bits & Pieces: A Systems Approach to Web Design for Brands
Salesforce1
Salesforce UX TeamSan Francisco, 2013
Version 1.0 - 11.18.2013 Salesforce1 App Guidelines - © Copyright 2013 Salesforce.com 4
Custom ObjectsCustom 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
What you get, out of the box:
Navigation Menu presence in Recent section, based on Search activ-ity (for the initial Salesforce1 release this may change over time).
Related List Cards - Custom objects can appear as related cards on parent objects
Ability to add custom cards (Visualforce, Lookup, Related) to the Related View of the record..
Implementation Effort: LowEvery custom object that is a part of an app, or is available in your org can appear in the Recent section.
MAIN NAVIGATION LIST VIEW RECORD VIEW
Version 1.0 - 11.18.2013 Salesforce1 App Guidelines - © Copyright 2013 Salesforce.com 7
AppsApps 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 HighFlexible 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
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.
Bits & Pieces: A Systems Approach to Web Design for Brands
ConvergeDivergeCreate
ChoicesMake
Choices
Bits & Pieces: A Systems Approach to Web Design for Brands
The design consistency of the web components willinfluence the credibility and authenticity of the site.
Bits & Pieces: A Systems Approach to Web Design for Brands
Designing and documenting the system enables rapid scale.
Bits & Pieces: A Systems Approach to Web Design for Brands
Who’s responsible for identifying the system?
Bits & Pieces: A Systems Approach to Web Design for Brands
Thank you.@redindhi