Understanding Colour

When developing artwork for your website or design project or when brokering your print job, you will often hear us refer to different colour models; specifically, RGB, CMYK and spot or PMS colours.  To appreciate the differences between these models and how they play a role in the look and feel of your brand and subsequent advertising pieces, some basic colour theory and understanding is needed.

gamut

Colour is a visual perceptual property derived from the spectrum of light based on varying wavelengths of light energy – the visual gamut. The colour your eye sees is a sum of the reflected light from an object interacting in the eye’s special light receptors and interpreted by your brain.  Light contains both a visual spectrum and an invisible spectrum (as anyone with a TV remote can attest to the infrared friend). The visual spectrum is seen as colour and is beautifully represented in nature by a rainbow which contains all the colours; red, orange, yellow, green, blue and violet that can be produced by visible light. The invisible spectrum sandwiches the visible spectrum with that remote’s infrared on one end and ultraviolet (UV); neither of which can be seen by the human eye but certainly can be felt as a sunburn or witnessed in the flipping of your favourite channels.

Within our visible spectrum there are boundaries called colour spaces.  The diagram at right shows the entire visible spectrum with the property lines of these spaces as an overlay which illustrates the limits of each. As both web (light) and graphic (print) designers, we must work in both these spheres and also with their limitations and even inabilities to cross-over certain colours between one another.  Let’s take a look at each colour space separately.

RGB (The Additive Colour Model)

Additive Colour Model (RGB)

Comprised of Red, Green and Blue light as the primary colours or RGB for short.  Most anyone who is a TV or computer user on a regular basis will certainly have at least run across the term RGB  in plugging and unplugging cables or doing any basic video troubleshooting. RGB is the colour space of the digital age and any display screen including monitors, HD screens, cameras and scanners because they use light to recreate or simulate colour.  Before the electronic era however, RGB was already a sound model as it most closely represents the human eye and how it perceives colour.

This is called an “Additive Colour Model “because the three primaries add-up to make white light. The degree or quality of white light generated depends on the chromaticities of the input colours as RGB doesn’t specifically define them – if they are defined the colour model becomes an absolute colour space and we find ourselves deep into colour theory!  RGB is the largest space within the visual gamut with all other colours being blends of these three plus their secondaries.  Until recent technological advances, the digital RGB palette of 16.7 million colours posed a problem for many computer and Internet users as their devices or connections were not powerful enough to show all the colours and blends. This has largely been overcome now for most users as limits in colour depth of screens is no longer an issue like when the web first got started and most monitors showed a maximum of 216 colours.

Notice that the secondary colours of the additive model are the primaries of its twin, the subtractive or CMY colour model.

CMY (The Subtractive Colour Model)

By comparison to additive, the subtractive model is far more limited in its gamut and is created with pigments, paints and dyes and relies on the reflection and wavelengths of available light to product colour. For example, plain paper absorbs all colours, making it appear white. Placing ink or toner on that white paper acts as a filter causing certain wavelengths to be reflected which your eye then sees as colour. This is called a subtractive colour model as you are filtering or subtracting light away from the pure whiteness of mixed light and blank paper.  If the light is not white (such as a dim light bulb or overcast day), although our eye is very adaptive to compensating the true colour may not be perceived correctly. As you can see subtractive colour is completely opposite to additive which starts with darkness and adds wavelengths of colour to achieve white, here we start with white and add pigment to achieve colour ultimately ending in a muddy black (composite black) if all the light from the reflecting source is filtered out.

The primary colours of Cyan, Magenta and Yellow are the secondary colours of the additive model just like RGB is the secondary colour set of this model.  Thus you will often hear a printer refer to this as the CMY colour space.  Again, combining or filtering all light out in a subtractive model results in darkness or composite black.  However, composite black is not pure black and quite often in print and paint ends up a deep muddy brown and thus in commercial paint and printing a pure or artificial black (key black) is added to enhance the model.  This is where the K in CMYK comes from.  combine to form composite black.  Notice that the primary colours of a subtractive model are the secondary colours of the additive model above, and the secondary colours of the subtractive model are the primary colours of additive. The “K” in CMYK comes from the addition of true black as composite black is really a mud brown. The CMY colour space is far narrower because of its subtractive nature.

“Spot” Colours

