the grid: pitch book

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


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


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.


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.


5/63

2 the grid

the grid:service

description

1


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


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


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


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


11/63

14 the grid

visualstrategy

2


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


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


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


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


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


17/63

26 the grid

initial prototypes

homepage

section overview & section page

init


18/63

28 the grid

refined mockups

gr

homepage

overview page

browse by section

section page

gridsite


19/63

30 the grid

the grid is everywhere

homepage on a desktop

homepag


20/63

32 the grid


tour overview on a desktop

tour ove


21/63

34 the grid


section page on a desktop

section


22/63

36 the grid

introduction video

intr

initial storyboard sketches

digital s


23/63

38 the grid

culturalrelevance

3


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


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


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


27/63

46 the grid

there are more

smartphonesactivated dailywordwide thanare child births

1

smactperwo


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.


29/63

50 the grid

targetaudience

4


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


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


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


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.


34/63

60 the grid

competition

5


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


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


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


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


39/63

70 the grid

ancillaryproducts

6


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


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


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.


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.


monthlyopenforum

monday,june24,79pmbirchcoffee,5e 27thst.





andanswersession.


monthlyopenforum

tuesday,july29,79pmgroundsupport,399 wbroadway.





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


43/63

78 the grid

promotional &colleteral

materials

7


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


45/63

82 the grid

exhibitionmaterials

8


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


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


48/63

88 the grid

business &post-graduation

plan

9


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


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


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


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


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,


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


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.


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%


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.


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


59/63

110 the grid

supporting research

The Grid: Designer Survey

the grid for designers / february 8, 2013 / 23 respondents


60/63

112 the grid

The Grid: User Survey

the grid survey / february 5, 2013 / 40 respondents


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


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


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

the grid: pitch book

Documents