Stikkord: , | Ingen kommentarer
28. november 2014

Is my pink your blue?

This post was originally published in the VG Tech Blog.

When I grew up, far above the arctic circle, I was told that the sun is yellow, the sky is blue and the grass is green. However, most of the year the sun was gone, the sky was black, and the ground was covered with snow. Associations to colours were not always consistent. Light, and the environment around us, determines how we perceive colours. I do not know if everyone with normal vision see the same colours. My pink could be your blue, and so on. What I do know, is that some people are colour blind, some have low vision and some are blind. As a designer, I have a huge responsibility to create the best solutions possible, accessible for all. Recently, I have been diving into a wide open ocean of knowledge, swallowed some salty water and floated up with increased insight.

Web content accessibility

Earlier this year a new regulation for universal design of information and communication technology (ICT) solutions took affect in Norway. This means that all new web sites and self-service machines should follow a set of guidelines to create solutions that can be used by as many as possible. All existing solutions have to be updated by 1st of January 2021. One of the requirements in the guidelines describes the use of colour, while another stresses the importance of contrast.

Colour

Simply explained, colour is light interacting with our eyes. Light is made from electromagnetic waves, which travels in different wave lengths. When light hits objects some wave lengths get absorbed and some reflected. The reflected waves appear to our eyes as different colours.

In the context of design, colour plays a major role. When choosing colours it is important to understand how they will work together in their final environment. A metro map is a good example of this. A purple line and midnight-blue line on the same map could easily be mixed up and frustrate travellers. A simple solution could be to add different patterns to the lines so they easier can be differentiated. This problem applies to the digital media too. A coloured web link in the body text is more obvious and visible if we add an underline. To indicate an action or communicate a message effectively, colour should not be the only visual element.


Something to think about:

– Colours convey meaning. However, be skeptical to the “pop psychology facts” about colour; is purple really creative and blue trustworthy? And what if you are colour blind?

– Any colour can grab our attention, it all depends on context! A green button may be more visible than a red button if everything else around is in red, and vice versa.

– Abstract associations, as well as personal context and past experiences, can evoke emotions when exposed to certain colours.
Colours look pretty!

 

Colour blindness

Not everyone perceive colour the same way. About 8% men and 0.5% women are colour blind, meaning they have limited ability to distinguish between some colours.

There are three main types of colour blindness:

– Anomalous trichromacy – malfunctional cone (red, green or blue)

– Dichromacy – missing cone (red, green or blue)

– Monochromacy – greyscale

The human eye has three colour-cones; red, green and blue. When one cone is malfunctional or missing, the eye will perceive colours differently. In rare cases more than one cone can be malfunctional or missing.

Red-green colour blindness is a generic term for all forms of red and green colour vision deficiency. Most colour blind people are either red-blind or green-blind (or blue-blind). That said, being red-blind does not mean that red is the only colour they can not see, the whole colour spectrum is affected. Red is part of many other colours, like orange, purple, pink and brown. These colours may look different too. Red-blind and green-blind people are usually confused by the same colours, typically red, orange, yellow, green and brown. However, not all red and greens are impossible to distinguish, and there are different levels of colour blindness. Usually, red-blue and yellow-blue colour combinations are safe to use, with a few exceptions for those with monochromatic colour blindness.

I’ve created a visualisation of the different types of colour blindness, see image below.

Please note: I could not find a verified source of statistics, so the percentages below are approximate (based on various web sites).

Contrast

Colour combinations are important to create satisfied contrast. Not only colour blind are affected, but also people with low vision. The third group, which is easy to overlook, is everyone else using screens. The environment and context play a huge role. I am sure most of us have been using mobile devices out in the sun, or been annoyed of reflections on the computer screens. Designing for all does not only include people with disabilities, but it creates a better experience for everyone.

 

Techniques

Before going live with a new screen-based design, there are a few things you can do to make sure it is readable for as many as possible:

– Create a greyscale version to check contrast

– Simulate the colour blind experience by using different tools (see TOOLS below for examples)

– Test on a variety of devices and in different environments

– Do some usability testing

 

Tools

There are many tools available to check colour contrast and simulate colour blindness.
Below are a few.

 

Adobe Photoshop and Illustrator

View your design from a no red and no green perspective.

View – Proof Setup – Color Blindness (Protanopia-type or Deuteranopia-type).

 

 

WebAIM Color Contrast Checker

Easily check the contrast ratio of the colours used in your design, and if they meet the WCAG 2.0 standard or not. webaim.org/resources/contrastchecker

 

Color Contrast Analyser

Another tool for checking colour contrast. This is a desktop application (Mac and Windows), and it may be more convenient for some to use.

This application also simulates some visual conditions like dichromatic colour-blindness (can only see two of the three fundamental colours) and cataracts (clouding of the eye’s natural lens). paciellogroup.com/resources/contrastanalyser

 

Chromatic Vision Simulator app

Download and use this app if you want an insight into the world of a colourblind person.

Take photos of whatever you want, or simply just view the world through the screen of your phone!

 

Color Contrast Analyzer – Chrome extension

Use this extension to check the text contrast of a web site. Select Medium Bold and Large Non-Bold or Small Non-Bold text, on level AA or AAA.

 

 

Conclusion

No matter what colours we use in design, there should always be a second way of understanding the purpose. Also, high contrast is essential when designing a good experience, not just for disabled people, but for everyone. And, do not forget the context!

So, is my pink your blue? I do not know. As long as my pink is my pink, I am happy 😉

 

REFERENCES:

UXPA 2014 – talk by Elizabeth Allen
Life experience
Stikkord: , , | Ingen kommentarer
02. juli 2014

Less is more

This post was originally published in the VG Tech Blog.

One of the things I remember the most from my first year at design school back in 2002 is the phrase “less is more”. The words originally came from architect Ludwig Mies van der Rohe in the early 20th century, and is the unofficial mission statement for the “minimalist” design trend. Twelve years later I can still hear the voice of my teacher explaining the importance of white space, contrast, typography and grids. 

Minimalist design
During the Modern design movement in the early 20th century, we saw the emergence of several minimalist design trends like Bauhaus, Swiss Design and Helvetica to mention a few. Minimalist design aims to achieve better design through simplicity by keeping only the essential elements and removing the unnecessary that can disturb or confuse the end users. Inspired from these trends we still use many of the same design principles today. One of the most popular trends in digital interface the last few years is “flat design”.

Although the minimalistic design approach has been around for decades, the early days of the Internet did not typically apply many of the principles. With lack of styling and developers with little knowledge of online user experience, it looked more like a digital circus with bright colours, random gif animations and blinking content. Everything was screaming for attention.

The Internet has changed a lot since then. With the growth of the technology, new digital platforms and more knowledge about the users, we have a much better foundation for building good web sites. This does not mean the circus is closed.

Real vs digital
For a long time skeuomorphism was one of the most dominant trends online. The style uses real-world metaphors in on-screen design, which aims to make it easier for users to recognise functionality. Graphics are typically created to look three-dimensional, with patterns, shadowing and highlights. Skeuomorphism does not only apply to visuals, but also sounds and movements. For example, a camera shutter sound when taking pictures and a page-turning movement in eBooks. Another good example is Apple´s iOS6.

Apple iOS6 icons to the left and redesigned iOS7 icons to the right
[Image source: Apple´n´apps]


Modern Design at Microsoft
In 2010, Microsoft realised that their products were becoming too complex and the user focus was not highly prioritised. They decided to make a change, and with external influences like the Modern Design Movement (Bauhaus), International Typographic Style (Swiss Style) and Motion design (Saul Bass) they created a set of new design principles. The outcome was a series of products that looked and behaved like a family of devices. This new Microsoft design is known as Metro. This style is today also referred to as modern or flat design.

