bits & pieces: a systems approach to web design for brands

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


Brand Systemson the Web


Graphic standards are not new…

Source: Dan Rupert http://daverupert.com/2013/04/responsive-deliverables/

http://daverupert.com/2013/04/responsive-deliverables/

Source: Tim George, Flickrflickr.com/photos/timgeorge/sets/72157627210540947/


NASA Graphic Standards Manual and ApplicationsDanne & Blackburn New York, 1975

http://flickr.com/photos/timgeorge/sets/72157627210540947/

Source: thestandardsmanual.com


New York City Transit Authority Graphics Standards ManualMassimo Vignelli Unimark International New York, 1970

http://thestandardsmanual.com


Documentation of the graphic standards allow the brand to scale.


The documentation of the system facilitates the consistent application of the visual identity.


The good, the bad and the ugly about the web design.


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


Building the System


1. Think in components, from basic to complex.“We’re not designing pages, we’re designing systems of components.” —Stephen Hay


Atomic Web Design Framework Brad Frost

Source: http://bradfrost.com/blog/post/atomic-web-design/

http://bradfrost.com/blog/post/atomic-web-design/

Source: https://dribbble.com/airbnb

https://dribbble.com/airbnb

Source: https://dribbble.com/caro

https://dribbble.com/caro


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


2. Build piece by piece. Determine overall principles.

Source: Codecademy Blog / Brand Newhttp://www.codecademy.com/blog/141-codecademy-reimagined


Codecademy

PentagramNew York, 2014

http://www.codecademy.com/blog/141-codecademy-reimagined

3. Create the library. Take it as far as you can.


Source: Material Design http://www.google.com/design/spec/material-design/introduction.html


Google: Material Design

Google, IncMountain View, 2014

http://www.google.com/design/spec/material-design/introduction.html


Mailchimp

The Rocket Science Group Atlanta, GA

Source: Salesforce1 Guidelineshttp://sfdc-styleguide.herokuapp.com/


Salesforce1

Salesforce UX TeamSan Francisco, 2013

http://sfdc-styleguide.herokuapp.com/

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


4. Maintenance: As you add components, be mindful of trade-offs, but don’t be afraid to evolve.


ConvergeDivergeCreate

ChoicesMake

Choices


The design consistency of the web components willinfluence the credibility and authenticity of the site.


Designing and documenting the system enables rapid scale.


Who’s responsible for identifying the system?


Thank you.@redindhi

bits & pieces: a systems approach to web design for brands

Design

systems approach

systems of components

platformsbits pieces

mfabits pieces

webbits pieces

comcarobits pieces

systembits pieces

combits pieces