Mock first or Photoshop first
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?
I think it really depends on a few factors.
In my professional experience I've seen both. We often had landing pages (typically used for A/B split testing, but occasionally new campaigns/promotions) built in Photoshop by our designer, and then I would build said pages. When my company redid their website, our designer pretty much came up with everything from scratch in Photoshop again. The only difference would have been there was a basic outline of things we did need to have on each page, but other than that no real framework.
There have also been many times where a page will be built essentially as a mock-up first, and once the functionality is in place design elements and styling are added to make the page more visually appealing to users. This tends to be the case when it's a page that is more code/programming heavy (vs content).
So ultimately that would be my best way to distinguish between the two cases. If a page is more content-based than code-based, it should probably be designed first. But if a page is less about the content and more about some sort of front-end/back-end coding and/or processing, a mock should probably be built to provide an outline for design.
Last edited by Sup3rkirby; 04-28-2014 at 02:54 PM.
Can you give some examples of why you meant by code-based or content-based?
So a 'code-based' example would be something that mostly relies on back/front-end systems to actually be of use. This could include certain order forms/pages, or pages that need to write to databases (typically with specific information or data structures). Basically, if there are specific requirements for what must be on a page then it's probably best to do a mock-design first and let a designer polish it up.
And so examples of 'content-based' pages would be things geared more towards marketing or basic conversions (like email signups). Pages such as promotions/advertisements, newsletter signups, etc. are probably best handled by a designer in Photoshop initially, and then built out by a developer later.
All to often left out: a usability expert driving the design process to make sure it maximizes ease of use, click-through rates, etc. There are few things more wasteful than an artistically gorgeous site built with amazing cutting-edge code that nobody actually can/will use.
"Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
~ Terry Pratchett in Nation
I used to mock up web pages in image editors first. After many years of web developing, I mock up web pages in html if I need to. Using html makes more sense to me, and makes making changes much easier, and best of all if the concept works, you have very little to change in order to implement the web page.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)