Polished to Flat

Easy Note by Cosmin Capitanu

So I’ve been checking out Forrst, Dribbble and Behance (among other places) and I’ve been noticing these designs done in a certain style, a style much more minimalistic than the web 2.0 styles that took the world by storm just a few years ago.

This type of style consists of flat colours, sharp edges (as opposed to rounded corners, and very few effects added. A very well known example of this type of style would be the all new Windows 8 interface. Personally I wouldn’t call this style minimalistic, I think it goes a little further than that. I would call it ‘flat’ to be honest, and that’s not an insult on it, I just don’t think minimalism is minimalistic for this style.

Before this style, there was the ‘web 2.0’ style or ‘polished’. Sharp gradients, rounded corners, shiny things, metallic colours, strong silvers, web banners shouting things at you like ‘FREE’ or ‘50% OFF’. ‘Flat’ design is like a parody of that.

If you are a web designer, like myself, you might have seen this ‘flat’ style around and wondered about if you should design like that. I’ll give you a little story, a few weeks ago I was creating a set of buttons for somebodies website, I worked in a ‘polished’ style because, looking at their website, it looked like they would fit in there. I show them to the person and they tell me that they hated all of the gradients and bright colours and rounded corners. They wanted something more ‘flat’. So I went back to the drawing board, then Illustrator and then finally photoshop and I made him a flatter set of buttons, they liked it, they said they liked it because everybody else had buttons like that on their sites. I still look at that site and see the buttons, they just don’t fit in, I think the more ‘polished’ set would have suited it more.

I suppose my point to that story is that you should try designing flatter stuff because even if you don’t like it, others do. But by all means you should not just copy each other, if you want to design a site in another style you should do it, just consider something ‘flat’ too. Trends aren’t always bad.

Design Case Study: Grooveshark

I am one of those people who enjoys listening to music when I do things (such as  writing this post) and Grooveshark is one of the many places I go to find good music. I decided to do a case study on the design of their website and of their business because I have always admired their style.

Grooveshark and their colour scheme

Grooveshark has a colour scheme of black and orange, this is visible on the front page of their website. The reason why I am discussing their colour scheme though is because Grooveshark does not strictly stick to it. If you check out their blog site you will notice the orange/yellow has been replaced with purple, but in my opinion this does not hurt their design or image, I think it enhances them, it shows that they are not afraid to try other colour schemes. Many websites will use a certain colour scheme and will be scared to stray away from it because they think it will hurt their image but I think this is proof that when done properly it causes no harm.

Grooveshaek blog site

Grooveshaek blog site

 

Old Grooveshark and New Grooveshark

Grooveshark's upgrade ad

Grooveshark’s upgrade ad

Grooveshark always updates it’s website, it always improves on the way it looks. The above image is of an advert to upgrade your account on Grooveshark (from old Grooveshark). I included this image because it shows what sort of a style Grooveshark were going for on their site. Now they have a lot less illustrations. They try now to quickly get to the point. There is no doubt that new Grooveshark is much slicker, cleaner than the old one. Nothing major changed on Grooveshark for this to happen, it was just the small things but they were important things non the less.

To finish up here I want to show you some work based on the Grooveshark design that I though were very interesting (some are concept, some are not).

Grooveshark Mobile (HTML5 app) by James Barnes

Grooveshark Top Left by Thomas Reed

Grooveshark Icon by Sam Jones

Grooveshark Remote by Sam Jones

Amazing UI Elements from Dribbble

If you haven’t already guessed, I have a great love of user interfaces and web design. Here is just a few of the user interface designs I have seen on Dribbble which really stood out to me..

Nav Menu Style by Art Sevarni

I like this design because it combines real world elements with the virtual world of the web which we live in.

Mini player by Eric Deiner

This is a simple/minimalistic design. What I think really makes it stand out for me is the amazing shadows which give it a 3 dimensional look.

Swiss knife by Smena

I love this because it adds a little extra creativity to a simple open/close type button.

This was just a short post but in the future I will post with more shots I love from Dribbble.

Dealing with IE

I consider this a good read for anybody interested in web development..

federicoponte

If you ask any web developer what they think about IE, they will answer it sucks. The reason is quite simple, you need to adapt the page to work on it. Besides, it doesn’t follow any standard well and have many bugs.The worst part of all is that at least one third of the Internet users use it.

In the past months i had been creating a web page and solved several problems regarding IE. Here are some tips:

  • css3 not working well on some IEs

    The best solution will be using different style sheets. Simulate some of css3 feature in css2. For example the border-radius can be solved using margin, padding and background attributes.

    If you just want to use the same style sheet for all, this will be pretty helpful: CSS3 PIE. But it won’t be as nice as the first one.

  • js issues

    Use a javascript framework…

View original post 107 more words