Archive for the ‘Design’ Category
Using Deceptive Design Elements to Emphasize Product Features
Recently, I’ve noticed how Apple’s product designs have taken a direction towards deception — a gentle sort of deception that doesn’t trick you into thinking the product has something it doesn’t, but a deception that promotes and extends the appearance of certain features so that they appear better. I think it’s a smart way to design products (from a business perspective) as it will make your products seem better than they actually are, all done artificially through appearance rather than function. Here are a couple of examples.
Apple has modified the curves on their computers, from a smooth symmetrical curve to a more gently curved edge that gets cut off at the end, forming a sharp corner. What does this achieve? It makes the device appear thinner as the gentle curve tends to disappear and all you’re left with at the side is the thinner edge that now appears to represent the thickness of the device. This illusion works best when looking up from above rather than directly from the side, as the lower and upper curves disappear. Here’s the old symmetrical curve on the white MacBook:
Reinventing the Color Picker
If you do any form of design work on the computer you’re probably familiar with the color picker. Whether in the form of a color wheel or a set of sliders, color pickers let you do just that — pick colors.
ColoRotate is an interesting new site that picks a novel approach to the traditional color picker design. Instead of 2D circles or sliders, ColoRotate features a 3D cone. At the core of the cone is the spectrum of colors. Intersecting that is the tint which lies on the z-axis. You can manipulate each one separately to help you arrive at your color. You can also blend two colors together.
8 Characteristics Of Successful User Interfaces
There is a lot of information out there about various interface design techniques and patterns you can use when crafting your user interfaces and websites, solutions to common problems and general usability recommendations. Following guidelines from experts will likely lead you towards creating a good user interface — but what exactly is a good interface? What are the characteristics of an effective user interface?
Here are 8 things I consider a good user interface needs to be:
Lets take a closer look at each.
1. Clear
Clarity is the most important element of user interface design. Indeed, the whole purpose of user interface design is to enable people to interact with your system by communicating meaning and function. If people can’t figure out how your application works or where to go on your website they’ll get confused and frustrated.
What does that do? Hover over buttons in WordPress and a tooltip will pop up explaining their functions.
Wrap Your Presents Well
Michael Lopp, a senior engineering manager at Apple, has told the audience at a recent SXSW presentation that Apple’s strategy is to deliver a series of presents to consumers: “really good ideas wrapped up in other really good ideas”. Nice software wrapped in beautiful hardware wrapped in great packaging.
I think this approach can be seen a lot more in the Mac world than the PC, and that’s probably because of Apple taking the lead. If you own a Mac you’ll know that all the applications come with a beautiful icon (in a huge 512×512 resolution now on OS X Leopard) — and not just Apple’s ones; most developers seem to strive to achieve the same level of quality for their offerings too, wanting to ensure their icon is worthy of a place in the user’s Dock (a bar of icons used for launching and managing apps).
The Proper Way to Draw Rounded Corners
I’ve been noticing a lot of the same mistake people make when implementing rounded corners in their designs around the Web. For some reason the rounded corner poses a problem when it has another rounded corner inside it — so either there’s a border going around or there is another rounded shape sitting inside a rounded shape.
Here’s what I’m talking about:
I see a lot of these types of corners. You can see that the radius of the rounded corner is retained for the inner corner. This is wrong because if you retain the same radius, the amount of space between the two corners won’t be even throughout.
Take a Step Back to See the Big Picture
I find that when you’re working on a web design — or even any other project involving typography and layout — it helps to squint or look at your design from a distance. What you want to do is to squint or go far away that the content would start blurring.
When content pieces blur together you begin to see how whitespace separates them into sections and groups. You can’t read the text itself, but you can see groups of text and the various sections that you’ve laid out.
Well… that’s what you want to see. If you see one big mess then it means your whitespace (the empty space between elements) isn’t doing its job.
Let me illustrate this with an example. Here’s a site (Listmixer) where whitespace usage could be improved:
If you squint hard enough so that the contents begin to blur we’ll get something like this:
Fighting Perfection
If you’re like me, you probably often find yourself never fully satisfied with your work — always making tweaks and changes, always finding things you don’t quite like and reworking them. This applies to a lot of creative endeavors — perhaps you’re working on an article for your blog, putting together a report or writing an important email.
The thing is, even after making changes, there are still things you can tweak, things which aren’t quite perfect yet.
Manage Focus Effectively Using Contrast
Most written content online is split up into various elements. For example, a blog post has the text body of the post, the headline, the author, the date, the comments link and so on. Not all these elements are equal in importance and there is a tool we can use to give the key elements more weight. This tool is contrast.
Forget the Wireframes, Throw Away Your Boxy Layouts — Design BIG!
Thinking outside the box can make your designs “pop”, and having good ideas can help you become successful — but what if you could not only think outside the box, but play with the box, kick the box, smash the box all over the place.
The secret is to design BIG!
A Guide to Choosing Colors for Your Brand
One of the key elements of building a strong brand is color selection. Every color has a different feel and various associations. By choosing a color or a combination of colors for your brand identity, you will take on those associations. Colors will evoke certain emotions and feelings towards your brand so it is vital to choose a color that will represent your identity effectively.