These are colours generated and formulated specifically into printing inks used primarily in offset printing methods. They may include the addition of pure or mixed colours like orange or green to main process (CMY) to create CMYKOG but more often refer to proprietary colour systems like Pantone, DIC, and TOYO to name a few.  The PMS (Pantone Matching System) if generally the most know of these, especially with the expansion of PMS colours out of the press room and into mainstream home fashion.  Spot colour is generally used to obtain a specific hue or value  that is either out-of-gamut of CMYK printing or which may even be trademarked to a brand such as PMS 165 Orange to Harley Davidson Motorcycles.  Spot colours can also include metallic properties, fluorescent reflectivity, varnishes or be run with double imprint for additional intensity and coverage and deliver consistent results every time when colour match matters.

Today’s lower priced digital printing delivers process (CMYK) colour at a fraction of the price a decade ago, making spot colour a premium print solution and costing hundreds of dollars more on a run.  This has many brands and designers rethinking their brand colour strategy to a “close-enough” compromise to the once powerful statement a spot colour would make on marketing pieces.  It seems gone (or significantly reduced) are the days and artistic license of vibrant and intense colour only delivered by a custom-mixed ink like Cobalt Blue which actually contains cobalt salts of alumina and simply can’t be recreated mixing the subtractive primaries suitably. Using Spot colours in your project help deliver consistency, far more vibrant colour, specific hues and special effects, but now at a higher printing cost.

Responsive Websites

What is Responsive Website Design?
Responsive Web Design (RWD) is a design technique allowing your website to shape-shift and fit any screen size or orientation. It uses a system called a fluid grid and it is this which allows text, images, and other assets on a webpage to rearrange to fit the screen of smart phones, tablets, computers, televisions, game consoles as well as that thing that hasn’t been invented yet!

Get Brownie Points from Google
Google likes mobile. On their mobile search, they reward rank for sites that have mobile usability and penalize sites having no mobile support. If your website is still not mobile friendly (i.e. you have to ‘pinch and zoom’ to read it); expect to lose rank quickly or even be dropped from mobile search.

Google Mobile Search Accounts for 40% of Search Traffic
Google also likes fast. Responsive website design allows optimization of images and video for small screens targeted to mobile devices, while richer high-resolution versions end up only on larger tablets, desktop computers and TV screens. Reducing download time improves user experience which makes Google happy and saves bandwidth on your visitor’s data plan makes them happy too.

The Future Present is Mobile
More people are accessing the Internet from mobiles be they tablets, smart phones or now even their cars! A study by ComScore in March 2015 revealed that a greater number of Canadians now access the Internet by mobile devices, (phones and tablets), than desktop computers. Albeit currently a slim margin, it is a gap that is steadily widening and represents over half the survey respondents.What does this mean? Most will first interact with your organization on a hand-held device.

You cannot afford to ignore the mobile shift happening right now!
All of our website packages are mobile-ready from the day they launch. We consider what many sell as an “upgrade”, to be standard equipment — purchasing a website today that is not responsive is like buying a car with the tires sold separately.

Build a Positive User Experience
Responsive Website Design (RWD) should be part of any site reworking or new website design project and should not be a line item cost itself. The beauty of RWD is it makes your site available to the widest audience possible whether they use a PC/laptop, Android, iOS, Windows phone, BlackBerry, smart TV or game console.

Couple RWD with the proper application of website accessibility measures and you have a communication tool ready to meet people — your customer on the device of their choice. Perfect!

Wire Framing Power

Having been in the business of designing for both print and web for nearly two decades, I’ve seen many different ways to design for both mediums and historically they’ve been pretty different in social circles.  What do I mean?  Typically and well pretty much forever, a print-based design has started on a notepad, sketchbook or even a paper napkin at a client coffee meeting.  The rough doodles of pencil and felt-tip pen on paper ever expanding out to increasingly accurate representations of element placements like logos and photographs, typefaces and rough-in of messages.  Once these refined doodles were pretty much “there” then and only then did they move on to become finished art.

The process is called wire framing.

