Here are some resources from the session I held at NDC London today.
Other fun facts and information about brandcolors and logos
Here are some resources from the session I held at NDC London today.
Back in April 2014 I met up with a couple of dev-friends over dinner and brainstormed ideas. Not only did we have good food, we also decided to do a Swedish, low-cost, .NET conference.
And so the planning began, we are 5 people on the board and we have another 7 members on our Swetugg Events committee.
It was super fun and a lot of work to put together a conference. None of us had done it before. Luckily two of the board members have awesome employers so they could take time to work on Swetugg during work hours and Jimmy and I do a lot of other events so we are used to planning stuff like this.
The hardest part about the conference was probably the schedule (besides finding a suitable venue). How do we decide if the speaker get a large or small room? How do we decide what topics to book? We were 3 people working on picking the talks and we are interested in different things so I think it worked out fine.
We got a lot of positive feedback during the event (and after) so based on that, I would say the event was a success
But I didn’t only co-organize and work during the conference, I also did a talk about design.
My session concentrated on how to think when it comes to colors, typefaces, pictures and why. Also how to do an easy logo and icon for your app without having a designer on the team.
You can find my slides here. (In Swedish)
Now I’m off to plan the next event, Hackathon season has begun!
So in short this is what you should think about while designing your app bar.
* Most used buttons to the far sides of the app bar
* Group similar buttons together
* Use menus and flyouts to save space
* Persistent buttons to the right
* If you have more than 3 persistent or more than 1 group, split them up
* Contextual buttons always to the far left side, and never shown before they are usable
* Make the app bar sticky when you show contextual buttons
* Additional (hidden/inactive) buttons should never move persistent buttons, place them to the side of them.
There are of course some exceptions to the rules ;)
“New, “add”, anything that is used to create or add an item should always be placed to the far right. It should always use the + sign, and this is the only buttons allowed to use that.
”Delete” and “Remove” should always be to the left of “new” and “add” (so second to the right edge)
“Select all” should always be to the far left.
So there you have it, Windows 8 app bar all demystified :P
This is “Demystifying Windows 8 app bar” part 8 of 8.
All navigation should go in the top app bar. It can be shortcuts to parts of the app or even categories of your app.
You can also have submenus in the top app bar. The rules are not as strict for the top right now, so feel free to make it your own in a unique way.
Don’t forget that you can style the top app bar to fit your branding!
You get around 200 icons with the developer tools, use them, Microsoft has done that job for you.
If you don’t find the right button for your app you can use one of my favorite apps Metro Studio 2 from Syncfusion. It’s a free app with over 2500 “metro inspired” icons. You can even send in a request for a new icon.
Metro Studio 2 allows you to do some easy editing like change the size, color, background, padding, rotate etc.
Other resources worth mentioning is http://www.ModernUIIcons.com (former templarian I think) They offer 1100 icons in expression design format, svg and xaml.
and http://www.geekchamp.com/icon-explorer/ that has over 1500 icons in png, xaml and html.
There is a Windows 8 app called “xaml icons” that offers over 10000 vector icons. I have yet to try it but 10000 sure is a lot of icons!
It’s important to stick to the recommended sizes, placing and padding. The app bar is designed to hold 10 buttons in both orientations.
What you can change is the styling of the app bar.
For instance the color of the text, symbols and circles to match your branding.
It’s recommended that you put all buttons to the left and right so you can easily reach them no matter what device you are on.
There are some guidelines to this.
Persistent commands, the buttons that will show no matter what you have clicked on in the app, should be to the right side of the app bar.
Balance your app bar for ergonomics, so if you have more than 3 commands, or more than 1 group, you should put half of it to the left for easy reach.
Inactive and contextual buttons should not be shown until they are usable.
Never “gray out” a button in the app bar.
When you are about to show a previously hidden button don’t move the persistent buttons. Leave them as they are and put the new button to the side of them instead, this so the user still knows where to easily find the persistent buttons.
If you on the other hand have a contextual command you want to show, you should always put them to the far left. (pin/unpin in this case)
This is to show the users what new functions they can utilize, and because it’s highly probable that they will use these commands, and we want to give them easy access.
You should also make the app bar sticky when you show contextual commands, imagine having a photo manipulation app where you mark something in the picture and then you need to open the app bar for everything you want to manipulate, not practical.
Don’t forget to un-stick the app bar when you are no longer showing the contextual buttons though.
The app bar is made to hold 10 commands in any direction with the recommended padding.
However, with the handheld devices it can get a bit tricky to press the buttons in the middle of the screen (if you hold the device with both hands for example)
So try to narrow it down.
How to do that? well here are a few suggestions.
Start with listing all possible commands for your app (one page at a time)
Group all similar commands – in this case everything related to the view and filter. You don’t need to use a divider, but you have the option to.
Use flyouts and menus where appropriate – this example only shows one filter button, but all 3 is shown in the menu. A real space saver.
An important thing to take into considerations is ergonomics. With Windows 8 and 8.1 came a lot of different devices, small 7” tablets, laptops, very large screens etc.
You need to think how people handle their devices, and with tablets you need to think about the orientation of the device as well.
Windows 8 apps is first and foremost made for touch, if you design with that in mind you will automatically get mouse, pen and keyboard to work too.
This picture shows you where the best, better and not so good areas are when it comes to reach. Because we think touch first, we need to imagine the user holding a tablet/slate/surface (whatever you prefer ;) )
Also keep in mind that most people are right handed.
So all important touch areas should be in the white area.
When it comes to text you should avoid those areas and put all important text in the top of the screen, that’s the optimal placement for reading and where your hands won’t be in the way either.
I love Windows 8 apps, I love the fact that I know instantly where to find the back button and how to get to the settings in (almost) ALL apps. That is a fantastic strength we should all utilize.
One of the things I’ve noticed and get asked quite a lot is that the app bar sometimes is neglected and that some of the rules isn’t that easy to keep track of, and I agree. Most people I’ve talked to don’t even know that there are guidelines for this.
I’m going to try to demystify the app bar with a blog series. I hope you enjoy!
Here is a short introduction to the app bar.
The app bar is found in most windows 8 apps.
The user activates the app bar with a swipe from the top to bottom or bottom to top, or by right clicking anywhere in the app.
See it as a toolbar of sorts. You put all commands NOT related to search, share or settings here (or navigation, we are getting to that later).
Both contextual and global commands should be in the app bar.
Even though the shuttles started to go much later than the other days people were clearly tired (read hung over) the attendance of the first two session was sparse to say the least
People started to drop in by lunch.
I did the other way around and only caught the 2 first sessions.
One of them being Pete Brown’s “The Wow Factor - Making your Windows Store Apps promotable”
If there is only one “design” talk you are going to see, make it this one.
He goes through what not to do, exactly what to think about when it comes to design, description of your app, splash screens, why and what to think about when you reflow your content to different sized screens.
He even shows example apps.
”Be best at something” with your app he said, I liked that. If you are not best at something what’s the point
The pace of attendees, speakers and exhibitors where clearly slower today.
And all the exhibitors completely threw stuff at you, the other days you had to do something in return to get swag, but not today
It’s going to be empty not going to the conference today, but for us who feels that way, or for those not fortunate to be there live all sessions can be seen here; http://channel9.msdn.com/Events/Build/2013
Seriously tired today. Yesterday I was invited to the Build VIP party and after that we went to the hackathon to finish up our app. Unfortunately I only have my hybrid with me (without VS or Blend) so we were working on Jimmy’s computer. But it’s about to collapse or something, couldn’t start Expression Blend, and Visual Studio couldn’t deploy to the phone no matter how many time we repaired and reinstalled :/
The keynote contained a lot of good stuff like cool new functions in Visual Studio and Azure, they even made a 20 MB SQL server free for mobile services!
Push notifications is just a click away now.
And of course it’s always fun to see Scott Hanselman on stage.
Azure Autoscale sure was awesome too, no more manual configuring! Speaking of saving money, Azure no longer charge you for every hour but per minute used
An awesome session about design was Beautiful Apps at Any Size in Any Screen with Sarah McDevittwith.
This was an awesome session about scaling your design for windows 8.1. She talked about what controller to use when and where, and how to make your design work over all different device sizes and orientation.
In the evening there was an attendee party at pier 48 with loads of food trucks inviting you to try everything from bacon burgers and Thai to Indian food and cupcakes.
There was a lot of games like pool, air hockey and arcade games to be played and they had an entertainer on stage too.
The view at the pier was fantastic at night, and kept getting better the darker it got
Wow, just wow!
Sooo many sessions and so little time. It is super difficult to choose what session to attend. And you also want to look at the awesome devices and partners that are here.
The keynote was great of course, if not for the Surface pro and acer tablet
Next I went to Windows Phone Design for developers. It was a great session, Corrina is a good presenter and she went through all the design principles thoroughly.
Windows Store Overview for Windows 8.1: new design, new promotion and monetization opportunities was the next one I went to, if you are curious to how the windows store for windows 8.1 looks you should watch this, he went through everything.
I actually ended up skipping the next session and went and looked at all the cool 3D printers and exhibiters. Like last year there was also an area where you could get design help from the UK team (I think)
I went there and got to talk to one of the girls, and it was awesome, they are very competent and have a LOT of ideas.
I love that they are giving people this opportunity.
The last session I went to was Windows Phone: building great UI in XAML
It was a great “follow up” for Corrina’s session, he showed an app that was, let’s say not so great and told us some tips and tricks for making it better looking
Now it’s time to go stand in the huge line for picking up our Surface pros and Acer Iconias. People were skipping the last session so I’m guessing it will be a while
Update: The pick up went super smooth, it was SO well planned out, we had hundreds of people in front of us in line but it took like 20-30 minutes until we the got the stuff in our hands
The Windows 8 Consumer Preview was released close to our birthdays this year, which made the whole pick-a-cake-theme process really easy this year.
We are both early adopters and huge Microsoft fans so it just had to be a beta fish (or betta).
Unfortunately the marbling in the blue doesn’t come through in the picture, neither does the two different reds and blues on the fish itself :/
The cake was filled with raspberries, vanilla, whipped cream and Dulce De Leche buttercream and covered with marzipan/sugar paste. The fish was made of sugar paste.