Behind the scenes: Interface design process
Saturday, December 13th, 2008
Projects I work on usually contain three phases: User interface design, coding design into HTML / CSS and wordpress integration. I’ll try to explain user interface design process using real life example of rockstar new media design.
1) Content
UI design starts with content. Not just because “content is the king”, but because point of design is communication, and in order to communicate you need to have something to say.
Many times I was approached by client who asked me to design his web site. When I asked for the text content as an input I often got answer “Can you just make design and we’ll add content later”. That’s putting me in a weird situation because I need to explain that design is all about making content look good, and if there’s no content then there’s nothing to design. It’s the same like you hire a painter to paint your house and tell him: “Please paint my house first, and I’ll choose colors later”.
2) Wireframes and Grids
After going through the content with the client the next phase of interface design is creating wireframes and grid system.
Wireframe is a rough sketch of interface, some people draw it on paper, I usually skip that part and go directly to photoshop. I always make wireframes in only black and white colors to keep focus on the content. Point of wire-framing is to arrange content into groups by relevance.
Grid is a tool that creates order. It ensures that the page layout is visually balanced and consistent, and the content is well aligned. The ultimate result of creating grid system should be: page is easy to scan, read and understand by end user.
In case of rockstar new media I used very simple 3 columns grid. Every column is 300px wide, space between columns is 30px which gives rich margins, overall layout width is 960 pixels (3*300+2*30).
rockstar design wireframe
rockstar design grid
3) Painting work
When grids and wireframes or initial sketches of design are approved we’re going to phase 3, painting work. It’s time to add colors, style buttons, navigation, content boxes, experiment with typography etc. Possibilities are unlimited.My inspiration for rockstar new media were:
- The way that Huge inc uses big typography in headers and images as metaphors that communicate message.
- Grids and clean style that Mark Boulton design use
- Personal touch. Grungy look, little dirtiness on buttons and backgrounds that gives rock and roll feel. Using typography as user Interface. Overall point of my design is to create something unique by creating mixture of two opposites, clean and dirty.
- I had a dilemma (and still have it), if I should go with white background color design & dark text or dark background & light text, so I did both versions.
homepage - light
homepage - dark
4) Revisions & iterations
Creating custom user interface design is a process where both client and designer learn. It’s basically delivering mockups to client, getting feedback and creating revision based on feedback and consultation. Overall goal is to start with something good, and create something great.
December 15th, 2008 at 7:09 pm
Milano, vrlo sam zadovoljan! Rado cu te uzeti za posao kod paraplegicara.
December 15th, 2008 at 7:25 pm
To sam oduvek zeleo :)
December 16th, 2008 at 4:56 pm
I really like your design, the only thing I have a bit of trouble with is the color of red that you have used on the blue background, it actually hurts my eyes when I look right at the red text. Maybe a different shade would be better?? Just a suggestion, everything else looks great!
December 16th, 2008 at 6:01 pm
Hi Laura,
Thanks for the comment. I have to say I agree with you. Red links on blue background are not very legible. I’ll work on it.
December 16th, 2008 at 8:26 pm
Milano- Thanks for taking the time to pull your process together as a blog post and offer some insight. I always find that this phase is always enlightening for clients to understand the methods we designers put in place and why. Your site turned out great, love it.
December 17th, 2008 at 3:26 pm
Dude you really rock!!!
December 17th, 2008 at 3:46 pm
your design looks great!
change the color of the links:)
December 17th, 2008 at 4:02 pm
Care.
Nema tu puno sta drugo da kazem.
Care.
December 17th, 2008 at 7:15 pm
Thanks all,
@Laura and @Ivo, I changed variation of red color for links, it’s muted down a bit and I hope it’s better now. Since I decided that links won’t have underlines I have to make them pop out with color. You can see before & after screenshot here: http://www.flickr.com/photos/19621549@N00/3115628575/sizes/o/
December 19th, 2008 at 6:31 pm
Tebra, i`ll be short. Great work! Hope that we will cooperate in a future.
December 21st, 2008 at 2:24 pm
Great stuff! I always love the “behind the scenes” kind of presentations. Good luck on your new venture, man!
December 22nd, 2008 at 1:10 am
I think you can keep the dark background, it’s sweet for the eye. I agree with Laura about the red, I’m pretty shure it’d look better if it was a little bit darker.
That’s a great article you provide us here! Having a methodology is so important while designing websites cause we designers can get lost easily!
Good luck with your company =)
December 22nd, 2008 at 3:01 am
Why don’t you create a CSS/Javascript file that will change to blue at night and white at day? I think that’s always a cool way of doing it!
December 24th, 2008 at 11:49 am
Do jaja je dizajn! Pravi američki!
December 29th, 2008 at 1:38 am
The red is much better now - looks excellent :)
December 30th, 2008 at 7:19 pm
Lep tekst.
April 11th, 2009 at 6:09 pm
Very nice work =]
April 20th, 2009 at 3:00 pm
Hi Man,
Nice template and presentation of ur works.
June 9th, 2009 at 12:21 pm
Very useful and interesting post, thank you!
July 4th, 2009 at 9:19 pm
Hey, it looks good but remove the red color, and try to shorten the frame also
July 4th, 2009 at 9:19 pm
Hey, it looks good but remove the red color, and try to shorten the frame also.
November 6th, 2009 at 9:44 am
Thanks alot for the great read.
November 14th, 2009 at 4:31 am
I found this site using google.com And i want to thank you for your work. You have done really very good site. Great work, great site! Thank you!
Sorry for offtopic