Back when Mickey Mouse was drawn by Walt Disney in 1928, it was all pencil and paper, and the frequent use of the ever dependable eraser. More than 80 years has passed and yet we still see Mickey Mouse cartoons all around the world.

That 80+ years has also brought advances in computer technology and software which now allows us to move away from the pencil, paper and the ever dependable eraser, to advanced drawing applications and input (drawing) devices. In this edition/article, we’ll be featuring the best 40+ tutorials on drawing cartoons with Adobe Illustrator and we hope it would expand your creativity and imagination to be the next Walt Disney.

Here are some related post you might be interested:

• 12 Sites To Create Cartoon Characters of Yourself
• 50 Websites For Free Vector Images Download
• Free Unique Cartoon and Comic Fonts

Full list after jump.

Happy Sun Character
Learn how to create fun sun character tutorial in Illustrator. This intermediate tutorial is great for logos, children illustrations, and other projects relating to climate change. Moreover, you can easily apply this tutorial to other illustrations, logos, and projects!

Cute Baby Seal
Simple tutorial to teach you how to create a super cute baby seal. At the end of tutorial you will get really nice, cute cartoon seal character.

Cartoon Duck
This tutorial will take you through basic shapes, using basic tools ie pathfinder, knife and eyedropper tools to create a cute duck character.

Furry Vector Monster
Follow these steps in Adobe Illustrator to create your very own super cute fuzzy monster character. We’ll be working with the basic shapes to start, then use a variety of gradients to add depth. We can then finish it off with some detailed fur effects to really lift the design from the screen.

Stinking Zombie Flesh-Eater
In this tutorial, you will learn how to create a cartoon zombie in Illustrator. Starting by creating a fresh corpse, we will then ‘yuck’ it up using a number of techniques.

Cute Hippo
This tutorial will show you how to create cute Hippo Character using simple shapes and a really simple effective drawing technique . This technique has been adopted from recent addition to the store of Animal Head Graphic Set , latest addition to the store.

Owl DiNG
In this tutorial we will walk through taking a pencil sketch into Illustrator and creating vector artwork. Then we’ll bounce over to Photoshop and add some details and give it a washed look.

LeBron James Cartoon Character
In this tutorial, you will learn how using Adobe Illustrator create vector cartoons. Learn how to create Lebron James Cartoon Character.

Leprechaun for St. Patrick’s Day
Create yourself a wee Leprechaun for St. Patricks Day 2009 with this Illustrator tutorial. Easy and interesting Illustrator tutorial.

Cartoon Character with Expressive Lines
This tutorial covers the necessary steps for creating a colored multicolor cartoon character that includes shadings.

Cute Emo Kid

In this tutorial we will go through the process of drawing cute cartoon character. The concept is based on the Emo trend, we will go trough all the steps from sketch to full color vector.

Cute Panda Bear Face Icon
How to create a cute panda bear face icon all from ellipses. The great part about this tutorial, is that you can easily apply the techniques to other icons, illustrations, logos, or other projects.

Gang of Vector Ninjas

Constructing a group of cool vector ninja characters using just the basic shapes and a variety of simple tools, making it a good start for Illustrator beginners.

Cute Bunny Vector Character
This tutorial uses simple shapes and gradients that are easy to apply to other character illustrations.

Cartoon Snail
Lean how to draw snail in Adobe Illustrator with some easy steps. Learn how to with Illustrator basic tools create cute snail.

Killer Chainsaw Bunny Character
This tutorial shows you how to build a Bucket ‘o’ Thought character and add a dynamic background effect.

Cute Vector Monster
Follow this Adobe Illustrator walkthrough on the creation of a cute little vector monster character, beginning with a quick pencil sketch on paper.

Grumpy Dude
Create grumpy dude in Adobe Illustrator with the brush tool. In this tutorial you will learn some digital drawing tips and how to fix little mistakes after you’ve drawn your stroke.

Fat Cat Vector
This tutorial aims to guide you from sketchbook to screen; a “Fat Cat” doodled with biro translated into a neat vector caricature. Intermediate knowledge of Adobe Illustrator is advised.

Freddy the Fish
Follow this tutorial to create your own vector character – Freddy the Fish.

