Designing the invisible – matkostankovic.com

by emptyhead on July 26th, 2010.

tl; dr; WE MADE A NEW WEBSITE! YAY!

We’ve received a few questions like: “Err… what did you actually design on that site?”

The short answer to that is, obviously: “Oh… not that much.”

In the next few lines, we’ll explain our procedure and our approach to matkostankovic.com.

True story… except that the PLAN B thingy was our PLAN A and vice versa – we had to lie there to avoid looking unprofessional.

I could probably make this text a lot shorter, but we had an internal bet and I put my money on: “I can write more characters describing the site then we have in our AS3 code.”

So, to read more, to resize your scrollbar and to check last-minute completely irrelevant illustrations, click that funky “more” link.

Our process is split into two parts: “the brain” and “the eye”.

“BRAIN” PART

INITIAL CONTACT

The brief (insert “” signs):

• personal portfolio of a photographer Matko Stanković – showcasing his work

Requirements:

• photos will be sorted in “x” categories, named “n”
• a single photo can be only in 1 category

Available materials:

• his photos (BIG size, 5000+px x 5000+px)

Deadline:

• ASAP! (of course)

Well… Ready, steady, go!

GETTING STARTED

Before jumping into prototyping, wire framing, photoshopping, etc. we have to get one more important detail and that’s: Who is Matko Stanković, the photographer? Not who is Matko Stanković, the person, because we are not doing his personal „me and my bonsai elephant” homepage. We are doing his online portfolio, showcasing his work. And that is a big difference.

We have to get to know Matko – the photographer, get to know his thoughts about his work, attitude, his photographer personality – so we can reflect that in our design. The more information we have, the better job we can do.

Without that info, this all could turn up into one awesome text about „Evolution of electric guitar“ – under a main theme of  „Global warming and how that affects us“. That guitar text can be awesome, but we are paid to do a text on global warming  and guitars have absolutely nothing to do with it. Well, superfast guitar playing can set your fingers on fire… which means that the obvious villains, in this global-warming scheme, are Steve Vai and Karate Kid.

SO, WHO IS MATKO, THE PHOTOGRAPHER?

Here are some of his quotes:

„I have become a problem solver, a guy who tries to take gutsy, let’s-go-bigger-this-time shots with meager assets. “

„Making something big out of nothing…“

„… value of simplicity.“

„When photography is done well, a photo can stand alone without much extra. “

„When you see a perforation or a black frame around my photo, you are looking at the original frame on the film. “

„… to keep myself from violating it with post-processing as much as I can. I feel I owe it to the integrity of the shot, to the time before cropping and liquefying…it’s just a decent way to treat the medium of photography in a time when so few care about its origins and history.“

How this helped us and Matko?

All those answers, along with original requirements and available materials helped us set some meaningful guidelines:

Look & feel:

• show the original crop, show the details, show the border and perforation, don’t violate the photo;
• keep it simple… let his work do all the talk;
• when a user is viewing the photo, that current photo is the most important thing in the universe. Nothing else matters.

Technical requirements:

• there will be an “unknown” number of categories, with “unknown” names;
• there will be an “unknown” number of photos in one category;
• every photo can have a name, location where it’s taken, subject, description, category;
• every category must have a thumbnail display to speed up viewing and browsing through your favorite photos;
• there should be an “About Matko” section.

SLICING… THE GUIDELINES

Next step is to check every single guideline, break it into parts, redefine it and extract as much data from it as we can.

• show the original crop, show the details, show the border and perforation, don’t violate the photo

To show full, original crop, we have to display it on screen without scrolling. It’s easy to display big landscape 16:10 photo on a landscape 16:10 monitor. Copy-paste-goodbye-give money please.

But what about a portrait 10:16 photo on a landscape 16:10 monitor, for example? No-scroll full size 10:16 photo will be relatively small and all the details will be lost.

There are, however, two ways to solve this problem: we can instruct Matko to run around the world, from visitor to visitor, and turn their monitors by 90⁰ – regardless of photo orientation. Or we can implement some kind of zoom to show the details, not just cropping.

We decided to go with zooming method and leave „running Matko“ as PLAN B.

To be able to show the original crop and the details, we’ll have to use two different states of a single image: full view and zoomed in view. Add to that thumbnail display in some kind of a list, and the number of single image states we have is 3. („You shall count to 3… not 2… and not 4…“ – Monty Python, „Quest for Holy Grail“)

