Tag Info

Hot answers tagged

34

Don't use meaningless imagery just for decorative purposes. They'll get ignored, it's clutter, it needs to be downloaded by the end-user which means the site will be slower to load... There are numerous reasons not to use such images when they don't have any purpose. However I think you are overlooking one option: Typography. Good typography can be ...


28

User Experience Design Guidelines for Windows Phone Related: Windows Phone UI and Design Language on Channel 9 (video)


25

Another option is to use a semi-transparent layer on top of the images for text which allows you to control the colour and hue of all the images so you can have a more consistent looking portfolio (if desired). The Verge uses a lot of colour gradients which may of may not be to your taste, but it can be an effective way of combining both text whilst being ...


24

For two main reasons,according to Microsoft posted 3 days ago: We’ve chosen to use uppercase styling in the top menu for two main reasons: 1) to keep Visual Studio consistent with the direction of other Microsoft user experiences, and 2) to provide added structure to the top menu bar area. On the first point, the use of uppercase text is becoming a ...


19

The guidelines for Windows 8 desktop applications are the same as for Windows 7. That means that you'll find them here: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511440.aspx Windows 8 has two separate UIs: Windows Store apps (formerly known as "Metro-style apps") and Desktop. Windows Store apps is the new, future oriented touch UI. ...


19

Microsoft have experimented with this idea with their Xbox Live companion app for each platform. Here's the My Xbox LIVE app for iOS: Images taken from the My Xbox LIVE app listing on the iTunes App Store …and here's the same app on Android: Images taken from the My Xbox LIVE app listing on Google Play …and lastly, here are some screens from ...


17

The metro interface is actually made of one color in two shades, a dark one in the background and light one for the tiles. The dark color can be replaced by gray. You never get real black in any of microsoft's interfaces, and you don't get two different colors. The other colors come from content displayed on live tiles - photos and videos, mainly, but also ...


16

Caps are an effective way of introducing visual hierarchy without increasing point size or using bold. All-caps can make small text seem more important or conceptually higher in the hierarchy than larger text. Metro, being highly typographic, requires designers have a significant degree of freedom to express visual hierarchy without resorting to colour or ...


15

The guiding principles of the Metro Design Language state the following: Typography. Type is beautiful. Not only is it attractive to the eye, but it can also be functional. The right balance of weight and positioning can create a visual hierarchy. Additionally, well placed type can help lead you to more content. Motion is what brings the ...


13

This blog post tries to answer the question by looking at the orientation of the screenshots of different apps in the app store. It looks like your are designing a windows 8 app (your are referring to a metro app which could also be a windows phone app) it is too early to tell whether the stats for this platform will be different. About 64% of apps are ...


13

