Responsive design becomes much easier if you can use vector images. Here's how to make your life simpler.
If you're a web designer, there's a good chance that Photoshop is currently open and running on your computer. Let's face it – Photoshop has always been the workhorse and de facto standard for web design. But in recent years, more and more designers (and developers!) are moving towards vector-based graphics and away from the pixel-based variants of yesterday.
In this post, we'll explore why you should consider designing your sites with vector-based tools, and how they can help you speed up the pipeline process. Also see our review of the free vector art app Bez.
Web design software: A brief history
Photoshop's original, primary use was for editing photos – not designing websites. In fact, there was another program specifically created for that purpose: Fireworks.
Of course, if you're new to web design, you might not know about Fireworks. That's because Adobe put a feature-freeze on it – and basically discontinued it – in 2013. Personally, I was never a fan of Fireworks, but I know many designers who still use it today. However, most designers use Photoshop, or some other pixel-based design software.
OK. Let's say you're using this pixel-based design software to create complete mockups; or maybe you're using it to create just the assets like buttons, toolbars and icons. But ask yourself this: why not create these things in a more usable form? Why not leverage the power of vectors?
Why vectors?
In the past, web designers didn't need to worry about responsive design. Our sites were designed with a basic principal in mind: to cater to the maximum pixel width of the most commonly used displays.
Nowadays, we must think differently. We must think in terms of user experience. And that experience comes in a variety of devices and screen sizes. The trouble is, when we scale our pixel-based images, they tend to get a little wonky.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
Pixel-based images can become distorted when resized or zoomed in
If you're not using vectors, the way around this is to create multiple assets. Unfortunately, this task is time-consuming and not always straightforward. With vector designs, things become a lot easier.
This is because vector designs scale. Regardless of size, they are always crisp and clean. It's true: In this case, one size really does fit all.
Vector-based images remain crips and clear at all sizes
But more than that, vectors are easier to work with. They can be controlled through code and generally result in smaller-sized files. The preferred format for web vectors is SVG. What's nice about SVG is that many popular applications support this format.
Software options
So what are you waiting for? Start making those vectors. Oh, that's right! Photoshop is a pixel-based design app. Don't worry, there's no shortage of apps available to help you get started with vectors. However, there are two you might consider as top contenders.
It goes without saying that Adobe Illustrator is a top choice among vector artists. It's what you'd call the flagship product when it comes to vector-based design. However, Illustrator is not cheap, and it's not easy to master. Luckily, there are other options.
Affinity Designer
Affinity Designer is one of the 'new kids on the block' in web design tools, and it's my preferred choice when it comes to vector designs. Because of this, and because you can use it for more than just web design, the rest of this article will focus on Affinity Designer.
Using Affinity Designer for web design
Affinity Designer, according to its makers, is a "fully-fledged professional graphics design application". I couldn't agree more; when it comes to UI, UX and web design, this is a fantastic tool.
In fact, with every purchase of Affinity Designer you get a free GRADE UI KIT, which includes light and dark variations of more than 1000 icons and elements. It has everything you need to get started with vector-based web designs.
It also includes a lot more. For example, you can use symbols to create instances of your design elements. If that symbol changes due to a design change, any instance of that symbol will instantly get updated. You can even have nested symbols, allowing you to build designs that are intricate enough to meet your needs, yet easy enough to manage.
Quite possibly the best feature for web designers is constraints. With constraints you can create mockups that will react in a pseudo-responsive fashion. Behold the true power of vectors: creating a single element, and being able to use that element across multiple devices/resolutions. As you can imagine, this is a huge time-saver! For a complete list of features, visit the Affinity Designer website.
So now you know about vectors, I think it's time to ditch those pixels!
Tammy is an independent creative professional, author of Apple Game Frameworks and Technologies, and the maker behind the AdventureGameKit – a custom SpriteKit framework for building point and click adventure games. As an innovative problem solver and industry leader, Tammy enjoys working on projects from content creation – including books, tutorials, videos, and podcasts – to the design and development of cross-platform applications and games. For Creative Bloq, she has written about an array of subjects, including animation, web design and character design.
