Usability and the utility, not the visual design, determine the success or failure of a web-site. Since it’s your visitors who will be trying and viewing everything you lay out, it makes maximizing their experience your ultimate goal.  User-centric design has become a standard approach for successful and profit-oriented web design. No matter how pretty things look, if the usability isn’t there, it may as well not exist.

With that said, let’s get into ten effective principals of web design.

Principles Of Effective Web Design

1. Don’t make users think

According to Krug’s first law of usability, the web-page should be obvious and self-explanatory. It’s your job to know any questions users may have and answer them before they are posed. Otherwise your site could alienate people. After all, why would they take the time to email you a question when they could just find another website that works?

The key here is intuitive navigating. Leave nothing to chance and make things as simple and streamlined as possible.

Let’s take a look at the above example. Beyondis.co.uk claims to be “beyond channels, beyond products, beyond distribution”. What does that even mean though? Since users tend to explore web-sites according to the “F”-pattern, these three statements would be the first things users see upon entering the page.

Although the design itself is simple enough, to understand what the page is about the user needs to search for the answer. This is an unnecessary question mark. It’s designer’s task to make sure that the number of question marks is close to 0. There is a visual explanation to the right but even that doesn’t make all that much sense. Note, you probably hadn’t heard of this website before this article. There is a reason for that.

ExpressionEngine uses the very same structure to Beyondis, but avoids those unnecessary question marks. The slogan also becomes functional as users are provided with options to try the service and download the free version. Not bad.

2. Don’t squander the patience of your users

This one is tied closely to the former. Any number of things can squander the patience of your users, be it cluttery design or popups. Also, try to keep your user requirements minimal. The less action is required from users to test a service, the more likely a random visitor is to actually try it out. Users want to test out your service, not fill out long webforms. Those are annoying.  It’s not reasonable to force users to enter an email address to test the feature. After all, you want them coming back of their own accord.

As Ryan Singer — the developer of the 37Signals team — states, users would probably be eager to provide an email address if they were asked for it after they’d seen your features at work. They need to have some kind of an idea what they’ll be getting in return for your private information.

Stikkit is a perfect example for a user-friendly service which requires almost nothing from the visitor. This is rather unobtrusive and comforting. Exactly how you want your users to feel on your web site.

The site above didn’t get the memo. Although it takes only thirty seconds to fill out, that’s thirty seconds that could be used to surf to another site. Remember that.

3. Manage to focus the attention of your users

As web-sites provide both static and dynamic content, some aspects of the interface attract more attention than others. For instance, images are more eye-catching than text(On average.) Corollary, bold sentences catch more attention than plain text.

The human eye is an interesting beast and tends to notice patterns of movement. This is why video-based advertisements are extremely annoying and distracting, however they do capture attention. This is why marketers love them.

Humanized.com perfectly uses the principle of focus. Look at how the word “free” sticks out like a beautiful sore thumb. This directs users to a “free” service which will hopefully leading them to purchase the “not free” service.

4. Strive for feature exposure

Modern web sites are usually criticized for holding the user’s hands too often. Simple 1-2-3 directions, large buttons, you know what we mean. However, why is this a bad thing? Whatever gets them to the end goal, right?

Dibusoft.com combines visual appeal with clear site structure. Notice the nine simple to read site navigations.

Let the users see what is available to click on. It doesn’t really matter how this is achieved. It matters that the content is fully understood within a second. Remember the zero questions formula from earlier. If this means a little hand holding, so be it. It’s the Internet, not college.

5. Make use of effective writing

As the Web is different from print, it is a must to adjust writing habits to match your users. Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language just may be ignored. Hey wait! That’s no fun.

Talk business. Avoid cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names. For instance, if you describe a service and want users to create an account, “sign up” is better than “start now!” which is again better than “explore our services”. Just keep things simple. Don’t over “cute” it and you’ll be fine.

Eleven2.com gets directly to the point. No cute words, no exaggerated statements. Instead they just throw the price right there in the middle of the screen. What else do you need to know?

6. Strive for simplicity

Keep it simple. Keep it simple. Keep it simple. Users are rarely on a site to enjoy the design.  They are usually suffering through the design in order to find some information. Remember that in all facets of web design.

Crcbus provides visitors with a clean and simple design. It’s in Italian, so that’s a slight problem for this example, but be assured, the information is presented accurately and simply. No hunting around for peculiar links here. That should be your goal as well.

