Nokia partners with Toledo Design for UI Design Reviews

By

|

September 17th, 2013

|

No Comments

A few weeks ago our friend @darabella from the amazing Nokia Developer Experience team reached out to propose taking one of our design services in incubation to the big leagues with the very popular DVLUP program. If you are not familiar with DVLUP and you do Windows Phone development, be sure to sign up. It’s basically a perks or points system that allows you to collect virtual currency for being a Windows Phone developer. You can then trade those points for amazing stuff like a brand new Lumia 1020, Microsoft Surface and many more gifts. One of the things you can get are Nokia Design Consultations with us, with Toledo Design.

The basic idea is to help you take your app user interface to the next level and make it awesome!

Nokia Design Consultations are dedicated 60 minute in-depth and actionable design and UX reviews directly with you and your team. The session gets recorded so you get to keep the feedback to incorporate into your app.

After the 60 minute review, and if you chose to do so, one of our senior designers will take a few hours or a full day to redesign selected screens for your app. We will provide you with high fidelity comps and the source Microsoft Expression Design files. This is the closest to hiring a dedicated design agency to handcraft the UI for your app!

If you do not have designers in your team or if you wish to provide industry expert feedback to your design team, Nokia Design Consultations are for you!

More info here…

We have 3 different types of design consultations available for you via DVLUP. While the One-Hour consultation is a terrific way to substantially enhance your UI, an Advanced or Pro consultation will give you actual high fidelity comps. We will sit down and re-design selected screens of your app Smile

Ping me or Alejandro anytime if you have any questions and looking forward to helping you with a Nokia Design Clinic for Windows Phone!

One-Hour Consultation

Design review with a senior designer from Toledo Design
Tips & tricks
Annotations and comments
Schematics
Design pattern guidance
Video recording of the design review

Advanced Consultation

One-Hour Nokia Design Clinic as described above plus…
High Fidelity Comps (4 hours of work!)
We will create some high fidelity comps to help you enhance the look and feel of your application in 3 hours of work.

Pro Consultation

Like the Advanced Consultation but with 12 hours of dedicate redesign work for your app!
We will create some high fidelity comps to help you enhance the look and feel of your application in 12 hours of work.

Here are some examples of apps that have been redesigned using the same methodology used by us. First couple examples are Windows Phone. The others are Windows. Nokia Design Consultations are only for Windows Phone but this will give you an idea of the significant improvement apps go through after one of our consultations.

Side to Side Facelift Samples


Beyond Tiles: Western Europe Design Tour

By

|

May 10th, 2013

|

5 Comments

I think the time is right and the mood is proper for me to announce the upcoming Beyond Tiles, Western Europe Design Tour. It is a one-day design extravaganza where Microsoft, NOKIA, Toledo Design (Arturo and Alejandro) and some special guests (i.e Brady Voss from the Windows Phone design studio in Redmond, Vincent Garcia, from Avanade in Stockholm and NOKIA guests) will be sharing with you insightful and practical design knowledge to create Windows Phone and Windows apps that can go “beyond tiles”.

BeyondTiles_Tour

As recently discussed, it can only be the Community who pushes Windows and Windows Phone design to the next level. Luckily for us we have a couple good shepherds to guide us in this journey: Microsoft and Nokia. There’s so much more design potential for applications created under the original modernist principles of the 20th century, from masters like Gropius, Vignelli, Rams, Van der Rohe and Kubrick. Some call it Metro, others “flat, others “modern”, we just like to call it “Good Design”.

Windows Phone is more than just Panoramas and Pivots and Windows is more than just tiles. If you want to get a first (very first) hint at how to go beyond these out-of-box design paradigms with your own design innovation, then join us at this event.

The day will be packed with design conversation, quotes, images, videos and live demos. No coding here! – no Visual Studio or even Expression Blend. Just hardcore UX and design with Expression Design, Illustrator and Photoshop (and Powerpoint).

Our initial tour will last about a month and we’ll have the pleasure to visit the following cities: Stockholm - May 20, Oslo – May 22, Helsinki - May 23, Vienna - May 25, Rapperswil (Switzerland) - May 28, Madrid - May 30, Lisbon - June 3, and Lecce (Italy) – June 5. We hope we can bring this event to your city in the future as well :) If you are interested, drop us a tweet with the #beyondtiles hashtag.

