Introduction

Frederick Rosa is a 27 year-old icon designer from Puerto Rico who graduated from Atlantic University in 2015 with a Bachelor’s in Digital Graphic Design. After graduating, Frederick quit design. Two years later, he created the pseudonym “Feisdra” to give design another try.

Frederick's been learning icon design since 2017 from blogs like IconUtopia and watching designers like Andreas Wikström, Andrew Rosek, and many others found through Iconaday’s Instagram. Putting into practice what he's learned, Frederick recently finished his first icon set, and is going to share the process with us.

Take it away, Frederick!

1. Choose a theme

The question ‘What do I design about?’ is the first roadblock towards completion. I learned that reducing the options to my passions makes the decision easier, and increases my interest in the project. I initially chose ‘music’, then kept focusing the theme even more, moving from my favorite songs playlist to just one song of that playlist: ‘idontwannabeyouanymore’ by Billie Eilish.

2. Make a design brief

After having the theme, a short design brief was made to provide a general direction from the start. Here I asked myself the following questions:

  • What icon style should be used? Outline.
  • What size is the design going to be? 48x48 px.
  • How many icons are needed? Six.

3. Select referents

Since I had to make my own referent list, spending time on research was an important step to know what to design. Listening closely to the song, with repeat ‘on’ and the lyrics at hand, helped me find keywords that made up my list. Also, looking up commentaries about the song from the artist, to understand the main idea behind the song, aided in deciding which referents to keep.

4. Create a mood-board

Paying attention to how elements like form and color can communicate and relate to the look and feel of the keywords from the song, I gathered images in Pinterest that served as general inspiration for the design.

1. Issho Restaurant Identity, by Dutchscot
2. Express (Type) Yourself, by My Name is Wendy
3. Hundredweight Mixtape Vol. 02, by Seth Nickerson
4. Audi Cornering Lights Print, by Almapbbdo
5. Sway, by George Bokhua
6. Museo Nacional, by Felix Beltran (1979)

5. Select a motif

Mind-maps, synonyms, and image searches are some of many great tools when looking for the ideal motif. I also found it was helpful to search in icon marketplaces with the purpose of looking for standard icons, or ways other designers effectively communicated an idea. When making a list of referents, I already had some ideas of what motifs to use, but by expanding my options I was raising the chances of finding one that complemented the theme and worked well within the set.

6. Find reference images

Once I had chosen the motifs, I created another Pinterest board with reference images for each to help me identify the essential details that gave the object its identity.

Photo: Dragan Miljkovic via Unsplash

7. Sketch, sketch, sketch

Certainly not my strong point, but something that’s helped me continue is thinking that the more I sketch the closer I’ll get to the breakthrough I’m looking for. I divided my sketching in three phases: Thumbnail, Rough, and Refined. The first one was about making explorations with the motif using a sketchbook and a pencil. I like to start sketching from memory. Then, when my sketches started looking repetitive, I looked at the reference images again. After some time, I chose the thumbnail that in my opinion succeeded in clarity with the desired look & feel, and turned it into a rough sketch. Using Procreate, I redrew the thumbnail inside a 10x10 grid to give it a line weight, and duplicated the layer to keep exploring stylistics and details.

8. Critique your work

Between my rough and refined sketch phases, I took some time to compare the best rough sketches I came up with, and added comments next to them of what I could improve, try and/or remove. This step was sometimes repeated to improve the design even more than where it was.

9. Refine your sketches

Once I was satisfied and made the last changes, I refined the sketch inside the grid using shapes and tracing the dashed outlines.

10. Vectorize your sketches

Lastly, I used Adobe Illustrator to digitalize the icon either by importing a PNG of the sketch from Procreate or using the iPad as reference. Sometimes a curve or something doesn’t end up exactly in the grid like I planned. I then try to fix this, but if it changes a lot of the design, I forget it and just make sure the end result can be made Pixel Perfect without altering the dimensions. (Select icon > Right-click > Make Pixel Perfect).

Conclusion

As you can see, Frederick's process is involved, but it creates a wonderful end result—icons with meaning, depth, and beauty.

You can follow Frederick on Instagram to keep up with his design work.