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

Depends on if its my in house work or freelance.

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

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.

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.

dribbble dribbble dribbble dribbble dribbble dribbble

:D

• throw shit at a wall
• see what sticks

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

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.

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.

Step 1: Gather requirements.

Step 2: Understand problem.

Step 3: Brain storming.

Step 4: Create mood board.

Step 5: Design

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.

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

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)

• 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.