I was just interested to know whether most people here use photoshop or similar to always mock up their designs before creating the final site in a code editor.

 

Would you say a mock up is essential? Or just trial and error the design through pure code editing?

 

If you don't have photoshop what else could you use to mock up the design? Does anyone use pen/paper and then straight to the editor?

 

Im just after some common ground rules for my new adventure.

I've always done HTML mockups (ever since 1998) so clients can get a feel to how the site actually works, rather than being distracted by how it looks. I often start with a simple greyscale version that interacts with different view types (eg home page, category page, section page, entry page), then start filling in with colour etc later in the process.

 

This method has been a total boon since responsive design kicked off, I was already ahead of the game

 

By all means use static image comps if you want but if you want to cover the multitude of devices you'll end up doing many many versions and all that takes time and adds to your clients bill, and not least endless changes because your client wants to try a different shade of blue.

 

A more modern approach may be to utilise Style Tiles or Atomic design (Google them!)

I have been using only Photoshop until month ago . I have discovered Prototyping tools like Balsamiq . It 10 times better to use Prototyping - Mockup tools beacouse it increase the

speed of creating whole design . Now I use mockup tools to create the first mockup and when client approves it I start to creating in Photoshop . Belive me it is really helpfull .

 

I use Evols Pencil .

Edited April 22, 201412 yr by gagarindes

Generally I'll create loose wireframes in Illustrator that the client will sign off. This just gives us a 'bare-bones' look at the content on the site, and allows us to focus on how the information will flow. Any effects/transitions etc I'll either mock up (some people use After Effects to show the animation but I rarely have the time) or simply find an example of online.

 

From here I'll create pixel-perfect PSDs that allow us to see what the site will look like when it's live. I'll often create the page as wide as my screen resolution, export it as a JPEG and open this up in a web browser. From here I can see what needs tweaking in terms of sizes without the Photoshop interface affecting my perception.

 

Once everything's signed off, the PSDs and any additional content (icons, images, etc) are handed over to the developer who can code it up. Everything they need is in there; measurements, fonts, text-sizes, colours, etc. This ensures that what the developer creates will match the PSD design exactly, though from some past experiences, this isn't always the case

I was just interested to know whether most people here use photoshop or similar to always mock up their designs before creating the final site in a code editor.

 

Would you say a mock up is essential? Or just trial and error the design through pure code editing?

 

If you don't have photoshop what else could you use to mock up the design? Does anyone use pen/paper and then straight to the editor?

 

Im just after some common ground rules for my new adventure.

 

 

I have been using only Photoshop until month ago . I have discovered Prototyping tools like Balsamiq . It 10 times better to use Prototyping - Mockup tools beacouse it increase the

speed of creating whole design . Now I use mockup tools to create the first mockup and when client approves it I start to creating in Photoshop . Belive me it is really helpfull .

 

I use Evols Pencil .

Except @gagarindes, on 22 Apr 2014 - 10:54 PM, said: Balsamiq, there are also some other prototype tools like Axure, MockupBuilder, Mockup Plus, Invision and Visio. I can not tell you which one is best. It depends on you. You can try all of them to select the perfect one for you. I just give you a notification.