Before diving into your next website take a step back and examine your design process. Evaluate how you approach building a website to see if it the most effective way possible.

1. THE WEB DESIGN PROCESS
A STRATEGY FOR SUCCESS
Shay Howe
TechWeek, July 2011
www.shayhowe.com – @letscounthedays

2. SHAY HOWE
www.shayhowe.com – @letscounthedays
The Web Design Process: A Strategy for Success @letscounthedays

3. THE FIVE PHASE APPROACH
1. Discovery
Project Definition & Brief
2. Plan
Information Architecture & Strategy
3. Design
Web & User Interface Design
4. Develop
Coding & Development
5. Launch
Deploy & Grow
The Web Design Process: A Strategy for Success @letscounthedays

4. The Web Design Process: A Strategy for Success @letscounthedays

5. DISCOVERY
Project Definition & Brief
The Web Design Process: A Strategy for Success @letscounthedays

6. Phase 1: Discovery
HAVE A PURPOSE
• Cover the five W’s and one H
• Define the primary message
• Outline any objectives
The Web Design Process: A Strategy for Success @letscounthedays

7. Phase 1: Discovery
SET GOALS
• Set short and long term goals
• Set on site and off site goals
• Increase motivation
• Provide a metric for success
The Web Design Process: A Strategy for Success @letscounthedays

8. Phase 1: Discovery
EVALUATE EXISTING WEBSITE
• Most and least effective aspects
• Learn from your mistakes
The Web Design Process: A Strategy for Success @letscounthedays

9. Phase 1: Discovery
FIND WHAT USERS WANT
• Research your users
• Observe analytics
The Web Design Process: A Strategy for Success @letscounthedays

10. Phase 1: Discovery
RESEARCH THE COMPETITION
• What are competitors doing well
• What are competitors doing poorly
• Learn from their mistakes
The Web Design Process: A Strategy for Success @letscounthedays

11. Phase 1: Discovery
INTERVIEW STAKEHOLDER
• Understand real needs and objectives
• Make others feel involved and motivated
• Avoid design by committee
The Web Design Process: A Strategy for Success @letscounthedays

12. Phase 1: Discovery
OUTLINE INITIAL TECH SPECS
• Gather all requirement
• Avoid any surprises
• Know any limitations
The Web Design Process: A Strategy for Success @letscounthedays

13. Phase 1: Discovery
COLLABORATE AND LISTEN
• Listen, listen, listen
• Value other’s opinions
• Work as a team
The Web Design Process: A Strategy for Success @letscounthedays

14. PLAN
Information Architecture & Strategy
The Web Design Process: A Strategy for Success @letscounthedays

15. Phase 2: Plan
DEFINE A TIMELINE
• Put the project into realization
• Set expectations
The Web Design Process: A Strategy for Success @letscounthedays

16. Phase 2: Plan
OUTLINE RESPONSIBILITIES
• Outline the project work flow
• Who is responsible for what
• What approvals are needed
• How will deliverables be handled
The Web Design Process: A Strategy for Success @letscounthedays

17. Phase 2: Plan
DETERMINE THE STRUCTURE
• Outline all pages
• Diagram the page hierarchy
• Build a visual representation
The Web Design Process: A Strategy for Success @letscounthedays

18. The Web Design Process: A Strategy for Success @letscounthedays

19. Phase 2: Plan
DIAGRAM PAGE FLOWS
• Determine content needs and priority
• Diagram how content should correlate
• Create an intuitive flow
The Web Design Process: A Strategy for Success @letscounthedays

20. Phase 2: Plan
MAKE CONTENT RELATIONSHIPS
• Outline overall messaging
• Illustrate page connections
• Start writing
The Web Design Process: A Strategy for Success @letscounthedays

21. Phase 2: Plan
PROTOTYPE WIREFRAMES
• Organize your layout
• Make intuitive decisions
• Tie in information architecture
The Web Design Process: A Strategy for Success @letscounthedays

22. The Web Design Process: A Strategy for Success @letscounthedays

23. Phase 2: Plan
PERFORM USABILITY TEST
• Gather meaningful feedback
• Help eliminate potential flaws
• Study similar case
• Make continued refinements
The Web Design Process: A Strategy for Success @letscounthedays

24. Phase 2: Plan
SET A MAINTENANCE PLAN
• Who takes the reigns once live
• Make a content creation schedule
• Schedule monthly reviews
The Web Design Process: A Strategy for Success @letscounthedays

25. DESIGN
Web & User Interface Design
The Web Design Process: A Strategy for Success @letscounthedays