Sign up now to attend the city closest to you in the links above. Tweet #beyondtiles when referring to the event.

There’s more than 30 people involved from Microsoft, Nokia, Toledo Design, Avanade and App Campus as part of this tour. We are happy to do bring the design discussion to your city.

The agenda will consist of seminar like sessions with coffee breaks about every hour. At the end of the day we will host 1:1 design reviews. We call them Mini Facelifts. These will be 10-15 minute sessions with those of you have Windows or Windows Phone apps and would like our opinion and design feedback. We’ll have sketchpaper so you can take some of these tips with you.

BeyondTiles_Tour_Agenda

Here is a collection of resources we think will be useful to you as an attendee of Beyond Tiles.

  • Windows PC (even if it’s a Mac loaded with Windows) :)
  • Expression Design (and/or Illustrator/Photoshop)
  • Pencils, Pens
  • Sketchbook
  • A Friend

The event style is seminar based (not a workshop) but we will keep it fun with different speakers, lunch and nice coffee breaks.

Thank you and remember this is all just part of the conversation. Be a part of it. We are here to listen to your ideas. Here are some valuable links that have inspired through the creation of the content for this tour.

Windows Design Guidelines
Windows Phone Design Guidelines
24 Weeks of Windows Phone Design
Useful Shortcut Infographics for Windows
THE icon collection for Metro apps
Microsoft Expression Design
Designing with the Mind in Mind – Amazon
Sketching User Experiences – Amazon
The Design of Everyday Things – Amazon
Master Design Massimo Vignelli’s Manifesto
Awesomeness (Swiss Posters)
Swiss Posters
Everything Swiss Design via Bing
Nice Swiss Poster Collection


Don’t call it Metro, call it Good Design

By

|

May 2nd, 2013

|

25 Comments

I think I’ve been wanting to write this blog post for a while. A few days ago, Facebook announced the release of a new Windows Phone app (Beta). The app does not use the typical out-of-the-box controls i.e. Panorama, Pivot or Page that have “traditionally” given Windows Phone it’s particular flavor and perhaps even differentiation from iOS and Android design languages. The release of the Beta sparked a range of comments, some in support, some against the design aspects of this app. To be clear, the ones that support the app (me included) are not saying that this is the best ever possible app of all times… We are simply celebrating the fact that a major industry player like Facebook is pushing what I’ll call Metro, to the next generation. This celebration is independent of whether it is Microsoft itself or Facebook who actually authored this app. There are questions about whether Microsoft is actually behind the development and design or if Facebook is doing in house and/or with the help of a 3rd party agency. All of this is meaningless. The app is an official Facebook app and that’s what matters.

For 3 years now we have seen 100K plus Windows Phone apps hit the market. Many of them are games and the rest rely on mainly two design patterns: Panoramas and Pivots. I’m sick and tired of this. It’s not that Panorama and Pivot are wrong, no, they are reliable, flexible, powerful controls that give you a lot of options to create great apps. My problem (one that is shared by many in the community and inside of Microsoft) is that we have made these two patterns dictate our 100K Windows Phone experiences. This is wrong. Design patterns like Pivots or Panoramas are just that, patterns. A mature, design savvy, sophisticated designer knows that that story and experience comes first, much before “design patterns”, those are just tools. By slaving ourselves to these couple patterns we’ve tried to solve 100K experiences… It’s almost laughable when you think about it. If you think this is just a recent problem, no, it’s actually been there from the beginning. I talked to numerous Microsofties of all levels and most agreed “all Windows Phone apps look the same” – don’t you agree? But hey, isn’t that a good thing? The way higher level execs would pitch it is by saying they wanted to offer a unified experience in the phone. Nah, among other business reasons it has more to do with enabling an ecosystem with zero apps to get quickly to a 100K apps. UPDATE: As many people have pointed, growing the Store from 0 to 100K is certainly not the only reason. It is certainly a natural thing for a new product/platform to kick off the ecosystem with a defined set of design patterns and then seeing it grow from there. The interesting thing here is reaching the point where the community can push Metro to the next level on their own which is what seems to be happening here with Facebook.

There couldn’t be better news for Windows Phone about seeing the Beta for the new Facebook app. Finally after 100K apps, a sign of maturity in the ecosystem. A big player betting for something new. When developers and designers “feel part of” an ecosystem they push it to the next level. That’s what’s happening here and it must be celebrated by everyone who cares about the ecosystem.

Now, what is it that matters most to me when I buy a Windows Phone? My Windows Phone experience or my Facebook experience, my Twitter experience, my Spotify or WhatsApp experiences?

The truth is once you are in the phone, what you care about are the apps. The Windows Phone team has done a lot of work (and a really good one) on creating what I’d argue is the best out-of-the-box experience of any phone. Look, take out all the 3rd party apps from Windows Phone and you still have search, local scout, maps, phone, music & videos, SMS, Facebook, Twitter, LinkedIn integration etc etc… There’s tons of value in Windows Phone on its own and a lot of it comes from the out-of-box services. More than in other platforms. But you know? People sometimes still prefer to use the Facebook app instead of the Windows Phone People Hub thingie. Why? Simple. As a user I’m interested in living the “Facebook experience” in blue color, familiar icons and UI metaphors as well as have access to as many features in Facebook as possible. The Facebook app will always be more feature rich than the native out-of-the-box Windows Phone service. Translate that to all other 100K experiences and its the same, people want to experience the Spotify, ESPN, IMDB, Netflix, XBOX experiences, not just the Windows Phone experience per se.

So think of it this way, what is really Windows Phone, iPhone or a Galaxy phone? They are simply portals to other experiences that bring value to users. These portals are the apps. A metaphor is that phones and their out of box services are the Las Vegas strip. The structural solution. And then all the hotels along that axis, along that structure are apps. So you get apps of all sorts of types because each is looking to provide you with a different “experience” although you always feel “inside Las Vegas”. Phones are the same. They are worthless without apps, and the more spectacular, usable, beautiful, valuable apps the more valuable the ecosystem becomes. When you buy a phone today, you are not buying a phone you are buying yourself a way into an ecosystem. Whoever has the warmest, coziest, most fun ecosystem will win.

What would happen if all the hotels along the Vegas strip looked and felt the same? People would get bored too quickly and easily. It all feels the same. That’s how the Windows Phone ecosystem feels to me because 100K + (minus games) experiences have been built with then same two and only two types of design patterns available: Pivot and Panorama. As I mentioned earlier, developers and designers should not have to force their stories, their experiences to these two design patterns. If they work for your experience go ahead, use them but don’t just use them because Visual Studio has a Create New Panorama Project or Create a New Pivot Project. Who is the star of the show? Windows Phone? Or the experiences that apps provide? I’ll say for sure that it is the apps, the Facebook, Instagram, Spotify, Twitter, Netflix experiences that matter so by all means let those big players use whatever design patterns they like so that they can successfully “deliver the Facebook experience” within Windows Phone. Also, by all means please, you, the developer and designer of apps, allow yourself to tell your story, to create the experience you need to give value to your users. Define if you can leverage Panorama and a Pivot but do not hesitate for a second if you realize those design patterns don’t work for you.

Am I proposing anarchy? Chaos?, no – there is a set of Design Principles (with capital letters) that drive all experiences in Windows Phone. Skeuomorphism for example is not one of them. Adorning apps with stitches, leather, wood and other fake ornaments are a last resource – notice I say last resource, as in giving it a possibility to exist in Windows Phone, because as we said before, story and experience comes first and if you need metaphors like leather, wood or rusty metal to convey that experience then so be it… Yes, even in Windows Phone. But I bet you it would be very hard to justify iBooks wooden look and feel under these, our Principles.

