Meaningful relationships with brands

A typical question designers ask themselves when working on visual identity projects is “What does this brand/company stand for and how do I want it to be perceived as?” It is our job to understand the clients idea of what their brand is (or at least what it is suppose to be), how it is different from their competition and to articulate that idea with visual language. This question is a starting point for the creative process of creating a brand’s or company’s personality and character.

We are constantly judging them based on their personality and our anthropomorphic understanding and perception makes their personalities as complex as ours. Valuable communication between people and brands can be established only when they are able to portray the qualities we seek in humans. Sadly most brands and companies are either reluctant to realize they are being judged, lack a sufficient amount of self-criticism, or don’t seem to care about what their public image is. Their lack of humility comes across arrogant and often results in mediocre or almost no reaction from people. The same reason you are unlikely to share anything more than a small talk with superficial people or keep avoiding annoying ones is why people rarely engage with superficial or aggressive brands.

It’s not about you, it’s about them

The other day my friend Miha asked me for my opinion on his current work on a visual identity project for a local library which inspired a debate with some very interesting ideas on the subject. The logo he showed me was a textbook example–precisely crafted and conveying a strong message. But when I imagined how it would perform in real life it didn’t seem to make any relevant difference except aesthetic. We are all aware of how important libraries are, we perceive them as institutions of knowledge and have great respect for them. And yet every year there is a greater decrease in library memberships and less people are reading books in general. Clearly there are serious communication issues in a relationship between libraries and their users. After somewhat 20 minutes of our debate regarding the message, the composition and the typeface choice I realized we were missing the point by asking ourselves the wrong questions.

To design a clear and consistent visual communication system for differentiating this library from others is something that should be considered as a basic requirement. But to be actually meaningful the design should focus on reinterpreting the idea of a library and reestablishing it’s bond with people using it. The question we actually needed to ask ourselves instead was: “Now that we have Kindles, iPads, e-books, audio books and entire internet of writings, what role do we want libraries to play in our lives?” If one is able to successfully interpret this idea and design a visual identity that clearly communicates this vision, than more likely it is people will notice and respond to it.

The good the bad and the ugly

Of course this is only one side of the story. The communication is effective only when its honest. Ones who fail to fulfill their promises and execute their vision will not be able to establish a (meaningful) relationship with people. After contemplating about this paradigm for the couple of days I became aware of the enormous creative potential hidden in our expectations and perception of what the reality and future of things can and could be.

Every time brand or a company is facing an identity crisis they should turn directly to people for guidance. But even more importantly, to properly facilitate and articulate public ideas it is us designers who must learn to revolve our creative process around people’s expectations and ideas instead of our own.

Can you imagine the market’s reaction to your brand if it met, or even exceeded, public expectations?

HTML5 & CSS3 conference

I was recently invited to speak about responsive web design and webfonts at Slovenian H5C3 conference.

I am still heavily inspired, not only by ground-braking ideas I had the opportunity to grasp while attending An Event Apart conference, but also the great professional passion which is shared between people at such occasions. Which is why I wanted to sum up the ideas and work of people I follow and admire in a manner that reflects the one I had the opportunity to experience from them.

Klemen, which was the main workforce behind the conference, and I also designed a website intended to showcase the responsive web design and webfonts practice. Unfortunately we were unable to finish it due date, but I hope it will be published aftermath as a great follow-up tool.

Predictive Search Engine Optimisation (SEO)

Today’s chat with the regular slovenian web finest gave birth to another great idea—Predictive SEO. Googling it afterwards revealed the idea as nothing new, which was to be expected. Nevertheless here are some interesting points, especially since there is not as much documented on the subject as one would expect.

Predictive Search Engine Optimisation (SEO)

You say predictive, I say crazy-gypsy-fortune-teller

The term “predictive” is ought to point out the speculative nature of this method. Predictive SEO is, put in simple words, finding upcoming niches and being first to provide (relevant) content for that subject. This drastically improves your chances in getting high Google page rank and being among first hits on Google for that keyword when the trend reaches the threshold.

