Valtech Blog » Design

Design in Brown & Grey today

Magnus Thorboll Orum-Hansen — Tue, 25 Jan 2011 14:13:27 +0000

Getting Inspired

Oplev Monet

Mads Hein — Thu, 06 Jan 2011 09:48:06 +0000

http://www.monet2010.com/

Adobe RGB vs sRGB : A necessary choice

Tomas Thorvardarson — Wed, 01 Dec 2010 08:54:21 +0000

Working with digital media can be a challenge sometimes. Especially if you are working with color spaces, they can be a tricky concept to grasp in the beginning.

Most designers and developers have at some point noticed color inconsistency in their images, going from design to production.

This is where color spaces come in.

Color space definition:

“A ‘color space’ is a mathematical method to describe all visible colors. Any visible color can be described as a point in this color space.” [Wikipedia]

Similarities and differences

Both color spaces (Adobe RGB and sRGB) are based on the same structure. Meaning they both have a channel for Red (R), Green (G) and Blue (B), and it is the combination of these three colors that make all the colors you see on your screen.

The thing that differentiates the two from each other is that Adobe RGB has a wider gamut than sRGB. It means it covers a larger area (see image to the right). But what seems to be a common misunderstanding, is that Adobe RGB has more colors. Fact is that both color spaces have the excact same amount of colors. But because Adobe RGB is spread over a larger area, and has the same amount of colors, it has to compensate by having more space between the colors.

Have you ever converted an sRGB image to Adobe RGB, and the colors look darker and more dull? This is a typical example of the sRGB color space’s interpretation of Adobe RGB. And the reason for this is that as I mentioned before the gamut is wider in Adobe RGB, which means the numbers for each color are spread beyond the sRGB color space.
The same thing happens when you convert the other way, only the colors will look brighter.
So if you for example, have your brightest green in sRGB it will not be the same in Adobe RGB (most likely it will look darker, more dull), because that exact same color may exist further out in the Adobe RGB’s gamut, outside of sRGB’s gamut.

“Washed out” effect example

For the purpose of this example I have used a black and white gradient to visualize the gamut of each color space (to better visualize the “washed out” effect). As you can see, the whitest shade in the sRGB gamut is grey in Adobe RGB gamut. This is what happens when you convert between the two. Adobe RGB to sRGB makes the colors brighter, and sRGB to Adobe RGB makes the colors darker (more dull).

So which color space should I use?

Whether you choose Adobe RGB or sRGB is up to you but it is crucial to know when to choose what.

I recommend that when working with web, you make everything in sRGB color space, to prevent any color distortion when saving your image. Because most browsers are not aware of color spaces, they display everything as sRGB.

Adobe RGB should only be used in color-managed applications (like Photoshop). Not in a browser.

I personally only use Adobe RGB for one thing, and that is for taking pictures with my camera. It is great for that, because Adobe RGB is able to show many more colors and shades than sRGB is.

Additional information

This subject is broad and comprehensive, and I haven’t covered nearly every aspect with this article. I’ve merely targeted the essentials for use on web and Photoshop.

Fra glossy magasiner til glossy applikationer

Martin Eiler — Tue, 23 Feb 2010 14:39:18 +0000

Der har gennem de seneste par år, være godt gang i debatten om hvordan de forskellige trykte magasiner og aviser bedst kan tjene penge på deres online tilstedeværelse. Ofte bliver avisernes sites finansieret via banner indtægter, hvilket stadig er vidt udbredt på danske sites også. Men jeg kan ikke selv huske, hvornår jeg sidst har klikket på et sådant banner, og jeg ville også mene, at det efterhånden er et temmelig udpint koncept på de store avis-sites og portaler med de til tider enerverende annoncer som kæmper for opmærksomhed. Men alligevel synes man at mangle en bedre business case for, hvordan man kan lave forretning på den type af sites. Og selv om jeg måske ikke selv klikker meget rundt på bannerannoncerne, må der jo være nogen som stadig gør det.?