26. Phase 3: Design
BRAINSTORM CREATIVE CONCEPTS
• Brainstorm the look and feel
• Concept graphic design elements
• Align creative ideas
The Web Design Process: A Strategy for Success @letscounthedays

27. The Web Design Process: A Strategy for Success @letscounthedays

28. Phase 3: Design
DESIGN THE VISUAL LAYOUT
• Begin putting together the puzzle
• Obtain feedback and refine
• Remember responsive designs
The Web Design Process: A Strategy for Success @letscounthedays

29. The Web Design Process: A Strategy for Success @letscounthedays

30. Phase 3: Design
FOLLOW DESIGN PRINCIPLES
• Stay focused
• Remember the little things
The Web Design Process: A Strategy for Success @letscounthedays

31. Phase 3: Design
KEEP BRAND IDENTITY
• Refresh the brand
• Fulfill brand development
• Do not stretch the brand
The Web Design Process: A Strategy for Success @letscounthedays

32. Phase 3: Design
REMEMBER ASSET CREATION
• Cover your tracks
• Think down the road
The Web Design Process: A Strategy for Success @letscounthedays

33. Phase 3: Design
OBTAIN FEEDBACK AND REVISE
• Pull stakeholders back in
• Catch missed deficiencies
• Regroup and revise
The Web Design Process: A Strategy for Success @letscounthedays

34. The Web Design Process: A Strategy for Success @letscounthedays

35. Phase 3: Design
PERFORM USABILITY TEST
• Additional feedback
• Help eliminate potential flaws
• Make continued refinements
The Web Design Process: A Strategy for Success @letscounthedays

36. Phase 3: Design
CREATE A STYLE GUIDE
• Outline brand guidelines
• Use as an ongoing resource
• Keep guidelines update to date
The Web Design Process: A Strategy for Success @letscounthedays

37. DEVELOP
Coding & Development
The Web Design Process: A Strategy for Success @letscounthedays

38. Phase 4: Develop
CODE HTML/CSS MARKUP
• Develop core shell
• Follow web standards and semantics
• Keep the code in order
The Web Design Process: A Strategy for Success @letscounthedays

39. The Web Design Process: A Strategy for Success @letscounthedays

40. Phase 4: Develop
DEVELOP ANY APPLICATIONS
• Easier said than done
• Plan ahead
• Stay agile
The Web Design Process: A Strategy for Success @letscounthedays

41. Phase 4: Develop
ADD 3RD PARTY INTEGRATION
• Add in any 3rd party integration
• Make good documentation
• Run quality test
• Stay up to date
The Web Design Process: A Strategy for Success @letscounthedays

42. Phase 4: Develop
SUPPORT RESPONSIVE DESIGN
• Account for different screen sizes
• Follow responsive layouts
• Make it convenient
The Web Design Process: A Strategy for Success @letscounthedays

43. Phase 4: Develop
TEST AND VALIDATE CODE
• Test multiple browsers
• Test different data sets
• Validate and fix errors
The Web Design Process: A Strategy for Success @letscounthedays

44. The Web Design Process: A Strategy for Success @letscounthedays

45. Phase 4: Develop
SET UP HOSTING AND LAUNCH
• Follow tech specs
• Set up proper configuration
• Deploy live version
• Check for hick-ups
The Web Design Process: A Strategy for Success @letscounthedays

46. LAUNCH
Deploy & Grow
The Web Design Process: A Strategy for Success @letscounthedays

47. Phase 5: Launch
TRAIN WEBSITE MANAGERS
• Provide the best training
• Answer all questions
• Cover any platforms necessary
• Provide future references
The Web Design Process: A Strategy for Success @letscounthedays

48. Phase 5: Launch
MAINTAIN THE WEBSITE
• Evolve the website, do not revolve it
• Keep content up to date
• Use content schedules
• Grow the overall strategy
The Web Design Process: A Strategy for Success @letscounthedays

49. Phase 5: Launch
START MARKETING
• Try different marketing methods
• Find what works best
• Experiment with marketing methods
The Web Design Process: A Strategy for Success @letscounthedays

50. Phase 5: Launch
MEASURE PROGRESS
• Continually watch analytics
• How do you compare to the past
• How are you trending
• Always work to improve
The Web Design Process: A Strategy for Success @letscounthedays

51. IN REVIEW
1. Discovery
Project Definition & Brief
2. Plan
Information Architecture & Strategy
3. Design
Web & User Interface Design
4. Develop
Coding & Development
5. Launch
Deploy & Grow
The Web Design Process: A Strategy for Success @letscounthedays

52. QUESTIONS?
Thank you!
The Web Design Process: A Strategy for Success @letscounthedays