I am still trying to make up my mind whether I like this approach. The minimalist in me (yes, I am one) is delighted. I love seeing only what I need at the very moment and not be distracted by anything else. Also, I don’t think it has many SEO implications whatsoever.

The usability guy in me has mixed feelings about it though. Of course it’s not that Google is trying to hide anything. If you only do as much as moving the cursor all missing elements pop back where they have always been. But what if Google decided that you need to take a more complex action to activate them? Something like performing an actual search, or maybe clicking a button somewhere on screen? Then your access to your essential elements would be severely limited.

By all means I am not saying that what Google is doing with this change is wrong. I honestly think it is a brilliant idea. They tell you straight away what objective they have for you. And in Googles case I doubt they would ever made any usability mistake with their homepage. They are too smart for that.

The problem are websites that will try to imitate this approach without considering the visitor. Imagine sites, like property or apartments in Liverpool ones where you would see only headline and call to action upon landing, and be presented with other info only when you request it. Or only when you absorb the sales info first.

From usability point of view it could actually be a wonderful thing. Although at the same time I can think of hundreds of examples where this idea could be easily mutilated by the marketing people and websites could potentially become massive, virtual sales pitches without an aid of ads and other online sales tools we have to live with now.

Of course it is hard to say whether this would ever happen but the whole change on Googles home page and the way the world of web perceives what Google does got me thinking about all that.

Opinions anyone?

It is a natural instinct that tells us: talking about yourself shows how professional you are. Especially talking about how you know and understand technology, internet, social networking, insert your favorite latest internet sensation here. In reality, nothing is further from the truth. The only thing your prospect wants to find out is whether you understand his needs. And unless you convince him of that your fate is doomed.

Why do I write this in a design blog though? Actually the impulse for this post came to me after a meeting between a web designer and a prospective client that I witnessed the other day. During over an hour that I was there the designer hasn’t stopped talking. I imagine the client must have been delighted when given a chance to throw “ahah” into the “conversation”.

Instead of finding out important information about clients plans for the site the designer kept on bragging about himself and all the internet crap you can think of.

Was the client happy? I pretty much doubt it.

Was the designer happy? I suppose he was actually proud of himself. In his mind he showed professionalism. Mainly by shifting between javascript, twitter and all the stuff his client doesn’t care about, very often in a single sentence.

Was the client interested in all that? Possibly, but I imagine he was more interested in telling the designer why he needs a website and what aim it is supposed to achieve.

So what was the designer supposed to do?
Shut up and let the client speak. He should have sit there and find out about clients plans. What his company does, what expectations does the client have for his website. He should have gathered links to clients direct competition, also links to sites that the client likes.

Initial meeting is not about you, it is not about how well you know the latest internet/social networking trends either. It is about convincing the client that you understand his plans and needs. And that you can deliver those.

And the best way to achieve that is to shut up, listen and ask questions only if you don’t know something.

Business directory

I always get surprised looks from students of our workshops when I mention this.
But the truth is that design in itself is only a part of the process. In fact it’s not even the first thing you should be taking care in the project.

It’s hard to realize that sometimes. And thus the surprised looks. Nonetheless when you do you immediately start noticing how many more items you have to take care of. How many only design-related decisions you have to make.

And I don’t mean coding or project management.

I mean all the other aspects that make the website work and be friendly to the user.

So what are your responsibilities as a web guru then?
Well, to begin at the beginning

1. Creating the sites structure
Very often clients hand you over their desired site structure. A site map showing how they would like their site to be organized. And sometimes they have it right but often perfectly wrong. It is your job to point out any potential errors and create a proper structure that will be easy to use and navigate.

2. Designing the user experience
Every day we get more and more used to the fact that web interfaces communicate with us. They tell us where we are and what we can do there. Or what we did wrong and how can we fix that. One of your tasks is to design the user experience on the site, write potential commands and error messages and any other communication with the user.

This may also mean any automated emails sent by the site to the user and so on.

3. Overlooking the content
It is not your job to write content for the site, by all means. But indicating to the client what sort of content they need, where would it go and how it should be constructed, is. And doing so would greatly help both you and the client with completing the project.

4. Designing the interface
Following all the decisions that have been made you need to create artwork that will sell the clients idea and provide a nice environment for the user.

5. Deciding on technical requirements
Very often clients won’t know what they need. They have a problem and they come to you to solve it. And sometimes that involves making a decision on technical matters Some of them might include CMS systems, or choosing a specific E-Commerce system or deciding on building a custom system to run the site.

