Strategic Web Design Plus Trends, thoughts and ramblings - PowerPoint PPT Presentation

About This Presentation
Title:

Strategic Web Design Plus Trends, thoughts and ramblings

Description:

Strategic Web Design Plus Trends, thoughts and ramblings – PowerPoint PPT presentation

Number of Views:69
Avg rating:3.0/5.0
Slides: 41
Provided by: Ale8309
Category:

less

Transcript and Presenter's Notes

Title: Strategic Web Design Plus Trends, thoughts and ramblings


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 630/794-9560
  • Web www.xenomedia.com
Write a Comment
User Comments (0)
About PowerShow.com