Wire framing as a concept to most outside of the design industry is probably a bit of a foggy concept.  To those who aren’t familiar, it really is like it sounds – simplistic shapes and designs to convey placements of major elements.  Colour and copy are not a concern at the wire frame stage, although the designer may have ideas about them – they are left to mood boards and design atmosphere documents. These simply are there to say here is where the logo will be, the feature image, the offer, a call to action and so forth.  Happy with that generalized layout then great, want to move an element? Easy.

By sharp contrast, the historical process of designing for the web has been radically different.  Certainly designers may have started with some simple form of a wire frame layout but show a client – how taboo!  Expected if you were a real web designer was to plop down with the extra-large coffee and hit Photoshop hard to forge that pixel-perfect representation of what the website would (not might)  look like at 800 x 600 pixels or whatever the accepted screen flavour that year was.  The amount of time for initial comps and multiple revisions was astronomical and far out to right-field by comparison to the far more sane and proven approach typical to print design.

Then the mobile web showed up and started to grow – like a weed.

Seemingly almost overnight it flipped.  No longer were pixel-perfect, fixed-width designs the way to start a project and the taboo was quickly shed and showing doodles and sketches of what might be (not would be) became the norm of a competent (and far more sane) designer.  The realization that multiple day layouts and weeks of design before a single line of code was written was pointless to an evolving web where new devices and screen resolutions were appearing faster than the coffee maker could brew that next pot. Yes, responsive design had taken hold as the new standard and with it the notion of wire framing and prototyping.

Only these approaches could support a web were there were no fixed widths any longer and that form and functional use of a website between hand-held device and desktop computer were radically different.

Your password likely sucks

The password. Now a constant in our daily lives – a password safeguards our money, business website, favourite tunes and generally all aspects of our online lives, from intruders and yes, even snoopy neighbours.

Chances are though, your passwords are weak and probably identical. That would leave a wide grin on any cyber criminal’s mug. Considering the information they are protecting, it’s surprising that setting strong passwords isn’t second nature by now. Nope, not so much.

Yet as more of our lives move into the clouds, we must strive to keep our feet and passwords anchored on solid ground. Failing to do that leaves your vital information ripe for the plucking.  Worse is that most of us have a very dangerous habit of using the same password on every service and site.  A single breach of that password means potentially unabated access to all your information!

Why are we so bad at this and why are threats of lost finances, messed-up credit ratings and legal problems not enough to motivate us?  Imagine your day starting like this all because of a few letters and numbers!

https://youtube.com/watch?v=uO12W35DpsQ%3Fhd%3D1%26rel%3D0%26autohide%3D1%26showinfo%3D0%26iv_load_policy%3D3%26controls%3D0%26start%3D0006%26end%3D0054

The Problem With Passwords

Fact: people are terrible at creating a password complex enough to even offer fair security. We all have an inherent nature to make patterns, something easy to remember, lulling us into a false belief of what we think a ‘good’ password is. Attackers, also being human, are wise to this and can easily exploit this weakness. Depending on how well an attacker knows their target, the first step is to start with the obvious – postal codes, license plates and dates of birth.

Attacks on complete strangers is no harder. That flaw of keeping things simple results in an easily attainable list of the top ten million most common passwords.  These “dictionary attacks” are faster and more reliable than the widely reported “brute force” attacks which tries every conceivable combination.

That list may seem daunting. However,  a standard desktop computer can process a billion passwords per second, so going through those ten million common passwords is short and sweet.

Password Cracking Clusters

In terms of a brute force attacks, that same desktop computer can solve an eight character password in just under 84 days. A period in which a system administrator somewhere should be noticing the vast number of failed login attempts on a service.  Ramp up the hardware to a few high-end gaming rigs and a password cracking cluster is born.

One recent example of this used five gaming machines with 25 AMD Radeon graphic cards – all readily available hardware. That configuration can make 350 billion guesses per second! That’s every possible eight character Windows password solved in under six hours.  Older windows systems which are common in many enterprises will fall in under six minutes and any using passwords on those lists – mere seconds.  Imagine what nation-state sponsored clusters can do.

Need for Long Complex Passwords

The above example shows exactly why ugly eight-character passwords are no longer enough. Secure data sites offer at least 128 bit security on accounts which would take trillions of years for clusters to crack. Humans screw this up by using eight characters or less in their passwords and reducing the security to just 18 bits. It’s like locking a bank vault with a wad of bubble gum.