• keep it simple… let his work do all the talk
• when a visitor is viewing the photo, that current photo is the most important thing in the universe. (e-G-B-E-B-G-e)

What does all that mean? It literally means that we have to hide, move back, REMOVE EVERYTHING FROM THE VIEWPORT that is NOT REALLY NECESSARY. Simple as that.

What is really necessary? Photo? Information? Navigation? Logo? Let’s remove everything, for a start, except the photo, and start to work from there. Can we embrace and use that philosophy on every element of the site? Yes, we can! (B.O.)

And we have to because it’s the right way to do things.

“EYE” PART

Summary

• let his work do all the talk;
• hide everything except the MUST-BE-THERE elements;
• design full crop preview;
• design zoom view;
• design a category preview with thumbnails (unknown number of photos in single category);
• design a category list page (unknown number of categories);
• design the About page (unknown amount of text);
• glue all this with navigation;
• Oh… and there should be a… drum roll…SITE LOGO!

GETTING STARTED

It’s kind of straightforward because we have set ourselves a fine set of rules. And we will set some more along the way.

After examining delivered materials and considering our guidelines, the overall look and feel that we want to accomplish is:

• everything out of nothing;
• simple and amazing;
• easy and powerful;
• slow but not boring pace…

Sounds like a regular marketing bullsh17 speech, but we can make it J. Aim high – maybe you’ll miss the target, but at least you will not shoot yourself in the foot.

Also, during the process, we decided to make a full flash site.

There are a few reasons for that:

• resolution independent;
• client side calculations;
• transitions;
• endless possibilities for navigation.

Maybe those bullets don’t make sense at the moment, but we will explain them later.

Because we have a plan!

PREVIEW PAGE

We decided to start with drawing the preview photo page – showing full crop. That will be our pivotal point.

There are few reasons for that decision:

• this is the most important thing, of all the important things on the site… that single photo;
• it’s a crossroad. From there you can go in 2 straightforward directions (zoom view, thumbnail/category preview), 2 lateral directions (prev/next photo) and 2 get-me-something-completely-different directions (category list, about Matko section). It’s also a great starting point to develop and test our navigation system.

Quick photoshopping / sketching

We have set our canvas size to maximum resolution, and that’s 1920×1200. Why? Read more on that in the “Creating Variation” section below this text.

Next step is to place all the necessary elements on the canvas. Considering our guidelines, those are: a single photo and… nothing else.

From the materials, we picked up a few portrait orientated photos with different color schemes and placed them on the canvas (one of top of the other). We converted them to smart objects (W00t! Fancy Photoshop term! Bow, mortals!) and resized them, obeying the aspect ratio, to n x 1000px.

To set focus on them, we have to center our photos on the screen because, as we mentioned before, they are the only objects on the canvas.

What do we have here? There is a single photo in the middle of the screen with large amount of white space on all four sides. Simple? Yes. Minimal? Yes. Impressive? Well, no.

As we stated below (object oriented text writing!), an unused part of the browser area will occur while creating variations. You can’t avoid that – it’s impossible to avoid it. But the real problem is not the fact that we have some “unused pixels”, the real problem is that the background is interfering with our view of that photo – creating unwanted, undesirable atmosphere and mood… distraction… most of the time. In short – it’s wrong.

Imagine, for example, a dark black and white photograph on a white background? White background would devour that photo.

Another case: imagine black and white personal and emotional portrait… on a pinky background?

Fits like an Armani suit^* combined with German tourist plastic sea sandals.

Beauty is in the eye of the beholder, but our target audience does not consist of a single i-lick-funny-papers hippie, so we have to find a more generally appealing solution.

How can we solve this?

3 solutions popped up instantly:

• we can use neutral color as a background (some shade of grey),
• let Matko pick background color for every single photo and assign it manually,
• or let’s calculate which color is the most used one on the photography, and use it as a background color.

Last one seemed like the best solution. Why? Because color we’d like to use already exists on that very picture… so let’s use it.

First thing we need to do is to duplicate that photography, place it in the background layer and stretch it across the whole screen. Second step is to blur it so all shapes and lines are lost. Now all what is left are colors from the original picture, complementing the main image.