The case Roni, Davorin, Andrej, Marko and I were discussing was Roni’s blog post containing speculations and rumors of the supposed new BigBrother contestants before they were announced. It even contained nude pictures (taken much prior to the beginning of show) which is guaranteed to drive you tons of traffic. In the meanwhile his post appeared in Google reader of his subscribers, they all seeded the link all over the social media, blogosphere etc. And this was more than enough to place him as the first hit on Google for keyword “pia big brother” when the speculations were proven to be correct and people rushed onto their computers to google up Pia—the notorious stripper they knew nothing about.

As Michael Gray pointed in his article (which most probably dates back to 2005 judging from another reference) this technique can be applied to almost any subject. Even though his article lists dodgy techniques and methods, predictive SEO is not necessarily black hat SEO. Mostly this means training your senses for quickly spotting uprising trends before they take off, being fully prepared to provide relevant content for upcoming events and other scheduled occurrences and taking advantage of possessing potentially scarce knowledge/information (not necessary in a immoral way).

Content strategy, I would like you to meet SEO, SEO …

From my personal point of perspective I would go as far as claiming this is barely a SEO technique (at least not in the traditional sense of the term), but rather a modern approach to content strategy. It’s so much wiser to invest your resources and energy in providing the “non-existing” but interesting content (even if it’s long tail) instead of fighting for a piece of Google pie for the existing content. Even though I realize this can not be applied everywhere and the fact some business depend strictly on existing keywords I think this is a powerful and underrated concept which most editors are yet to realize.

So, give Zoltar more silver coins, and he will give you a fortune. If he fails try giving them to Had instead ;).

Vienna Design Week

Couple of inspiring snapshots from my weekend excursion to Vienna Design Week.

Unfortunately I have missed friday’s Stefan Sagmeister’s talk, been rudely avoided by locals when asking for directions and were charged €15 for two cups of coffee and a glass of apple juice. However being able to visit mesmerizing Frida Kahlo exhibition, learning couple of new tricks about light at Ikea’s workshop, getting lost & discovering few amazingly designed local boutique brands and coming across a genuine Banksy peice on a random wall, made it completely worth the trouble.

Make sure you are fully equipped with GPS navigation, maps etc. while traveling to Vienna, because while Austrians have a great aesthetic sense for design, their capital greatly suffers from poor information design.

There was a Frauscher 717 GT boat showcased in the middle of the street near Karlsplatz in Vienna with a beautiful "Wagner" wood display type on top (probably as a homage to Otto Wagner, Austrian architect)
Perfect for coffee-loving-black-widow-type of ladies :)
Grid. Colors. Product design. Photo is not even remotely as sexy as in person.
Local boutique brand of chocolate with an extraordinary product design (an a lousy website)! - www.schokov.com/de/17/start.html
Realizing I am been a complete douchebag when being warned for taking a picture inside an art gallery, I just couldn't resist the urge to quickly snap this great wall typography on a photo.
Stylish schnapps design with beautiful use of DIN typeface. Deutsche Industrie Normnung at it's best.
While having Banksy's footprint all over, it's most probably a local rip-off
Streetart on a random wall in Vienna

User manual for clients

Recent events have led me to contemplate about general relationships between clients and service providers and the mechanics which governs projects. This document is based on an analysis of professional experiences I encountered in both roles (as a service provider and client) with the intention of raising awareness between both parties.

Chess figures

The game of chess, is like a swordfight. You must think first, before you move. Toad style is immensely strong, and immune to nearly any weapon. When it's properly used, it's almost invincible — Wu Tang Clan
(Image by Nic McPhee)

The birth of every project

Every project usually starts with the spark of an idea aimed at changing the current state of something, whether you own your own business, work for an employer or simply considering a personal project. The very second you start thinking about hiring someone to execute the project, help you with certain part of it or just share his opinion on the matter, you have become a client.

