Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

I was hoping to get some advice from some more experienced UI developers. I have been presented with a unique challenge by my customer, and I feel like I am failing.

Specifically, they want a UI that looks modern and almost futuristic. Call of Duty, Minority Report have been specifically mentioned -

The challenge I face is to give them something close, but actually usable. The app is a program that people will use all day long. Nobody wants to really look at a game like interface all day. Also, I know as a front-end engineer, I don't want to load a bunch of static images, so I want to implement as much of this as I can in CSS. I need the resulting markup to be dynamic, so I can animate or scale it without distorting static images.

I really feel like I am out of my league. Also, they want the ability to switch the scheme from light to dark etc. So I dont; want to lock myself into something that just looks good in black...

So I guess in a nutshell, how do you make something futuristic yet actually usable? Help!

Here is what I have for a list of items- Looks kind of cheesy to me

http://jsbin.com/aleroq/41/edit

share|improve this question
    
This question might be of some use: graphicdesign.stackexchange.com/questions/16872/… –  DA01 Apr 3 '13 at 3:01
    
My summary from the other question: A client asking you to mimic something they saw in a movie isn't 'design'. Design needs to address the needs of the business (which is usually the needs of the customer). Game and movie UIs likely have absolutely no relation to the needs of your client's customers. –  DA01 Apr 3 '13 at 3:02
add comment

3 Answers

up vote 0 down vote accepted

X-wing fighters are cool, but to tell Ford I want a car that looks like an X-wing fighter would be a really ridiculous request, as x-wing fighters aren't designed to be usable cars.

So, a client asking for a 'minority report' UI likely isn't providing you with any meaningful requirements.

Design needs to be based around a particular objective. So, you need to step back and figure that out first. What is the business objective in this case? I assume it's centered around some customer needs/wants. Figure that out first, then see what aspect of a 'minority report' UI would actually make sense (if any) in helping achieve those objectives.

share|improve this answer
    
Thanks for the great answer. I am pushing back to have those conversations with the client about what would be usable vs. the design style they have in mind. –  thebringking Apr 4 '13 at 4:05
add comment

If you can't pay for good design, and you can't accomplish it with the resources that you have in house, then you're best to mimic one of the styles that the client has already indicated they like.

Don't re-engineer wheels that you're not capable of engineering.

share|improve this answer
add comment

Anything you can draw, you can convert into html + css, so while keeping the animations in mind is very important, you don't really have any limitations graphic-wise. I'd personally start by creating a design, a look, and once that is decided move to coding it. CSS is for styling, but not exactly for designing. Once you've started with an idea, it's quite difficult to try a new option. Working first in Photoshop, Fireworks or Gimp will allow you to just change whatever whenever.

NewAlexandria has already said what I was actually thinking, but in addition to mimicking (or being inspired by) the styles that the client gave you, a research on similar apps/sites could be of great help too.

Because you mention you have front-end engeneering experience, something else you could do is familiarise yourself with the current 'trends' in apps. You can navigate through portfolios (Dribble is a great starting point, DeviantArt), or theme shops like Themeforest, DesignShock or Creative Market, just to name a few.

Something else that you might want to try is grabbing something like Twitter Boostrap or jQuery Mobile UI and work around that. They both come with basic styles that look quite nice, and allow all kinds of customization.

share|improve this answer
    
Could you name more sites like Dribble –  Muhammad Umer Apr 3 '13 at 1:40
    
@MuhammadUmer Try with behance.net, forrst.com, coroflot.com, shownd.com (there are more, but I'm not familiar with them) –  Yisela Apr 3 '13 at 3:50
    
thanks a lot this will be fine for now. I have noticed that each site has culture, a taste of its own, even though most of them cover all areas like (icons,webdesign)...so good to know. –  Muhammad Umer Apr 4 '13 at 3:37
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.