Let's Build: A Consultancy Website - Part 15

Part 15 walks you through my process of preparing assets for a typical website. In this video, I walk you through slicing and exporting assets from Affinity Designer.

File types and sizes

When exporting assets for web modern tools lend us a hand. Affinity Designer, for instance, has a separate mode (or persona) called Export. This mode is specifically geared towards exporting assets of many different file types.

I have another article and video on the Export persona you should definitely check out if you are new to the app.

Raster Images

Slicing assets out of a design is a pretty old but necessary process when it comes to translating a design to code. Images are about the only thing you can't create with code these days. While you can't create them specifically you should pay attention to their size. The larger the image size the longer it takes to load.

On top of the initial 1x size, you need to think about serving the appropriate resolutions for devices capable of displaying higher DPI's. Modern iPhones and Android devices are now displaying at the pretty insane quality. To adapt to this you almost always need a 1x, 2x, and sometimes 3x version of the same photo.

Serving the photo to these devices can be tricky but there are exciting new technologies to help with this. One that comes to mind is the newer srcset attribute on img tags in html. Here you can declare which images should show at specific widths and screen sizes. Read more about srcset here and here.

SVG

I try to use SVG for everything I can on a website. SVG stands for scalable vector graphics. Everything about that is amazing. Why? Your graphics can scale. They don't need a 2x or 3x version. You can also target them with CSS depending on how you serve them in your project. Doing things like animations, transitions, filling in color and strokes are all possible. You can even make sprites using SVG and optimize them that way. I wrote about this process over on Web Designer Depot.

The reality of preparing assets for websites

Most of the type I have a mix of file types and sizes in every project I work on. A design will often call for images so there's no escaping them. The best level of attack with images is to make sure they are optimized as much as possible. I like to use a tool called Image Optim or use a built in version of that in my Gulp configuration which you saw in the previous part of the series.

If you need a more compelling case for each use case I invite you to read another article I wrote on the subject called Should I use SVG, Icon Fonts, or Images?.

Up next we'll be adding the assets to our project and start coding. If you like this series so far do me a solid and share it if you don't mind :)

Download the Source Code for this Project

Source Code

The Series So Far

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6
• Part 7
• Part 8
• Part 9
• Part 10
• Part 11
• Part 12
• Part 13
• Part 14