By now, your head is most probably already filled with few petabytes of information in form of tiny visual details and a wonderful feeling of positive change & being part of something bigger, which leaves you in a state of genuine excitement. Not being remotely cynical, this happens to all of us and is probably the most important part of your role as a client. But it is also the most controversial element which often leads to irrational decisions and actions as it is easy to get carried away in all this excitement.

Before you start spending evenings behind the laptop browsing everything the web has to offer about your project and deciding on all the details, there are couple of more important things you should consider doing at this point. I guarantee you this will improve your relationships with service providers, resulting in better delivery or at least speed up the whole process.

The name of the game

Define your basic three components

All your future decisions regarding this project will be based on three facts. Your estimated budget, time span and objectives/results you expect from this project. This may sound obvious, but from my experiences this is the first cardinal rule being ignored or misinterpreted in most cases. For instance to “invigorate your brand visual identity” is not an objective, but rather your own idea on how to solve a certain problem. So be sure to state your objective in a form which describes the problem, not proposes a solution.

Weight your options

Take a good look at your three project’s components from previous point. Since you only get to pick two, carefully decide which of them is the most flexible. In most cases you will be more comfortable to postpone your deadline in order to get the proper quality for your money. Cases where time is of great importance will force you to decide between satisfying with a lower quality or paying more than you expected. Any service provider will most likely consult you correctly on this matter if you will be able to properly articulate your objective and expected results defined in the previous step.

Deciding this is actually just a more illustrative way of deciding between a product, a solution or a custom solution. Product being easily affordable and available instantly but lacking the performance. Solution being instantly available good enough performance but expensive. And custom solution being affordable with excellent performance which you have to wait for.

Set the focus

A strange consumeristic pattern of behavior I keep encountering, is people always demanding the best quality, regardless of their actual needs. Most of the times the lower quality does not come in form of a product with a short life span but rather as a instantly available product designed for people with needs and budget like your own. Most problems in your life or subdivision of your project are of this sort and can easily be solved with an average solution.

Understanding and practicing this will enable you to set the focus and resources on more unique and rare problems. These are the problems which will require investing in an existing solution or wait for a custom solution. Which means the bigger the budget constraint the more you will wait and vice versa.

Service providers pros and cons

Choose the right service provider

You must understand that service providers working with the same medium or in the same professional field do not necessarily provide the same service. They operate on different methodologies, possess different know-how and are specialized in different fields which makes them unable to deliver same results as we are accustomed to when buying a product of same quality. Understanding this difference will avoid conflicts about expectations and foremost enable you to get the best these two different options have to offer.

Classic service providers offer the advantage of efficiently producing standard solutions. They heavily rely on precise management of standard production costs for their solutions and cutting down the unknown costs of innovative solutions in order to stay affordable on the market. This is the best way to efficiently solve a problem when operating with low risk factor and having the financial constraint flexible enough to cover the high expenses.

Innovative service providers on the other hand offer unique solutions which are able to deliver the premium quality/performance with minimum production costs. They operate on constant research, interdisciplinary know-how, lots of experience and especially on ability to recognize patterns and the new opportunities created by micro-changes.

Working with the service provider

Most service providers being masters of their craft too often lack the communication skills in terms of being able to explain themselves in language of the client. As a client you are not and should never be expected to understand the finer details of any professional field, it’s methodologies or the jargon. But having some of this knowledge can drastically improve your the quality and efficiency of the communication.

Working with a classic service providers you will soon encounter a situation where the high budget solution still lacks minor details which you would expect to be included. Similar as with products these solutions are designed to cover the 80% of all users needs with 20% of the their overall budget, so don’t expect you will accomplish anything by demanding any special treatment (except maybe getting thrown out of office). The new needs however will most probably be addressed when there is a big enough number of users requesting, needing the same solution.

Despite the fact innovative service providers represent the cutting edge of every service, deliver competitive or even better results and are more affordable you will be tempted to reflect the classic modus operandi on them. You will have a hard time understanding their solutions can not be ordered or planned and the fact these innovative ideas are the direct result of right combinations of factors such as communicational skills of all team members, deadlines, budgets etc. Also majority of executive people tend to perceive innovative ideas as risky in terms of financial loss or reputation of a brand, company or an individual.

