I've experienced both PSD designs and wireframes in the past to work from, though never have I experienced using both. What's the main difference between a wireframe and a PSD mockup?

  • Could you put your question in a different way or post more deatails about what you'd like to know ? I'm not sure if I understand you correctly – wick3d Sep 24 '14 at 8:39

Wireframes and PSD mockups aren't either or, its one before the other if you deem beneficial.

enter preformatted text here


Wireframes act as a loose skeleton, placement, page flow and content introduction type decisions are made. Can be a time saver - you can change your idea easier than a mockup by moving un-styled boxes to see how things look in different placements.

-- Use when planning, either to present plans and/or for a personal guide.


Mockups are prototypes to decide aesthetics before production, stuff like color, style, typography etc. Gives you the ability to see what the final product will look like before hours of coding takes place, allows easier final revisions and prevents changes after coding takes place by seeing the outcome first.

-- Use when needed - proposals, to direct reference a design, or for many versions, etc

Both are preferential, some developers or designers just jump right into the code.

  • So you should always have the wireframe and lead into a mockup if deemed necessary? – Aravona Sep 24 '14 at 14:09
  • Nothing is mandatory in development :) If you are good at or prefer keeping your plan in your mind and can make revisions in your mind, and have good enough recollection or have no specific plan then no wireframe is needed – im_brian_d Sep 24 '14 at 14:11
  • I always start with a mockup, but your workflow is your own. Some devs jump right into coding. "if you decide it's beneficial." :) – im_brian_d Sep 24 '14 at 14:12
  • I'm either give a wireframe, or asked to make one, then we direct develop - I used to be simply given a PSD, hence my question as to what should be used. – Aravona Sep 24 '14 at 14:13
  • Thats because the planning, mock ups, discussions already took place. If you are planning something, use a mock up. If you have a plan, flesh it out with a PSD. Or decide to do neither. Its all circumstantial. Thats why I decided only to provide the usages of both vs my personal opinion as to whats best. – im_brian_d Sep 24 '14 at 14:17

Personally, I think a wire-frame serves as a precursor to either a full blown mock-up or a site designed on the fly as mentioned here. A wire-frame can be used as a rough draft, the same way you'd start with the very basic shape when drawing an animal or human figure.

How to draw an owl

Your workflow should be dictated by your working environment and preferences. If you're designing a site for a client, I would hesitate to present them with a Balsamiq mockup, though it would depend on their experience with web design. If they're capable of using their imagination to fill in the blanks and would like to be involved for every step of the way then that might be a good idea. But if all they're concerned about is the finished product, showing them a wire-frame might just be a distraction from completing the project.

If this is a personal project and you don't have a client to keep happy, use whatever works best for you. Some developers are capable of starting with a basic wire frame and coding straight from that, others are more comfortable using a program such as Photoshop or Illustrator to work out the styling details.

  • Great perspective for this, I only get given wireframes to develop from now, but used to get PSDs only and that's what piqued my interest for this question, I hadn't thought about it from this view. – Aravona Sep 24 '14 at 14:10
  • +1. Yes, this is a good answer from a very good perspective. I've never though of a wireframe like this. – Cary Bondoc Sep 25 '14 at 8:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.