Posts in category: Web design
Jason Santa Maria talks about our need to use a new application focused to Web design. In his article he explains why current tools are bloated with features we don’t need or features that don’t work well.
What’s more interesting is how he sees designing in the browser:
But I don’t think the browser is enough. A web designer jumping into the browser before tackling the creative and messaging problems is akin to an architect hammering pieces of wood together and then measuring afterwards. The imaginative process is cut short by the tools at hand; and it’s that imagination—or spark—at the beginning of a design that lays the path for everything that follows. Without it, you’re at best able to make a website that looks like a website—rather than a design that tells a story in the form of a website.
I think designing in the browser is the best way to design websites these days. I think it’s the best medium to start telling a story and creating emotions as long as you forget for a while that it is a real browser. Train your mind to forget markup when you have to markup and concentrate on the visual advances it provides. It is not easy.
However what Santa Maria suggests would be revolutionary.
Oliver Reichenstein is the man behind iA, the famous design studio in Japan.
If you are familiar with the work of iA, you might have detected the somewhat strict design approach it follows. Oliver Reichenstein studied philosophy. I think there’s a connection between the particular design approach and Reichenstein’s background. Philosophy teaches how to be analytical and how to use the analysis you made to reach to solid conclusions. Philosophy also makes you be simple but not too simple. Last but not least, philosophy can add this important bit of cynicism in your life.
Now think a bit about design. Design aims to solve particular problems. The work of iA is focused on how will help a visitor read things, navigate easily and take the most of a website. Not how to make him feel happier.
Now add the prominent design minimalism of Japan.
See? The pixel perfect work of iA is explainable. I love this brave design philosophy. It is obviously important and explains the success of the studio.
By the way, Reichenstein gave an interview to UX Booth recently.
My favourite part:
- What can we learn from Japanese (interaction) design culture?
- Interaction designers should learn from product designers. And in that sense Japan is a little paradise. As much trouble as the Japanese economy is facing, Japanese product design is in many ways still a paradigm of craftsmanship, consideration and care.
Craftsmanship, consideration and care.
This is a list of online and offline tools which can boost design. What I am interested in is to provide the ones that work best for me, not all of them. Without further ado here’s the list.
Color
Three tools work for me when it comes to color.
- kuler
I love kuler not because I can find there thousands of schemes but because I can upload an image and extract its colors. I know there are many similar tools, but I think kuler is better when it comes to variations of a scheme e.g. a more vivid or a desaturated version.
- 0to255
A fantastic tool. You pick a color and it finds you lighter and darker versions of it. I use it all the time.
- Color Scheme Designer
Color Scheme Designer finds for you complementary colors, triads, tetrads etc. You can easily change the saturation of you base and take the variations with one click.
Grids
What would we be without grids? Nothing.
- #grid
#grid is awesome. With just a bit of JavaScript you get a coherent and discreet grid system on your screen. To be precise: on your browser.
- 960 Grid System
An alternative to #grid. It works with fluid/liquid layouts as well.
CSS
CSS frameworks don’t seem very useful to me. So I go with a homemade very simple framework. However, there are two CSS tools I use every day:
- CSS reset
Eric Meyer’s CSS reset is the best one. Just grab it.
- CSS Media Types
The link is all about the relevant article at A List Apart. It has to with how browsers can/should respond to users’ screens. I think this article could change the way we perceive mobile design in general.
Icons & Patterns
- Icon Finder
Icon Finder includes a huge database of free to use icons. What’s even better is that these icons are beautiful most of the times.
- BgPatterns
This is the best pattern generator. It took me some time to appreciate this tool but now I like it. A lot.
My list might be quite short, but tools don’t make the designer. They are only a place to start. And to return to them with the beginning of a new project. Simple as that.
It all begun from a post I read at Maria’s website. I went back to the very first moments I realized that websites aren’t that bad and, “what the hell, I need to make one for myself”.
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.
Here is the link: porcupine’s creek.
Some parts are in English, some in Greek and, yes, the navigation sucks. Please refresh the page in case you get lost.
PS. Maybe this website is the perfect new year’s resolution. Happy new year everyone!
I believe the website of Barack Obama is one of the most successful websites for a political party. I am not the first one who says so, the vast majority of Web users agrees on this. The question is what makes this website so good and how good design makes the difference.
The sense and the aesthetics of barackobama.com
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.
Respect accessibility
Web accessibility is impossible in Flash websites. Period.
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.
21 April, 2008,
- 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.)
So, go download the .pdf file with all the stickers (100KB) and save the world.
It is one of my favorite topics. Who can call himself designer? A designer is not a crazy artist who uses Photoshop effectively, you got that, no?
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
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.
Page 1 of 3
1 2 3 >
