Details Matter It’s Worth Waiting to Get It Right

I’m working on the improved viki.com experience across devices. It’s not only about the visual design, but also about the flow, interaction, and layout. “Details matter, it’s worth waiting to get it right, ” says Steve Jobs.

The thumbnail is the most used component on the website and app, but I think we haven’t done it well, with details that make the overall interface looks great. Inspired by Google Material Design, I’m using 8dp square baseline grid, and 4dp when it’s needed (e.g the space between ‘new ep’ badge and the left edge). The blue square is the target area for the overflow icon (40dp x 40dp).

the_perfect_show_thumbnail_2x_1x

Another challenge is to make the Top Volunteers more engaging, one variation:

home_screen_dark_1x

I’m unifying and simplifying the flow across devices, focusing on the users key goals: discover shows and watch show. See one solution below:

navigation_bar_1x

See above design on Dribbble:

I still have a lot of things to be done, but everything looks great so far, and using 4dp/8dp baseline grid helps to lay things out perfectly on the screen.

Learn more about Google Material Design’s Metrics and Keylines.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s