Vector Pirate Cartoon Character
By firstly using the power of pen and paper a character design is created, which is then scanned into the computer to use as a base for tracing with Adobe Illustrator. The final outcome is a colourful cartoon character in vector format!

Twisted Monkey Studio Mascot
In this tutorial author will explain the process that he followed at the time of designing by order the mascot in vector format for Twisted Monkey Studios, producers of horror films.

Blob Monster – The Scream
It is really simple to create Blob Monster and doesn’t take long to complete. This technique can also be used for nearly any type of simple shape / monster.

How to Create a Web Site Mascot
In this tutorial, author will give an overview of how developed a character from the initial brief through to the final site mascot and then to go on to create several poses for different parts of the site.

Create Your Own Monster
In this Adobe Illustrator tutorial author will take you through the process of creating a completely unique, memorable monster that’s not at all humanoid in form.

Adding Dimension to Your Characters
In this tutorial author will show you how to add the illusion of dimension to your vector illustrations by combining the effects of Adobe Illustrator’s versatile linear and radial gradients.

Creating Bart Simpson Vector Character in Illustrator
This is a short beginner tutorial. You will use Layers, utilize the Pen Tool and its sister tools, such as the Convert Anchor Point Tool, Direct Selection Tool, etc, to draw and colorize a vector Bart Simpson in Adobe Illustrator.

How to Create a Vector Illustration and Prepare it for Micro-Stock Sale
This tutorial details a professional workflow for creating vector illustrations and prepping the artwork for Micro-Stock Sales. Author also included a bunch of time-saving tools and tips as well.

Creating Convincing Characters
In this tutorial, you’ll learn some basic skills for converting your character from a pencil doodle to a complete, fully-coloured image – learning some crucial Illustrator skills along the way.

Symmetrical Illustration: Thug Bunny!
This tutorial will go through the method of using symmetry in your artwork. Learn how to do half the work but still get the full benefit from your artwork. We’ll also feature a plugin for AI that speeds up your build time and cover the topic of “Opacity Masks.”

Patch Illustration 2
The following tutorial will show how author go about creating a set of NBA licensed embroidery patches featuring portraits of many of the leagues greatest players.

Basic Shading and Lighting
This tutorial goes over the elementary fundamentals when it comes to shading and lighting within a digital illustration.

Create A Vector Art Twitter Bird Character Icon In Adobe Illustrator
This tutorial will walk you through the steps from sketch to vector in creating an original cartoon-style character vector illustration.

Vector Tutorial: Anime Coloring
In this tutorial will be detailed explain how in Adobe Illustrator coloring sketches, in this tutorial author will use anime sketch.

Adobe Illustrator Cartoon Bug Tutorial
Here is one more cartoon characters tutorial in Illustrator. This time you will learn how to create nice fly cartoon.

Adobe Illustrator Cartoon Tutorial with a Wacom Tablet
In this Illustrator tutorial author will explain how using Wacom tablet you can at first draw cartoon sketch and than create vector cartoon.

Adding Gradients to Illustrations in Adobe Illustrator
In this tutorial you will learn how to use gradient tool in Illustrator. Author will explain how to add gradient to illustrations.

Monster Character Series Part 1
First of two Spoongraphics mini-series of tutorials on how to create a set of simple monster characters. This is very simple tutorial, so if you begginer of Illustrator, you can learn some basic tools.

Monster Character Series Part 2
Here is second Illustrator tutorial from Spoongraphics mini-series of monsters tutorials where you will take a look at the Dumb Blue Sucker Monster! Again, using mostly the basic tools and shapes making the tutorial suitable for beginners to Illustrator.

Create a Twitter Style Bird Mascot
Using some basic shapes, effects, and gradients author will show you how to create a Twitter mascot for your blog or website.

Maintaining Rhythm and Flow in Vector Character Design
In this tutorial you will break down the basic process of creating a character from sketching through to the final vector file. Whether you’re interested in creating vector mascots for branding design, or making interesting characters to use in your animations, you’ll find these techniques helpful.

Create a Traditional Japanese Koi Carp Illustration
Koi Carp have been painted and illustrated by the Japanese for centuries and are familiar to people all over the world. This tutorial will take the intermediate Adobe Illustrator user through the techniques and processes needed to imitate what the Japanese have perfected.

