: Wire framing over full design? 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

@Ravi4787994

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.



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.

Vote Up Vote Down

@Gail6891361

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



Wireframes

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

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.

Vote Up Vote Down