Am I saying everything should be “flat”? Oh jeez I hate that term. If you ever hire a designer, developer or read an article with the words Flat Design in their title, just runaway, run to the mountains, because that person doesn’t understand that this isn’t about being flat, it’s a not a style… Styles come and go, like fashion styles… They are hot now, they are dead in two years. The thing Microsoft and now Apple (thank you Ive), and a huge number of UX and UI design agencies are trying to do is to apply the design principles of Modernism. Modernism, you know? The philosophical, fine arts, architecture, cinamatographic movement that started in the early 20th century. Bauhaus, Swiss design, International style, Helvetica and geniuses like Massimo Vignelli, Walter Gropius, Mies Van der Rohe, Richard Meier, Dieter Rams, Luis Barragan, Stanley Kubrick and even Jonathan Ive from Apple are just some of the lighthouses and masterminds that spent a century exploring the same things that today’s designers are exploring. How to convey stories, and enable user experiences. We simply happen to have a different medium, it’s not oil or acrylic, nor brick and mortar, but pixels. Those tiny little sparks of light that we as designers carefully arrange and order. That’s our medium, plus the input mechanisms which these days we have plenty. So when someone says ‘flat’ then the conversation automatically degrades to talking about styles or fashions instead of a timeless movement like Modernism. Read more about the guys I mentioned above, read more about Modernism, the movement, not the style.

And all of this doesn’t apply only to the Windows Phone ecosystem. iOS and Android are the same. They have design guidelines… Guidelines, not laws, about how to design for those platforms. Think about it, the most breakthrough apps from iOS have come precisely from startups that broke apart from the out of box design elements in iOS. Look at Clear, Paper, Flipboard… all award winning apps, all leveraging their own design language, not Apple’s out-of-the-box.

Remember design guidelines are guidelines, not laws. And Microsoft will NOT reject your app for design/UX reasons (not for Windows Phone, not for Windows 8). You are FREE to whatever you think it’s best for you app.

I’ll close with something that my two good friends August de los Reyes, Sr. Director for XBOX design studios and Sean Wolcott, also a Sr. Designer with XBOX said to me a few weeks ago: “… don’t call it flat, don’t call it Metro, don’t call it modern, just call it Good Design.”

 


24 Weeks of Windows Phone Design Offline PDF

By

|

October 23rd, 2012

|

7 Comments

Many people have been asking us to make the 24 Weeks of Windows Phone Design blog series available offline. It was also one of our early commitments when we started posting. Well, here it is. We’ve taken the entire blog series and wrapped it up in a PDF file. We added page numbers and a table of contents that should help you find topics much faster. These days PDF files can be opened across devices so it should be no problem to open it in your iPad, Nexus and very soon, Surface. You could also read it on your phone! We did not alter the contents so we apologize for the blog-like approach and informal tone. We also decided not to call it an ebook, it’s just a compilation of what we have in the blog. This is a free download (needless to say). Feel free to distribute.

 

 

Please drop us a note if you find any errors, issues or simply weird things – we’ll capture these bugs and fix the document. And let me tell you a personal expectation and wish I have for next week’s BUILD event – I’m expecting both Windows 8 and Windows Phone 8 design and UX documentation to be ready so this PDF we are sharing with you today might have a short lifespan :) We recommend always to refer first to Microsoft’s documentation for Windows Phone and for Windows 8.

I’ll also use this opportunity to share with you an update of what we’ve been up to:

We delivered our first Windows 8/Windows Phone 8 training in California. We are polishing it to make it the very best design and UX training. We believe it is fundamental for developers and designers to design experiences, not applications, that span across multiple devices. Our course is a Microsoft platform design workshop so we cover phone, tablet, desktop and hopefully in the future TV.

Alejandro and I will be traveling to Sweden to participate in Oredev from November 6th to 9th, please shoot us a tweet or email to hang out and chat. We will then head over to Helsinki to participate in the WOWZAPP Windows 8 hackathon and will hang out in the city to deliver a couple design workshops. Please drop us a note if you’ll be in Helsinki from November 10th-15th.

 


The Vignelli Canon + Massimo’s Master Designer Workshop

By

|

June 26th, 2012

|

1 Comment

During the week of July 22th-29th, I will be attending Massimo Vignelli’s Master Designer Workshop in Rochester, NY along with my friend August de los Reyes. I can’t stop to think of August’s words (and warning…): “Be careful. A week with Massimo might change your life as a designer.