A Cow As Chinese New Year Zodiac For 2009
At the begining of 2009 – Cow year, Kailoon.com create special new year Illustrator tutorial, where you can learn how to draw 2009 year symbol – Cow. Very interesting tutorial and result is amazing – very cute Cow .

The Making of a Chocolate Bar Character.
In this tutorial Author take the concept from sketch through to vector final. You will learn how to create sweet cartoon character – Chocolate bar character.

Character Illustration
The following tutorial will walk you through a project, a character design for Fanta soda to use in their Halloween promotion.

Ilias Sounas’ Condomunity Member Illustration Tutorial
It’s basically a character design tutorial like many others out there – just that Author wanted it to be more like an illustration and possibly also an rss icon. Author picked 5 illustrators to hand in an artwork in their own typical style.

How to Create a Cute, 3D, Vector Robot
If you want to learn how to create a rounded robot character from sketch to finished vector art, then we have an awesome tutorial for you.

This can be extremely useful for readers, as it provides quick and direct information about the designer, or the company behind the site.

These introductions are generally highlighted by the use of large text, positioned at the top of the site, and always catch the visitor’s eye. They give a more personal feeling to the site and tend to replace the traditional taglines under a logo for example.

Digitalmash

Matt Dempsey

Chris Merritt

Deaxon

etonDIGITAL

Nine Lion Design

Frisk Design

Andrew Bradshaw

Studio3K

The449

Winnie Lim

Muhammad Uzair Usman

Pallian Creative

Brad Colbow

Skylar Anderson

Style Division

Iceous Design

Brian Wilkons

Travis Isaacs

Alex Carabi

Viktor Jarnheimer

Mike Precious

The Site Guy

David Hellmann

Kerry Nehil

Waqas Ashraf

Jamison Banham

Albertlo Design

Frederica Cau

Bryan Le

Travis J. Beck

Fredrik Sorlie

45royale

Alessandro Cavallo

Eldesign

Nick Hand

Matt Radel

Alexander Kaiser

CSS Layout

Jason Reed

Alex Cohaniuc

Kreativity Design

Evan Eckard

Lifetree

Matt Hamm

Fred Yates

Digimurai

Indiqo Media

Chris Hortsch

Humza Ijaz

Bill C. English

Which one was your favorite? Feel free to share any other examples that you may have seen.

Effective packaging design breaks away from the standard rules and conventions that we are accustomed to, giving the product a unique edge to stand out from the rest.

The packaging should appeal to your target market. It’s also vital to ensure that you’re conveying the necessary information about the contents and quality of the product, while triggering the desired emotion in your customer.

Here are 50 beautifully designed packages that you can draw inspiration from.//

Which ones are your favorites? How does package design influence your decision on a product? Please share your comments with us!

Cheat sheets and reference guides are useful for both beginners and advanced web professionals.

They can be used to help you remember syntax or as a tool to aid in memorization.

In this post, we aim to cover the reference guides for all of the most commonly used platforms, software and coding languages.

Below you’ll find a compilation of the 30 most useful and well-organized cheat sheets, checklists and reference guides.

If you know of a useful cheat sheet that we haven’t covered here, please share the link in the comments’ section at the end of the article.

//

1. 25-Point Website Usability Checklist

Usability is a central concern for any web developer. The 25-Point Website Usability Checklist is a simple step-by-step list that can help your website achieve maximum usability.

Four major components are covered in this checklist: accessibility, identity, navigation and content. The list is a printable PDF and contains a rating system and space for comments.

Download the 25-Point Website Usability Checklist

2. Browser Compatibility Table

This is a great reference guide to ensure browser compatibility.

Below is an extract from a table that contains a list of various CSS rules and their compatibility with common browsers and operating systems. With a quick glance, the designer or developer can note which CSS properties should be used or avoided.

The table also offers an interactive feature that highlights the row your cursor is on. This makes pinpointing the compatibility of a specific CSS property much easier.

Go to the Browser Compatibility Table

3. Web Standards Checklist

A website that is compliant with W3C’s standards will be more usable and search-engine friendly than one that is not.

There are a number of ways to ensure that a website is standards-compliant; one way is to use a checklist.

This checklist contains a chronological list of factors to consider while building a website.

Download The Web Standards Checklist