6. Testing
This is one of the most overlooked ones. As part of the process you need to test the site and make sure not only that it works but also that users can use it without any prior training.

7. Providing support
As you probably know already, most projects don’t end with the site launch. And the support is very often dragging the project on and on. It is also your responsibility to make sure that there is a proper valuation to the site. And even if you were working with a developer, you will need to liaise between the client and him.

So your job is really much more than creating graphics. And when you go through the list above again you will notice how small part on it the design itself plays.

But the truth is that design is also the biggest part of the process. So don’t worry the you will be spending too much time doing things you don’t want to. You will have to look after them but they should not take that much of your time.

The design will. But that’s good, isn’t it?

Andy from Cool Amsterdam Apartments

I love such stories behind print artworks. They are retold, they inspire and very often they live longer than the piece itself.  And they are fun to listen, at least to designers anyway.

But what do you hear when it comes to the web though? There aren’t many stories about websites. Not as exciting anyway. On one end there’s the technology, the boring bit. On the other, there are numbers, statistics. Metrics that prove whether the layout you designed was successful or not and whether the site brought any more business to your client. Or was it just another website on the net that simply was just there?

And the only stories you commonly hear are those about websites that failed. Sites that costed huge amounts of money but never really brought any business to their owners.

I guess as a designer you don’t want any of your websites to appear in one of those stories, right?

The good news is that it’s not difficult to do so. Just like with print design there is a set of skills and knowledge you need to master and you’re on a straight path to designing beautiful and successful sites. Of course it’s hard work but hey, it’s just like with anything in life, isn’t it?

So cutting to the chase, what knowledge you should master to call yourself a professional web designer?

1. You have to understand how the web works and realize one important thing, users do not visit your sites for their design. They come there for information and that is the only thing that matters to them. The only people interested solely in your designs are your fellow designers. And you generally do not design for them.

2. Realize that usability, the way you make it easy for your visitor to use the site is the most crucial thing in web design. In other words, if your users can’t browse through the site easily they won’t stay and won’t come back. Imagine also what sort of image of the company such website gives.

3.  Learn the technology behind the web. How information is passed between server and a browser.
Just like with print design where you have to learn the basics of print processes, on the web you need to know how the technology running the show works.

In addition you should learn as much as you can, mainly through experience I am afraid, of how various browsers interpret the code and what are their limitations. This comes usually handy when you design a site that uses modern technologies but you still want it to work on older browsers.

4.  Discover how to organize content on the website. It simply works much differently than with print.
Learn how users read on the web, what helps them to scan your copy and find information most relevant to what they are looking for. Also you should know what makes great copy on the web and how to write a content that focuses on fulfilling your users needs.

5. In addition to that learn how to structure the entire site. Just so that your user not only will enjoy reading the copy but also will have no problems finding all the information they need. Master how to make the whole experience of moving from one information to the other seamless and enjoyable.

6.  Understand how the code works. If you design the site you should have at least a basic understanding of it. That knowledge will show you what you can do and what might cause you problems. But by all means you don’t have to know how to code.

7. It is also good to investigate actual limitations of the design material you can use. Fonts, colors and images all work differently than with print. Once you know the difference the whole process of design will become much easier for you. Otherwise there may be some not so nice surprises waiting for you at the end of the road.

7+. And most importantly, view and analyze other sites. Especially those really successful ones. Just like when you were learning your graphic design by viewing works by design masters. But pay more attention to structure, navigation and usability not to design elements on those sites. This is what your visitors will be paying attention on your sites too.

Mastering this knowledge will have another major effect on your web design skills apart from making your sites work for your client. It will also build a great confidence in your skills. And there is nothing worse that be working on a project and feeling that you may not be good enough to actually be doing it.

So, over the next couple of weeks I will be posting here roundups of links to great articles and tutorials on each of the skills mentioned in the article. These should give you a good foundation to start mastering what you need to know to call yourself a professional web designer.

But for now, if you have any interesting stories behind websites please share them with us in comments here.

Jimmy from Short Stay Apartments in Amsterdam

The only thing is that at this very moment things can go very wrong. And they often do.
But to begin at the beginning. How the usual launch of the site looks like? In most cases you simply put the site live, make sure that everything works and let the client know. What do they do usually then? Send a newsletter to all their client base informing them of the new site. Or they do that beforehand telling them to start logging in from a certain day to check the new site.

