Website Design Roadmap
1
Adina Zaiontz
What We Will Cover Today
• Roadmap through site design/ redesign
process
• Best practices for project management, design
a...
RoadMap to a Better Site
• 1: Research Competitors
• 2: Make a List of Functional and Content
Requirements.
• 3: Assemble ...
The Web Development Journey
4
If your website was an employee,
would you fire it?
5
Website Shame
6
Getting Rid of Outdated Look
7
Problems With Original Site
8
Problems With Original Site
9
Problems With Original Site
Problems With Original Site
• Why Redesign?
• You cant control your site or change content
• Search engines cant find you
...
The Web Development Journey
1
Research
competitors
11
Step 1: Competitor Review
12
Step 1: Research Competitors
• Objective:
– Determine who’s the best in your category
– Research ideas you can borrow and ...
• Questions to ask/ Items to Note
– What content do they have that I don’t have?
– What functionality do they have?
– What...
Sample Competitor Review
15
Research
competitors
1
Sample Competitor Review
16
Research
competitors
1
Benchmarking the Competition:
Stats Research
• For your own stats:
• Free: Google Analytics – Install before you Re-Design...
The Web Development Journey
1
Research
competitors
2
Determine
Requirements
18
Step 2: Determine Requirements
19
If You Fail To Plan, You Plan To Fail
Objectives:
– Decide which Important functionality you need.
Why:
– Determine / Share business objectives of the site
– En...
Creative Brief – For Designer
• Big Picture Business Objectives, i.e.,
– We need to get more leads to achieve our sales ta...
Creative Brief – For Designer
• Unique selling proposition (USP)
– Your USP must say to your audience, “use this website, ...
Sample - Simple Requirements
Document – Prioritized Wish List
Determine
Requirements
2
23
Sample – Complex Requirements Document
– User Categories & Requirements
Determine
Requirements
2
24
Sample – Complex Requirements Document –
Specific Functionality Requirements
Determine
Requirements
2
25
Common New Requirements for
Re-Designed Sites:
Blog
Social Media Links
Social Media Integration
Embedded Twitter Strea...
Creating a Content Schedule
Determine
Requirements
2
27
The Web Development Journey
1
Research
competitors
2
Determine
Requirements
3
Assemble
Team
28
Step 3: Recruit Your Web Team
29
Step 3: Recruit Your Web
Team
Roles on web team:
• 1) Project Management,
• 2) Front End Designer/ Graphic Designer,
• 3) ...
3
Assemble
Team
31
Interview Questions
• Can I see a Portfolio of completed projects?
• What is your project management process?
• What is yo...
Project Management Tools 3
Assemble
Team
• Project Management Sites:
– Asana
– Basecamp
• File sharing:
– Google Docs
– Dr...
Asana.com Project
Management
3
Assemble
Team
34
The Web Development Journey
1
Research
competitors
2
Determine
Requirements
3
Assemble
Team
4
Wireframe
35
Step 4: Wireframing
36
Step 4: Info Architecture
and Wireframing Wireframe
4
• Objective: Create a BluePrint for the design of
your site to decid...
Sample Site Map
Wireframe
4
38
Step 4: Info Architecture
and Wireframing Wireframe
4
39
Step 4: Info Architecture
and Wireframing Wireframe
4
• Why Wireframe?
– See your website visually for 1st time
– Create a...
The Web Development Journey
1
Research
competitors
2
Determine
Requirements
3
Assemble
Team
4
Wireframe
5
Create/ Transiti...
Step 5: Content Creation
42
Step 5: Content Creation
• Objective:
Create and compile the copy (text), images for
your site.
• Activities:
– Write copy...
Content Schedule –
Your Key Tool!
Create/ Transition
Content
5
44
Providing Copy to the
Designer
Create/ Transition
Content
5
Indicate which
photos you want
& on which pages
Upload high re...
Write Compelling Navigation Labels that
will Make Sense for Your Target
Audience
Create/ Transition
Content
5
46
Smart Strategies for This
Stage
• No photos? Buy Some
– Use a stock photo/ video site like istockphoto, yaymicro
• Make yo...
Build out Landing Pages
• Why?
• Preps for site for future marketing (Google
Ads, Email campaigns)
Create/ Transition
Cont...
Build out Landing Pages
Create/ Transition
Content
5
49
The Web Development Journey
1
Research
competitors
2
Determine
Requirements
3
Assemble
Team
4
Wireframe
5
Create/ Transiti...
Step 6: Design
51
52
Design
6
Step 6: Design
• Objective:
Design an attractive, contemporary “storefront” to
your business.
• How:
– Provide a creative ...
Design Mock Ups
54
Design
6
Design Trends: “Windows 8
Style” Colour Blocking
55
Design
6
Rotating image
panel
Squares open to
different sections
Design Trends: Responsive
Web Design
56
Design
6
Adapts to small or
large screens
Often shows a full
screen image
Design Trends: Muted
Pastels
57
Design
6
Design Trends: Flat Design
58
Design
6
Good Resources
• http://themeforest.com/
• http://webdesignledger.com
• http://www.webdesigndev.com/inspiration
• http://y...
The Web Development Journey
1
Research
competitors
2
Determine
Requirements
3
Assemble
Team
4
Wireframe
5
Create/ Transiti...
Step 7: Build
61
Good Resources
Objective:
• Take the approved design (PSD) from the designer,
and put all the HTML code behind it.
• Add C...
What’s Changed in Web Design?
Custom coding vs CMS (Content Management
Systems)
OLD WAY: old sites hand coded with HTML an...
Raw Coding Versus CMS
64
Code/ Build
7
Content Management Systems
The Big 3 Content Management Systems
• Joomla
• Drupal
• Wordpress
Wordpress – most popular – e...
The Web Development Journey
1
Research
competitors
2
Determine
Requirements
3
Assemble
Team
4
Wireframe
5
Create/ Transiti...
Step 8: Beta and QA
67
God is in the Detail!
Step 8: Beta testing and QA
Objective:
• Test the site for bugs, copy errors, and browser issues
• Get final approvals
Wha...
Bug Tracking Sheet
69
Beta/ QA
8
The Web Development Journey
1
Research
competitors
2
Determine
Requirements
3
Assemble
Team
4
Wireframe
5
Create/ Transiti...
Step 9: Launch and Marketing
71
Step 9: Launch and Marketing
Objective:
• Let the world know about your site
• Get trained on how to use your site
• Ongoi...
1
2
Research
competitors
3
4
6
5
7
8
9
The Web Development Journey
Determine
Requirements
Assemble
Team
Create/ Transition...
Step 10: SEO & Maintenance
74
Step 10: SEO & Maintenance
Objective:
• Rank high on search engines
• Keep up with Wordpress and Plug in updates – importa...
1
2
Research
competitors
3
4
6
5
7
8
9
The Web Development Journey
Determine
Requirements
Assemble
Team
Create/ Transition...
No Guts. No Glory
77
No Time for All This?
• Don’t have time to become a web design
ninja? We can help!
• napkin marketing is a digital marketi...
Upcoming SlideShare
Loading in...5
×

