After many decades, I am finally back on track. Although I completed week 2 many days ago, but haven’t documented it till now. So finally I got some time to do so. Let’s get started with it!
Day 001 is here: Typography
Typography is all about the font and text that we use while developing any UI design. In short, it is basically an art of representing letters and text in a way to attract customers. For example, when we visit a site, some o the text is bigger than the others, and some have a different font or colour styling. All these observations are related to typography. Its main task is to gather the user’s attention on the things that need to be seen first or last.
Here is an image where I have shown how typography is used to display several components. In a similar way, typography is used in every section of a website.
Here are some important points that I would like to mention speaking of typography.
- Hierarchy is very important. It defined in what order things are needed to be read by the users. It really describes the way users get an idea of the website.
- Font size and weight are what differentiate between several hierarchy components.
- Opacity can help you make the content legible and build your hierarchy.
- Colours are the most important factor that creates emphasise wherever it is required.
- Line heights bring difference in several hierarchical components.
This is all about typography that you need to understand before building any web or mobile design.
Day 009: Color, color, and color
Color is an important component when designing the UX and UI of any interface. It impacts human emotions and that’s the sole reason behind choosing a specific color for brands.
So to understand more about colors, I research about three brand and their color pallets. One of them is Spotify, here you can look what are the colors that Spotify uses majorly.
Day 010: Steal like an artist
Now, it’s time to do some practicals. Enough with the theory about color and typography, now it’s time to implement them. So for this task, I had to redesign any template available online. So, I tool a login/sign up page and redesigned it completely. Here’s how it looks.
Day 011: Wireframing
Finally, it’s time for some more in-depth practicals. So wireframing is basically an important step before designing any app or website. It is like a blueprint of any structure. It depicts how a website or mobile app should look in a general way. Wireframing can be done either on paper or digitally. But I find pencil and paper the best when it comes to wireframing.
For this task, I designed wireframes for a food delivery app using pen and paper.
Day 012: High Fidelity Wireframe
High-fidelity wireframes are nothing but digitizing the on-paper design. For this task, I used wireframe.cc to design the wireframe.
Day013: Another Case Study
For this task, I studied the Amazon website and the case study related to selling and buying products.
Day014: Is This UX?
Although we may know what UX is, but we may not be completely familiar with what exactly UX is. So many times, even the most beautiful-looking designs might have a really bad UX.
This is exactly why UI is a subset of UX. Without considering the UX you can’t build an impactful UI. The stuff that we’re learning today will take some time to get used to.
For this day, I made a twitter thread of my understanding.
That’s it all for week 2, will continue with week 3 now and will get back soon.