4. Search Engine Optimization Cheat Sheet

Search Engine Optimization (SEO) is very important if a website is to be successful. This cheat sheet may seem to be for beginners, but it holds valuable information for reference and education. The ten categories are SEO rules at the coding level.

The ten essential categories for good optimization are: important HTML tags, search engine indexing limits, title tag syntax, common canonical issues, 301 redirects on Apache, search engine robot user agents, common robot traps to avoid, robot meta tags syntax, robots.txt syntax and site map syntax.

Included in each category is further explanation and an example.

The cheat sheet can be downloaded as a two-page printer-friendly PDF.

Download the Web Developer’s SEO Cheat Sheet

5. Tweet Sheet 2

Because Twitter is fast becoming a mainstream news feed, using it to your website’s advantage is important.

Tweet Sheet is a fairly simple cheat sheet about Twitter use and syntax, created by Jason Theodor. Tweet Sheet includes Twitter’s mobile URL and text numbers, personal commands, mobile commands, user name commands, tracking commands and information on Twitter applications and tools.

Version 2 is offered in PDF form, a change from the simple image in Version 1. The second version is a grid of smaller cheat sheets, with a cut-out line so that it can easily be shared with friends or posted in other locations.

Download Tweet Sheet 2

6. XHTML Cheat Sheet v1.03

This XHTML cheat sheet is excellent for XHTML coders. Along with many basic attributes, this two-page grid includes references that even experienced web professionals would find useful.

Three types of elements are defined in this cheat sheet: block, inline and table elements. The miscellaneous section includes 22 additional elements. Each row contains the name, description and attributes of each of the elements available for use.

More references are on the side, including %attrs, %focus, input types, link types, deprecated elements, HTML ASCII entities and more. Being so detailed, this is a great tool for anyone who uses XHTML frequently.

Download the XHTML Cheat Sheet v1.03

7. CSS Cheat Sheet

The CSS Cheat Sheet is a two-page PDF and is the most detailed CSS reference guide available. It contains a lot of information and is great as a printed reference.

Sections you may find useful are the ones on the CSS box model, selectors, pseudo-elements and pseudo-classes, colors, text properties and layout properties.

Download the CSS Cheat Sheet

8. Blueprint Framework and Blueprint CSS Cheat Sheet

The Blueprint CSS framework is a great shortcut for designers. The developers of this tool explain:

“Blueprint is a CSS framework that aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plug-ins and even a style sheet for printing.”

To download the blueprint framework, go to BlueprintCSS.org

Paired with the framework is the Blueprint CSS cheat sheet to help shorten development time. The cheat sheet is well laid out, nicely color-coded and detailed. It works in sync with the framework and was made with designers in mind, featuring a visual representation of a 950 pixel-wide grid system, a detailed list of Blueprint features and call and syntax examples.

Download the Blueprint CSS Cheat Sheet.

9. Mixing Typefaces

This PDF is an excellent reference for designers who don’t want to spend a lot of time figuring out whether two or more fonts will work well together. This tool enables designers to choose the perfect typography combination.

Although the cheat sheet was created in 1992, most of the widely used web fonts are present. As the image above shows, a list of fonts is repeated along the top and left side.

A number from 1 to 3 appears where each pair intersects. 1 means that the two fonts are compatible, 2 means that with proper implementation the two fonts could work well together, and 3 means that they will clash.

Download the Mixing Typefaces PDF

10. Common Fonts for all Versions of Windows, and Mac Equivalents

While this guide isn’t exhaustive, it’s a perfect quick reference tool for choosing the typography for a new website. All 18 font groups listed are web safe and cross-browser compatible.

All of the fonts are grouped together with syntax: Windows version, Mac version, font family. The bottom of the page has very specific information on using fonts on different operating systems and browsers and even has a screenshot of each scenario.

Although this web page is already well known in the web designer community, we felt it was important to include on this list.

Download Common Fonts for all Versions of Windows, and Mac Equivalents

11. Official Adobe Photoshop CS4 Reference

The official Adobe Reference guide is available online and in PDF form. While not exactly a “quick” reference guide, it is essential for anyone who uses Photoshop professionally.

Download Adobe Photoshop CS4 Help Guide Online

Download the Adobe Photoshop CS4 Help Guide PDF

