Create Website Mockups with WebZap, a Must Have Photoshop Plugin

When working on a mockup for a new website, or in the process of redesigning a previous website, there are many tools at a designer’s disposal. Lorem Ipsum generators for placeholder text, dummy image generators, and even button generators.

While those are all wonderful resources to use, they aren’t necessarily conducive to a designer’s workflow. Luckily for those who want to save valuable time, UI Parade, also behind DevRocket, has released an incredible plugin for Photoshop CS5 (and newer) that allows for simple mockups. WebZap.

At its core WebZap has a powerful layout generator that lets you create web page mockups…

One of the most important aspects of this tool is the fact that it’s a plugin for Photoshop. No more having to switch from your browser to Photoshop in an effort to create a layout you’re proud to call your own. Having this entire tool-kit at your disposal, all within an industry standard program is nothing shy of incredible. Everything can be compiled together without ever switching windows or screens.

One of the most difficult things when working on a mock up is styling text for the web. Thankfully, even the process of styling text is streamlined to its simplest from within WebZap. Lorem Ipsum comes pre-formatted in various layouts. From there, headers, paragraphs, and links can all be formatted, fine-tuned, and then implemented en masse on new text you input into your layout.

To top it all off, WebZap creates previews within Photoshop; and not just jpegs of the mockup. It allows you to create previews that are completely rendered onto various devices: mobile, tablet, and desktops. As designers, we know presentation is almost, if not as significant, as the design itself. When being able to present a website mockup, rendered on a device is this easy, both you and your client couldn’t be more thrilled. It saves you precious time and allows your client to see it modeled on the devices it will be consumed on.

While I’ve only ever used various templates for getting started with websites, I went ahead and purchased WebZap; somewhat to actually create layouts for future adventures, but mostly to just play around and take a look at the plugin. For $15, it’s an extremely cheap solution for something that will save you countless hours in the future.

Jumpstarting a Design Community

Understand Your Compensation

Designer Monoculture

The State of Design Leadership

The Science of Product Design

Interview with Michael Flarup: Co-Founder and Lead Designer at Robocat

The Importance of Design Conventions