by Gbolahan Taoheed Fawale

How I became a better designer and contributed to Open Source with Jolloficons

Earlier this year, when I was still very much actively involved in the tech community in Owerri, Imo state, Nigeria, my friends and I — mostly developers — discussed building open source projects. We wanted to help ourselves better hone our technical skills, while also solving societal problems and bringing some attention to the small but actively growing tech community in the state.

As the only designer amidst other developers, I had two ways to contribute: help mockup interfaces for the projects to be built, or pick up a front-end framework and participate directly code-wise since I already had some experience with frontend design. Our mantra was; ‘there is nothing you can’t learn as long as you are ready or there’s something at stake’ (like a design gig, full time job, or any form of career growth or material compensation.) These guys are still some of the most motivating and hardworking guys I have ever met.

“Surround yourself with good people; surround yourself with positivity and people who are going to challenge you to make you better.” Ali Krieger

The initial idea

An icon pack containing icons that are relative to Nigeria — or Africa as a whole — and can be used in different projects, was the initial idea that came to mind. However, that didn’t see the light of day at that particular period as I got carried away with work and other personal responsibilities.

At some point, I also experienced self paralysis. I kept overthinking types of icons, style and usability in terms of context because some of the icon ideas that came to mind were things I thought wouldn’t fit well in web/mobile app products. This particularly discouraged me a lot so I only kept “dreaming” instead of actually working on the project.

“Go wide, explore and learn new things. Something will surely have a kick for you”
Mustafa Saifuddin

I thought about my career as a designer. I wanted to be as good as I could at UI/UX as well as as other aspects of design and also be a source of inspiration to others. I believe trying out different things makes one better at their craft. As a Figma Africa Ambassador and design advocate, I also wanted to create, teach and share some of the cool things you can do with Figma besides designing and mocking up interfaces. So I started doing realistic isometric and 3d illustrations with Figma, such as this popular building in Nigeria and this.

Jollof Icons Isometric

The UI/UX field is quite wide and you simply can’t know it all. Learning continues every day on every new project/product, so I can’t also say I am an expert at it. But at the same time, I felt I should be able to test new waters, experiment and find other aspects of design and skills in technology I could pick up. After all, all these aspects of design and tech are interconnected one way or another.

The impetus to begin

In July this year, I got a new job and subsequently had to move to Lagos, Nigeria the following month — August. Without doubt, Lagos is the biggest tech hub in Nigeria and a sudden change in environment saw me overwhelmed with my “new community,” as I strove to adapt quickly while also trying to be on top of my game. Some of the best talent across Africa and the rest of the world can be found in Lagos. For me, it was a different ball game.

After achieving some level of stability at my new job and environment, I had to think back on some of my goals and projects I had always wanted to work on before the end of the year. Let me also add here that you have to always find time to work on projects on the side as this gives room for growth. This also makes it possible for you to become a better designer/developer and also double up on your interests and excitement to learn and do more.

I had always had these design ideas and concepts in my head — some of which I still haven’t been able to explore. However, I figured the best way to get them out was to design something. That prompted my decision to work on the icon pack.

Thinking I had already gotten more clarity on what I wanted to do, I spent days trying to figure out a style; something different. That was how I found myself in-between creating icons that can be used across different digital products and screens, creating something in the African context or just fleshing out all these design ideas and concepts in my head.

Jollof Icons 3d category

The first step was to get the domain name jolloficons.com, to make myself “committed” to the project. It’s a psychological hack I deployed to make sure I started work on creating the icons.

I saw and loved what Katerina Limpitsouni and Aggelos Gesoulis at Undraw were doing, same as Dave Gandy at fontawesome and Vancura at VSCode. But I wanted to do something different, something ‘original’ to Africa. Though I couldn’t figure it out in time.

Octoverse Report 2018

The push I needed

This year at the State of Octoverse Developer Conference in San Francisco, we saw Nigeria rise to the fourth fastest growing country in terms of the proliferation of organisations, repositories and contributions made by Nigerian Developers on Github.

There have also been concerns about us consuming Open source tools more than we produce, but things are now changing faster than we think, thanks to organisations like Andela and Ingressive who are nurturing tech talents and supporting the technology ecosystem.

