Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 25 2012

10:00

Set Your Website on Fire with Red Themes, Photos, and Palettes

There are some things that you wouldn’t have thought of when using red, such as symbols or effects on our mood. After all, it’s just a colour, right? Red has quite a few qualities and associations; fiery, passionate and overall dynamic are just a few descriptive words that barely scratch the surface.

Prepare to go deeper into the subject and see just how it works!

Basics


Like its predecessor from the previous article, red is part of the primary triad, but it is also on the opposite side in a few senses. Unlike blue, its name is much less tolerant and only a few colours have the luxury of being included in the category. The exclusiveness is present at a biological level, as well: only one of the three types of receptor cells is truly sensitive to the wavelengths characterising red. If you really think about it, just slightly tinting something red will most probably warrant a different name.

Characteristics


Being a warm colour, it tends to be more invasive and will make a room appear to be smaller than it actually is, but when used well and in darker forms, it can lend itself to a cozier environment.

As mentioned, red is somewhat more difficult to perceive and this is because it has the highest of wavelengths. As its wavelength increases, it also nears the edge of what is called infrared, which cannot be perceived by the naked eye.

Colour therapy suggests that exposure to red raises the blood pressure, thus having an invigorating effect. Without going too much into the subject, Eastern philosophy associates red with the adrenal glands and, by extension, with the emotions produced by increased adrenaline.

Symbolism


Naturally, the things associated with it vary with every culture, but there are some general symbols with which we can all agree. In no particular order, these include heat, fire, passion, courage, danger, love and energy.

featured-rose-martin-lougas

photo by Martin Lougas

It is a very human colour which is why it has emotions associated to it. Demanding activities, whether mental or physical, and strong emotional responses imply increased blood flow therefore creating a very straightforward connection with red: blood.

Delving deeper into the human aspect, warmth and energy can be derived. Strangely, the general idea of flames being red has long been rooted, even though orange would be more appropriate. Perhaps it’s because it triggers much stronger feelings which are better represented by fire and we also tend to remember and associate extremes. Warmth and heat also suggest life, but from an inner perspective.

Red is a very powerful symbol for danger because of its immediate perception and adrenaline-related qualities. Stop signs and stop lights are examples of its daily uses. In part because of this, large quantities of bright red can be overbearing so it should be used sparingly.

Combinations


Given its overall effect, for a balanced result it’s best to either tone down a predominantly red design or use it in smaller quantities to bring more life. This mostly concerns bright shades; while darker tones can still be imposing, they are still more tolerable. It should be noted that it tends to conflict with strong cool colours and will warm up more passive colours like browns.

Its complementary is green and theoretically it should be used in a 50-50 proportion for a harmonious effect. In order to avoid a Christmas impression, their interaction should be kept at a minimum and a third colour should be introduced to keep them in check by dominating quantity-wise. Another solution is to use less bright variants.

As an attention-grabber, it works well on darker backgrounds such as dark grey, ash brown and even black. The contrast is effective even with darker or vintage tones of red. On the opposite side, it can be successfully used on white backgrounds in more minimal designs, but once again with a bit of caution.

Palettes


01. TOOL Remix by whoneycutt

palette-01-tool-remix

02. Sea Serpent in Horrible Peril by sethbenson

palette-02-sea-serpent-in-horrible-peril

03. Shark Attack by kristi

palette-03-shark-attack

04. Fire Dragon and Charthouse by mark

palette-04-fire-dragon-and-charthouse

05. Herzin by maya-kido

palette-05-herzin

06. Oil Flame by rickomoreira

palette-06-oil-flame

07. Vintage Poster by robertkubas

palette-07-vintage-poster

08. Court of the Crimson King by carle

palette-08-court-of-the-crimson-king

09. Water Cherries by spongebobgirl949

palette-09-water-cherries

10. War on Water by cgriffith

palette-10-war-on-water

Web – WordPress themes


01. Slick Red (free)

website-01-slick-red

02. Provocateur (premium)

website-02-provocateur

03. Redminton (premium)

website-03-redminton

04. ShapeShifter (premium)

website-04-shapeshifter

05. Titanium Folio (premium)

website-05-titanium-folio

06. Daily Journal (premium)

website-06-daily-journal

07. Bold (premium)

website-07-bold

08. CherryTruffle (premium)

website-08-cherry-truffle

09. Snapshot (free)

website-09-snapshot

10. Myriad (premium)

website-10-myriad

Artwork – macro photos


01. Red Delight by Bozack

artwork-01-red-delight

02. Abstract Red by StacyD

artwork-02-abstract-red

03. Shades of Red by eyedesign

artwork-03-shades-of-red

04. Blood Clot by PoisonedHamster

artwork-04-blood-clot

05. An Apple II by OnMostSurfaces

artwork-05-an-apple-2

06. Ladybug by wulfila

artwork-06-ladybug

07. Leaves on fire 3 by Dieffi

artwork-07-leaves-on-fire-3

08. Cherry Blossoms by heathersfeathers

artwork-08-cherry-blossoms

09. Red by i-shadow

artwork-09-red

10. Flaming Feathers by starlightspell

artwork-10-flaming-feathers

November 16 2011

10:00

A Basic Guide To Choosing Colors For The Mobile Web

The rules for mobile design and mobile SEO aren’t completely different from the rules applicable to desktop sites but it is all the minor differences that make a designer’s life hard. These differences are present in all aspects of mobile design and the process of choosing the colors for your mobile site isn’t an exception.

Reuse Your Desktop Color Palette

