As you already know, I worked with GNU/GPL tools when I was a front-end developer. So in that sense, what I did design-wise was mostly done with Inkscape and Gimp. I need to learn the latest tools and I have used InDesign for one project before, but now is the time to get to know how Figma works.
What I have done so far? Well, Figma really has pretty cool tutorials that you can use to learn. But some months ago I found this really fun YouTube tutorial by Salomon Sanchez teaching how to create a Pokedex.
And here is the final result: https://www.figma.com/file/XHALYveQYS3RbkD4FQTJut/Pok%C3%A9dex
Create a portfolio in Figma
I also did this one on how to create a portfolio in Figma.
New Domestika course!
Since I was doing a Domestika course on illustration, I decided to search for one about Figma and I found one by Pablo Stanley (such a big fan of his work). The course is called “Web Design with Figma: Building Striking Compositions“.
First homework: Find Examples and Put Them on a Figma Board! PRACTICE EXERCISE 2.1
- Find examples of products or websites where visual hierarchy is being used.
- Search for designs that have used Gestalt principles in ther visual language.
- Share your findings with the community!
SAMPLE 1: Visual Hierarchy: Area with the logo of the Web Application is dominant and attracts the eye.
For this one contrast and scale were used. Subtitles: Both of these elements look more relevant and show more visual weight than the other text located in this area. It’s really cool having an option to see your own boards and create a new board separately
SAMPLE 2: Gestalt principle of Similarity: The icon “Other Apps” will look and behave in the same way, even if is located in different products by the same company (Google). In the images bellow: Gmail, Google Photos and Google Drive.
SAMPLE 3: Gestalt principle Common Regions: In Gmail there are different regions at glance in their design: 1- Left side for a menu bar, 2- then the inbox sidebar that also includes a list of labels, 3- In the middle you have on top a search bar and the emails listed in 3 different tabs. 4- Also on the right side there is an additional sidebar that you can use to interact with other applications like calendars, notes, todo list and contacts
SAMPLE 4: Gestalt principle of proximity: Microsoft Edge, we can see quick links to several websites, those look grouped together thanks to the correct use of white space.
