DIGITAL TOOL USED AT LIBRARY
This tool helps people to look for the reading items by themselves when they visit library. It also includes few statistic, numbers, line graphs, pie charts and mini thermometer charts displaying inside detailed table. Seriously, dealing with those numbers and charts asking a lot of concentrate. Anyway, it fascinated me for hours without leaving the screen. I have been using Sketch, Figma and Adobe Xd for this project. I got experience that I always have to keep all my design clean and well-organised then I can transfer to any design tool confidently.
For beginning, let's start with video showing prototype within a little bit music.
Hi Fidelity Wireframes
1. Homepage: When user clicks anywhere on screen, he/she must login before using this tool. There is only 1 different between before-after login that is the changing in Username and Avatar.
2. Item page: Because I want to show the number increasing automatically (without tapping, clicking, dragging or any interaction), I have to create several same-item-page with different numbers.
3. Top trending page: Honestly, this page took me a lot of time for those graphs, bars, charts and numbers. I also made the movement between November and October so all details must change parallel. Thereby, you will see the name of the items moves position, the mini thermometer charts tunes toward in-out and the numbers are totally different. Actually, I did few calculations for those numbers between October and November. It's just a little bit mathematic but you can see I really did design this by all my heart.
Color And Typography
Prototyping Advanced
1. Login: This one will be Popup immediately whenever user clicks anywhere on the home page. They are still be able to see the home page but it stays blurry as the background.
2. Burger bar: It is animated side navigation move in and out when user clicks to open the burger bar.
3. Menu: This is a working drop down menu when user clicks on the arrow down.
A Number Ticker Scrolling Using Mask
As I already explained earlier, I did some changing numbers in the item page. However, Figma lets the number going quite peaceful so I decided to transfer into Adobe Xd to get the fancy scrolling. If you guys know how to do like what I did below in Figma, please share with me.
I would appreciate it very very very much!
Super Big Thanks For Taking Your Time To Read My Project!
