My first experiences with Affinity Designer

As the senior member of staff on the team (in terms of age, not rank) I've been designing websites for a long, long time and much has changed during this time in terms of what the sites I create look like but one thing has remained constant: Adobe Photoshop. Every site design I've ever created began life as a blank canvas in Photoshop. This has always struck me as weird.

Photoshop, as the name clearly suggests, is a piece of photo editing software aimed squarely at professional photographers to allow them to modify, tweak and improve their digital images. Following all the fuss made over doctored images in newspapers and magazines the term "Photoshopped" even entered the public's conscious some time ago making the humble software package something of a pantomime villain wielded by unscrupulous image editors.

So, you might well ask, and I often do, what has Photoshop got to do with web design? Well, not much to be honest other than by using the tools within it, mostly designed for the photographers it's aimed at, it is possible to create a website design in the same way it's entirely possible to recreate the Mona Lisa in Microsoft Paint. But why would you? Because there's nothing else... until now.

I've always been frustrated by the the lack of a dedicated software package specifically for web designers (please no-one mention Macromedia/Adobe Fireworks) and catering to their unique needs so I was intrigued and excited when I heard about Affinity Designer by Serif.

Now, Affinity Designer's sister product Affinity Photo had been making waves over on Apple devices winning countless awards and rave reviews from industry critics and users alike so their pedigree was certainly good meaning I had high hopes even before I'd made a purchase. Speaking of purchase, another attractive aspect of Affinity Designer is the pricing model. Unlike Adobe's expensive subscription plans I can buy Designer outright and receive regular software updates with bug fixes and meaningful enhancements all for the meagre sun of £48.99 (or £38.99 if it's on a 20% off sale as it often is). So far you may be thinking it all sounds a little too good to be true...

After installing Designer and getting over the shock of change that an old dog like me dreads I was pleasantly surprised. The overall interface is easy on the eye, the tools and palettes bear a similar resemblance to their Photoshop equivalents so I didn't feel as though I was learning everything from scratch and the fact it's all vector based means you can achieve super-high levels of detail and control in a design, a nice change form always working with pixels in Photoshop.

I won't detail all the features and functions available in Affinity Designer, you can get all that on Affinity website, but what I will do is list out a few of the headline items that have already made a significant difference to the way I work and why I won't be going back to Photoshop any time soon.

This is so, so good and probably top of my "features most interested in" list. A symbol is a single layer or a complex group of many layers but once they've been converted into a symbol it becomes an object that can be dragged and dropped into any of the other artboards (more on these later) you happen to have running within the file you are working on.

I cannot tell you how useful this is. My website designs often contain cards, panels, patterns, whatever you want to call them, that contain perhaps a background layer that everything sits on and then a heading, some summary text, an image perhaps and maybe a call to action link. Throw in a button or two, some icons and some design and typography to make it all look nice and "on brand" and there you have it.

Now, I want to repeat this element multiple times on a page but also elsewhere on the other page designs that make up the site as a whole and this is where Affinity Designer beats Photoshop hands down. I can add symbols wherever I like. I can edit them and every instance updates to show my changes which could be many, many instances across lots of artboards.

No more duplicating layer groups over and over or copying them from one file to another. Symbols retain their original properties by being synchronised and if I make a change to one of them that same change is made in all instances of that particular symbol. If I don't want that to happen I simply switch off synchronisation in the version I want to make different to the parent symbol, make my change or changes, and then switch synchronisation back on. It's a genius feature and saves tonnes of time.

Affinity Designer contains what they call personas. These allow you to view your artwork in either pixel or vector modes and you can switch between to the two on the same file - you don't have to commit to one or the other from the outset.

Working in the vector persona is a dream come true - everything is razor sharp, images, text, icons, shapes, you name it you can zoom to 1,000,000% on it. It's incredible and it even helps when exporting artwork from Affinity Designer to send to clients because I can create a PDF file containing my artwork which keeps everything in vector and ensures the file looks beautiful when the recipient reviews it.

