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.
5. Altos de Chavon
Dominican Republic
-
GRAPHIC DESIGN, AAS
Parsons
New York
-
COMMUNICATION DESIGN, BFA
CCA
San Francisco
-
DESIGN (INTERACTION), MFA
6.
7.
8. Bits & Pieces: A Systems Approach to Web Design for Brands
Brand Systems on the Web
9.
10.
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/
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
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
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
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.
57.
58.
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/
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
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.
75.
76.
77.
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
80.
81.
82.
83.
84.
85.
86.
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
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108. Bits & Pieces: A Systems Approach to Web Design for Brands
Mailchimp
The Rocket Science Group
Atlanta, GA
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
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/
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