Being completely handicapped to differentiate innovation from inefficient and mediocre solutions. They require the clients courage to overcome the initial fear and awkwardness of being pushed out of the comfort zone and also the wisdom to be able to establish relationship based on trust. Your excitement from the beginning of the project is an essential component which can nurture the working environment and boost the process of innovation!

Regardless of your choice based on constraints or service providers, the universal rule for measuring the quality of solutions is the ROI (Return On Investment), where your project results are not always financial gain from the project but can represent some other, objectively measurable factor. Since this is intended as a guide, please point out if you think something is missing or have a different point of view.

An Event Apart Minneapolis

An Event Apart is the cutting edge conference of web industry. It’s not just about UX, design, XHTML, CSS, javascript, etc. It’s about understanding the bigger picture, with just right amount of nitty-gritty to keep you on your toes for the whole time there!

Jeffery Zeldman at An Event Apart Minneapolis 2010

Jeffery Zeldman at An Event Apart Minneapolis 2010 resembling a Twin Peaks scene with red curtains (photo by John Morrison)

Highlights

  • Meeting and chatting with Eric Meyer at a Media Temple party
  • Losing track of space and time while listening to Jeremy Keith and Jeff Veen
  • Finding a golden ticket inside the chocolate which was a prize for one year of free hosting at Media Temple
  • Tracking all the happening via A Feed Apart
  • Having to stand up in front of a whole crowd as Jeffery Zeldman called for “someone from Slovenia”
  • German and I trying to describe curry to Landon while out drinking and ordering snack at a british pub

Web 2.1: The Medium Comes of Age

Jeffrey Zeldman

Godfather of web standards and co-founder of “An List/Event/Book Apart” opened the conference with a reflective talk which put our contemporary achievements and problems into a historical perspective. He started by honoring the inventions in the fields of information technology before the digital age and great minds such as Gutenberg, Claude Chappe, Alexander G. Bell etc. who pioneered the field and set the strong foundation for further progress. Following the path of hyperlinks we went from connecting the first computers into network to browser wars, .com bubble, HTML & CSS progress of standardization, finally ending in luxurious present of HTML5 and CSS3 capable browsers and wide range of portable devices which are rapidly transcending the web from desktop as we know it. “It’s an amazing time to do web design” and I could not agree more.

DIY UX: Give Your Users an Upgrade

Whitney Hess

According to Whitney, everyone who leaves an impact on a product/service is an UX designer, for it is a fight for making things better for people. And to make things better for them we should listen to them. By carefully listening to their feedback, using analytical approach to understand traffic cycles and to discover hidden behavior patterns that they are unaware about themselves, by experimenting with A/B testing to test design’s performance and by conducting basic usability testing (best performed in person). She outlined some very elegant and creative techniques for doing that based on real examples and projects.

The CSS3 Experience

Dan Cederholm

When the man first started exploring space he created and took several items with him. Most of these items were intended for any extraterrestrial life form which is why the NASA engineers were trying to create the best possible experience for communication with best technology available at the time. Web designers today are much alike in the sense of sending out messages not knowing about audiences capabilities. In order to create best possible experiences Dan suggests method of progressive enhancement which he explained by using on a showcase website Thing We Left on the Moon. This allows optimal experience for different browsers/platforms/devices by using CSS3 properties such as border-radius, text-shadow, box-shadow, opacity, RGBA, multiple backgrounds, transforms & animation etc. to enhance no n-critical areas of interaction. Because the CSS3 support is different in all major browsers, enhancements are targeted with vendor-specific attributes.

Mobile First!

Luke Wroblewski

