process.html

---
layout: home
title: Nachiket Kumar | Process
permalink: /process/
---

<div class="row title">
  <div class="container">
    <div class="column two-thirds">
     <h1>Process</h1> 
     <p>Designing for the web is part art and part science. The science part includes having a certain process that one goes through while working on any project. A defined process ensures that one doesn't skip a crucial stage; what might at first seem like overkill usually isn't.</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="container">
    <div class="column two-thirds">      
      <h3>1. Research</h3>
      <p>The research phase is crucial. Depending on the project, this might have already been done by someone else, but as a designer it's imperative to understand the background of the project. Some key questions to ask are:</p>
      <ol>
        <li>What is the problem we are solving?</li>
        <li>Who are we solving this problem for?</li>
        <li>Why are we solving this problem?</li>
      </ol>
      <p>The answers to these main questions usually lead to more questions, and gathering feedback from the client helps establish a solid plan of action for the work. This phase should include customer interviews, to get details of what the end user is trying to achieve.</p>
      <h3>2. Sketching</h3>
      <p>Many designers make the mistake of jumping straight into their mockup tool of choice (Photoshop/Illustrator etc), but it's a lot smarter to do some low-fidelity sketches first. Paper is cheap and a pencil is faster than a mouse. Quick and rough sketches mean that you don't get too attached to any solution.</p>
    </div>
  </div>
</div>
<div class="row" style="background:#5E5F63;">
  <div class="container">
    <div class="column">
      <img src="/assets/sketch.png" alt="">
      <p class="caption" style="color:#ffffff;">Sketching user flows and mockups</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="container">
    <div class="column two-thirds">
      <p>
      I use this stage to:
        <ol>
          <li>Write out user flows for various tasks. What steps will a typical user go through to finish the task they want to? This helps start the process of thinking about the different screens/pages one might need to consider. Ryan Singer of Basecamp has an excellent post about <a href="http://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows" title="Shorthand for Designing UI Flows">designing UI flows</a>.</li>
          <li>Figure out the basic building blocks for each view. What are the main elements that are needed on the view so that the user can do what they need to do without being distracted or confused?</li>
          <li>Think about hierarchy of information and how to use it to move the user along to the next step.</li>
        </ol>
      </p>
    </div>
  </div>
</div>

<div class="row">
  <div class="container">
    <div class="column two-thirds">
      <h3>3. Wireframing</h3>
      <p>Sometimes the sketching phase isn't distinct from wireframing, depending on how refined the initial sketches were. Wireframes formalize the sketches a little bit if they finished at a very rough state. Depending on the needs of the project, these could be made (using a tool like <a href="http://axure.com">Axure</a>/<a href="http://invisionapp.com">Invision</a>/<a href="http://www.apple.com/mac/keynote/">Keynote</a> or something else of your choice) interactive or static.</p>
    </div>
  </div>
</div>
<div class="row" style="background:#e7e7e7;padding-bottom:20px;">
  <div class="container">
    <div class="column two-thirds">
      <img src="/assets/wireframe.svg" alt="">
    </div>
    <div class="column one-third">
      <p class="caption">Screenshot of interactive wireframe made using Invision.</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="container">
    <div class="column two-thirds">
      <p>I prefer to keep these fairly low-fidelity as well, since this is not the stage to worry about colors, typography, or other important details of visual design/communication. It also helps keep the focus on figuring out whether the flow is working or not. Quick user testing with these wireframes helps reveal flaws in my thinking or assumptions, and reinforce the importance of keeping the end user in mind.</p>
      <h3>4. Visual Design</h3>
      <p>This is the fun part, where the needs of the project are taken into consideration to come up with a look and feel of the solution. This is a good time to play with colors, typefaces, visual styles etc. Generating a style guide to help with development work is a great idea as well. I prefer this method because the look and feel of a website or an app is a result of how the various elements interact— type, color, buttons, links, forms etc.</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="container">
    <div class="column">
      <h3>5. Development</h3>
      <img src="/assets/development.png" alt="">
    </div>
    <div class="column two-thirds">
      <p>Depending on the team I am working with, I may or may not be involved with development. I am happy to transform my design into markup, but it makes sense to collaborate with dedicated developers on more complex projects. However, I have the ability to make smaller changes on the fly if needed, rather than bothering a developer to move that button 3px to the left!</p>
    </div>
  </div>
</div>