The document outlines the key building blocks and process for developing websites. It discusses the different types of websites, including corporate, marketing, e-commerce, and community sites. It emphasizes considering the audience and goals for the site. The typical development process involves research, architecture like wireframes, design, coding, quality assurance testing, and ongoing optimization. Guest speakers will discuss their experiences with website design and social media.

1. The Future of Advertising
Class #ADV 3041-01 | Spring 2009 | Mondays 1-6pm | Rm 416
Instructor: Tim Brunelle
SESSION #05
BUILDING BLOCKS: WEBSITES
Creative Commons Attribution & Non-Commercial License
Takashi Murakami “Panda” (2002). Photo by JPellgen via Flickr http://www.flickr.com/photos/jpellgen/2869482426/sizes/l/

2. Today:
1. Assignment #1 presentations
2. Guest speaker: Jamey Erickson
Sevnthsin
BREAK
3. Websites overview
BREAK
4. Guest speaker: TJ Shaffer
Popular Front
5. Next steps

3. Assignment #1
“Rethink your current portfolio and put it
entirely online.”
DUE: Monday, February 23
+ Use at least two of any tool/system you
want (flickr, YouTube, Extendr, Tumblr, etc.)
+ Include name, title, bio, contact info, tags,
descriptions, links. (Spell check!)
+ Customize as you see fit
+ Have a friend click through it for you
+ Be “Always in beta”

4. Assignment #1—Presentations
Five minutes per person
1. Which tools/systems did you employ?
2. Brief tour of everything (top line)
3. One specific example
+ Description
+ Tags
+ Links
4. What did you learn?

5. Website Design
Guest speaker: Jamey Erickson
http://sevnthsin.com

6. MCAD PRESENTATION
02.23.2009

7. WHERE’D HE COME FROM?
MCAD PRESENTATION
Mantorville, MN St. Paul, MN
2
WWW.SEVNTHSIN.COM PH: 612.236.1746 EM: YO@SEVNTHSIN.COM

8. WHERE’S HE NOW?
MCAD PRESENTATION
3
WWW.SEVNTHSIN.COM PH: 612.236.1746 EM: YO@SEVNTHSIN.COM

9. SEVNTHSIN APPROACH
MCAD PRESENTATION
HOW WE DO!
The Sevnthsin Process can be summed up in one simple word.
FLEXABILITY
(With SOME structure, that is...)
We have a loose process that each project flows through based on its needs throughout the project. Not every project
needs every component of this process, some projects require additional components we add as we go.
1. CLIENT RESEARCH
-Live/Learn/Love
2. GOAL/OBJECTIVE DEFINING
-Finding Purpose
3. SCOPING/TIMING
-What and by When?
4. BRAINSTORMING/CONCEPTING
-Idea Generating
5. IA/UX DEVELOPMENT
-What’s my Content and How’s it Work?
6. DESIGN PROCESS
-Making it Pretty
8. DEVELOPMENT PROCESS
-Making it Work
9. TESTING/DE-BUGGING
-Nothing Broken?
10. LAUNCH
-Let’s Party!
4
WWW.SEVNTHSIN.COM PH: 612.236.1746 EM: YO@SEVNTHSIN.COM

10. WHAT’S JAMEY DO?
MCAD PRESENTATION
WHERE DID MY DAY GO?
As the Founder of Sevnthsin, I wear many hats. My primary roles are
OWNER & CREATIVE DIRECTOR
(Being and ‘Owner’ is definitely a full time job)
My day often brings lots of different tasks/challeneges. Here’s a general breakdown of my day:
7:00-9:00am OWNER CATCHUP TIME
-Estimates/Proposals/Returning Emails from the night before
9:00-10:00am TEAM MEETINGS/DAILY KICKOFFS
-Doesn’t happen every day, but most days there’s some sort of “what’re we doing today”
chat or meeting depending on what day of the week it is.
10:00am-3:00pm DAILY WORKFLOW
-This is when I work on whatever the day requires. It may be concepting meetings,
it may be IA/UX Development, it may be presentations with a client, it may be New
Business related tasks.
3:00-4:00pm BI-WEEKLY CREATIVE REVIEWS
-Reserved time, twice a week for “Creative Reviews.” Anything that needs to be
run past me in either the design or development phase gets run through this meeting.
4:00-7:00pm ESTIAMTES/PROPOSALS/NEW BUSINESS RESEARCH
-The last part of my day is devoted to new business research, estimate and proposal
writing. This typically gets wrapped up the following morning for AM send out.
5
WWW.SEVNTHSIN.COM PH: 612.236.1746 EM: YO@SEVNTHSIN.COM

11. WHAT’RE WE DOING?
MCAD PRESENTATION
A LITTLE BIT OF WORK BY SEVNTHSIN
POS - NEVER BETTER ATMOSPHERE - YOU’RE SO UGLY
http://rhymesayers.com/neverbetter http://youresougly.com
OUR MESSAGE OF HOPE RED SHOE CLOTHING
http://ourmessageofhope.com http://redshoeclothing.com
TARGET - FACEBOOK - BACK TO COLLEGE TARGET - BOWIE BY DUFFTY
http://targetfacebook.com/200807 http://archive.sevnthsin.com/target/bowie
6
WWW.SEVNTHSIN.COM PH: 612.236.1746 EM: YO@SEVNTHSIN.COM

12. Major building blocks: Websites
Some issues for the creative person to
consider before starting work...
1. Types (i.e. What are we building?)
+ Corporate
+ Product/Service-specific (i.e. Marketing)
+ e-Commerce
+ Community
2. Audiences & Goals
3. Process/Production

