Design process

Dave!

Hey guys,

For the designers in here, I'm just looking for a bit of insight into your design process! Say you get a brief (or just a vague idea) for a website/app, and you sit down to start designing it. What's the first thing you do? And where do you go from there?

There are various approaches I've seen described:

-Go looking for inspiration... Colours, concepts, textures, etc., in the real world perhaps. Or there are some online resources which are good for keeping scrapbooks and so on, and tagging certain things which you can return to
-Sketching
-Wireframing
-Straight to image editing software for a mockup? Is Photoshop everyone's favourite, or is there a better choice?
-Straight to HTML? Designing in the browser seems to be becoming popular lately, given some of the cool features that CSS3 provides (rounded corners, dropshadow, gradients)

Do you start with an existing logo or brand and build a swatch from that?

If you're into responsive design, do you start designing for the smartphones first, or for desktops?

I'd love to hear any insights you have!

This is stemming from me just having watched this awesome video, which gives an insight into Jason Fried's (from 37Signals) process. Definitely worth a watch.

http://www.davegrayinfo.com/2010/11/19/180/

solarith

When I'm doing an App, I try to keep a thought into Apple's Human Interface Guidelines, they really offer a lot of sense when designing. Things like - keep the most used information at the top of the App, keep the UI consistent with that of the Phone in general. This stuff is basic, but it's really important: the user doesn't even notice it. Always try and have every menu, every button and every label as a user would expect it to work. If you are testing it, and you think for a second "this should be there", then it _must_ go there! I'm kind of rambling here so I need to format things a bit better. Everything here is my opinion and I'm certainly not saying I'm right or wrong, it's just my opinion so take it as you will!

Colours, Look and Feel > Well, it's obvious maybe, but everything here should take inspiration from the theme of the app itself. You don't want a brushed metal App that designs cartoons. Apple are recently mimicking real word look and feel into their Apps - they've faux leather and torn pages in iCal for example. I like this, many don't. Just try to represent the function of the App as much as you can in how it feels.

Sketching > Sketching is good. I always sketch. Helps me work out things better. I often take a few hours, revisit the sketch and I feel it's totally wrong and start over.

Wireframing > Would think this is more to do with 3D modeling, or am I missing a trick here?

off.the.walls

my process

1. idea generation, whats it going to look like hows it going to work
2. rough sketches--pen to paper don't touch a computer yet.
3. photoshop and element designs--logos--image resizers
4. html writing, content only still haven't touched styling
5. css styling get the page looking very nice
6. jQuery coding(if needed)
7. client viewing
8. ????
9. Profit.

Dave!

Noone else?

Cianos

For web design, first off I usually Google around for other sites in the client's field. I save a bunch of the nicest ones, and generally figure out what works and what doesn't, before starting the design process.

I read before that the start of the design process should always start with a thick marker and a sheet of paper, which I'd agree with. There's nothing better than working on something physical to get ideas down. Be liberal with the sheets of paper and chuck things that don't work, point arrows explaining bits, leave it for a while, come back to it until you've got an idea you're happy with.

Once I have the rough idea in place I take it to photoshop and begin a mock up to capture the look/feel I have in mind for the client. Once I'm happy with the direction it's a matter of fine tuning all the graphics (still in Photoshop for me), and seeing if it still works. I'm usually happy to send the client an earlyish concept and ask for their feedback, to avoid a few hours on something they just don't like.

Often, once you start putting down in detail all your 'great' ideas you find they just don't work, so it's a process of jigging things around, a bit of experimentation etc to bring things together.

For more complex projects, basic usability tests are absolutely brilliant. Asking someone to use something for the first time reveals more about its worth in a few seconds than the hours you spent working on it. The goal here is to consistently have new users 'getting' the concept and performing the desired actions, which can take a lot of tweaking, but totally worth it especially during the design phase when changes are easily made.

Trojan

I'm a developer/project manager, not a designer, so I work with (awesome) graphics designers to get the site done. I almost always work with a CMS - in 95% of cases WordPress, but occasionally Drupal, Joomla, Expression Engine for content sites, or Magento for ecommerce.

Here's how I do design and build for simple sites.

1) research existing competition, take screenshots with Screengrab
2) draw homepage and subpage templates (usually 3-4 templates in total) out on paper with pencil (not a marker guy). Lots of paper, often hours of meetings with clients, and sometimes I or designer will create wireframes of some or all pages.

Now depending on the project budget, I go one of two ways:

3A) Work with my graphic designer to create a couple of homepage mockups in Illustrator/Photoshop
4A) Share with client and get feedback
5A) Rinse and repeat several iterations while discussing with designer and client
6A) Once we're happy with a general look and feel of homepage, we start on subpage templates (this sounds quick and simple but can take days or weeks)
7A) Once we're happy with that, we send the PSDs to be coded as HTML or sometimes straight to the CMS template format (e.g. WordPress theme). (Edit: sometimes when we're coding "from scratch" we'll still extend off an existing theme framework like Genesis.)
8A) We create a test install, add some mockup content, or better, actual client content. Often need JS coders for functionality at this stage.
9A) Review with designer then client, create snag list, fix issues.

Or:

3B) Work with graphic designer to find several suitable "premium templates" for the CMS of choice (e.g. paid WordPress theme from WooThemes, Themeforest, etc)
4B) Narrow premium templates to shortlist of 4-5 and test in multiple devices, check creator feedback etc.
5B) Share premium templates with client for feedback, discuss options and ramifications (some templates require lots of content etc)
6B) Choose premium templates, purchase and install
7B) Start customisation process with designer - add client logo, colour scheme. (Aside: mostly using Child Themes in WP to avoid issues)
8B) Change typography, background imagery, etc. Add any other functionality necessary.
9B) Review with client, create snag list, fix issues

Then:

10) Testing in multiple browsers and devices (the joys). Testing with users as budgets allow.
11) Once we've settled on 95% of design issues, performance optimisation of images, CSS etc
12) More testing, addition of real content
13) Sign-off.

That's roughly it. Typing off top of my head so may have missed something. Also the deployment stage is more complex than a quick list implies. I have a project template in Basecamp that I use on projects to ensure I haven't missed anything, client is regularly updated, designer(s) have a single location to keep files, etc.

A couple more things - once we have any kind of codebase, either our own design coded, or a child theme etc, I put it into a Mercurial repository on bitbucket. I try and keep that regularly updated with commits and syncs.

I'm sure I've left out stuff from the process, and for larger projects (web apps etc) it's usually dependent on the nature of the project. Feedback or suggestions appreciated.

Dave!

Thanks for the detailed outline Trojan! Very interesting

Trojan

Thank Cianos, his mention of using markers - which I agree with but don't do - reminded me I had wanted to reply