These resources go with a presentation I gave on May 20th, 2012 for the North Bay Web Conference.

Being a web designer/front-end developer in 2003 was a lot easier than in 2012. There are lots of new things to learn – it can be overwhelming. In this talk I go over how a typical “kickoff meeting » Photoshop comps » coding » launch” style of workflow no longer suffices. We need a new workflow, which includes accommodations for responsive design, and much more complexity.

So Where do We Start

Establish expectations

  • What is the desired outcome?
  • Is it measurable?
  • You need to do your own diagnosis of the problem. Don’t rely on the client to accurately assess the problem. That is part of the expertise they are hiring you for.

Budget

  • What is possible with budget? The budget determines what type of team and often technology you ultimately use.
  • Educating the client about what is possible within that budget is your job. Don’t let them dictate what they should get for a certain budget.
  • Establish expectations. “Google offers <insert your favorite functionality here> for free, why do you charge for/can’t you build the same thing?”
  • Ensure you discuss a Maintenance Agreement. Modern sites need continued care and feeding.

Scope

  • Business Goals: Define business goals up front. What will be the measure of success?
  • User Goals: Focus on user tasks. What is necessary to satisfy the tasks a user wants to accomplish on the site?
  • Use “Use Cases” to understand the scope of a tasks. Drawing out the user flows highlights hidden complexities.
  • 3 essential questions for managing scope creep: Why scope creep is your fault.

Team

A successful website project requires close collaboration between IA, Creative, and Technology. A smaller team will have fewer specialists, in which case all members will need to pick up the slack and be familiar with all disciplines. As the budget increases, it is suggested to add the team members as you go down the list. A small project may only have a designer/developer who will wear many hats.

  • Designer/Developer: Most freelancers end up falling in this category by default. By necessity, they will fill all the other roles.
  • Developer
  • Project Manager
  • Information Designer (User eXperience, User Interface, Information Architecture)
  • Content Strategist
  • Engineer (Developer)
  • Researcher

Successful Sites…

Workflow

  • Research + Sketch
    • Figure out User Flows + Goals
    • Content: Determine the content attributes & structure. There are many tools.
    • Determine what modules/components the site will have. Ex: navigation, social proof, newsletter sign-up, slideshows. Building your pattern library for the site ensures easy adaptation, and maintenance.”The ability to work on small clusters in high-fidelity (in a browser), while developing an overall experience in low-fidelity (sketches in notebooks, style tiles in Photoshop), is the mark of a designer who understands the nature of the web.”~@nicewebtype 
    • Sketch: Through all this research, you should be sketching out ideas on paper. Do thumbnails of whole page layouts, and larger sketches of modules. Use some paper.
  • Prototype/Wireframe
  • Style Tiles: A little bit mood board, a little bit Photoshop comp.
  • Design = increasing the fidelity of your prototype. Applying the approved styles to the prototype. Generate the refinements in Photoshop or similar. Many refinements can now be done with CSS3.
  • Iterate & Prioritize: Include the client in the feedback look, choose where to focus your attention, and do more sketches.
  • Optimize: Make that site run as fast as humanly possible. Learn how to use Chrome Dev Tools.
  • Communicate: The highlight of this way of working is the client can be part of the feedback loop, avoiding the ever nerve-wracking “Big Reveal”. Doing so gives them ownership, and avoids any problems of going too far in a the wrong direction. They also get clear about what it means when you say “It will look different on different devices and browsers.”

Responsive Design

Conclusion

The web is changing fast, and unless you want to be left holding your 960px PSDs, with no projects on the horizon, now is the time to learn more about this. Start small, and think big.

Posted in Planning, Presentations, Responsive Design, Workflow

2 Comments

  1. Dana Woodman on May 21, 2012 at 10:13 am

    Ben,

    Your talk yesterday was great, it was a real pleasure! There were some great tidbits that I found particularly useful to my own process.

    Thanks for all your work and for writing up the notes to the talk for reference!

    On a side note, I seem to remember seeing a slide about a template you use for content creation and I can’t seem to find it in the writeup, any chance you have a link to that?

    Again, thanks for the talk, I hope we can chat soon!

    Dana

    Reply

Leave a Comment