{"id":17374,"date":"2019-03-21T11:00:29","date_gmt":"2019-03-21T11:00:29","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=17374"},"modified":"2020-12-14T11:40:13","modified_gmt":"2020-12-14T11:40:13","slug":"four-reasons-design-without-color-first","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/four-reasons-design-without-color-first\/","title":{"rendered":"Four Reasons Why You Should Design Without Color\u00a0First"},"content":{"rendered":"

Creating your screens in grayscale before adding color forces you think clearly and prioritize right when it comes to UX design.<\/p>\n

1. You focus on layout and\u00a0spacing<\/h2>\n

When you start designing keeping the B&W color palette constraint in mind, most of your thinking time goes into figuring out how to space things right to be able to seem like things are grouped together. You start thinking about the invisible yet more important aspects such as readability (line height, paragraphs and typography), center of attention (call to action buttons and sizes) and scanability (grouping of elements, spacing)<\/p>\n

\"\"<\/a>

Musety App by\u00a0Muse<\/a><\/p><\/div>\n

<\/p>\n

2. Your clients ask the right questions<\/h2>\n

Good design takes time. At the early stages of design, most designers are shy to show incomplete work to their clients\/users to gather early feedback. I cannot stress more on the importance of gathering early feedback from clients. This helps you to stay away from the trap of too many iterations with too much time wasted on unnecessary versions. Most clients either don\u2019t know what exactly they want or suck at giving constructive feedback. Showing them an early version that looks like a more high-fid version of a pen and paper sketch will get them to understand the process and ask you questions that are more constructive.<\/p>\n

\"You might get a \u2018What color works for this button\u2019 which surely leads to be a better conversation than \u2018Why have you chosen yellow for this button\u2019.\"<\/span><\/p>\n

3. Your designs are\u00a0clean<\/h2>\n

Creating a simple and clean design is not an easy task. When you create your designs in black and white, all your focus is on usability, spacing<\/a>, sizes, laying out elements, interactions, and flows. The first version of your design should only feature different shades of black and white to show hierarchy and visual weight between elements.<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

4. Creates consistency<\/h2>\n

It is best to use three or lesser colors in your design<\/a>. Having too many colors in your designs may confuse the user or bring the attention of the user to less important areas. When you have a single brand color and use it selectively on a design that\u2019s complete in black and white, the eyes of the user naturally get dragged into these \u201ccolor\u201d areas.<\/p>\n

\"\"<\/a>

Marvel Styleguide<\/a><\/p><\/div>\n

<\/p>\n

<\/p>\n

So, the next time you open Sketch or Illustrator or any tool of your choice that you prefer to make designs in, forgot about the color palette for a while till you have the complete design ready in grayscale.<\/p>\n

If you\u2019re a developer struggling with ux\/design, we are building a tool to assist you. You can signup for early access here: <\/em>https:\/\/devs.design\/<\/a><\/p>\n

Originally published on Anand's Medium Page<\/a>.\u00a0<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Creating your screens in grayscale before adding color forces you think clearly and prioritize right when it comes to UX design. 1. You focus on layout and\u00a0spacing When you start designing keeping the B&W color palette constraint in mind, most of your thinking time goes into figuring out how to space things right to be able to seem like things… Read More ￫<\/a><\/p>\n","protected":false},"author":280,"featured_media":17382,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-17374","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n