the grid: pitch book
TRANSCRIPT
-
7/30/2019 The Grid: Pitch Book
1/63
Bachelor o Technology in Visual Communications Senior Thesis Book
Department o Visual Communications: Art + Graphic Design
Farmingdale State College, State University o New York
t
jefmay
-
7/30/2019 The Grid: Pitch Book
2/63
v the grid
tableof contents
The Grid:ServiceDescription
1
2
VisualStrategy
2
14
CulturalRelevance
3
38
TargetAudience
4
50
Direct &PeripheralCompetition
5
60
AncilProdu
6
70
-
7/30/2019 The Grid: Pitch Book
3/63
vii the grid
executivesummary
MOST W
content
ocuses
Users ex
appropr
common
or a resrespons
eature
website
highligh
the mod
The Gridis a responsive
website to educate and
allow clients (small-medium
business owners) aged 35-44,
in partnership with designersaged 22-30, to learn about the
process of arranging content
on a grid, to learn why it is
important in terms of responsive
web design, and to learn the
real world economic/business
impacts and benefits.
-
7/30/2019 The Grid: Pitch Book
4/63
ix the grid
introduction
I ENJOY
applyin
design
requen
grid ee
them un
experiedesign,
project.
The Bos
where i
to the b
blogs su
and Six
o respo
designe
doing an
Design is my life. As a graphic
designer and problem solver,
over the past several years I have
worked with grids, typography,
and images to create beautiful,memorable, and powerful pieces
that resonate with my audience.
As a technology enthusiast, I love
working in website design and
development as well as interaction
design, for the infinite possibilities
and interactive experiences.
-
7/30/2019 The Grid: Pitch Book
5/63
2 the grid
the grid:service
description
1
-
7/30/2019 The Grid: Pitch Book
6/63
4 the grid
coreproduct
The core product, The Gridis
a direct response to the need for
education by designers to clients
about responsive design. This need
to educate clients about responsivedesign was exemplified by Erik
Runyon, who is the manager of
Interactive Development at the
University of Notre Dame. I had
the opportunity to speak with him,
where he expressed great interest
in The Grid, noting the need
for such a product.
Rem
dev
and
donOur
Apa
pro
clie
we
erik ru
univers
-
7/30/2019 The Grid: Pitch Book
7/63
6 the grid
THIS QUOTATION SHOWS THE NEED or
The Grid and or designers to educate clients about
responsive design and why it is important.
The Grid is a ully responsive website, consisting
o three major sections: Grid, Responsive Design,
and The Results. Each individual section is broken
up into subsections relating to its parent. These
three sections are grouped collectively into an
inormational tour, which the user (a small business
owner) would navigate through, learning what
responsive design is and the signicant benets it
oers to their business. The structure o The Grid is
intended to tell a story by building on inormation
that relates to the previous section. A key element
in the content strategy was the accessibility o the
inormation, where it is understandable and clear to
the target audience (small business owners), who are
generally not knowledgeable about the latest website
design techniques. Interactive demos, galleries, and
examples are provided within each page o the tour
inThe Grid
, resulting in a greater understanding
o the material. These demos are highly visual and
build rom previous demos/content. The website itsel
is consistent and organized, as content is placed
where a user would expect it. Top navigation menus
provide access to other sections in the site, and the
ooter provides an expanded menu to site content.
homepage
-
7/30/2019 The Grid: Pitch Book
8/63
8 the grid
section overview page
A section overview page precedes each section
o The Grid, through the use o a large photo that
captures the audience and centers their ocus. These
section overview pages provide a short introduction
to the content that is about to be presented and
set the tone o the upcoming content. Consistently
refecting how the homepage is built, the section
overview pages have a clear ocus and call-to-action:
to start the section o the tour. A secondary Browse
by Section link allows the users to select a specic
section or part o the tour according to their interest.
To drive traic to the Pro subscription landing page,
a banner at the ooter invites the user to start a ree
Pro subscription trial.
section pag
overview page
-
7/30/2019 The Grid: Pitch Book
9/63
10 the grid
level, The Grid provides a wealth o inormation,
but with a paid subscription, more content can
be unlocked rom urther inormation, exclusive
content, and member-only demos.
individual sections
The Grid is made up o the ollowing sections:
grid
This section is ocused on the importance o using
a grid to organize content. It emphasizes the need
o content anywhere, though primarily ocusing on
a website, to be logical, unied, and arranged in a
way that meets the expectations o the users. On the
Web Style Guide, this signicance was illustrated
by the ollowing: A balanced and consistently
implemented design scheme will increase readers
condence in your site. [...] Your rst step is to
establish a basic layout grid. As the use o a grid is
a key starting point o any website, it is placed rst
in the overall tour. Not only stating the impacts o
an eective grid rom a user-experience perspective,
this section also stresses the eects o a disorganized
website or a business. It has been observed over
the past several years that an individuals average
attention span is rapidly decreasing. In a 2012 report
by The Associated Press, the average attention span
was eight seconds. Incidentally, the average attention
span o a gold sh is 9 seconds . This statistic speaks
to the importance o making your content usable
and organized. From a business owners perspective,
not having an organized site could mean a potential
customer giving up and seeking out a competitor.
The section Grid is made up o the subsections
What Is It, which details what a grid is; How Is It
Used, which shows how a grid is used to present
inormation, and Why Use It, which discusses the
importance and need o a grid.
respon
This po
o respo
project b
Respons
adapt an
being vwill be
and the
a survey
believed
on scree
They ex
whiche
is made
Design,
How is
is used t
reasons
-
7/30/2019 The Grid: Pitch Book
10/63
12 the grid
resources
In addition to the three core sections, a resources
section includes a showcase o successul websites
that use a grid and are responsive. Users can
submit and comment on the examples. There is
also a collection o inormational videos, designed
to introduce and educate small business owners
about responsive design and use o grids. A page
containing external links to other material online is
also provided in the resources section.
gridsite
Alongside the educational components o The Grid
is Gridsite, an easy, straight-orward, and ast way to
build a responsive website. It simplies the process
o building responsive websites by oering the user
an array o pre-built templates as a starting point
or their website. Once a template is chosen and
a new site is set up, the user will have access to
the site editor interace, which will allow them to
drag-and-drop elements and assets rom a collection
o commonly used objects, including headlines,
subheads, buttons, images, and orms. The user will
be presented with a getting started tour as well, to
better introduce them to the Gridsite interace. A
separate panel would hold imported assets, such
as images and videos, which the user could drag
and drop onto the canvas. Every site created with
Gridsite is set on a grid. I needed, the number
o columns and gutter widths (the area between
column guides) can be customized by the user. The
use o a grid is required on Gridsite, where every
element
designe
importa
their pa
Gridsite
a uncti
and eo
resources
-
7/30/2019 The Grid: Pitch Book
11/63
14 the grid
visualstrategy
2
-
7/30/2019 The Grid: Pitch Book
12/63
16 the grid
brand attributes
THE VISUAL STRATEGY seen throughout all acets o
The Grid are consistent and engaging. The branding
is designed to capture the interest and attention
o the target audience, small business owners and
designers. In developing the visual strategy or TheGrid, a set o brand attributes were determined that
exempliy the core characteristics o the product.:
educational
It educates and demonstrates what responsive
design is and the benets it aords to a business.
valuable
It will show there are real world, proven
economic benets o using responsive design
to a business/organization.
focused
Inormation is developed or small business owners.
straightforward
Inormation is structured in a way that is easy to
understand and not containing technical jargon.
Most small businesses would not t care about the
underlying code, only the benets/impact.
forward thinking
It acknowledges that technology will improve over
time. The web as we know it will be used on more
and more devices, in some orm actors that we dont
even know about today. Focusing on responsive
design, which should work across every device
(not just smartphones/tablets) will result in sites
that should, in theory, be usable/ready or any new
device/orm actor that comes up. Tailoring sites to a
specic device type (i.e. mobile site) means that when
a new orm actor comes up, your site would not be
ready or it and will again need to be redesigned.
br
logo &
The logo
or The
imperat
associato the si
and resp
and init
made to
and the
only pa
drove th
final logo
-
7/30/2019 The Grid: Pitch Book
13/63
18 the grid
typogr
The typ
is a clea
caps ve
headlin
seri typ
Kulturis
Aaux P
though
on a gri
Helveti
logo explorations
color
the colo
modern
teal-blu
an accen
photog
Photogra
header i
image to
backgro
so that t
-
7/30/2019 The Grid: Pitch Book
14/63
20 the grid
initial sketches
top navigation
call to action
showcase link
play intro video
footer advertisement
footer navigation
homepage
section ove
init
-
7/30/2019 The Grid: Pitch Book
15/63
22 the grid
logo and top navigation
header image with title
sidebar to browse page
interactive demo
footer navigation
section page
initial sketches
ad
-
7/30/2019 The Grid: Pitch Book
16/63
24 the grid
wireframes
homepage
call to action
to start tour
subhead
showcase examples
video players
before & after example
footer
wir
homepage
header
browse s
page con
-
7/30/2019 The Grid: Pitch Book
17/63
26 the grid
initial prototypes
homepage
section overview & section page
init
-
7/30/2019 The Grid: Pitch Book
18/63
28 the grid
refined mockups
gr
homepage
overview page
browse by section
section page
gridsite
-
7/30/2019 The Grid: Pitch Book
19/63
30 the grid
the grid is everywhere
homepage on a desktop
homepag
-
7/30/2019 The Grid: Pitch Book
20/63
32 the grid
the grid is everywhere
tour overview on a desktop
tour ove
-
7/30/2019 The Grid: Pitch Book
21/63
34 the grid
the grid is everywhere
section page on a desktop
section
-
7/30/2019 The Grid: Pitch Book
22/63
36 the grid
introduction video
intr
initial storyboard sketches
digital s
-
7/30/2019 The Grid: Pitch Book
23/63
38 the grid
culturalrelevance
3
-
7/30/2019 The Grid: Pitch Book
24/63
40 the grid
real world statistics
PEOPLE EXPECT TO BE ABLE TO FIND what
they are looking or easily and quickly. From the
aorementioned report by The Associated Press,
the average attention span is decreasing over
time. The average attention span in 2012 was
8 seconds, compared to 12 seconds in 2000. The
average attention span o a gold sh is 9 seconds.
An additional point that was reported by The
Associated Press was that 17% o page views last
less than our seconds as well as that 4% o page
views last more than ten minutes . These statistics
clearly illustrate the need or a website to be
organized and coherent, which can be achieved
through the use o a grid.
As the public does more o their everyday
computing on tablets and smartphones, compared
to traditional desktops/laptops, there are ample
noted by
more sm
are chil
activate
babies b
continu
o outpa
report b
in 2013
way mo
this rep
or other
accessib
Alt
We
or
We
statistics and points that prove the need or
responsive design and or a website to be easily
accessible on any device. For a portion o the
population, their smartphone is their primary
computing device. It is how they access content
online and communicate with others. According
to the rm Prosper Technologies and their 2013
Prosper Mobile Insights Mobile User Surveys, 47.5%
o respondents stated that
I use my smartphone or allthe unctions, its my lie.
In that same study, it demonstrated the rapid
increase o smartphone ownership. In January
2012, approximately 48% o respondents owned a
smartphone, and by January 2013, that number
was at 55% . Even more surprising is a statistic
-
7/30/2019 The Grid: Pitch Book
25/63
42 the grid
A key benet o a responsive website is the
increased conversion and usage rates on mobile
devices, including smartphones and tablets. Luke
Wroblewski wrote about this in a 2013 article
entitled Data Monday: Impact o Responsive Designs,
where he provided a list o dierent companies and
the benets they reaped ater adopting responsive
website. Time Inc., or example, saw a 23% increase
in mobile usage, rom where it was previously .
These and countless other statistics demonstrate the
importance o responsive websites and the economic
benets or a business.
Aftehas
10Growreve
iPod
iPho
devi
luke w
-
7/30/2019 The Grid: Pitch Book
26/63
44 the grid
a person has the
attention spanof a gold fish.According to The Associated Press,
the average attention span in 2012was 8 seconds. The average attentionspan of a gold fish is 9 seconds.
1
o plasou
useon a
-
7/30/2019 The Grid: Pitch Book
27/63
46 the grid
there are more
smartphonesactivated dailywordwide thanare child births
1
smactperwo
-
7/30/2019 The Grid: Pitch Book
28/63
48 the grid
us
In a 2
feel t
quest
what
Th
Toas I
Fo
by 2013,mobile phones willovertake pcs as the mostcommon web access device
worldwide.
Although a growing number of websites and Web-based applications offer
support for small-form-factor mobile devices, many still do not. Websites not
optimized for the smaller-screen formats will become a market barrier for
their owners much content and many sites will need to be reformatted/rebuilt.
gartner inc.
-
7/30/2019 The Grid: Pitch Book
29/63
50 the grid
targetaudience
4
-
7/30/2019 The Grid: Pitch Book
30/63
52 the grid
personas
The Gridis intended for both
designers age 22-30 and
clients (primarily small business
owners) age 35-44. The client
wants to see how the use
of a grid and the inclusion of
responsive design will benefit
their business in a way that is
simple and direct. The designer
wants to encourage their clients
to adopt a responsive website
and persuade them of the
positive economic impacts.
Res
Wan
Dinesma
Afraof a
Shedesia de
-
7/30/2019 The Grid: Pitch Book
31/63
54 the grid
on their smartphone or tablet and requires them
to zoom in and pan around the page. Recently
she has taken an interest in redesigning her
current website and her designer recommended
she consider a responsive site that resizes across
multiple devices. Leslie is not technical and is
rustrated whenever she has to make sense o
new technologies. She wants new technology(responsive design) explained in a way that is
simple and easy to understand and she wants to
know why it is important. This lack o technical
knowledge and rustration with having to learn
about new technology online will be addressed
with The Grid, which will discuss it in a way that
is logical and understandable. The Grid will allow
Leslie to understand how a grid is used to organize
content in a way that better meets the needs o her
customers as well as responsive design. She will
see what it is and how it will positively impact her
business. She will learn about responsive designand see that this new technique has real value and
can be very protable or her restaurant. Free
Frusreco
Freqthe
Joe RWDbene
-
7/30/2019 The Grid: Pitch Book
32/63
56 the grid
can connect with other designs/developers and
have a greater understanding o what is happening
in his industry. Joe wants to create modern
websites that are usable and refect the ways in
which users are accessing the web today, whether
it be through a desktop/laptop, tablet, or smartphone.
He uses his iPhone to access content when he is
not at home or on his laptop, and is rustrated whenhe is orced to use a website that was designed or
a desktop on his phone. These experiences with
non-responsive sites drives his love o technology
and the possibility o creating a website which is
accessible on any device. In his reelance work,
he works with small businesses, and requently
recommends responsive websites. Oten he will
have to explain what responsive design is to a
client, usually older clients, explaining the benets
and importance o it. Most o his older clients are
resistant to a responsive site, as they do not see the
value or economic impact, but are instead concerned
about the added time and/or costs involved. Joe
dislikes having to always explain this to his
customers, and wants an easier way to show what
it is and the real world advantages. The Grid will
assist Joe in explaining what responsive design isto his clients, showing them that there are actual
advantages, and that is valuable through case
studies and statistics. Once the client is convinced
o the benets they will embrace it, become
interested, and seek a responsive site. Joe is then
able to create a website which works everywhere,
expand his portolio, and build or the modern web.
Wed
Alw
Curmob
Beesee
Doeunne
LisaRWDShebene
-
7/30/2019 The Grid: Pitch Book
33/63
58 the grid
cl
Why
WhyWhy
with undea gri
eatures photos o the venue, wedding package
inormation, videos, and open house details as
well as a Facebook page which she uses to post
updates about her business. Her current website is
not optimized or mobile devices (smartphones and
tablets). Although she has been asked about this by
some o her past customers, Lisa does not see the
need or it nor does she see any monetary benet odoing so. Her goals are to remain protable, expand
her business, and reach out to new couples; she does
not want to spend money on a technology that she
eels is not necessary to the nancial growth o her
business. Using The Grid, Lisa will learn about and
see the commercial advantages that a responsive
design aords to her business and why it matters,
backed up by real studies and statistics. She will
recognize that a new responsive website does not
just look good, but it can also be very protable.
Given that she is trying to spend her money in a
way that helps her business, a responsive websitehas the potential to do just that, which Lisa will
learn about through her use o The Grid.
-
7/30/2019 The Grid: Pitch Book
34/63
60 the grid
competition
5
-
7/30/2019 The Grid: Pitch Book
35/63
62 the grid
an overview
THERE ARE MANY DIRECT competitors to The Grid,
which oer inormation and demonstrations about
responsive design. The website This Is Responsive
presents live demonstrations o responsive web
design and shows dierent ways o organizing
content including grids, tables, navigation menus,
videos, and orms. It also provides a list o links to
other sites online about responsive design. Another
competitor, Media Queries, ocuses on showcasing
responsive websites. It has screenshots o each
eatured site showing how it looks at various
browser widths, rom desktop to smartphone.
Responsive Design Responsively Illustrated
provides a way to visualize break points in
responsive design and the ways that a site changes
based on browser width. As the user resizes the
browser, the page changes rom desktop, to tablet,
to mobile. Additionally, designer and developer
John Polacek prepared a presentation What The
Heck Is Responsive Web Design?, detailing the
process involved with creating a responsive
website and a basic explanation o what it is.
Lastly, Responsivedesign.ca, which was created
by a digital agency, has basic inormation about
responsive design, a ew examples, additional
resources online, and a blog.
In addition to direct competitors, `also aces
peripheral competitors. Wee Nudge explains
dierent terms to clients, such as the old, spec
work, and wireraming amongst others. It
provides a short explanation and a set o links
explain
is a web
very tec
itsel as
Magazin
but is a
website
design,
is a tech
the late
product
Six Rev
blog, tha
apps, de
and oth
-
7/30/2019 The Grid: Pitch Book
36/63
64 the grid
This is ResponsiveA List Apart
MediaQueries
Resp Design,Resp Illust.
John Polacek
Responsivedesign.ca
Wee Nudge
Smashing Mag.
The Next Web
SixRevisions
sweet spot
designer focused
client focused
technical demonstration
A DIRECT COMPETITOR o The Grid is the client-
ocused website Responsivedesign.ca.
It explains the basic details o responsive web
design in a way that is less technical and
more understandable. The website itsel was
produced by an interactive design agency, Foster
Interactive, based in Toronto, Canada. Along
with a basic description o responsive design,
Responsivedesign.ca shows three well-known
examples o it including The Boston Globe, Barack
Obama, and Grey Goose. With this site, there is
more educational content about what responsive
design is that is written clearly the user will
have a better understanding about the theory o
responsive design. Though Responsivedesign.ca
exhibits some examples o responsive design in
use today, it does not oer any live examples or
demonstrations directly on their site. This website
does discuss the impacts o responsive design,
citing examples and statistics rom major research
groups such as IDC, comScore, and Pew Research.
Addition
geared
about co
CSS deb
The pri
not com
showca
only th
is and t
it is thr
competition matrix
this is
-
7/30/2019 The Grid: Pitch Book
37/63
66 the grid
occurring in the video. Additionally, The Grid will
eature live demos, which the user can interact
with, and test it or themselves on a variety
o devices, whether it is their desktop, laptop,
smartphone, and/or tablet. Discussing the business
impacts or responsive design and statistics related
to it are a key part o The Grid, where results
serve to prove its importance or a business. Also
included in The Grid is a showcase o many sites
which demonstrate successul use o a grid and/or
responsive design, compared to Responsivedesign.
ca which only had three examples. The Grid will
showcase and highlight great design, so that users
will see the potential and possibilities o choosing a
responsive design.
Another website which competes with The Grid
is This Is Responsive. Created by Brad Frost, this
site relies heavily on demonstrations, or what
it reers to as patterns. It also has a wealth o
resources, ranging rom dierent approaches, design
processes, inspiration, coding techniques, and grid
calculators. Overall, This Is Responsive is intended
or designers and developers who are interested
in creating responsive websites. It exhibits what
can be done and the potential that exists with
HTML5 and CSS3. Little is said about the impact
o responsive design, as the audience is assumed
to have some knowledge about what it is. This Is
Responsive provides some education, or some o
the examples it provides have a short explanation
about it, highlighting things to consider i using
this technique, and links to more inormation about
it elsewhere. For each, a link in the ooter allows
the user to view, edit, and preview the source
code o that particular demo. This Is Responsive
isnt technical in the way that the initial demo
is presented. Each demo is solely displaying the
technique and the user is encouraged to interact
with it to see how it is indeed responsive.
The tec
when th
access m
primari
and dev
The
thatjustalsothat
Wherea
about re
ocused
Grid con
design
Demos t
beneci
-
7/30/2019 The Grid: Pitch Book
38/63
68 the grid
articles, and columns about user-experience design,
typography, surveys, development, and design
processes content or designers/developers, by
designers/developers. Live demonstrations are
rare, though the author may present screenshots to
illustrate a point in the article. Pieces that discuss
more developer-related topics, such as HTML5,
CSS3, and APIs typically will have sample code
accompanying it with an explanation o what it
will achieve. Largely A List Apart is or designers
and developers; it is intended or people who are
genuinely interested in web design/development. wt
-
7/30/2019 The Grid: Pitch Book
39/63
70 the grid
ancillaryproducts
6
-
7/30/2019 The Grid: Pitch Book
40/63
72 the grid
the grid is promotedonline as well in print
THE ANCILLARIES and other promotional
material developed or The Grid are designed
to carry over the brand and the core message.
To better promote and market The Grid, a serieso ancillaries were developed. As The Grid
is primarily an online service, much o its
advertising appears online. An element o this is
advertisements placed on relevant websites such
as Inc. Magazine, The New York Times, Bloomberg
Businessweek, and Forbes. These advertisements
are strategically targeted to these websites
because they are websites that the target
audience, small business owners, will most likely
access. Social networking pages on Facebook
and Twitter are also means o communicating
and connecting with small business owners and
other users. Posts are intended to drive interaction
between users and The Grid.
Additional print-based ancillaries include
postcards sent to small business owners at their
place o business, with impactul statistics and key
inormation relating to the need to be everywhere.
The back o the postcard includes copy that will
engage the client to take the next step and sign
up or a ree trial o The Grid using the vanity
URL provided. advert
-
7/30/2019 The Grid: Pitch Book
41/63
74 the grid
postcar
A client handbook, which is designed to both market
The Grid and provide a condensed overview about
responsive design. This book includes sections,
such as What Is Responsive Design and Showcase
o Responsive Websites. The client handbook
also includes key statistics and acts relating toresponsive design and its importance or a business.
An event guide, containing inormation about
upcoming events at local businesses, sponsored by
The Grid, will also be distributed at local expositions.
advertisement in forbes
-
7/30/2019 The Grid: Pitch Book
42/63
76 the grid
the grid
in your
community
nyc event guidemayjuly 2013
findmoreevents
andregisteronlineat
events.gridresponsively.com
thewebis everywhere.isyourbusiness?
learnmoreatthegrid
gridresponsively.com
may 2013
june 2013 july 2013
futuretrendsinwebdesign
tuesday,may7,79pmoslocoffeeroasters,422e75thst.Fromsmarttelevisionsto5.5-inchsmartphones,what
isthefutureoftheweb?Whatcanyou,asa business
ownerexpect?JoinTheGridaswespeakaboutthe
futureanditsbusinessimpacts.
Free. Registeratevents.gridresponsively.com
geolocation+yourwebsite
wednesday,june12,89:30 pmthirdrailcoffee,240sullivanst.Wanttobetterreachyourcustomers?Didyouknow
yourwebsiteandadvertisingcantakeadvantage
oftheGPSinyourcustomerssmartphones?Inthis
session,learnmoreaboutthisandhowtogetstarted.
Free. Registeratevents.gridresponsively.com
e-commerceonmobiledevices:
whattoknow
thursday,july11,79pmostcaf,441e12thst.Isyouwebsitesshoppingcartmobile-friendly?
Doyouknowwheretobegin?Howshoppingonline
isdifferentonmobilethanondesktops?Whatyour
customersexpect?Atthissession,learnmoreabout
e-commerceonmobileandhowtoincreasesales.
Free.Registeratevents.gridresponsively.commonthlyopenforum
thursday,may23,79pmbluebottlecoffee,160berryst.
Haveaquestionabouttheweb?Curiousaboutanew
technology?Wanttoknowifthereisanythingelse
youshouldbedoingforyourbusiness?Needadvice?
Nowisyourturntoaskatourmonthlyopenquestion
andanswersession.
Free. Registeratevents.gridresponsively.com
monthlyopenforum
monday,june24,79pmbirchcoffee,5e 27thst.
Haveaquestionabouttheweb?Curiousaboutanew
technology?Wanttoknowifthereisanythingelse
youshouldbedoingforyourbusiness?Needadvice?
Nowisyourturntoaskatourmonthlyopenquestion
andanswersession.
Free. Registeratevents.gridresponsively.com
monthlyopenforum
tuesday,july29,79pmgroundsupport,399 wbroadway.
Haveaquestionabouttheweb?Curiousaboutanew
technology?Wanttoknowifthereisanythingelse
youshouldbedoingforyourbusiness?Needadvice?
Nowisyourturntoaskatourmonthlyopenquestion
andanswersession.
Free.Registeratevents.gridresponsively.com
Events sponsored by The Grid include
Future Trends in Web Design, which
discusses what is next in web design,
Geolocation + Your Website, which
discusses GPS in mobile devices, and
E-Commerce on Mobile Devices: What
to Know, which discusses the needor mobile-optimized online shopping
carts. A monthly question and answer
session, Monthly Open Forum, will
allow small business owners to
ask questions relating to the web,
technology, and their business.
online e
print event guide
-
7/30/2019 The Grid: Pitch Book
43/63
78 the grid
promotional &colleteral
materials
7
-
7/30/2019 The Grid: Pitch Book
44/63
80 the grid
the brand will be extendedthrough supporting collateral
A BRANDED NOTEBOOK is suited or both business
owners and designers, who will use it throughout
their daily lives. Accompanied with the notebook
is a combination pen/stylus, imprinted with the
logo o The Grid. This serves a dual purpose o being
used as both a pen as well as an electronic stylus
or mobile devices with capacitive screens, such as
tablets and smartphones. This stylus can be used
with note taking and sketching applications on most
smartphones and tablets. The inclusion o a stylus
speaks to how The Grid exists on not just desktops,
but tablets and smartphones.
Stickers serve as a way to promote the brand
externally as well, and can be applied to electronic
devices such as laptops, tablets, and smartphones.
Business cards are a traditional and trusted way o
giving contact inormation to potential customers
and clients.
business
notebook
-
7/30/2019 The Grid: Pitch Book
45/63
82 the grid
exhibitionmaterials
8
-
7/30/2019 The Grid: Pitch Book
46/63
84 the grid
the exhibition space for the gridis designed to highlight the key messages
THE SPACE IS INTENDED to tell a story and walk
the viewer through what The Grid is and what
it oers. There are a series o three hubs which
detail, each key area o the website. Each hub will
integrate content rom the websites section and
provide key statistics and cultural relevance. The
space is designed to drive movement throughout
the entire span o the exhibit. At each hub, there
will be a giveaway that will correspond with the
section. The exhibition space will end with a live
demonstration o The Grid website and an area
with the exhibition book, promotional materials,
and additional giveaways. The exhibition will
carry over the arrows ound in the rest o the
brand o The Grid and will incorporate the same
colors and typographic treatments.
postcard
The exhibition postcard or The Grid are intended
to draw someone in, by communicating the
tagline o The Web Is Everywhere and calls on
the viewer to visit the exhibit to nd out more
about it. The postcard is on brand and repeats the
arrows, typography, and color palette rom the
core visual strategy.
poster
The exhibition poster incorporates elements rom
the core brand, such as the typography, arrows,
and colors, while being generic enough or the
entire exhibition.
exhibitio
-
7/30/2019 The Grid: Pitch Book
47/63
86 the grid
the webis everywhere
the gridjeffreybetts
makeyourmark
seniorexhibition2013
exhibition datesMon 4/29 Fri5/3
opening receptionWed5/16Pm 8Pm
find out how to make it work for you
MAKE
YOUR
MARK
GROUP 1
ExhibitionDatesMon 4/29 Fri 5/3
OpeningReceptionWed 5/1 6PM 8PM
senior exhibition 2013
TheDepartmentofVisual Communications:
Art& GraphicDesignpresents
Admissionisfreeandthegalleryisaccessibletopersonswithmobilityimpairments.
Foradditionalinformation,pleasecall631-420-6118or631-420-2181.
Anexhibitionofproducts,campaignsandservices
developedbys tudentsgraduating fromtheSc hool
ofBusiness Baccalaureateprogramin Visual
Communications:Art &Graphic Design.Jeffrey Betts
Rudy Calderon
Frank Corrao
Patrick Flanagan
Ellen Gilles
Anne Marie Horan
Adam Joseph
Anthony Kondyra
Alyson Prete
Robert Wulff
MAKE
YOUR
MARK
senior exhibition 2013
makeyourmarktitle
contributedby rudycalderon.
posterdesignedbyjeffreybetts.
poster
postcard
pitc
Sh
are
Th
sm
lik
des
Wh
Th
is t
a g
Ho
typ
Wi
by
usi
-
7/30/2019 The Grid: Pitch Book
48/63
88 the grid
business &post-graduation
plan
9
-
7/30/2019 The Grid: Pitch Book
49/63
90 the grid
THE GRID WILL BE FINANCIALLY VIABLE through
a reemium model, which will encourage users
to upgrade or added benets. This reemium
model includes a ree account with most o the
unctionality as well as a pro account subscription,
which will cost approximately $10 per month. This
upgrade will unlock member-exclusive content and
demos. Additional videos and proessional advice
will also be oered with a pro subscription. The
pro subscription will also include a basic website
using Gridsite. This basic plan is a small sampling
o what is included with Gridsite, with limits on the
number o pages and eatures. An optional upgrade
is available, which will unlock every eature, oer
access to beta eatures, and allow or an unlimited
number o pages and assets. The basic plan is a
time-unlimited, eature-limited trial, with reminders
to upgrade to a paid Gridsite . The basic site plan
will only be available or users with an active
pro subscription.
In launching the nal site, The Grid will work
and partner with AIGA and IxDA to gauge interest
and support rom the design and development
community. Through these partnerships, The
Grid will seek grants and unding. The Grid will
also seek unding rom crowdsourcing platorms
such as KICKSTARTER or Indiegogo, where it will
pitch itsel to the web community or support.
An additional grant The Grid will seek is Design
Ignites Change.
To aid
instru
websit
remain
and ne
free vs pro subscription plan
free pro
Basic Content and Demos
Commenting and Sharing
Basic Gridsite Website
Demo Library
Live Bookmarks / Pop-Out
Advertising this s
Web Ho
Domain
Exhibiti
Exhibiti
Noteboo
Styluse
Busines
Stickers
Total
-
7/30/2019 The Grid: Pitch Book
50/63
92 the grid
feb 13
Cw
th
P
S
timeline
The rst phase o The Grid includes the initial
development and ideation o The Grid, which
began in late January 2013 to early February 2013.
In this stage, the basic concept was developed,
written about, and pitched. Over time, the concept
was urther rened and became more specic
through the use o group brainstorming sessions
and in-class presentations. By late February 2013,
a visual strategy and initial prototypes were
presented. These prototypes demonstrated the basic
fow o inormation on the website as well as the
responsive nature o it (how it adapts/resizes). Later
in March 2013, the prototypes were rened and
expanded to the three basic types o pages on The
Grid. With the rened prototypes, the branding was
also improved to better incorporate the arrows. Over
that next month, the website content was written
and nalized. The Grid will launch as a beta site in
May 2013, with the basic sections and demo video.
The second phase, which spans rom May 2013
to January 2014, is composed primarily o
development and establishing partnerships. Within
this timerame, the nal site will be launched and
nal. The Grid will establish partnerships with
local Chambers o Commerce and web designers.
These partnerships will help promote The Grid and
create a local community around the service. The
Grid will exhibit at small business expos, where
it will be spread and promoted to small business
owners. At these expos, local event guides will be
distributed to attendees and representatives rom
-
7/30/2019 The Grid: Pitch Book
51/63
94 the grid
The Grid will be stationed to explain what The Grid
is as a service as well as demonstrate Gridsite.
In the third stage in the development o The Grid,
rom January 2014 to January 2015, new eatures
will be added to the core website and new eorts
will be made to grow the community around The
Grid in order to increase interaction. A rst step in
this process is the addition o social and sharing
eatures, including new commenting eatures,
blogs, and member proles. The Grid will then
begin to hold Google Hangouts, which will generate
discussion amongst designers and business owners,
allowing them to speak collectively about topics
that are important to them and pose questions.
Along with the addition o Google Hangouts,
The Grid will continue to expand its reach by
establishing partnerships with hosting companies
to better promote and distribute the service. Later,
it will reach out to merchants and banks, such as
AMEX Open Forum, who will promote the service to
small business owners in their articles, media, and
blog posts.
amex ope
-
7/30/2019 The Grid: Pitch Book
52/63
96 the grid
event recap
I attended WebVisions NYC at the Theater or the
New City. The event was held Feb. 27 to March 1
I attended on Feb. 27 and March 1. Overall the two
days I attended were very inormative, interesting,
and helpul. I learned about many new tools and
technologies as well as new ways to approach how
I work. Wednesday was made up o two sessions
and Friday was a series o sessions/keynotes.
The rst session Jason Cranord Teague: Building
Sites That Scale, was all about responsive design:
both in theory and actual code in practice. He
reviewed the need or responsive web design, the
basic idea behind it, where to start when creating
a responsive site, testing, best practices, client
considerations, and actual code. I ound out about a
new prototyping tool, Proty (exclusively or Fireox).
He stressed the importance o prototyping actual
sites, and not solely using Photoshop. In his words,
Photoshop is not reality.The second workshop Taking Content Everywhere,
was with Sara Wachter-Boettcher, where she spoke
about the need or eective, clear, and well-written
copy, across multiple devices. It was a complement
to the morning session about responsive web
design. In this workshop, we were split into groups
and worked on dierent activities revolving around
optimizing content.
day one at
-
7/30/2019 The Grid: Pitch Book
53/63
98 the grid
supporting media
Gartner HighlightsKey Predictions for ITOrganizations and Users in2010 and Beyond
By 2014, over 3 billion o the worlds adult population will
be able to transact electronically via mobile or Internet
technology. Emerging economies will see rapidly rising
mobile and Internet adoption through 2014. At the same
time, advances in mobile payment, commerce and banking
are making it easier to electronically transact via mobile
or PC Internet. Combining these two trends creates a
situation in which a signicant majority o the worlds
adult population will be able to electronically transact by
2014.
Gartner research predicts that by 2014, there will be a 90%
mobile penetration rate and 6.5 billion mobile connections.
Penetration will not be uniorm, as continents like Asia
(excluding Japan) will see a 68% penetration and Arica
will see a 56% mobile penetration. Although not every
individual with a mobile phone or Internet access will
transact electronically, each will have the ability to do so.
Cash transactions will remain dominant in emerging markets
by 2014, but the oundation or electronic transactions will be
well under way or much o the adult world.
By 2015, context will be as infuential to mobile consumer
services and relationships as search engines are to the
Web. Whereas search provides the key to organizing
inormation and services or the Web, context will provide
the key to delivering hyperpersonalized experiences
across smartphones and any session or experience an end
user has with inormation technology. Search centered
on creating content that drew attention and could be
analyzed. Context will center on observing patterns,
particularly location, presence and social interactions.
Furthermore, whereas search was based on a pull o
inormation rom the Web, context-enriched services will,
in many cases, prepopulate or push inormation to users.
The mos
will be a
telecom
and com
to becom
three ye
context p
ownersh
vendors
By 2013,
common
Gartners
PCs in us
the comb
equipped
and will
Mobile W
clicks on
Althoug
applicati
devices,
-
7/30/2019 The Grid: Pitch Book
54/63
100 the grid
Say Hello to the One-Size-Fits-All Website
You could drive yoursel crazy trying to build dierent
versions o your website to t every screen. Or you could
try this strategy.
Websites no longer live on the desktop. Your customers
are on their tablets and smartphones browsing the Web,
seeking inormation, oten with a transactional intent--
serving their mobile needs has become paramount.
The trouble comes, however, when you start thinking
about how best to build your mobile website. Which
devices will you design or? The ull-size iPad or the iPad
mini? The iPhone 5 or the massive Samsung GS III? Its
easy to see how this can become a never-ending problem.
Just try opening up your website on multiple devices and
see how easy it is to use.
You could go crazy building multiple versions o your
website to try to t every possible screen size--but chances
are, your site still wont look quite right on every device.
Or you could use whats called responsive Web design,
which is a technique that allows your website to adapt,
dynamically, to various screen sizes.
What is a responsive website?
Its one website that adapts to every device size, thus
eliminating the need to create a mobile-only website.
As screen sizes become smaller, a responsive website
reprioritizes content and modies its design on the fy to
meet the needs o users on any given device.
Whats dierent here is that most websites cannot adapt to
all screen sizes. They either appear in ull size on mobile
devices or redirect users to a website built specically or
mobile devices. The problem is that between desktops and
smartphones, a huge range o device sizes is neglected.
Responsive design ensures that every device displays
your content in a usable and visually appealing way,
without the need to create multiple versions o your site.
Why does it matter i I have a website that adapts to
various devices?
You could be thinking that because your website looks
just ne on an iPad that you have nothing to worry about.
Think ag
your web
thumbs
a list o l
them, th
tapping
Web orm
an iPad.
Smartphthey usi
oriented
most like
or quickl
providin
having a
Finally,
Google a
eliminat
needs o
-
7/30/2019 The Grid: Pitch Book
55/63
102 the grid
Design Grids for Web Pages
Consistency and predictability are essential attributes o
any well-designed inormation system. The design grids
that underlie most well-designed paper publications are
equally necessary in designing electronic documents
and online publications, where the spatial relations
among on-screen elements are constantly shiting in
response to the users input and system activity. When
used inappropriately or inconsistently, the typographiccontrols and graphics o web pages can create a conusing
visual jumble, without apparent hierarchy o importance.
Haphazardly mixed graphics and text decrease usability
and legibility, just as they do in paper pages. A balanced
and consistently implemented design scheme will
increase users condence in your site.
Even when the page grid is solid, good design depends on
creating a hierarchy o contrast and viewer attention, so
that a ew ocal areas o the page become entry points and
the other page materials are clearly secondary. Without
contrast management the design can look like many
random elements competing or the readers attention.
EducResp
A couple
Project M
to extend
o hours s
responsiv
the other
resized th
o the des
that they
than hav
window.
they not
Ater som
subseque
Our deve
consisted
The business logic of design grids and templates
Regular page gridsand the module and program
eiciency and consistency they createare the core
element o cost-eective design programs or larger
enterprises. One o the most amous and successul design
grid systems ever produced has been used by the National
Park Service or more than thirty years. Massimo Vignellis
Unigrid design system organizes and systematizes a huge
array o park service paper publications (and now onlinepd documents), rom single-page brochures to large park
maps and posters. Thanks to the strong, consistent Unigrid
design program, the National Park Service has saved
many tens o millions o dollars over the decades by not
reinventing brochure and map design with every new
print project.
The National Park Service design grid or print
publications. Thinking in a strategic, modular way about
design can save a ortune in the long run.
-
7/30/2019 The Grid: Pitch Book
56/63
104 the grid
The problem is centered around the act we really only
explained our mobile approach to clients i they happened
to ask about mobile. Its just one o the things we included
by deault because its the right thing to do. But now that
our approach is going to be a lot more visible, its time
we have the conversation with each client BEFORE we
enter the design stage. Its on us to explain how designs
will change and re-fow based on the window width.
With a little education about the recent advances in web
development, our clients will understand the benets o
this new approach aords their users. Our clients already
accept that the nal site will not look exactly the same in
every browser when compared to the mockup. We already
explain that older IE browsers wont get rounded corners,
drop shadows and some gradients.
Remember, were the ones that are reading the development
blogs, trying all the new tricks and or the most part
agree that RWD (when done right) is the uture o web
development. Our clients will most likely never read A List
Apart. Its up to us to be the educators and proessionals
we are, do whats best or our clients, and help them to
understand why were doing what were doing.
DataResp
As people
devices t
exploring
even sha
designs a
organizat
Time Inc
Page
cons
Mobi
Hom
The
ONeill Cl
65.7%
-
7/30/2019 The Grid: Pitch Book
57/63
106 the grid
Why Mobile Matters
When I initially proposed the idea o Mobile First over three
years ago, there were a lot o skeptics. The situation today
has a lot more people convinced that taking mobile seriously
matters. But just in case some people remain unconvinced,
heres a really vivid way o explaining the situation
But theres more. Nokia sold 200,000+ smartphones a day
(and 958k eature phones). RIM sold 143,000 Blackberries a
day at the end o 2011. This brings the total o smartphones
entering the World per day to about 1.45M devices again
compared to 317,124 births.
-
7/30/2019 The Grid: Pitch Book
58/63
108 the grid
supporting interviews
Erik Runyon
On Wednesday March 6, I had the opportunity to
interview Erik Runyon, who is the manager o Interactive
Development at the University o Notre Dame. It was
very interesting, inormative, and helpul or my project.From my time speaking with Erik, the most important
thing he emphasized is that The Grid must educate about
what responsive design is and why it is important. He
suggested that I look at and read lukew.com regularly,
especially an article about how conversion rates (as well
as revenue) increased with a responsive site, which is
very important to a small business owner. He sees a
need or this product and eels that education is very
important. Erik brought up that a responsive site, when
done correctly, shouldnt take any more time than a
normal site to build and to drop a vendor i they charge
more or a responsive site.
He spoke about mobile rst and the need or low
bandwidth: under 500KB, optimize images, miniy CSS
and Javascript, and use ImageOptim or optimizing
images). He suggested that I always read .net Magazine,
RWD Weekly, and Brad Frosts site or the newestinormation/trends in the web design/development elds
(especially responsive design). I should also ollow people
on Twitter to keep up and be up to date with the newest
developments.
He also looked at my section overview page prototype,
and mentioned that the three columns appear to be
getting too narrow as the window narrows. I should
consider starting to stack the three columns.
Mich
On Thur
opportun
J. Morga
architect
usable a
media.
Michael
spoke ab
educates
He emph
owners,
the bene
needs th
value o
principle
this). In t
grid to or
or a bus
less like
go to a co
-
7/30/2019 The Grid: Pitch Book
59/63
110 the grid
supporting research
The Grid: Designer Survey
the grid for designers / february 8, 2013 / 23 respondents
-
7/30/2019 The Grid: Pitch Book
60/63
112 the grid
The Grid: User Survey
the grid survey / february 5, 2013 / 40 respondents
-
7/30/2019 The Grid: Pitch Book
61/63
114 the grid
photography artdirection preparation
The photography direction or The Grid will result
in images that will be used on The Grid website as
well as photos that will be eatured in advertising/
promotional materials, including event guides,
handbooks, and general print advertisements.
A series o liestyle photos were taken which
captures a business person using dierent devices to
signiy the web being everywhere and spread out.
Preparation MaterialsiPad, iPhone, and MacBook Pro
ShotlistTwo shots taken indoors and one taken outdoors
o people using dierent devices.
Photo Team
Amanda Carley (Project Leader)
Lorenzo Luculano
Desiree Adikes
-
7/30/2019 The Grid: Pitch Book
62/63
116 the grid
bibliography
Betts, Jerey. The Grid Survey Survey. Surveymonkey. Web. 29 Mar. 2013.
Erik Runyon. Telephone interview. 6 Mar. 2013.
Gartner. Gartner Highlights Key Predictions or IT Organizations and Users in 2010 and Beyond. Gartner
Highlights Key Predictions or IT Organizations and Users in 2010 and Beyond. Gartner, 13 Jan. 2010. Web.
29 Mar. 2013.
Keser, Alhan. Say Hello to the One-Size-Fits-All Website. Inc.com. Inc.com, 27 Nov. 2012. Web. 29 Mar. 2013.
Lynch and Horton. Design Grids or Web Pages. Design Grids or Web Pages. Web Style Guide, 5 Mar. 2004.
Web. 29 Mar. 2013.
Michael J. Morgan. Telephone interview. 28 Feb. 2013.
Michael J. Morgan. Telephone interview. 28 Feb. 2023.
Prosper
InsightC
Runyon,
Mar. 201
Statistic
Wroblew
Web. 29
Wroblew
-
7/30/2019 The Grid: Pitch Book
63/63
118 the grid
acknowledgements
Pro. Lee or her constant support, eedback, involvement, and help, rom
week to week.
The guest lecturers or their insightul comments and eedback at each pitch:
Kayla Schaeer
Adrian Jank
Brandon Gerena
Sean King
Rachel Gogel
Pro. Pu & Eric Howton
Hanny Hindi
My entire senior project class or their advice and help along the way.
Each week we have shown that we are like a amily and it has been really
awesome. We have all joined together and supported each other every step
o the way during this semester.
My am
Friends
help an
Michae
Erik Ru
respon