Day 6 Hours 3-4

Hour 3: Creating and Organising Design Assets for Developers

Understanding Design Assets: We'll begin by discussing what design assets are. These are the visual elements such as logos, icons, images, fonts, and color palettes that will be incorporated into the web application.

Creating Design Assets with Canva: Canva is a user-friendly graphic design tool where non-designers can create professional-grade design assets. We'll go over the basics of how to use Canva, from setting up your workspace to using templates and designing your assets.

Organising Design Assets: Once your assets are created, it's crucial to organize them in a clear, logical way. This includes naming the files appropriately and grouping related assets together. Proper organisation will help streamline the development process later on.

Hands-on Exercise: In this exercise, you will be using Canva to create a set of design assets for your sample web application. After creating these assets, you will organize them in a manner that would be logical and useful for developers.

Hour 4: Exporting Design Assets and Documenting Design Specifications

Exporting Design Assets: After organizing your design assets, we'll discuss how to export them in the appropriate formats for web development. Canva allows you to export your designs in a variety of formats such as .png, .jpg, and .svg.

Documenting Design Specifications: Design specifications are a detailed description of your design, including layout, color schemes, typography, and more. These specifications will serve as a guide for the development team when implementing your design into the application.

Hands-on Exercise: For this exercise, you'll export the design assets you created from Canva in the appropriate formats. Following this, you will document the design specifications for your sample web application. This will give you experience in preparing your design work for a development team, a crucial step in the web application development process.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.