Mock first or Photoshop first

Get Started
1

Hi, am new to the web design world and not sure which of the two is the norm and standard approach:

  1. Design in Balsamiq or Azure with the mock and functionality, then beautify it by a designer.
  2. Design in Photoshop as a view of how it may look like, and then generate corresponding CSS & HTML.

My thought initially was 2) above as that gives the designers the most freedom in putting together something that looks nice, is easy to use, and then generate the CSS and HTML later. However I have also seen some comments on the web suggesting that it’s best to use a mock tool first by going through 1) before applying any beautification process.

Can someone please enlighten me if there are any pros and cons for doing either approach? Is there one approach that is more typically used? Or this is purely personal preference?

2

At first you sketch the website, its structure, think of the functionality, then you design it in Photoshop. At least thats how i do it. Not using Azure or anything else. Just word documents, paper, and things like that. I`m not very systematic either :slight_smile:

3

It’s best to start with the content. Optimize that, organize it, work out how it should be structured and presented, and you have your site/page structure. Then build up a wireframe that puts everything in place. Then start to weave a design/look around that wireframe. What tool you use is up to you, but there’s a trend away from image programs like Photoshp to designing in the browser itself. A website is not a pretty picture.