We are living in an era where mobile web growth has outpaced desktop web growth 8× and smartphone sales will pass PC sales in 2011. When you realize most of the web traffic will soon be coming from mobile devices the idea of designing websites for mobile first does not seem irrational any more. And there are three main reasons why this is a good idea to start doing now. Many profitable mobile web products prove that rapid growth of this market represents great opportunity. Constraints of the medium such as smaller screens, different orientations, touch technologies etc. are good because they force more focused design process, naturally eliminating unnecessary elements from design. And of course new capabilities of modern mobile devices are bringing innovation such as touch gestures, location as input, gestures as input, voice as input, video as input, location & orientation as input (augmented reality), orientation (accelerometer and gyroscope), RFID/NFC technology etc. Luke’s talk was not only cutting edge and “up-to-the minute” accurate, but also very well illustrated with juicy figures and right amount of technical details, making it one of the best talks of AEA Minneapolis 2010.

Learning To Love Humans—Emotional Interface Design

Aarron Walter

If we try to project order of human needs according to Maslow onto our interaction with machines we are missing the element of pleasure. Having our expectations for machines fixed only on usable is much like expecting our food just to be edible. Websites are becoming much more informal about the way they approach users which derives from basic human interactions. Empathy is what connects humans and in order to empathize with an interface it needs to have a personality. Design able to establish an emotional connection with it’s users can more easily gain attention, be forgiven it’s shortcomings and will hold a greater power in it’s hands. There are numerous ways to do this, and even more to do it wrong. Fortunately this talk was full of great examples and successful cases which are using this design technique in order to illustrate the difference.

Anatomy of a Design Decision

Jared Spool

This highly theoretical talk explored the structure of the design process by defining it as a process of decision making possible inside 5 basic principles of deciding. Unintended design is a form of design which just happens, without any mental effort and works in situations where users will put up with whatever we give them. Self-design is a process of designing things to best suit your needs and simultaneously relying on enough people with same needs and preferences as yourself. Genius design means solving the same design problems repeatedly based on previous experiences and knowledge about users’ needs. Activity-focused design is about designing for people who are not like us without having previous experience or knowledge, learning about their needs and preferences and innovating by removing complexity. Experience-focused design focuses on the entire experience of a product/service often innovating by improving the gaps between already established segments/activities of the service/product. Design decisions can also be based on the rules/guidelines or by informed approach. Rule-guided design environment speeds up the design process by applying a certain methodology set to reduce thinking on every step, but is extremely inflexible to exceptions. By switching to informed decision making we are able to shift out process from blindly following dogmas to rely on techniques and tricks to guide our decisions.

Weaving the Modern Web

Greg Rewis

As sponsors of AEA, Adobe had the privilege of closing the day one with final talk promoting the new Adobe Dreamweaver CS5. Considering that promotional talks are not exactly popular, yet considering the fact the product is a laughing stock in the professional web design industry all I can say Mr. Rewis handled the audience like a true professional and gained our respect and even attention under 2 minutes of his talk. Learning from professional needs influenced the product development not only to compete with current industry standard tools but exceeding them to some point. The new Dreamweaver now uses Webkit rendering engine with HTML5&CSS3 support, has integrated Firebug which automatically commits changes on the server and it can be fully integrated to operate with dynamic pages and even with content management systems offering extremely fast browsing+edit workflow inside one window/application. So there’s no need to be ashamed if this caught your attention too.

Everything Old Is New Again

Eric Meyer

The next morning co-founder of An Event Apart showed no mercy to those of us with a hangover and dove deep into the heart of CSS3 right after breakfast. Eric presented how some of the old front-end development techniques and methods can now be simplified with new CSS3 capabilities such as using the box-sizing property to apply with to an entire box element, coding resolution independent layouts with media queries, how to recreate the sliding doors technique, using vendor-specific prefixes, RGBA, pseudo-classes etc.

Paranormal Interactivity

Jeremy Keith

