DEV Community

loading...
Cover image for I created a UI design every day of April

I created a UI design every day of April

roshan6399 profile image Roshan Originally published at roshan6399.Medium ・9 min read

Hi! I’m a software developer with a passion for UX design, and I spend my free time after work learning more about this interesting field. But sometimes it gets difficult to work on your hobbies and side projects. Long periods of lethargy and creative slowdowns are things I face often. There are times when I am full of energy and can come up with crazy ideas to design, but when the time comes to sit down and put in the work, it does not always go that well. Especially since the COVID lockdowns started, this mental block grew further. This wasn’t a good thing, so I set out to do something about it. A month later, I completed my goal of making a design every single day. This is an article about the journey and the lessons I learnt along the way.

Staring at the empty canvas

An idea is only as good as its execution. There might be a lot of reasons why those ideas don’t get transformed into tangible work. Tiredness, lots of other things to do, feeling uninspired, illness, all of these reasons and more can justify a forgotten empty canvas, but it does not change the unpleasant feeling of guilt when you look at it. This is how I felt about my design work I had done so far. Although I had been occasionally taking up design projects from my friends, I felt like my personal growth in this field was inadequate. I struggled with consistency and motivation. I wanted to do something about it, so I decided to challenge myself to consistently create a design project and put it up online daily. I dug up a list I wrote two years ago of some app ideas I wanted to design, added a few ideas more, and finally put it to good use.
The goal of this 30 day challenge was to help me build consistency, so no matter what circumstances I find myself in, I can try to push myself to complete the goal for the day. In terms of design, my goal was to explore Figma a little more, and to include a bit of variety and try out different things — mobile apps mostly, but also including web and desktop. The goal was to create a shot that captured the essence of the idea, detailed just enough to make sense, but not further than that.

An exciting first day

Feeling excited about the first day of this challenge, I bought a new 0.9mm mechanical pencil (I love mechanical pencils) and brought out my papers to begin drawing wireframes for my first idea. The first design challenge was to create an alarm clock app. I started drawing a few mobile screens, and filled the layout with components. Once the sketch was good enough to make sense, I started designing it in Figma. After a couple of hours, I had the main alarm screen ready, but it did not feel right. I did a few modifications, but the outcome was the same. I felt like the design was not good enough, and this feeling stalled me further. I knew I had to move on and realize that it is impractical to expect the first attempt to match the expectation in my head. I set up a frame for presentation and uploaded my first Dribbble shot of the month.

Lesson learnt: You just have to get started. It may not be pretty, but eventually you will get there.

Alarm clock app — Prompt for day 1

Pizza time

The second day’s prompt was to make a food ordering or menu app for a pizzeria, with focus on customization. The idea of an interactive experience of pizza topping customization had been on my mind for a long time, so I was pretty excited to finally take a stab at it. I started with the wireframes, and this time the layout felt too dense. My first draft was very list heavy and looked more like a food delivery app, the focus on the pizza customization wasn’t there. I started again and this time I wanted to make it as minimalist as possible, put the pizza in the spotlight, and reduce the density of the UI elements. The layout looked good to go, but I felt a bit hesitant when it came to implementing it. It’s weird, but I hesitated to make use of images, especially those that did not come from Unsplash or other royalty free image sites. However, there was no way I could create my own images, it would be too much work, and it made no sense to focus on the source of the images, especially when the purpose was to just give visual tangibility to the idea. With that barrier aside, I collected a few images of some delicious looking pizzas and some toppings, and came up with a design that I was happy with.

Lesson learnt: Focus on the problem at hand, if needed use tools to help you get there, it does always not have to be from scratch.

A Pizza Ordering App — Prompt for Day 2

Picking up the pace

The design of the next day came out great, the prompt was interesting and the screens came out pretty good. I liked how the colors and the shadow and stroke effects worked together. A few designs after that also came out nice and I was satisfied with the quality of them. I also started getting feedback from my friends about the design posts I was now uploading every day. This was a good feeling and boosted my overall confidence about this design project.

An app that suggests what movie to watch

A bump in the road

I got stuck on a prompt that involved making map based navigation, similar to Uber. While the rough sketches made sense to me, I was finding it difficult to visually construct it with the right fonts and colors. None of the visual styles looked appealing, and eventually I ended up with a design that looked sparse and not very appealing, but I uploaded it anyway. Throughout the challenge, there were a few designs that were difficult to crack, but these were necessary failures, as they helped me identify what I was weak at. This was a benefit I had because of the variety in the prompts, they were not always similar. I tried making a desktop web site and it sucked too, it was also sparse. Knowing what you’re good at gives you a boost in confidence, and it tells you to move away to go learn new things. Knowing what you lack simply sharpens that direction and helps you locate the areas you need to work upon.