Are there any other, alternative solutions to our problem? Yes, of course, many of them. But this one goes well with the philosophy: everything out of nothing. It feeds and paints the rest of the site, creates a unique atmosphere that complements every single image. Also, we added a light border around our front photo, to highlight the edges of the crop.

Atmosphere check? Ok! Simple? Yes. Minimal? Yes. Impressive? It depends on the photo – and that’s all what we need.

“let’s calculate which color is the most used one on the photograph” is really an interesting point. Mental note taken.

Navigation

To be able to zoom, view other photos and stuff… pause… *sunglasses off*… pause… we have to implement some kind of navigation… pause… *sunglasses on*… *MUSIC!*

To avoid breaking our main rule – single image is the most important thing, no distractions – our navigation has to be: invisible, simple, not distracting, accessible, functional, ordered by importance, always “at hand”, easy, self-explanatory… Well, like any good navigation – except for that invisible part.

Default state of our navigation will be hidden. So we had to find a way to show it on user request, user action, and whenever the user is thinking “Ok, now I would like to do something!”

Two common sense options are considered:

• moving a mouse,
• or clicking a mouse button

Usually, when you move your mouse, that’s considered to be an action.

Accidentally, or on purpose, we can’t know for sure. We can’t detect a motive (without more parameters like area, speed and stuff), only motion.

Taking that into a consideration, we could display navigation based on user action.

Talking about distraction, there would be a lot of hiding and showing around…

Yes, all those side effects can be countered, but we decided not to bother with this method.

The whole browsing/surfing internet thingy is based on point and click. When you click, we know that you mean to do something – go somewhere.

Yes, you can click by accident, but accidental clicking is happening a lot less then accidentally moving your mouse.

What about “point” in point & click? We really don’t care about that point thingy here. The whole world is a stage… so, click anywhere.

Ok, that’s settled – we will show you the navigation on click…no matter where you click.

Show it where, exactly?

We stated before that the only physical thing on that preview image screen is a photograph. Well, that’s not entirely true. There are two objects:

• a photograph,
• and mouse cursor.

While the whole site is created and has evolved from a photography, the whole navigation should be created and evolved around that other solid objects, a mouse pointer, because that cursor is the interactive connection between user and a web site.

When user clicks, we will show and develop navigation for him around that cursor, because that is where his eyes and his focus will be when he wants to do something.

What about that “photo is the most important thing in the universe” philosophy? Well, not anymore. User action is now the most important thing in the universe because that’s his decision at the moment and we have to respect that.

User should be able to do this – from anywhere – ordered by importance:

• view the single image,
• zoom in and see the details,
• get the extra info about that photo,
• switch to previous/next photo,
• browse the thumbnails in the current category this photo belongs to,
• change the category (any category),
• and read more about Matko.

Oh, about that click. Should it be a left or a right click?

Left one, obviously. But what if someone accidently clicks the right button? I know I did… more than once.

There is a technical possibility to use right-click menu in flash, so why not use it as a secondary option, in a more meaningful way than displaying that useless About Adobe Flash player link?

We would be stupid not to use it. Ok, maybe not stupid, but at least ignorant. The only difference between left and right click in flash is that left click could be styled in a more cool way, but both options should have the same functionalities. We don’t need extra space or new ways to display more functions – because we simply don’t have any more functions.

And how will we hide that menu? Does user have to choose something when he clicks? No.

We are showing that menu on click. If there is nothing interesting on that menu or if user just clicked by accident, move away… your cursor.

To ensure casual and not strict sniper aiming, we expanded these hover sensitive areas a bit over the visible parts.

Look & Feel

Photo lens is one of the most important parts of the photo camera, the one that collects input into it.

Therefore, we decided to use a stylized version of a photo lens as our main look of the navigation, as our input collector.

The colored circle around the mouse cursor is divided into 5 areas – up, right, down, left and center.

Every area is assigned to one action, regardless of the importance of that action:

• Left and right areas are logical choices for previous and next photo in line, from the same category.
• Center area is assigned to zoom. There are two reasons for that:
  • Navigation revolves around mouse cursor and center is automatically preselected for user. Click + click = zoom. On zoom: click + click = zoom out.
  • Accidental double-clicks will also take user to zoomed view, which is not a bad option, because we keep user on the same photo, he didn’t land on some uncharted territory.
  • Area above the center – up – is assigned to browse thumbnails. Up +1 equals “give me more”. When user clicks on it he will land on thumbnail display of a current category. If user hovers over the “browse” menu, list of all the existing categories will pop-up, enabling him to choose and go to any other category.
  • Down is assigned to “About Matko” section. Down -1 equals “less photos, more text”. It takes user to the “About Matko” page.

Colors

We have mentioned the word color many times so far, and now it’s time to explain the whole process of choosing the right one.

With some mumbo-jumbo mathematics and HSB color system, we can extract colors from the current photography, and fill our world with them: from each photo we will extract base color, highlight color and shadow color, and use it as main color for our GUI.

For a base color, we are taking the most saturated color on the photo with high brightness, skipping hues between 10⁰ and 30⁰ (skin tone), to accent the photo detail. We are using that as a base color for radial menu, site logo and thumbnail hover line.

Highlight color is less saturated, but above gray scale; color with highest brightness, but not white.

We are skipping the hues between 15⁰ and 25⁰ (skin tone). That color is used as a border on preview image and as a color of photography description text.

Shadow color is the color with lowest brightness, but not black. We are using it for medium and large preloaders, photography description background and gallery title.

This created some unexpected and cool color combinations, combinations that make you feel they are right, but you would probably never select them by hand and use in your designs. And it fits each screen like a glove.

Atmosphere check? Ok! Simple? Yes. Minimal? Yes. Impressive? Yes!

Zoom view

Next page on a drawing board is the zoom view. Within the “Creating Variations” section, we explained the dimensions used here and how they were calculated.

The whole photo can’t fit onto the screen, so we have to implement a scrolling feature. Design decision was that we want to scroll only in one direction. We feel that there is too much noise if we enable scrolling in all directions. Because this is not something that is written in stone, we can change that later if we decide to enable it.

How to scroll? Simple – use your mouse and show us what part of the picture you would like to see. If it’s a portrait photo, move up/down… if it’s a landscape photo, move left/right.

Absolute left/right or up/down are matching left/right or top/down edge of that photo and from the size of the photo, scrolling speed is calculated. That means: bigger photo, faster scrolling; and vice versa.

What if user requires more zooming levels? We implemented those to. All user needs to do is to come closer to his monitor.

Thumbnail view

What is a thumbnail view? A pile of small photos from the same category. Why do we need it? To provide a way to speed up browsing throughout the photos.

How many thumbnails per page? All.

We are already using previous/next functionality on preview photo page, so we can use that principle here, but on a different scale.

We decided to lineup all our thumbnails in one big horizontal line and enable user to scroll left/right.

Unfortunately, we had to reconsider the “point” component of the “point&click” system here.

We are also breaking our rule of “click = show navigation” system, to speed up the “get me where I want to go” process.

Why… but it’s not consistent!

Well, no, it’s not. But – is that automatically wrong? Small “yes” and a big “NO!”

What do you REALLY expect to happen when you click on a selected thumbnail photo on any other web page out there? You would expect a bigger photo to be shown – and that’s the way it should be.

We can force our navigation to pop-up again, to give user more choices – but why? Is forcing consistency more important than users viewing pleasure, expectations… and speed? That would be a developer’s success and designer’s failure. If user wants more options, he can click anywhere except on that thumbnail photo.

Look & feel

So, a pile of thumbnails, with fixed vertical size, aligned in the middle, one by one.

How should we threat the background here? What colors should we use?

Central point and motive of the whole site is a single photography. So we should probably use it as a background and as our color source.

But, which photo?

The current one. The one from where user landed on a thumbnail display. For many reasons. The most important one is that it will be “the visual clue”, “the visual breadcrumb”. Of course, if a user is browsing through the category which contains that same photo.

Imagine this situation: you, as a user, are looking at a photo and you decide to click on “Browse thumbnails”.

If we leave you on the same background and show you different content, you will not feel lost because we are showing you the same image on which you were just one click before. Clicking the back button in the browser or “zoom” on our navigation will take you again on that same picture. Visual stress and “WTF” moments are minimized.

And, not less important, it looks cool.

But what happens when you visit Matko’s site for the first time? Or if you want to explore a different category than the one you are browsing right now?

We will randomly preset that photo for you, from that newly selected category. Why?

