Feb 12, 2010
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.
Feb 11, 2010
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.
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.
Feb 10, 2010
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.
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:
Feb 9, 2010
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.
Feb 8, 2010
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.
Beside the absolutely incredible design you will find:
- 1.1 A menu with a nice animated effect on hover state
This tutorial explais how to design an high impact elastic effect to make original web menu using some lines of Javascript code and MooTools framework.
Check out the demo
- 1.2 A sliding post panel.
Feb 7, 2010
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.
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
Feb 6, 2010
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.
Popularity: 3% [?]
Permanent link to this post (119 words, 14 images, estimated 29 secs reading time)
Feb 5, 2010
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.
Feb 4, 2010
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
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“.
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“.
PSDFAN publishes high-quality tutorials, Photoshop freebies, and interviews with designers and artists.
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?“.
Feb 3, 2010
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.