Here is another good example:

Finch clearly presents information without overcrowding or making users squint their eyes in frustration. Strive for this goal.

7. Don’t be afraid of the white space

It’s really difficult to overestimate the importance of white space. It helps reduce cognitive load, and makes it possible to perceive whatever information you place on the screen. When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information. White space helps them do just that. Maybe your tenth grade art teacher was right after all.

Complex structures are harder to read, scan, analyze and work with. If you have the choice between separating two design segments by a visible line or by some whitespace, go with the white space.

Cameron.io uses white space as a primary design element. The result is a well-scannable layout which places the content front and center. This is always a good thing.

8. Communicate effectively with a “visible language”

In a renowned paper on visual communication, Aaron Marcus states three fundamental principles involved in the use of that mythical “visible language”

• Organize: provide the user with a clear and consistent conceptual structure. Consistency, screen layout, relationships and navigability are important concepts of organization. The same conventions and rules should be applied to all elements.
• Economize: do the most with the least amount of cues and visual elements. Four major points to be considered: simplicity, clarity, distinctiveness, and emphasis. Simplicity includes only the elements that are most important for communication. Clarity: all components should be designed so their meaning is not ambiguous. Distinctiveness: the important properties of the necessary elements should be distinguishable. Emphasis: the most important elements should be easily perceived.
• Communicate: match the presentation to the capabilities of the user. The user interface must keep in balance legibility, readability, typography, symbolism, multiple views, and color or texture in order to communicate successfully.

9. Conventional design is ok

Conventional design does not always mean boring design. In fact, conventions are useful. They reduce the learning curve to figure out how things work because your users has seen it all before. For instance, it would be a usability nightmare if all web-sites had different visual presentation of RSS-feeds. The brain gravitates toward the familiar.

With conventions you can gain confidence, trust, reliability and prove some credibility. See Nielsen’s Usability Alertbox for more information.

Look at the above example. It’s Amazon. You know where to click. You know what buttons do what. Now look again. It’s in Russian. The thing is, that doesn’t matter. You can still navigate the site. That’s perfect conventional web design.

10. Test early, test often

This principal should be applied to every web design project. Usability tests tend to provide crucial insight that nothing else seems to catch, until it’s too late. You don’t want your users catching the mistakes.

Some important points to keep in mind:

• Testing one user is better than testing none. Do whatever you can.
• if you find a mistake, fix it, then test again.
• Even if nothing is wrong, the results are usable. You know what to do now.
• If you can  afford it, or if you know anybody, independent testers can be an invaluable tool.

And that’s it. Do you have any tips for great web design? Drop us a line.

Adobe AIR is the little platform that could. It allows you to build efficient and state-of-the-art desktop apps that work on any operation system. Cool!

In the last few years, oodles of AIR apps have came down the pike, helping you do just about everything under the sun. For this post, I’m going to focus on applications intended for web and graphic designers.

I’m gonna split the list up into sections, which are:

• Creating Graphics
• Design-Specific Tools
• Editing Images
• Taking Screenshots
• Productivity Tools
• Image Sharing Tools
• Multimedia Apps

Creating Graphics

1. Splashup Light:

Splashup Light is a casual desktop based image editor. It has tons of features and allows you to do anything you want to photos with simplicity and ease.

2. Color Lovers:

Color Lovers offers a desktop color finder that searches through the proprietary database in order to locate that stubborn color. You can search from over 1 million named colors and 300,000 user created color palettes.

3. Contrast-A:

Contrast-A allows you to check for contrast, experiment with a variety of color combinations and even interact with a 3 dimensional RGB color space.

4. LiveBrush:

LiveBrush is a drawing app that lets you create amazing graphics by combining simple motion controls with a series of brush styles. It’s really cool.

5. Icon Generator:

Icon Generator allows you to create icons of your choosing, even if you can’t draw. Simply select a default icon and make simple changes until it suits your fancy.

6. e2vector:

e2vector is a powerful illustration tool, featuring layers, masks, gradients, intersection and path splicing. It even allows you to import/export SVG files.

7. ColorPicker:

Using ColorPicker allows you to choose a color from a grid or design a color using a series of easy-to-use sliders. This is essential to you designers out there. Why stick to premade colors?

8. ColorBrowser:

ColorBrowser is a simple app that lets you organize your favorite color palettes in whatever fashion you choose. It also lets you import color palettes that you have created elsewhere using handy ASE files.

9. Kuler:

Kuler is an extremely popular application. It lets you generate color themes forr any project and also browse through thousands of themes created by the thriving community. Experiment with endless variations with no hassle. Live the dream.

10. Random Pattern:

A cool app that creates color patterns based on a set of given parameters.

Design-Specific Tools

11. Pixus:

Pixus lets you measure pixels. That’s an oft-forgotten yet essential part of design. It also lets you preview your designs and offers  multi-screen support.

12. FontPicker:

FontPicker is a simple tool that lets you scroll through a list of any font installed on your computer. Then you can pick one. Several methods of scrolling are available. Perfect for you unorganized types out there.

13. PixDif:

PixDif also lets you measure pixels. This handy app doesn’t stop there, however. It also lets you measure the difference between two design elements and tweak the alpha/opacity of said image.

14. Em Calculator:

Finally, there is a calculator to measure em. Em is an important element of design, after all. Easy and useful.

15. HtmlTextEditor:

HtmlTextEditor caters to that most basic need of any web designer, the writing of Html code. It also supoorts CDATA wrapping. Html will also change automatically when you make changes to the rich text.

16. iPixer:

iPxer allows you to create useful interactive flash content using any standard image. This is great for presentations and the like. The sky is the limit here.

17. OBO Site GatherAIR:

OBO Site GatherAIR is a simple website generation too. It allows you to create Html templates. It’s easy to use and also lets you drag and drop SWF files into said template.

18. Boks:

Boks is an app that allows you to work visually with the Blueprint CSS Framework. Drag and drop grid elements, preview in your browser and even compress your CSS code. Pretty much everything you need.

19. PixelWindow:

PixelWindow is another simple app to measure things on your screen using a handy transparent screen ruler.

20. iPlotz:

iPlotz lets you create wireframe pages and also allows you to make interactive mockups of your website and/or software. This is also perfect for presentations.

21. PixelPerfect:

PixelPerfect is another great app for measuring the size of objects on your screen. It also lets you create, resize, move and close any window you like.

22. DesignView:

DesignView is a handly little application for the design and development of Flex applications. It lets you create a quick layout of your site before you start tweaking that feisty MXML code.

23. Merlin:

Another app intended for disorganized font collectors. Merlin can help you get those fonts in order. It helps by alphabetizing all the fonts and arranging them into folders. Just like the namesake wizard.

24. Caliper:

Caliper is a measuring scale for your screen that can be dragged and rotated through 360 degrees.

Editing Images

25. ImageSizer:

ImageSizer allows you batch resize images and put them in a compressed zip file. You can also use it to to batch rotate, optimize and even rename images. Useful for bloggers who are posting image galleries. Say, this would be great for this one actually.

26. ImageDropr:

ImageDropr is a desktop app that batch unloads sets of images to Flickr. Just drag and drop your images into the application, tag or group tag them and start uploading them to the popular photo-sharing website.

27. XeIMG Image Editor:

XeIMG is an image editor that specializes in effects and filters.  These include blur, sharpen, negative, embossing, black and white and a host of others. Like a minimal easy to use Photoshop.

28. Shrink-o-Matic:

Shrink-o-Matic is a simple application that lets you shrink or resize batch images. It supports Jpeg, Gif and PNG images.

29. JustResizeIt:

Resize is a simple image resizer. Do it one-by-one or batch resize. It doesn’t have a lot of features but it works smoothly and simply.

30. CleVR Stitcher:

CleVR Stitcher is a simple panoramic photo stitcher. Drag and drop those images and the app instantly creates a panorama. Aesthetically pleasing.

31. TiltShift Generator:

If you love re-touching photos, you’ll fall in love with this application. It allows you to create the famous TiltShift(See below) effect with a single click. Eliminates tons of hassle.

Taking Screenshots

32. WebKut:

WebKut is a simple and free desktop applications that allows you to capture screenshots from the web. Cut, copy, drag, erase and a host of other options.

33. Snippage:

Snippage allows you to create snippets from any website and place them right on your desktop.

34. WebSnapshot:

With WebSnapshot you can take thumbnail, browser size or full page snapshots of any website. These snapshots are then automatically saved into a specified folder. Great for scrapbookers.

35. PhotoTable:

PhotoTable is a unique tool to capture images from the web. Simply drag an image from any website to the PhotoTable icon and it will get saved. The ease of use is through the roof.

Productivity Tools

36. AgileAgenda:

AgileAgenda is a GTD tool that plans your schedule for you. Enter some basic facts and let the application work it’s magic.Voila! Instant schedule.

37. Adobe Shortcut App for Creative Suite:

Create and manage all your shortcuts with ease. must have app for Graphic designers.

38. Live Presentations:

Live Presentations allows you to create and save presentations locally and share them online.

39. Ora Time and Expense:

Ora Time is a simple timesheet app. Track the time sheets, generate invoices and tinker with expense reports. You can also use it to generate customizable reports and invoices for your clients. This is what you would call a money saver.

40. Doomi:

Doomi is a simple “to-do” application. It will let you create tasks, set reminders and a host of other useful things.

41. Mindomo:

Mindomo is a mind mapping application that lets you organize new ideas, manage your tasks and goals. This all comes up as a visual field tree. Extremely useful.

42. FEAT:

Freelancer’s Estimation Assistance Tool lets you calculate hourly rates and project estimates. Freelancers unite!

43. Klok:

Klok is a personal time tracking application, like a timesheet at a factory job. Press a button when you start working and press another when you stop. It’s that easy. Great for invoices.

44. Fireworks Auto Backup Utility:

Firefox is a great little browser but it is prone to crashes.  If you hate to lose your work with incidents like that, this app will work like a charm for you. It creates backups of all relevant PNG files instantly.

45. Ephemeris:

Ephemeris is an app for photographers that calculates accurate times of sunset and sunrise. Use it to get that perfect shot.

46. BroadChoice Workspace:

BroadChoice workspace is an AIR based team collaboration app. You can send messages to your team members, share notes and tasks and create separate spaces for separate projects. The perfect intra-office application.

47. ConceptShare Desktop Companion:

ConceptShare lets you upload files, manage works paces and get updates from said work spaces.

Image Sharing Tools

48. zFlick:

A simple yet great app to view and save images from Flickr to your desktop. Simply drag any image from Flickr and drop it onto your desktop to save it. Great!

49. FlickrFlipper:

Another great app to search for photos from Flickr. You can also single out specific users.

50. TinyUploads:

TinyUploads lets you resize and upload images online within seconds. This is great for message boards that doesn’t allow long URLs to be posted. Twitter, too.

51. Flickr Desktop Search:

Flickr Desktop Search is a simple yet effective desktop search tool for Flickr. It does what it says.

52. Snoto:

Snoto lets you browse your recent photos from Flickr, or images uploaded by any other user. You can even view them as a slideshow. Slideshows are what make Flickr great, after all.

53. Destroy Flickr:

Completely hassle-free management of your Flickr account. It doesn’t actually destroy the site, rather it allows you to use it effortlessly.

Multimedia Apps

54. RichFLV:

RichFLV lets you play and edit those crafty FLV files. You can also use the app to convert FLV files to SWF files. It also lets you convert the audio to MP3. Extremely functional.

55. Fractal4D:

Fractal4D is a great app that lets you draw these neat fractal swirls. They can either be saved as simple PNG files or exported as vectors to use in Adobe Illustrator. What else do you need? Fractal swirls!

56. SWF Shot:

SWF Shot allows you to create high-resolution snapshots of your SWF, PNG and JPG content.

57. UVLayer:

UVLayer allows you to organize and play your digital media including photos, videos and games. Your all-in-one media player.

58. Adobe Media Player:

A great media player that lets you play downloaded or streamed media. Highly customizable and no hassle playing.

59. LightBoxer:

LightBoxer gives you a constantly changing showcase of various images as your screensaver.

60. Webcam To GIF:

This is exactly what it sounds like. Convert webcam movies into GIF format.

To say social networking sites are all the rage would be something of an understatement. Privacy issues withstanding, they feature some of the highest traffic on the Internet. So get in on the game! Adorn your website or blog with some of the best and creative social bookmark icon sets around. Here are 30 simply astounding sets to get you started. If you know of any more, please drop them in the comment box.

1. Web 2.0rigami – I Am Paddy

2. Social.me – jwloh

3. Socialize Icon Set – DryIcons

4. Social Icon Set – Stylelion

5. Social Media Mini Iconpack – Komodo Media