Most experts suggest at least 12 character hashes and most cloud-based services will support upward of 18, 20 or even 24 characters.  Create and use them and get yourself a password storage solution like 1Password (Canadian), Dashlane or LastPass which can help you generate, store and recall the right password and username combinations.

If you are still going to make your own, these are very weak passwords:

  • dictionary words;
  • dictionary word with a number appended ( i.e. “5alive” );
  • simple obfuscation ( numbers as vowels like “sm1l3yface” );
  • repeating words ( i.e. powpow, tweet tweet );
  • obvious keyboard patterns ( i.e. 123456, fred, qwerty );
  • common numeric sequences ( i.e. 911, 2567, pi (314159) );
  • usernames, birthdays or personal identifiers ( i.e. jenny87, bsmith );
  • license plates, phone numbers, your SIN, address, kids, pet or nick names;
  • keeping the default password on any device (like “admin”, “password”, “master”);

Sleep better. For much stronger passwords do this:

  • at least 12 characters; over 16 is needed to be considered ‘secure’;
  • mix uppercase and lowercase letters properly (i.e. rAeIoU, not RAEiou);
  • use numbers randomly or where it makes sense, never just at the start or end;
  • toss in some punctuation, an exclamation point goes a long way;
  • have different passwords for each site;
  • avoid common words, repeating characters and keyboard patterns;
  • rethink the use of personal info (i.e. your birth date);
  • don’t use information a colleague may know;
  • be mindful of generated passwords – trust the machine generating them;
  • change them often and ask services to remind you if they can (90 days is a good);
  • use two-factor verification if available and while a pain is a best practice.

How strong is your password? Check it out here.

You Want Me to Remember What?

The most secure passwords are long and, for most of us, impossible to remember.  Character strings or hashes like k46F%74Ru5E2Wrzbg^BP are good because they go against human nature of keeping things simple. (Try entering that before coffee.) However, if too short the risk of making it easy for a computer to guess presents itself. 

The above example is 20 characters long with case-sensitive letters, numbers and common symbols. On the strength meter it rates at 43 Quintillion years for that desktop computer to guess this.  That’s 18 zeros (one million to the power of five) … don’t wait up.

When it comes to passwords remember: long is strong! Just don’t write it on a sticky note on the front of your monitor!

Dot anything

Guessing an organization’s website has historically been as easy as appending a “dot-com”, or for us Canadians a “dot-ca”, to their name.  That just changed and you are about to see a big shift in domain names.

Recently the generic Top Level Domain (gTLD) space expanded from just 22 to what will ultimately be over 1400 when the current roll-out is completed around 2017. About 360 of the new gTLDs have been released and expand domain name opportunities to include geographical locations like “dot-berlin”, industry classifications like “dot-plumber”, vernacular terms and even buzzwords like “dot-ninja”, and many more are yet to come. The expansion is being orchistrated and phased in by the Internet Corporation for Assigned Names and Numbers (ICANN), an international body who oversees the domain space.  They cite the main purpose of the project is to foster the continued growth of the Interent and essentially lay the ground work to make “dot anything” a reality.

“ICANN has opened the Internet’s naming system to unleash the global human imagination. Today’s decision respects the rights of groups to create new Top Level Domains in any language or script. We hope this allows the domain name system to better serve all of mankind,” stated the President and Chief Executive Officer of ICANN, Rod Beckstrom.

This ICANN video sums the program up nicely.

As a web design professional, I can immediately see the benefit for site marketing these new names offer.  The speed of the world today in combination with ultra-low attention span of every overly bombarded potential customer underscores the potential impact a domain name shift could mean for even something like off-line adverstising.  For example a small site branding ad inside a city bus or subway car with “smithbrothers.com”, which could be anything from a law firm to a trendy clothing label, is not as impactful and direct as that same ad with “smithbrothers.plumber” which clears up any doubt as to what the Smith’s do.  Easily remembered by the viewer looking at it through bloodshot eyes early in the morning, following a sleepless night thanks to that dripping faucet.

Curious yet about a new domain opportunity for your business or organization?  Insignis Design can help you navigate the registration and pre-registration process to secure the perfect one (shameless plug). To help you find it and also become familiar with the variations available, check out this list from Wikipedia:

List of generic Top Level Domains

