As a front end developer, I get bombarded with “challenges” to up my skills every day. I try to find challenges that are worth my time and will make me a better dev. When I heard about the 100 days of UI, I thought it was perfect! Each business day, a prompt is emailed to you, something like “checkout”. A small enough prompt to get me started, but not so overdone that I would get overwhelmed. Plus, when I didn’t have a strong design portfolio. I was so excited about this challenge. If you are already sold on doing it, you can click here.
I knew from the beginning that I wanted to track my progress and that I also wanted to track how I felt about my skills and the project as a whole. I created a document that was broken up into sections each day like this:
Day 1- Sign up form
Feelings about doing it:
I did this for every single day of the challenge, however, most of the thoughts were much more emotional. Such as from day 42, where the prompt is a do to list my feelings about it were “UGH NO SO FRIGGEN FRAGGEN BORING”. During this process, I learned a lot about how I work. Setting up time is vital for these types of work to actually happen, otherwise, I would do like 6 of them on a Sunday morning then not touch it for a week. The quality of these fast ones was much lower than of the daily ones for sure. I learned that I need to follow the normal UI flow of making the design in a tool like Figma or Adobe XD.
Another design tip that I learned was what online resources I could find for design inspo, such as Dribbble or even Pinterest. One of the hard skills that I got from 100 days of UI is I am much more comfortable with Bootstrap. I also learned that I can do big things like this. If you would have told me even a year ago that I would complete Inktober, hacktoberfest, and 100 days of UI in the same year I would have laughed because it would have seemed impossible. I also learned a lot about critiquing my own work.
Here is my least favorite piece I did, it was supposed to be a landing page for downloading an app.
This was my least favorite because it could have been really interesting, but I was lazy. The colors are wonky, the font is sized incorrectly, and with most of my other codepens, the buttons would at least do something. This is a perfect example of me not putting enough work in, and in return only learning what not to do.
This was the piece I am most proud of was my CSS/HTML recreation of a train pass.
I am most proud of this piece because I really learned how to use CSS grid, and I am really happy with the background texture. I would have liked to spent more time finding the actually icons the tickets use, but I made do with the icons I had at the time. It was also a wonderful learning experience to think about in-depth how the tickets look and what choices were made.
This was just fun little js experiment
Normally the phrase “you get what out what you put in” is annoying to me. However, in this case, I do really feel like if I would have taken this more seriously I would have learned a lot more. If I ever did something like this again I would probably ask someone else to do this with me so I would have had more accountability. I also learned that it is vital to have a plan before designing components, so next time I will be sure to make a plan before I just start. I do think this challenge was worth it, and I think if you are interested in I would do it.
Again, the signup link is here.