![]() ![]() To identify base colors, check which colors are associated with the brand and which colors are the most prevalent in the UI. They are on brand, accessible, and can support a great website.Use the color inventory to identify the primary/base colors ![]() Those colors don’t have to be final but they are a good starting point. We always define a red for error messages and if we are really thorough we also select a green for success messages, yellow for alerts and some subtle color for notifications.Īfter these steps we have derived a great color scheme from the brand colors that can be the basis of our UI design. Even if you don’t have a need for them in the beginning it’s better to have them defined than to see your design come to life later and realise that default #ff0000 is used for error messages. The least you can do is to fit them into the grander color scheme and make sure they are readable. Red and green might not go with your color scheme at all but there will most likely be a point where you need to convey error messages or other feedback. Don’t overlook feedback colorsįunctional colors to display feedback might well be the most unloved stepchild of UI design. Then we’ll add a lighter gray to display inactive elements and an even lighter grey for backgrounds.ĭuring the design process this palette can of course change, but we try to keep it simple and expressive. In addition we will need a slightly lighter grey that’s still readable on white (here comes the contrast check again) and can be used to display secondary text or for element borders. Usually we have a dark shade already defined to be used as text color so we start with this. We like to have enough shades to distinguish elements but also keep it limited to avoid too many different colors that would look the same to the user anyway. Most often, the supporting shades are variations of a grey tone, maybe tinted with the brand color or a contrast color. Sometimes the CD already delivers some shades, other times there’s only one neutral color for text included. To structure content on the website we will most definitely need a number of color shades to distinguish between elements and content areas. Choosing suitable UI colors to structure content Throughout the project, remember to check the color against different background colors and don’t forget to check hover colors, too. If you need to make adjustments to the brand color in order to make it work, always make sure to check in with the responsible design team. We were able to switch to a different brand color here. That’s why you’ll notice that on b13.com our textlinks are red on a white background but yellow (a secondary brand color) on dark grey. You see, we didn’t adhere to the requirements here and therefore had to make adjustments. Feedback colors: Colors to display system feedback, like errors or notifications. ![]() UI colors: colors and shades that are used to structure content types and create hierarchies.Brand colors: colors that represent the brand and should be used throughout the entire website but still sparingly enough to be meaningful.To do this, we separate the colors used on a website into three categories: So before we get started with a new design for a client website, we need to analyze the existing colors, consider how they can be used, where the color scheme has to be extended, and check for accessibility. Also, to design an entire website with different hierarchies and content types, we might need more shades than originally defined to structure the website and display system alerts. Colors for web design have to meet different requirements than colors for print. And while they might work perfectly on paper, they can be inaccessible on displays. However, those colors are often chosen primarily for print use. Most often our clients have done wonderful work on their corporate design (CD) before we get on board to start with the webdesign so we get a predefined set of colors to represent the brand. This is how we create color palettes that work on-screen, are consistent with corporate branding, and are accessible for all users. Colors that work perfectly on paper can be inaccessible on displays. Colors are an integral part of a business’ branding, but often chosen primarily for print use. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |