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:
Process:
Feelings after:
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.
Runner up:
progess bar
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.
Top comments (0)