HOME | DD

E-Serrano β€” Metallic Device - HMI Web

Published: 2006-08-16 22:58:49 +0000 UTC; Views: 4138; Favourites: 12; Downloads: 45
Redirect to original
Description This is the web page design of my latest 3D short animation movie: "Human / Machine Interface" (HMI). As it is a science fiction film, its website had to be something related to futuristic machines and high-tech. So I thought that a combination of wires and chromed metallic surfaces would be appropriate.

I will place a link to the movie as soon as I have it finished. I'll try to add some other interesting extras such as "making of" data and high resolution still images.

Some details about this webpage interface:
Created from scratch with Photoshop CS, brushing and using layer styles.
Four days working intermitently on it. Adding that huge amount of tiny details was rather time consuming.
For numeric stat lovers: 109 layer sets, and 221 layers (yep, that's big!).

You can see the design working here [link]

As always, your feedback is much appreciated!
Related content
Comments: 17

Hero-Lief [2010-01-13 01:36:44 +0000 UTC]

It's truly awesome. I need the button textures (with credits of course), they're amazing

πŸ‘: 0 ⏩: 0

ZeroniX-Designs [2007-06-18 11:48:04 +0000 UTC]

Thats very nice man!
for this great stuff!

πŸ‘: 0 ⏩: 1

E-Serrano In reply to ZeroniX-Designs [2007-06-18 18:37:34 +0000 UTC]

Thanks a lot for such kind words and for the ! Much appreciated!

πŸ‘: 0 ⏩: 0

eBIT [2006-08-18 22:45:50 +0000 UTC]

Like dat... But i think that there are too much details and it make some kind of noise.

πŸ‘: 0 ⏩: 1

E-Serrano In reply to eBIT [2006-08-19 11:55:01 +0000 UTC]

Yes, I agree I wanted to create a somehow complicated tech structure, and probably I overdetailed it. On the other hand, I think it suits the overall mood of my short movie. But it is a little bit too complex for a web interface. So I'll try to make my next web interface cleaner.
Thanks a lot for your appreciation!

πŸ‘: 0 ⏩: 1

eBIT In reply to E-Serrano [2006-08-20 19:01:18 +0000 UTC]

My pleasure!

πŸ‘: 0 ⏩: 0

enikOne [2006-08-17 06:21:09 +0000 UTC]


damn man! This is nice!!
you draw that in PS??

im impressed...
cant wait to see this one done!
Good job E...very good!
/enik

πŸ‘: 0 ⏩: 1

E-Serrano In reply to enikOne [2006-08-17 10:46:25 +0000 UTC]

Thanks a lot for your support, enik!
Yes, that's full Photoshop. The quicksilver layer style was a good starting point. But then I replicated many layers, used many blending modes and hand brushed a lot... And here is the result!
Now it's time to make this design a real web page. I'm on it!
By the way, you're gonna love my 3D animation film. I hope the release is coming soon.

πŸ‘: 0 ⏩: 1

enikOne In reply to E-Serrano [2006-08-17 14:38:05 +0000 UTC]

wow! Well you did great and again..looking forward to see the movie!

πŸ‘: 0 ⏩: 0

Xeviant [2006-08-17 03:22:12 +0000 UTC]

Its cool, a bit too repetitive though, nice metal look.

πŸ‘: 0 ⏩: 1

E-Serrano In reply to Xeviant [2006-08-17 10:41:29 +0000 UTC]

It's a complex design all based on wires and chromed surfaces. I'm glad you like it!

πŸ‘: 0 ⏩: 0

PadmaPhala [2006-08-16 23:02:57 +0000 UTC]

I like the concept... but IMO the glossy/shinny buttons and background will look better with more degradation or more contrasts (at least the buttons... to make it more legible).

good look with your project

πŸ‘: 0 ⏩: 1

E-Serrano In reply to PadmaPhala [2006-08-16 23:13:35 +0000 UTC]

I usually work in a very contrasted TFT monitor, so I'm not having that kind of problem right now... Anyway I'll check the design in other screens, as I can still tweak it before creating the actual web page. Thank you for your advice!
Now that the animation movie is completed, I think that the rest of the project will be piece of cake!

πŸ‘: 0 ⏩: 1

PadmaPhala In reply to E-Serrano [2006-08-17 06:31:05 +0000 UTC]

...you're welcome ...just think about the legibility of the typography not only if it looks good.

I prefer more simple designs for interfaces, but yours is quite cool nonetheless

πŸ‘: 0 ⏩: 1

E-Serrano In reply to PadmaPhala [2006-08-17 10:39:33 +0000 UTC]

Yes, this design had to be somehow complex, as it suits the overall looking of the film Thanks again!

πŸ‘: 0 ⏩: 1

PadmaPhala In reply to E-Serrano [2006-08-17 23:13:14 +0000 UTC]

de nada

no sabΓ­a que habla espaΓ±ol... hace aΓ±os fui a EspaΓ±a

πŸ‘: 0 ⏩: 1

E-Serrano In reply to PadmaPhala [2006-08-18 09:49:00 +0000 UTC]

Pues sΓ­, es verdad, ambos hablamos espaΓ±ol

πŸ‘: 0 ⏩: 0