How would you describe the style of Windows Metro?

Discussion in 'Design and Graphics' started by stanw, Aug 31, 2012.

  1. stanw macrumors 6502a

    Joined:
    Aug 29, 2007
    #1
    1. How would you describe the colors being used for Windows 8 Metro in the attached image?

    2. How would you describe the style of icons? Would you say they are just flat and minimalist?

    Just curious because I like the style.

    Thanks.
     

    Attached Files:

  2. creativecag macrumors newbie

    Joined:
    Aug 11, 2011
    #2
    1. Cheerful, inviting, maybe even exciting.
    2. Icons look good, too. Simple and easy to translate. Not distracting.

    I think their design team did a good job but IMO, it doens't work well in a desktop environment. I've been seeing reviews where they say they have the Metro IE and then they have the desktop IE so it doesn't mesh well.
     
  3. stanw thread starter macrumors 6502a

    Joined:
    Aug 29, 2007
    #3
    What types of colors are being used? Complimentary, Primary, Secondary, etc.

    Thanks for your reply.
     
  4. chown33 macrumors 604

    Joined:
    Aug 9, 2009
    #4
    Color: mainly darker solids.

    Shape: rectilinear. More specifically, multiples of a square grid. Think "Battleship".
     
  5. stanw thread starter macrumors 6502a

    Joined:
    Aug 29, 2007
    #5
    What I'm wondering is how the colors work well together? Are they part of a color family or did the designer just pick dark solids that he/she thought worked well together? If I wanted to use similar colors and I chose one dark blue would I just look for reds, oranges of the same level of darkness?

    Thanks.
     
  6. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #6
    The honest answer is that there is no formula for picking colors... you simply need to develop a sensitivity to it... but there are a few tricks that will get you close.

    The majority of the colors in your example share the same tonal value while having different chroma values (or different hues if you prefer).

    If you take that image into photoshop and convert it to greyscale you will find that *most* of the colors are converted to the same grey value. So, while they are all different colors, they are all in the same range of light and dark.

    Because the different colors have the same tone value, they look like a family.

    The easiest way to choose colors like this is to work in HSB (or HSV) mode in your favorite software. HSB stands for Hue, Saturation and Brightness. Unlike RGB and CMYK, HSB allows you to select a specific hue and then define how saturated (read: how much pigment is in it) and how light or dark it is.

    Think of it this way: the first slider selects a color like red, and the two other sliders define what KIND of red you want... a flat or saturated red, a pink or dark red, etc.

    When it comes to picking color families, HSV simplifies things because you can select the color settings you like and then move the Hue slider around the color spectrum choosing different colors... because all those colors share the same brightness and saturation values, the colors will be close to working as a "family". Some tweaking will be necessary, but it will get you close.
     
  7. ChristianJapan macrumors 601

    ChristianJapan

    Joined:
    May 10, 2010
    Location:
    日本
    #7
    I'm confused with the different size and layout of the tiles. Not yet understood if there is meaning behind or just "design". Same with the color.

    Plus I'm sure it work well on a touch device; I don't really like the pre-release running in a virtual box. For mouse/keyboard centric usage it's waste of space. Looks like a POS (point of sales) terminal for me. Like a fast food restaurant.

    It again: on a tablet I'm sure it will be nice. (Once I understood the different size of tiles)
     
  8. stanw thread starter macrumors 6502a

    Joined:
    Aug 29, 2007
    #8
    "The honest answer is that there is no formula for picking colors... you simply need to develop a sensitivity to it... but there are a few tricks that will get you close."

    1.) What about the color wheel and all the color rules like Complimentary colors, Triad, etc.? Are these not really used in practice? Is it just something taught in school but not really used?

    "If you take that image into photoshop and convert it to greyscale you will find that *most* of the colors are converted to the same grey value. So, while they are all different colors, they are all in the same range of light and dark."

    2.) Why would you convert it to greyscale? Is this something that you do to test colors?

    Thanks!!!!
     
  9. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #9
    Color theory is good to study, but I don't find myself thinking about it deeply when I am working. It becomes second nature. You have to learn to trust your eye.

    Personally, i find that fixating on rules will make your work predictable and repetitive. Theory is good to analyze why things work after the fact, but I find it cumbersome as a generative tool. As they say, you can't "eat the recipe".


    I was simply using it as an example of showing why the colors worked together. Turning it greyscale shows that the colors share a common property. with some practice you can see this without having to turn things greyscale.
     
  10. liquidtwitch macrumors newbie

    Joined:
    Dec 7, 2011
    Location:
    Brisbane Australia
  11. fisha macrumors regular

    Joined:
    Mar 10, 2006
    #11
    Agreed, it makes the tiles a similar intensity so that no tile sticks out more than the ones around it.

    As for the UI: Urban minimalist - Graffiti colour
     
  12. flottenheimer, Sep 13, 2012
    Last edited: Sep 13, 2012

    flottenheimer macrumors 65816

    flottenheimer

    Joined:
    Jan 8, 2008
    Location:
    Up north
    #12
    If you are looking for great combinations of colors I'd suggest paying Adobe's Kuler site a visit. It's a site/community dedicated to nothing but color themes.

    http://kuler.adobe.com/

    If you don't fancy any of the more than 14000 palettes available you can easily mix your own combinations based on a self defined base color topped with a rule for color harmony – such as Complementary, Compound, Analogous, Triad etc. etc. – here:

    http://kuler.adobe.com/#create/fromacolor
     

Share This Page