![Page 1: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/1.jpg)
THE WEB DESIGN PROCESSA STRATEGY FOR SUCCESS
Shay HoweTechWeek, July 2011www.shayhowe.com – @letscounthedays
![Page 2: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/2.jpg)
The Web Design Process: A Strategy for Success
SHAY HOWEwww.shayhowe.com – @letscounthedays
@letscounthedays
![Page 3: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/3.jpg)
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
![Page 4: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/4.jpg)
The Web Design Process: A Strategy for Success @letscounthedays
![Page 5: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/5.jpg)
The Web Design Process: A Strategy for Success
DISCOVERYProject Definition & Brief
@letscounthedays
![Page 6: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/6.jpg)
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
![Page 7: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/7.jpg)
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
![Page 8: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/8.jpg)
The Web Design Process: A Strategy for Success
Phase 1: Discovery
EVALUATE EXISTING WEBSITE
• Most and least effective aspects
• Learn from your mistakes
@letscounthedays
![Page 9: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/9.jpg)
The Web Design Process: A Strategy for Success
Phase 1: Discovery
FIND WHAT USERS WANT
• Research your users
• Observe analytics
@letscounthedays
![Page 10: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/10.jpg)
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
![Page 11: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/11.jpg)
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
![Page 12: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/12.jpg)
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
![Page 13: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/13.jpg)
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
![Page 14: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/14.jpg)
The Web Design Process: A Strategy for Success
PLANInformation Architecture & Strategy
@letscounthedays
![Page 15: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/15.jpg)
The Web Design Process: A Strategy for Success
Phase 2: Plan
DEFINE A TIMELINE
• Put the project into realization
• Set expectations
@letscounthedays
![Page 16: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/16.jpg)
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
![Page 17: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/17.jpg)
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
![Page 18: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/18.jpg)
The Web Design Process: A Strategy for Success @letscounthedays
![Page 19: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/19.jpg)
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
![Page 20: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/20.jpg)
The Web Design Process: A Strategy for Success
Phase 2: Plan
MAKE CONTENT RELATIONSHIPS
• Outline overall messaging
• Illustrate page connections
• Start writing
@letscounthedays
![Page 21: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/21.jpg)
The Web Design Process: A Strategy for Success
Phase 2: Plan
PROTOTYPE WIREFRAMES
• Organize your layout
• Make intuitive decisions
• Tie in information architecture
@letscounthedays
![Page 22: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/22.jpg)
The Web Design Process: A Strategy for Success @letscounthedays
![Page 23: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/23.jpg)
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
![Page 24: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/24.jpg)
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
![Page 25: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/25.jpg)
The Web Design Process: A Strategy for Success
DESIGNWeb & User Interface Design
@letscounthedays
![Page 26: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/26.jpg)
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
![Page 27: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/27.jpg)
The Web Design Process: A Strategy for Success @letscounthedays
![Page 28: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/28.jpg)
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
![Page 29: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/29.jpg)
The Web Design Process: A Strategy for Success @letscounthedays
![Page 30: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/30.jpg)
The Web Design Process: A Strategy for Success
Phase 3: Design
FOLLOW DESIGN PRINCIPLES
• Stay focused
• Remember the little things
@letscounthedays
![Page 31: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/31.jpg)
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
![Page 32: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/32.jpg)
The Web Design Process: A Strategy for Success
Phase 3: Design
REMEMBER ASSET CREATION
• Cover your tracks
• Think down the road
@letscounthedays
![Page 33: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/33.jpg)
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
![Page 34: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/34.jpg)
The Web Design Process: A Strategy for Success @letscounthedays
![Page 35: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/35.jpg)
The Web Design Process: A Strategy for Success
Phase 3: Design
PERFORM USABILITY TEST
• Additional feedback
• Help eliminate potential flaws
• Make continued refinements
@letscounthedays
![Page 36: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/36.jpg)
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
![Page 37: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/37.jpg)
The Web Design Process: A Strategy for Success
DEVELOPCoding & Development
@letscounthedays
![Page 38: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/38.jpg)
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
![Page 39: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/39.jpg)
The Web Design Process: A Strategy for Success @letscounthedays
![Page 40: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/40.jpg)
The Web Design Process: A Strategy for Success
Phase 4: Develop
DEVELOP ANY APPLICATIONS
• Easier said than done
• Plan ahead
• Stay agile
@letscounthedays
![Page 41: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/41.jpg)
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
![Page 42: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/42.jpg)
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
![Page 43: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/43.jpg)
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
![Page 44: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/44.jpg)
The Web Design Process: A Strategy for Success @letscounthedays
![Page 45: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/45.jpg)
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
![Page 46: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/46.jpg)
The Web Design Process: A Strategy for Success
LAUNCHDeploy & Grow
@letscounthedays
![Page 47: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/47.jpg)
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
![Page 48: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/48.jpg)
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
![Page 49: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/49.jpg)
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
![Page 50: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/50.jpg)
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
![Page 51: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/51.jpg)
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
![Page 52: The Web Design Process: A Strategy for Success](https://reader038.vdocuments.mx/reader038/viewer/2022110118/555367a3b4c905031f8b5362/html5/thumbnails/52.jpg)
The Web Design Process: A Strategy for Success
QUESTIONS?Thank you!
@letscounthedays