But lets not forget about the humble pixel, it's still useful to occasionally work on a pixel level, but for now I'm loving designing in vector.

When I worked in Photoshop I'd create a PSD for a project's homepage design, another for the services page, one for the news landing page, one for the blog post page and so on. Without good discipline and organisation it's easy to end up with a mountain of PSD files which can become confusing not only for me but also for colleagues that might have to jump into the artwork to grab a particular asset when I'm not around.

The solution? Artboards. In Affinity Designer I begin with a single artboard in which I create a page design. When I need to do another page layout I create another artboard within the same file and so on until I have a single file that contains all the necessary designs for a project.

As designs are created and passed to the client for feedback I create additional artboards beneath the original artboard to incorporate their changes until everything has been approved and signed-off. At the end of the process I have a single file that shows how each page has evolved and contains all the master artwork for a project.

As if that wasn't enough, another great thing about artboards is that they allow you to spot those little inconsistencies that can crop up when you work on each page design in isolation: an image with a stroke where no other images have it, a heading that isn't the right text style, a dashed divider when the format is solid, etc. etc. With artboards you can quickly zoom out and take a birds-eye view of every design in the project and marvel at the accuracy and consistency you've achieved or make a change where you haven't.

Like many designers I use Font Awesome a lot. Probably too much if I'm completely honest but hey, it's so useful and saves me creating custom icons and, being a font file, our developers can easily use the icons in my designs when they start writing code with just a smattering of Sass.

Previously, when designing with Photoshop, I'd have to pick the icons I wanted from the Character Map and add them to my PSD as a text layer - this is both tedious and time consuming. Affinity Designer, however, allows me to use the entire Font Awesome collection as an asset within Affinity Designer itself and I can even search for icons based on their name so if I need a social media icon I just type "Facebook" and there it is. No more headache-inducing searching for an obscure icon!

The developers here love this feature because they can see exactly what text settings I'm using in a design and can easily translate them into code during the development process. I love it because it allows me to quickly and easily setup the appearance of the text within a project and apply it consistently across multiple artboards.

By setting up text styles within an Affinity document I can define and manage headings, lead text, body text, links, whatever I want. I can base each font on a base style where I might set the font face to use and perhaps a master colour and then make changes to that to for each use case.

With text styles, if I make a change to a style it gets applied wherever it's used. Say I've got red H1 headings used across 12 artboards and the client wants to make them blue I just change the colour in the H1 text style and bam! it gets applied to all my artboards. I don't have to open up 12 separate files and update the headings one-by-one.

This might seem quite trivial but lining everything up in a design can be a big time drain in Photoshop - constantly measuring gaps and whitespace with the marque tool and guides. Affinity Designer gives me the tools I really need as a web designer to get everything just right.

Maybe I've got an area of space that's 1600px wide and I have six service cards to display evenly across that space. In Photoshop I'd have to get the calculator out, start diving 1600 by 6, allowing for right-hand margin between each card (but not the last one! rookie error!) and then position each card appropriately. This is more maths than design and I got an E grade for AS level Maths so it's not why I became a web designer!

Affinity Designer does it differently. Using the alignment tool I put my six cards (these will be symbols if you read the symbols section above) anywhere in that 1600px wide space, make sure the first one is at the start of the area and the last one exactly where I want the last one to be, select them all and choose align horizontally within the selection bounds. This results in six evenly spaced cards across my 1600px wide space. So easy and so fast.

So far I've used Affinity Designer on a handful of client projects but I won't be going back to Photoshop in a hurry. Every time I work with Affinity I discover some new, time saving feature that makes my life easier and helps me deliver better work, faster. It's what I and probably many other web designers have been waiting for and my new years resolution for 2018 is to become something of an Affinity Designer guru so I'l be sure to update this post with the next batch of treats and treasures I come across.