Anyways, så var min pointe faktisk heller ikke at skrive dårligt om andres forretning, men at give et skulderklap til Wired Magazine, som så mange gange før, har fat i den tunge ende. Wired Magazine demonstrere på dette års TED konference, hvordan de bedst når ud til deres læsere, uanfægtet af tid, sted og platform. Wired har sammen med Adobe lavet en “digital magasin-læser”. Adobe står bag teknikken på magasin-læseren, som bla. også fungerer på Apples nye iPad, da magasin-læseren er produceret med AIR-teknologi. Så man kan med lidt snilde også få magasin-læseren til at virke på nyere android telefoner, og selvfølgelig på pc, mac og linux. Og med en magasin-læser som både kan vise artikler, billeder og video, og som er spændende og intuitiv at bruge. Så må det unægtelig også være en magasin-læser som er sjovere at annoncere i, og hvor man har mulighed for at producere annoncer som virker noget mere tidssvarende end de udpinte bannerannoncer.

Click here to view the embedded video.

Surface – Evolution eller revolution?

Martin Eiler — Mon, 08 Feb 2010 13:52:58 +0000

Microsoft lancerede i 2009 deres über-hypede teknologi ”Surface”. Surface tillader, at man i bedste sci-fi stil, kan blade rundt i en grafisk brugergrænseflade med brug af hænder og fingre, og hvor man bruger de såkaldte ”gestures” som man kender fra iPhone, til at få maskinen til at gøre hvad man ønsker. Surface har form som et sofabord med indbygget skærm. Ideen med surface er, at man kan bruge applikationer i en mere social kontekst. Typisk vil to eller flere brugere kunne interagere med Surface samtidigt. Hvilket er en af de ting hvor surface skiller sig ud fra de ”tradtionelle” kiosk- og infostandere man kender fra eksempelvis storcentre osv.

Men ser man på Surface ud fra et evolutionært perspektiv, så er det måske alligevel noget interessant ved teknologien. Uden at skulle skrive et langt indlæg om hvordan command line interfaces blev til den grafiske bruger grænseflade, så introducerer Surface begrebet NUI, Natural User Interface. Hvilket i Microsoft optik er næste skridt på vejen i menneske-computer adfærd. NUI forsøger at eliminere mus og tastatur, så man benytter kun hænder og fingre til at betjene Surface. Det åbner op for nye typer af software, hvor brugervenlighed får en helt ny betydning. Men måske også typer af programmer som vi slet ikke kan forestille os i dag. Andre virksomheder der med succes har udfordret brugergrænsefladens grundvilkår er Nintendo, som arbejder med det kinetiske/bevægelses-følsomme interface til at spille computerspil. Så noget tyder på, at der kan være en revolution på vej.

Billeder fra Surface developer training hos Microsoft, hvor jeg og en kollega deltog.

Drop drillemenuen

admin — Fri, 04 Sep 2009 13:00:00 +0000

Noget af det værste jeg ved med drop-down menuer er, at de nogle gange driller ved at forsvinde, inden jeg når at bevæge cursoren ned til det relevante menupunkt. Eller at et lillebitte utilsigtet sving med cursoren forårsager samme utilfredsstillende resultat.

Jo flere fold ud muligheder der er i en drop-down menu, jo værre bliver det – især hvis man endelig er kommet ned til det nederste niveau og vips, en lidt usikker hånd og man må gøre det hele om igen. Følelsen af, at korthuset falder sammen, lige inden man lægger det sidste kort på værket, er utilfredsstillende. Min brugeroplevelse har fået en ridse i lakken.

Alligevel er der én form for drop-down menu jeg gerne vil slå et slag for. En såkaldt mega drop-down menu driller nemlig ikke på samme måde, som så mange andre. Tværtimod giver den brugerne af store og informationstunge sites muligheden for at få en nem oversigt over sitets mange emner, uden krav om en hurtig og sikker hånd. Mega drop-down menuer scorer desuden højere end visse andre, når de brugertestes (Jakob Nielsen’s Alertbox, March 23, 2009)!

En mega drop-down grupperer de forskellige muligheder for navigation, og man kan endda få plads til at benytte illustrationer, hvis man ønsker det:

Office123, made by Valtech

Jeg er selvfølgelig ikke den eneste der har skrevet noget om dette emne. Vil du læse mere og måske også om nogle mere tekniske detaljer, så kig nærmere på:

Smashing Magazines artikel: Designing Drop-Down Menus: Examples and Best Practices

Jakob Nielsens artikel: Mega Drop-Down Navigation Menus Work Well