12. Adobe Photoshop CS4 Keyboard Shortcuts

This is the keyboard shortcuts cheat sheet for the newest version of Photoshop. This four-page guide can help designers cut their production time by as much as half.

For easy navigation, the PDF is arranged according to the main menu in Photoshop, and then under each menu item it lists the shortcuts in alphabetical order. Because PC and Mac have different shortcuts, there are two different reference guides.

Download the PC version | Download the Mac version

13. Adobe Flash CS4 Keyboard Shortcuts

This is a keyboard shortcuts guide for Adobe Flash CS4. This PDF is also arranged to reflect the Flash CS4 menu, but the list of shortcuts, rather than being in alphabetical order, is arranged according to the application’s menu listing, too. This cheat sheet even has a friendly graphic at the top with the menu order presented in Flash.

As with most Adobe keyboard shortcut cheat sheets, both PC and Mac versions are available.

Download the PC version | Download the Mac version

14. ActionScript 2.0 to 3.0 Migration Cheat Sheet

This cheat sheet covers both ActionScript 2.0 and ActionScript 3.0 and is organized to help those who need to switch to 3.0. Below is a short extract from the six-page PDF.

The functions and classes of ActionScript 2.0 are to the left of each section, followed by their equivalents in ActionScript 3.0. This cheat sheet is great for anyone transitioning to 3.0 or learning ActionScript.

Download the ActionScript 2.0 to 3.0 Migration Cheat Sheet

15. Adobe Dreamweaver CS4 Keyboard Shortcuts

This is another guide in the family of cheat sheets for Adobe, this one for Dreamweaver CS4 keyboard shortcuts. It was made by the creator of the Flash CS4 sheet and so has many of the same features.

The cheat sheet also follows the exact menu structure of Dreamweaver CS4 and has the same graphic at the top showing the menu order.

Unfortunately, a Mac version of this cheat sheet is still in the works; only the PC version is available at this time.

Either way, it is a great cheat sheet and could be easily adapted into a Mac version. For most shortcuts, you would just have to replace Control with the Command key. Keep checking the cheat sheet’s page for the release of the Mac version.

Download the Dreamweaver CS4 Keyboard Shortcuts PDF

16. WordPress Help Sheet

The WordPress Help Sheet is the most useful cheat sheet if you are a WordPress theme developer. It is a quick reference guide for the most commonly used WordPress snippets.

Only four categories are covered in this guide, but the simplicity of this sheet makes it so appealing.

Only the most needed and commonly used snippets are included, making them all easy to find. The four sections include: file names of a basic WordPress theme, header snippets, all other template snippets and commonly used extras.

Download the WordPress Help Sheet

17. Advanced WordPress Help Sheet

For those who create WordPress themes regularly, WPCandy has created an advanced help sheet. It contains commonly used snippets for themes that require added functionality.

The three-page PDF covers a wide range of snippets, such as for content going only on the front page, styling for certain categories, unique images for each category, dynamic page titles, query posts and more.

Any designer who creates professional WordPress themes should have this help sheet at hand. Most of the snippets are required in professional themes.

Download the Advanced WordPress Help Sheet

18. WordPress Theme Development Checklist

The WordPress Theme Development Checklist is an extensive checklist in nine parts. The checklist covers general topics (like theme information and screenshots), blog components (like RSS feeds), timestamps, as well as category and page navigation. Below is an example of the first half.

This checklist can be used while creating a WordPress theme or to help finalize one. As extensive as it is, it’s only one page and can be easily printed when it comes time to develop a new theme.

Download the WordPress Theme Development Checklist

19. JavaScript Cheat Sheet

Several of the cheat sheets featured here are from AddedBytes.com, because of the detailed and exceptionally high quality of the resources there. The first one on the AddedBytes list is the JavaScript cheat sheet.

This cheat sheet is logically organized into DOM methods, functions, regular expressions, etc. It’s easy to use and a great reference for all common JavaScript uses.

The guide is not only excellent for JavaScript beginners (covering items as basic as the syntax for putting JavaScript into HTML) but is also suited to programmers at an advanced level (referring to more advanced JavaScript functionality).

Download the JavaScript Cheat Sheet

20. Regular Expressions Cheat Sheet (v2)

