What is your process for design?

almost 9 years ago from , Design Guy at DigitalOcean

Depends on the project of course, but usually my process looks similar to this:

  • Sketch out base wireframe on paper
  • Create moodboard for visual style
  • Get into Sketch/PS and get the base layout together, along with some general ideas for visual style
  • Get into HTML/CSS/jQuery pretty quickly after that. I usually spend most of my time here, just refining the visual design as I go.
  • Jump back into Sketch/PS/AE to fine tune animations, tweak assets, and generally polish everything up.

What's your general process looking like these days?


  • Wes OudshoornWes Oudshoorn, almost 9 years ago (edited almost 9 years ago )

    Talk to customer - Understand problem - Sketch solutions

    Talk to customer - Pick solutions - Sketch some more

    Talk to customer - Design / prototype - Test

    Talk to customer - Iterate

    Talk to customer - HTML / CSS / JS / Coding

    Talk to customer - Fix issues - Launch Talk to customer

    21 points
  • Joseph BarrientosJoseph Barrientos, almost 9 years ago

    Depends on if its my in house work or freelance.


    -hold meeting to get full project scope and any ideas they may have

    -begin VERY basic wireframes and start on a mood board

    -design 1-3 versions with different styles from a high level only doing 1-2 pages to get the style agreed on

    -spend the rest of the project iterating until we meet the deadline

    In House: CHAOS

    5 points
    • Sacha GreifSacha Greif, almost 9 years ago

      In House: CHAOS

      This. My own personal experience shows that the very notion of "process" disappears when you stop working for a client and starts building your own projects.

      You quickly go from ”what does the masterplan say we should work on next?” to “what is the most urgent thing to do right now out of the 457 items on our to-do list?”.

      3 points
      • Mitch Malone, almost 9 years ago


        what is the most urgent thing to do right now

        A process helps when you don't know what to do next.

        1 point
        • Todd SielingTodd Sieling, almost 9 years ago

          When we build our own stuff the process becomes more implicit than explicit, but it's still there. It informs how those urgent things are identified, prioritized, and acted on.

          I think that reality is great; it makes our team very efficient when we work on our own stuff, but every so often it helps to recognize that there is a process in play, and to evaluate what's going on in it. Keeps things fresh.

          0 points
  • Tom DurkinTom Durkin, almost 9 years ago
    1. Ask client for their brand colours and examples of websites they like. (I find this really useful)

    2. Mock something up the first day I get the work (PS) because I'm excited. IMPORTANT - absolutely do not finish the work... leave it hanging.

    3. Last evening before visuals are due, revisit mock-ups from point 2, panic like crazy, convince myself they are terrible and inevitably redesign the whole site from scratch.

    4. Stay up all night to meet the deadline

    5. Send to clients - don't hear from them for days

    6. Chase up client with emails

    7. Finally get approval

    8. Start the coding.

    I honestly wish it was more glamorous but this is usually the case.

    1 point
  • Nicholas MandelbaumNicholas Mandelbaum, almost 9 years ago

    Hi, I think it's important to include developers from the early stages. Unless you are going to develop yourself, it's vital to keep an eye on the feasibility/budget of the whole operation, keep a reality check on the ideas. At some stage, you'll want to forget about technic and get wild in your ideas, but when closing the scope, I don't see how I could do without some good technical strategy.

    1 point
  • Jonathan MattheyJonathan Matthey, almost 9 years ago

    dribbble dribbble dribbble dribbble dribbble dribbble


    1 point
  • barry saundersbarry saunders, almost 9 years ago
    • throw shit at a wall
    • see what sticks

    Or in less uncouth terms: - ideate - review - iterate

    0 points
  • Jessica PhanJessica Phan, almost 9 years ago (edited almost 9 years ago )

    At ZURB, we:

    • DEFINE (Conduct Research) - Here's where we'll go through Business Goals, Touchpoint Maps, Business/User Needs, Opportunities and Product Blueprint

    • IDEATE (Create Concepts) - Here, we work on ideation sketches, stories and user flows, lo-fi sketches.

    • PROTOTYPE (Validate Ideas) - In this part of the process we begin hi-fi wireframes, conduct user testing from the prototype and complete our design spec.

    • BUILD (Produce the Product) - We hop into creative direction, design layouts, front-end code. Then move forward to finish and QA the product, then create a coded style guide.

    • ANALYZE (Gain Insights) - In this part, we conduct research, user feedback, do a competitive review and audit.

    Each project is unique so we can start anywhere, where fit for the business goals and user needs, in the process.

    0 points
  • Darth BaneDarth Bane, almost 9 years ago
    1. Research. Talk to client and understand all the problems we're solving. This usually takes me a few days and consists of sketching a bit, making user journeys, and simplifying the core issues.

    2. If the client requires it, we do wireframing. Pen and paper. But hopefully, this step is skipped and we move on to:

    3. Prototyping. I usually put together a live web page containing all the main elements on one page, but separated out. This is what the nav bar would look like, this is what a card would look like, etc.

    4. If the client is happy with that direction, I start getting into colour palettes and typography, important this is decided before I attempt to put things together.

    5. Build. If it's a website I start putting it together in-browser, building it based on the prototypes and implementing the colour palette. If it's an app I use Photoshop or Sketch, depending on mood.

    6. Drip feed the client some "finished" bits and pieces, or, if you're feeling brave, send them a link to the live staging site so they can follow along in your design process.

    7. When you're happy with the design, sit down with it and tear it up. Challenge everything, take away as much as possible.

    8. Present the final design to the client. Go back and tweak based on feedback. Hand over. Grab a beer. Pet your dog. Cry a little. Repeat from step #1.

    0 points
  • Owais FarooqiOwais Farooqi, almost 9 years ago

    Step 1: Gather requirements.

    Step 2: Understand problem.

    Step 3: Brain storming.

    Step 4: Create mood board.

    Step 5: Design

    0 points
  • Diego LafuenteDiego Lafuente, almost 9 years ago (edited almost 9 years ago )

    I changed after years of same standard process.

    Now what i do is prototype a raw app or webapp and I do it with full of interaction possible. I stress the prototype till the point I feel comfortable using it. When I reached the point out of the stress interaction it feels ok, I start immediately a test with real people. I take lots of notes and I will want to test how they receive the design patterns, if they understand the language used, etc. The I iterate till the point I feel I solved most of the critical problems, we call the "showstoppers". Then I start to explore styles to fashion the app as well the copy.

    Then I spent time developing the style wich can vary many times depending the mood, the information I have in that moment or the ammount of inspiration I get.

    0 points
  • Todd SielingTodd Sieling, almost 9 years ago

    People > truth > idea > create > launch > refine.

    0 points
  • Nathan NNathan N, almost 9 years ago (edited almost 9 years ago )

    This is the bulk of my work on a regular basis, I rarely get to do visual design anymore since the research stuff is so time consuming.

    • Collect business requirements
    • Competitive audit
    • User research
    • Personas (if required)
    • Sitemap
    • Information Architecture
    • Prototype (The fun part!)
    • Usability test (this also involves creating a discussion guide and task goals)
    0 points
  • Thibault MaekelberghThibault Maekelbergh, almost 9 years ago
    • Note down features or ideas in general in Evernote
    • Make a wireframe on paper or in Balsamiq
    • Dig into AI / PS / Sketch
    • Set up everything for frameworks or Codekit
    • HTML / CSS / JS development
    • If required, when frontend is done I move over to backend (PHP)
    • Make small edits on design and code where necessary.

    And GitHub from time to time to commit when including a new feature.

    0 points