Design Inspiration &#187; RESOURCES

Sticky Butterscotch UI Kit

Light UI Kit

Clean UI Kit

Creamy GUI

Cute Hire Me Sign

Dark Login / Register Form

Dark UI Kit (Part 1 of 2)

Dark UI kit (Part 2 of 2)

Detailed Download Buttons

Minion UI

Media Toolbar UI

Selection Widget

Shiny Amplifier Knobs

Slider UI

Sliding Twitter & Facebook Counter

Share Buttons

Dark UI – Updated

Mini Clouds Set

Cameras

Dereailed Ui – Mini Set

iOS 5 GUI PSD (iPhone 4S)

iPad GUI PSD Version 2 (Updated)

UI Buttons

Vector Info Buttons (PSD)

Glass Music Player – PSD

Simple Ribbon

Badges and Ribbons

Switch button – PSD

Sleek Ribbon – PSD

Dark Loader

Corner Ribbons

Tablet / Phone User Interface Pro Set V7

Mix n’ Match Download Button Set

Wooden Interface Elements PSD

Psd Web Ribbon Sale Label Vol 1

Retro Web Ribbons Vintage Psd Pack

Open Notebook Design

IllumiTouch UI Kit

UI Bundle

UI Leather Web Elements

Night Club Flyer PSD Template

PSD Stickers

Progress Bar

Subscribe Form

Image Slider

Social Balloon

Little Calendar Widget

Realistic cardboard box icon (PSD)

Address book icon (PSD)

Shopping cart icon (PSD)

Icons-Land.com – Land Of Icons To Stand Out Of The Crowd

Arshad Cini — Wed, 01 Feb 2012 08:03:31 +0000

Have you ever visited the blog ViperChill? If you have you probably know what makes this blog stand out of the crowd. Obviously there is solid content but the main thing that sets this blog apart from others is its icons. ViperChill uses the same pattern of icons – the same little white men throughout the blog. In fact even the colour of those men icons matches the colour theme of his blog – too cool!
ViperChill is one of the best blogs about blogging and earning money online with 90,000 visitors per month.
This is just one example how you can use icons to your advantage.
www.icons-land.com is a website that can help you get beautiful icons for your blog.
They define themselves as:
Icons-Land is an icon design studio that offers icons for you in two ways: Stock Icons and Custom Designed Icons. These icons could be used in software applications, mobile phone and handheld applications, websites, presentations, etc.
The professional method to use icons is to use icons of the same types. Anybody who has used different versions of Windows will know that all their different versions use different types of icons.
Once I had updated my operating system from Windows 98 to Windows XP. A friend of mine immediately identified that I was using the new version when I didn’t even tell him. He identified it from the new style of icons.
Using different styles of icons may make your design look incoherent and inconsistent.
Icons-Land understands this consumer problem and therefore they have manufactured many different forms of icons that you can use in your design. I mean they have designed the same theme of icons in different combinations. One combination contains one type of icons, second contains second type etc.
Below I have shown some example icons. Some details are also mentioned alongside the image.
Vista Style Points of Interest

The above screen-shot shows some Vista style icons that can be used to denote points of interests in maps.
If your work requires dealing with maps, then you may need this set. The icons will make the map look beautiful and interesting.

Vista Style Hardware and Devices

If you deal in electronics like video games, iPods, servers, cables etc. then the hardware and devices icon set is designed for you.

POI Vector Icons

POI here stands for Point of Interest. Yes these icons also will help you mark points of interest in maps but these are vector icons. This means you can re-size and re-scale these icons to suit your design, without worrying about any pixelization i.e. blurring of images.
There are many more icon sets available. Visit the website for more information.
Head over to Icons-Land.com If you’re in need of stock icons, vista icons, transport icons, sports icons, map icons, poi icons.

5 Infographics on Web Accessibility for Designers

Amy Taylor — Tue, 24 Jan 2012 12:48:51 +0000

When you are designing a site you have a hundred little details to keep in mind. But it isn’t all about concept design and launch. It is also about making sure whatever you create has the maximum web accessibility possible for your users. Which is a whole other set of guidelines you have to follow, apart from the design process itself.
Don’t get caught making common pitfalls. Check out these five excellent infographics on web accessibility from top designers in the game.

Web Accessibility for Designers

View Larger
WebAim is a Utah State University based organization dedicated to creating an accessible online world for people with disabilities. In this inforgraphic , they not only explain the ins and outs of accessibility in web design, but they endeavor to show it in practice. Placed on a beautiful grid background, they talk about reading order, contrast, links, font and more. All using moderate colors that show us that you don’t have to go with bright and flash to get your point across.

Accessibility Challenges In Email Design

View Larger
Addressing a challenge often skirted over by design blogs, this typographic uses a retro infromation pamphlet look to talk about the different kinds of disability you will encounter (Visual, Physical and Cognitive/Neurological), and provide helpful statistics on each. Then, they give an eight point breakdown of how to make sure accessibility is handled in emails. They cover one issue that you rarely see, which is harmful content. This includes flashes, patterns and video/audio use that can cause seizures in people with conditions such as epilepsy.

