I’ve been known to fiddle with a design here and there, but I always like seeing stuff behind the scenes — when a designer pulls back the curtain, so to speak, and gives me a glimpse into the process of design.
Not only is it a great way to get to learn new design methods and ideas, it’s also a neat look into someone else’s thought processes, especially as they work through their creativity from spark to finished product.
Sometimes, though, it’s easy for a designer to say “and then you do this, to accomplish this” without every laying out the logic behind that reasoning.
I was impressed with the detail that went into a post over at Flyosity.com, where designer Mike Rundle posts about icon and interface design fairly regularly. I just learned a ton from this post, on Crafting Subtle and Realistic User Interfaces.
Yeah, I know how to make a 3D button, and I know how to add a drop shadow that doesn’t completely suck (I hope) but some of the subtleties that Rundle exposes are very well thought-out and will really add to my work when I (eventually) get around to pimping up this blog’s design.
Just this bit, on thinking about your 3D button as it would look from the side, is great, for example:
Here’s a button-shaped panel that’s designed to look slightly raised and have a matte surface. It’s thin, has a subtle convex shape, and has a small edge that goes around the outside. In a 3D space, the light source would illuminate the edges (slightly brighter on the topmost edge) and would not fully illuminate the bottom slope of the panel past the apex. The object would cast a small shadow since it’s not raised off the surface very much.
Sure, it’d be easy to play around with gradients and stroke weights until I found something that “looked right” but having a structure like this will be quite helpful.
Good read, good tips. Thanks for taking the time to write it up, Mike.
Grant Hamilton
Sorry, the comment form is closed at this time.