Windows Phone Design Day – Europe Tour Fall 2011

We have exciting news for our friends in Europe and South Africa. Corrina Black and I will be visiting you in your country so we can spend a day together talking about Windows Phone design. Microsoft has hosted multiple events focused on development (engineering) of Windows Phone apps since and before we first released Windows Phone. These events will continue and are in fact going on as we speak. If you are interested in learning more about Windows Phone development visit AppHub to learn more about opportunities in your city.

Now, if what you want is to learn more about Design and UX then join us at one of the Windows Phone Design Days.

Durban (10.17-19), Lisboa (10.24), Barcelona (10.25), Antwerp (Brussels) (11.3), Paris (11.8), Dublin (11.9), Helsinki (11.15), Stockholm (11.18), Germany (11.22 – Cologne)

If you have any questions just ping me in my Twitter account. Also, follow the Windows Phone Design team for tour updates as well as team updates, news, inspiration. Finally, here is a Twitter list of everyone you should follow when it comes to Windows Phone design/UX – most of these folks are designers or PMs in the Windows Phone design studio.

This event is for both developers and designers because both profiles participate in creating Windows Phone apps. Many developers have published their own app(s) on the Marketplace already (way to go!) – but now it’s time to learn some practical ways to enhance the design and UX of your app. This will make your apps more popular in the marketplace and help you generate a more loyal crowd that loves your app. This one day design event will give developers and designers practical tips and tricks, methods and techniques to boost the quality of your Windows Phone apps. We will talk about how to leverage the best of Windows Phone and the Mango release.

For a bit more than a year, Microsoft has talked about Metro many times – mainly in the context of Windows Phone and lately expanded this conversation to the next release of Windows, Windows 8. Most of the conversation we’ve had with you about Metro for Windows Phone has been mostly about the “Why” – We just released the Mango updated for Windows Phone, we have 30,000+ apps (and growing) and with more momentum than ever, it is time to switch gears and start talking about the “How”. How do we use a grid to compose our UI the same way senior/pro designers do here in Studio H in Redmond? – how to design icons for your app that look Metro and that communicate your features correctly? – how to properly incorporate your branding into your application and differentiate yourself from others?

The Metro design style in Windows Phone has a set of principles. If you learn these principles you can produce great experiences using out-of-the-box and Silverlight toolkit controls and other UI mechanisms. But, if you learn these principles you can take things further. We will also show you how to do this. For example, a lot of people think Metro apps need to have black background – wrong! (although most samples we’ve shown you indeed use black background) – Metro apps can totally take in your brand and differentiate it from other competing apps. Metro apps in Windows can go beyond pivot and panorama and we’ll show you ways to get there.

We begin with a METRO session that is tailored at developers – practical and concise. We’ll learn the Metro principles and how these come from universal principles from the International Typographic Design Style (or Swiss Style) – a design style that has no expiration date – it is timeless. We will then jump into a session called THINK. Before jumping straight to code – let’s think about opportunities and scenarios to help our users. Don’t just choose to create an app because ‘there’s a web service or RSS feed available’ – instead, think of the app from the user’s perspective. It is a process called Ideation. It involves brainstorming techniques, exploration techniques and consolidation techniques. We will show you all these, from hand sketching (yes! bring your sketchbook) to wireframing, storyboarding and paper prototyping!. After we have defined what we want – then we DESIGN it. In this session we will design end-to-end a Windows Phone app using out-of-the-box Metro controls and navigation metaphors. We’ll learn more about grids, alignment, typography, how to choose colors and create panorama and pivot backgrounds. When custom interaction is needed in your app and no out-of-the-box Metro components can directly solve this need, we’ll show you techniques to push Metro forward and design your own UI controls. After DESIGN comes REFINE. In this session we will give a large number of valuable and practical ways to ensure quality in your app – best practices, performance improvements and more ways to take your app to the next level. Corrina will share some of her own experience in producing Windows Phone apps that can be more successful once published to the Marketplace. In the BUILD session we will take all we’ve learned and build a prototype of our app in Expression Blend. We will learn more about importing assets into Blend, adding animation, using controlsm databinding, behaviors and other advanced tricks that only Corrina could teach us 🙂 – Using a Metro app for Windows Phone Corrina will also how us how we can innovate on top of what Metro offers out-of-the-box.

