PSDTUTS Updates

8 Ideas, Techniques & Tricks for your Web Design Toolkit

Posted: 04 Dec 2008 02:59 PM PST

As important as information and interface design are, it’s the satisfied feeling of designing something that just plain looks awesome that keeps us going during those times when the creative well is dry, when you’ve stared at a blank canvas for hours, when you’ve saved a hundred attempt.psd’s, and when you’re fed up of design. It’s because you know that when you have that finished, polished, veritable work of art up on your screen, and you’ve switched Photoshop into full screen mode and you’re looking at it from different angles around the room, and you’re basking in the glory of your perfectly positioned pixels, you just know that this is the greatest profession in the world!

The 3 Components of Web Design Series

This article is part of a series on the three components of web design, here are links to the other articles

The 3 Components of Web Design
9 Information Design Tips to Make You a Better Web Designer
8 Ideas, Techniques and Tricks for Your Web Toolkit
7 Interface Design Tips Every Web Designer Should Know

1 - Don’t be Satisifed with 1 Iteration

When designing a website for a client you often have to provide a couple of different design concepts. When you feel like you’ve gotten it right the first time, it’s pretty annoying to have to dredge up another version which you’re pretty sure won’t make it out of Photoshop. But over time I’ve come to realise that it’s actually a good idea to make more than one version, no matter how happy you are with the first one.

Whether it’s multiple iterations of the same design, or multiple designs, generally speaking, more time does seem to get a better result. That’s not to say that you should keep adding to a design, in fact it’s often better to take things away. If you are doing multiple design concepts, you can sometimes successfully merge the best elements of one design into another.

Technique: PSD Snapshots

Snapshots are a simple way to experiment with a design without losing anything or making bazillions of copies

Photoshop has a cool feature that lets you make snapshots of a point in your document’s history. Once you create a snapshot you can flip back and forth between different snapshots as well as the first history point and the most recent 20 or so steps. What this means is you can keep taking snapshots and then trying out new lines of thought to see where they take you. But BEWARE, snapshots aren’t saved when you save a file, so you have to go through individually and save each snapshot at the end of the day.

Here’s how you take a snapshot:

Open a PSD file you’ve been working on
Make a couple of changes
Open the History Palette (Window > History)
Down the bottom of the History Palette click the tiny camera icon
And you should now have a snapshot! You can now flick between the snapshot and the first history screen

2 - Learn a Library of Styles to Draw On

There’s so many awesome styles and looks around, galleries like BestWebGallery are a great way to see them

As I’ve mentioned previously it’s never a good idea to just hop on the bandwagon of the latest trends and use certain styles blindly. However, it’s perfectly fine to use a certain style when it’s appropriate. So if you’re designing a site that merits a nice, clean web 2.0 look, then it doesn’t mean you should avoid doing so, just because that happens to be trendy at the time. Similarly if you are designing a site that merits a nice grungy, distressed design, then if the shoe fits, wear it!

So with this in mind, it helps to have a library of styles to draw on. When you’re drawing a blank when starting a new project, it can sometimes be good just to fall back on a predefined stylistic choice and then let that guide you. Inevitably you’ll wind up with something totally different to anything you’ve designed before, and it’ll at least help get you started.

But be very wary of using the wrong style just because it looks cool, and not because it is appropriate for the client / message / content. The only antidote to doing this is to know and have a lot of different design styles. How do you "learn" design styles? Well you can start by observing and mimicking them. I love surfing through galleries of great web design and absorbing visual ideas, seeing what types of fonts work with what types of looks, and generally learning other people’s techniques. When it comes time to create my own designs, that information is in my head somewhere, but when it comes out it has the unique twist of the project I’m working on as well as my own creative ideas.

3 - Throw Objects around to Look for Happy Accidents

When I designed RockablePress I was just drawing random rectangles and decided that the sidebar looked kinda neat being a bit off balance, it was a happy accident.

Some of the best designs I’ve ever worked on were the result of what a co-worker of mine once called "happy accidents". You know when you switch off a layer, or accidentally paste in the wrong illustration, or swing the Hue slider too far, and all of a sudden you look at your screen and think "OMG this is design gold!"

