Top 5 Web Design Tutorials

Top 5 Web Design Tutorials

Honing your web design skills is the best way to advance personally and professionally. When you thought you knew it all, there are often people that discover quicker and different ways of going about the same solution you are seeking. It can also become an enriching experience to think outside the “screen” and try out a new technique in a field that might not be specifically yours. Learn a thing or two about typography, photography retouching, or perhaps even how to go about making colorful illustrations. You are simply strengthening your designer set of skills, which will make you a more wholesome web design connoisseur and with a higher degree of marketability.

1. Choosing Type
http://ilovetypography.com/2008/04/04/on-choosing-type/

Even though there is not set formula on how and what sort of typography to choose for your web design project, this article will serve as an informative tutorial on how to decipher this touchy subject. Like everything in art, typography is a subjective matter and there is no right or wrong answer. Read on to understand and start applying these concepts to make your web design life a bit easier and enjoyable.

2. Designing a fast loading website
http://www.entheosweb.com/website_design/fast_loading_websites.asp

Designing a fast loading website is probably the most important and logical rule for web designers to follow, right? You would be surprised to learn that a very large majority of professionals and amateurs out there hardly take this very important issue into consideration. Some basic elements to keep in mind are keeping image sizes to a minimum, optimizing images for web, keeping your html code clean (using div’s and css wisely), using Flash sparingly, and constantly check your loading time.

3. Illustrator: Abstract Vector Art
http://www.webdesignerwall.com/tutorials/illustrator-abstract-vector-art/

Get those virtual paintbrushes out and start to have some fun already with your web design! Use these ideas to create different and new backgrounds, buttons and different styling elements. This sweet tutorial, created by Web Designer Wall, points out step by step of this creative technique. All you need are some basic Adobe Illustrator skills (make sure you have CS or above) and an open mind. Be ready to wow friends, and hopefully your boss too, with your new oh-so-cool skills.

4. Swift and Simple Animation
http://www.computerarts.co.uk/tutorials/3d__and__animation/swift_and_simple_animation

The totally rad folks at Computer Arts Magazine have a huge list of free and excellent tutorials available to anyone. This handy tutorial will help you speed up the process of animations (which you can later apply to your web design) by using After Effects Expressions. James Wignall shows us how to animate one object, in this case a peacock and its feathers. You can apply this technique to many other objects or ideas of course. Keep on reading to download the support files and PDF tutorial.

5. Web 2.0 Buttons
http://www.webdesignermag.co.uk/tutorials/create-unique-web-2-0-buttons/

I know we’ve seen Web 2.0 buttons all over the Internet! But are they always good looking? Here’s a simple yet extremely effective tutorial that will make your buttons and web design look hotter than hot.