The Ultimate Website Development Roadmap

5,457

Published on

The 10 Step Guide to Building and Marketing a Sales-Driven Website.
Step 1: Research Competitors
Step 2: Make a List of Functional and Content Requirements.
Step 3: Assemble Team
Step 4: Wireframe
Step 5: Content Creation & Collection, Content Schedule
Step 6: Design
Step 7: Programming
Step 8: Beta
Step 9: Live Launch
Step 10: SEO & Maintenance

Published in: Business, Technology
0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,457
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide
  • Step 1
    Look @ functionality AND design
    Step 4 & 5 can be in reverse order…
    Are you a visual thinker or list maker?

    Some people sketch wireframe first, and that helps them think of content.
    Looking up competitors also makes you think of content.

  • Interview in person or skype/ phone
    They must speak english or your language
  • Wireframe: simple black and white drawings showing site navigation, main links and where everything goes on the page.

    Doesn’t show fonts, colors, or actual text.

    - helps you figure out what is the most important info/ action you want the user to take, and how to organize the website to help take them there faster.
  • http://www.computerworld.com/s/article/9219685/Site_builder_shootout_Drupal_vs._Joomla_vs._WordPress?taxonomyId=169&pageNumber=2

    Show WP vs Joomla vs Drupal Interface.

    Picking between them- depends on how you like to manage your website. Everyone has a different opinion. It’s like driving different cars… or saying you like MAC vs PC. I prefer wordpress…but I havent tried the others in depth.
    Drupal – difficult for new users to use. OLDEST system
    - Joomla and WP easiest… but Wordpress is more widely used and has more plug ins. Better for customization & for a complex site.
    - Joomla – requires more coding to get a site to look & work how you want. Best for complex site, & for someone who will have a technical person on staff to manage the site. Plug ins cost $$
    Wordpress: 1 central dashboard. Simple and intuitive. Used to be a blogging platform. BEST for beginners.

    Categories to think about (scorecard)
    - basic content management (adding articles, configuring the logo and theme and look of site) Drupal – hard learning curve. Joomla & WP easy
    - social tools
    - ecommerce (Joomla & WP)
    - support & developer community
  • Transcript of "The Ultimate Website Development Roadmap"

    1. 1. Website Design Roadmap 1 Adina Zaiontz
    2. 2. What We Will Cover Today • Roadmap through site design/ redesign process • Best practices for project management, design and coding • Give you the tools to take on your own site redesign project. 2
    3. 3. RoadMap to a Better Site • 1: Research Competitors • 2: Make a List of Functional and Content Requirements. • 3: Assemble Team • 4: Wireframe • 5: Content Creation & Collection • 6: Design • 7: Programming • 8: Beta • 9: Live Launch • 10: SEO & Maintenance 3
    4. 4. The Web Development Journey 4
    5. 5. If your website was an employee, would you fire it? 5 Website Shame
    6. 6. 6 Getting Rid of Outdated Look
    7. 7. 7 Problems With Original Site
    8. 8. 8 Problems With Original Site
    9. 9. 9 Problems With Original Site
    10. 10. Problems With Original Site • Why Redesign? • You cant control your site or change content • Search engines cant find you • Your site has outdated technology (flash, frames) • Outdated look • No mobile • No calls to action • Slow load times • No dynamic content 10
    11. 11. The Web Development Journey 1 Research competitors 11
    12. 12. Step 1: Competitor Review 12
    13. 13. Step 1: Research Competitors • Objective: – Determine who’s the best in your category – Research ideas you can borrow and apply. • How: – Google • Local competitors • Who comes up on search & Maps • Who’s well known in your city or across Canada/ US – Look outside the GTA & your direct competitors – Don’t think about the budget and the HOW yet • Tools: – Browser Bookmarks – Powerpoint – Make a Competitor “Scrapbook”/ Swipe File – Snagit Research competitors 1 13
    14. 14. • Questions to ask/ Items to Note – What content do they have that I don’t have? – What functionality do they have? – What design elements do they have that I can apply? – What marketing strategies/ tactics are they using? – See what competitors are doing on social media & blog – Take a screenshot – Sign up for competitor enewsletters & social media channels (follow twitter/ facebook) Step 1: Research Competitors Research competitors 14 1
    15. 15. Sample Competitor Review 15 Research competitors 1
    16. 16. Sample Competitor Review 16 Research competitors 1
    17. 17. Benchmarking the Competition: Stats Research • For your own stats: • Free: Google Analytics – Install before you Re-Design to check “before and after” traffic. • Free: Quantcast – More In-Depth Demographics • For your own and competitor stats: • Free: Alexa.com and SEMrush.com – Look up relative traffic stats and search info on competitors – http://www.alexa.com/siteinfo/kumon.ca# – http://www.semrush.com/ca/info/kumon.ca?db=ca • FREE: smallseotools.com/ • Paid & Expensive: Compete.com, comscore, Hitwise 17 Research competitors 1
    18. 18. The Web Development Journey 1 Research competitors 2 Determine Requirements 18
    19. 19. Step 2: Determine Requirements 19 If You Fail To Plan, You Plan To Fail
    20. 20. Objectives: – Decide which Important functionality you need. Why: – Determine / Share business objectives of the site – Ensure you and your internal team, designer and programmer are are communicating effectively to meet the common goal of creating your website. How: – Write a requirements document. 3 different types: • Creative Brief – for the Designer • Functional Requirements – for the Programmer. • Content schedule – for the whole team Step 2: Determine Requirements Determine Requirements 2 20
    21. 21. Creative Brief – For Designer • Big Picture Business Objectives, i.e., – We need to get more leads to achieve our sales target of $$$$ – We need to project a more modern image to customers. • Website objectives, i.e., – Get readers to double the amount of time they spend/content they consume on the site – Increase the amount of leads collected online for sales. – Increase online order by 20% • Competition – URLs of Key Competitors and Other Sites You Admire – Screenshots of sites you like • Who is the audience? – Demographics and stats – Typical user profiles, i.e. “a mom in Richmond Hill, age 28-40, with kids aged 3- 12, $100K HHI” Determine Requirements 2 21
    22. 22. Creative Brief – For Designer • Unique selling proposition (USP) – Your USP must say to your audience, “use this website, and you will get this specific benefit.” – What makes you different and special compared to the competition? • Brand character – If your company was a person, who would they be? What would they wear? What would their “voice” be? • Friendly? Casual? Conservative? Serious? • Mandatory items: The New Design MUST/ MUST not have this – “Request a quote” form on every page – NO Yellow! – Must have picture of business owner • Success Metrics: What measures will help you know the redesign succeeded? – Number of visitors increase by 30% – Number of leads filling out contact form increasing – Time spent on site increasing – Bounce rates decreasing – Visitors from organic search increasing. Determine Requirements 2 22
    23. 23. Sample - Simple Requirements Document – Prioritized Wish List Determine Requirements 2 23
    24. 24. Sample – Complex Requirements Document – User Categories & Requirements Determine Requirements 2 24
    25. 25. Sample – Complex Requirements Document – Specific Functionality Requirements Determine Requirements 2 25
    26. 26. Common New Requirements for Re-Designed Sites: Blog Social Media Links Social Media Integration Embedded Twitter Stream “Like Us on Facebook” Content Management System (CMS) Google Analytics (Statistics Tracking) Contact forms with database Enews sign up SEO-ed content and structure Landing Pages for PPC Ecommerce Determine Requirements 2 26
    27. 27. Creating a Content Schedule Determine Requirements 2 27
    28. 28. The Web Development Journey 1 Research competitors 2 Determine Requirements 3 Assemble Team 28
    29. 29. Step 3: Recruit Your Web Team 29
    30. 30. Step 3: Recruit Your Web Team Roles on web team: • 1) Project Management, • 2) Front End Designer/ Graphic Designer, • 3) Developer/ Programmer • 4) Copywriter • 5) Marketing Objectives: Find people with the creative, technical communication skills you need for your project. Decide: • Agency versus Freelancer versus Self Serve Template? • What is Your Budget? • How much time/ expertise do you have to manage your project? 3 Assemble Team 30
    31. 31. 3 Assemble Team 31
    32. 32. Interview Questions • Can I see a Portfolio of completed projects? • What is your project management process? • What is your specialty? front end design, development, etc. • What CMS will you install? (Wordpress, Drupal) • How many revisions? • Timeline to completion? • Budget • What is your understanding of my business? • Are they asking you questions, or just selling you their service? 3 Assemble Team 32
    33. 33. Project Management Tools 3 Assemble Team • Project Management Sites: – Asana – Basecamp • File sharing: – Google Docs – DropBox 33
    34. 34. Asana.com Project Management 3 Assemble Team 34
    35. 35. The Web Development Journey 1 Research competitors 2 Determine Requirements 3 Assemble Team 4 Wireframe 35
    36. 36. Step 4: Wireframing 36
    37. 37. Step 4: Info Architecture and Wireframing Wireframe 4 • Objective: Create a BluePrint for the design of your site to decide how all the information will be organized. • 2 elements of this stage: • Site map • Wireframe 37
    38. 38. Sample Site Map Wireframe 4 38
    39. 39. Step 4: Info Architecture and Wireframing Wireframe 4 39
    40. 40. Step 4: Info Architecture and Wireframing Wireframe 4 • Why Wireframe? – See your website visually for 1st time – Create a more user friendly site – Place the most important elements in the most prominent positions (information hierarchy) – Get the business owner/ designer/ programmer on the same page & give feedback early on. • Tools for Wireframing: – Balsamiq – Axure – Powerpoint – Pencil and paper 40
    41. 41. The Web Development Journey 1 Research competitors 2 Determine Requirements 3 Assemble Team 4 Wireframe 5 Create/ Transition Content 41
    42. 42. Step 5: Content Creation 42
    43. 43. Step 5: Content Creation • Objective: Create and compile the copy (text), images for your site. • Activities: – Write copy – Collect photos/ videos – Organize and give to graphic designer – Upload to dropbox or asana/ basecamp • Tools: MS Word, dropbox • One of the most difficult stages! Create/ Transition Content 5 43
    44. 44. Content Schedule – Your Key Tool! Create/ Transition Content 5 44
    45. 45. Providing Copy to the Designer Create/ Transition Content 5 Indicate which photos you want & on which pages Upload high res photos to dropbox Use plain text that the designer can copy and paste. 45
    46. 46. Write Compelling Navigation Labels that will Make Sense for Your Target Audience Create/ Transition Content 5 46
    47. 47. Smart Strategies for This Stage • No photos? Buy Some – Use a stock photo/ video site like istockphoto, yaymicro • Make your content search engine friendly • Identify keywords for SEO • Incorporate keywords into About Us, Services and other pages. • Outsource the tedious tasks if possible • i.e., 200 pictures to crop or 50 scanned documents to convert to text • If you’re not a strong writer, hire one…or ask your agency • Content Marketing - Showcase Your Expertise – Ebook – Blog post – Whitepaper Create/ Transition Content 5 47
    48. 48. Build out Landing Pages • Why? • Preps for site for future marketing (Google Ads, Email campaigns) Create/ Transition Content 5 48
    49. 49. Build out Landing Pages Create/ Transition Content 5 49
    50. 50. The Web Development Journey 1 Research competitors 2 Determine Requirements 3 Assemble Team 4 Wireframe 5 Create/ Transition Content 6 Design 50
    51. 51. Step 6: Design 51
    52. 52. 52 Design 6
    53. 53. Step 6: Design • Objective: Design an attractive, contemporary “storefront” to your business. • How: – Provide a creative brief – Show the designer sites you like – Think about your preferences: colours, fonts, icons, photo treatment, logos • Tools • Study design trends on themeforest.com, webdesigndev.com • Snagit or Adobe Acrobat (for providing design feedback) • During this phase: Get design mock ups from your graphic designer – 2-3 versions 53 Design 6
    54. 54. Design Mock Ups 54 Design 6
    55. 55. Design Trends: “Windows 8 Style” Colour Blocking 55 Design 6 Rotating image panel Squares open to different sections
    56. 56. Design Trends: Responsive Web Design 56 Design 6 Adapts to small or large screens Often shows a full screen image
    57. 57. Design Trends: Muted Pastels 57 Design 6
    58. 58. Design Trends: Flat Design 58 Design 6
    59. 59. Good Resources • http://themeforest.com/ • http://webdesignledger.com • http://www.webdesigndev.com/inspiration • http://youroldcrapwebsite.wordpress.com/ • http://www.smashingmagazine.com/ 59 Design 6
    60. 60. The Web Development Journey 1 Research competitors 2 Determine Requirements 3 Assemble Team 4 Wireframe 5 Create/ Transition Content 6 Design 60 7 Code/ Build
    61. 61. Step 7: Build 61
    62. 62. Good Resources Objective: • Take the approved design (PSD) from the designer, and put all the HTML code behind it. • Add CMS, database, ecommerce and other functionality onto your site. What You Need To Know: • Build your site on a common CMS • Look up plugins and software-as-a-service (SAAS) solutions to save time and money programming 62 Code/ Build 7
    63. 63. What’s Changed in Web Design? Custom coding vs CMS (Content Management Systems) OLD WAY: old sites hand coded with HTML and PHP (programming languages). Problem: hard for average user to update their site. You need programmer intervention for everything. NEW WAY: CMS, plug ins, templates, CSS style sheets 63 Code/ Build 7
    64. 64. Raw Coding Versus CMS 64 Code/ Build 7
    65. 65. Content Management Systems The Big 3 Content Management Systems • Joomla • Drupal • Wordpress Wordpress – most popular – ease of use… Many plug ins 65 Code/ Build 7
    66. 66. The Web Development Journey 1 Research competitors 2 Determine Requirements 3 Assemble Team 4 Wireframe 5 Create/ Transition Content 6 Design 66 7 Code/ Build 8 Beta/ QA
    67. 67. Step 8: Beta and QA 67 God is in the Detail!
    68. 68. Step 8: Beta testing and QA Objective: • Test the site for bugs, copy errors, and browser issues • Get final approvals What You Need To Know: • Launch on a “secret” web page • Launch to small group • Consider outsourcing your beta testing – http://www.thebetafamily.com – www.youth4work.com • Go through your site page by page. Look at: – Functionality: Broken links, missing images, forms working – Content: typos, contact info, terms, privacy – Browser Compatibility: Test on firefox/ explorer/ chrome/ safari (iPad/ iPhone/ Android/ BB) – Site speed – SEO 68 Beta/ QA 8
    69. 69. Bug Tracking Sheet 69 Beta/ QA 8
    70. 70. The Web Development Journey 1 Research competitors 2 Determine Requirements 3 Assemble Team 4 Wireframe 5 Create/ Transition Content 6 Design 70 7 Code/ Build 8 Beta/ QA 9 Launch
    71. 71. Step 9: Launch and Marketing 71
    72. 72. Step 9: Launch and Marketing Objective: • Let the world know about your site • Get trained on how to use your site • Ongoing Maintenance How: • Social Media launch • Blog • Email campaign • Paid Ads – PPC, traditional marketing • Let Search Engines Know You Exist – Google Webmaster Tools and Google Analytics – Citation sites 72 Launch 9
    73. 73. 1 2 Research competitors 3 4 6 5 7 8 9 The Web Development Journey Determine Requirements Assemble Team Create/ Transition Content Wireframe Design Code/ Build Beta/ QA Launch 73 SEO & MAintenance 10
    74. 74. Step 10: SEO & Maintenance 74
    75. 75. Step 10: SEO & Maintenance Objective: • Rank high on search engines • Keep up with Wordpress and Plug in updates – important for security of site! • Site backups • Ongoing content updates How: Maintenance • Close monitoring of website, outage reports, Wordpress security updates • Backups SEO • Link Building • Submitting site to search engines • Directory submissions • Social Media bookmarking • Content Marketing • And much more! 75 SEO & Maintenance 10
    76. 76. 1 2 Research competitors 3 4 6 5 7 8 9 The Web Development Journey Determine Requirements Assemble Team Create/ Transition Content Wireframe Design Code/ Build Beta/ QA Launch 76 SEO & MAintenance 10
    77. 77. No Guts. No Glory 77
    78. 78. No Time for All This? • Don’t have time to become a web design ninja? We can help! • napkin marketing is a digital marketing agency which manages the whole 9-step process for you. • For a free estimate, call Adina Zaiontz 289.597.6600 | adina@napkinmarketing.com 78

    ×