Microsoft Windows 7 vs 8 [Image source: Microsoft]


Flat design
The last few years we have witnessed many web sites and mobile apps that have adapted the “flat design principles” when designing for digital interfaces. One example is Apple, who joined the trend with their iOS7 launch in mid-2013. The concept of “flat” is pretty much self explanatory, it makes everything look flat. Remove drop shadow, gradient and textures, and most of the job is done. This simple two-dimensional appearance also makes it easier to design interfaces that are more responsive to different browsers and devices. Web sites load faster and resize more easily.

Apple iOS6 vs iOS7. Why make the newsstand appear three-dimensional on a digital surface? The papers will not fall down… [Image source: International Business Times]

The true challenge with flat design is to make all functionality clear to the user. Ideally, the design should be simple still aesthetically appealing with a touch of personality. It must be intuitive what is clickable and the content should be in focus.

Like any other design style, flat design has its typical characteristics. Some of them are listed below.

♦ Less is more 
Elements without functionality is considered unnecessary clutter. The use of large elements, lots of “white space” and simple shapes all together help create an user friendly digital environment. Written content should also be thoroughly considered, what is really relevant and not. Avoid information overload to create a user friendly interface. Please note that the use of simple elements is not to be confused with “simple design”. Designing minimalistic can be just as complex as any other design style.

♦ Content in focus
Whenever new technology and devices enter the market we become fascinated about all the new interactive possibilities, and the content becomes a shadow of the interface. The main reason users enter a web site or app, and stays there, is to access content. On the other side, an appealing design is important to attract users in the first place. Flat design allows the content to stand out without unnecessary disturbing elements.

♦ Grid
The grid helps keep a structure in every design project. Alignment and spacing takes you a long way, however a proper grid could take you even further. An uncluttered design opens for a more complex grid structure, without making it look all messy. Experiment. Highlight important elements by breaking the grid.

♦ Typography
Clean typography is an important element in flat design. Besides communicating a message it is often used as the centrepiece of the design. Navigation and other written content should be worded simple and efficiently. Use of sans serif typeface, contrast in weight variations and size, and uppercase for navigation and key headlines are common.

Colourful weather app that uses flat simple icons and typography. [Image source: Minimeteo]


♦ Colours
Go bright and bold! It is common to use a broad colour palette, and the most popular flat design schemes are bright and saturated. Good contrast and colours that work well against both light and dark background creates clear and readable elements.

♦ Flat graphics
Most digital interfaces use icons. Some use illustrations. Common for these in the flat design style is their two-dimensional appearance. Shadows, textures and other unnecessary details are stripped away or kept to a minimum. Icons should be simple in style and indicate universal actions or purposes.

The Foundation web site uses simple typography and flat illustrations with some depth.
[Image source: Screen shoot of foundation.zurb.com]

The last few years flat design has turned into a popular minimalist design trend. Is it here to stay, or is it a passing trend? Highlighting the content and focusing on the users need is key for this two-dimensional design style to work well. When designing with simplicity in mind we may have to exclude a lot of creative ideas, however thinking minimalistic is a creative process itself. Making design decisions based on what is best for the users is quite a challenge.

Even though flat design in many cases improve user experience, it does not mean it is the one and only way to go. Depending on the project, the message and content should influence the design style, not the other way around.

It is impossible to predict the future, but I am pretty sure I will never forget my first year at design school. Less is more.

 

Stikkord: | Ingen kommentarer
21. juli 2013

Facebook vs postkort

