Background image
logologo symbol

6 - Growing complexity

Design UI - Design of Fortune! Speciality

Description

In this speciality guide we will play a little game where you can practice your skill in figma like: Componnents, design tokens, animations and most importantly consistency in your design. The game that we are plaing is a weel of fortune - design edition where you need to spin a weel where whole bunch of ideas are and whatever you land on you need to design it in figma. This guide will help you stay consistent throughout your design which is really important to get the feeling/vibe of the page. For example If I pick a theme called "Cloud City" what's the first thing that comes to your mind? For me it would be - warm colors from the sun and blue sky with windy coulds and tall skyscrapers in the distance, the UI would be light and fresh so a lot of white/light colors and thin borders. I could work with that by having a vision you can break it down into a couple of ideas and start there. This guide will help you visualise it, break it down and design it, also just have fun and experiment! Do something crazy and epic, the website doesn't need to serve any purpose exept just looking nice :) Have fun and good luck!

Topics

  • Design tokens in Figma
  • Components and variants
  • Keeping a theme consistent
  • Translating a mood into colour and type

Goals

Knowledge

Understand how to visualize a design and put it together in figma
Understand that "feel" is as important as "looks"

Skills

Be able to create any page according to given theme
Be able to create a living page feels and looks good according to the theme

Idea for return

  1. Spin the wheel HERE(You can only spin once)
  2. Open Figma
  3. start visualizing the theme, colors and feel
  4. save the colors as design tokens
  5. start building
Don't forget that methods like atomic design may come in handy as well ;)