The 10 best web mockup tools of 2015

06. PhotoLine

PhotoLine homepage

PhotoLine has been called "one of the web's best kept secrets"

The underdog of this list, PhotoLine is a lot smaller (26.4 MB on Mac, 22MB on Windows) and less expensive than Adobe products (€59), but users claim it contends with the giants and praise it as "one of the web's best kept secrets". The German brothers who designed it had efficient coding in mind.

Available for both Windows and Mac, Photoline offers many of the same features as bigger apps — nondestructive layers, vector editing, photo editing, desktop publishing and text layout capabilities — and even some they don't, like multi-layered EXR importing and exporting.

07. Affinity Designer

Affinity Designer homepage

Affinity Designer's million-per-cent zoom dwarfs Photoshop's

It seems that the specialty of Affinity Designer (as opposed to Affinity Photo) is in outperforming Photoshop. This app is designed for those that aren't quite satisfied with Photoshop, and offers exclusive features to distinguish itself, like the 1,000,000% zoom (dwarfing Photoshop's 32,000%). Its interface is designed to be a more efficient layout than its competitors, and it's also a fraction of the cost, around $50.

Winner of the Apple Design Award 2015, Affinity Designer is clawing its way up the ranks as a favorite of graphic designers.

Discover 15 pro tips for Affinity Designer

08. Draw.io

Draw.io homepage

Draw.io is quick and easy to pick up

For the sake of simplicity, Draw.io is a free online tool that offers a full experience to rival its paid counterparts. Obviously limited in its depth, for simple shapes and layout design, Draw.io is quick, easy, and convenient.

One advantage of Draw.io is its seamless integration with Google Drive, Dropbox, and Chrome. For mockups, be sure to unlock the elements specifically for mockups: go to "More Shapes…" and click the Mockup box under software.

09. Coolors

Coolors homepage

Generate random colour schemes with precise values using free tool Coolors

Aside from editing software, there are lots of secondary resources to help with mockup creation. Colours, especially, can be difficult when it comes time to pinpoint specific values.

Coolors describes itself as a "super fast colour scheme generator". With a click, this free tool generates random colour schemes with precise values for HEX, RGB, CMYK, PMS, and COPIC. You can further customize the selections by hue, saturation, brightness, or temperature. This service is compatible with iOS, Android, Photoshop, and Illustrator.

10. Color Safe

Color Safe homepage

Make sure your colours are readable with the Color Safe tool

Color Safe is a tool specifically for the readalibilty of text colors; accessibility guidelines and common web design sense call for adequate colour contrast between text and background for legibility.

Users enter the value of their background color, along with font information and the desired WCAG standard. The system then calculates the optimum colour choices based on the WCAG, with values for HEX and RGB. This is a quite time saver as long as you've already decided your background.

Takeaway

Ultimately, what it comes down to is personal preference. If you grew up on Photoshop and it doesn't limit your web design work, why bother learning an entirely new tool? If you do feel limited, there are plenty of other options.

Tools for static designs are varied with different features to appeal to different tastes and sensibilities. Use whatever is most comfortable for you, even if it's old-fashioned paper and pencil.

Words: Matt Ellis

Matt Ellis is a design writer.

Liked this? Read these!

Topics

UX