6. Nurture Social Icon Set – Smashing Magazine

7. Heart: A Free Social Icon Set – Smashing Magazine

8. Social Icons Made of Wood – webtoolkit4.me

9. Web 2 Icons – Fast Icon

10. Free Vector Social Bookmark Icons

11. 13 free social bookmark icons for your blogs – Edward de Leau

12. IconTexto WebDev Social Bookmark

13. Social Bookmark Iconset: Part II – Vikiwork Studio

14. Social Bookmark Icons – Fast Icon

15. Social Web Buttons – WebFruits Blog

16. Social Web Buttons – Set 2 – WebFruits Blog

17. Social Networking Icons – AODdesign

18. 6 Social Icons – Design Reviver

19. The Leaves Fall – Smashing Magazine

20. Aquaticus.Social – jwloh

21. 34 Social Bookmark Buttons – SoulVisual

22. webtoolkit4.me Icon Set

23. DelliCream Free Social Bookmark Icons

24. DelliCake Free Social Bookmark Icons

25. Social Bookmark Iconset

26. Cheers Social Bokkmark Icon Set – Smashing Magazine

27. Function Free Icon Set

28. Circle Social Bookmark Icons

29. Social Media Icons Pack

30. Handycons

jQuery has been taking web design by storm these past few years. And it’s easy to see why. It’s a fast and concise Javascript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery has changed the way designers use Javascript the world over.

Aside from all of that, jQuery is known for it’s abundant plugin collection. Not a day goes by without some new useful plugins to turn your idea of web design upside down. Whether you want to create a nice image gallery, or to slide things right to left, jQuery can do it. It can also replace the tooltip of element. Tooltip is a great way to show extra information regarding the element you hover your trusty mouse over.

Here are 30 jQuery plugins you can use to make your tooltips more user friendly:

Simpletip

Easy Tooltip

Person Tooltip

Digg Style Sharing Tooltip

Tip Tip

wTooltip

Hernan’s Tooltip Plugin

HTML Tooltips

ThumbHover

bQuery

Simple Tooltip

HoverTips

BetterTip

Bassistance Tooltip

MB Tooltip

ClueTip

webDev Tooltip

Orbital

Horizontal Tooltip

Build a Better Tooltip with jQuery Awesomeness

BluFusion Tooltip

qTip

Flowplayer Tooltip

ProtoTip2

Jgrowl

Ezpz Tooltip

Coda Tooltip

Tipsy

Pop

vTip

And that’s it! As always, if you know of any more send us an email or drop it in the comment box. Happy designing!

Lightbox, and all of it’s various clones, can work magic on your jQuery web design. But where do you even start? There is so much out there and, frankly, most of it is crap. Well, don’t fret. Webrulon has done the searching for you. We’ve scoured, scrubbed and rinsed(?) the Internet to find ten of the most promising Lightbox plugins and Lightbox clone plugins available for jQuery. Without further adieu, here they are:

1. jQuery FancyZoom

Orderlist developed this powerful and versatile jQuery-powered Lightbox clone. More details can be read here.

The code below initializes the plugin:

$(document).ready(function() {
$('a.zoom').fancyZoom({scaleImg: true, closeOnClick: true});
});

Sample HTML code:

<a href="insicdesigns.com"><img src="path/to/image/sample.gif"></a>

$(document).ready(function() {
$("p#test1 a").fancybox();
$("p#test2 a").fancybox({ 'hideOnContentClick': true });
$("p#test3 a").fancybox({
              'zoomSpeedIn': 0,
              'zoomSpeedOut': 0,
              'overlayShow': true
});
});

The trusty login form. A necessary evil, right? Wrong. They need not be evil at all. There are ways to make the extra step your user base goes through to get to your content an enjoyable and aesthetically pleasing experience. The following list showcases creative and functional login form design. Some might surprise you and get you rethinking what that little box is for all over again:

Treemolabs

Visit Source

Yellow Bird Project

Visit Source

Mouse To Minx

Visit Source

Green Globe Ideas

Visit Source

Blendue

Visit Source

Mail Chimp

Visit Source

97 Bottles

Visit Source

Nasibriyani Lounge

Visit Source

Battle

Visit Source

Straw Poll Now

Visit Source

Maple Story

Visit

Source

Survs

Visit Source

Hello How R U

Visit Source

Threadless

Visit Source

Vimeo

Visit Source