I did not like how this car pooling app turned out

Getting people’s feedback

I would regularly share posts with my friends and get feedback on how the final product looked like. This feedback was very useful to me, as it helped me scrutinize the design without involving my personal biases. Sometimes, the designs I expected to fail turned out to be quite well liked by them, and sometimes they pointed out flaws in the design that I was unable to see myself. Also, my developer friends also took great interest in some of the design ideas and wanted to implement them into a full app, and I was delighted to see such enthusiasm. But what do you do when you are at the drawing board and don’t know where to start? You do some research and talk to people, of course!

For some of the design prompts, I did not adequately grasp the requirements, and I needed to make sure that the design is closer to what real users might expect. For such designs, I called up a few friends and asked them questions about the design idea and their experiences with the current means of solving the problem. For example, I had to design an app that helped people build their resume, and I wanted to experiment with something that was user friendly and most accessible to its audience. I talked to my friend and we discussed the experiences we had in college, the first time we created our resumes. We talked about how some of our classmates were struggling with setting up the layout of the resume. This talk sparked the idea of a mobile app (A.I powered and all that stuff) that users could interact with via conversations and simple forms, that can generate resumes based on template layouts, and can maintain them without the user needing to open the document and meddle with the layout. A friend with excellent programming skills helped me with a prompt about training for competitive programming.

Lesson learnt: Share ideas with people, listen to what they have to say, creativity does not have to be a solo effort.

An app that intelligently builds resumes<br>

Rainy days

Obstacles and inconveniences are a steady part of life, they will come and go. During this project, there were a few inconveniences and temptations that had me thinking of procrastinating. A few issues amidst the glum situation of the pandemic brought down my energy to its knees, and I had no motivation to do anything. My laptop had an overheating issue, and would spike up to high temperatures and shut itself down at unexpected times. I had set up a temperature widget to closely monitor the temperatures but the shutdowns randomly happened anyway. (So grateful for Figma for this reason — it’s cloud based and syncs everything automatically) I used to design late at night, often too late, and these shutdowns meant I had to spare 30–40 minutes more for the laptop to cool down. It was quite frustrating but I did not give in to the temptation to postpone the design, I went ahead and completed the design before it could overheat again. Similarly, when there were other things that were much more exciting than this, the temptation to focus exclusively on those was also there. I had bought a new computer free of these overheating issues, and during that time I had to resist the urge to play Grand Theft Auto V on it instead of using the time to complete the day’s design.

This may sound trivial to some people, and it is fair to say that it could have been much worse, but these are the things that added friction to my progress, especially at a time when my self-discipline was low. The fact that I was able to complete the goal for the day regardless of how the day had been has given me a great sense of accomplishment, and it has made me realize that I can push through these challenges and achieve the things I want to do.

That brings me to the final lesson: Push yourself to do difficult things, if you know they are good for you. It will be worth it when you look back and see the distance you’ve covered.

A music player app with the visual style of Windows Vista

Outcomes of this challenge

I’ve created 30 design shots because of this challenge, some of which are good 😛 It helped me come out of a low energy rut and trained my discipline. I know what I am capable of, and I know the difficulties I can face. On the design side of things, I learnt my strengths and weaknesses, I got more hands-on experience with Figma, and I realized how long things take to develop. While putting out a visual shot takes only a few hours, some ideas need more work than that and need more time in the oven. This challenge did not feel like I’m punishing myself, it was easy sometimes, and sometimes very hard. But ultimately, it was a celebration of my abilities.

This smooth Figma prototype for a budget tracking app was fun to make!

A lot of my friends helped me by supporting me throughout this short project and giving me feedback. I cannot end this article without especially crediting the kind and artistically talented person who consistently was always there to listen to my ideas, offer design suggestions, and most importantly give me support when I needed it. This project is also a testament to the importance of surrounding yourself with people who can help you grow.

I hope you found this article interesting. I wanted to share my journey with you, and I hope it helps you get started on your personal goals. It always sucks in the beginning, but if you push through the hard part of things, you will succeed and you will learn so much. Stay safe, and Godspeed! 🚀

You can find all my designs on my Dribbble profile or on my Twitter. I’d love to hear what you have to say.

Discussion (0)

pic
Editor guide