Affinity Designer for UX Design

1h 56mIntermediate2020-09-01

Authors

Ronnie McBride

Designer, Artist

Course details

Affinity Designer is a cross-platform vector design tool that's simple, streamlined, and easy to use for UX, UI, and responsive web design. You can create branding materials, websites, app interfaces, logos, and so much more. Learn how to incorporate Affinity Designer into your own UX design process. Here Ronnie McBride shows how to set up your preferences and workspace, use artboards, create custom color themes in the Swatches panel, create and use grids for layout, and build wireframes, mockups, UI assets, and hero graphics—all with the versatile toolset in Affinity Designer. Once you find out what you can do with Affinity Designer, you may never go back to expensive design software again.

Topics include:
Setting up your workspace
Creating new documents
Using artboards
Choosing fonts
Creating a wireframe or mockup
Creating UI assets
Embedding your design
Exporting your design for prototyping

Skills covered

Affinity DesignerSerif Ltd.UX DesignUser ExperiencePersonaWeb Development

Concepts

0. Introduction

01 - UX design in Affinity Designer
02 - Using the exercise files

1. Setting Up the Workspace

03 - Setting your color profile and preferences for UI design
04 - Setting up your interface for UI design
05 - Creating a new document
06 - Using artboards

2. Design Basics

07 - Making color schemes and saving swatches
08 - Creating gradients
09 - Grids
10 - Alignment and spacing
11 - Lights and shadows
12 - Choosing fonts and saving styles

3. Wireframing

13 - Creating wireframe
14 - Building your first mockup

4. Creating UI Assets

15 - Asset panel
16 - Creating your first hero image treatment
17 - Creating a stereo dial
18 - Embedding your design
19 - Constraints
20 - Exporting for prototyping

Conclusion

21 - Next steps