Having Massimo as a mentor will be amazing. I will do my best during the camp to learn as much as I can from him and other designers. I’m curious to learn more how to implement print media and typographic design practice to user interface design.

Massimo is one of the most influential designers of the last few decades in the US and the world. He is well known for his work on Typography and Information Design – (the International Typographic Style influenced and inspired Microsoft for defining the Metro design principles and design language). Massimo and his wife Lella have done a lot of industrial design as well. Learning from Massimo will be learning from the source.

Vignelli Sample Work

 

The Vignelli Canon

As part of attending the workshop we’ve been asked to read the Vignelli Canon so I ordered it in Amazon for some $20 USD although I later realized Massimo was kind enough to make it available for free to any one.

I started reading it and I would highly recommend, you as a developer or designer, to read it too. Massimo has has divided the Canon in Intangilible and Tangible elements. There are 19 elements on each category. We will do a short posts (via Tweets) on each one with some ideas and reflections on how these apply to experience architecture and interface design.

 

 


Thoughts on experience architecture, interface design, and design education

By

|

June 16th, 2012

|

No Comments

Today I’d like to share something with you. My brother Alejandro and I are starting a design firm. We are having fun searching for the right (perfect!) studio office, recruiting people and all the other things that have to come together to really kick off including of course, clients :). We will keep you updated and will let you know as soon as we are open for business. If you need a hand with Windows 8 and Windows Phone design and UX, just drop us a note and we’ll be sure to help you as soon as possible.

 

Toledo Design Cards

 

We wanted to share with your some of our thinking behind the studio. We believe we need to have some strong philosophy behind what we do. We are crafting our design principles (we are calling them Alpha) and defining our mission. Let us first share with you our tagline:

 

“We are an experience architecture, interface design, and design education firm. We are an extension of your team. Your design team.”

 

Let’s breakdown this tagline to take a closer look at our goals for the studio. Let us know what you think, your feedback, ideas, opinions. Please leave us a comment :)

 

Experience Architecture

Why architecture and not design? I have found time after time that the level of detail and depth required to define an experience has grown to the need of creating design systems. Designing systems is something that traditionally architects do. I’m referring to both building/houses architects as well as software architects. Well, just like those professionals, a user experience architect also defines (or designs) visual, interaction, motion and experiential systems.

Make sure to watch this amazing video that explains what architecture is

 

What makes a cup, a cup?

 

Throughout the last decade, all of us as an industry have grown to become more mature professionals, more inclusive, deeper and more conscious with the processes and methods we use to craft experiences. The level of complexity for creating digital experiences has grown and the teams have grown just as much and as fast. Being a visual designer or interaction design is not enough anymore. Teams have specialized professionals on visual, interaction, motion design, research, usability, accessibility, localization, branding, marketing.

As architect I might be biased and it might simply be a matter of semantics (Architect = Noun, Design = Verb or the other way around?) but I believe that what we do today or at least we should, is first, architect experiences. Some even go as far as saying we cannot ‘design‘ experiences . By elevating our practice to experience architecture we increase the level of responsibility but I think the world needs that.

 

“As experience architects we create design systems. We architect the experience.”

 

Just a few years ago, if a client asked me to design a website, I’d design it. Simple. And my test matrix was simple: Internet Explorer 6 or 7. Today, take a look at what we are all dealing with: four/five major browsers in multiple screens, three phone platforms and three tablet platforms with a range of resolutions (and different versions… cough-android…). In addition there are proprietary app platforms like iOS, WinRT or Android plus you could opt to create web apps. The test matrix we need to deal with today is huge and it is multidimensional. And don’t get me started with input methods.

 

Animoca - Android article

 

Today, to be able to define an experience around say, running or shopping, you really need to think architecturally. In the near past, when clients wanted to have digital presence, it was simple, a website. Period. But today, defining the end-to-end digital experience for a client requires of a bird’s eye view of entire ecosystems.

That is the way we will be approaching our practice. Helping drive projects from the beginning (when possible) and influence the multi-screen and multi-device experiences.

 

Interface Design