I løpet av oktober 2009 leverte Australian Post 20 postkort/brev til min postkasse i Eildon Road. Hver dag var like spennende – hvor mange kort får jeg i dag? De fleste kom fra Norge, noen fra Australia, ett fra USA og ett fra Finnland. Å sende postkort og brev er ikke lengre like vanlig som det en gang var. I dag er de fleste av oss godt vant med å kommunisere via epost og sosiale medier. Grunnen til at jeg nå plutselig mottok alle disse «offline» meldingene var et gruppearbeid på universitetet hvor vi måtte utføre ulike researchmetoder i faget «User Centered Design» (brukersentrert design). Gruppen besto av 4 studenter fra Norge, Australia, Hong Kong og Venezuela. Vi sendte ut totalt 590 private meldinger til utvalgte venner på Facebook, på vårt eget morsmål. Et lite utdrag:

«Hei! Som en del av min mastergrad på Swinburne University i Australia jobber jeg for tiden med emnet “brukersentrert design” med hovedvekt på teknologi og online sosiale medier.
Dette eksperimentet er satt i gang for å se hvordan Facebook-venner responderer på en ”real life” oppgave, og deres velvilje til å bruke tradisjonelle former for kommunikasjon, slik som postkort og brev. For å hjelpe meg med min research hadde jeg blitt veldig glad for å høre siste nytt fra deg!»

Dette var én av flere researchmetoder vi brukte for å komme nærmere et svar på vår problemstilling: «How does technology change the ways people interact?»

Vi mottok totalt 44 postkort og brev, 16 av de ble sendt fra Australia og 28 fra utlandet.
Dette tilsvarer en respons på ca 7,5%. Vi kan vel konkludere med at teknologien og sosiale medier seirer over brev i postkassen. Ikke et veldig overraskende resultat i grunn, men det var en spennende prosess. Det som overrasket meg mest, var at de fleste kortene kom fra folk jeg har lite eller ingen kontakt med lengre. Det var ekstra hyggelig!

postcards

 Utrolig gøy å få så mange kort og brev i løpet av få uker!

Stikkord: , , , , | Ingen kommentarer
18. juli 2013

Historien om jenta som ville bli designer

Bardufoss Videregående Skole

Jeg hadde klippet av meg det lange håret og farget det sort, ja sånn sort med blå-nyanser i. Favorittplagget var en kritthvit selebukse og jeg hadde ny Haglöfs skolesekk, som det viste seg alle andre også hadde. Etter ni år grunnskole med 7 elever i klassen, var jeg nå klar for tre år med hele 25 klassekamerater! Tre år med allmenne fag. Året var 1998. Jeg visste jeg burde ha valgt en mer kreativ studieretning, men jeg fulgte strømmen. Det gikk sånn passe. Beste karakter på vitnemålet ble valgfag tekstilforming. Det sier vel sitt.

Sommeren 1999 dro jeg på språkreise til Bournemouth i England. Der var det fint. Fikk virkelig utfordret engelskkunnskapene, noe som ikke var min sterkeste side. Sjenert var jeg også, spesielt når jeg måtte snakke engelsk! Hva om jeg sa noe feil? Skummelt. Jeg drømte om et utvekslingsår i USA, men det ble med drømmen. Enda mer skummelt.

Samme høst flyttet jeg hjemmefra, og året etter fikk jeg førerkort og deltidsjobb på cafè. Jeg “levde livet” på Setermoen. Så ble jeg RUSS da, gikk med rød selebukse (ble lei den hvite) og lagde litt liv med mine klassekamerater. Samtidig funderte jeg over framtida og sendte inn en søknad til folkehøgskolen i Moelv. Linjevalget falt på “Foto og grafisk design”. Dette ville jeg lære mer om. Jeg skulle begynne på min første kreative utdanning!

 

Ett år i Moelv

Det var blitt august 2001. Jeg hadde kjøpt meg et nytt lite stereoanlegg med mini-disc spiller, og sammen med mamma var jeg nå på tur retning Mjøsa i lånt bil. Vi parkerte utenfor en stor bygning høyt oppe i en skråning, omringet av skog og jorder. Frisk luft og god utsikt. Her skulle jeg bo. Jeg var klar for ett år på folkehøgskole. Mamma dro hjem.

Jeg var godt forberedt, med pappas gamle speilrefleks fra 70-tallet i bagasjen og et passe åpent sinn. Det ble et bra år, med minner (og venner) for livet. Vi dro på bli-kjent-tur til Rondane, fototur til Røros og Berlin, Inter-rail rundt omkring i Europa, samt utallige utflukter og foto-ekskursjoner i nærområdet.

Skolen hadde foto-studio og mørkerom. Vi skiftet stadig filmruller i kameraene våre, både sort/hvit negativ og farge positiv. Det var en spennende prosess å observere fotopapiret liggende å flyte i vann mens sorte konturer ble mer og mer tydelig. Plutselig satt jeg med et bilde i hånda. Fascinerende.

I naborommet sto de fargerike Macintosh maskinene. Jeg hadde jo brukt litt PC på skolen før, men var ikke spesielt interessert i teknologi. På denne tiden var det ikke vanlig å ha egen laptop. Vi ble introdusert til Photoshop og Quark X-Press, besøkte trykkeri, designet årboken og hadde 3 uker praksis i valgfri bedrift. En ting er værtfall sikkert – dette ga mersmak! Men, what next?

 

MI, Trondheim

Med rastafletter og solbrun hud møtte jeg opp i MI’s lokaler ved Bakke bru. Det var ikke all verden av muligheter for designutdannelse i Norge, og Trondheim hørtes ut som en fin by. Så her var jeg da. Ny by, ny skole, nye mennesker. Spente elever ble raskt kjent og året fortsatte med research, tegning (med dyre Pantonetusjer), designprinsipper, masse ny inspirasjon, og venner for livet!

Dette ble starten på et eventyr og en framtid jeg trodde jeg bare kunne drømme om. MI hadde nemlig et samarbeid med Curtin University i Perth, Australia. Australia liksom. Det var så fjernt langt borte. En helt annen verden jeg nesten ikke visste noenting om. Jeg sendte inn en søknad og ventet spent med et stort smil om munnen.

Jeg fikk tilbud om studieplass, men «with conditions». Engelskkarakteren var ikke god nok. Jeg klarte heller ikke engelsktesten de stilte krav om. Men jeg ville, jeg skulle. Så jeg bestilte meg enveisbillett til Perth på turistvisum. Det var jo dette jeg drømte om. Utenlandsstudier. Oppleve et nytt land, en ny kultur. Og ikke minst, bli god i engelsk. Noen sjanser må man ta i livet, små og store. Dette var en stor, og jeg angrer ikke et sekund!

Dette var starten på det jeg ønsker å fylle denne bloggen med. Et springbrett ut i den store verden for å lære mer om livet, andre mennesker og kulturer, og så klart design.

Stikkord: , , , , | Ingen kommentarer
21. juni 2013

Når jeg blir stor skal jeg bli…

…lærer. Så var det arkitekt, interiørarkitekt, ingeniør (jeg ante ikke hva det var, men alle snakket jo om det)… Så oppdaget jeg design. Grafisk design. Ja, og så foto da! Dette var i 2001.

Nå er det 2013,  jeg er utdannet multimediedesigner og jobber for tiden som selvstendig næringsdrivende i Oslo.  Jeg har lært mye siden 2001. Veien har vært lang, men spennende! Hele tiden har det vært en stor motivasjon som har drevet meg: SKAPERGLEDE.

De siste 10 årene har jeg vært veldig bestemt på hva jeg vil jobbe med, men når det kommer til stykket så er det jo så mange muligheter. Jeg har erfaring fra mange ulike områder innen design, en bransje i stadig utvikling. Ønsker jeg en variert jobb eller å spesialisere meg? Fast ansatt eller frilans? Jeg er værtfall heldig som kan velge.

// Jorun

graduation7

Foto: Melissa Veerapen

Stikkord: , , | Ingen kommentarer