When FramerX meets a small idea

Shabir Gilkar
UX Of Small Things
Published in
2 min readSep 24, 2018

This is my first ever design in FramerX. I was thinking about “How to try this new design tool?” then I thought let me put it in real test.

Frames Screenshot

Last week I asked myself if it would be appropriate to allow a user to read news as per the dates in a News App. May be by default providing week long date bar for a user to navigate through and then full calendar view if a user really wants to read old news.

I quickly designed some wireframes in Whimsical so that I can share it with friends and colleagues to get their initial feedback. I strongly believe in a statement like “Every idea which crosses ones mind might not be the problem looking for a solution”

But one should never cease to try and see how it comes on the other side. Believe me it would be a wonderful journey full of knowledge. Here are the initial wireframes.

Initial Wireframes

Initially I thought I would keep all the dates of the month vertically on the left side and then some feedback from friends convinced me to keep the date bar restricted at 5 days of the week only and then allow user to access old news via a calendar overlay.

I just kept it there but then FramerX was released to public. I quickly watched some FramerX videos and designed some mocks, added some interactions to give my old little idea a life.

This is how it came out 🎉 🎊

Prototype: Everything done inside FramerX

I think the above UI and prototype will tell you lot about FramerX but still it needs a lots of improvements and bug fixes. I will keep an eye on this new design tool as they have met some of the great unmet needs of designers. On behalf of the design community I wish good luck to Framer Team, Koen Bok and to FramerX. It is really a nice design tool.

Frames Structure

Please feel free to send some comments and be in touch @ Shabir Gilkar

--

--

Shabir Gilkar
UX Of Small Things

Lead Product Designer @accenture previously at @Harman , Aditi, Snowflakes and DZ.