Without a doubt these additional domains will radically change the webscape in the coming months and years. I’ve already seen a few television ads based on new domain names for brands who have started engaging customers that “dot-beer” and similar choices are in fact a real online destination.  How this ultimately impacts the online experience remains to be seen and is without doubt, another angle.

Is your website grade ‘A’?

Improving your Web Presence through Standards

Whether you have a Web site for your company now or you are debating about getting one, there are important factors you should know that can greatly enhance your Web presence. Non-standardized Web development has actually become the standard over the past several years, stemming from both lax habits by designers and competition among browser companies. This event is the catalyst for a wide array of issues from poor search engine rankings through to the entire lock-out of special needs persons from the Web – issues that most likely are or threaten to affect your Web site.

You may have heard rumblings about “Web Accessibility” or it may be a concept entirely new to you. When asked most people think this subject deals with “the creation of Web sites for the blind”. While creating Web environments that are considerate to the visually impaired and other challenged groups is a large part of the accessibility movement, there is much more to Web accessibility than just this. For the sake of this article, let’s break accessibility down into two channels, the moral channel and the logistical channel.

The most familiar face of accessibility deals with the moral obligation of levelling the playing field of the Web for equal access to persons in all walks of life. This battle is just gearing up and has already seen several successful law suits around the world in claims of breach of human rights. In the United States, Section 508 of the Disabilities Act defines public space to include Web sites and enforces the regulation strictly if government monies go toward its creation or upkeep. While Canada is still sleepy in this realm, our Human Rights Code has never defined public space as being solely physical which has many publicly funded organizations scrambling to ensure their sites are compliant to the US model.

The logistical channel of accessibility deals with a more benign legal aspect, but still has high costs associated with it if your site ignores them. For example, have you ever found yourself at a site that had a “menu” that you weren’t sure was in fact part of the site’s navigation? Unsure, you ended up clicking in a frustrated rage at the swirling red ball hoping it was a link to the information you wanted. Such a site violates both channels of accessibility.

Now think about your own site. There are likely quite a few accessibility points that you or even your designer may have overlooked that could leave your site out of search rankings making it essentially invisible to the world; or that could be preventing all devices and users from accessing it leaving you open to scrutiny or even future legal action. While a properly structured document is the concrete alternative, an interim solution can be realized by providing alternate content to your non-text based elements. This will make your site more accessible than without, both on moral and logistical grounds.

Search engines crawl the Web looking for resources and will reward accessible sites with high ranks on their keywords. Much like a screen reader that the visually impaired use, search engines read an entire site top to bottom skipping over non-text based content including images, movies, Flash and even those fancy headings that look so nice. This drives home the point that is so often ignored in Web development and that has led to it not following standard – the Web is an information medium not a visual medium.

Web content can be delivered in a multitude of ways other than fancy visuals including raw text, print, data mining, aural or tactile formats. Properly structuring your Web documents to the standards that are set forth by the World Wide Web Consortium (W3C) ensures that the information they contain can be accessed by any delivery method an end user may decide to use. A key to properly structuring a document is to initially create it completely free of presentation information which dictates how it should display (visual domination).

By separating presentation from structure you are providing a document that can be moulded into other forms on demand, need-by-need. Relax, this doesn’t mean your Web site will be an unappealing block of boring text – actually, it should allow your designer to flex the true muscles of the medium. Accessibility also transcends time and technology ensuring that devices like older browsers, PDA’s, assistive devices, search engines and even some cellular phones, (plus whatever new gadget will be adorning our belts in the near future), can fully access your site’s information.

It is for this great reward that accessible design is a methodology that should be employed from the ground up. While it can be retrofitted in stop-gap situations, it is not an upgrade option, up sell technique or some other extra feature to be tacked on a development contract for X dollars more. Many of the features associated with accessible design are part and parcel with streamlined, standardized structure and therefore should be more cost effective to create than many of today’s bloated visual only designs. Like an architect adheres to building codes, any professional designer should be deploying standard compliant, accessible sites as part of a best-practices approach.

When contracting for a Web site or even significant changes, be sure to ask questions about standardized code and accessibility when engaging a design firm. Do homework like you would with any other capital or large advertising investment and be a hands-on purchaser to ensure you are getting a sound, proactive Web site that will meet both your best interests and your customers’.