Olioboard

Visit Source

Cosmicsoda

Visit Source

Robo

Visit Source

Wakoopa

Visit Source

Ready Photosite

Visit Source

Acrobat

Visit Source

Eat Drink or Die

Visit Source

Converse

Visit Source

My Virtual Paper

Visit Source

Scrap Blog

Visit Source

Original Juan

Visit Source

Nipon War

Visit Source

Accounts Mmosite

Visit Source

Launch Pad 37 Signals

Visit Source

Red Brick Health

Visit Source

Ugs Mag

Visit Source

Joy Max

Visit Source

Corporations. They need a strong brand identity. They just can’t hang around all hully gully and hope consumers notice them. That won’t do at all. How to amp up the brand, though? One way is a snappy logo or design. You know, get the heads turning. Below are 20 usable examples of corporate graphic design intended to turn those noggins. Feel free to do with them as you wish. They might not reinvent your company over night but they could just give you a new idea or two:

20 Corporate Graphic Design Samples

Some fonts just don’t like getting teeny. They get angry and become unreadable. When that happens it’s time to call in the big little guns. Specially designed mini fonts are perfect for situations when you need something smaller than 9 px. These cute lil fonts are extremely popular in flash and flash-based applications, however have yet to catch on in other applications. It’s about time to change all of that. Here are 34 free and truly elegant TrueType mini pixel fonts:

04b-03 (16pt)

Download & Source »
TrueType font, downloads available for MAC & PC.

04b-08 (16pt)

Download & Source »
TrueType font, downloads available for MAC & PC.

04b-21 (21pt)

Download & Source »
TrueType font, downloads available for MAC & PC.

04b-24 (16pt)

Download & Source »
TrueType font, downloads available for MAC & PC.

Pixel Six

Download & Source »
TrueType font, downloads available for MAC & PC.

Cubic Five

Download & Source »
TrueType font, downloads available for MAC & PC.

Square Dance

Download & Source »
TrueType font, downloads available for MAC & PC.

Handy

Download & Source »
TrueType font, downloads available for MAC & PC.

Hellovetica

Download & Source »
TrueType font, downloads available for MAC & PC.

Accent

Download & Source »
TrueType font, downloads available for MAC & PC.

Arma Five Fonts

Download & Source »
TrueType font, downloads available for MAC & PC.

Ronda Seven Fonts

Download & Source »
TrueType font, downloads available for MAC & PC.

Easta Seven Fonts

Download & Source »
TrueType font, downloads available for MAC & PC.

Westa Seven Fonts

Download & Source »
TrueType font, downloads available for MAC & PC.

Tempesta Seven Fonts

Download & Source »
TrueType font, downloads available for MAC & PC.

Charriot

Download & Source »
TrueType font, downloads available for MAC & PC.

Smirnof

Download & Source »
TrueType font, downloads available for MAC & PC.

Silky Wonderland

Download & Source »
TrueType font, downloads available for MAC & PC.

YoungDantes

Download & Source »
TrueType font, downloads available for MAC & PC.

piXelize

Download & Source »
TrueType font, downloads available for MAC & PC.

Everyday

Download & Source »
TrueType font, downloads available for MAC & PC.

BM harry-A10

Download & Source »
TrueType font, downloads available for MAC & PC.

BM mini-A8

Download & Source »
TrueType font, downloads available for MAC & PC.

Semplice Regular (8px)

Download & Source »
TrueType font, downloads available for MAC & PC.

Bavaria Regular (8px)

Download & Source »
TrueType font, downloads available for MAC & PC.

Frucade (8px)

Download & Source »
TrueType font, downloads available for MAC & PC.

Aurora Regular (8px)

Download & Source »
TrueType font, downloads available for MAC & PC.

Marke Eigenbau (8px)

Download & Source »
TrueType font, downloads available for MAC & PC.

Teachers Pet (Sans Serif)

Download & Source »
Sans Serif font, downloads available for MAC & PC.

Kharon4a_v01

Download & Source »
TrueType font, downloads available for MAC & PC.

Fixed v01

Download & Source »
TrueType font, downloads available for MAC & PC.

Kyrou 7 Wide

Download & Source »
TrueType font, downloads available for MAC & PC.

Kyrou 9 Regular

Download & Source »
TrueType font, downloads available for MAC & PC.

Silkscreen

