How to design a modern/slightly futuristic-looking application?

Question

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 colour scheme from light to dark etc. therefore I don't want to lock myself into something that just looks good in black.

How do you make something futuristic yet actually usable?

Here is what I have for a list of items (looks kind of cheesy to me)

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

Answer 1

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.

Answer 2

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.

Answer 3

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 Bootstrap or jQuery Mobile UI and work around that. They both come with basic styles that look quite nice, and allow all kinds of customisation.