Our advanced systems detected you're trying to access porcupine colors by an old and deprecated browser like Internet Explorer 7 or even 6! This website uses some technologies which can't be detected from such an outdated software.
My first website was a Flash one and there were no alternatives. You see, 10 years ago whatever non-Flash was of no use.
At that time I remember myself playing with Bryce, that software in which you could create 3D landscapes. Is Bryce alive? I have no idea. Well, Bryce was OK but I needed more. Such as software which could help you create websites.
I turned to Flash. I learned the basics and when I felt ready I loaded in there my Bryce images. I added some texts I had already written as the editor of the university magazine and that was it.
Since I had the content ready I only needed some animation (because Flash *is* animation), a bookmarks area and a contact button. Ready, set, go.
Now that I look back to those years I feel overwhelmed of what’s gone. Not because I used to live the best best moments in my life, far from it, but because you always feel the nostalgia of something that doesn’t live anymore. I love my first, clumsy website and this may be a perfect opportunity to tell (and invent sometimes) stories to the next generation in the future.
If Obama becomes the next president of the USA, I think his website will have played a major part for his success. Obviously, he and his partners treat their website the way they should: as the most solid and valid vehicle to promote their ideas to all people around the globe, 24/7/365. This website is their virtual home, which is neat, tidy and welcomes a visitor and a future fan of their party.
Aesthetically, barackobama.com stands at higher level of a typical american website but at the same time the major colors of it are 100% american. However, it is simple and all the blue colors of it don’t make it look crowded or dull.
Thanks to the clear organization of the content, it becomes useful to a US voter. Furthermore, visitors can find a number of ways to promote their favorite candidate by following simple steps e.g. buying a t-shirt. I like this approach, it is another way to see how a website can bring money.
Why design makes the difference
Good design is not magic. And good websites are not being made by magicians. This website works so well because of some design rules have been followed. The rules are:
The excellent typography
The right use of negative spacing
An old good quote says: “many people can choose a good font but only a few will tae typography”. barackobama.com treats typography so well.
I won’t try to explain the details. I only want to mention that the previously shown text has been perfectly designed. Despite the fact there is no image in there it welcomes a visitor and it invites him to read it.
Similarly, the designers of this website know how to treat the negative (or white) space. Each text flows, there are clear messages and there is no rush to put all the content above the fold. Each banner has been wisely designed and each call to action is clear and intuitive.
Combining such characteristics with the beautiful icons and the rest of the colors, the website becomes engaging, beautiful and easy to be used.
barackobama.com is great because all the design issues mentioned above serve the real king, which is of corse the specific content of the website. Text, images, videos and generally each content item has been placed at the right place. The same design would be of no use for an. e.g. website for world travelers.
A designer votes…
If a was a US resident and if my vote was determined only by what I see in a browser I would vote for Obama.
I am not claiming that baracobama.com is perfect. If you take a look at the code behind it you will notice a bunch of mistakes. All I am trying to say is that design can make the difference and websites for political parties rarely look so well.
As time passes by Flash websites become less and less found among the ones we browse every day. It doesn’t impress me. Even if sometimes we don’t know the exact reasons why we still suspect this is the way it should be. However, there are companies or professionals who want to be represented in the Web by a Flash website. We need to tell them why this is not good.
When you ‘re hungry you can’t wait
Imagine someone who hasn’t eaten all day and it’s almost midnight. He’s hungry. He doesn’t care about the fork and he doesn’t care whether the food is warm or not. The same way a Web user appetites for real content. A Flash website makes him wait because it needs time to load or because effects prevent him from exploring the content.
Even worse, some users don’t even have the Flash plugin installed. Then they go somewhere else to find food.
When you ‘re hungry you don’t want to be fed by someone else
Imagine the same hungry visitor. He obviously doesn’t want to be fed by someone else. Web users want to control the interaction with a website and they expect certain things. Flash websites subtract control. We need to realize the Web is much different than TV or cinema. Interaction makes the difference. In the past we didn’t care that much about interaction. Not now.
According to this, even the “Skip intro” buttons are not good enough. When animation is not an ad is rarely important. People visit websites to explore the content, not the animation.
Who can take the responsibility and leave users with disabilities outside? Have you ever tried to make the text bigger in a Flash website? It ‘s impossible. Theoretically, each Flash website should be go together with an HTML one.
What about SEO?
SEO becomes much more difficult in Flash websites. Actually a Flash website can never be optimized the way an HTML one can. Come on, we ‘re living in the era where SEO is a king and it can determine the success or the failure of a website and a business. You just can’t ignore this.
Designing in Flash is a difficult thing
Flash is software which becomes more and more complicated by time. Adobe clearly evolves Flash not for simple websites. Web games maybe? Videos? Mapping? You bet.
As a result creating a really stunning Flash website takes a lot of time and effort and this should keep mediocre developers away. It’s very rare to find a great Flash website and now imagine how much it would cost. 5 times a similar one in HTML. Why not? Now does the user experience is 5 times better than the one in an HTML website? I doubt. This is a problem which can’t be solved in my humble opinion.
The alternative…
is AJAX of course. Certain effects or solutions in usability are everywhere not only because AJAX is a trend but also because we needed to address issues a better way. As a result we had to discover new means of interacting with websites and JavaScript happened to be handy.
What is even better is the fact solutions in AJAX tend to focus on the user not on the developer. It must be one of the most promising things which happen in the Web nowadays.
Do you know any web designer who uses 8px gray fonts on white background?
Anyone who still designs with spacer.gif?
Do you still detect font tags?
I know we all do. If you ‘re wondering what to do with such bad designers, there is a solution actually.
This April fool’s day WaSP introduced some awesome labels to help us cope with bad designs. You could stick them on a laptop. Yet I’ m wondering on which side of the screen.
I don’t buy the joke, I can’t see a joke. I could use these labels everyday. It would be even better if we could stick the labels on websites. (This must be an outstanding idea. I need to copy-write it.)
This image has been taken from a newspaper in 1968. In there an engineer wonders when he’s going to meet a real designer since it has been 20 years and he still can’t find one.
Do click on the image. You will be transferred to Flickr where the original photo is.
It has been almost 80 years and we still can’t agree on the subject. Too bad.
The way a visitor navigates in a website is not only important but crucial in any case. Creating intuitive and easy to use navigation systems can uplift the user experience and make a website successful at the end of the day.
Recently, I was challenged to create a 4-level navigation system for a customer. Needless to say that it was the most difficult part of the project. I decided to take a look at various implementations and decide later which one was appropriate. I am going to try to describe some of them here and mention the pros and the cons of each one.
The hierarchy
Here it is the given hierarchy of the system.
Home
Company profile
About
Personnel
Headquarters
Services
Feasibility Studies
Buildings
For houses
For offices
For stores
Land
City land
Country land
Patterns
General
Orderer patterns
Contact
Let’s move on to the possible navigation schemes. What happens when a user tries to reach the deepest level?
#1 Flyout menus
The following image shows the vertical alignment of the 1st level and, as you can see, next levels open up from left to right.
We ‘re on “For Stores” level and obviously this menu takes up a lot of the screen space. It’s enough to turn this solution down.
Arranging the first level horizontally produces more or less the same ugly and not usable results. Furthermore, flyout menus won’t help a visitor remember how to come back again to the same destination after some browsing. Breadcrumbs can help, but not drastically.
#2 Menus ordered both vertically and horizontally
What is good with such a scheme is the fact that visitors are helped to remember the structure of the website. However there some serious problems with this technique:
such a design covers a lot of our given screen space
being at a deep level is visually complicated
#3 Tree menu
Such a scheme is much simpler and reminds the Windows Explorer hierarchy.
However it is a visually poor scheme and it requires a lot of clicks. It doesn’t let visitors concentrate to the content. On the contrary all the spotlights are on it.
#4 Drop down lists
It is one of the most convenient solutions. Everything can be reached from the top of the page and a visitor needs only to make a selection. The whole scheme is easy to be used and it doesn’t take any learning.
What is not good with drop down lists has to do with design. Such lists remind signing up forms and they all look the same unless some JavaScript is applied to change how things appear. Visitors need aid all the time when drop down lists are the main navigation system.
#5 Tabs
It is the scheme that is going to be applied. It includes all the pros of the previous solution, it is friendlier and it can be designed a million different ways.
To create such tabs you also need some JavaScript but this time it has to do with functionality, not design. Furthermore, using tabs is intuitive and all the relevant information is easily accessible. The whole look & feel of the website is much better this way.
Epilogue
Deep level navigation systems used to be a pain for designers and they still are. Some years ago the finally selected approached didn’t exist at all. New tools and technologies prevail because they provide solutions to real problems. Using them just for showing off doesn’t help anyone. Or at least this is what I believe.
I first met and start to play with Expression Engine 3 years ago. I was about to launch a great website and I was wondering whether I should build it with it. After some geek talking between me and my partner we decided to turn to WordPress. Just for the record that website was never released. I never regretted I dived into the sea of WordPress, a powerful blog engine which can be used as a CMS as well.
Through the years I ‘ve learned WordPress inside out. I designed my own themes, I even built my own plugins (just for personal use) and I am glad I spent so much time for such a worthy system. When I created this website there was no question about the way it would be fueled: WordPress was my only choice. Drupal, Movable Type, Textpattern and the rest were pretty solid engines but not quite well as WordPress. In the meanwhile I felt there was a debt to Expression Engine.
There came a moment where I said that the next version of this website would be powered by Expression Engine.
Pros and cons
Expression Engine in my mind has two disadvantages:
It’s not free
It has a quite steep learning curve
I never really cared about the first one since I knew that if there ‘s something which worths the money, who cares about it? The second thing is not so simple. It requires effort. Anyway.
What makes Expression Engine great is the fact it is made for designers. You can create anything in EE pretty the same way you do it in plain HTML. The famous template system of EE is unbeatable. At the same WordPress makes you feel you need to work all the time in two different modes: the design mode and the development mode. This bothers me. I need to keep my mind clean when I design.
Another attractive characteristic of EE is that it doesn’t focus to blogging. It can be a blog pretty easily but it is better when working for projects such as company websites, small e-shops or websites for conferences. At the same time, I do better SEO work, I can add or remove pages at once and I can have better support by the moment I buy it.
If I had to describe the main differences between Expression Engine and WordPress in a few words I would say that EE is a professional tool optimized for projects you do more often while Wordpress is an excellent blogging platform which can also do more if you need so.
I don’t particularly like to refer to incidents with clients because it is easy to accuse them since they can’t defend themselves. However, contacting clients can be fruitful and teaches you a lot of interesting things. So here it is my story.
A while ago I finished a project which went well. During the whole procedure, me and the client developed a decent level of communication. Nevertheless, I many times was told “you are an artist, I care about the practical part”.
It’s an honor to be treated like I was Dali, even if it happens for some moments only. Instead of brushes I hold Photoshop. Cool. But then again, no. No, my friend I am no Dali and I never tried to disguise. I care about the practical part the same as you. You know why? Because design isn’t art.
Think of a very beautiful table with legs of different length. You see it in a magazine, you want to buy it. It is a bit expensive. “What the hell”, you say, “I’ ll buy it”. You take it home and you feel great. Soon you get hungry and you are going to use your new table. You put on a glass, but it slips. After moving in an extraordinary orbit, the glass leaves the table and crashes onto the floor. You fool - you bought a useless table.
What I am trying to say here is that design isn’t only about communication (what I see, how I feel about it). It is about usage too. I could talk for hours about websites which sell design and a visitor finally feels like the one who bought this table and had all his glasses broken. I want your glasses to remain intact, so when I design I at least care to make the legs of the same height.
It is very difficult to transform two abstract words like “communication” and “usage” into words when you are talking about your work. Still, we need to do it, even if it requires to write clumsy examples with tables and broken glasses.
The difference between design and art is that design should follow some rules. Breaking the rules causes bad things. You pay me to know the rules and follow them. You also pay me to make your website, logo etc. beautiful too. You ‘ve got to trust me. I may not be Dali but I still hold Photoshop.
I am talking about the moments you’re working hard for a client or yourself, time is running out, you want to go to bed and you suddenly find a long awaited solution to a certain problem. Then you have two choices: to move on or to search for an even better solution.
To follow the second option feels clumsy but it is sometimes better to take the clumsy road.
In design this might be finding an even better color comb, in development a piece of code which is more secure and faster, in writing a clearer piece of text for your client. I think similar things rule all professions.
The effort to provide the best work (whatever it may be) was always great for me. Through this tiring but fulfilling experience I had the chance to see new things concerning my work, things I would never meet otherwise. Even better: when you expand your limits you change your way of thinking. By time you need to do it more often.
All in all this makes the difference between a professional and someone who just has a job. Consequently, this is what you pay. I remember me, back during the old ages, wondering why two companies required totally different money for the same service. It took me years to realize that quality made the difference and it took me even more time to define quality.
It is often not easy to define quality. For a dish served in a restaurant quality is measured by taste, the way it looks and smells, how you feel after you eat it etc. In Web design quality has to do with harmony, how easily one finds content, how easily she communicates with the website, how accessible it is etc. It takes a trained eye to consider all these options. A typical user senses quality but he can’t signify it. Most of the times if you feel all right in a website is enough to consider it good enough.
I have learned to appreciate real professionals by the time I started to act as one of them. It is not as easy as it sounds. I recognized this race, I admired it and now I want every single piece of my work to have an essence of professionalism. There always going to be a lot who are better than you but it’s OK with me. At least there’s always a target ahead.
No, I am not writing this post to show off. I am writing it to remind myself not to give up the next time I meet a problem which can’t be solved.
From the moment you earn your living by designing websites, working for a client is just another job. You ‘ve got to perform well, not to exceed budged and given time, cover all requirements etc. This has nothing to do with the innocent ages where you designed for fun, without pressure and limits.
When you create your own website things are a bit different. Again there are things you ‘ve got to do and things you want to achieve, but there ‘s also a relieving kind of freedom. The kind that lets you create without borders sometimes. You can practically do whatever you want since it’s going to affect only you. However your website is still your home and you want the very best for it.
In reality, designing for you never ends. You might have defined your logo or the colors but at the same time you can change e.g. the layout the way you change. This website is above all a field of experiments. Some of them work out well, some others fail. Still I am pretty sure that no customer would like me to make the same experiments at his website.
All this is nothing but an evolving procedure which makes me better as a designer/developer/writer and my personal evolution is mirrored at my website by time. It takes a lot of time to realize that you actually need for example to create a 10px left margin for your text (not 5 or 15 - just 10). When you do it the result is harmonious, you look back at it and wonder why you discovered it so late.
The flip side of this coin is when you create something and you see it works at once. “It took you just one week to get it done. How dare you want me to pay you X for one week’s work?” You ‘re wrong pal. It took me years. Every single day I see your design pass in front my eyes and I try to figure out a decent solution. I spent a lot of hours to find out whether this particular blue goes well with this particular green and now I know.
The closer a designer stands to a customer the more probable is to come up with a good solution. Design never ends actually. There is only a moment when a version is mature enough and reflects the needs and personality of a particular customer. It is important for the designer to discover this moment. The future makes people change and they should expect the same for their websites. It’s a law of the nature.
It would be perfect if I could bring down the walls of my home and redesign the interior, build new walls, paint them with new colors and add some windows in the end. But I can’t. Fortunately, I can do it in my own website.
Similarly, the designers of this website know how to treat the negative (or white) space. Each text flows, there are clear messages and there is no rush to put all the content above the fold. Each banner has been wisely designed and each call to action is clear and intuitive.