When I say that the process of choosing the colors for your mobile site is different, don’t take it that it has nothing to do with the standard process you know from desktop sites. In fact, you seldom have to start from scratch but instead reuse your desktop color palette. This might seem like a lazy approach but in fact it is much superior in almost every aspect to choosing your colors from scratch.

For instance, if you want to ensure consistency between your mobile site and its desktop counterpart, the best you can do is use a stripped down version of the color palette of your desktop site. All you have to do is remove the colors for the site components you won’t be using on your mobile site, make sure that they display well on your target mobile devices (you might need to replace some of the colors, if they are too fancy to use on a mobile or if the contrast is unsafely low), and you are ready to go.

However, it is also totally acceptable to start your mobile site from scratch rather than make it a stripped down version of your main site. The most common case for this is when your mobile site has a very different functionality from your desktop site. Of course, even in this case you can use a modified version of the color palette from your main site but if due to various reasons this is not possible, you need to create your separate mobile color scheme.

In any case, when you choose the colors for your mobile website, the technical limitations of mobile devices are a very important consideration to keep in mind.

Keep in Mind the Technical Limitations of Mobile Devices

Mobile devices get more and more powerful day by day but still in terms of technical abilities, they are far behind contemporary PC displays. For instance, mobiles with monochrome displays are almost history, though you can occasionally find people who use them. You might laugh at the idea to design with these devices in mind but the USE_OF_COLOR Human Test (“Browse the page in a monochrome environment.”) by the W3C recommends them as the ultimate test of how readable your colors are. This is not an exaggeration because some of the technical limitations of mobiles (and the environment you use them in) basically take away from you many of the advanced color options desktop displays award you with.

Image from Wikipedia

Color Depth Dictates Fewer Colors

One of the main characteristics of mobiles to take into account is their color depth. Technology is improving rapidly but still even the best models today have relatively low color depth. Low color depth, such as 8 or 16 bits means that a device is capable of displaying 256 and 65,536 shades of red, green, and blue, respectively, which is far from enough.

It is true that mobile displays are constantly increasing their color depth but there is still a lot of room for improvement. For instance, this article (though a bit old) gives an idea of what color depths some of the major brands on the market today offer. For a more detailed look at color depth, check this white paper.

Therefore, if you want to make the colors of your mobile site user-friendly, use as few colors as possible. It is better to stick to main colors and avoid the use of fancy ones because the risk of them not being displayed properly is higher. Additionally, because of the small mobile screens, you simply don’t have much space for lots of tiny squares all in different colors, which further forces you to use a palette with fewer colors.

Brightness and Contrast Settings Demand High Contrast Schemes

In addition to color depth limitations, you also need to consider brightness and contrast settings. The levels you see on specifications might sound decent but they can be misleading because they don’t take (and can’t take) into account the actual viewing environment. For instance, a very common use of a mobile is in the brightness of daylight, when the perceived brightness and contrast are much lower than the ones stated by the manufacturer. You can’t make your visitors browse your site only in the dark of the night to see it in its full glory, right?

What is more, many users keep the brightness and contrast settings low on purpose to conserve energy. All these mean that your site will be viewed with less brightness and contrast. To counterbalance, you need to use really high contrast color schemes. You can use a contrast analyzer to check how you fare.

Be Careful with Gradients and Background Images

If you use a lot of gradients in your designs (as I do), you need to be even more careful. Gradients are cool, but really only on a desktop. On a mobile, a user can see gradients even when they are not present – he or she just needs to bend the device a little, and voila, here is a gradient that you didn’t include in your design. Of course, this doesn’t mean you must kick gradients completely out of your mobile repertoire but if you minimize their use, this won’t be a mistake.

Backgrounds pose a similar problem. The same background might be perfectly legible on a desktop but on a mobile it might be impossible to read the text. It is your task to make sure this doesn’t happen.

Don’t Rely on Colors to Convey Meaning

Even with desktop design, it is not good to rely on colors to convey information – every usability expert will tell you this. However, this is true for mobile designs and even W3C has included it in its Mobile Web Best Practices.

Time to Get the Color Scheme Ready

Image by Wikipedia

When you get to the very task of choosing the color scheme for your mobile site, you need to take into account the meaning of colors and the right color combinations to use. Even if you plan to reuse your desktop color palette, it won’t hurt to see if a better alternative is available and try using a color scheme generator. These also help when you are stuck and have no idea which colors to use, or if you simply want to speed the process. You might not like every scheme the generator offers you but often the suggestions are at least decent and with some minor modifications (i.e. replace the colors in the scheme you don’t like with other colors you find more suitable), you are done.

Examples of Mobile Sites – Great, Good, Bad, and So-So

1. Weather Underground - a great site with clean design visible on any screen

2. Craigslist- boring to look at but really useful, very minimal, as the site itself, doesn’t waste my bandwidth with useless imagery.

3. Gmail – clean and easy to use.

4. Flickr – if they didn’t use the colors from the main site, the contrast could have been better but still it is OK.

5. Walmart – clean interface, though the text color is a bit light.

6. McDonald’s – the logo is rather pale, occupies a lot of space on the screen, but when you scroll down, things get better.

7. Digg – rather pale, difficult to read.

8. Bloomberg – again, could have had more contrast but not bad as a whole.

9. US magazine – the colors don’t have enough contrast, blurred and hard to read.

10. AztekWeb – gradient + low contrast + scrolling + light text on a dark background, though it probably could have been worse.

If you are familiar with color theory and if you have experience in designing desktop sites, you won’t find it difficult to come up with good color schemes for your mobile site. In fact, thanks to the specifics of mobile sites and the fact that all equal you need fewer colors, you might find it easier to design mobile color schemes than desktop ones.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...