Because you selected something different, therefore we have to give you a clue that content on the screen is different. Changed.

Are those thumbnails the only important element on that page? No.

Current category is already selected on our navigational menu, site title is also displaying selected category, address bar reflects that too – but it’s not enough. That category is at the moment the most important part of the site, so we are displaying category name with big letters.

The details

Web site is now fully functional. You can browse through its content with ease, observe and study photos in comfortable and eye pleasing environment… All main areas are covered. Done?

No. Details are really important. Details are like sub bass – maybe you can’t hear them, but you can definitely feel them. Imagine yourself, again, in that before mentioned Armani suit^*, all dressed up… with a sparkle in your eyes, big smile and your zipped wide open. Nothing big ( :D ), just a minor detail.

CREATING VARIATIONS

Displaying the biggest image possible, showing the original crop, showing the details of the photo, keeping the photo as sharp as possible.

Problems encountered:

• various size of display devices, browsers, resolutions, aspect ratios,
• various sizes of photos, aspect ratios, orientations.

From this, more problems evolved:

• Photo resizing and dimensions depend on browser window.
• What about that blank space which will pop up after resizing the photo if we use the original aspect ratio (and we have to use the original aspect ratio, silly)?
• How to display those resized images without obvious quality loss and huge loading times (original image: around 5mb, jpg – 100%; multiply by X number of photos)?

Number and size of variations of a single photo

Why do we need those and how do we decide which dimensions to use?

Our guidelines say that we “have to” have 3 states of photo: big one full of details, medium one for showing the crop and small one for displaying as a thumbnail.

New guideline set:

• Our goal is to set minimal loading time with a maximum image quality (brilliant!)

Big one is really, well, big – in pixels, as well as megabytes. If we simply use the big one and shrink them in-situ with html/inside flash/whatever, the overall size of gallery overview (thumbnails) would be about 150-500 MB.

We could then pack his portfolio as multi .torrent files and seed it to the users…

Thumbnails should be small, load superfast and provide you with a general idea of what the actual photo looks like.

To bridge the gap from thumbnails (small) and the big ones (BIG… no, really), we need one more variation. We will use that variation to show users full image, crop and stuff… (Remember? One of the guidelines).

So, how to calculate the actual and 100% precise numbers with million variables and cases (within our guidelines)?

The only correct answer to that is: you can’t. All you can do is to have an educated guess and assume the best cases and work from there (assumption – mother of all fkups…).

And when you have to guess about the dimensions, use one rule: if you have to scale image (and you will have to), scale it down – never up (we will break that rule later, but so far it sounds right…).

To help ourselves, we have to check what the monitor standards are these days, and include MAXIMUM “reasonable” size in our calculation,.

As a maximum “reasonable” size we used 24” monitors with a native resolution of 1920×1200 pixels. There are bigger monitors and bigger resolutions out there, of course, but they are in minority at the moment – and for them, we will break before mentioned rule – never scale up.

For everybody else, we will scale the photos down.

All those numbers below will be fine-tuned later, it’s important to set the basics, something you can cling to once you start the actual design work.

FULL CROP

This is our starting point.

We want to have a small amount of white space around our crop preview from all sides. Actually, we want space, not white space.

By default, when resizing, you WILL GET (simple math and common sense) space only left/right or up/down, and we would like to avoid that… because it’s ugly and it results in a feeling as if the photo were suffocating.

We decided we want to have at least 100px space from every side.

First, we have to calculate photo orientation. If x is bigger than y = photo is a landscape. Otherwise, it’s a portrait. Square? Threat it as a portrait. Simple. Yes… and it will bite us on the …leg later on. But we will get back to this.

Now that we know the photo orientation and desired maximums (1920×1200), we can physically scale it down. If it’s a portrait, create variation in dimensions: y = 1000px (1200 – 100 – 100); x = derived from scaling in aspect ratio.

If it’s a landscape, create variation in dimensions: x = 1720 (1920 – 100 – 100); y = derived from scaling in aspect ratio.

BIG ONE / zoomed in

User has to scroll on zoom. It’s a fact :). We decided to limit scrolling in zoomed view to the longer axis of the picture. Portrait: up/down; Landscape: left/right. At least for now, because we think that offers plenty of detail to users.