And then the unthinkable happens. Something on the site doesn’t work, there are typos omitted in the final check. A script you used doesn’t want to run properly on some older browsers, some layout elements fall apart on them as well. And the worst thing is that you and the client find out all that from the site’s first visitors. The very people who came there invited by the newsletter.

There’s probably no point even in saying how stressful and embarrassing at the same time it is. Many of you have probably gone through that and still have trembles at a thought of that call you got from a client.

So, how could this be avoided?

Simply, persuade your client to hold off with announcing the site on the day of the launch. Instead do a soft launch. Put the site live but instead of sending a newsletter invite only few people to check the site out.  Close friends, relatives or coworkers are usually the best. They will definitely be honest and put effort in testing the site thoroughly.

Alternatively put the site live on a test server and give those people access to it. Either way is good as long as you have real visitors using the site. Such live user tests may reveal many bugs and typos, things you or the client couldn’t spot in the pre-launch madness.

Give yourself and the client time to correct those. Usually a week of live testing is enough, although with bigger sites you may need more time.

And remember, you will always skip a typo while testing yourself. No matter how much time you will spend testing the site on all browsers you will still skip some functionality or layout issues. Let’s face it, very often this is all done as a last element of the process and you may be rushing through it.

Real users on the other hand will pick all those things straight away.

And only then, after testing period is over and all those small bits corrected let your client send that newsletter and launch the site officially. And at this moment there is much greater chance that your client will not hear about bugs and site elements that do not work from their clients.
Actually he might not hear about them at all.

The problem really is that it is hard to estimate the time required to complete such a project, especially without a much of experience. If I ask any of my colleagues-designers how long does it take them to create a specific brochure, they most likely will know at least an approx. time.

When I am asked by my colleagues and clients about the time involved in creating a website though, all I can say is that it is a long process and unlike a common belief it doesn’t happen in a day.

So instead of trying to find the answer to that question I decided to shortlist some main steps involved in creating a website. I deliberately skipped few steps, mainly ones relating to website’s promotion as they usually happen after the site was handed over, although still form part of the creation process. But as said, we don’t need to discuss them right now.

Step 1. Research
This step involves finding out as much as possible about the client, why they need a website and what is the purpose of this site. Another thing to research is the client’s industry and competition. And in order to do this right a designer needs to spend some time with the client, on meetings and phone. And do a bit of homework too.

Step 2. Designing the Structure
Before any sketches can be created a designer needs to plan how the website is going to work. He needs to design the whole navigation (ideally create a flow chart for it). Then once that’s done it should be tested by running it by other people. Just to see if it’s not going to be confusing to a visitor.

Step 3. Finding Out Technical Requirements
Another step is to figure out technical requirements for the site. Will it be a static site or powered by a Content Management System. If so, which system would be used? What are it’s limitations and what are design restrictions?
Also, if it’s a CMS site, navigation and site structure has to be prepared for that. (I wrote more about it in my previous article)

Step 4. Brainstorming ideas and creating artwork.
Once all the research is research done and the structure worked out it’s time to get some ideas together. This step, as you probably already know may take a considerable amount of time. It usually begins with many sketches and slowly builds it’s way to the one worth developing further.

Step 5. Design testing and proofing with the client
Design in itself is brilliant but if it doesn’t work there is no point in using it really. Therefore the artwork should be reviewed and tested. Ideally some basic usability report should be written for it as well. This doesn’t cost much and may help a lot with finding out some potential problems before the site goes for coding.

Step 6. Coding
Once the artwork is approved it now needs to be turned into a working code. If the site is a static one, all pages will be coded in with all content on them already. If this is a CMS site though, all templates that are used to create pages from the CMS will be created and upon their approval the system will be applied to them.

Step 7. Usability testing
At this stage a working version of the site is being tested on real users to see if it’s easy to use and if users have no problems finding the information on it. This usually doesn’t take much time but results of those tests may affect the next and final step of the process and time involved in completing it.

Step 8. Revisions and putting the site live
Once all usability testing report is back it is time to make a decision which of the recommendations should be implemented at this stage, those are then corrected on the site and after a final content population the site is ready to go live.

There are other elements in each step but my point here was not to list them all. Rather to show how complicated the process is and that it simply has to take a considerable amount of time.

And of course, the larger the website, the longer each of those steps takes to complete.

But I could not talk technology with them, I was losing them with every sentence that was spoken.

So instead of writing the article I planned (by the way it’s not dropped, I just slightly pushed it further in my schedule) I decided to start introducing some of the web terminology. Even as a refresher for myself.

