1/6 Check-In

I have been seeing people doing replications of apps that already exist but kept putting it off because I needed to work on the certification stuff and my portfolio. Today I decided to put that stuff aside and just make a copycat app screen. I found something I liked and then got to work. I am using this post as a journal of what I did and learned.

I discovered that I have learned a lot about using Figma over the last few months. I had no trouble with matching the colors or shaping the corners on the tabs. I had to think about how I would line everything up but then I realized I could line the frame up with the top of the screen on the picture and get really close to the right location. It's definitely much easier when you have the x and y location, but this worked pretty well. I got all the elements sized correctly by laying them on top of the picture until they matched.

I have to say my brief dip into instructional design and all of the tech that I have used over the years has made it easier to learn Figma. I have always been pretty good on Google Slides and Powerpoint which helped me when I was learning Articulate Storyline. All of those have helped with learning Figma. This kind of stuff comes easy to me and I think it is fun to learn and use so that also helps.

The text looks a little off but the original picture was not the best quality so that may be why. It took a little research to figure out the font to use since the font finder extension I use doesn't work on pictures. I went with a combo of two fonts: Quicksand for the majority of the text and DM Sans for the main heading. It is a pretty nice combo.

I originally started with a different app screen and the text on that screen had different spacing than the presets so I learned to change the distance between letters and words. Took me a bit to figure out how the numbers worked for the word distance. I kept putting in small numbers and the words would be on top of each other, but then I googled it and figured out I needed a much larger number to get what I wanted. I generally try to figure things out on my own and then google when I get stuck. Sometimes I waste a lot of time being stubborn and not just going straight to Google.

I like the colors and variety of text sizes in the original. I love color and want to learn to use it correctly, this gave me an idea of how to do that. I also like how they used the outline around the buttons but decreased the color of the line. I need to work on trying different styles of buttons. My app now just has solid buttons with a hover state on them. I like the outlined buttons so I may try them out. The tab layout is also cool in place of just using buttons. It definitely give the app a different look.

I really enjoyed doing this exercise and feel like it was a good use of my time in place of what I have been doing. I needed a break from my app to try something new for a change. I will definitely do this again in the future.