That’s the reason to limit zooming in to two levels. The first level is clicking zoom on the preview image. The second level is, as we mentioned before, physically moving closer to the monitor.

So, taking that into consideration, with desired maximums (1920×1200 and 0 white space), we are setting the smaller side of the photo to desired maximum (landscape: y = 1200; portrait: 1920;) and users can then scroll along the longer axis.

Awesome. But we have a problem, again. Where? In aspect ratios.

Aspect ratio 1920×1200 vs. landscape photos. If we just check photo orientation, on some landscape photos we are getting y: 1200 and x: 1808px. And that’s not the desired result.

So, we have to change our portrait/landscape detection method for this case. To get a desired result, we have to do this:

Check y axis of the photo, virtually set it to 1200, if x is smaller than 1920 threat is as a portrait photo, set x to 1920 and let y go wild; otherwise, it’s a landscape and threat it as such.

THUMBNAILS

Those are easy. We know we want to have one axis fixed to make them “uniform”. Which one? It doesn’t matter at the moment. We will decide that later.

Maintaining the portfolio

Matko didn’t give us all the photos he would like to see in his portfolio. He will not stop to take photographs now that he has set up his portfolio, he will continue producing. So we have to provide him with the easiest way to update his portfolio.

Because of that, we customized our php/MySQL CMS core.web to suit his needs, which are:

• category: create, name, hide, delete categories, sort categories, sort photos inside the category
• photo: upload original photo (big one), write name, insert description (who, where, when, description, client), assign to category, hide, remove

Thanks to HTML 5, it’s all click/drag&drop, so it’s really simple and easy to use/maintain.

Also, our CMS is taking care of different sizes (variations) of the single photo: original, full zoom, preview and thumbnail.

ARMANI SUIT

Why am I so obsessed with the Armani suit? Well, it’s not an obsession. It’s a fun and emotional connection to my previous life, to my World of Warcraft playing days.

This was before tbc, wotlk, cataclysm, multi-realm battlegrounds and stuff, when downing Onyxia and Ragnaros was a big deal, when R14 gear was awesome. My main character was an orc shaman, elemental pew-pew spec but for some reason everybody thought I was “Restoration” specced and yelled at me “MANA TIDE! MANA TIDE!” in the raids.

Anyway, all that raiding and stuff started to look more like a second job and less like a game, so I enjoyed it less and less. Get online at 19:00, farm stuff for money, buy pots, raid from 20:00 till 0:00, go PvP until 02:00, go to sleep, go to work 9-17. Eat. Repeat.

Some new servers popped up, so a few of us decided to start fresh on that new server, EU Jaedenar. Just for fun, to “role-play” and for world PvP (That stuff actually existed back in the days! It’s not a myth!).

So, we rerolled. We separated our roles in a classical way, so we can group from time to time in regular instances (healer, dps, tank, cc), and fate put me in warlock shoes. Because we were horde on our main server, we rolled alliance characters and I took the only race that suits warlock class perfectly – a gnome.

Also, because that was a new server, everybody started from lvl1, we didn’t know anybody rich on that server to sponsor us. That could be a problem, because I was well known for a luxurious in-game lifestyle. I respecced almost every day, depending on my mood and gold in my purse. I could change my in-game lifestyle or do something about money income problems.

That day, Armani, gnome warlock, epic luxury tailor, was born.

Every item you craft in WoW is signed by “Made by” + name. My gear was signed “Made by Armani”. As soon as I could, I saved 25g and bought “Rich Purple Shirt” pattern from the auction house… and become insta-rich. Sending gifts/samples to prominent guild leaders to pimp my shirts and set them as a requirement to join them also helped achieve that state. Vanity is a great thing. They had to have an Armani shirt… no, they NEEDED to have an Armani shirt :).

At level 35 I could buy 2 epic rides. Good times.

Armani lived a rich life, with many fun adventures: “find a gnome” ganking style, “skinner’s death” ganking style, summoning random people in Gurubashi arena and showing them around out of our group, learning Chinese and recruiting Chinese farmers and then assigning them to special Shaolin ranks into our guild, funding and paying them to lead raids on Horde settlements (Crossroads, Orgrimmar) and Rexxar, getting the whole raid wiped by a lvl25 bear in Ashenvale while trying to attack Horde village, raid full of lvl 10-15 people… to name a few… but that’s the story for another time and another place.