Iconography as representational art has a wider reach than language but is also more prone to misinterpretation. Speech as the superior form of interaction lets us to be more specific and also to inject personality. Being humans we anthropomorphize this including objects, so why is it that we perpetuate the same boring personality when communicating with our users instead of using genuine people personality? Building your web forms in a more personal manner (such as “ad-lib” form on Huffduffer) instead of replicating physical copies which look like our tax report is one of things we can do. Not using the hover-effect for displaying important information and providing a safe fallback mechanisms for JS/AJAX is the second. Great storytelling and wonderful examples such as interactive book supported this extraordinary talk which reminded us that it is not about technology but rather allowing people to interact.

Message and Medium: Better Content by Design

Kristina Halvorson

Since our teeth are so precious and intimate we do not exactly choose our dentists by taking an advice from a stranger at a wild party. Most of the times we tend to use Google instead. When we are browsing (dental) websites we are in fact searching for certain qualities, based on what we see and read. Sadly, things we find most of the times are communicating everything else except those qualities. Which most of the times is content’s fault. By taking Ben&Jerry’s as an example, charismatic Kristina fantastically explained the difference between content and text (arguing poor content is everyone’s fault), showed how to create key messages which will guide and govern entire content across all media and most importantly preached about the inseparability ob content and design as they don’t exist without each otherm. It was a fantastic talk which focused on the most important part of our industry—the content.

A Dao of Flexibility

Ethan Marcotte

“What I sense is a real tension between the web as we know it, and the web as it would be. It’s the tension between an existing medium, the printed page, and it’s child, the web.” These are words of wisdom from the cult article “A Dao of Web Design” written by John Allsopp and published by A List Apart back in the 1999. These words hold true especially today when we’re not designing just for desktop but for a plethora of different devices where mobile access to the web will soon outnumber the desktop. Instead of designing static systems designers should embrace these constraints of the medium and design for this flexibility. It was a thrilling ride deep into the heart of CSS where unstoppable robot ninja demonstrated flexible layouts designed with proportions instead of pixels which offer optimal experience on wide range of screen resolutions from mobile to desktop.

How the Web Works

Jeff Veen

Not previously knowing about him I was surprised when the crowd got completely excited when Mr. Veen walked on stage. And couple of minutes later, founding my self completely mesmerized by his storytelling I found out why. His talk began as a story of Frederic Tudor, a 19th century entrepreneur who made a fortune shipping ice around the world and who would later on be put out of business by Dr. John Dorrie’s invention of refrigerator. The story continues at the start of golden rush in the US where financial institutions funded entrepreneurs in their attempts to find gold and bring it back which greatly influenced the birth of the Pony Express service, which was shut down two days after the first telegram was sent from San Francisco to New York. The difference about the success and failure of companies involved in these two stories is about understanding what business you are in, which can easily be applied to technology changes of our time. Ice was all about health, gold was all about communication and today media is about having people’s attention. Illustrating the fundamental principles through stories of some of the most successful web companies by building on top of almost all topics previously covered by other speakers made this talk a spectacular closure.

Portfolio for webdesigners

One of the biggest problems when designers are challenged with designing for themselves is that we tend to jump straight on our visual identity, the layout etc. starting to work from the details out instead of following our standard design process.

This issue has been often written about revealing most common reasons for that behavior. One of them is the lack of constraints which we are normally forced to work with. Other is being blinded by the desire to impress other designers that we completely forget about what are the actual aims we are trying to accomplish. Which is needless to say, one way ticket to perpetual redesign of the same mediocre core.

It is not just the difficulty of designing the form which should be the perfect balance of clear presentation, innovative approach and memorable aesthetic language. You are facing the first obstacle way before you start dangling with graphics. That is when you start thinking of a name to represent you. And when you finally decide upon that there is an endless process of collecting and selecting your work unable to decide upon quantity and quality.

Nomen est omen

Even though it seemed lame not to come up with a creative concept to guide the entire portfolio and was afraid people would not consider me creative for this I took the advice from my friend Ermin Međedović, who convinced me not to be foolish/overly creative with making up names and go with the most associative brand name I can possibly create — my own. This may not work for you, especially if there are cultural transitions to be taken into consideration it might be a better option to build on a more simple and memorable name.