13. Major building blocks: Websites
1. Types
+ Corporate
+ Product/Service-specific
(i.e. Marketing campaign)
+ e-Commerce
+ Community

14. Major building blocks: Websites
1. Types
+ Corporate
Insight: Today, a corporate site can take
almost any form, and often acts as a
portal to other kinds of sites.

15. *You might consider this a prototypical “corporate” website.

16. *But this is a “corporate” site, too—it’s got a different audience + goals.

17. *This is a corporate site as well.

18. *So is this one.

19. *And this one. “Corporate” sites take many forms.

20. Major building blocks: Websites
1. Types
+ Corporate
+ Product/Service-specific
(i.e. Marketing campaign)
Insight: These days, “campaign” sites
often exist within a corporate portal,
which requires thinking how specific
content connects (or doesn’t) with
corporate and/or e-commerce content.

21. *Note how the Nike+ “campaign” site fits inside the Nike corporate portal.

22. *Or this Routan marketing concept fits inside vw.com.

23. *This isn’t just a section for one product, it’s literally another portal.

24. *But sometimes clients, products or situations require a standalone site.

25. Major building blocks: Websites
1. Types
+ Corporate
+ Product/Service-specific
(i.e. Marketing campaign)
+ e-Commerce
Insight: Is it integrated with the rest of
the brand site(s)? Oftentimes, different
technical requirements for e-comm force
different design solutions.

26. *(Case in point.)

27. *Note how consistent the design details are here, from “corporate” to e-comm.

28. *And in some cases, e-commerce is the definition of a corporate site.

29. *Ditto.

30. *Ditto, part 2.

31. Major building blocks: Websites
1. Types
+ Corporate
+ Product/Service-specific
(i.e. Marketing campaign)
+ e-Commerce
+ Community
Insight: This is the new area, from a
marketing perspective. How do you create
and integrate community with corporate,
e-commerce and specific marketing
objectives?

32. *So these represent the standard definitions of “community” websites.

33. *But this is a community as well (as an e-commerce, corporate portal).

34. *Here’s another kind of community, tucked away inside a corporate site.

35. *Retailers like Zappos are quite keen on community.

36. *Here’s a quintessential marketing campaign site based on community.

37. Major building blocks: Websites
1. Types
The lesson here is ask, “What kind of site are
thinking of building?” What’s its purpose?
What kinds of content, functionality,
technology and integration should we be
concerned about incorporating—and how will
these factors influence architecture, design,
copywriting and development?

38. Major building blocks: Websites
2. Audiences & Goals

39. Major building blocks: Websites
2. Audiences & Goals
It starts with pretty basic questions...
Who are we building this site for?
What else do they do online? When? How?
What do we want them to accomplish?
What might they want to accomplish?
How is this site connected to other content?
What content+functionality is mandatory?
Etc. (Always ask more.)

40. Major building blocks: Websites
3. Process/Production
The basic order in building any site...
Research+Strategy
Architecture
Wireframes, Tech Requirements, Content
Structure, Connections
Design+Content Development
Coding/Development
Quality Assurance (QA)
Launch
Optimization+Maintenance

41. Major building blocks: Websites
3. Process/Production
The basic order in building any site...
Research+Strategy
Architecture
Wireframes, Tech Requirements, Content
Structure, Connections
Design+Content Development
(Here’s an example from a client project I
worked on.)

42. *Here’s the site schematic we developed to clarify our goals.

43. *Here’s a wireframe outlining all the content required on the home page.

44. *And a wireframe for a deep page in the site. Think of this as a list of ingredients,
not as a layout—it’s a checklist to help you design accordingly.

45. *This was initial design direction #1.

46. *This was initial design direction #2. (The figure represents employees filmed
on green screen, introducing various topics throughout the site.)

47. *This is what is currently live.
(The site launched two years ago; with the green screen employee videos. )

48. Major building blocks: Websites
3. Process/Production
The basic order in building any site...
Research+Strategy
Architecture
Wireframes, Tech Requirements, Content
Structure, Connections
Design+Content Development
Coding/Development
Quality Assurance (QA)

49. “ 5. Technical Considerations | Site Compatibility
This site will be developed using a mixture of
technologies including PHP, HTML and Javascript.
The site will be optimized to work on the following
operating systems and browser platforms:
_ Windows XP, Vista
_ Mac OS 10.4+
_ IE 7 on Windows
_ Firefox 2.x on Windows
_ Firefox 2.x on Mac
_ Safari (latest) on Mac
_ Flash 8+ Windows and Mac
_ Standards-compliant xHTML, CSS2 and JavaScript
”
Screen resolution will be 1024 x 768 px.
*Here’s an example of a production spec that we’d test against in QA.

50. Major building blocks: Websites
3. Process/Production
The basic order in building any site...
Research+Strategy
Architecture
Wireframes, Tech Requirements, Content
Structure, Connections
Design+Content Development
Coding/Development
Quality Assurance (QA)
Launch
Optimization+Maintenance

51. Website Design
Guest speaker: TJ Shaffer
http://popularfront.com

52. Monday, March 2:
“Social media—The Conversation Economy”
The new building blocks?
1. Guest speaker: Paul Isakson, Space150
2. Guest speaker: Jim Cuene, General Mills
usefullunacy.typepad.com
tim_brunelle@mcad.edu

53. Thank you.
Creative Commons Attribution & Non-Commercial License