I think we all wish we could manufacture amazing design ideas on cue, but let’s face it, sometimes you go to the tank and you’re running on empty. Happy accidents will often kickstart your creative thinking, so it makes sense to not only run with them when they happen, but to encourage them by messing about. I sometimes just move shapes around arbitrarily, try out different colours or do other "random" things to see if I can run into something I never thought of.

4 - Create a Theme Around a Visual Element

TabCorp by DTDesign takes asterisks to a whole new level

Something that I find works well, especially on sites with less inherent visual design (think corporate sites) is to make a play on some visual element. For example you might use dotted lines in your design, then you could mirror that theme in your menu, in horizontal separators, in photo collages, diagrams, as bullet points and so on. There are tons of different visual elements you might pick up and use as a theme, examples include shapes, corner types like curves or diagonals, patterns, text characters like brackets, and so on.

Of course you have to find a balance between a subtle mirroring and going over the top, but it’s a useful technique to tie a site together into a consistent theme - especially as I say if you don’t have much else to work with!

5 - Clean Up Every Pixel

Take care of pixels and they’ll take care of you. Check out my article on polishing a web design

I’m rather fond of saying that web design is all about the pixels. Visitors to the websites you design will be looking at your work up close and personal, often with tired eyes and itchy mouse fingers. It’s important to look after every pixel on your page and neaten and sharpen and tidy so that your design is crisp and clear.

This means ensuring your text is well spaced both between letters and between lines, that your edges are sharpened and pixel perfect, that graphics are sharpened (but don’t go too far and oversharpen!) and that you make use of techniques like 1px outlining to make everything leap off the page.

A little over a year ago I wrote a tutorial here on PSDTUTS called about polishing a website design which has a lot of information about sharpening and cleaning up a site design.

6 - Use Structure!

Wilson Miner’s beautifully designed site relies on structure to look awesome!

Because I taught myself web design, there are some really basic design principles I missed out on learning early on. A couple years after I had started making websites I joined a local design association and met a guy named Matt Leach who went on to be editor of the underground Empty magazine. Anyhow Matt did two things for me for which I am eternally grateful. The first is he introduced me to my lovely wife Cyan (yay!) and the marginally less important second is that he taught me to use structure in my design.

At that time I used to just throw things on a page and sometimes things lined up or were evenly spaced or kinda used a grid, and sometimes well they just sorta fell how they fell. Matt critiqued a design I had done and showed me the wonders of alignment and spacing and I’ve never looked back.

If you’re not already doing so, spend some time doing these things:

Evenly space things
For example if you have some text in a box in your sidebar, it’s usually a good idea for the text to be equidistant from the top and side. It’s a simple habit, but makes the box look balanced and uniform.
Line things up
If you have a bunch of boxes, a logo, some headlines, some text, all roughly in the same position you should be lining up the edges as much as possible. There are some tricks to this in that some letters in headings shouldn’t be exactly lined up - the best example is a capital "T", or if you have text in a box you have a choice between lining up the edge of the box or the edge of the text with the other elements. The more you practice aligning and the more you look at how other people and designs do it, the better you’ll get at it until it becomes instinctive and you’ll find it starts driving you crazy when people don’t align things properly
Use Grids
Grids are an extension of lining things up. Here you’re predefining a set of vertical and horizontal spaces and then sticking to them (with variation). Do you have to do this by actually drawing in guides and column lines - not really, personally I do it mostly by just guessing and "making it look right". But of course the more complex the grid and use of it, the more you may want to use guides and helpers.
Be Systematic in Font Sizes and Families
A rookie mistake is to go crazy with typefaces and mismatch sizes, fonts and colours. While variation is good, you also want consistency. It’s best if you have 1-3 typefaces you are using and you do so completely consistently.

7 - Now Mix in Some Unstructured

Jay Hafling has a site that is actually very structured but it feels unstructured thanks to some well placed design elements.

Once you have structure in your design and you’ve gotten used to aligning and being ordered and systematic, only then is it time to break out and start mixing things up. It’s the old adage that you have to understand the rules before you break them.