Your work is your signature

When showcasing your work you wish to take advantage of viewer’s general interest and create a short, delightful browsing experience which will leave a good impression. That is why I believe there should be a max limit of 20 items presented. By showcasing more than that, you are risking of slowly loosing your viewers attention which will result in him viewing less and probably missing your best work. You might be tempted to create a complete archive of your work in order to present yourself as very experienced (especially if you are relatively fresh in the business) but in my opinion the people you wish to impress will be able to identify the level of your experience either by the quality of your work or your resume. Comparing my attitude towards my portfolio on several points in my career I think the more mature you are as an designer, the more comfortable you are with being straightforward about your work. It is also very important that you give a slight priority to the type of work you wish to do in the future. If most of your current work consists, for instance of branding related work but you would wish to do more application design in the future, it’s better to showcase more items of application design, even if the work is not as the same quality as branding. However make sure you present the best work regardless of the type, and than do a second revise and fine-tune the pieces to create optimum overall impression whether you wish to point out the diversity of your work or your specialization.

Getting down to business

At this point it is time to do what you know to do best—to design. But before you get your hands dirty with pixel-pushing I strongly recommend you take your time to do a research of other designer’s portfolios (Styleboost and Siteinspire might be a good place to start). Since you wish to differentiate yourself from others pay good attention to the way others establish their persona through their statements and design and observe how they do it. Take those observations into consideration by placing yourself on the map and start by first defining your core statement. This has a lot to do with your work, so if you did your homework with the content strategy you will already know your strengths and your weaknesses by now which will help you position yourself among other designers and articulate your statement more clearly.

This is every webdesigner's portfolio you have ever seen

There is nothing more profoundly wrong and boring to me than web designers displaying their portfolio by downscaling the original size of their work and framing it inside the screen of iMac or MacBook Pro computers.

If you wish to stand out of the crowd, you will want to avoid the same patterns and cliches used over and over on designer’s portfolios. There is nothing more profoundly wrong and boring to me than web designers displaying their portfolio by downscaling the original size of their work and framing it inside the screen of iMac or MacBook Pro computers. Quality of web design is not to be judged based on a screenshot but rather based on use and experience of it. Which is exactly why we all hate “launch project” links next to the screenshot in these type of portfolios. Based on this assumption I managed to design a system showcasing live websites which enables people to fully experience my work while browsing my portfolio instead of just admiring the pictures. Even though this system might not be immediately clear for everyone and it demands some learning, I believe it makes a clear and positive statement about me and my modus operandi to those who sympathize—which is what your portfolio is about in the first place.

I would love to hear your opinion on the matter, so leave a response below.

Mozilla Design Challenge 09

The official brief: “For this Design Challenge we are focusing on finding creative solutions to the question: “Reinventing Tabs in the Browser – How can we create, navigate and manage multiple web sites within the same browser instance?”

This is a current situation of how an average browsers today looks like most of the time.

This is how an average browsers today looks like most of the time.

Defining the problem

Instead of beginning with experimenting with different concepts in order to design a solution I think the more appropriate step is to first define the problem and actually think about reasons why we keep our tabs open. Based on personal experiences, brief research with users and theoretical exploration of user scenarios I was able to narrow down the two most common scenarios:

  1. user stumbles upon an interesting content, but can’t read/watch it immediately so he leaves the tab opened to avoid forgetting about it and/or risking not being able to find it again
  2. tab is containing a website/service/application being regularly used or being part of user’s regular workflow i.e. Gmail or Facebook

Realizing this it becomes clear these two problems require completely different approach towards the solution.

Bookmarking

I think the problem with bookmarking lies much deeper than just a browser behavior or the most common set of tools, but has a lot to do with the basic concept of “saving things for the rainy days” which we as humans are not very fond of doing. Even those wise enough to do it have a hard time organizing them, and it takes a lot of work keeping it up-to-date (there are plenty of bookmarked websites that don’t exist any longer in every bookmark list).

