Exporting Assets for your Digital Design Projects

Reading Time:

Part 1

Part 1 - File types
Part 2 - Website Exporting Workflow
Part 3 - Application Exporting Workflow

Let's get technical! Today we talk about the 3 main file type you will use when exporting assets for websites or applications which are .jpg, .png, and .svg. Whether it's a website, an iOS app, and Android app or any other application there are some best practices and ways to export your assets to make the project successful and make developers love you.

Always remember the 2 main goals of exporting assets.
1. Make them look as good as possible
2. Make them load as fast as possible

I talk about the difference between Bitmap Graphics and Vector Graphics and when speaking about each of the 3 file types offer some advice on when to use them and some common uses as well as some things to be aware of.


Part 2

Let's get down to business! In this video, I cover the methods of exporting assets specifically for websites. Web design is a balanced design medium, meaning how things look is dependent on the speed in which they load. That's why I cover 3 different ways to export things in the 3 main files types (.jpg, .png, .svg).

I cover slicing, cropping, and smart exporting in tools like sketch and Figma. In this video, Throughout the video, I use Sketch and Photoshop to demonstrate the export process but highly recommend using something like Sketch or Figma to do your Web and Application Design since it's geared towards this kind of workflow.

Always remember the 2 main goals of exporting assets.
1. Make them look as good as possible
2. Make them load as fast as possible

At the end, I will cover some image compression techniques for bitmaps and vectors and some free tools to make it all happen.


Part 3

I cover a basic understanding of pixel density, retina screens, file sizes like @2x and @3x and the difference between the 2 platforms. I use Sketch to demonstrate the export process and highly recommend you using something like Sketch or Figma to do your Product Design and Application Design since it's geared towards this kind of workflow.

Understanding Pixel Density and Screen Resolution
https://medium.com/@pnowelldesign/pixel-density-demystified-a4db63ba2922
http://sebastien-gabriel.com/designers-guide-to-dpi/
http://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/
http://dpi.lv/

Leave a comment


comments powered by Disqus



Contact Me