A new beginning

Three years ago, In August 2012, I joined bluefragments as their first real employee and now three years later my time in bluefragments has come to an end - by my own request I've quit.

When I told blue' that I quit, I didn't have a plan for what should happen next... I only knew that I've always had a dream for a very long time - 12 years to be exact. - A dream of either starting on my own, with my own company and, or working for someone outside Denmark. So I decided to quit, pursue my dream and trust that it all would work out alright.

So.. What's next?

Blendrocks is now a registered company in Denmark and I'm officially an independant consultant. I've signed a contract as independant consultant with an insanely great company in San Francisco. I can't share details about it right now, but I can say for sure that I'm truly humbled and very, very excited to join their team. 

Here's to bluefragments, and here's to a new beginning..

The time I spent with the guys in blue have been absolutely fantastic and I'm very proud of helping the company grow to now 20 employees.
The knowledge, experiences and the friends I've got over the last three years is something I can't thank blue enough for. The joy and truly been in the journey, and what an adventure! 
Today, I'm one step closer to having maybe one or two of my dreams come true - the future looks bright and I'm really excited about what's to happen next.

In the future I'll spend some time in SF - should you be around let me know and I'd love to meet you. Just reach out to me on twitter.
And fear not - I'll continue to blog, speak on conferences etc... :-)

Thank you all for your endless support! 
Deani

 

Microsoft Future Vision in images

In February Microsoft posted their new Productivity Future Vision which is a glimse into Microsoft envisioned future on a timeline of 5-10 years. 

I HIGHLY recommend watching the video if you're into designing great experiences - there's a lot of inspirational material to be found and studied. 
Here's images of all the things that might come in handy as inspirational material at a later point - I created the images for myself, but hey - why not share it with you - Enjoy! 

I hope you found the images inspirational and useful. Feel free to reach out in the comments if you have any questions or ideas for addiational resources you'd like to see.

P.S Make sure you follow me on twitter @deanihansen for more news, design tips, articles and how-to's.

Windows Watch concept design revisited

In October last year I posted my take on how a Windows Watch could look like. I got some amazing feedback. One of the comments that I've been haunted by almost weekly since I posted the design was this, by Ronald Widha:

"Nice clean design. A little comment more on the presentation, I think your design could be more impactful with the right "wallpaper". The cappuccino cup feels like a throwaway wallpaper that companies like Samsung would offer their devices out-of-the-box. Would love to see a wallpaper that subtly give a hat tip to a traditional time piece. or go the other extreme with an ultra modern feel.
I think your design really shows the "metro" design is the most scalable from the smallest form factor to the largest one. Good work"

When I designed the watch I picked a rather generic wallpaper and my thoughts never visited the wallpaper again. The truth is Ronald's comment hit the nail right on it's head. I was instantly struck by a feeling of guilt and embarrassment. How could I miss something so fundamental. 

Here's an updated version of the watch featuring one of the post wallpapers I've seen in a long time. It has a sense of simplicity and purity. The two values I try to honor the most in all of my work.

Feel free to let me know if you like the new visited version of the watch in the comments. I'd love to hear your feedback.

P.S Make sure you follow me on twitter @deanihansen for more news, design tips, articles and how-to's.

Nokia Lumia 930 Photoshop mockup

An essential part of designing apps in Photoshop is showing the app in the right setting. Here's a Photoshop template which you can download and use to show your app designs. 

Download

Feel free to let me know in the comments what you think and if you find this useful.

P.S Make sure you follow me on twitter @deanihansen for more news, design tips, articles and how-to's.

Free to use Surface Pro 3 Photoshop Mockup

When a customer calls me and ask to do an app design I almost always deliver it placed on a device. This makes it look more real and it's easier for the customer to comprehen what they are actually buying. 

All my high fidelity app designs are usually done in Photoshop. Sometimes we create only a few screens and sometimes all the screens. 

With the rise of the Surface Pro 3 I have long sought for a high fidelity image or Photoshop mockup but without luck. Last night I sat down and created one and posted it on my behance profile.
The Surface Pro 3 muckup it's now available for download and free to use. 

Download

Feel free to reach out to me in the comments below or on twitter if you have any comments or if you have trouble using or downloading the mockup.

P.S Make sure you follow me on twitter @deanihansen for more news, design tips, articles and how-to's.

Lessons from my first 24h design challenge: Spotify for Windows

The challenge

Designing Spotify for Windows Store in 24 hours? - Why not. Those were my thoughts exactly yesterday afternoon where I spontaneously thought 'why not have a 24 hour app design challenge'.
Now 18 hours later (sleept for 8 hours) I realized that I've completely failed the challenge. 
I knew from the beginning that I couldn't design the entire app so my goal was some of the main screens. 
I wanted to push my self. Push the limits. See how far I could get and tweet about it as I progressed.
What did I actually create during the challenge? Why did I fail? What did I learn? That's what this post is all about.
This blogpost contains the result of 10 hours of designing. A dive into the process I used during the challenge and what I should have done instead. Finally an explanation of the dilemma I faced which ultimately led me to failure. But first.. The final result.

TL;DR: Designing an app in 24 hours is insane. If you want to do it make sure you start by sketching A LOT before you go into high fidelity designing.

 

The final result

