LOOKS GOOD Design Magazine » Resources

The Best Web Design Resources on the Web

Stevo — Thu, 23 Dec 2010 09:27:44 +0000

Any web designer or coder has an arsenal of handy tools within reach to design their next fantastic application of website. Some of these are even free and with the emerging trend of browser-based web applications, you can even run these straight from your browser without installing any new software onto your computer. Here is a start to a compilation of useful tools on the internet for your next project, but this list is not yet complete without your input so stay connected and bookmark this article for future reference!

Pixlr

This is probably the most advanced and most popular image editing application on the internet. The best part about it is, it’s a 100% free and for simple designs, you can save your money on Adobe Photoshop.

Kuler

This one is a personal favorite: An online application for generating a color theme that looks good together. Whether you are creating a website template or an application UI, Kuler allows you to efficiently experiment with different color variations as well as browse thousands of pre-existing color themes from the Kuler community.

Qvectors

Qvectors is a website that provides free high quality vector graphics for your projects. They even allow you to make money by uploading and selling your own vector designs as a registered user.

Qtextures

Like Qvectors, Qtextures is a fairly new site but it delivers high quality textures and patterns from various designers. Its catalog is updated on a weekly basis.

Qicons

Another great community resource for finding fresh and royalty-free icons for your designs

Gomockingbird

This is an online tool that makes it much easier to create, link together, preview and even share mock-ups of your website or application to your colleagues.

Gliffy

Gliffy is a online diagram software, you can easily create professional-quality flowcharts, diagrams, floor plans, technical drawings, and more – straight from within your browser!

Favicon

This online tool can easily create a favicon for your site – a small 16×16 image that shows in your browser’s address bar and bookmark menu when your site is called up. Definitely, this is the quickest and easiest way to make one.

30 Cool Photoshop Tutorials for Beginners

Tony Chen — Sat, 11 Dec 2010 11:06:24 +0000

Adobe Photoshop, an essential to any designer’s toolkit is probably the most popular graphics editing program out there. Photoshop is easy to learn and offers an extensive array of advanced tools to create some impressive and realistic compositions. All of these are free resources for budding graphics designers to learn basic to intermediate manipulations with this powerful graphics editing software. This article is a collection of some high quality Photoshop tutorials for beginners – this is a place to start.

How to Create a Nuclear Disaster Landscape

Recreating Bar Code By Using Photoshop

Create A Slow Motion Bullet Shot Effect

Making A Book Of Magical Playground Scene

Magnifying Glass In Photoshop

Create A Distressed Vector Typographic Poster Design

Create a Magical Flaming Heart Illustration in Photoshop

The Ultimate Wood Texture Tutorial

Create a Cool Wet Ink Typography Effect in Photoshop

Create A Spectacular Flaming Meteor Effect On Text

Text Inside Text Effect

Give Your Photos a Retro Comic Book Effect

Canvas texture imitation

Glass Ball Tutorial

Papercraft Text Effect

How to Create a Highly Detailed Hi-Tech Power Button

Vintage Polaroid Effect

Realistic wrinkled paper

Create A Surrealistic City Scene From Drawings And Photos

Create a Sleek, High-End Web Design from Scratch

Create 3D Typography effect in Photoshop

How To Create Bamboo In Adobe Photoshop

Making A Print Ready Business Card Using Only Photoshop

3D Grass Text Effect

Create a Shiny Earth with Photoshop 3D Layers

Realistic denim texture

Realistic View Tears On Face

Create Eroded Metal Text with Photoshop

Applying Design Engineering Skills in Photoshop

Magic lighting effect in Photoshop

Designing With the Color Green

Wellington Almeida — Tue, 30 Nov 2010 10:37:14 +0000

Color in design affects different people in different ways and it is very important when designing with the purpose of conveying a message. The study of color is extremely important as something as simple as slightly changing the hue or saturation of a color can completely alter the atmosphere. Green, a cool secondary color, are often more subdued than warm colors such as bright red or orange. It is a calm and relaxing color that is commonly associated with nature – it takes some attributes of yellow that can either elicit a sense of fun or conservative professionalism.

Green, commonly associated with nature and environmentalism, is actually a very neutral color. As many things in nature are green, the color can represent growth, development and opportunity. Themes of renewal and abundance are also commonly associated with this cover. However, one must be careful when choosing to design with the color green, as it can also represent envy or jealousy, hence the expression “green with envy”.

Like blue, green is a very calming color, however as mentioned above it brings forwards a sense of vibrancy and dynamic energy of yellow. This mixture of blue and yellow in the context of design can have a harmonizing effect and because it is such a neutral color, this balance brings stability and safeness in design choices.

As with other colors, greens come in many hues. Brighter greens are usually more energizing, vibrant and fun. blnk.com is an excellent example of this:

Contrastingly, more subdued greens are less vibrant but as a result, are more stable and representative of affluence. Websites such as mint.com and clearleft.com use lighter more subdued greens that are less colorful, but more professional:

Olive-toned greens express more natural feelings and representative of the natural world. Environmental-activism related sites often use this color scheme along with natural elements in the graphics to create a very down-to-earth message. An example of this is plantwithpurpose.com

However, designing for environmental groups are not only limited to olive greens. The website for Hong Kong Youth Environmental Awareness uses brighter greens to convey a more youthful message whilst maintaining ideas of conservatism and sustainability:

Another example of green in web design is emotionslive.co.uk, a personal portfolio. I particularly like this design for its widespread use of green and light/shading:

Green does not have to be the dominant color of the design. For example, you can pick out particular elements in a web design to accentuate with a vibrant green. In the header of ligonier.org, the designers used a natural bright green to emphasize its main content:

Personally, I think the color green is very appropriate for designs related to wealth, stability, renewal, and nature. Brighter greens are more energizing and vibrant, while olive greens are more representative of the natural world. Dark greens are the most stable and representative of affluence. Regardless of your choice of color scheme, it is important to remember that a slight change in hue or shade can completely change the message you are trying to deliver and that significance color theory should never be overlooked.

Sketchbooks of a Web Developer

Brad Reiken — Wed, 17 Mar 2010 03:59:28 +0000

Before any tangible designs are made, any experienced designer should know that the first thing you do before any sort of web development project is map out a rough sketch first. Although most sketching is done on blank paper, many developers have now started using sketch templates for their web applications. This is definitely the most productive and organized way to start probably one of the most important phase of the application design process. Below are resources and templates to download or print off for designing your next great project! Enjoy reading and share this post!

Templates for Print

These are some good print-your-own sketch templates for web design.

Printable Sketch Templates for Web Design Browser (Chrome) Sketch Pad by UI Stencils

960 Grid System Template by Nathan Smith

960 Sketch PDF template

Grid paper by Konigi

Paper Browser by Rain Creative Lab

MBTI sketching paper for ideation by Concept7

Sketching grid paper by Concept7

6 pages template by nunile

6 pages PDF template

Paper wireframe templates by Jason Robb

Sketchboards by adaptive path

Wireframe template by Alfonso Bozzelli

PDF wireframe template

Sketchbooks

You can actually order some of these sketchbooks online if you prefer that. Check these ones out:

Browser Sketch Pad by UI Stencils

8.5 X 11 Inches
50 Sheets in a pad
70 lb Paper
Chip board back

Wireframe Graph Paper Notepad by Konigi

50 sheets
8 1/2 x 11 inches on white opaque vellum paper

Storyboard Notepad by Konigi

50 sheets
8 1/2 x 11 inches on white opaque vellum paper

Dot Grid Book by Behance

Semi-Hard Suede-touch Cover
9 x 10.5 Inches
50 pages, 80lb Premium Blend Paper
Double spiral (black)

Via GEEKCHIX.ORG

Edit: Thanks Amanda for her suggestion App Sketchbook

App Sketchbook

3 real-size iPhone® templates per page
Pixel (20px) ruler and title bar markings
Ruled section for your development notes
50 Double-sided pages

I hope you find these templates useful to better your design and development process and if you have any additional resources you would like to share, please do leave a comment so I can add them to this list!

16 Awesome Icon Sets For Your Blog

Tony Chen — Tue, 14 Jul 2009 16:51:42 +0000

Icons are essential elements of design on the web and makes websites look good. This post is a collection of 16 incredible icon sets that can be used on your blog or web applications to spice up the design.

Origami Icon Set

Origami is a set of 15 vector icons designed by Jack Cai from Double-J Design. The icons come in 5 different sizes (16px, 32px, 48px, 128px) and available in both .ICO and .PNG format. [link]

Flavours Icon Set

German designer Oliver Twardowski designed and released this icon set exclusively for Smashing Magazine aiming to help designers enhance their user interfaces for their websites or web applications. The icons are 48 x 48 pixels and come in .PNG format as well as .PSD format so you can modify the files to your preference. [link]

Free Social Media Icons from WeFunction

A set of social media icons by WeFunction including icons for popular social networking services such as Digg, Facebook, and Twitter. [link]

Grungy Aesthetica Icons

A set of 181 high-quality web icons in transparent .PNG format designed to compliment grunge-styled websites and blogs. Available in 32px, 48px, 64px, and 128px sizes. [link]

20 Blockie Icons

Here is a set of 80 icons (20 icons available in 4 colors) that can be used in desktop interfaces, web applications, and blogging themes. The icons come in 5 different sizes (16px, 32px, 48px, 128px) and available in both .ICO and .PNG format. [link]

Coquette Icon Set

A set of 50 high-quality cartoonish icons. These colorful icons are perfect for any web project and are available in both .PNG and .ICO file formats. [link]

Round Social Media Icons

Here is another set of social media icons. This set is designed by Eli Burford and is available in 3 sizes for 17 icons (32px, 64px, and 128px) [link]

Sketchy Icons

Another set of social bookmarking icons but this time in a cool pen sketch style. They are available in 3 colors: blue, black, and transparent blank all in .PNG file format. [link]

Web Injection Icons

26 stylish icons designed by Jonatan Castro Fernández from Midtone Design Studio. This set includes RSS feed and database icons perfect for web developers and application builders. [link]

Practika Icon Set

11 free web icons designed by DryIcons. The icons are available in 3 sizes (64px, 128px, 256px) in transparent .PNG format. [link]

Stickers Icon Set

A set of curvy dark gray color-schemed icons with white borders available in 5 different sizes (16px, 32px, 48px, 128px) and available in both .ICO and .PNG format. [link]

Vector Icon Set by Monofactor

25 scalable Adobe Illustrator format icons. You must have Adobe Illustrator to open and modify .AI files. [link]

Facebook UI Styled Icons

High resolution vector icons imitating the Facebook UI by deviantART user lopagof. [link]

Project Icon Set

18 vector icons designed by Navdeep Raj for business or corporate blogs. This set includes an address card, bar chart, portfolio, calendar and many more icons. The Fireworks source files are available as well. [link]

Onebit Icon Set

A set of 50 simple and colorful icons by Khodjaev Stanislav. Available in .PNG file format 48×48 only. [link]

Handycons 2

Handycons is a set of 20 unique hand drawn social media icons. The icons come in 4 sizes: 16px, 32px, 64px, and 128px. [link]