UI Design Entry Level Workshop for non-Designers
FreeTech UI Workshops
Team
Myself
Time
2 Weeks
ROle
Public Talk Presenter
Tool
Figma
Project Objectives
For some time at Ideas, Product Owners and Software engineers wished to understand and use Figma, so they could interact with design teams more efficiently and create their own layouts. In 2020, we set ourselves to tackle this problem by designing a workshop introducing Figma's basic capabilities and allowing other professionals to understand and use it for their own work. The first editions were held remotely during the lockdown of 2020 - 21.
Process
Why do designers like Figma so much?
Figma is a relatively simple tool compared to the software previously used for visual/product design. The software embodies the flow of digital product design very well, allowing designers to plan, create and present digital prototypes efficiently while collaborating with each other in real time. We also love Figma’ community area where users share resources and plug-ins that make the tool even better.
How did the workshop work?
During the workshop, participants were introduced to the interface and presented with a series of exercises developed to practice specific features of the tool. We usually aim for a session with 7-10 participants. At first, they learn to create shapes, insert and edit type, color, and images, and how Figma's frame elements work. As these are the essential elements for every common interface component, the second part of the workshop allows users to gather their knowledge and design screen layouts. During this part, we give people a solid direction and constraints to work. With time we realize that some participants will apply their aesthetic spin on their work anyway, so we encourage them to play with the design under these conditions so we can still provide feedback and help them with upcoming problems.
REFLEXION
1
Create a flexible structure
As you often need to respond to feedback from one session to another, it might be helpful if you save time on that. On Figma, for example, we create template modules that allow us to build our exercise boards like LEGO pieces and therefore quickly implement global changes. You can read more about using Components in Figma here.
2
Pay attention to time
Especially in a remote setup, keeping people engaged and energized is very challenging. So, plan your schedule in a way that participants feel engaged and add as many breaks as necessary. In hour case, we had partipants droping off the sessions because the session conflicted with other work appointments. This led us reducing the duration of the workshop. For remote workshops, 4 hours is usually the maximum length for a session like this.
3
Find out your audience’ interest
Visual design can be fun, but this project proved that it could also be very dull if you talk too much about mental models and abstractions to audiences that are less involved in the topic than you. Give concrete examples and applications that relate to people's experiences. In our case, we introduced Figma's Components by presenting a measure on the board that automatically displayed what the feature did and was helpful for the next exercise.
4
Share responsibilities
One facilitator might only be able to fullfill some of the tasks during the workshop. Consider how much interaction you wish to have with participants and how many you have. In our case, it was essential to have someone check the time and participant's work to solve any individual challenge. For a remote workshop where participants can interact with moderators freely, we recommend 7-10 participants and a minimum of 2 moderators.