Daily Design Learning- Designing the list component

shrey vijayvargiya
2 min readFeb 24, 2021

Day fourth, we have completed chart and KYC design and Bottom Tab now we will create the list component.

If you have just reached directly today i.e. “Day Fourth”, then here are the links to the preceding day's shots.

1. Day One https://shreyvijayvargiya26.medium.com/daily-design-learning-creating-charts-for-applications-9a69b584a962
2. Day Two https://shreyvijayvargiya26.medium.com/daily-design-learning-designing-the-knowing-your-customer-steps-6dd6f79ae4cd
3. Day Thirdhttps://shreyvijayvargiya26.medium.com/daily-design-learning-designing-the-bottom-tab-navbar-34722e1f901f

Logo of our new website

We have launched our basic version of our website and it consists of the initial set of sample designs.

Do check our website — iHateReading

Here is an introduction to me.

I am shrey, A Software developer by profession, Designer by passion(love designing interfaces, illustrations etc), A journalist by blood & Chatty in nature.

DAY Fourth!!!

Today’s Learning — List Component for cryptocurrency or company IPO
POA(Plan Of Action) —
1. Filter out the data you want to show in a single list
2. Select the effects, icons, colours images.
4. Create a single card by adjusting all the content
5. Repeat the above steps for every card and list component is prepared.

Step One

Selecting the data points to display on a single list component followed by collecting all the icons, images on a single frame.
Create the single card component with all the above data and your repeat this process to create the list.

Single Bitcoin card on iPhone frame

Some More Inspiration!!

Single Card Component for coin
Another sample card for listing stock information

Follow/Contact me here.

Email: shreyvijayvargiya26@gmail.com
Discord: shreyvijayvargiya#6842
Dribbble: https://dribbble.com/witness_trey
Github: https://github.com/shreyvijayvargiya

References

  1. Deep Dive in Figma Blog
  2. Dribbble for inspiration
  3. Behance for some more inspiration
  4. Charts Plugin
  5. Color Palletes Plugin
  6. Font Awesome Plugin

--

--