UI/UX Design 👨‍💻 Develop an App from Scratch (Part 2)

In this video I will build the primary user interface layout and components of the personal budget application that I am building as a side project myself. The design and wireframes are done in Figma, where I have prepared a set of simple components (buttons, tables, form elements, typography and colors. During the video I walk you through the layout I have chosen for the application and explain the reasons behind my choices. After that I use the components to populate the low-fidelity wireframes in order to have a complete UI design of the main view of the application. Along the way I mention multiple challenges in detail.

Contents:
0:00 Introduction
0:26 Notes on the Design Software
1:07 Components Library
8:25 Layout Wireframes
20:47 Budget Tables
31:28 New Transaction Button
32:10 Month Switch
37:46 Background Colors
39:20 Month Switch Calendar Icon
41:27 Remarks on the Completed Budget Section
43:15 Sidebar Navigation
47:51 Summary Statistic Cards
1:16:16 Spendings per Category Pie Chart
1:26:22 Transactions Table
1:40:00 Final Adjustments
1:42:15 Conclusion

Social Media:
Email: [email protected]
Twitter:   / nikelaz  
LinkedIn:   / nikola-lazarov  

#project #application #design