Simple Search – Sketch

OneArtboard.png

You never know how a simple interaction can have so much complexity until you get hands on with actually designing it. I was looking for a new task for my Flinto journey when I got distracted with the iOS 11 update. The highlight of the update for me is the new social integration in Apple Music and the newsfeed in the App Store.

While playing around with redesigned iOS 11 apps, I noticed how almost all of these apps have Search screens so simple and scalable yet complex enough to provide enough opportunity to learn a thing or two even if one was to simply recreate the designs.

When I got into actually designing these, I got stuck so many times at small things that I couldn’t have noticed by just screen staring (Learning of the day – “learn by doing”).

Also, there has been a lot of online batter lately about how the new iOS UI is so inconsistent across different apps. So, I decided to start with iOS 11 mocks from Apple and see things for myself. Spacings, Font Line heights, Glyph alignment at certain places didn’t really made sense to me (It’s just me failing once again to understand great UI design), so I modified the designs as per my taste. The above designs are not pure replication of the iOS designs but contain variations at a micro level.

Next up is taking these screens to Flinto and making the input interaction work.

Advertisements

It Begins

I have been delaying posting anything here thinking I’d do it when I have some extraordinary work to showcase but it seems like that moment will never come. The perfect me will always be years ahead of me. So I decided it’s better to start posting everyday learnings and achievements and keep the blog running.

There has been a lot of buzz about prototyping lately and unfortunately due to tight office schedules, it’s near to impossible to take out time and make prototypes at my current job. So I decided to play around with Flinto in my spare time and do a little shape morphing animation. The intent was also to get a hang of the Non Timeline based animation system.

Below is a small search bar animation that I setup using Sketch and Flinto.

SearchAnimation