Although some references to Regular Expressions are in the above JavaScript cheat sheet, this one is more detailed. Now in version 2, this cheat sheet has additional material, including information for those who may not be familiar with Regular Expressions.

Although we’ve positioned this entry just below the JavaScript cheat sheet, this PDF is not a guide to any specific language, and so would be great for developers who do not code in any specific language (or who code in more than one language).

Download the Regular Expressions Cheat Sheet

21. jQuery Visual Map

Although the jQuery Visual Map is not a printable reference like most of the other cheat sheets on this list, it is still a great tool for referencing, learning jQuery and grabbing snippets.

The tool’s interactive nature makes finding exactly what you need easy, and code is included in all of the examples for easy copying and pasting. This guide is ultimately an interactive jQuery manual.

Download jQuery Visual Map

22. MooTools Cheat Sheet

Those who prefer the MooTools JavaScript framework to jQuery may find this cheat sheet useful. This colorful and detailed reference guide includes every commonly used feature of MooTools 1.2.

The references are compact, yet the “pseudo-code” serves perfectly as illustration. Within the one-page PDF are 22 sections of reference material.

In addition to the older version, the updated cheat sheet now contains documentation for Core, Native, Class, Element, Utilities and Request.

Download the MooTools 1.2 Cheat Sheet

23. Prototype 1.6.0.2 Cheat Sheet

This one-page informative PDF is a great resource for those using Prototype.js and includes a visual reference for offsets and dimensions.

The modules are in a logical order, with the most commonly used ones in the top left and less common ones in the bottom right. The page is printable and easy to use as a desk-side reference guide.

Download the Prototype 1.6.0.2 Cheat Sheet

24. Python

This one-page cheat sheet is a wonderful reference tool if you code mainly in Python.

The 11 sections that make up the cheat sheet are system variables, string methods, datetime methods, time methods, date formatting, sys.argv, OS variables, list methods, file methods, class special methods, indexes and slices.

This is a convenient all-in-one general reference for anyone who codes in Python or is trying to learn Python. There are also some side notes and general pseudo-code.

Download the Python Cheat Sheet

25. mod_rewrite Cheat Sheet (v2)

URL rewriting can improve your website’s usability, search functionality and navigation cleanliness.

The mod_rewrite cheat sheet has everything from basic regular expression syntax to listing flags for the RewriteRule and RewriteCond directives. It also provides examples and general syntax so that you don’t have to be a mod_rewrite expert to use the PDF.

Download the mod_rewrite cheat sheet

26. PHP Cheat Sheet (V2)

This one-page cheat sheet is a full reference for the PHP programming language. It is better suited to those who already know how to code in PHP and serves as a reminder of certain syntax and names of functions and variables.

Now in its second edition, this cheat sheet is better organized and has new components, giving it a total of nine sections: array functions, regular expression functions, date formatting, regular expression syntax, string functions, file system functions, PCRE modifiers, date and time functions and fopen() modes.

Download the PHP Cheat Sheet

27. SQL Server Cheat Sheet

This handy, one-page cheat sheet provides quick reference for the SQL server.

Included in the 14 sections are: functions, syntax for creating a function, date parts, syntax for creating a trigger and syntax for creating a stored procedure.

It is available for download as a PDF or PNG file.

Download the SQL Server Cheat Sheet

28. MySQL Cheat Sheet

This cheat sheet is a great reference for anyone who frequently uses MySQL or PHP with MySQL. It contains the most commonly used MySQL functions in PHP, data types and ranges and sample select queries.

Along the side of the main cheat sheet are various keywords and functions used in MySQL: mathematical keywords, date and time keywords, group words, control flow, string, comparison, cast and more.

No need to memorize the exact names of MySQL functions or full range of each data type; just download the PDF or PNG version of the MySQL cheat sheet to have on hand.

Download the MySQL cheat sheet

29. Ruby on Rails Cheat Sheet

This Ruby on Rails one-page printable reference is a useful go-to guide for anyone who uses Ruby on Rails extensively.

Included in the cheat sheet are five main sections and a few side sections containing methods. The main section features a directory structure, predefined variables in Ruby, reserved keywords, regular expression syntax and a side note reminder of methods.