So we are starting off this week with FOLD.

What is this “fold” then?
Many of you have already heard the term in reference to newspaper design. Because of the physical dimensions of a broadsheet newspaper, it is folded. The first page of a newspaper is where the “big” stories of the issue are because it is the best possible placement. Readers have to flip the paper over (or unfold it) to see what else is in the issue, therefore there is a chance that someone will miss it.

In web design it is the position on a page where users have to begin to scroll in order to see the content placed there. Elements that are positioned “below the fold” are not seen when the page first loads.

For a very long time many people believed that it’s important to design pages that don’t scroll, although this view is most commonly now regarded as invalid since since the outbreak of blogs and websites with long pages we are now used to scrolling as part of our web experience.

Is fold significant at all.

In a way yes although not as much as it was years ago. These days we are well used to scrolling and even better, we know that certain content, if we want to access it requires scrolling (comments on blogs or references in online magazines and newspapers to name just few examples)

The general rule of thumb is that visitors should be able to understand what the site is about from the information included above the fold.

And this is where the main significance of the fold lies. In order to make the user to scroll down we first have to sell our website to him and we can do this only with content he can access the second he lands on a page.

The same goes for any ads or any important information you place within the layout, they will obviously have a better chance to be seen if they are above the fold.

Other than that fold is not as significant as it used to be but it is still something to remember about when you create your layouts.

Unfortunately when it comes to web design things are never that easy. I have actually seen many graphic designers falling into a trap of such thinking and as a result deciding on using Flash to create simple html sites. Of course those sites contain hardly any code apart from the one that flash outputs while publishing the movie. And even that code is not always to a standard required from a professional website.

Yet those sites are easy to create and thus are very tempting from a designers point of view. All that you need to learn is how to create artwork in Flash, which with it’s current integration into the CS suite is now easier than ever.

As much as success-promising the whole idea seems to be there is one thing worth remembering. By doing so you under-deliver to your client offering him a solution that is not up to a standard he requested. This ultimately is damaging not only to your reputation but the whole industry’s as well.

So what happens if you don’t want to learn CSS and plan to focus on designing websites only?

Decide on outsource coding to a front-end developer. As obvious as it seems still there are many designers who don’t go for that. Not at the early stages of their venture into the web design anyway. One of the reasons seem to be cost but the other I noticed is a fear of losing control over a final project.

The latter is especially true in situation where you may not have enough knowledge in all aspects of designing for web and may feel insecure about handing a project to someone else. In fact though if you find a good and trustworthy front-end developer the quality of your projects will grow significantly and you will gain hugely from the advice and help he can offer.

And when it comes to the first obstacle, a cost, these days front-end development is not expensive anymore and you usually pay for the technology you use, therefore you can control costs even during the design stage by using the technology you can afford.

The most important thing to remember is that to no matter how much you dread coding and all those technology related aspects of web do not cut corners and go for something you know, rather team up with someone who can compliment what you do and help you to deliver projects to a highest web standards.

Let’s face it, there is nothing worse than a website which is nicely designed but put together in an amateurish way.

For us creatives design is a very natural thing, all it usually takes is to let creative juices flow and a great artwork is on the way. It is no different with web although I can see many designers having a problem with accepting certain limitations of a design material they can use.

When it comes to print there are no borders with techniques and design devices we can use, starting with fonts, colors to paper sizes and print techniques, overprints and many more. And in spite of how helpful those things are in our work they are also the ones that are limited when it comes to designing for web.

A knowledge of them and reasons why those limitations exist may help you with your work so here is a list of those limitations with short explanation to each.

1. Fonts
As already mentioned, while designing for print you can use as many fonts as you like, you can match them to fit perfectly the design, to bring the artwork up, to make the text stand out or even look like another graphical element or even create your own custom ones. The sky is the limit.
Web on the other hand limits the number of fonts to use to a handful of them and in most cases they are the ones you wouldn’t like to use.

The reason for limiting fonts that you can safely use comes from technology, those are the fonts that are most common on your visitors computers and will render similarly between different machines and operating systems. If a non web-safe font is used, it will be replaced by one of those web standard fonts anyway.

2. Image size, quality and shape
You probably know very well how frustrating is to receive a low-res image and being almost forced to use it on a brochure or any other print material. It is the moment when most designers dread and then happily discuss on various web forums as a client/job nightmare.

