The Source For Web Professionals


 

This site is dedicated to showcase only the most useful
web design tools & expert Insight
for web professionals.

The economy is bad. No one’s job is really 100% safe, so it’s time we all bucked up and got our recession bags packed (just in case!). Your portfolio is already gorgeous, but have you created a drool-worthy résumé?

This flimsy one-page document is more important than many people think: the résumé is the first portfolio piece that potential employers see, and if they’re not impressed, chances are they won’t look at the rest of your portfolio. “But I’m not a print designer!” you moan. It doesn’t matter, and I don’t want to hear your excuses! You need to conquer this, because if you’re a great Web designer, you don’t want your first impression to be mediocre.

The Steve Stevenson Challenge

Everyone likes a competition. How about one in which ten good Web designers have to design the same résumé in only a few hours? Meet Steven Stevenson.

With a “less is more” mentality, we’ve selected 10 very simple and impressive design techniques that can drastically improve the performance and appearance of your designs.

The basics first. Because you’ve got to crawl before you can walk, let’s start with the fundamental concepts of simple and effective design.

1. Add Contrast

Sadly, adding extra contrast is one of the most overlooked and under-used techniques.

Screenshot

Joost de Valk makes great use of thin, high-contrast lines that make it easy for the user to distinguish between different section of the page. In the enlarged portion of the above screenshot, you can see that most of the time this contrast is just a lightly colored 1-pixel line next to a dark 1-pixel line.

On the other hand, the “More” and “Go” buttons on his home page have so little contrast that they’re easy to miss even when you’re looking for them.

Here are 8 simple ways you can use CSS to improve your typography and hence the overall usability of your designs.

1. Measure

The measure is the length of a line of type. To a reader’s eye, long or short lines can be tiring and distracting. A long measure disrupts the rhythm because the reader has a hard time locating the next line of type. The only time a narrow measure is acceptable is with a small amount of text. For optimum readability you want the measure to be between 40-80 characters, including spaces. For a single-column design 65 characters is considered ideal.

Screenshot

A simple way to calculate the measure is to use Robert Bringhurst’s method which multiples the type size by 30. So if the type size is 10px, multiplying it by 30 gives you a measure of 300px or around 65 characters per line. The code would look something like this:

This article showcases the most beautiful website designs from the North American sports industry, including ones for news, teams and leagues, sports apparel and more.

Trends In Sports Websites

As in any industry, sports websites have their own trends, as you will see below. However, because the websites showcased here fall into a number of different categories and serve different purposes, not all of the trends we discuss will be relevant or applicable to all types of sports websites.

1. Large Photos
Many of the best sports websites include a lot of images and photos, and many use large photos in the background or a featured area. News websites obviously include a lot of smaller photos to accompany current stories, but team websites and sports apparel websites in particular often rely on large photos as a prominent part of their design.

There have been plenty of posts on the number of awesome javascript, Ajax and CSS techniques and where to find them. Today, we will have a look at 10 creative & rich UI in modern day websites and how you can create similar interfaces using the techniques mentioned in this post.

1. Alex Buga (Slider, Draggable Footer and Animated Menu)

Creative & Rich UI interfaces

Beside the absolutely incredible design you will find:

Adobe Illustrator is a powerful tool for illustrating various elements one can use for web pages and print design. However, it’s important to know what to do in order to powerfully use its tools and achieve certain effects. So, step-by-step tutorials can provide a lot of help, thats why we spent a lot of time searching for Fresh and New high quality tutorials out there and the result was 30 remarkable illustrator tutorials and tips. Let’s take a look at some of the best and Fresh Adobe Illustrator tutorials we’ve found in the Web so far.

Gradient Strokes

New Illustrator tutorials

A quick tutorial about how to create gradient strokes. This simple technique uses the Appearance panel and effects to create editable gradient strokes in Illustrator.

Visit Tutorial

How to Create Vector Clouds with the Gradient Mesh Tool

New Illustrator tutorials

As many of you know, I also run Card Observer, which is a site that showcases beautiful business cards. A few weeks ago, I showed you some of the best Letterpress cards that have been featured on the site, but lately I have been noticing more and more cards being submitted that are being produced using uncommon materials, such as plastic, wood, metal, and even some cloth.