I must equally mention some of our developer advocates, experts and mentors Aniedi Udo-Obong, Hanson Johnson, Prosper Otemuyiwa, Christian Nwamba, Ire Aderinokun, Adewale Abati ♠, Neo Ighodaro, Samson Goddy, Ada Nduka Oyom, Ridwan Olalere (Didi Kwang) and Namnso Ukpanah who are also at the forefront of building developer/designer talent and communities (GDG’s , Forloop Africa, Frontstack.io, Laravel Nigeria, Figma Africa etc) across Africa. And this is just to mention a few of the badass talents and organisations supporting the tech ecosystem here in Nigeria.

It’s just a matter of time, as we designers in Nigeria will soon have a lot of content and open source resources to share with the world, because we are already taking the bull by its horns and breaking boundaries.

There was a time the Figma Africa Design Advocate Lead, Namnso Ukpanah — who is also a friend — was looking for experienced Designers versed in iconography that could share their knowledge with us via an AMA session on our Figma Africa slack channel. I remember it took a while before we could get someone. We soon had Vancura of the VSCode project come on our channel to share his experience and knowledge designing icons for the popular VSCode editor. It was an educative and interesting session.

“Reject the tyranny of being picked. Pick yourself.”
Seth Godin, Poke the Box

I usually don’t like missing out on opportunities to share my knowledge and contribute to the tech community. So I was a little disappointed with myself and felt bad, quite honestly, that I had not worked on the Icon project all this while. I felt I would have probably been able to share my own experiences and knowledge with the design community while we waited to get someone more experienced for the AMA session. But since I hadn’t done it, there was no proof of my experience or knowledge designing any icon set. 😞

All these fueled my desire to do more, and I soon started working on it. Designing the icons was no easy feat, especially when trying to achieve uniformity and consistency across the icon set.

Building the icons

As a big fan of rap music, I used to joke at work with my colleagues that I was going to release a rap album on Christmas day (Lmao! What?!) but somehow I felt so responsible and didn’t want to disappoint. So what did I do? I channeled my energy and resources into making sure I was able to push the first version of the icons on the 25th of December — which was supposed to be the official launch date of my “much anticipated” rap album 😁.

“For the things we have to learn before we can do them, we learn by doing them.”Aristotle, The Nicomachean Ethics

I had also designed a mock up of what the site would look like and shared it with some of my friends who were willing to help with building the site. Just a couple of days into December, I reflected on some of the goals and aspirations I had for the year — I had wanted to get into front-end development — and decided to take the challenge of building the site myself using a front-end framework.

I had already garnered experience doing front-end design so the only challenge was to be able to learn enough to get the site up even if it meant pushing back the Christmas day deadline I had set for myself. I now had to work on building something way simpler compared to what I had initially designed in the mockup.

So I picked up Vue.js and learnt a lot of new things on the go. Since it was an open source project, I thought it would be good to use as many open source resources as possible. I tried hosting with firebase but ran into some issues I couldn’t resolve on time — I was time conscious and eventually ended up using Github pages — which was another learning experience for me.

Always learning

They say the best way to learn is by doing.

Musicians try different styles, sounds and genres.

Developers try out different frameworks, technologies and programming languages.

Artists try different mediums and concepts.

Designers explore different concepts and aspects of design.

This is me trying to be a better designer.

This is me trying to contribute to Open Source.

Huge shoutout to Solomon Okwa and Michael Akanji who helped when I ran into some issues with vue.js and github while working on the project.

To everyone who has been a motivation in one way or the other, Thank you. Let’s do more, and let’s give them some sweet jollof 🍚 (this rice isn’t red like our African jollof though) in 2019. 😁

Happy Holidays!

Updates planned for 2019

  • Add more icons
  • Add Search functionality
  • Improve on the UI/UX of the site

If you have any feedback, icon ideas, suggestions or contributions, please do drop a comment. You can also reach out to me on twitter GbMillz

If you like the project or find it interesting, give it some stars on github, link below. Thanks 😉

Also visit jolloficons.com to keep up to date with new icons for use in your projects.

gbmillz/jolloficons
Open source icons (3d, Abstract, Emojis, Isometric) for your projects. - gbmillz/jolloficonsgithub.com

Want be a part of our community? Join us on the Figma Africa Slack Channel

Here are the links to some of the resources that sped up my learning process and helped when building the site.

  • Vue.js

https://www.youtube.com/watch?v=z6hQqgvGI4Y&t=2921s

  • Github pages
  • Official Vue.js Documentation
  • Stackoverflow