This all changes significantly with design for web. The rule is that the bigger size the image the longer it’s load time and hence it is imperative to use small size images on your websites. That in itself creates another problem. Reducing a size means reducing a quality. In order for images to be good to be used on websites they have to be optimizes for web and their quality reduced.

The good news here is that average users screens can display images at 72dpi which means that your large images when they would load finally would still look not far from their 72dpi equivalent.

There is one other aspect of working with images for your web projects. When images are prepared for the web, they are either squares or rectangles. Even if the graphic is of an obscure shape it will still be outputted as a square with a background color filling rest of an image.

Therefore if you think of a website as outputted of blocks it will make working on your projects much easier.

3. Canvas size.
Unlike print where you can choose any canvas size and shape, when it comes to web there are some limitations regarding the width of the page. The standard is to use canvas somewhere between 800 and 1024 pixels wide.

There is no limit to a height of a page although of course making it too long may not go well with many users.

5. Hierarchy of material
In your print materials even an important element can be placed at the bottom of the page and simply be made prominent by applying various design devices to it.

With web the general rule is that anything that’s important should be placed above the fold, that’s the position on a Web page where the majority of browsers viewing the page will begin to scroll therefore considering a hierarchy of your material is even more important than with print.

6. The final output – browsers compatibility
This is a probably most commonly known difference although it is worth mentioning here.
When sending files for print a designer has a relatively good idea on how it will look printed out, how colors will be printed and how other print effects will be outputted. With large print jobs a proofs are very often required to ensure that the printed piece matches the artwork.

Web on the other hand gives a very limited control over how the user sees a website. The design you created can differ significantly between different browsers, operating systems and user computers. Quite a lot of cross browser testing has to be done in order to ensure that design looks consistently on all major browsers yet still there may be elements that will not work as planned, especially on older browsers if the technology used is newer that them.

And while this all may seem putting off there is one aspect to those limitations that is almost like a blessing for most designers. They force web conventions into your designs making your projects easier to use for the visitor.

And believe me, there is no worse website than the one breaking web conventions making it almost impossible for the visitor to use.

small business web tools

Each day I would read about it and tried to analyze websites in order to find a sense behind the way they were made. Each day was a struggle with having to change the way I viewed design and the way I thought of project development.

And looking at those times now I start to think that if only someone had told me the simple truth that if something works great with print it is likely to be lousy on web my life would be much much easier.
Unfortunately no one did and I had to learn it the hard way through projects that didn’t work, by losing clients and contracts and in few cases gaining not the reputation I wanted (I managed to rebuild it though).

So if you are thinking of or even already entered the world of web design there are some differences between web and print I would like you to remember.

1. Your readers use the two media in two different ways

Print is 2-dimensional. As designers you are used to the way readers view printed materials, their eyes follow the information in two directions, horizontally and vertically and hence you can play with tension between elements, their placement and interact them against one another.

With web it is all about scrolling. Your visitors go only in one direction, they scroll pages up and down and this has to be reflected in your designs. Of course pages still are viewed horizontally although by the very fact how much we are used to scrolling webpages by default we go for vertical direction anyway.

2. On the web users navigate through site to access all the material, with print you can guide them through it.

Navigation is what web is all about. Since you really have 1-direction only you have to build tension on the web by creating an user experience, providing your visitors with all the information they are looking for and keeping that information well organized. It is your job to design the experience not knowing how the visitor will travel through the site.

On the contrary, with print in most cases the only navigation the reader experiences is turning pages. With this linearity you can easily predict where the user will go and what information he will see next.

3. Users expectations are different

Another aspect of web is it’s interactivity. With print you present information flat and static on a page. Very often the only interaction with the reader is a call to action placed on a page.

When designing for web you have to remember that users expect some form of interactivity. They want to be guided through the website, they want to be asked to make a decision and it is your job is to create tasks with no wrong answer.

But how do you implement this knowledge into your design process? It just doesn’t sound easy to do, to suddenly change the way you think of a project and the way you approach design challenge, doesn’t it?

The solution is actually very simple.

Firstly, get into a habit of analyzing websites, 15 minutes or two sites a day will do but do it consciously. Observe how you browse them, how they are structured and soon enough you will discover those differences in real life.

Then, before you begin to work on your next website, plan it. Draw a sitemap, simply list all pages and subpages with a short note what’s on them. It will help you to create a user experience and you will know what goes where. It will also help you change your mind set about web design, that the structure of information and how your visitors interacts with it comes first, design is second.

And only once that’s done, start sketching your designs.

creative ways to make money online