Combining colors<\/h2>\n
Edited from\u00a0Lim Hui Shan’s <\/a><\/span><\/span>website:\u00a0<\/span><\/span>https:\/\/oss.adm.ntu.edu.sg\/limh0131\/2015\/10\/20\/colour-schemes-colour-palettes-color-harmonies\/.\u00a0<\/a>Credits:\u00a0<\/strong>http:\/\/www.dtelepathy.com\/blog\/inspiration\/beautiful-color-palettes-for-your-next-web-project\u00a0http:\/\/www.zevendesign.com\/color-harmony\/<\/span><\/span><\/em><\/span><\/p>\n Combining colors can be challenging. Understanding and using the different types of color schemes can help.\u00a0There are 5 main types of color schemes:<\/p>\n 1) Complimentary:<\/strong> This is the most basic palette. A second color is selected directly opposite to the key color on the wheel. This \u201copposite\u201d color is referred to as the complementary color.<\/em> Virtually all color palettes (except Analogous) are a variation of the complimentary one.<\/p>\n The high contrast\u00a0of complementary colors creates a vibrant look especially when used at full saturation but can be jarring if not managed properly.\u00a0This is the most common color scheme and is easy to find in all sorts of designs. Hulk\u2019s pants are purple to complement his green skin. Christmas themed artifacts are red and green etc.<\/p>\n Complementary color schemes are tricky to use in large doses, but work well when you want something to stand out.\u00a0Complementary colors are really bad for text as both colors have a similar \u201cstrength\u201d and the background and text will fight for attention.<\/p>\n 2) Split Complementary:<\/strong> Rather than using the point directly opposite the key color on the wheel, the split complementary takes the two colors on either side of the complementary color.\u00a0This allows for a wider range of colors while still not deviating from the basic harmony between the key color and it’s complement.<\/p>\n This color scheme has the same strong visual contrast as the complementary color scheme, but has less tension.<\/p>\n 3) Triadic Harmony:\u00a0<\/strong>Also called\u00a0Triadics<\/em>\u00a0or\u00a0Triads<\/em>. This refers to the color two spaces to either side of the key color\u2019s complement. Essentially, with the triadic harmony, you are using three equally distanced colors on the color wheel. As such, you\u2019re stretching the basic idea of color harmony.<\/p>\n Too much of each color and your design appears to have too many colors and can be too vibrant.<\/p>\n To use a triadic harmony successfully, the colors should be carefully balanced\u2014let one color dominate and use the two others for accent. Or, desaturate all your colors and only use the triadic colors in small spots or touches.<\/p>\n<\/div>\n 4) Analogous Harmony:<\/strong> Also referred to as related colors,<\/em>these are the colors directly on the left and right of your key color.\u00a0This can create a serene and comfortable design. While this color harmony can be pleasing to the eye, it can also come across as monotone. If you are going for a design that\u2019s primarily one color, this is a good choice.<\/p>\n 5)\u00a0Tetradic Harmony: <\/strong>Similar to the Triadic, except that there are four points, all equally distanced on the color wheel. This is a color harmony I\u2019ve only seen mentioned in more recent texts on the subject of color harmony and should be used sparingly.<\/p>\n Overtime, colors have come to connote different emotions. Context is important (i.e: different cultures interpret colors differently and the way colors are juxtaposed will also change their meaning) but here are a few qualities that might help guide your choices.<\/p>\n This page<\/a> has more examples and resources.<\/p>\n Edited from <\/span>https:\/\/www.invisionapp.com\/inside-design\/quick-guide-color-palette\/<\/span><\/a><\/em><\/p>\n Use the 60-30-10 rule.<\/strong> Use your colors in a 60% + 30% + 10% proportion. This old interior design rule is meant to give balance to your colors. The formula works because it allows the eye to move comfortably from one focal point to the next. It\u2019s also incredibly simple to use: 60% is your dominant hue, 30% is your secondary color, and 10% is for an accent color. Even if your palette has more than three colors (but please, no more than five), keeping things in balance will be cleaner to the eye and more comfortable for your users\u2019 brains.<\/p>\n Take inspiration from nature.<\/strong>\u00a0The best thing about looking to the environment for design solutions is that the palette is always changing. Sunrises, sunsets, beach scenes\u2026 these all have unique palettes that can be adapted to suit your needs. Use an app like Adobe Capture (more about it in the next section) to isolate a color palette from a photo.<\/p>\n There is a plethora of online tools to help you create color palettes here are a few popular ones:<\/p>\n Choosing the right font for your project is very important – the right font can help set the correct tone… while the wrong one can dilute or even corrupt your message. For basic typography terminology and tips on legibility & readability, please visit the related workshop page<\/a>.<\/p>\n From <\/span>https:\/\/www.invisionapp.com\/inside-design\/quick-guide-color-palette\/<\/span><\/em><\/a><\/p>\n Limit your font palette to (in most situations) 3 fonts:\u00a0<\/strong>While some projects will call for more elaborate font combinations, like when you\u2019re designing a particularly decorative aesthetic, most layouts will benefit from restraint and forethought. If you do choose to use a variety of fonts, the overall effect should be harmonious without being conflicting or cluttered.<\/p>\n A good way to refine your font choices is to ensure that each font has a specific role or purpose in your design. If you can\u2019t find a specific job for a font, it might be time to take a look at your choices.<\/p>\n Use contrast wherever possible to create a visual hierarchy:\u00a0<\/strong>Qualities such as size, weight (or boldness), and spacing (including leading, the space between lines, and kerning, the space between letters) all play a role in how the viewer should navigate the page and what text should attract his or her attention first.<\/p>\n Decide what parts of your design are essential and which are less important<\/span>, and let your font choice reflect those priorities. More often than not, the more important a text element is, the larger and weightier its font will be.<\/p>\n Keep an eye on moods and history:\u00a0<\/strong>This is where the process stops being technical and begins to get a bit more subjective. You\u2019ll want to ensure that the moods evoked by your choices fit the intent of the project. An invitation to a child\u2019s birthday party has a little more leeway when it comes to decorative fonts than does a professional resum\u00e9 or a portfolio page.<\/p>\n You should also keep an eye on the genre or historical context of a font, particularly when designing a project with cultural leanings. Font styles can play a big role in cementing the overall look of your design<\/span>, especially if you\u2019re going for a certain aesthetic, so do some research and you\u2019re more likely to find the pitch-perfect font choice.<\/p>\n Understand your brand and know what you want to say:<\/strong>\u00a0Are you designing a project that has a bit of personality? Or are you putting together a presentation for your company\u2019s board of directors? Knowing what you want to say and the audience to whom you\u2019re speaking is important for both content and\u00a0<\/em>presentation.<\/p>\n Likewise, if you\u2019re designing materials for your brand, make sure your font choices reflect your brand\u2019s values. A company like Airbnb\u00a0can utilize a font with a bit more whimsy than, say, General Electric or IBM. Choose fonts that work with your existing branding and you\u2019ll run a lower risk of sending mixed messages to your audience.<\/p>\n Trust your gut:\u00a0<\/strong>The decision about whether or not two or more fonts complement each other can feel like something of a guessing game. You\u2019ll often find yourself relying on instinct or a gut feeling. That\u2019s ok. You\u2019ve got this.<\/p>\n If you make a point of noticing how fonts combine well (or not) out in the real world\u2014on products, in magazines, on websites, and in books\u2014you\u2019ll start to develop an innate sense for what works and what doesn\u2019t.<\/p>\n Here are a few resources to help you select, test and combine type:<\/p>\n For next week, select the\u00a0colors<\/strong> you will be using. You may use one of the tools listed above to come up with a palette. Specify which one will be the dominant color. If your campaign project includes a website with text, navigation etc. specify which color will be used for what design element (background, paragraphs, headers, links etc.).<\/span><\/p>\n Also\u00a0select the font(s)<\/strong> you will be using for your project (maximum 3). If your campaign project includes a website with text, navigation etc. specify which font will be used for what design element (background, paragraphs, headers, links etc.).<\/span><\/p>\n Create a style guide (<\/strong>you may use this template<\/a> or create your own)<\/strong>\u00a0to share your typography and color choices.\u00a0<\/span>Submit the style guide on the OpenLab \u201cstyle guide\u201d discussion.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":" Color While your sketches are likely to be mostly monochrome, at this point you should start thinking of the color palette you will be employing in your campaign project. Wether you are thinking of using a lot of saturated colors to go with a fun\/cute message, or a subtle and muted palette for a more … Continue reading “Week 8”<\/span><\/a><\/p>\n","protected":false},"author":21,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"class_list":["post-627","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp460-pinkas-s2020\/wp-json\/wp\/v2\/pages\/627","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp460-pinkas-s2020\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp460-pinkas-s2020\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp460-pinkas-s2020\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp460-pinkas-s2020\/wp-json\/wp\/v2\/comments?post=627"}],"version-history":[{"count":34,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp460-pinkas-s2020\/wp-json\/wp\/v2\/pages\/627\/revisions"}],"predecessor-version":[{"id":857,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp460-pinkas-s2020\/wp-json\/wp\/v2\/pages\/627\/revisions\/857"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp460-pinkas-s2020\/wp-json\/wp\/v2\/media?parent=627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/openlab.bmcc.cuny.edu\/mmp460-pinkas-s2020\/wp-content\/uploads\/sites\/148\/2019\/12\/color-wheel-direct-300x300.png\")
<\/p>\n![\"\"](\"https:\/\/openlab.bmcc.cuny.edu\/mmp460-pinkas-s2020\/wp-content\/uploads\/sites\/148\/2019\/12\/color-wheel-split-250x250.png\")
<\/p>\n![\"\"](\"https:\/\/openlab.bmcc.cuny.edu\/mmp460-pinkas-s2020\/wp-content\/uploads\/sites\/148\/2019\/12\/color-wheel-triadic-250x250.png\")
<\/p>\n![\"\"](\"https:\/\/openlab.bmcc.cuny.edu\/mmp460-pinkas-s2020\/wp-content\/uploads\/sites\/148\/2019\/12\/color-wheel-analogous-250x250.png\")
<\/p>\n![\"\"](\"https:\/\/openlab.bmcc.cuny.edu\/mmp460-pinkas-s2020\/wp-content\/uploads\/sites\/148\/2019\/12\/color-wheel-tetradic-250x250.png\")
<\/p>\nThe meaning of colors<\/h2>\n
\n
More tips<\/strong><\/h2>\n
Useful tools<\/h2>\n
\n
\nTypography<\/h1>\n
More tips<\/strong><\/h2>\n
Useful tools<\/h2>\n
\n
Deliverables<\/span><\/h2>\n