Download & Source »
TrueType font, downloads available for MAC & PC.

Illustration and typography don’t always play nice. When they do, however, it can create some beautiful and compelling imagery. Which is which in this scenario, however? Is a beautiful illustration that also features typography an illustration or, well, a piece of typography? Both. Also, ultimately it doesn’t matter. Beauty is beauty, no matter the name. Read on for 35 of the greatest “typographical illustrations” floating around the web right now. We’ll even feature links to each designer so you can see more of their stuff:

by Michele Angelo

by Michele Angelo

by Nicolas Alexander

by Evan Owen Dennis

by Nick Keppol

by Jordan Metcalf

by Alex Beltechi

by Jesse Hora

by Doug Alves

by Theo Aartsma

by Theo Aartsma

by Narani Kannan

by Studio Kxx

by Fiodor Sumkin

by Colorcubic

by Colorcubic

by Magomed Dovjenko

by Irena Zablotska and Eugene Rudyy

by Irena Zablotska and Eugene Rudyy

by Emil Bertell

by Luke Lucas

by Luke Lucas

‘

by Luke Lucas

by Craig Ward

by Craig Ward

by Craig Ward

by Craig Ward

by Craig Ward

Linsey Levendall and Daniel Orme (Bison)

by Chow Martin

by Narani Kannan

by Vladimir Loginov and Maksim Loginov (HMF)

by Vladimir Loginov and Maksim Loginov (HMF)

by Andy Smith

by Alex Trochut

The following list are sets of great websites that you can easily clip cool color gradients from. Most of the research was done using DeviantArt so alongside each link there will also be a link to the user’s profile. You never know when they might make something else interesting.

Also, be choosy. Don’t just go around downloading gradient sets hully gully. Take your time to find the best ones. Your design will thank you for it. Without further adieu, 36 great color gradient sets:

LadyOak

LadyOak features 67  free gradient sets for Photoshop. You’ll have to register though.

Ultimate Web 2.0 Gradients

File these gradients under “oldies but goodies.” Useful and quick pre-made gradients.

Official Adobe Website – Gradient Section

The one. The only. The official. A handy set of free gradients by the company that started it all. It’s all organized to make it easiest for the users so have at it.

BrushesDownload

This site features hundreds of free gradient sets, in addition to brushes, icons and more. A really great discovery.

Free Photoshop : Free Photoshop Gradients

17 very good gradients can be found here. They support Photoshop (R) CS 3, CS 2, CS 7, 6 and Photoshop (R) Elements 5, 4, 3, 2, 1, PC + MAC OS X.  There are also free styles, brushes, shapes, plugins here.

1000 Free Gradients – Web 2.0 Gradients

It is what it sounds like. 1000 free gradients. Knock yourself out

Free4Photoshop – Free Photoshop Gradients

This site features nine free sets with 30 gradients each.

BioRust – Photoshop Gradients

Biorust is another site that commands registration but it is worth it. The website also offers free fonts, actions, shapes, patterns, website templates – be sure to check them out too in download section.

Gradient Image Maker

DeviantArt sets:

BOLD gradient pack by Kip0130

Shattereds Gradients by shattereddesigns07

Gold gradient by ademmm

Apple Gradients by mppagano

Soft gradient by ademmm

4 gradients by Kip0130

MP: Underwater Gradients by millepetit

50 Golden Metal Gradients by Adoralyna

Web 2.0 Photoshop gradients by verbaska

Emerald Dragon Ps Gradients by ElvenSword

Landscape Ps Gradients by ElvenSword

Ocean Breeze Psp Gradients by ElvenSword

Chic Sparkles by ElvenSword

Vintage Photoshop Gradients by ElvenSword

Heritage Platinum Ps Gradients by ElvenSword

AKLPs Gradient Pack 1 by AKLP

20 soft yellow gradients by KumquatsLair

20 soft blue gradients by KumquatsLair

20 soft orange gradients by KumquatsLair

Vintage Gradients by ARTiK-NL

51 Gradient Varieties by Liasmani

88 Gradient Varieties by Liasmani

66 Gradient Varieties by Liasmani

43 Gradient Varieties by Liasmani

Gradients 003: Skin Brightener by purplefeen

Retroactive Gradients by magdalena-stock

12 Gradients by kazugfx

That’s it for now! Enjoy, and remember: Each useful gradient pack is like a rare and mysterious unicorn.