Every designer has a collection of tools that they find indispensable for doing their job. Some of these tools are popular ones that you will likely find in every designer’s toolbox, while others are not so well known.
Affinity Designer for Mac is not just a regular vector drawing app, the developers of the application have set themselves on a journey to redefine the tools available for creative professionals. Whenever words like ‘vectors’ , ‘illustration’ or ‘creative professionals’ are used, Adobe’s creative suite of apps are probably one of the first set of tools one refers to. Adobe Photoshop and Adobe Illustrator are unquestionably the most popular applications used for creating web graphics, designing UI and much more.
At times it seems Affinity Designer was designed specifically to dethrone Photoshop.
Not be confused with Affinity Photo, this Mac-based design software offers exclusive features to stand out against Photoshop’s deficits: Affinity Designer’s 1,000,000% zoom dwarfs 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 at around $50.
Affinity Designer is what we’re talking about when we describe new technology replacing the old. It’s quickly climbing its way up to go head-to-head with the old giants, who is starting to feel their age.
Photoshop remains one of the giants, and while it doesn’t target web design specifically, its visual capabilities still make it a powerful contender. This photo-editing software has come a long way from its roots of making fashion models look even skinnier.
For use as a web design tool, Photoshop offers a grid system, Smart Objects, and vector images (Vector Smart Objects). These features complement its popular photo-editing capabilities: color options, photography enhancement, and pen tool options give it an artistic advantage.
Anyone with a Swiss army knife knows that sometimes the smallest tools are the most useful.
Color theory has always been interwoven with web design (and all visual mediums), but is a distinct discipline on its own. Instead of memorizing everything, web designers can rely on tools like Coolors to fill in the finer color details.
This random color generator gives you any number of choices of color schemes proven to be effective.
You can still personalize the choices for your project with options to customize color choices and modify selections by hue, saturation, brightness, or temperature. Each entry features precise values for HEX, RGB, CMYK, PMS, and COPIC. This service is compatible with iOS, Android, Photoshop, and Illustrator.
Photoshop knows as well as anyone that being successful put a target on your back.
Like Affinity, Pixelmator attempts to poach some of Photoshop’s customer base with more specific web design features, such as “export for web” with an alternative interface. Keep in mind that Pixelmator is Mac-only and doesn’t support LAB color space, 32bpc, or EXR.
In short, Pixelmator is a top choice of simple web design projects, but might lack some power for heavier sites. It’s very affordable ($15) and one of the fastest design tools to learn. Think of it like a web design tool lite.
Sketch feels like an image editor built primarily for digital design instead – which is, in fact, its intention, according to founder Pieter Omvlee.
Also exclusive to Macs, Sketch has the advantage in transitioning designs to development: it integrates CSS logic from the start, and its Automatic Slicing feature creates assets in various formats with one-click exports.
Sketch also has access to the Magic Mirror plugin, helpful for modifying images and static designs like mock-ups – especially perspective mock-ups. This image transformation tool allows for non-destructive editing, retina-image support, multi-page referencing, and image-flipping.
But the real beauty of this plugin is in customizing stock photography. It’s easy to superimpose a screenshot from your company onto a screen in a stock photograph, saving you time and stress of commissioning your own photography.
While lacking the complexity of more thorough web design apps, InDesign is still capable of creating designs that can be exported to HTML. Compared to Sketch or Photoshop, InDesign also offers more typographic controls and built-in Typekit integration.
If you need to edit multiple text styles for a data-heavy site (e.g. news site), InDesign is still your friend. Its easy-to-edit paragraph and character styles are analogous to CSS block and inline properties, so quick changes to a single style instantly changes the whole document – just like CSS selectors.