There’s been a long and big discussion around the difference between UX and UI. The way I described it in Quora was: “The difference are the materials you use to craft each, UX = Emotions, UI = Pixels”.

I think the long and sometimes heated discussions are due to the fact that one can’t be without the other. But make no mistake, user experience is THE king. Even content, which sometimes we elevate as the most important ingredient is subject to the experience.

We are deciding to refer to experience architecture and interface design as two different aspects of the studio. This is for a simple reason: we know that many times our clients will already have designed or built prototypes or even what they think is the final app and we will be hired to contribute with designing (or re-designing) the user interface without the possibility of influencing “too much” on the flow or information architecture of the app. Some designers might pick on us for selling out :) but we are not – it’s just the reality of life – that many times designers are asked to participate in a project later in the process.

We acknowledge that the best way for designers to drive and influence the final outcome is to include them from the beginning. We want to be able to help our clients from the beginning but we know this will not be the case many, many times and we are ok with that. We will help our clients on interface design opportunities as well as with end-to-end experience architecture opportunities. Designing the user interface will influence the experience, so even if we participate on a project at a later stage we will be thrilled to take our client’s projects to the next level and influence the experience.

 

Design Education

We will be sharing our design methods and practices with developers. We are currently crafting a series of online and offline design courses and workshops. Learning from these last 7 years of experience in training developers and designers around the world, our studio is crafting the best of the best in person design workshops. We are integrating a number of fun and creative activities that end up taking you and your team to the next level in conceptualizing and designing multi-device and multi-screen experiences. That is a core aspect for us, to empower you to design across screens. We will begin with Metro design workshops and we’ll extend to include iOS, Android across phones, tablets, laptop/desktops and TV as well as with different input mechanisms like touch and air. Helping the developer community enhance their design skills will be our mission. Contributing to the worldwide design community online, blogging, at events and conferences and via IxDA and other design associations will also be our mission.

 

We are an extension of your team.  Your design team.

Here’s the key differentiation of our studio from other studios in the ecosystem: we are focused 100% on helping development (engineering) shops. This means it is not our goal to directly attend clients like Nike directly (sorry Nike :)). We are interested in attending system integrators, ISVs, tech startups and enterprise development and IT teams. It’s a very specific set of clients.

 

Toledo Design fits in your engineering and business model.

 

Why are we deciding for this focus? Throughout the years we’ve spent a lot of time meeting and learning from developers. We understand their needs and thinking model. We also know that today as never before, development shops understand the need of incorporating experience, usability and design best practices into every piece of software they produce. Long gone are the days when software could simply be “functional”. The experiential connection between user and software is fundamental. This is true for both consumer experiences as well as business applications. Experience can deliver a better ROI. We will act as an extension of your team, as your design team.

 

We are focused 100% on helping development (engineering) shops. We are an extension of your team.

 

About the Name and Logo

The name of the firm is read Toledo Design. The logo is inspired in swiss typography. It is very simple. It is made of Swiss Medium type. We reduced the tracking to keep it nice and tight adjusting character by character. The number 2 in the logo has its baseline at the center of the O. It is also Swiss Medium. The orange in the number 2 is strong and vibrant and has a multiply blending effect to make it overlay on top of the O generating translucency. I liked how we first established a visual rhythm with T O L E D O but then we kind of suddenly or abruptly break the rhythm with the number 2. The metaphor also describes how TOLEDO is really just part of the equation as reading the logo literally gives you “Toledo raised to the power of two”. While we might think this power of two is Alejandro and I, well, in reality we think it is us and You :). We are not complete without you and your team.

Toledo Design Logo

We considered using other names for the studio but realized that at this point most of you know me by my name. For all of us, our name is our brand. I also got influenced by architects who only a few times get to use a commercial name like Morphosis or Asymptote. But at the end it is the name of the people, in this case Tom Mayne, Hani Rashid and Lise Anne Couture, who are recognized by clients. From Saha Hadid to Daniel Libeskind, Frank Ghery or Luis Barragan, architects tend to name their studio after their own name.

 

Stay Tuned

We will keep you updated with plans :) In the meantime please share any ideas or feedback you might have. Thank you!

Arturo & Alejandro