Tag Archives: Photoshop

Introduction to Webdesign

You’d like to invest yourself in Webdesign skills?

Here are some ideas to avoid committing common mistakes.


The goal of this article is to give advices to those who may feel lost in what we may call "the web creation processus". I also give my opinions about webdesign.

If you think I’m wrong, on any point discuted in this article, I’d be glad to read your opinion in comments, and discuss about it. What I say is not about established "facts", or the only one truth in this world about webdesign; I only say what I think about it, and god knows I may not be right

What’s your target?

When you design a web template, you should always know where you’re going. Keep in mind what should be the final result of your work, and how it’s going to work for real.

Before starting to work on your concept, be sure to have the most information you can have about it. Tastes of the customer and what how he sees the project, of course, but also a detailed plan of website’s structure, which technologies are going to be used (flash, html, javascript, CMS, etc.), and necessary functionalities.

Webdesign has nothing to do with Web development, languages, will you tell me? Quite the contrary, you’ll design a template in a whole different way if you know all technic details of a project. You’ll certainly work better if you really know what’s going to be the final appearance of the website, not only a bunch of layers in Photoshop. Webdesign is more than that, it’s all about interactivity!

Some people would probably start designing a template on Photoshop, and then having a look to site’s structure and content, etc.

It’s, in my opinion, a big mistake; design must be accomplished after having had a deep look on lots of these questions. Webdesign is not only about esthethics, it’s also about the website in its whole idea, from the beginning to the end, including all facets of ergonomics, information structure, etc.

Ergonomics

Never value an effect, a filter, etc., over ergonomics. Ergonomics is extremly important, always think about it when you’re creating a design. At any step of development, put yourself into a visitor’s shoes, never ignore ergonomic deficiency by lazyness.

Flexibility of the layout

Some designers, when they’re creating a website, completely forget about the use of their layout design in real life. They won’t have necessary thought about its flexibility. Here is a typical example :

If a template is designed in a Photoshop file 1000px large, what will happen if you’re having a look to this "future" website on a giant screen? or a very small one? Did you think about it? Your design will be very different, depending on which background is used beyond layout zone. Is the website centered, aligned to left, aligned to right ? etc.

Use of web typography

The main tool of Web is text. For instance, don’t design a menu made of images, if the font you used is called Arial, black on white! To play with real text and good CSS could lead you to a very different and much better solution. The text will always be readable no matter what the browser and the platform of visitor are. It’s pretty nice for SEO, it’s natural and it’s downloaded within a split second.

Web typography is beautiful and wise, because easy to use. To decide using a menu made of images, the use should be justified and the font should’nt be a Web font.

Web is not print

Old generations still think that Web is the same as print media… that’s a enormous mistake; Web allows you to live a wonderful experience, because it’s an application, interacting with a user, himself being somewhere in its own different environment.

it’s possible to adapt print media to Web, but you must take the time to do it. To adapt doesn’t mean to copy and paste.

Animated stuff : Flash

Really a lot of people think animated stuff is incredibly sexy. Beside that, a normal HTML website looks dead, boring. Lots of proof are there to proove that animated elements are often distracting the user during his user experience. Sometimes, it’s really getting on their nerves (loops, music), especially when they come back a second, a third, a 20th time on the website. The best example for that is Flash intros, what a pain in the ass!

Always ask yourself if Flash is really needed on your website. Flash must not be decorative, it must bring a big user experience advantage, that justifies all its inconvenients. If you use Flash to do something you could do with HTML + Javascript, it’s suicide.

Flash isn’t pretty SEO-friendly. Google is now able to read text in Flash files, but cannot if there are dynamic imports, and there are some other problems like that… It’s possible to simulate HTML pages with Flash, but still there, that much trouble must be justified by very good reasons!

Do you agree with things discuted in this article? What’s your opinion?

Get inspiration everyday

Like everything, you will not reinvent the wheel. Lots of directories are dedicated to nice CSS websites and nice Flash websites. Could be a good idea to have a look on a regular basis, to see what are last fashions, it’s not evil.

Here is list of CSS galleries :

Note : it is a RSS feed, so it keeps updating alone.

Create a favicon, a customised icon

A favicon is an icon for your website. You can see it at left of the address bar and in your bookmarks. A favicon permits you to add customisation and personnality to your website.

How to create a favicon for your website? Very easy and quick!

  1. Use a digital photo sofware, (as Photoshop, Gimp, Corel Draw, Paint, …) and create an image 64×64 pixels. You may also make it 32×32 pixels, or 16×16 pixels, but 64×64 is for a favicon better.
  2. Save-it as ICO or PNG format, or use this online tool. Internet Explorer 6 will only recognize ICO files.
  3. Add this between <head> and </head> in HTML :



You only have to replace mon_favicon.png by the name of your favicon file… that’s it!