The document outlines a 5 phase web design process: 1) Discovery to define goals and requirements, 2) Plan information architecture and structure, 3) Design visual layout and user interface, 4) Develop by coding and testing, 5) Launch through training, marketing and measuring progress. Each phase is broken down into steps such as defining objectives, outlining responsibilities, usability testing, and ensuring brand identity is maintained. The process is presented as a strategy for successful web design projects.

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

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

3. The Web Design Process: A Strategy for Success
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
@letscounthedays

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

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

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

7. The Web Design Process: A Strategy for Success
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
@letscounthedays

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

48. The Web Design Process: A Strategy for Success
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
@letscounthedays

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

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

51. The Web Design Process: A Strategy for Success
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
@letscounthedays

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