In addition to the center blocks is a list of methods along the side, arranged in the following categories: strings, regex, time, arrays, validation and enumerable mixin.

Download the Ruby on Rails cheat sheet

30. ASP/VBScript Cheat Sheet

The last resource on our list is the ASP/VBScript cheat sheet, for anyone who is an ASP developer.

Similar in layout to many of the other cheat sheets on AddedBytes, this one is well organized and contains crucial, often-forgotten information for the ASP developer.

The cheat sheet includes regular expressions, date function arguments, redirect with 301 header, file inclusion, function argument orders, file modes, common LCID modes, constants, methods, properties, functions and collections.

Download the ASP/VBScript cheat sheet

Compiled exclusively for WDD by Kayla Knight.

Which cheat sheets do you use the most? Please share other favorite cheat sheets that we may have missed in the comments’ area below…

As designers, we all know that a minimalist design can achieve beautiful results.

Still, many designers have trouble creating one; either they have a hard time making a page with so few elements look good or the final result just doesn’t look “complete.”

There are many articles on the Web about minimalism and this article aims to help you achieve a minimalist design that is beautiful but not bare.

What Is Minimalist Design?

Minimalist design has been described as design at its most basic, stripped of superfluous elements, colors, shapes and textures.

Its purpose is to make the content stand out and be the focal point. From a visual standpoint, minimalist design is meant to be calming and to bring the mind down to the basics.

The design movement began in Switzerland and was then applied to a variety of media: graphic design, architecture, music, literature, painting and, more recently, web design.

Although minimalist design took off decades ago, the early days of the Internet did not show it. Even without the rotating logos, marquees and bright colors, website designs were cluttered and overbearing.

We’ll go over the basic principles of minimalist design. But even if you choose not to pursue a minimalist aesthetic, the lessons here can help you simplify your design, whatever your style.

Less Is More

As mentioned, minimalism brings the most important content to the forefront and minimizes distractions for the user. If a page has too many elements, the viewer will be confused about where to look or misinterpret the priority of each element. A minimalist design puts the focus squarely on the content.

Any splash of color on a black-and-white design, for example, is sure to get the user’s attention. The color itself becomes the focal point. Let’s look at a specific example:

You’ve probably seen this kind of design before: plain white background, one block of content and one graphic element.

The graphic element brings color, texture and shape. It is clearly the most important element on the page, and it defines the designer’s brand and identity.

With the complexity of this particular graphic element, more content on this page would have made it less noticeable, and less important. Keeping the content to a minimum, the designer has achieved the perfect balance.

How to Minimize Content

The first step to creating a minimalist design, or just simplifying a layout, is not simply to cut out most of the graphics, but rather to rethink the content and strip it to the bare requirements. Only then will the most important elements on the page achieve their intended effect.

Just as you would plan any website, write down what content you need: logo, introduction, navigation, etc. Cut out anything else that is not essential. Throw out as much as possible.

Below are some elements you probably do not need. Keep in mind that this is just a guide. Your exact requirements will depend on your particular design. Some of the items below may not be required for your website.

• Icons or graphics for social media, or a social media section at all
• Taglines and supplementary descriptions or introductions
• “Featured,” “Popular” and “Recent” lists (including Twitter and RSS feed lists)
• Pages with more than three major sections (e.g. “Introduction,” “About” and “Services”)
• Secondary navigation pages.

The point here is not to make the website less functional, but rather to cut out unnecessary elements (and thus highlight the necessary ones) or to combine sections into a simpler layout (for example, by incorporating your social media links into the “About” or introductory section).

You could also divide content into separate pages, giving each piece of content more attention.

How to Simplify the Design

Now it’s time to simplify the design as much as possible.

Minimalist designs should have little texture, color, shape, lines, content or type. Go too bare, though, and the design will be boring. Rather than dumping everything out, give the design appeal by making just one important feature the focal point.

Choose what that focus will be, and keep the tips below in mind as you work through your design.

Use a Great Wireframe

In browsing the showcase section below, we see that some designers have added visual interest with subtle bursts of color, unique typography or interesting shapes. Perhaps the most important element they have all relied on, though, is a unique wireframe.

Creating a wireframe for such a bare page requires a bit of extra attention. With the correct wireframe, you can achieve the right hierarchy and organization and create visual interest.