Mixing some unstructured elements into a structured design is a really nice way of getting a result that looks ordered and comprehensible and yet isn’t boring. Your main aim is to break out of the structure using a couple of bold visual elements, to vary up spacing, typefaces and use of your grid, and yet have an underlying structure.

Actually you can even just completely break out of structure altogether, but it’s pretty damn hard to do well. A famous designer who is known for breaking rules - largely to do with typography, but also with grids and design structures - is David Carson.

SmashingMagazine has a bunch of articles about grid-based design, including this one about breaking out of the grid by our own PSDTUTS editor Sean Hodge.

8 - With every project, do one thing you’ve never done before

When I designed Creattica Daily I decided to try mixing up the comment form a bit, it was quite a cool result and I’ve since used that layout on three other themes.

If I could give one piece of advice to a new designer it would be to make this a personal design habit: With every single project you take on, do one thing you’ve never done before. Whether it’s a new font, a new grid, a new visual style, a new colour scheme, a new graphic effect, a new menu structure, a new technology, anything. Even if it means the job takes a bit longer than it should, even if it leads to a couple dead ends you could have avoided, even if it means you have to spend a bit extra to buy a new font, just do it.

This habit will do a number of things for you. It will force you to constantly expand your horizons as a designer. It will keep your work feeling fresh. And it will prevent you from falling into a design rut and just pumping out the "usual". It’s a habit that you can take on early in your career as a way to become better, and then long after you are established it will keep paying dividends.

If you only take one thing away from all these Web Design Week posts I’ve been working so hard on, make it this: to habitually push yourself as a designer, to try new things, to experiment, to always be learning, and to never stop finding joy in new techniques, styles and ideas.

Part of Web Design Week

This week our sister site ThemeForest launched a whole new category of items to sell that are particularly relevant to PSDTUTS readers - namely Photoshop Templates. The new category means you can now design and sell Photoshop designs, as well as regular Web Templates and WordPress themes to earn a side or even full income. And on the flip side if you’re coming up short on inspiration, you can get a kickstart by grabbing a PSD design from ThemeForest. So to give the new category the launch it deserves, all this week I’ll be bringing you articles and tutorials on web design as part of our PSDTUTS Web Design Week.

14 Quick and Slick Portfolio Templates (via ThemeForest)

Posted: 04 Dec 2008 09:56 AM PST

Having an online portfolio is pretty much a no-brainer these days. But all too often it’s the old story of the cobbler’s children who have no shoes - or in our case the designer who has no time for their own portfolio. Whether it’s because there’s too much work on, or because you can’t settle on a design, or because you’re somewhere in the middle of building the "perfect" portfolio, sometimes you just need to get something together, and fast.

If that’s the case, you’ll be interested to see the fourteen neat portfolio templates listed below - some for WordPress, some just HTML - that with a pinch of customization, and filled with your own work will have you up and running in no time.

So I should point out that in case you hadn’t noticed with all this Web Design Week stuff - that ThemeForest is owned by PSDTUTS, or PSDTUTS is owned by ThemeForest … whichever … so yes this is Collis cross-marketing shamelessly!

Excellent Portfolio Articles to Read

Before we get to the templates, you might also like to check out these great articles about portfolios (that by a weird coincidence are all written by PSDTUTS staff):

Creating the Perfect Portfolio via Digital-Web
Creating a Successful Online Portfolio via SmashingMagazine
Build a Killer Online Portfolio in 9 Easy Steps via FreelanceSwitch
The Secret to Getting a Lot of Web Design Work via FreelanceSwitch

WordPress Portfolio Themes

WordPress is not a bad option for a portfolio, because it means keeping it up to date won’t be such a chore. If you’re used to the interface you’ll know how easy it is, and if you’re not, check out this Getting Started with WordPress article. There’s also lots of web hosts that provide 1-click installs of WordPress - check out WordPress’s list (that way the affiliate payments go to the open source project).

So here are some of the best ThemeForest WordPress portfolios, they all go for about $25.