You don’t necessarily need to make buttons lighter (that will depend on your design style and theme), but you do need to make them stand out enough so that they’re not overlooked. Here the text pops out because it sits on a lighter background and has a high contrast between the text and the background. It’s also the lightest element on the surface – it pops out. The button has the highest contrast between its black text and the light grey surface it sits on. In the first instance, the text is on a darker background, while the button is on a lighter surface than the rest of the pane. Here we’re using both, brightness levels and contrast, to manage the user’s attention and focus. Look at the following example of a content window with some text, and a button. Higher contrast items stand out – they catch your eye. Contrast - attract attention with higher contrast Colors like red are especially good for this purpose, and it’s no surprise that pretty much all the US presidential candidates’ websites had the donation button in bright red. ![]() ![]() Use warmer colors for elements you want to pop out and get noticed. Not only that, they also appear closer to us. This is very similar to point 1 – warmer colors are brighter. The colder green contracts inwards, letting the red move forward. What about the red and the green? This one is trickier, but the warmer red is taking control here. The yellow is warmer and brighter and so it takes prominence on the image. Take a look at the square on the right with the blue and the yellow color segmens. Warmer colors expand when placed next to colder colors, they literally spill out and take dominance. There are those that are considered cold – blue and green shades – and there are those that are warm – red and yellow. Color - use heat to manage focus.Ĭolors don’t all behave the same way. This doesn’t apply to every aesthetic style, but generic things like OS interfaces tend to follow this principle – especially when depicting real world objects like buttons and switches. Color things that are carved inwards darker. Color things you want to appear to be sticking out lighter. Using this basic idea we can build the UI metaphor by basing it on 3D objects with depth. We may also assume it goes into an opening on the surface of the “device”, and thus is now covered somewhat from a light source. ![]() When this object is pressed, we assume it goes further away from us. Why? The reason is simple – we imagine the button as a 3D object. When a button is pressed, most designers tend to make it darker. This isn’t strictly how light works, but since the user interface lives in a very basic environment of a computer display, there’s not a lot we have to work with. Lighter shades appear closer to us and darker shades further away. Light - create depth using light and shadow. Here’s a quick overview of how to use each of these elements effectively. Very basic things like light, color and contrast are often overlooked, which can negatively affect the UI by misdirecting user’s attention and not providing enough focus on the things that matter. Artistic talent comes in handy when coming up with an attractive style and aesthetic, but at the core of UI design lies logic and method. User interface (UI) design is both an art and a science. Using Light, Color and Contrast Effectively in UI Design
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |