Vektklubb is the largest weight loss service in Norway, owned by VG. The goal is to help people loose weight by eating healthy food and exercise. No diets, no starving. We believe that changing habits over time is key to achieve a better and healthier lifestyle. The service has been around for ten years, and is still going strong! However, last year it was time for a makeover.

Digital makeover

We created a new visual profile, re-styled most of the website (and made it responsive) and created apps for Android and iOS. The first step was to redesign the logo. The technology is moving fast forward, we are frequently being introduced to new digital surfaces and formats, and the graphics should preferably fit nicely into all those spaces.

We needed a flexible logo, made for different scenarios (app icon, banner ads, etc). The solution was to create a symbol that could be used on its own or supported by typography. The VG logo and the .no was removed, and the typography went through a drastic slimming process, leaving gradients and shadows behind. The already well established orange was kept, however some red had to go.

So far it all seems like easy decisions, right? Well, the biggest challenge was still to come; creating the symbol. There are many ways to design a logo, this is how I did it. This time.

It all started with brainstorming based on user feedback, interviews and general research. Then sketching. Lots of sketching. Can´t really draw, but it helps to get the ideas spread out on paper. Feel the shapes, accidentally drawing that wrong line that in the end turns out to be pretty cool. Or not. Creative block and frustration. No pressure! “It´s just a logo”. Not for me. It has to communicate, be unique and recognisable. Finally finding a concept that could work. If only…it looked balanced. Tweaking. Moving the same line back and forth. Then hearing my colleague say “Its done”. That feeling. When you still think there is a long way to go, but everyone else acknowledge it as a finalised piece of work. Realising it´s actually completed, lower my shoulders, relax. Well, there is no such thing as relax. There is always a next step, which is good!

Some paper sketches from the Vektklubb symbol design process.

Tweaking. Exploring.

Final design

The thoughts behind:

The open circle represents the process towards a healthier life style hoping that one day the circle will be complete.

The v-shaped check mark reinforces the meaning of the circle, and symbolises the successful completion of a diary entry, weight program or life goal.

The logo symbol colour is based on established associations to Vektklubb. This energic orange colour is light, fresh, warm and inspiring.

Colour it beautiful

Above are some of the orange shades I found on the old Vektklubb website. In addition to the new logo symbol colour I added two more orange shades to the new colour scheme. Less is more. I also included green representing the food section, purple for exercising, pink serves as a negative/warning colour, blue is weight & measures, and a lighter blue was chosen for water registration. This way the colours get a meaning, and the users can easier associate them with the different sections.

Vektklubb´s colour scheme.

Logo in context

Top of the new vektklubb.no:

Vg.no newsfront:

The icon makes it easier to spot the Vektklubb articles featured on the vg.no news front. This version is inverted to make the most of the orange, which is often more eye catching than white.

Vektklubb event:

App icons:

Wrap up

Logo design is always challenging. There are many ways of approaching the task, depending on time restrictions, experience and personal preferences. In most cases it´s very time consuming, especially when the designer experience a creative block. The best part: you usually never know where you´ll end up!

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.

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

– 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

Adobe Photoshop and Illustrator

 

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!

Download for Android

Download for iOS

 

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:

wearecolorblind.com

colourblindawareness.org

en.wikipedia.org/wiki/Color_blindness

UXPA 2014 – talk by Elizabeth Allen

Life experience

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.

«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!

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

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.

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

Foto: Melissa Veerapen