Beginning App Asset Design

Introduction to designing and using visual assets for your apps. Learn about vector and raster graphics tools, design principles, digital color, and more! By Catie Catterwaul & Jessy Catterwaul.

Login to leave a rating/review
Download materials
Save for later
Share

Learning path

This is part of the Software Engineering for iOS learning path. View Path.

Part 1: Vector Assets

1
Toggle description

What is design and what are assets? Find out about the two basic types of image assets: Vector and Raster.

Toggle description

Learn some basic tools you should expect to find in any vector design app, and build a grayscale wireframe.

Toggle description

Use your new knowledge of vector tools to create a wireframe for one more screen.

Toggle description

Use simple shapes and boolean operations to design a tab bar icon. Build up your own symbol library.

Toggle description

Create more complex icons with the help of boolean operations. Learn about gestalt principles!

Toggle description

Find out what bezier curves are, and how to manipulate them. Use the "pen tool" to create an app icon featuring the RW logo.

Toggle description

Practice using the pen tool by tracing a complex curved object: the Swift logo!

Toggle description

Fonts are the most common resolution-independent assets! Pick up a few tips for using them in your apps.

Conclusion 0:47
Toggle description

Review what you learned about vector design, and get ready to learn about resolution dependence!

Part 2: Raster Assets

Toggle description

Get a preview of what we'll cover in the second part of the course focusing on raster assets.

Toggle description

We'll answer questions like: What's a "raster"? What's the difference between points and pixels? What is resolution and how much do I need?

Toggle description

Experiment with upsampling, downsampling, and analyzing the resolution of raster assets for use in your apps.

Toggle description

Will these raster images look great in your app? In this challenge it's on you to figure it out!

Toggle description

What happens when you layer images? What are blend modes? What about Opacity? Find out in this video!

Toggle description

In this challenge, try using vector shapes to mask raster images in a thrilling mash-up of asset types!

Conclusion 0:47
Toggle description

Review what you've learned about raster images, and prepare to learn about color.

Part 3: Color and File Formats

Toggle description

Find out what we'll be covering in the final part of the course, focusing on color and image file formats.

Toggle description

Grab a helmet for this crash course in color theory, and gain some perspective on how to think about color in your app.

Toggle description

Practice analyzing contrast between text and its background with the help of a web contrast checker.

Toggle description

Discover the challenges of maintaining color fidelity across multiple digital color spaces, and why you can't just divide everything by 255.

Toggle description

Explore your options for image asset file types. Learn when to use which type, and how to export to them.

Toggle description

Decide which design elements are assets to export, then export them using the best file type for each.

Conclusion 4:14
Toggle description

Review everything you've learned about app assets, and find out where to go next on your design journey.