Your SlideShare is downloading. ×
Amsterdam Pm Web Process
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Amsterdam Pm Web Process

328
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
328
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1.
  • 2. discovery
    Take the time to understand what you’re really after. Lots of examples, lots of discussion about what you need vs. what you want, talks about how you’ll use the site, what you hope to gain, how visitors will navigate your new site.
    specification
    Put things down on paper, make sure they make sense. Identify everything that needs to be considered, consider it, plan it. All future actions stem from the specification, testing will be performed against the spec.
    design
    The fun part. Bringing color to all the things discussed in the previous two phases. Functionality comes into better focus, how the site will be used becomes for apparent, your brand is finally applied.
    development
    The boring part. The heads-down, quiet-music-playing-in-the-background phase of the project. Opportunity to get stuff done on your end, to get the building blocks built and to make course corrections as needed.
    build & test
    Putting things together and seeing if they work. Really, it’s like that. Sometimes adding content will break the design, sometimes a solution to a business problem is inadvertently discovered, we always use an issues list to track what needs to be done.
    go live
    The big day, and everything that goes into it: SEO plan, advertising plan, hosting situation, DNS transfer, training, email blast to existing clients… the launch party. Most importantly, the launch party.
  • 3.
  • 4. discovery
    Talk about abstracts.
    Lay down some thoughts on paper and build on them.
    Put up the scaffolding. Generate increasingly more complete wireframes until the scope is clear and the specification process can start.
    What’s a Wireframe?
  • 5. You say:
    “We’re an Interior Design company, so, we have tons of pictures that we want to highlight on the home page. Our market is very segmented, so we want to be able to speak to each segment on the home page before directing them to their own dedicated pages.”
  • 6. You say:
    “Yes, but our images are smaller than that. And we need to have the ability to place images in the text section as well. In fact, we would like to make that section a blog that we update daily or weekly. And our CEO wants a new tagline with the logo.”
  • 7. You say:
    “And we need to have visitors sign up for our mailing list.”
    “Got it. Let’s talk about your market segments.”
    I say:
  • 8.
  • 9.
  • 10. specification
    Describe each element of each page.
    Record all integrations with 3rd party applications, databases, payment systems, etc.
    Spell out how visitors will use your site.
    Spell out how you will use the site.
    What’s a Spec look like?
  • 11. It looks like this…
    Describe each element of each page.
    Record all integrations with 3rd party applications, databases, payment systems, etc.
    Spell out how visitors will use your site.
    Spell out how you will use the site.
  • 12. And like this…
    Outlines everything the designers and developers need to know to build the site.
  • 13.
  • 14.
  • 15. design
    Options presented based on wireframes and specification.
    Chance to discuss the visual as well as continue the visitor experience discussion.
    Set of page templates delivered
    What’s a design comp?
  • 16. wireframe
    Designs are based on the information and functional descriptions provided in the specification, as well the layout presented in the wireframes.
    design example 1
    Literal interpretation of wireframe.
    Main elements presented as outlined in the spec.
    Main image rotates to display market-segment-specific images, though market navigation is not clearly defined in this example.
  • 17. design example 2
    Less literal interpretation of wireframes.
    Market segmentation is presented inside the main image, with navigation moving to a horizontal access, but overall similar in layout to the presented wireframes.
  • 18. design example 3
    Least literal interpretation.
    Market segments are divided by the panels, which flip upon roll-over to present a new, market-specific image and link to landing page. More modern design, uses Flash.
  • 19.
  • 20.
  • 21. development
    Is boring.
    Is an opportunity for you to get things wrapped up on your end, like content creation.
    Consists of heads-down work, rarely attractive.
    How do we stay coordinated?
  • 22. basecamp
    Online project management tool.
    Access to your project provided at start of project.
    Tracks all milestones, files, comments, To-Do’s, etc. in real time.
    Eliminates confusion about project direction, scope.
    Continuous record of communications and decisions made.
  • 23.
  • 24.
  • 25. build and test
    Fit all the pieces together.
    Generate all pages of your site, begin filling with your content.
    Testing performed by us relative to spec, by you according to your vision.
    How do we track issues?
  • 26. basecamp
    Issues, bugs, defects, things that just aren’t right go in Issues List.
    Each issue has an owner.
    Real-time collaboration, does not replace good ol’ phone conversations.
    Goal is to resolve all issues.
  • 27.
  • 28.
  • 29. go live
    Site is built, testing is complete, all issues resolved.
    Flip the switch…
    Click to see Site Live!