Mockups are a visual document, ranging from medium to high fidelity and aiming at as close to pixel-perfect as is able — and practical from a developer's standpoint.
To help you along your design journey without a hitch in your step, here are a list of the 10 best and up-to-date web design tools and resources for web mockups.
Some old classics still rule the landscape, but designers looking to up their game should definitely check out some of the newcomers.
01. Adobe Photoshop
Let's start with one of the giants in static web design images, Photoshop. This photo-editing software has come a long way from its roots of making fashion models look even skinnier.
Photoshop's use of a grid system, Smart Objects, and vector images (Vector Smart Objects) allows for easier implementation on web design, while its native visual options for colors, photography enhancing, and pen tool options give it an artistic advantage.
Discover the 100 best Photoshop tutorials
One of the most popular alternatives to Photoshop, Pixelmator offers similar features including "export for web" with an alternative interface, as long as you're working on a Mac. Pixelmator does not have the depth of Photoshop, and is missing professional components like Lab colour space, 32bpc, and EXR support.
In short, Pixelmator's easier to user for simple images, but can't handle the complexity of more-involved projects.
Read our review of Pixelmator.
Sketch comes across as if Photoshop had been built primarily for digital design instead of photo editing. This was, in fact, the intention, according to founder Pieter Omvlee. Also only for Mac, Sketch has the advantage in transitions designs to development: it integrates CSS logic from the start, and its Automatic Slicing feature creates assets in various formats with one-click exports.
One of the best Sketch plugins is the Magic Mirror plugin, a great assistance for perspective mockups. This image transformation tool allows for non-destructive editing, retina-image support, multi-page referencing, and image-flipping. Even outside of mockup design, this plugin works wonders for inserting custom images into stock photos to personalize them.
Learn how to get started with Sketch.
UXPin has been named in top ten web design tool lists before. The app actually covers the entire design process, from static wireframes to hi-fi mockups and animated prototypes.
One of UXPin's unique features is that it can import both Photoshop and Sketch files directly, while preserving all layers and other elements for prototyping. This lets designers create mockups in their preferred app, without separating it from the rest of the project.
05. Adobe InDesign
While lacking the complexity of more thorough design apps, InDesign is still capable of creating static mockup designs that can be exported in HTML. Don't get your hopes up: this doesn't export web-ready output, but rather the HTML markup for your content in the right order (neither optimized nor cross-browser compliant).
Discover 44 brilliant InDesign tutorials
Next page: five more essential web mock-up tools