What Is Web Accessibility? Infographic

View Larger
This is an extremely simple infographic that provides a quick four step system for avoiding pitfalls with creating accessible websites. They provide a couple of stats, but mostly keep it about maintaining the highest viewable level for users.

Anatomy Of Effective Web Design

View Larger
This is a highly complex infographic about the breakdown of overall effective web design. The tips and information it provides make is useful for all accessibility, not just for the disabled. It shows you how to come up with a simple, effective design that anyone can view without problems, and so reduces the amount of work you have to put in to creating multiple web page formats and layouts.

Color Contrast

View Larger

Showing the difference between high and low color contrast, and giving tips on using the best tones for your sight’s accessibility, this is a fantastic little infographic about color specifically. This is an important element to design, as those who have vision problems, chronic migraines and colorblindness will have to rely on you to provide them with a site they can easily and safely read.

Conclusion

You should always take these issues into account before starting a design, because a fair percentage of your viewers will have impairments to overcome. What are some of your favorite infographics in this area? Let us know in the comments.

20 Popular CSS Grid Generators to Simplify Design Process

Arshad Cini — Wed, 18 Jan 2012 17:08:45 +0000

Designers can find many online tools to simplfy the design process and CSS Grid layour generator is one of them.The grid system generators create simple grid css frameworks for design and development.In addition some of the css grid generators create custom background file to use in Photoshop,Illustrator,Fireworks etc.

Here is a list of popular Css Grid Generators.

960 Layout System

Gridulator

Page Column Grid Layout Generator

Variable Grid System

Design by Grid

Tiny Fluid Grid

Grid Designer

Grid System Generator

YUI:CSS Grid Builder

CSS Layout Generator

CssPortal CSS Layout Generator

ZURB CSS Grid Builder

NetProtozo Grid Generator

NegativeGrid by Chris Planeta

Gridr Buildrrr

Gridinator

inuit.css

Compact CSS Grid Generator

1200 px Grid System

Blueprint Grid CSS Generator

Collection of Helpful Cheat Sheet Wallpapers for Web Designers and Developers

Arshad Cini — Tue, 17 Jan 2012 15:01:05 +0000

Last year we brought together an ultimate list of cheat sheets and quick references for web designers and developers.Well,all of them were PDF files but this time we have compiled only cheat sheet wallpapers for web designer s and developers.A few of them are updated and i’m sure they will be a time saver for you.

Screen Resolutions Chart

Download this chart and set as your background image to compare different screen resolutions and aspect ratios. Remember to set your background to “center” or the various rectangles won’t be accurate.
Wallpaper Source
1920X1400

Elements of Design Quick Reference Sheet

Wallpaper Source
Grey Version
2560X1600 | 1920X1200 | 1680X1050 | 1440X900 | 1280X800

White Version
2560X1600 | 1920X1200 | 1680X1050 | 1440X900 | 1280X800

Color Theory Quick Reference Poster

Wallpaper Source
1920X1200 | 1680X1050 | 1440X900 | 1280X800

Photoshop Keyboard Shortcuts

Wallpaper Source
1920×1200

Periodic Table of Typefaces

Wallpaper Source
Widescreen: 1920X1200 | 1680X1050 | 1440X900 | 1280X800

Fullscreen (4:3): 1280X1024 | 1024X768

jQuery 1.3 Cheat Sheet Wallpaper

Wallpaper Source
1920X1200 | 1680X1050 | 1440X900

Vim Shortcut Wallpaper

Wallpaper Source
Breathe Background:1280X1080 | 2560X1600

Dark Version:1280X800 | 2560X1600

Light Version:1280X800 | 2560X1600

jQuery Performance Tips Cheat Sheet

Wallpaper Source
1024×768 | 1440×900 | 1280×960 | 1680×1050 | 1900×1200

Unity Tricks Wallpaper

Wallpaper Source
1920X1280

Unity Shortcuts Wallpaper

Wallpaper Source

1680X1050

Drupal 7 Cheat Sheet Desktop Wallpaper

Wallpaper Source
1024X768 | 1280X800 | 1440X900 | 1680×1050 | 1920X1200

A Simple WordPress Help Sheet Wallpaper

Wallpaper Source
2560X1600

The Anatomy of Type

Wallpaper Source
1920X1200

15 Free and Useful Typography eBooks

Arshad Cini — Tue, 10 Jan 2012 14:28:44 +0000

Typography is one of the favorite parts of design and today we have a very valuable collection of free ebooks about typography for every typography lover.If you want to improve yourself or learn something new the below ebooks will really help you.

The Right Font for the Job

Read The E-book

The Typographer’s Glossary

Meet Your Type

Erik Spiekermann’s Typo Tips

Typeface Anatomy

What is OpenType?

Styles,Weights,Widths

Helvetica – Complements and Alternatives

Webfonts

Free Fonts Are Not Always Free

A Practical Guide to Web Typography

27 Page Type Classification eBook

Understanding Typography Concepts

Typography and Readability

Typography Basics