To come up with a wireframe, follow these steps:

• Decide on what content you absolutely need
• In a list, prioritize the content
• Sketch a few wireframes based on your list to experiment with the best visual hierarchy.

When working out the wireframe, consider placement but also visual treatment. For example, if your logo has a color that you do not reuse elsewhere in the design, you have to account for that.

White Space

White space is practically synonymous with minimalism.

No matter how creative you are with it, a minimalist design without plenty of white space is not really minimalist at all. So, be sure to add more white space around elements than you normally would.

The space is needed to balance the few elements that will appear on the page.

Balance, Alignment, Contrast

While much of the load can be carried by white space and a good wireframe, special care should be taken with the fundamentals of design. The three biggest related to minimalism are balance, alignment and contrast.

Be sure that your design adheres to these principles and that it does not need supplementary visual aids to look “finished.”

Keep other basic design principles in mind, too. Review them and experiment with different options to achieve the best result. Check out “The Principles of Design” for more ideas.

When Over-Designing Becomes a Habit

Over-designing sometimes becomes a habit. No matter how hard you try to keep a design simple, it comes out messy and complex. To fix this, we must form new habits.

Try reviewing the tips above before each project to keep them in mind during the process. Focus on developing one habit at a time. For example, work on reducing and simplifying the content before moving on to white space.

If you find yourself in a tough spot thinking, “Something’s missing,” first try taking something out, rather than putting something new in.

Every aspect of minimalism requires a different talent. Your designs will become simpler the more you put these principles into practice.

Taking it further, once you have applied the techniques discussed here, look at the finished product and see if you can find ways to simplify the result even further.

You could focus on areas that you were unsure of during the design process, and you could ask other designers to point out elements you may have missed.

Minimalist Showcase

Below is a brief showcase of minimalist designs. See how each of these implements the principles we have discussed. Also see which ones break our guidelines, and think of why they still work.

1. James Day Photo

2. Killswitch Collective

3. Lonely

4. DBushell

5. XPD.no

6. Toy NY

7. Joshua Serbus

8. Ah-Studio

9. Symour Powell

10. Icon Werk

11. Neil Wilson Architects

12. Non-Format

13. Zaum

14. Checkland Kindlysides

15. Blumenthal

16. Tink London

17. Proud Creative

18. Kimag

19. Bernat Fortet

20. All Day

Some Trends

As you can see, minimalist web design has some clear trends. Being aware of these trends helps us improve our designs in a number of ways.

Not only are we able to take inspiration from the layouts that other designers have worked so hard on, but we can consciously break from these trends to forge our own innovative path.

Let’s discuss a few of these trends in further detail.

Black and White

One of the most noticeable trends is extensive use of black and white. This is obvious enough: color should be simplified along with texture, shape and content. But it can be overdone these days and look a little boring.

Look at a few websites that have defined colors in the showcase above, and see how they stand out from other minimalist designs. Also, think of how they manage to stay minimalist even with such strong use of color. Here’s one example:

Interesting Typography

Typography-based Web design is closely tied to minimalism.

When designers have very little else to excite the user, they often seize on interesting typography. You could even go so far as to use typography as the sole visual element.

This is a daring technique but still a trend in itself. Look for ways to make typography enhance the design while remaining unique.

Flash

A surprising number of minimalist web designs are Flash-based. With so little else for visual stimulation, a design could benefit from subtle animation (such as text fading in and out) without being overpowering.

Also, Flash removes certain limitations in the design process. Unconventional wireframes, typography and other elements can be easier to achieve with Flash than by traditional methods.

Wrapping Up

Minimalist design comes in many forms, and yet we too often see the same form repeated. Trends can become overbearing, and we must fight the urge to imitate while understanding what it is about a trend that makes sense.

In any case, minimalism can be beautiful and will be around for years to come, so learning some of its techniques can be incredibly beneficial, whether for your clients or for your own projects.

And even if you’re not interested in the minimalist style, the lessons and principles involved can help you simplify your designs, which is always a good thing.

Written exclusively for Webdesigner Depot by Kayla Knight.

So, what makes minimalist design so effective, and when should we avoid it?  Please share your comments below…

Fonte: http://www.webdesignerdepot.com/2009/12/minimalist-web-design-when-less-is-more/