Here are some of my favorites. If you want to see more details about the cards, just click on the images.

Fifth Floor Gallery

Fifth Floor Gallery

Wunderburg Design

Wunderburg Design

Zanzibar

Zanzibar

Grafanna

Grafanna

Sterling Design

Sterling Design

Duffy & Partners

Duffy & Partners

Catalyst Studios

Catalyst Studios

Sack Wear

Sack Wear

Dreamten Studios

Dreamten Studios

Plain Joe Studios

Plain Joe Studios

Jake Mates

Jake Mates

NGAP

NGAP

Geyrhalter Design

Geyrhalter Design

Murillo Design

Murillo Design

Popularity: 3% [?]

Adding illustrative elements to a web design can take it to a whole new level. Illustrations add a uniqueness and character to a design, giving it the ability to make it truly stand out from the crowd. Designers and artists use them in various parts of a design: as backgrounds, as part of a captivating header, or as an accent within the content area.

In this article, you’ll be able to set your eyes on some of the best examples of websites that have chosen to use illustrated elements as part of the design.

1. The Great Bearded Reef

The Great Bearded Reef - screen shot.

2. iwit.nl

iwit.nl - screen shot.

3. MailChimp

MailChimp - screen shot.

4. Erguvan Platin Evleri

Erguvan Platin Evleri - screen shot.

5. Artgeex

Artgeex - screen shot.

6. Octwelve

Octwelve - screen shot.

7. meomi cloud house

meomi cloud house - screen shot.

8. the Octonauts

the Octonauts - screen shot.

9. Stuff and Nonsense

Stuff and Nonsense - screen shot.

10. Antiphrasis

Antiphrasis - screen shot.

11. Richard Stelmach

Richard Stelmach - screen shot.

In this massive collection of resources, you’ll find all sorts of resources including: tutorial sites, Photoshop Brushes, patterns, Photoshop Actions, showcases/collections, and much more.

Photoshop Tutorial Sites

1. Psdtuts+

Psdtuts+ is a weblog and Photoshop site that features high-quality Photoshop tutorials. On Psdtuts+, you’ll find tutorials such as “Creating a Touching Story Scene in Photoshop” and tips and tricks like “Using Adobe Kuler to Enhance Your Photoshop Color Workflow“.

Psdtuts+ - screen shot.

2. Tutorial9

Tutorial9 is a website that publishes excellent Photoshop tutorials such as “Draw a Classy 3D Poker Chip in Photoshop” and “Render a Realistic CD in Photoshop“.

Tutorial9 - screen shot.

3. PSDFAN

PSDFAN publishes high-quality tutorials, Photoshop freebies, and interviews with designers and artists.

PSDFAN - screen shot.

4. Photoshop Ninja

Photoshop Ninja is a site dedicated to Photoshop. It shares tutorials and tips such as “Opening Photoshop layered files as merged files“, “Creating overlapping text layers“, and “Why is my Photoshop layer style or effect not working?“.

Lately, there has been a trend towards incorporating hand drawn elements into web designs, bringing sketches and drawings that we typically see in the paper medium onto the web. Hand drawn elements can be seen in navigation bars, as backgrounds, as accenting elements, or as an entire site theme. They give a design a very unique, out-of-the-box, and organic/realistic look.

In this collection, you will be able to find some of the best designs that have hand drawn, “sketched” elements infused into them for your inspiration.

Bearskinrug

Bearskinrug - screen shot.

Tales Simon

Tales Simon - screen shot.

Sawyer Hollenshead

Sawyer Hollenshead - screen shot.

Kinetic Singapore

Kinetic Singapore - screen shot.

Christian Sparrow

Christian Sparrow - screen shot.

LOW MORALE

LOW MORALE - screen shot.

BootB

BootB - screen shot.

Pointless Ramblings

Pointless Ramblings - screen shot.

Kitty Attack

Kitty Attack - screen shot.

mel kadel

mel kadel - screen shot.

Frank PR

Frank PR - screen shot.

Redemption Maddie

Redemption Maddie - screen shot.

Legwork Studio

Legwork Studio - screen shot.

NJ REBEL

NJ REBEL - screen shot.

Dawghouse Design Studio

Dawghouse Design Studio - screen shot.

Design Jobs on the Wall

Design Jobs on the Wall - screen shot.