I completely understand your sentiments towards Metro (or whatever they're calling it now). It's simple, clean, alive, just overall wonderful. However, I think it's an awful idea to spread across all other platforms. Each platform has a set of design and functionality standards that their users are accustomed to so by introducing the Metro UI to users on ...


12

Thought this was funny ... someone has already created a hack to turn the visual studio ALL CAPS Menus back into lowercase. (I realise Microsoft have said they will expose this functionality themselves... but this demonstrates someone with a level of urgency). The point here is that many people really find ALL CAPS hard to read and/or aesthetically painful ...


10

To find an alternative that solves the problems with the Pinterest layout, step one is identifying what specifically the problem with the Pinterest layout is. The big design compromise with the pinterest layout and your example is lack of *heirarchy* - relying entirely on the imagery in equally-weighted items to catch the eye. This underlies your problem ...


9

Note that especially if your page is only displaying one type of item in the list (and its the only list), the Windows 8 guidelines say you should actually be placing your new button in the app bar, on the right-hand side. You can check out the relevant UX guidelines from Microsoft here: http://msdn.microsoft.com/en-us/library/windows/apps/hh761499.aspx


8

May you have a look at Jeff Wilcox' "Metro" Design Guide for Developers: http://www.jeff.wilcox.name/2011/03/metro-design-guide-v1/ This guide is not as extensive as the PDF provided bye @Jin, but focuses on some main aspects to consider, when developing WP7 Apps.


7

The Dark Horse Analytics blog has the best explanation on how to make tables more visually appealing by actually removing the distracting visual elements from them: http://darkhorseanalytics.com/blog/clear-off-the-table/ If you look at the blog you'll see that they advise against the 'zebra stripes' approach, which in my experience causes other design ...


6

It's usually a better idea to show the "add new" option in the same grid/list that displays the existing collection of items (especially for admin management pages). How about the following 2 options? This one displays the add icon to the far right corner of the page. This one displays it right next to the title; a bit more convenient.


6

It may not be your color scheme -- it may be that in your layout, nothing "wins", and there is a lot of visual noise. Every selection looks equal in importance, but I'm sure they are not all equal. Make your hierarchy of information visual. Maybe your default button should be larger than the other choices. Let the thing that is most important to the user ...


5

For the Metro part, there's some documentation about the UI: Do/Don't :do http://msdn.microsoft.com/en-us/library/windows/apps/hh465304(v=VS.85).aspx Checklists with some about UI concepts http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx Best practices ...


5

Design guideline shouldn't be a barrier for some usability improvements. Guideline is universal document while each case could have its own features. For easy reading of separate rows (in tables etc) one should be able to distinguish them. So, be sure, whether reading is hard. Then use some techniques to distinguish them. It could be not only alternating ...


4

For a quick look, Jeff Wilcox's "Metro" Design Guide is good. If you want to see an after-action report, Scott Barnes wrote about his experiences with Metro. The comprehensive manual titled Windows Phone 7 Series UI Design & Interaction Guide is also available. You may find the Channel 9 video helpful.


4

There really isn't one great end-all-be-all answer for form layout, even in the context of the Metro. Metro is just another Design Language meaning that things are supposed to be styled similar but may not necessarily need to be laid out similarly. As well it should definitely be noted there are no guidelines for Metro styled websites. As for your thought ...


4

When in a localized environment, the best thing you can do is to group according to the local alphabet. On my Windows Phone I use English language as localization even though my navive language is Swedish. This means the phone organize all other letters of my alphabet to the # just before a, b, c,... I would like the option to set my contacts grouping ...


4

Hear those crickets? That’s the sound of no guidelines for dense data presentations for any design language. There has been a need for such guidelines since GUIs first arrived, but there aren’t any I know of. For what it’s worth, I’ve been developing my own approach for dense alpha-numeric GUI presentations over the years, which I described at Coded, ...


3

Lessons about Style: Mike Kruzeniski (Creative Director Windows Phone Design team) argues at his blog about the benefits of the new Metro UI Style, which is short the new Bauhaus. Personally, I think he is trying to put to much history in "the new branding" as Bauhaus is not only about ornaments (here UI Chrome) or not (no Chrome just typo). Bauhaus is form ...


3

Found it! http://msdn.microsoft.com/en-us/library/windows/apps/hh700399 Also for new users on Win8 platform I will ask to commit 1-2 tasks to get used to the Metro style apps such as - "Download a new application from store and update other applications if available..." - The participants should get to know the charms menu, and the app-bar functions before ...


3

Since you mention you're designing for Metro/Windows 8, the best resource I can link you to is Optimizing for both landscape and portrait from the Building Windows 8 MSDN blog. The most significant quote for your question is this one: We initially thought that landscape or portrait orientation was mostly influenced by personal preference. Each person ...


3

Its still in work and not complete yet, but you can get some information here: Windows Dev Center - Designing Metro style apps Windows Dev Center - Choosing the right UI surfaces Windows Dev Center - Guidelines for user interaction Channel 9 Windows 8 UX Video


3

Punchcut posted on their blog a good series about Windows 8 / Metro and how to design for it. It has 5 parts: Windows 8 solving the PC problem Windows 8: The New Modernism Windows 8: The Origin Story Windows 8: Microsoft’s Manifesto Windows 8: Designing the Metro Experience Especially the last one is worth reading. They write about their experiences and ...


3

Here's a list of metro-style websites for some inspiration: http://teusje.wordpress.com/2011/03/17/web-design-trend-metro-ui/ Also, you can take a look to this templating framework to create websites styled like Metro UI.



Only top voted, non community-wiki answers of a minimum length are eligible