Ultimately I failed because I realized I was porting the desktop version rather than creating a profound and beautiful experience in a Windows store environment. Porting a desktop application was never my intention and that led me to conclude that I failed the challenge.
This is the result of 10 hours of work.

Core design

Inspired by design principles for Windows 10 - or atleast what it looks like we'll see when the time comes - the design uses side panels along with vertical scroll. The player is visible at all times along with what comes next

 

Artist overview

For spotify users this should hopefully feel completely familiar. The truth is that the spotify design time has great job on showing a lot of content while keeping it simple. I tried to mimic the same look at feel.

 

Artist overview

A split content view with a bio text. The text and images is split into the content panel to limit the line length. The short line length along with the increased line spacing improves the readability. The ideal line length for readability is no longer than 50 to 60 characters . (E. Ruder)

 

Design challenge timeline in pictures

0 hours

1 hour

2 hours

2 hours

3 hours

4 hours

5 hours

6 hours

8 hours

 

The process

As a developer or designer you sometimes find yourself getting insanely excited about an idea or a concept. So excited that you can't wait to get started and you have to sit down and get started it right away. It's those excited moments time flies and before you know it hours has passed. 
I simply couldn't wait and I dug right into the challenge.
Here's a break down of how I spend my time. Can you spot the errors right away?:

  1. Create a single initial sketch using my surface pro 3 and Photoshop (15 minutes)
  2. Gather Spotify resources (45 minutes)
    1. Cover images
    2. Figure out which font spotify uses (Proxima Nova)
    3. Find existing Spotify icons
    4. Get spotify icon and symbol font from website
  3. Create moodboard with inspiration resources, great ideas and concept designs from my personal stash, behance and dribbble (30 minutes)
  4. Launch Photoshop and design screens (8,5 hours)
  5. Realized that I've failed due to breaking my own rules regarding creating great design. The design I was creating only would be B rated design - never a A+ design

My biggest mistake was that I focused on getting features done rather than thinking how I could do them right before I actually created them - the builder's dilemma. I neglected sketching and brainstorming and just started making pretty pictures in Photoshop. The fact that I only spend 15 minutes sketching is a clear indicator of trouble. It should have been around 2 hours. Going into Photoshop without any sketches means that I design what just comes to my mind which maybe isn't the best idea. It definately wasn't in this case.. Because I could look at the desktop and ended up unconsciously designing what I saw right there. Going down such path would give me the exact same experience as what the spotify team already have created. I simply didn't have a plan and just builded what seemed natural - what I already knew from the desktop.

 

The process as it should have been

If I could go back and redo do things I would invest way more time in thinking about how I wanted to it be. Which experience did I want to give to the users and how could it expressed. Focus on brainstorming and playing around with ideas rather than just shipping "something". If I could change the process here's a breakdown of it should been:

  1. Create moodboard with inspiration resources, great ideas and concept designs from my personal
  2. Sketching ideas (2 hours atleast)
    1. Create a single initial 5-10 sketches using my surface pro 3 of the mainpage
    2. Throw atleast half of the sketches away
    3. Create 3 new based on the ones you kept
    4. Draw a final sketch
  3. Gather resources
  4. Create a rough black / white wireframe (optional)
  5. Launch Photoshop and design high fidelity screens
  6. Publish something truly awesome

With UI design it's extremely important to sketch a lot before you dig into designing in programs such as Photoshop if you want to create something really really good. Designing in Photoshop will make it pretty and good looking but for prototyping it simply takes way too long. Pen and paper or pen input for drawing on a PC is just faster. When sketching esthetics doesn't matter. It's all a matter of getting the ideas out there and finding the very best of them. So sketch sketch sketch!

But be warned.. Even sketching doesn't make your ideas fool proof! I found myself sketching and drawing out ideas in Photoshop 4 times before finding the right design the fifth time when I was designing last years Microsoft build conference app.

Never be afraid going back to the drawing board if you're not completely happy about what you're working on. 

Summary

In this challenge I started building before I thought about what I was building and why. That led me to the builder's dilemma. Next time I've spend more time thinking about why I'm building, for who and how I'll build it before I dig into the final designing.
Overall designing an app in 24 hours is an insane task and you'll most like never end up with the ideal result such a short time. Designing apps takes weeks but doing what you can in 24 hour is a great and fun challenge that I'll hope I can do more offen. Next time I definately plan on challenging myself with spotify again. 

I hope you've learned something from this. I definately have. 
Happy New Year!
Deani

Please, if you have any comments, ideas or thoughts let me know in the comments below the post...


The builder's dilemma explained

Imagine if you're retiring and you were to build a magnificent and extraordinary house with all your life savings. A truly beauty near the water with a great view.
What would happen if you just got all excited and started putting up walls, windows ect... After months of work you call the best architects in town and say:
"Hey! I've built this amazing house. It got all the nice things that I want but it looks really really bad. Can you please make it the most beautiful house in world? One that would leave both my friends and neighbors  in awe." 

No respectful architect would ever take on such task. They would tell you to tear down the house and do it the right way. Even if the architect agreed to help and you had all the luck in the world (trust me you would need it) the house would most likely end up as mediocre. It would never be a true well-thoughtout beauty with a unique and extraordinary experience.
For the rest of your life you'd regret not calling the architects first - and then start building once you had the drawings ready. 

//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.