TuTsRUS - All Adobe Tutorials - Photoshop | Illustrator | Encore | Premeire | After Effects » Resources

40 CSS Reference Websites and Resources

Fri, 13 Jan 2012 21:37:45 +0000

If you want to design websites or modify your existing website design, then you need to have at least a basic knowledge of Cascading Style Sheets (CSS). Thankfully, CSS is a very easy language to get to a grip on, however you may find it takes a little more time to master it.

Today we would like to share with you 40 resources that will help you on your CSS journey. We have listed great CSS references and CSS blogs for learning more about the language; not to mention compatibility tables to help you remember how certain browsers handle certain CSS elements. We have also included services that help you generate code and cheat sheets for easy reference of selectors, properties and pseudo-classes. So let’s get to it, shall we?

CSS Reference

1. W3C CSS3 Basic User Interface Module

It’s perhaps not the most user friendly reference available, however the official CSS3 specifications from the World Wide Web Consortium lists everything you ever need to know about CSS.

2. W3 Schools CSS Reference

A great resource that lists every CSS property you can think of. The CSS version of each property (e.g. (CSS1, CSS2 or CSS3) is denoted in the main table together with a basic description of what the property does.

3. SitePoint CSS Reference

As one of the largest webmaster communities on the web, Sitepoint doesn’t disappoint with a great reference for learning CSS. Each property has details of the version it was introduced in, the browser versions it is compatible with and useful examples of how the properties can be applied.

Where the resource really comes into it’s own is the unique play area that each property has. A unique example is given for each property and you can change the HTML and CSS code and see what the outcome will be in real time. It really makes understanding a property you have little experience with that much easier.

4. CSS Dog

A dedicated CSS website that has useful reference pages for CSS properties, CSS shorthand properties and CSS3 selectors.

5. HTML5 CSS Properties

A list of all valid properties of CSS 2.1. Short descriptions, possible values, examples and related properties of each property are all given.

6. Mozilla CSS Reference

An alphabetical list of all CSS properties, pseudo-classes and elements, @-rules, and selectors. The CSS version of each property is listed along with its browser compatibility. It’s well presented and very easy to use.

7. CSS Easy

Finding it difficult to understand how CSS layouts work? You may find CSS Easy useful. Instead of simply listing CSS properties and selectors, CSS Easy encourages you to view code of each layout and examine the HTML and CSS in more detail to help understand how the layout was created.

8. CSS Properties and Values

A one-page reference that lists CSS properties and values with further information about the property on the right hand side of the page.

9. CSS3 Click Chart

Learn dozens of CSS3 tricks by clicking on the property you want to reproduce and viewing the code at the bottom of the page. The browser support for each property, description and link to the World Wide Web Consortium information page are referenced too.

9. Meiert CSS Properties

A CSS property table that is updated regularly. Properties are listed alphabetically and linked to the corresponding W3 information page. The table also details what CSS version the property works with and its initial value.

10. CSS3 Previews

Whilst the preview only lists around a dozen or so properties, each property has a long detailed explanation, examples of how it works and browser compatibility details.

11. CSS Reference

A list of CSS properties from W3 divided into categories. Valid values, short examples and details of whether the property is inherited are all noted.

12. CSS3 Color Names

A list of the 147 colour names that are defined in the CSS3 colour specification. Colours are listed in alphabetical order and an example is shown for reference.

13. CSS 3 Selectors Explained

A long detailed article of CSS3 selectors. The article was written around 5 years ago however you should still find it useful.

Compatibility Tables

14. CSS3 Browser Compatibility Table

A browser compatibility table for CSS3 selectors and properties on Mac and Windows.

15. CSS3 Compatibility table

Shows what version of Internet Explorer, FireFox, Opera, Safari and Google Chrome each CSS3 selector works with.

16. When Can I Use

A fantastic browser compatibility table that shows you what CSS3 elements are supported on desktop and mobile browsers. It includes a large list of filter options such as browser, version, language and more.

CSS Tutorials

17. CSS Basics

A fantastic resource for beginners that will give you a basic understanding of how CSS works. The course is divided into 18 chapters, covering everything from CSS classes to lists and pseudo elements. The whole course can be downloaded in PDF form too.

18. CSS Play

Written by experienced programmer Stuart Nicholls and his wife Fran, CSS Play is a great place to understand how menus, layouts, boxes and other CSS tricks work. You need to view the source of each page to understand how each CSS example works.

19. CSS Tricks

Arguably the best CSS blog online, CSS Tricks is a beautifully designed website from developer Chris Coyier that posts new CSS tricks and techniques every few days.

20. 456 Berea Street

Don’t let the average design full you, 456 Berea Street is a fantastic resource that has close to 400 CSS tutorials.

21. CSS Tutorial

A tutorial website that is geared towards beginners. It walk beginners step by step through the basics of CSS. It also has over 50 video tutorials and several podcasts too.

CSS cheat sheets

22. Veign CSS3 Cheat Sheet

A large CSS3 cheat sheet that organises properties by type. Values for each property are displayed to the right hand side of them. One of the most popular CSS3 cheat sheets available online.

23. Pxleyes Cheat Sheet

Available in landscape (horizontal) and portrait (vertical) mode, this useful cheat sheet shows a selected list of the most useful properties and selectors. It also has a box that displays where content, padding, borders and margins go (very useful for beginners).

24. Sencha CSS3 Cheat Sheet

Shows the new properties that have been added to CSS3. A good resource if you are comfortable with previous versions of CSS and want a cheat sheet for all new additions.

25. CSS Shorthand Cheat Sheet

A user-friendly cheat sheet that is aimed at beginners. 8 topics are covered including margin and padding, backgrounds and fonts.

26. CSS Cheat Sheet (V2)

One of the best CSS cheat sheets available. It displays a box model and lists of the most popular syntax, properties and units by category. Despite cries from a lot of fans, it has not been updated to from CSS2.1 to CSS3.

27. GoSquared CSS2 and CSS3 Cheat Sheets

The CSS2 cheat sheet shows the most popular syntax and properties and a useful box model. Rather than being a replacement, the CSS3 cheat sheet lists all new CSS features so should be used in conjunction with the original.

28. Core CSS (Part 2 & Part 3)

A good series of CSS reference cards. Part 1 covers CSS rationale and use, syntax rules, inheritance and more. Part 2 discusses element selectors, ID selectors, descendent selectors, attribute selectors and combining selectors. Part 3 discusses the CSS visual model, box model, problems with floats and positioning.

Whereas other cheat sheets try and cram everything into one page, the Core CSS series of reference cards aim to explain common problems in more detail.

29. BlueprintCSS Cheat Sheet

A great cheat sheet that users of the BlueprintCSS Framework will find useful. The second page shows a grid for designing layouts, file structures and tools and resources.

30. YUI Library

A cheat sheet for the YUI Library CSS framework. It mainly focuses on grids and fonts.

31. CSS Shorthand Cheat Sheet

Shows properties and example values for margin and padding, borders, backgrounds, fonts, lists and colours.

32. CSS Font Size Reference

The ultimate cheat sheet for styling fonts using CSS. Ems, points and pixels are all shown for easy reference.

33. CSS Shorthand Codes Cheat Sheet

Includes a cheat sheet for shorthand codes, XHTML documents, form tags and an example style.css template. Unfortunately, you need to sign up in order to download the file.

CSS Generators & Testing

34. CSS3 Rule Generator

The Cross-Browser CSS3 Rule Generator that changes the elements on the right hand side as you modify the CSS code on the main page.

35. CSS3 Selectors Test

A test area that runs small tests on CSS selectors to see if they are compatible on your browser.

36. CSS3 Tools

A range of different CSS generator tools that helps you create gradients, transforms, shadows and text strokes.

37. CSS3 Generator

Several different CSS generators in 1. The service allows you to customise text shadows, font faces, columns and more.

38. CSS3 Gradient Generator

The easiest way of creating CSS3 gradients. You can select up to 3 colours in the colour picker. The direction of the gradient and whether the CSS code uses hexadecimal or RGB code can all be altered.

39. CSS Generator

A crude looking CSS generator that gives you the code for the alignment of text and backgrounds, table borders and margins and padding.

40. Ultimate CSS Gradient Generator

A user-friendly CSS gradient generator that has dozens of great looking preset gradients. You can choose the direction of the gradient and there is an option to add IE9 support too.

We hope you’ve enjoyed this list of CSS websites and resources. What’s your favourite useful CSS resource? Please feel free to share it with us in the comments area.

(rb)

Noupe

Resources for Styling Lists

Wed, 27 Jul 2011 21:36:47 +0000

In our continuing quest to listen to our readers and give them what they are looking for, we have a post of resources that we were asked to compile. With the amount of content being shared through the web, so much of it is presented in lists, designers are constantly looking for stylish ways to deliver these listings. Below are some resources and more to help you out in this arena.

We have collected some valuable tools that designers can use to creatively get this done, and have also gathered a showcase of some unique and inspiringly crafted lists. First you can get some interesting ideas for creating lists for your own design projects via the showcase, before you dive into the resource section of the post in order to bring those ideas to life.

(rb)

Noupe Design Blog

A Collection of Retro & Vintage Design Resources

Tue, 12 Jul 2011 21:36:56 +0000

As summer hits and gets underway, many are drawn back to those summer days of our youth. Memories of summer breaks filled with vacation from school, home, and many other places or responsibilities get us in a sort of retrospective mindset. It is with that theme in hand that we have compiled this bountiful resource post for our readers in a retro frame of mind.

Designers dive right in to this collection that is positively overflowing with vintage styled design goodies just waiting to be added into your next design project. From PS brushes to patterns to icons and so much more, this post has got it all! Literally! Well, not literally, but close. So get your toolbox open and ready to add in some design resources that take you back a few decades in style. Enjoy!

Photoshop Brushes

Vintage Ornament & Handwriting Brushes

240 Retro Dynamic Brushes

Retro Diagonals

80′s Kunfu Brushes

Retro Flower Brushes

11 Sketchy Retro Photoshop Brushes

Retro Abstract Circles

UK Stamps

Newspaper Ads From The 60s

14 High Resolution Assorted Maps

Icons

Smashing Retro Icon Set

Retro Vector Icons

Retro Candy: Free Icon Set

Retro Toys: A Free Icon Set

Textures

Retro Wallpaper Textures

6 large retro textures

Vintage Textures and Backgrounds

Colored Vintage Paper

28 High-Res Vintage Postal Textures

Vintage Wallpaper Urban Decay

Patterns

Free Seamless Vector Pattern – Vintage Velvet

Seamless Retro Vectors

Retro Set 4

Pink Petals Seamless Photoshop Pattern

Free Vector and Pixel Pattern – Antique Engraved

More Resources

Retro Splash Photoshop Action

1985 – A Free Vector Pack of Your Favourite 80s Icons

Matchbook Typefaces

35 Retro Photoshop Gradients

Vector Pack: Tres

Vintage: A Free WordPress Theme

41 Custom Photoshop Shapes

Tutorials

How To Create a Retro Style Superman Book Cover

Create a Retro Pop Art in Photoshop

Create a Retro Urban Gig Poster in Photoshop

Design a Retro Styled Poster

Quick Tutorial: Create a Reusable Retro Type Treatment

Illustrator Tutorial: Vector Retro Television

Create Vintage and Grungy Digital Art Work in Photoshop

(rb)

Noupe Design Blog

Sci-fi/Futuristic Digital Works & Resources

Mon, 04 Jul 2011 21:37:12 +0000

One place that designers tend to turn when they are looking for something of an inspirational recharge is to the worlds of science fiction and futuristic fantasy artwork. These rich, highly detailed works tend to be a fantastic testament to the creativity it takes to bring about something spectacular from nothing other than the idea of a world often so unlike our own. Much like designers do whenever we start a new project, the artworks from both the sci-fi and future fantasy realm tend to search the world around us for ‘solutions’ before they creatively reimagine it.

Today’s post is to help get your inspirational wheels turning once again, while simultaneously providing you with some useful resources for taking your imagination into these waters for some projects of your own. Hopefully between the inspired showcase of work and the tutorials plus, you will find enough motivation to start providing some stunning insights into a future or sci-fi world born of your own imagination. Enjoy!

Inspiration

Far from the city by tredowski

Homeworld Ordalla by z-design

Worth enough? by radoxist

Smog by alexiuss

Impossible LOV3 ver.3 by Bluefley

Stone castle archipelago by CassiopeiaArt

Car Trouble by geodex

Abandoned station by your1st

Alpha Centauri by bazze

the gentleman by A-u-R-e-L

Cybertron planet by JJasso

Battlefield by max4ever

nomad by pascalblanche

exodyssey guard by vyle-art

Doctor Who by geodex

Rise and Fall of an Empire by maciejfrolow

Azimuth by attackvector

Undefined Object by maxspider

Portal by arsenixc

Solidarity by Rahll

Bon Voyage by ChristianBeyer

Primacore Station by Yakul

Near Death by Shai

View from Shimada’s Garden by ChristmasSocks

Darkness_concept_VI by Wen-JR

Hellbound by alexiuss

…towers… by tredowski

the Harbor Under Starry Sky by weiweihua

dry dock ver.2 by tredowski

Machinery of the Stars by alexiuss

babymoon by pascalblanche

Plotting course by Tryingtofly

Imperial Pharmaceutic Facility by Sabra74

Introversion by MattDixon

Tutorials

Design an Epic Sci-Fi Style Urban City Scene in Photoshop

Concept Art: Create a Sci-Fi Interior Using Digital Painting Techniques

How to Create a Retro Sci-Fi Computer Game Poster

Photoshop Tutorial: How To Create a Futuristic Sci-Fi Scene

Really cool Eclipse Effect in Photoshop

Photoshop Tutorial: Space Environment

Create Spectacular Sci-Fi Concept Art using Digital Painting Techniques

Resources

Amazing Science Fiction Textures Clipart

Matrix Code NFI Font

Tech Photoshop & GIMP Brushes

Free Photoshop Brushes: Rust and Sci-fi Glow

(rb)

Noupe Design Blog

Useful Resources, Tools and Services for Web Designers

Sat, 18 Jun 2011 01:23:23 +0000

Productivity is a crucial asset of professional Web designers and developers. We regularly look for new resources, tools and services to make the search of these ever-growing techniques easier. Once we have a reasonable number of useful resources, we prepare them in a handy overview for your convenience. In this post we present some of the useful resources and tools for designers and Web developers.

Please don’t hesitate to comment to this post and let us know how exactly you use these tools in your workflow. Please do avoid link dropping and share your insights and your experience instead. A big thank you to all designers and developers out there for releasing and producing useful, valuable resources for all of us to use. We sincerely appreciate it.

Useful Resources and Websites

Method & Craft
Describing itself as “the DVD extras of design,” this site offers a behind-the-scenes look at different designs, including how they were achieved, the techniques used and how the designers have grown in their professional careers.

DesignersMX
This site is dedicated to finding out which tunes keep designers around the globe rolling and get their creative juices flowing. Just sign up, log in and share your own compilation of fresh beats and bright tunes.

Little Big Details
This site features tiny details that help improve the user experience of websites and mobile apps. You can also share your favorite little things on the website. The collection is very useful — with more design examples submitted regularly.

Shady Characters
This blog, owned by Keith Houston, aims to shed light on the history of both well-known and outlandish marks of punctuation. It’s an interesting study in the stories behind the punctuation we use every day.

An Illustrated Guide
This project reviews some of the notable picture books. Guide’s authors, Catherine and Matthew Buchanan, have collected many of them from the last decade. The books are categorized according to cover art styles and reading level.

CV PARADE
This website celebrates the art of the résumé — a great collection of different and unique CVs that might be useful for you if you are about to polish your own CV.

Comic Sans Criminal
The next time you see someone using Comic Sans inappropriately, consider sharing with them a link to this site which lays out the reasons why Comic Sans is misused and offers some helpful alternatives.

Where Do You Want To Work Today?
A simple way for freelancers, contractors and other nomadic workers to check out some great places where they can work in a different environment for a change.

Node Cloud
NodeCloud is a resource directory gathering sites related to Node.js and ordering them by their Alexa traffic, allowing to evaluate relative popularity of a project.

WeekendHacker
This site provides a mailing list you can issue a cry for help for one of those tiny projects that cross your path — whether you’re a designer, developer, or both.

The Phraseology Project
Here you can submit a letter, word or phrase which is then turned into a beautiful design by the website’s founder, Drew Melton, or his colleagues.

Designers & Books
This projects presents short reviews of books that esteemed members of the design community identify as personally important, meaningful, and formative. Designers introduce one or more books that have influenced their ideas and values. You’ll also find members who have created must-read lists for different disciplines in design.

Quotevadis
Quotevadis is a Tumblog that offers quotes from creative and intelligent individuals from both past and present. An excellent replacement for the dusty old “about:blank” page in your browser.

Let’s Swap
In case you’ve had a particular artistic piece hanging around for a while, you could try swapping it with other artists for prints, books, zines, original artwork, tshirts, sculptures, or any other objects.

ideeeas
This project collects brainwaves from people who have brilliant, fancy ideas on any topic. There are posts with popular or useful social ideas that could make the world just a little better.

A Working Library
A great book cover definitely makes for a graceful entrance, but the thought of it disappears as you start reading the book. This website aims to explore the ways we read — without being overtly conscious of the cover design.

The Godfounder
A blog which showcases details that make Web apps successful, in particuliar little details that show designer’s attention to users’ needs.

FPO: For Print Only
A blog dedicated to both visual stimulus and detailing of the development and production of printed matter such as annual reports, books, business cards, stationery suites, collateral materials, posters, packaging and anything else where ink meets substrate.

What Software and Hardware Do Professionals Use?
A useful resource for people who love to keep discovering new tools. Browse these nerdy interviews and guaranteed, you will come across some new wonders, especially because every interviewee explains why they have chosen a particular tool.

Browser Details for Tech Support
When in doubt, send your customers to the website Support Details. Their data will be automatically read out of the browser and sent directly to you via email or will be saved. The free service uses Flash but can also complete its task without it.

The UX Bookmark
A resource for HCI and human factors professionals, usability engineers, interaction designers as well as information architects. You can submit a link if you feel that it would benefit the UX Design Community.

Web Font Hosting Services Reviewed
A good overview of web font hosting services you can always look up when in doubt:

Android Patterns
Design patterns, which are basically reusable solutions for recurring problems, can be found in many design niches. Recently, they’ve also turned up in user interface designs for Android apps. Android Patterns publishes a comprehensive set of interaction patterns that can help you design Android apps.

Useful Tools, Libraries, Plugins

Rapid Prototyping with flickrBomb
flickrBomb is a jQuery plugin that helps you quickly fill your prototypes with relevant content, and not just dull gray placeholder images when making a website.

Unix Terminal/Console/Curses Tools
A nice list of 28 tools for the UNIX Terminal and Console. Some are little-known, some are just too useful to miss, some are pure obscure. You can use your operating system’s package manager to install most of them.

.htaccess tester
A very simple tool that lets you test your .htaccess rewrite rules. Simply fill in the URL that you’re applying the rules to, place the contents of your .htaccess on the larger input area and analyze if the rules are doing what they are supposed to do.

CSS Lint
CSS Lint is a useful tool to help you detect problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.

Log.io
Here is a way how to perform real-time log monitoring in your browser. Harvesters watch log files for changes, send new log messages to the server, which broadcasts to Web clients. You can then create stream and history screens to view and search log messages.

Popuload for Adobe Photoshop
Rather than idly waiting for each processing task in Adobe Photoshop to finish, you can spend that time browsing the latest news feeds. Popuload has been programmed to detect when any Photoshop loading bar appears; it then appends to that loading bar window throughout the duration of the processing time.

Asciiflow: ASCII Flow Diagram Tool
A simple Web based ASCII flow diagram drawing tool which allows you to draw boxes, lines, arrows and type and then export it straight to text or HTML.

Microjs: Micro-Frameworks and Micro-Libraries
Microjs helps you discover the most compact-but-powerful microframeworks, and makes it easy for you to pick one that’ll work for you.

Showoff
Demonstrating your ongoing projects could be a huge pain. In general, your best option is to upload the files to a server somewhere. You could prepare a video or send over a huge package of files or just .zip it somewhere on project collaboration website. But what if you just want to quickly show someone a project you’re working on without sending over the large files? This tool aims to solve this problem. If you’re looking for an alternative, you might want to consider LocalTunnel.

Meld
A visual diff and merge tool that lets you compare two or three files and edit them in place (diffs update dynamically). You can also compare two or three folders and launch file comparisons.

Convert Unix Time
A Unix timestamp (or epoch time) is the number of seconds that have elapsed since January 1, 1970 00:00 UTC. The mission of this site is to convert your timestamp into a human readable format and vice versa. You also might want to check out Epoch Converter.

Drush
This Drupal tool lets you install, download and uninstall modules and much more without even opening a Web browser.

Bones
A WordPress development theme that was created after years of editing and reusing the same template to develop custom sites. A nice, well organized boilerplate for developers of WordPress themes or designers using WordPress in their projects.

Fructose
Fructose is a subset of Ruby that’s designed to be compiled into PHP 5.x. The generated code should run on any PHP version above 5.0. Most major Ruby features are supported, including operator overloading and blocks. Eventually, most of the Ruby standard library will be available to Fructose programs via libfructose.

loads.in
By simply entering the URL here, you can test how fast a webpage loads in a real browser from over 50 locations worldwide.

WriteMaps
WriteMaps is a Web application that allows you to create, edit, and share your sitemaps online.

Wirify
Wirify is a bookmarklet that lets you turn any Web page into a wireframe with a single click. The bookmarklet also helps you get rid of all distractions by blocking out copy, images and ads, letting you take a closer look at the website’s building blocks.

Lorempixum
Hand-selecting and inserting placeholder images in a layout can be a hassle. This tool takes care of that task by providing you with placeholder images for every possible usage, whether for Web design or print layout. Using it is simple: visit the website, pick the URL, define dimensions and category, and insert it in the layout. You can use the “Placeholder Generator,” which lets you specify the size, category and color settings of the placeholder image.

f.lux
This tool makes your display adapt to the lighting of the room you are in, all the time. During sunset, your screen mimics room light, and in the morning the tint resembles sunrise and its natural light. Configuring f.lux is easy: simply tell the control panel what kind of lighting your office has and where you live. The rest is taken care of automatically. The free tool is available for Windows, Mac and Linux.

Solarized
Solarized is a free custom palette of sixteen colors (including four background tones, four “content tones” and eight accent tones). The content and accent tones are visible on both the light and dark backgrounds and are based on established color theory principles.

Useful Services

PayPal Fee Calculator
A PayPal ‘percentage fee’ is determined by which country you are registered in and how much you receive every month via PayPal. The PayPal ‘fixed fee’ is determined by which currency the payment is sent in. This calculator helps you keep an overview of fees as well as currency conversions.

courteous.ly
A helpful way of letting people know your real time email load and when sending mails works best for you.

ifttt (if this, then that)
This tool allows you to create simple “if then” actions based on common activities, and lets ifttt automate them. By triggering an email when the weather forecast predicts rain, this can help remind you to take your umbrella with you. The service is currently in private beta, but you can request an invite.

Unsubscribe.com
A fast way of unsubscribing from any mailing list by simply clicking on the emails you no longer wish to receive.

minutes.io: Take Notes Quickly and Easily
minutes.io lets you take notes in your browser even when you’re offline and waits until you’re online again so you can send and share with others right away.

Doodle: Easy Scheduling
A great way to mutually agree when to meet by simply creating a poll, inviting participants and cofirming the date and time. Free of charge and without registration.

Focus Booster
A simple and elegant application designed to help you eliminate the anxiety of time and enhance your focus and concentration.

Typography Insight iPad App
Typography Insight is an iPad application that introduces new methods for learning and teaching typefaces. The project stemmed from my love for typography and evolving mobile platforms

FontDeals
This service is like Groupon, but for fonts. Various font deals from various type foundries are offered at lower prices.

Last Click

Weave Silk
Is your desktop, motivation or even design work in need of something fresh, swirly and remarkable? Just weave some Silk! Yuri Vishnevsky created this experimental, magical interactive gimmick. You can spend minutes playing around with this little technique, based upon HTML5 Canvas: no Flash in use.

Keyboard Shortcut Skins for Macs
For all of you out there who are shortcut lovers, here are some amazing custom-fitted color-coded keyboard skins that will help you fly through Photoshop, Aperture, Final Cut Pro, and many more.

Ro.me: Three Dreams of Black
“3 Dreams of Black” is an interactive film by Chris Milk and some friends at Google that showcases the creative potential of WebGL. WebGL is a context of the HTML5 canvas element that enables hardware-accelerated 3D graphics in the web browser without a plug-in. This is why we &heart; the Web.

(vf) (il)

Post tags:

Smashing Magazine Feed

Grungy Wallpapers and Resources Goldmine

Fri, 17 Jun 2011 21:38:43 +0000

One source of inspiration for many in the graphic design field are the wallpapers that they use to customize their desktops. These daily doses of skillful designs act as reminders to start our days off on the right, creative foot. One popular theme that tends to be prevalent in many of the dazzling designs one finds in the scores of wallpapers that are available online is the grunge.

In this post, we have gathered an impressive array of slightly grungy wallpapers that can decorate your desktop in some inspired designs. Beyond that, we have collected a handful of both tutorials and some textures that can assist you in creating some of your own grungy wallpapers. So once you have gotten inspired from looking through the showcase, you can get started on some original designs with the resources at the end of the post.

The Wallpapers

Reach For The Future Original by Destin8x

The Day We Met For Coffee by j3_concepts

Nostalgia Wallset by Thinker

(RED)servoir dogs by egolatra

Ain’t, Not by VictorC

Texture Mario by lozzaaa

Everything Sucks Again by skryingbreath

Paper World by kiriapurv

blue_skull by int_alireza

DnB overkill by Merx

Sunny Watermelon by cocacolagirlie

Remorse Is for the Dead by vhm-alex

Eerie Face [Grunge] by ToXin23

human by Osten3speN

Dirty | SpeedArt | By Bushido

Cheguevara wallpaper by Art Fabrick

Grunge ME by kaka420ish

Apple 2 by RezaPTO

Pure Dream | Desktop by purebullcrap

cran 2 by salma3444

Time Slip by JustEvolve

Gotta Rust ‘em All by MangoTangoFox

My Graffiti by MawDesigns

JSW by Blackafino

Morning Glory by Flarss

Conception by bayernownz1995

England wallpaper by Ichigo–sama

Soldier Concept Wallpaper by bpsola

oceania – mac wallpaper. by Aivre

Wallpaper 01 by Mysstika

Mortal Kombat Ninja Wallpaper by Poser96

Mac Wallpaper by 1991-prezent

Rise by Franz Jeitz

Crow Wallpaper by Tiger-tyger

wallpaper – white as snow 02+ by stuntarts

Tutorials

Create a Spectacular Grass Text Effect in Photoshop

Love Wallpaper for the desktop

The Dark Knight Grunge Wallpaper

Arctic Monkeys Photoshop Wallpaper Tutorial

Design an Extreme Grunge Wallpaper

How To Create a Retro Grunge Apple Wallpaper in 5 Easy Steps in Photoshop

Create an Intensely Grungy Wallpaper

Grunge Textures

Grunge Extreme Volume 2: 10 High Quality Free Grunge Textures

Tileable Burnt Orange Industrial Grunge Textures

4 Free High Resolution Grunge Textures

20 Simple and Subtle Grunge Textures

9 Tileable Grunge Textures

(rb)

Noupe Design Blog

Useful, Free Smartphone Apps and Resources for Developers

Thu, 16 Jun 2011 21:39:05 +0000

Smartphones are everywhere, and people all over the world are using them because of the many useful and amazing features they have that people love. People use smartphones for their daily work because smartphones have loads of advantages over a PC or Laptop, portability being a major one. Smartphone based apps also let you access your data no matter where you are.

With a smartphone in your pocket, you can perform every task that you would do with your laptop or computer. For the design community, there are abundant iPhone / iPad / Android resources and apps available on the net. Instead of wasting time in searching for the one you need, take a look at this collection of apps that we have compiled here to let web designers and developers find the most useful apps they can increase their productivity with.

Useful, Free iPhone and iPad Apps

iPhones and iPads are highly consumer-driven devices that come with a number of useful apps to help you in your web development process, and make it fun for you. Imagine you have all your necessary tools packed in one nice and stylish device. Certainly many of the apps for iPhones and iPads are paid apps, but they all are worth paying as they provide much more robust development tools. However, some free apps are also available that are more than enough to get you started using your iPhone and/or iPad as a web development support device.

TaskPad HD
TaskPad HD as the name suggests is a task managing app that allows you to sync tasks across all of your devices on top of managing them through web browser.

LiveView
LiveView gives you remote screen view best for the designers to create graphics for mobile applications. It is a tool that has proved its usefulness in creating speedy and grubby simulations, demos, and experience models.

WordPress
This app lets you update your posts, create new ones, moderate comments and all other related tasks that you would do via WordPress for your blog.

Craigsphone
A Craigslist for iPad that lets you find everything related to your web development and design work. Be it customers or jobs, people to outsource to, or anything else.

FontShuffle
An app that lets you find the right font for your project as it contains hundreds of font families which are sorted by similarity.

SkyGrid
It is a RSS feed reader that gives you an easy way to browse appropriate design and development information and articles.

Dropbox
DropBox is a magical free service that allows you to carry all your documents, photos, videos and everything else with you no matter where you go. With DropBox installed on your PC, whatever you save on your DropBox will automatically be saved to your computer, iPhone, iPad and even to DropBox website for easy access.

SugarSync
SugarSync is an alternative for DropBox that also lets you sync and access your files from your other devices and computers.

2X Client
With 2X Client, you can remotely connect and work on your Windows computer.

Doodle Buddy
A doodling application that lets you draw up any design idea with your fingers. Colors are included in this app.

Evernote
With this app, you can store your notes, ideas, snapshots, recordings, and anything else for trouble-free finding afterward.

Note Hub
Another note taking app with which you can create projects and add notes, to do lists and whatever you like.

Twitter
An official Twitter app to let you tweet and collaborate with your clients over Twitter.

Twitterrific
Another Twitter app for those who want a different interface while staying linked with their clients.

Skype
Take the power of Skype on your smartphone with this app. All the features of Skype come with this handy communication app.

Fring
Fring is a Skype alternative that lets you chat and place calls to others for free if they’re also using Fring.

PCalc Lite Calculator
A scientific calculator for exact measurements and calculations. It is a free completely functional lite version of the paid complete calculator app.

Square
Now you can accept credit cards on your iPhone, iPad or iPod Touch with no monthly fees or contract required. You’re ready to take payments just after the few minutes of downloading the app.

Salesforce Mobile
This app gives you instantaneous access to your Salesforce information on your iPhone.

Jot
It is a simple, high-speed whiteboard that allows you draw up your ideas and share them via email or save them as photos.

Adobe Photoshop Express
Do not compare it with Adobe Photoshop but indeed it is a very helpful resource that you can use to crop, flip, add borders and apply different kinds of color presets to improve your photos.

PaperDesk LITE
It is like a notebook in your hand that can also record audio. It is a simple pad of paper with no needless decorations that enables immediate and responsive note taking.

Font Displayer
It is a developer service that can be used to test fonts in different sizes, layouts and settings.

Uploadingit
Upload up to 20GB of data online be it your photos, documents, audios and videos.

Google Mobile App
This app lets you search the internet for pictures, voice, contacts, maps, images news and shopping.

Cool Hunting
It is a high-quality iPad app with a worldwide scope that lets you explore the spaces between print and web, online and offline.

Palettes
Another color palette creating tool that can significantly increase your productivity by letting you choose and create a color palette anywhere at anytime.

Flipboard
Flip through the news, photos, social media accounts and everything that matters to you. With this tool, you can see your social media accounts in an easy to scan and fun to read manner.

Getty Images
This app is specially designed for creative and media professionals that brings more than 24 million images to their fingertips.

Useful Free Android Apps

Android is the mobile device operating system developed by Android Inc and employs a modified version of Linux Kernel. Android Inc is a firm that was later purchased by Google, and now its main competitor is the Apple iPhone which is already very popular in the market due to the many useful features. But now the Android developers have also developed a lot of useful applications for the Android that hold almost the same features as that of the iPhone.

Touchqode Code Editor
Touchqode Code Editor is an Android App that helps developers and coders view and edit the source codes that are associated with syntax highlighting, auto-complete and other features found on a standard desktop IDE.

HTMLeditor
A simple and fast editor to help you with coding when you are on the move.

Eval your Javascript Code
With this app, now you can test run Javascript snippets straight from your Android.

AndFTP
It is an FTP, SFTP, SCP, FTPS client so that you can easily manage numerous servers right from your Android. It offers all the features that you may find in an standard FTP client such as download, upload, resume support, rename, delete, copy, set permissions and create folders.

Android Codepad
Android CodePad is a simple source code viewer that supports syntax highlighting. It supports all C-like, Bash-like, and XML-like languages. It also automatically selects the syntax depending on the file.

View Web Source
This app allows you to view the source code of any web page, copy and paste the HTML, select the text and search for it. You can also share the clips with your friends.

PhoneGap Developer
A perfect resource for PhoneGap developers to test their applications. It also includes guides, API references and documents making it a handy tool.

Design Snack Mobile
Design Snack Mobile is a characteristic-rich, interactive and socially-powered motivating web design gallery.

HTML Test
This free app lets you test your HTML skills. This interactive testing approach is used in energetic real-world atmospheres to check and train professional Web Developers.

Magic Color Picker
A color selection tool useful for designers, artists and programmers that offers 7 different color models and RGB, HSV, HSL and YUV color modes to choose color from.

Devcheats
This free app offers a succinct collection of cheatsheets that includes PHP, Python, Ruby on Rails, jQuery, CSS, SEO, Apache, Regular Expressions, SVN, C++, Drupal, HTML5, Javascript, Mysql, WordPress and much more.

W3C Cheatsheet
This app gives you quick access to useful information provided by W3C which is the leading international Web standards community.

Firefox 4 Beta Mobile
This is a beta version available only for Android 2.0+ devices that is a feature-rich browser come with developer extensions.

Android Developer Tools and Resources

Free Android Developer Ebook: andbook!
This is a free ebook for new Android developers that contains easy to follow tutorials intended to help you get started with coding.

Free Android Developer Ebook: Professional Android Application Development
This is a hands-on guide that helps you build mobile applications by giving examples. The ebook helps you quickly construct real-world mobile applications for Android phones.

Android Emulator from The Developer’s Guide
A mobile device emulator is included in the Android SDK that imitates all of the hardware and software features of a typical mobile device. It endows you with a range of navigation and control keys.

SensorSimulator
It is a java standalone application that imitates sensor data and broadcasts them to the Android emulator. This app simulates sensor data from accelerometer, compass, and orientation sensors and the data can afterward be used in an Android application, to turn them live through said sensors.

App Inventor for Android
This is a new tool from Google for non-developers to let them create their own app in an easy way.

Common Tasks and How to Do Them in Android
Here is the collection of some common tasks that you would perform during Android development. A quick and to the point how to guide to help you on your way.

Fireworks Template for Android
User interface elements are redrawn as vector images in this Fireworks template, and elements are labeled as per Android vocabulary.

Android Wireframe Templates
With this, you can use letter size (8.5 inches by 11 inches) quite effortlessly for paper prototyping and getting a reasonable sense of scale. You can even get them printed on A4 papers.

Android Developer Sense
Android Developer Sense contains completely editable Photoshop files, unique fonts and previews, the whole lot that you may require in order to modify your set in accordance with your preferences.

Icon Design Guidelines
This guideline gives necessary information about how you can create icons for different parts of the application user interface that match with the Android 2.x framework.

Widget Design Guidelines
This guideline provides information about designing widgets in a way that they fit with other elements on the Home screen.

Google Android Developer tool
Google Android Developer tool is the most commonly used Android App.

Android UI Patterns
This is a set of interaction patterns that assist you in designing different Android apps. This guide is a short hand summary of a design solution that can help you a lot.

Android GUI Prototyping Stencil for Visio
This app is useful for those who believe that earlier prototyping is more helpful for them.

Consider Our Previous Posts:

(rb)

Noupe Design Blog

Better Resources for Photographic Inspiration

Mon, 09 May 2011 21:38:03 +0000

We are always on an endeavor to make our reader’s lives a little easier. That is why every now and again we trawl through the internet for you to muster up some of the best inspiration resources we can find. Great photography can be as inspiring as any other form of art or design.

But, as is well known, one growing problem with finding inspiration in photography online is the sheer abundance of photos out there. There are so many photo blogs, galleries, directories and groups that knowing where to turn can become overwhelming, not to mention frustrating. Also, quite frankly, there’s a lot of bad photography that is published online. Getting to the best stuff takes a lot of filtering.

This post bundles together some of the better resources for finding inspiring photography online. We’ve arranged them in themes under news in pictures, photoblogs, photographers’ portfolios, a variety of Flickr resources plus a few tidbits more. To help us make this resource even better, feel free to share your own favorite sources for inspiring photography in the comments.

News in Pictures

One thing to remember with photography is that it captures a moment in time. And a good way to ensure that your inspiration is up to date is by checking out some of the bigger news agencies online. They generally have photographers who are working at the cutting edge of information and technology and have their finger on the pulse of what’s new.

Here are just a few online resources from news publications or agencies that compile great galleries and photojournalism.

Magnum Photos
Has to be one of the all-time classic agencies for beautifully chronicling events in pictures.

The Big Picture
This is the news in pictures from news portal boston.com. It does what it says on the tin pretty well… serves up big beautiful pictures.

BBC News in Pictures
The BBC news photo galleries are chronicled by events, themes and retrospect. Picture Editor Phil Coomes also has a blog about photos in the news. To inspire his audience he runs weekly themes for the public to upload images. For example, recent themes include open spaces and the beach.

Reuters
The international news agency has up-to-the minute galleries of images categorized by theme and monthly retrospect. It also delivers photo-reportage videos with behind-the-scenes stories from Reuters photographers. Reuters, alongside Associated Press and Agence France Presse, is one of the largest news agencies in the world.

National Geographic
No ‘News in Pictures’ list would be complete without the inclusion of the iconic National Geographic. Big inspirational photography can be found at the online news photography section of the website. There you will find nicely grouped galleries, photo of the day, wallpapers, photo tips and you can also browse by photographer.

Photoblogs

There are hundreds of thousands of photoblogs out there. Some update on a daily or weekly basis while others are more sporadic. Some revolve around a theme while others are more free-form. Here are some photoblogs that we thought were worth bookmarking for some occasional inspiration.

Joe’s NYC
This photoblog features mostly photos of New York City, but also sometimes includes photos from elsewhere.

Rion.nu
This photoblog showcases the photography of Rion Nakaya. Many of the photos featured are of people and urban landscapes.

Daily Walks – Diane Varner
The images featured here are taken on daily walks and hikes the photographer takes in Northern California.

Dreams of Light
Dreams of Light is the photoblog of Odilia Liuzzi. The photos featured here are varied in composition, style, and content.

The Gathering Shot
The Gathering Shot is the photoblog of Fernando Rodriguez, who tries to photograph things that are unique or different.

Polydactyle
Many of the photos included here have extensive post-processing. Some really interesting effects can be found in the archives.

AbsolutelyNothing
This photoblog showcases the often breath-taking landscape photography of Tristan Campbell.

Image:Me
Image:Me is the photoblog of Thomas Krebs and features photographs of a variety of subjects, from people to animals to landscapes.

Fotograf by Imran
This site showcases the photography of Imran Saleh, a photographer from Singapore.

Intermittences of Life
This photoblog showcases a wide variety of images including portraits, landscapes, and surprising other content types.

Pic of the Week by Andy Nixon
This photoblog not only features great images, but in many cases it offers background information about each photo. There are also occasional text posts.

Traveling Tribe
This photoblog is a bit different from many of the others in this article, with many longer-format posts featuring collections of images. Photos of shops and travel photos are among the most commonly featured.

Ossum!
Ossum! is a South African-based photoblog that features photos with a variety of content, including landscapes, night shots, and even an awesome series covering the demolition of the Athlone cooling towers.

Tenere
This photoblog mostly includes images taken while the photographer, Yoshinori Fukui, was in the Sahara Desert.

Grant Legassick Photography
Grant Legassick is a photographer living in Cape Town, South Africa. Most of the stunning photos on his blog are of the South African landscape.

Dror Eyal Photography
This wedding photoblog pushes the limits of beautiful wedding photography. The photos included are stunning, and the photographer obviously isn’t afraid to try something different than the traditional posed portraits. There are also occasional posts featuring other types of photography.

Christine Meintjes
The photos featured on this blog include both portraits and landscapes, especially cityscapes. A variety of styles are included.

Flickr

Often when we think of turning to Flickr for inspiration we think of searching either directly through the millions of photos there, or viewing popular tags. But that is a really hit-or-miss way of finding anything of quality. Another option might be to scan through Flickr groups, but similarly many of these groups have grown so large that you run into the same ‘bottomless’ problems as with searching. But there are more refined options that help you filter through the guff.

Flickr Galleries

Where Flickr Groups often have tens or even hundreds of thousands of photos, Galleries are much more selective. Part reason for this is that Flickr actually limits the number of images you can have in a given gallery. Galleries are curated by Flickr members, often surrounding a theme, and can be created by anyone.

Here are a few favorites:

Aviary
This Gallery features images of birds including close-ups, photos of flocks and silhouettes in both duotone and color.

American Apocalypse I
This Gallery showcases images of mostly deserted scenes from around the U.S. as well as a couple of portraits that offer a similar impression.

Expired Time Zero
This Gallery includes photos taken with expired Polaroid time zero film. The color and exposure effects are quite striking.

Clotheslines
The Clotheslines Gallery showcases just that: beautiful images of clotheslines. The colors and shapes in the images are wonderfully inspiring.

The Future
The Future Gallery features futuristic-style photographs – mostly of everyday items and architecture as well as a handful of portraits.

Flickr Last 7 Days Interesting

Flickr’s Explore the Last 7 Days Interesting feature is one of its better services for finding inspiration. As noted above in the News in Pictures section, a photograph is a moment in time, captured. Therefore newer photos often capture some amazingly new inspiration. And best of all, Flickr filters the past 7 days to capture the best of what has been uploaded and presents these randomly so every reload delivers new and fresh inspiration.

Flickr Places

Flickr’s Places feature lets you search by geographic area – anywhere in the world. Flickr also includes featured places every day.

Flickr ‘The Commons’

The Commons is a collection of public domain and copyright-free photos from a variety of institutions from around the world, including the Smithsonian, the National Galleries of Scotland, and the Jewish Womens’ Archive. Most of the photos included are of historical significance and can be a great inspirational resource when working on a project with a retro or vintage theme.

Tumblr Blogs

Tumblr has some of the most creative blogs out there and photographers’ photoblogs are no exception. Here’s only a handful of the excellence Tumblr has to offer.

The Photographist
This Tumblr blog showcases a variety of images with a focus on still lifes and landscapes.

Polamour
Polamour is a Tumblr photoblog that posts one Polaroid-style photo every day.

Aviram/Lerner Photography
Most of the photos on this Tumblr blog are concert pics but you can discover other kinds of content too.

iPhotogenic
iPhotogenic takes a slightly different approach to the photoblog posting only photos taken and processed using iPhone apps.

Cela Aussi Passera
A lot of the photos included on this blog have awesome effects including double-exposure and lighting effects.

The Dalai Lomo
The Dalai Lomo features lomo photos using a variety of lomo cameras (and some non-lomos).

Photography Websites

While we have listed a few direct blogs and individual resources above, there are also photography portals that act as collectives for many photographers. These sites serve up tons of great photos from a variety of photographers. Here are a few of the ones we have found useful for inspiration.

Flak Photo
Flak Photo showcases photography from a variety of international contributors. Flak focuses on the art and culture of photography featuring not only great photographs, but also news of new series work, gallery exhibitions and book projects.

Jen Bekman
This site features a variety of photographers exhibited at the Jen Bekman gallery in New York City.

DeviantART
DeviantART has a fantastic photography section, browseable by type and content (commercial, horror & macabre, still life, street, conceptual, photojournalism, etc.). It’s a great resource for finding the more artistic photography.

Carbonmade
Carbonmade includes a hand-picked ‘examples’ page that showcases some of the best photography portfolios hosted on the site. It can be a great place to find photographers that might not be featured elsewhere.

Behance.net
Behance showcases some fantastic photography, mostly commercial or editorial. Just check out its photography, retouching and photojournalism categories (there are also categories for photo illustration and photo manipulation).

Portfolios

Not to confuse portfolios with blogs, a photographer’s portfolio showcases the best work of a particular artist, often exhibiting some of the best photos to be found anywhere online. Portfolios are as varied as the photographers they represent: some with carefully curated collections of only a couple dozen images, others with hundreds of images to view. Portfolios are designed to sell the work and services of the photographer. Here are a handful of eye-candy resources for you to pore over.

Eric Ryan Anderson
Eric Ryan Anderson categorizes his photos into a number of portfolios including “Texas”, “Music”, “Polaroid”, and “Portrait”.

Erik Almas Photography
Erik Almas has a fantastic portfolio of both commercial and editorial photos including fashion, landscapes, portraits and fine art photos.

Jeremy Cowart Photography
Jeremy Cowart has photographed some of the biggest names in pop culture and has an outstanding portfolio of both editorial and commercial photos.

Koen Demuynck
The portfolio of this Belgian photographer includes a wide variety of work including landscapes, portraits and plenty of photomanipulations.

Dave Hill Photography
The photos included in Dave Hill’s portfolio are varied and include many with a cinematic quality rarely seen in still photography. He has some very famous subjects in many of his photos, too.

Rinze Van Brug Photography
The portfolio of Rinze Van Brug includes fashion, architectural and travel photography in a mostly understated style that includes both duotone and color photos.

Raven Photography
The photos featured in this portfolio all have extensive post-processing, mostly to make them look like HDR photos. There’s also commentary for each photo.

Jason Bell
Jason Bell’s portfolio includes a wide array of photos including images of celebrities, portraits, landscapes and more. He also has portfolios of commercial photography and images taken for the entertainment and music industries.

Conclusion

There are a wealth of fantastically talented photographers posting their work online. And of course what one finds inspiring, another may find completely mundane. But there are definitely better resources and finding these online is challenging. Hopefully the above links will put you well on your way. If you have additional resources you’d like to share please contribute them in the comments below.

Consider Some of Our Previous Posts

You may also be interested in some of these other fantastic posts for further inspiration.

Showcase of Beautiful Photography

50 Incredible Photography Techniques and Tutorials

35 Beautiful Examples Of Rain Photography

45 Beautiful Motion Blur Photos

Beautiful Black And White Photos

25 Beautiful Macro Photography Shots

(rb)

Noupe Design Blog

Educational Resources for Studying Graphic Design

Mon, 14 Feb 2011 21:41:23 +0000

One of the greatest things about having access to the Internet, is the educational opportunities that it affords the public. People in all professions have the ability to expand their knowledge base through the wealth of information being shared via the Internet, and the same holds true for those who are studying graphic design.

The Internet is positively bursting with tutorials and resources that can help one advance through the various stages of becoming a successful graphic designer. All the way, from a newbie to an experienced pro. Today, that is our purpose here. Gaining knowledge about graphic design so that we can advance our skills and blossom in our chosen fields.

Here is a collection of invaluable educational resources on graphic design that have been broken down into different categories depending on your preferred methods of consumption. Each one of us has their own approach of learning, either learning visually, auditory or through repetitious means. It was in that vein in which the resources were collected.

We have tutorials for your hands-on approach, podcasts for a more auditory take and an assortment of PDFs and articles to read through.

PDFs

The first category of resources that we have gathered are some assorted graphic design PDFs that will freely add to the educational foundation on which you are building. These community supplied supplements cover a range of graphic design elements and areas. So take a look through and begin downloading your new skill builders from the list below.

Design Your Imagination is a valuable graphic design ebook that should be in any beginners toolbox. Deconstruct website design and learn to hone your creative skills with this comprehensive guide to the web:

As with any good learning experience, you need someplace to start, and some choose to start at the beginning. With The History of Graphic Design you can do just that. This informative PDF offers a brief rundown of the history of graphic design:

When it comes to teaching design in a whole new way, The Design Funnel: A Manifesto for Meaningful Design brings a unique look at the world of design, and guides the reader to honing their design process. From beginner to established pro, this manifesto could offer you a fresh perspective on your approach:

Graphic Design Teaching and Learning is a helpful learning tool that takes on both the approach of teaching graphic design as well as learning it. Definitely an interesting and a worthwhile read:

PDFoo – Graphic Design

PDFoo is a large collection of ebooks and PDFs all related to the field of graphic design. This resource provides a full download and will keep your nose to the grindstone for days:

Pictorial composition and the critical judgment of pictures is a wonderfully informative ebook that will allow anyone, no matter their level of expertise, to dive in and learn the basics about the composition and overall aesthetics of images:

Just Creative Design’s Type Classification eBook is a fantastic educational resource for those wish to learn more about the fine art of typographical design. Whether type is to be your specialty or not, this ebook is worth a read:

A theory of pure design; harmony, balance, rhythm is another learning library must add. This ebook explores in great depth the fundamentals of design theory. It is an artistic exploration into the very principles which lie at the foundation of illustration and painting as fine art:

An Introduction to Graphic Design is another useful ebook to be stocked in any graphic designer’s learning library. It offers a look at the basic fundamentals of graphic design to build a more solid foundation:

The Q&A E-book : Interviews With 25 Popular Bloggers pretty much tells you all you need to know about it in the title. Gain insight into the processes of the big names in the design field through this interview filled ebook and learn tricks that you can implement in your own:

The final PDF we have for you is the Graphic Design Wikibook. Think of the Wikibook as an open-content collection of textbooks, in this case specifically focused on the graphic design world. Do not let its position fool you, it is definitely worth a gander:

Articles

This second section of resources is an array of great articles all geared specifically towards graphic design education. Combing through the archives of some of the best known sites for assisting the growth of the community, we have pulled some must-read posts from their pasts just in case you missed them. Even if you do not read another post from any of the sites they have come from, these articles you should not let pass you by!

Earlier, we mentioned needing someplace to start, well Teach Yourself Graphic Design: A Self-Study Course Outline is one of those places. This article is absolutely filled with resources that will help you begin your self directed graphic design studies:

Want to know how to design? Learn The Basics. is a fantastic article from Just Creative Design that gets at the heart of design through the very basic elements of design. These are the fundamentals that you cannot get by without:

The Difference Between Art and Design is an extremely insightful discussion about the difference between art and design. This is a long running debate in the design community, and if you are going to be a designer, you should certainly familiarize yourself with the ongoing dialog:

Art vs Design is another pertinent and well thought out dissection of the art vs. design issue. Part of a solid foundation of learning comes from having a firm understanding of the field you are working in, through this evolving dialog, any designer can gain better footing in this design landscape:

Graphic designers are often wondering What Skills Will I Learn as a Graphic Designer? especially when they are starting out. This article examines this very query in specific details:

Underneath all of the fundamentals of graphic design lies the theory that drives it. In the article 50 Totally Free Lessons in Graphic Design Theory the TutsPlus family definitely delivers with a bevy of knowledge building lessons in theory:

For more on theory, Noupe’s Graphic Design Theory: 50 Resources and Articles is another wonderful collection of graphic design theory based resources from our sister site. Help expand your design horizons even more with this educational article:

Learn the Basics: 25+ Sites And Resources To Learn Typography is a great article from 1st Web Designer that will serve to enhance your typographical knowledge base. Typography is an important element in design and understanding it is key in your design growth:

As far as useful articles on design go, David Airey put together a post on the communities favorite books about graphic design. What ’s your favourite graphic design book? opens up the comments to the community and the post evolves from there as the replies pour in:

In your quest for graphic design knowledge you can even turn to About.com whose course Introduction to the Elements of Design will give you a grasp of the basics of graphic design. Another article that serves as a good starting point:

Speaking of graphic design books, this site has a brilliant article on them. 30 Delightful Graphic Design Books spans the various arenas of graphic design to find some of the industries most useful books that will aid you in your thirst for knowledge:

The Design Cubicle offers this insightful article Tips to improve as a graphic designer for anyone on an educational journey through the field of graphic design. It is certainly worth a look for new and old designers alike:

Finally, when it comes to growing as a designer and learning to hone your skills, the blogosphere is an invaluable tool. The following article 100 Must Read Design Blogs helps you to maximize your surfing by pointing you in the direction of some great sources for educating yourself:

Podcasts

In this category, we move into the auditory section of our graphic design learning experience with some selected podcasts. These informative online broadcasts take on the task of offering an educational outlet for the masses over the virtual airwaves with a different approach than you can get most anywhere else. Especially if you are more inclined towards audio forms of learning the podcasts are for you, but they are truly for anyone interested in learning more about this field.

For Graphic Designers Only is a business minded graphic design focused broadcast which talks with industry experts to gain insight and give advice to the community. From building an individual freelance business to a more business firm oriented perspective this is a useful podcast:

Rookie Designer‘s The Podcast for the Not-So-Accomplished Designer is a look at the graphic design landscape with a beginner’s gaze. This is a great place to start in the podcast pool, whether you are a newb or in need of a little refresher course:

Design Guy takes a simpler approach to the design principles, taking the time to explain them in laid-back basic ways that should be easy to wrap your head around. Get your new design projects off the ground in no time with a little help from the Design Guy:

Art a GoGo Podcast is certainly useful to anyone looking to solidify the base of their design work through an exploration of art. The Art a GoGo podcast features discussions about art news and the overall world of art in an educational and entertaining way:

There have not been many logo specific resources, but Logo Design is an informative podcast that does help balance the scales a bit. Learning about logos through tips and in-depth discussions has a new face, the “Logo Design” podcast:

Boagworld Web Design Advice is a fantastic weekly podcast which runs the proverbial gamut of the graphic design field. Offering the community interviews, reviews, and news Boagworld is a podcast for all levels of the designer from the learning to the learned:

Art History Podcast is another podcast that can help you learn more about the art that has shaped and paved the way for the design world today through thoughtful analysis of timeless classics. Unfortunately the show is not still active but there are plenty of past episodes to learn from:>/p>

PixelPerfect is another great resource for the designer looking to increase their knowledge base in both Adobe Photoshop and Illustrator. Complete with demonstrations to teach you the tips and tricks of both graphic programs. If you use either one, then you should check out this podcast:

The Rissington Podcast is another insightful broadcast in which the hosts take questions from their listeners and answer them for the entire graphic design community. This would certainly be the problem solver’s podcast for designers old and new:

CreativeXpert Design Interviews is a completely interview-based podcast which features a brilliant array of expert guests to provide the insight that lays the foundation for this informative show. With some of the brightest minds in the field sharing their techniques and inspiration, this podcast can enrich anyone’s educational journey:

Another interesting podcast with a bit of a different twist on the show is FEED – A Magazine of Graphic Design. FEED is exactly what it sounds like from the tagline; it is a community based submission driven graphic arts magazine in the form of a podcast:

The final podcast that we are going to feature for growing as a designer is Design Tools Weekly. This is another weekly broadcast that discusses the topics that designers are looking to have delved into. This is another show that bends the learning curve in your favor:

Websites

We are going to wind things down with some useful websites to keep bookmarked and tracking regularly through their feeds for feeding your thirst for graphic design knowledge. We thought this would be a good place to finish, because most of the sites themselves are a growing resource that will continue to deliver new opportunities to learn. If you have not seen these sites, or not seen them lately, then we recommend that you stop by for a refresher on what they have to offer!

Design is History is a fantastic resource for all those treading the design waters looking to learn more. The site scans so many eras in graphic design, teaching you the history and principles that shaped this dynamic field:

As far as starting points go, Smarthistory takes the seeker of knowledge back even beyond the start of graphic design, and into the history of art from around the world for a more comprehensive overview of the seeds that helped sew the graphic design field:

Arty Factory is an educational resource hub for design and art lessons online. They are totally free for all and provide an array of fully illustrated classes on drawing, painting, and design:

BBC Learning – Art and Design is an online resource for building and advancing your art and design knowledge. This site offers various courses to help you grow in your selected field:

The Metropolitan Museum of Art’s Heilbrunn Timeline of Art History is another wonderful place to turn for a more historical perspective and learning opportunity as you study through the great works of art from all over the world and all through time:

Graphic Design Forum is one of the largest forums on the web for all things graphic design. If it is experience that you need to gain, then you have come to the right place, no matter what level of designer you are:

All Graphic Design is an expansive resource in and of itself, all fed by the online design community. From forums to templates to articles and more, this is a one stop learning hub for graphic designers:

TutsPlus is a tutorial junkie’s playland for hands-on graphic design walk throughs. If you are not familiar with the TutsPlus site and family then you are selling your graphic design business short. They offer both free and premium levels of tutorials:

The MFA in Interaction Design program trains students to research, analyze, prototype, and design concepts in their business, social, and cultural contexts:

Speaking of invaluable hubs for all things graphic design Design Talk Board comes in to educate the online masses with piles of resources, jobs information, graphics news, talk forums, software training, and oh, so much more!

Graphic Design Principles Index is an installment based online graphic design course that is hosted by Duke University. The program is divided into 39 different parts:

AIGA is a site that all professional graphic designers should be aware of. This is an association that is dedicated to advancing the overall design field as ‘a professional craft, strategic tool and vital cultural force’ in our society:

HOW Design Forums is another wonderful and informative graphic design forum that will enrich any graphic designers learning experience. So many great communal contributions that you would be amiss to, well, miss:

If it is informational sites that you are looking for, then SitePoint certainly needs to be on your radar. No matter your level of learning, this fast growing online media company and information provider has something for all web professionals:

Graphics.com is a community resource that is shared by any and all graphic designers who wish to be apart of it. Complete with tutorials, educational videos, a full forum, and more, this is another resource center worth looking into:

Packaging Design Archive is a collection of very well designed product packaging that users can flip through to study the presentations that are housed there for learning purposes. Not to mention, a little inspiration:

Packaging of the World is another communal collection of product design, whose deep databases are full of helpful examples that you can once again study to learn from. If you like to learn by example, and package design is your passion, then look no further:

The Chicago Design Archive is another great place where you can browse through a collection of locally created designs from the Chicago area and learn from a more hands on approach:

STA Archive is an annual design contest where you can show off the skills that you have learned and been honing:

We thought we would cap this section off with one more graphic design based forums for the online community. Your Design Forums can provide learning opportunities through shared experiences and advice of the community:

40+ UI Design Tools and Resources

Thu, 20 Jan 2011 21:36:53 +0000

User interface design grows and evolves on a continual basis. To stay current, you need to keep an eye on trends, new resources, and new techniques being implemented and talked about. And you also need to try things out on your own, and come up with original ideas and implementations.

The tools listed below can help you do all of those things. Feel free to share any more resources you’ve found useful in the comment section below.

Pattern References and Libraries

Looking at the solutions others have already come up with for common UI challenges can not only help you find the right existing solution, but can also serve as the basis for coming up with something new and original.
User Interface Design Patterns
An online catalog of articles and visual solutions to common UI design problems. The use very loose categories, and also let you sort by tag or color:

Pattern Tap
A great resource to find commonly used design pattern inspiration. Pattern Tap breaks down UI elements into collections, and also tags individual entries for additional browsing options:

Patternry
Patternry puts the emphasis on finding solutions to common UI problems, rather than just providing simple inspiration:

Mephobox
Another great resource to find commonly used design pattern inspiration. You can browse by user or website, or check out collections based on individual design elements:

Prototyping, Mockup, and Design Feedback Tools

Any time you’re creating new UI techniques, you’ll want to create a prototype or mockup as a proof-of-concept before committing to a production site. And of course, you’ll need to test these new ideas, too.

Lumzy
Lumzy is a handy little online UI interface mockup and prototyping tool. It lets you create working functional prototypes, rather than just wireframes:

Mockingbird
Another interface mockup and prototyping tool, this time with online collaboration tools for working with teams:

UI Design Framework for Illustrator
A set of user interface elements and styles for Adobe Illustrator:

Android Asset Studio
A set of UI elements for developing Android applications:

Unique Mobile UI Design Elements
A free set of UI design elements:

Android UI Elements Set
A free set of classic Android OS UI elements:

OSX Leopard GUI Set
GUI Elements for OSX Leopard:

ALL In One Web Elements Kit
Everything you need for your web layout in layered PSD files:

iPad GUI Set
Everything you need for your iPad app layout in layered, vector PSD files:

The Pencil Project
A GUI prototyping tool plugin for Firefox:

Concept Feedback
Post your designs and concepts and get free feedback from the design community:

Landing Page Optimization
Get feedback from real people on your landing page’s 5-second impression:

Frameworks

Frameworks have become the backbone to virtually any complex UI. Here are a handful of frameworks other than MooTools and jQuery that you might not be familiar with.

DHTMLX
A JavaScript UI library and jQuery alternative that provides a number of UI widgets:

Dojo
Another JavaScript toolkit with a powerful set of base APIs as well as rich UI widgets:

Echo 3
A user interface toolkit that not only allows developers to create component-driven and event-driven API, but also client-side Javascript apps as well:

Midori
A super-lightweight JavaScript framework that packages up many commonly-used UI techniques. Uncompressed, Midori is only 51K, even with indented code:

Scripty 2
Another framework that with it’s newest release supports CSS transitions and transforms for Webkit browsers:

ZK
ZK includes over 200 ajax components, all ready to go:

jQTouch
A jQuery plugin for mobile iPhone application development:

Code Snippets and Scripts

Why reinvent the wheel? If there’s an existing snippet out there that does just what you need, you can likely find it on one of the sites below.

jQuery Labs
An enormous library of pre-made jQuery components for your website:

Snippet Library
A library of user-submitted and reviewed snippets and code tutorials from a variety of programming lanugages:

The Javascript Source
A handy guide of commonly used javascript and ajax snippets:

roScripts (beta)
Scripts, Snippets and Resources that can be voted on by users:

Snipplr
A good resource with lots of newer scripts and jQuery techniques:

Code Sucks
Javascript snippets with extremely detailed write ups about how they work:

HTML Goodies
Another jquery resource with excellent step-by-step documentation:

WebResources Depot
Included in their large directory of design resources is a number of very useful scripts and snippets:

Ajax Rain
Excellent library of snippets in a categorized and tagged format to make it very easy to find what you’re looking for:

Open Source Scripts
Providing Javascript snippets and code since 2004:

Mini Ajax
A collection of extremely elegant snippets:

Webappers
Lots of jquery components including a very good collection of image editing snippets:

Javascript Kit
One of the original javascript snippet libraries on the Internet:

Webcodr.com
A few very useful snippets for your website:

HTML Assets
A small collection of basic javascript snippets:

Miscellaneous Resources

Here are a handful of UI resources that didn’t quite fit in any of the categories above, but that we still felt were worth mentioning.

Slidenote
A simple little jQuery plugin that lets you create sliding notifications:

Editable Grid
With only a few simple lines of code, turn HTML tables into components that can be manipulated with advanced options:

Placehold.it
A service for easily generating placeholder images for your mockups:

Fillerati
A unique alternative to Lorem Ipsum. Generate blocks of real text for your mockup. Select to receive your text from a variety of public domain works:

qTip2
A jQuery upgrade for the qTip tooltip plugin. Easily make stylish tooltips for your site:

(ik)

Noupe Design Blog

TuTsRUS - All Adobe Tutorials - Photoshop | Illustrator | Encore | Premeire | After Effects » Resources

40 CSS Reference Websites and Resources

CSS Reference

Compatibility Tables

CSS Tutorials

CSS cheat sheets

CSS Generators & Testing

Resources for Styling Lists

Showcase

Tutorials

Tools

A Collection of Retro & Vintage Design Resources

Photoshop Brushes

Icons

Textures

Patterns

More Resources

Tutorials

Sci-fi/Futuristic Digital Works & Resources

Inspiration

Tutorials

Resources

Useful Resources, Tools and Services for Web Designers

Useful Resources and Websites

Useful Tools, Libraries, Plugins

Useful Services

Last Click

Grungy Wallpapers and Resources Goldmine

The Wallpapers

Tutorials

Grunge Textures

Useful, Free Smartphone Apps and Resources for Developers

Useful, Free iPhone and iPad Apps

Useful Free Android Apps

Android Developer Tools and Resources

Consider Our Previous Posts:

Better Resources for Photographic Inspiration

News in Pictures

Photoblogs

Flickr

Flickr Galleries

Flickr Last 7 Days Interesting

Flickr Places

Flickr ‘The Commons’

Tumblr Blogs

Photography Websites

Portfolios

Conclusion

Consider Some of Our Previous Posts

Educational Resources for Studying Graphic Design

PDFs

Articles

Podcasts

Websites

Further Reading

40+ UI Design Tools and Resources

Pattern References and Libraries

Prototyping, Mockup, and Design Feedback Tools

Frameworks

Code Snippets and Scripts

Miscellaneous Resources