Strategic Web Design Plus

1
Strategic Web DesignPlus Trends, thoughts and
ramblings
Kevin Munday, Xeno Media October 26, 2006

2
Who are we?

• Chicago-area firm
• Design, development, strategy, marketing
• 1/3 Businesses
• 1/3 Associations and Cultural Organizations

3
And , most importantly, 1/3 science communication
4
Clients/projects include

• Fermilab Web site
• Interactions.org
• International Linear Collider (GDE)
• SLAC Web redesign
• Interactions.org
• Open Science Grid
• Pierre Auger Observatory

5
What I do

• Strategic consulting
• Project planning
• Project management
• Training
• Support

6
What I am not

• Programmer
• Designer
• Writer
• Editor
• Physicist
• Possessor of any other skill that honest people
  use to make a living

7
Why am I here?

• Share our strategic project planning methodology
• Discuss strategic Web design
• Babble about trends, etc.

8
What makes a Web project successful?

• Strategic project plan

9
Daniel Burnham said (and I believe him)

• Make no little plans. They have no magic to
  stir men's blood and probably themselves will not
  be realized. Make big plans. Aim high in hope and
  work. Remembering that a noble, logical diagram
  once recorded will not die.

10
What is a strategic Web project plan?

• A Strategic Web Project Plan is the roadmap that
  ensures that ALL efforts lead to greater
  organizational success, rather than assorted
  tactical victories.

11
What makes a plan strategic?

• Organizational Strategy

Communications Strategy
Web Strategy
12
Components of the plan

• Team structure
• Strategic Goals
• Key Audiences
• Comparisons/Complements
• Content Architecture
• Technical Solutions
• Design Strategy
• Timeline and Dependencies

13
1. Team structure

• The project team should be large enough to
• Include members intimately involved in overall
  organizational (or field-wide) strategy
• Be a fair, representative and defensible proxy
  for all main stakeholder groups
• Possess (or have access to) all necessary skills
  for the completion of the project and have a
  reasonable mandate to complete the work

14
Project team (Size Matters)

• The project team should not be so large that
• Communications are difficult
• Members feel out of touch or non-vital to the
  project
• Roles and responsibilities cannot be clearly
  defined
• Meetings are difficult to coordinate
• Consensus is difficult to reach
• Progress slows or stalls

15
If its getting a little crowded

• Consider a three team approach

Strategy Group
Working Group
Advisory Group
16
2. Defining the projects Strategic Goals

• Compose high-level statements tied to
  organizational (or field-wide) strategies and
  communications plans - about the fundamental
  desired impact of the project.

17
3. Identifying Key Audiences

• Throughout the course of a Web project, multiple
  interests will compete for limited time and
  resources.
• Identifying and agreeing on key primary and
  secondary audiences and clarifying their
  importance to the overall strategic goals helps
  to streamline the decision-making process
  throughout the life-course of the project.

18
4. Comparisons/Complements

• What others are doing similar things?
• How are they doing it?
• What are the best practices in our milieu?
• What other projects/media will support or relate
  to this project and how?
• Where will this project fit into the mix?

19
5. Content Architecture

• Determine
• What content mix will best serve the projects
  strategic goals?
• What are the key messages?
• Where should content reside?
• What content is timely and what content is
  collateral?
• How should the content be updated?
• Who will update the content?

20
6. Technical Solutions

• What tools will help further the strategic goals
  of the
• project?
• What are the strategic benefits?
• How do the solutions support the content
  architecture?
• What are the costs?
• What are the support requirements?
• What technical solutions or situations are in
  place already?

21
7. Design Strategy

• How will design support the
• projects strategic goals?
• Identity/Branding
• Key messages
• Feel
• Graphics and images
• Navigation scheme supporting content architecture

22
8. Timelines and Dependencies

• Before beginning design, development or
• editing, reach consensus on
• Roles and responsibilities
• Deliverables and milestones
• Timelines
• Approval queue

23
Strategic Web Project Plan

• Forming the Team
• Strategic Goals
• Key Audiences
• Comparisons/Complements
• Content Architecture
• Technical Solutions
• Design Strategy
• Timeline and Dependencies

24
Strategic design

• Really, how is design strategic?
• Supports the organizations goals
• Appeals to primary audiences
• Encourages interaction with content
• Encourages repeat visits
• Inspires

25
And, frankly

• Looking good can be strategic, too!
• (Nigella cooks like an angel, looks like an
  angel Lawson can be found at Nigella.com)

26
SLAC Redesign

• Public face of change of emphasis at the lab
• Multifaceted rather than particle physics (etc.)

27
Fermilab home page

• Particle Physics is sexy (heck yeah) and
  mysterious
• Dynamic contentdynamic place
• Layers of navigation
• Featuring recent achievements

28
Open Science Grid

• Applications first (funders count--lots)
• Dynamic, multi-level navigation (users are used
  to lots of links)
• Discrete navigation for collaborator tools
• Global impact portrayed by map

29
Pierre Auger Observatory

• Transition from basic, information and news site
  to outreach and education (info to drama)
• Content-heavy to drama-heavy

30
Current Trends in Web Design
31
F2F2F2 is the new black

• Functional
• Unobtrusive
• Hot, hot, hot
• Adobe.com, Apple.com, Salvatoreferragomo.com

32
Black is the new black

• High drama
• Makes full color imagery pop
• Panerai.com, Nike.com

33
Convergence of usability and graphic design

• General approach of cleanly, well-organized
  content, structure, and placement
• Intelligent use of color to imply/reinforce
  clickability
• Visual hierarchy of content

Cnet.com, interaction-design.org
34
Less is more

• Punchy
• To the point
• Memorable

Google.com, 37signals.com
35
More is more, too

• Gearing of design toward the "next step-up"
  monitor resolution size(1024 x 768)
• Heavy-traffic news sites
• Expendable right column tier 2 information

ESPN.com, ornl.gov
36
"Blog-style" design

• Clean, fixed-width, center-aligned, templated
  design
• Permeation into mainstream sites
• (Mostly) relative to the predominant age
  demographic of blog users

blogger.com, us.playstation.com
37
Flash as a means, rather than an end

• Fewer of the forced-watch "Flash intro"
• More used selectively in HTML-based web sites
• Deployed as design enhancers, rather than as
  vital elements (e.g.site navigation)

Adobe.com, audiusa.com
38
Food for thought

• Good designers borrow
• Great designers find inspiration in the works of
  others who are similarly in-tune with refining
  their craft
• (i.e. steal)

39
Fun spots to shop

• www.alistapart.com
• www.webcreme.com
• www.howdesign.com
• Web awards (even the lame ones)

40
And if I youd like to reach me

• Email Munday_at_xenomedia.com
• Phone [phone]
• Web www.xenomedia.com