There is basically no coding in the Windows Phone Design Day – but bring your PC and follow along – bring your sketchbook (or notepad) and sketch along!

Here is the agenda for the day (although note that each event might vary a bit depending on allocated sessions and in some cases we are joining an existing event).

Sign up today! 🙂 invite your friends – developers, designers.

Durban (10.17-19), Lisboa (10.24), Barcelona (10.25), Antwerp (Brussels) (11.3), Paris (11.8), Dublin (11.9), Helsinki (11.15), Stockholm (11.18), Germany (11.22 – Cologne)

A Vision of the Future for Home and Work Experiences by Microsoft Surface

The concept of creating vision videos to sell an idea has been around since there has been cameras and specially TVs. Just like today Microsoft publishes a Health future vision video, 50 years ago people were also pitching the “Hospital of the Future” or movies and documentaries were displaying how life would be like with future technology.

Portraying the future has always been a passion for humans. The “What comes next?” question drives many people of many backgrounds, from painters, designers, developers, engineers, politicians, stock brokers and of course gamblers. Video as a medium to communicate messages is very effective because it is so rich. Video offers moving images and sound that communicate ideas in a more tangible, digestible manner to people. Video does a better job in tricking people to think that what they are watching is “real” – “If I see it, hear it and makes sense then it should be real”… and if not real at least it is more “credible”.

One of the most exciting things about going to the movies is we let ourselves immerse for 90 minutes in a surreal world but a world credible enough that we can actually identify ourselves with characters and story. The result is we enjoy the movie. Everytime I see a User Interface in a movie I go like wow, cool, it is inspiring. Sure, HD holograms that I can touch and manipulate in the air exist yet but I don’t care – My premise as a designer is there are no limits and not borders. That’s the only way you can think outside the box. It is not that you should be naive or even stupid – I won’t propose my client a 3D Hologram touch UI tomorrow March 9th 2010 but removing limitations during early stages of the design process frees you up to come up with creative solutions. That’s why I love movies, because they are crazy, and unbelievable and they go beyond what I see everyday. Movies are paid vision videos of 90 minutes… and some of these like Iron Man or Avatar have made billions of dollars.

Throughout history Microsoft has also created many future vision videos. Before I worked for Microsoft I remember watching late 90’s .NET future videos . I loved those. I tried to find those in YouTube but couldn’t. I have them in DVD at home. I’ll probably upload for you to watch. Most of the things I’ve seen there have now become real (10 years later). In this same spirit, the Surface team in Redmond has produced a couple videos to share their vision for the future. The videos were actually made public some 10 months ago but they are fun to watch.

To understand the two following videos, you might want to watch August de los Reyes Natural User Interface session. The idea for these vision videos is to express some of the concepts behind the research and thinking of how natural user interfaces will change our lifes in the near future. These couple videos look simply unbelievable (almost not credible) but if you watch August’s session you will understand where the Surface team was coming from when the envisioned Home and Work in the future and why these videos might actually be more realistic (in future terms) than we might think today.

Natural User Interface (NUI) is here. New systems of interaction require new approaches to design. Microsoft Surface stands at the forefront of this product space. This presentation looks at one of the richest sources for inventing the future: the past. By analyzing preceding inflection points in user interface, we can derive some patterns that point to the brave NUI world.

An abstract of life in the workplace of tomorrow with suppressed visibility of technology and devices; directed by Microsoft’s Dane Storrusten, created and by INVIVIA

An abstract of life in the home of tomorrow with suppressed visibility of technology and devices; directed by Microsoft’s August de los Reyes, created and by INVIVIA