I strongly believe bookmarking is redundant, unnecessary work which could easily be replaced with smart-enough search. Browser’s history contains a lot of metadata, most of them being exact information the users remember about their previously viewed websites. Backed-up with additional visual information such as (color-analyzed) screenshots and fonts these information could be used to create a search powerful enough to find “that red and slightly blue website about cooking that I was browsing couple of days ago”. Which is how the intuitive human cognition process works when searching for things. At the same time, metadata stored in browser’s history (such as frequency of your visits etc.) can also be used to improve algorithm for displaying websites inside the “quick dial” feature, found in almost every major browsers today.

But if you do decide to save a webpage for later it should be easy as drag-and-dropping the tab onto a certain area and letting the browser deal with fetching all the metadata and/or saving the page locally, so it’s available even when you are not connected to the internet. When ironically is most likely to be the time when you have couple of minutes to spare for reading. This way your bookmarks and history can be stored in the cloud and be synchronized between browsers on different computers and mobile devices.

test

You start your browsing in a "speed dial" view where your browsing history can be sorted by visiting frequency, specific date, colour or typeface. The last two parameters are a new feature complementing the traditional text search with visual information which we tend to remember more than text.

test

The default focus is placed inside the navigation bar so you can start typing straight away. Besides the normal URL input the normal text input can be auto-completed based on the matching of the pagetitles stored in history. The new feature also enables users to search the history by entering for instance "dogs+red+two days ago" which would narrow down the selection based on given parameters

test test test test test

Even with previously mentioned feature of metadata-rich history search, there are times when you open up a link but don’t have enough time at that very moment to attend to the content. In this case you need a mechanism of some sort to remind you “ToRead” that at a more appropriate time. Currently we use the most simple solution for that need and that is to leave tabs opened.

test test test test test

You could for instance grab the tab and drag it over to the left side of the browser which should open up a special “clippings” drawer when approached dragging a tag. Depending on your cursor’s position (while still dragging the tab) the interface suggests dropping spot which also sets the “ToRead” priority for that specific item.

test test test test test

To access all of your “ToRead” clippings you can simply press the clippings button next to the address bar which opens up the interface similar to the quick dial screen.

Websites that aren’t websites

Since it would be irrational to expect users to change their regular workflow when it comes to tabs containing web applications, there are limited options to solving this problem. Instead of closing these tabs I think we could benefit enough just by reducing their dimensions releasing some real-estate in the crowded tab bar. Since we all know that shape/color recognition is a much faster cognitive process than reading when it comes to identifying a specific object among multiple choices it would be wiser to rely on favicon to help users identifying the right tab, than the page title (this effect can be experienced by using the bookmark bar in Safari which displays only titles making it much more difficult to identify specific element). Since these tabs are used regularly, one can assume the users is very familiar with the website’s favicon which makes the page title a redundant element in this specific case.

By dividing the tab bar into two sections we enable user to create some sort of dock/task bar for web applications. To improve the overall performance of the browser it would be wise to run these applications as background processes using as little system resources as possible and should initialize only when being turning focus on. This way performance can be drastically improved, addressing the market demand for a fast and agile browser, which is currently a very hot topic.

test test test test test

The tab can easily be “docked” by drag’n’droping it from the right side of the tab bar to the left ...

Drag'n'drop

... and voila the tab is neatly placed inside the “dock” releasing real-estate and system resources for other things.

Design Beyond Painting Facades (talk)

Too often design is linked and perceived as a form of art or is referred to only as a sum of all visual characteristics.

I had the chance to talk about this issues in Kiberpipa at the regular event called “Web hours” where I tried to explain the difference between art and design, contextualizes design as a discipline and it’s role in today’s society. It goes further by deconstructing user experience design to it’s basic elements so we are able to comprehend the actual scale of the design process in contemporary web design.

You can view the video (Only in Slovene) or see the slides (available in english)

Hello world!

Here you will find bits and pieces of my thoughts on design and other things related.