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.

1. A Systems Approach to Web Design for Brands
INDHIRA ROJAS
BITS
&PIECES

2. Bits & Pieces: A Systems Approach to Web Design for Brands
A little bit about me.

4. NY
SF

5. Altos de Chavon
Dominican Republic
-
GRAPHIC DESIGN, AAS
Parsons
New York
-
COMMUNICATION DESIGN, BFA
CCA
San Francisco
-
DESIGN (INTERACTION), MFA

8. Bits & Pieces: A Systems Approach to Web Design for Brands
Brand Systems on the Web

11. Bits & Pieces: A Systems Approach to Web Design for Brands
Graphic standards are not new…

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

13. 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/

29. 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

54. Bits & Pieces: A Systems Approach to Web Design for Brands
Documentation of the
graphic standards allow
the brand to scale.

55. Bits & Pieces: A Systems Approach to Web Design for Brands
The documentation
of the system facilitates
the consistent application
of the visual identity.

56. Bits & Pieces: A Systems Approach to Web Design for Brands
The good, the bad
and the ugly about
the web design.

59. Bits & Pieces: A Systems Approach to Web Design for Brands
The speed of iteration
will drive the design and
development process.

60. Bits & Pieces: A Systems Approach to Web Design for Brands
Iteration Speed
Informational
Websites
Editorial
Content Websites
Web / Mobile
Apps and Platforms

61. Bits & Pieces: A Systems Approach to Web Design for Brands
Building
the System

62. 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

63. 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/

64. Source: https://dribbble.com/airbnb

65. Source: https://dribbble.com/caro

66. Bits & Pieces: A Systems Approach to Web Design for Brands
Modern Farmer
Indhira Rojas, Matthew Canton
and Elizabeth Brown
Design Theorem
San Francisco, 2013

71. Homepage Template

72. 1240px 960px 500px

74. 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.

78. Bits & Pieces: A Systems Approach to Web Design for Brands
2. Build piece by piece.
Determine overall principles.

79. 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

87. Bits & Pieces: A Systems Approach to Web Design for Brands
3. Create the library.
Take it as far as you can.

88. 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

108. Bits & Pieces: A Systems Approach to Web Design for Brands
Mailchimp
The Rocket Science Group
Atlanta, GA

119. 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/

131. 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

132. 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.

133. Bits Pieces: A Systems Approach to Web Design for Brands
Diverge Create
Make
Choices
Choices
Converge

134. 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.

135. Bits Pieces: A Systems Approach to Web Design for Brands
Designing and documenting
the system enables rapid scale.

136. Bits Pieces: A Systems Approach to Web Design for Brands
Who’s responsible for
identifying the system?

137. Bits Pieces: A Systems Approach to Web Design for Brands
Thank you.
@redindhi