So the question is why would only big corporations produce vision videos? The answer is NO!, everyone, all of us who are part of the IT industry, the Web… the UX and Design world… we should all see ourselves at the beginning of a new project for a client as a James Cameron or a George Lucas. Vision videos are for everyone. Vision videos do not have to be always thinking 50 years ahead… make vision videos 1 year head… 6 months ahead… 6 weeks ahead. Help your client visualize the future. There is “magic” when someone (like you) are able to show your client where they will be in 6 months (after they hire YOU to design and develop their new website, business application, or mobile experience)… and yes, here comes the marketing pitch! Use SketchFlow! whoa! – did I just trick you into reading this whole blog post to finish with getting SketchFlow? if you are reading this, chances are I succeeded 🙂 but no, seriously, there are many tools designers use to visualize the future… Adobe After Effects is a great tool to produce videos with effects and a lot of agencies use it. It is not a prototyping tool per se but people use it for visualization. I call it “the Photoshop of video”. Mastering AfterEffects is not easy though. Also lot of people use Powerpoint! yes, slides with animations to communicate how the final application or website will look like – the vision of the future… well, I think you will also find that Expression Blend and SketchFlow can help you create these future visions. You can create animation easily and integrate images or graphics from Photoshop or Illustrator. You can integrate video and even simulate how your client’s experience will behave “in the future” by making this Silverlight-based vision interactive. Prototyping is about helping you visualize where you are going to and discover issues and opportunities before hand. The same principle of the power of video applies: the richer the medium is to communicate your message – like a future vision interactive prototype – the more engaging and charismatic your ideas will be for your client.

Future vision videos and prototypes get people excited!
You determine the timespan of your “vision” (e.g 50 years, 10 years, 1 year, 6 months or 6 weeks)
Use different media to share your vision to your client. They will love it.

For example, check out this terrific vision of the future video that with INCREDIBLE detail described how life would be in the year 2000.
Follow me @arturot and if you are going to MIX10 drop me a tweet to chat.

Become a Design All-Star – Check out the new .toolbox design program for Silverlight!

What a ride this has been! This is what I and other more than 30 people from different companies have been working on together for the last 6 months: .toolbox.

A bit more than a week away from when we went live we already have around 2,500 students from 80+ countries around the world!

Follow us on Twitter, Facebook ad YouTube.

.toolbox is an online design training program where you will find two study tracks: Design Principles and Design Scenarios. You can take the training, present evaluations, collect badges and share your status via Twitter and Facebook. Do you have what it takes to get the ultimate Design All-Star badge?!

Design Principles is all about learning how to do better UX and design in general. We have received HUGE number of requests for this type of content. You will find 12 modules on this track, each about an hour long so 12 good hours of UX lectures 🙂

Design Scenarios is all about learning how to use Expression Blend and the design aspects of Silverlight. We have 12 modules, each about an hour long. The evaluations will only cover what is on the video but in addition we’ve included assets and a guide where you can follow a hands on lab. Some of the mini apps we have in the school are: SketchFlow Prototyping, Music Mixer, Canvas, Games, Business, Avatar Creator, Weather and more…


Since we first released Expression Studio 1 and Silverlight 1 the need train developers and designers in the use of this new platform has been huge. Everyone knows how to use Flash or Photoshop but no one knew how to use Expression Blend. All this time Microsoft has been growing investment on Silverlight resources and building better websites with learning materials. These days passionate community members also drive amazing blogs where they share tips and tricks to use Expression Blend.

For a couple years I drove a program called Artist in Residence which invited designers to Microsoft to work with developers to learn Silverlight and Blend. I also did the internal Artist in Residence where dozens of Microsoft teams, from XBOX to Office, to Bing to MSN got trained in the use of Silverlight and Blend.

After all these interactions I realized we were reaching maturity level in the business where we needed to go broader and reach many more people. Even though having designers visiting us in the campus was unbelievably fun and one of the most memorable experience of working for Microsoft, you can only reach so many people that way. An online design training program was a better solution moving forward and so we came up with the idea of creating the .toolbox.

The .toolbox is a website that trains developers and designers, evaluates knowledge, awards badges for achievements and that then shares your status via Twitter or Facebook. We hired multiple companies to help us build this site: Avlade produced all the Design Scenarios modules. Archetype many of the mini apps you will build in the school. Fuel Industries created the whole website and also a couple of the mini apps. Template Monster provided 3 beautiful sample templates from their library. Internal Microsoft UX designers contributed to the creation of the Design Principles modules.

If you have any questions/comments about .toolbox drop me a comment here and if you run into issues while taking the training please post directly to the Expression Blend forum. Remember to label your questions with TOOLBOX and then you question.