//9gag for Windows

Start screen, part 1

Start screen, part 1

Over the last few months I've designed and developed an app using the data from the popular comic site 9gag.com.

The screens speak for them self, but try out the app to see the truly great motion and experience.

Here's what some of our users say
- "Very modern, minimalistic, clean design. One of the best looking apps in the whole Marketplace in my opinion!"

- "Your App is the best 9gag in the Windows Phone store. The interface is very smooth and clean, and the gifs work perfectly. I have Just rated it with 5 stars"

Start screen, part 2

9gag post with white theme

9gag post with white theme

9gag post with white theme

9gag post with white theme

Dark themed start screen, part 2 

Dark themed start screen

 

Start screen, tablet, white theme

9gag post, tablet, white theme

9gag post, tablet, twhite theme 

9gag post, tablet, dark theme

9gag post, tablet, dark theme

9gag settings, change theme, dark theme

 

Thanks for checking out my blogpost. I'd love to hear your throughts on the design and on the app it self. Let me know in comments what you think.

Merry christmas.
Deani

A Windows Watch

The rumours is everywhere. Microsoft could be coming with a Windows Watch or another wearable device late 2014. Can you wait? - I can't! 

Long before the rumours started I had been thinking about how such device could look like. A few weeks ago I decided to try sketching on paper and afterwards started creating a concept design in Photoshop. Here's the result. Please let me know what you think of it :-)

Again, thanks for checking it out. Feel free to ping me with your thoughts and please, if you think it's awesome, like it on behance as well.

Thanks for reading,
Deani

TV Shows Reminder got rocked!

Summary

Anubhav Ranjan, the MVP behind the awesome TV shows reminder app got accepted into the 2 hour design review here on Blendrocks and I'm excited to present you the results. 

Prior to the sessions Anubhav requested usability guidance in along with a proper UI to help users understand and know what his app is basically meant for.

For the reviews we had one ultimate goal in mind which was to bridge the thoughts of a developer with the world of great app-design. By bridging this gap we tried to simplify the usual complex UI created by developers into a nice looking and user-friendly design.

Result

Lesson: Simplify simplify simplify. Remove clutter and align your content.

Lesson: Always deliver content whenever its possible. - And it's almost always possible.

Lesson: If you have no results or the user haven't seached yet. Why not show some suggetions or a list of items that you want to highlight.

Lesson: Let the content flourish. Hide functionality (moved to context menu) and move the functions to where they are actually used (details page)

Lesson: No need for labels. The content is almost always explaining it self. And if you have more data that's relevant, why not show it.

Here's what we did

  • New typeface / font
    • Throughout the design, we decided to give the app a lot of personality by using a custom typeface. A lot of apps out there uses the typeface such as Segoe, and by choosing one with a bit of edge and a lot of freshness in it, we get a UI that stands out and deviates from the masses.
  • Colors
    • Colors is one of the most essential element in almost any good design. In this case we picked a fresh lime green for e.g. highlighting selected items and toggle state on. By using the same color in both functionality and a control such as the toggleswitch we creates a visual consistent UI.
  • Background graphic
    • Using graphical element in the background we adds a great sense of depths and creates a cognitive link from the content to the app itself.
  • Placing function where it's used
    • We rearranged some of the functions within the app to actually have them where you would expect them to be. Like moving functionality from the list of subscriptions into the actual details page. The functionality offered by the appbar such as delete, pin to start etc. which should be in the details appbar is actually also offered through a longpress on the subscription list item - this is not demonstrated in the screens here.
  • Give the user more content
    • We discussed the possibility of showing suggestions when the users’ searches for something not found. 
  • Alignment
    • We aligned the complete UI. One of the most common mistakes is having a bad or even worse not aligned UI. You want clean nice lines throughout your app, no matter what you do! 

 

Thanks a lot for reading and a huge thank you to Anubhav Ranjan for doing the review and allowing me to post the results. He's an awesome, bright and friendly guy, so please check out his app and his blog.

/Deani

 

Microsoft /build

Each year fans in from left in a nice animation. Simultaneously search fans in from right.

Thank you checking it out. Let me know what you think on twitter and on behance.

 

Developer notes

Everything was made with xaml and c# by me and a colleague.
Creating the rotated TextBlocks with data bound content, the skewed touchable areas as well as getting the alignment right on the rotated content within a skewed contentplaceholder was a huge pain and took us hours. If you ever need to do something similar, just let me know - we'd happily share our experiences.