• There just weren’t any good classes to take when I started to get interested in web design oh, about 10 or so years ago. Well, actually in the little town I grew up in there were no web design related classes at all, so that narrows the options quite a bit.
• I never liked classes or school in general. I always found it tremendously boring and inefficient. Underpaid, unprepared teachers working with outdated, stiff material that has little to do with the real world. And I guess that today I still associate all sort of “courses” with that type of environment. I might be wrong, but judging by the number of art students failing to find work after graduation, it seems that’s still largely the case.
• Generally in a class you have to wait for everyone to catch up to the same basic level and I don’t find that the best use of my time or money.
• It’s just the type of personality I have. I always liked to explore, figure out how things work and learn by myself, at my own pace (still reading, researching and stuff, just not in a “class” environment). I learned English on my own, I learned to paint on my own, coding, design and so on.

And that’s my side of the story. It saved me lots of money and time over the years, but that’s because, well, I’m me and this is how I learn new stuff.

This of course might not be the case for a lot of people out there who would benefit more by going with the school route. There are certainly a lot of good and talented professionals out there who got their start that way. So I encourage everyone to figure out what route would work best for them.

And for people who are afraid that if they don’t have a diploma, they won’t ever get a job or land a client, that’s just silly.

In all my years of freelancing, I think I’ve only been asked a couple of times if I have any degrees and that was more in the context of small talk. Just showing my portfolio usually gets the job. The point here is that real work and skills are (usually) more powerful than a piece of paper.

You might hit a few walls in getting a job interview, but usually, if your work is good enough you’ll get past the paper work and land the job. I personally know developers who are now working for agencies that deal with huge corporate clients (banks, retailers, ISP) without any diplomas in the field. They’re just good.

So good luck with whatever choice you make, I hope this little article helps to shed some light on my side of the fence.

The design requirements came with a very ummm… special request. The wedding invitation had to have an illustration or a photo of a particular stuffed camel (a toy one, not a real one) that is very special to the couple and travels everywhere with them. So naturally, it had to be on the wedding invites as well.

Well, it wasn’t an easy task, but I’m quite happy with the way it turned out.

First, the obligatory “artsy” photo…

And the original.

Congratulations Pedro and Silvia, can’t wait for the big party!

I’ve never done a wall painting before – actually, I never even thought of doing one! – so after a bit of panicking and some online research I settled for acrylic paints because they dry quickly so I have less chances of smearing the paint all over the wall and they work on most surfaces. Also they’re water based so no smelly solvents!

For the design I went with some japanese-style black and silver flowers inspired by some Photoshop brushes I had laying around on my computer for ages. So yeah, Photoshop brushes on a real live wall! Cool! I wanted a simple design that captures attention but it’s not overpowering. Also black and white works with all kinds of furniture, wall colors and interiors.

So, without further ado, here’s the finished wall painting:

To get the painting on the wall the way I wanted it, I first took a photo of the wall, imported it in Fireworks and played with the illustrations until I had what I was looking for. I then printed the final image and using some simple grids, transferred the design on the wall in pencil. I then filled in the pencil outlines with acrylic paint and that was it. The whole thing took about 4 sessions of 2-3 hours each.

I hope my friend Malgosia enjoys her new wall! :)

It just looks wrong and makes people uncomfortable.

“Sorry, I have something in my eye”

Woo! Ninjas!

Use good photos (duh!)

Good quality photos can make or break a web site so invest some time (and some $) to find nice ones. Also watch out for over-compressed photos saved at a low JPEG quality with artifacts visible, photos with lots of noise due to poor lighting, with poor color balance or poor composition.

Stay away from typical business stock photos (unless you’re trying to be ironic or something)

You know them, the handshakes, the happy call center ladies (yeah, right), the multiracial business teams. Ick. It’s been done to death and has no traces of credibility left.

“We’re a team of young, energetic professionals, willing to put in 110% to satisfy all your business needs and bla bla bla”. It’s really hard to be more bland and generic than this.

Don’t squeeze or stretch the photos, crop instead if the aspect ratio isn’t the same for all photos.

Don’t stretch the photo if it isn’t big enough or it doesn’t fit in the spot.

Make people’s eyes point to the text, if possible.

It’s a great way to guide the viewers eyes in as they instinctively follow the eyes of the people in the photos.

We’re all curious to see what other people are staring at.

Another great example of making the viewers focus on the message: FUN

Choose photos that fit in the rest of the design or are in tune with the client’s other branding materials.

Try to look for similar colors, patterns, style.

The soft pastel colors combined with the simple composition and the cute model make this photo a perfect fit for the kiki&bree website.

A consistent peaceful nature image theme, perfectly in tune with the LogicSource’s branding.

And most important of all – Make the text readable

There are several ways to tackle this.

• One of them is to fade the image into a solid color or background on either side and put the text there, like below.

The text is overlaid on an area with few color variations to optimize contrast.

The image fades to solid color near the edges and the text stands out more.

• Another way is to select photos with a similar copy-space area or background color, if the text is to remain in the same area on all slides.

Similar copy-space area (left) and background (dark road).

• Add a semi-transparent or solid background to the text to make it pop out from the image.

• Add a dropshadow or glow effect – but try to keep to keep things subtle, don’t go for the “Photoshop default filter” look.

A nice example of subtle use of drop shadows and gradients to make the text stand out.

The End

So that’s it! Hope you guys find this post useful and if you know any more tips for designing header images, share with us in the comments!

1. the client must love it – you do need to keep in mind the client’s personal preferences – they will need to approve the final design and if they don’t this project will go nowhere, no matter how good the solution is or how great it would be for their business

2. you, the designer, must love it too and would proudly display it in your portfolio

3. and of course, it should also be good for their business and get them new clients and increase their brand awareness or whatever specific goals they have for the website.

the perfect design solution

Once a design covers all 3, the number of possible directions reduces considerably and there’s much less “shooting in the dark”

To help narrow down the design options, one of the most important things I ask my clients before starting a new design is to send me about 5 links to sites they like.

This gives me straight away a quick idea of what kind of design styles they like: clean, minimalistic, light, dark, grungy, shiny, colorful, monotone, if they have any favorite font styles, if they like big images, big headlines and so on.

To help illustrate the concept better, I thought the best thing to do is to use a real life example from one of my recent projects, done in collaboration with the great guys at Iluminada.

So, about the project:

The Story:

A daycare center needs a new website

The Brief:

Must keep all content on current homepage and reorganize to make it easy to read.
Must have a big header image.
Must have 3 content boxes under the main header image.
Colors must be warm, inviting, friendly and fit in with the existing logo.

The old website:

The links provided:

Screenshot of 5 of the websites the client provided as a reference

The Analysis

Now, the websites the client provided are certainly not the best looking ones, especially not by our web community’s standards anyway. But, if you look closely at the sample websites the client provided, there are several common elements or design patterns:

Fonts:

Tall, blocky, upper case, League Gothic or similar.

The Style:

Shiny, white, bit of texture, clean, bright.

The Colors:

Upbeat, bright, saturated, primary, kid-friendly.

Photos:

Large header photos, vibrant, friendly, warm

Background Colors:

light, mostly white, subtle

So just like that the design is almost half way done, without even opening Fireworks or Photoshop!

My Solution:

And the client’s reaction:

…”I do like it very, very much! Thank you!

I love the colors, layout, prominence of a cheerful, upbeat, hopeful, yet crisp, theme. The bottom line with the diaper kid and upcoming meetings is terrific. Vision, mission look great. The tabs on top also make sense and the features work too!”

Looks like we have a winner! After some minor content changes and after replacing the main photo, the project was pretty much wrapped up.

Another important part in the design was played by the client’s current identity – which I used in some of the colors, the “hand” graphics in the background pattern and icons, but more about integrating the client’s branding into a new website in a future post.

Well, that’s it, I hope you guys found the post useful!

The briefing was pretty simple:  there’s some sort of audio bug on the new Motorola Atrix phone and Anthony wanted a simple website that allowed other users to post a comment and maybe get Motorola to move their asses and fix the thing.

When I mentioned this was a rush job, I wasn’t kidding – the design was built in 1 day and the coding in the next, so 2 days total for design and code.

The Challenge

What I found most difficult about this design is to not make it look like an ad or promotion campaign, like there’s some big company behind the whole thing or it’s some sort of “the 1000th comment gets a free iPhone” scam.

So the design needed to have credibility, appear sincere, and make clear that it’s not a flame-war/rant/my-phone-is-better, it’s a genuine effort to fix the phone.

The Solution

Also, check out the coded version.

The Breakdown

The wireframe:

Before starting out, Anthony provided me with the wireframe below.

Although I had quite a lot of freedom to move things around, after I quickly tried several different versions – with the phone image on top, on the right side, smaller, bigger, cut off, I decided that the original one had the best flow and focused on the right area – the comment form.

The background colors:

I chose a dark background color mainly because the phone stood out too much on a lighter background and I wanted the main focus to be on the action area – the form.

After trying several colors for the background, trying to work in some red – the color Motorola uses on their website, I realized it all looked too much like a phone ad – too commercial and aggressive – so I decided to stick to a more neutral dark gray, with a tiny bit of noise added to it to make it less shiny.

The fonts

For the fonts, I wanted something modern, non-aggressive, friendly, that is a bit similar to the Motorola font and is also available for use with @font-face (legally). So after a bit of digging around, I went with Museo Sans.

The extra touches

I came up with the idea to use the yellow stripes pretty late into the design, after I had basicaly all the elements in place, the fonts and the background colors and I just needed something to make it pop and give it some personality.

I also needed some contrast color to use against the gray background, so after trying several colors – red, light, blue, green – when trying out yellow, I immediately thought of construction sites and thought it would be a great metaphor for the whole design – the phone is still under construction.

The red info box was inspired by the phone’s interface with the shiny reflections and icons. And I also finally managed to work some red in without looking too over the top.

The End

So that’s the story behind the design! Hope you enjoyed it and found it useful. Also, don’t forget to check out the coded version too. The red info box and the form sections are expandable to accommodate more text and I’ve also used some transparent PNGs and some CSS3 effects here and there so be sure to take a peak in the source code!

I then imported the photos into Photoshop and added some bits of color to the smoke. Not terribly original, I know, but what the hell, it’s fun!

And here are the results! The photos are available under a Creative Commons license so feel free to download and use them in your projects (commercial or not), in wallpapers or whatever. Click on the pics for the large version.

The setup

And here’s a quick shot behind the scenes, with my trusty assistant cat, Pisu. So the setup is: wireless flash, continuous light, black background, smelly incense stick and of course the camera.

So that’s it, hope you like them and find some use for them! :)

So what should you pay attention to to save you all those extra hours of work and headaches? I’ve split it all into three different sections, all detailed bellow:

• Exporting Sliced Images:
  make the website look crisp and fast loading by using the right image formats.
• Getting All the Text to Look Right:
  check the fonts, line height, color, padding and margins.
• Alignment Issues:
  get the whitespace between layout elements right – align the logos, buttons, text blocks, photo thumbnails.

Before we begin, let me clarify that this is more of a design guide and not a CSS/HTML how-to. I assume you’re familiar with CSS properties, but just miss a little design insight to get it all right the first time. If you don’t deal with paddings and pixels and grids all day, it’s understandable how you could be a bit well, insensitive to all that design stuff.

Also, the screenshots are from Fireworks, but it’s more about the principles, not about what software you use.

1. Exporting Sliced Images

I’ve already covered this in a previous article “Exporting Sliced Images: Choosing the Right Format and Settings“. I recommend you read it in full, but here’s a quick summary just in case you’re busy or something:

• export sliced images that are not photos in PNG24 format whenever possible (instead of JPEG or GIF).
• use GIF for solid colors (although you should try to make it work with CSS first)
• export JPEGs at at least 85% quality or 80% quality for really large images (think headers in sliders).

Getting the All the Text To Look Right

Properties panel in Fireworks.

Check the Font Family Used

Always check the font families the designer used. Even though the font looks like Verdana, check to make sure and use the same font in the CSS file.

If the designer used some funky font in the headers, check online resources like FontSquirrel and see if there’s any (legal) way of using that font with @font-face. Or sIFR. Or Cufon. If all fails, use an image and inform the client about that – image headers are difficult to update – and talk about using other font options.

Check the Font Size

Make sure the font size in the CSS file for the paragraphs, links, headers and other text match those in PSD file.

Check the Line Height

Check the space between lines of text, it’s very important for readability. Usually it should be above 1.2em or 16-17px for paragraph text, but it depends on the font used – I use 19px on my blog.

Checking the line-height in the Properties panel in Fireworks.

Check the Colors

Colors can be tricky. It might seem the color for the body text is #333333, but it might actually #313131 which is a slightly darker and more brownish tint of gray. It’s a very subtle difference but if you’ve been staring at the layout for weeks like the client has, you will notice.

Check the colors for  links, headers, paragraphs and match them in the CSS file.

A slighter darker or lighter shade of gray can make a big difference (especially to the client)

So, to sum it up, here are the things you should check:

• font families
• font sizes
• line heights
• margins and paddings
• text colors
• color of links

Alignment Issues

A good design should be based around a grid

Check the vertical white space (also called negative space) above, below and left and right of different elements in the layout. You should pay special attention to elements like logos, buttons, thumbnails, icons, headers and text blocks.

Check the Padding and Margins

Check the padding and margins between paragraph blocks and between headers and paragraphs and use the same values in your CSS file. Also check the margins between the container box and the text itself, the left and right margins.

A quick way to check the paddings is to just draw a rectangle, write down the width and then delete it.

Get the Buttons to Look Right

Most of the time, text in buttons should be centered vertically and horizontally so make sure the padding at the top and bottom is equal, the same goes for the left and right padding.

So there you have it! If I’ve missed anything or if you find this post useful, just let me know in the comments!

Before we start, let me first explain what I mean by “effective portfolio”… well, to put it simply, if you have an effective portfolio you get the clients you want, the budgets you want and you don’t have to waste time sorting through dozens of requests for projects you don’t want to work on or don’t have the skills for.

So, in no particular order, here they are…

Some tips for building an effective portfolio website

1. Keep SEO in mind

If you’re just starting out and don’t have a name for yourself yet, you’ll have to make your portfolio very SEO friendly so potential clients can find you.

Focus your SEO on clients from your neighborhood, town, region or country that are looking for your specific skill set. Try to target a niche instead the whole market, so don’t go for generic terms like “web designer”, use something like “web designer from Tampa Bay, specializing in custom Magento extensions” for best results.

2. Don’t hide your work

Small thumbnails can set up false expectations of how the final artwork looks like and require an extra click to get an idea of the quality of the work.

When displaying your work, keep it easy to navigate and scan, give it a simple styling and let it shine on it’s own.

Try to avoid rotating, blurring, desaturating, hiding between jQuery sliders, using tiny tiny thumbnails or covering the artwork with the client’s name. Also stay way clear of flash or jQuery gallery scripts as they can be pretty frustrating to navigate and are not very original either. And you want your portfolio to be as memorable and as original as possible!

If you decide to go the “thumbnail” route, try to make them as big as possible and make them resemble the final artwork. Also, try to convey the feel of the entire work so don’t do a zoomed tight crop of some random little image from the design.

Remove any watermarks from the photos or icons you used in the design before you put it in your portfolio, they might distract from your work and suggest the project failed for some reason or other – a wrong signal to give to potential clients!

3. Be selective of the work you display

Only display your very very best work. Select your best 5 or 10 projects and focus on them, you don’t need to show the last 30 project you worked on. Also, if you worked on a project that started ok but then the client decided to make some “improvements” – if you know what I mean – then show the world what you think is the best version.

4. Keep your portfolio easy to navigate

When a client is browsing around for a web designer, they go through dozens of portfolios in a very short period of time. Your job is to make their experience on your website as frustration free as possible so don’t use complicated, animated “clever” navigation, keep it simple. Time is money, as they say!

Clear names for the navigation links like “work” or “portfolio” instead of “my playground” work best.

5. Stay away from the latest design trends

Over-used design effects

Make your site memorable. Don’t use highly popular slider scripts like cu3er or jQuerry sliders (if you must, at least try to customize them a bit), avoid lightboxes or custom “cute” vector illustrations of yourself and don’t use the results of popular Photoshop tutorials as the main artwork of your website – like text effects, bokehs and so on. Don’t make your website outdated before it’s even launched!

6. Add some personal touches

It’s a good idea to include a photo of yourself for a more personal connection with your audience. Just make sure it’s not too creepy, silly or embarrassing, you want people to trust you with their projects and money after all!

Try to incorporate a bit of yourself in the website too – your hobbies, your lifestyle, your passions.  For example, I used the nature/canvas theme because I love nature and I also paint – pretty simple.

7. Be creative with your typography

Screenshots from different portfolio websites:
League Gothic seems to be a bit too popular right now

Carefully choose the fonts you use. You should probably stay away from very popular/over-used fonts like Archer, Museo, Gill Sans or League Gothic. Try to be original and stand out from the crowd!

8. Define your target audience and build your website around that

Think about who would be the perfect client for you: do you enjoy working with agencies or do you want to work directly with clients? Low-budgets, big-budgets? Tech-savy clients or totally clueless about the web?

There is no right or wrong answer, it’s just a matter of your personal preference. But based on your choices you’ll decide the tone of the website, the marketing material, your SEO keywords and everything else.

9. Make it very easy for people to contact you

Don’t put extra steps in the way of people who want to get in touch with you so don’t use capchas, puzzles, drop-down contact forms revealed by little arrows or other creative gimmicks like that. Best to deal with a bit of spam than no work!

Try to list a few different contact methods, like phone, IM, Skype and you should definitely have a basic contact form, with as few fields as possible – name, email and message should do.

10. And most importantly, don’t over-design your portfolio

It is tempting to unload your whole bag of design tricks and show the world what you can do, but try to keep it simple and stick to just one or two visual styles – minimalist, grungy, apple-shiny or whatever else you fancy. Try not to let the frame distract from the painting if you know what I mean.

Some Examples

Here are some portfolio websites that I think are quite effective:

http://www.mikeprecious.com/
http://31three.com/
http://cabedge.com/

Fireworks CS5 from Adobe

Most of my designs are made entirely in Fireworks. The application itself was built around around designing web and application interfaces and it’s got the perfect blend of vector and bitmap tools.

The interface is pretty straight-forward and the menus are decently intuitive and don’t feel as cluttered as in Photoshop. So it’s really great of rapid prototyping and trying out a lot of ideas in a short amount of time.

I now use the CS5 version which I find to be a major improvement over CS4 and CS3 in stability and speed on a Mac platform, meaning it doesn’t crash every time I try to draw a line anymore. Yay! Plus it’s got lots of nifty little new features like “snap to pixel”, lock aspect ratios and more. So it’s definitely worth the upgrade, especially if you’re using a Mac.

Photoshop CS5 from Adobe

I don’t use Photoshop all that often, I mostly open it to add some brush strokes to the designs (like coffee stains, light beams and so on) or to do some more complex photo retouching. It’s a very powerful tool, but I find the interface not very intuitive and it does take a while to get around it. So for rapid prototyping I mostly use Fireworks.

The Code

CSSEdit from MacRabbit

Is simply a great tool for editing and writing CSS. I especially like the x-ray function which allows me to peak in to the code of live websites and modify the CSS properties in real time and see how everything ticks together. It’s packed full of other useful little features so I can really recommend this one to all hard-core CSS coders.

Espresso from MacRabbit

I use it to hand-write my html code. It loads pretty fast and I really like the nice and clean interface. Also the custom font for the code view!

Dreamweaver from Adobe

I’ve used it for quite a few years until I started coding everything by hand. It has a lot of features, but to be honest it’s a total over-kill for html/css work. If you’re a beginner, don’t use Dreamweaver as a crutch to do all the “dirty” html work for you, it will only slow you down in the long run. Like it did me.

It can be pretty handy if you need to insert large blocks of text content into a page. Formatting the text is pretty easy (adding h1, h2 tags, paragraph tags, classes). Also the find and replace function is pretty cool too. So I do open it up from time to time for that.

Other Useful Apps

LittleSnapper

I use this for capturing screenshots of selected areas, application screens. It also makes a great file manager for my stock photo collection and other bits of inspiration I pick up from the internet.

TextExpander

An awesome productivity tool, I use it for inserting HTML and CSS code snippets, answering emails and yeah, you should definitely check this one out.

FontCase

So far, it seems to be the best solution for my 1800 or so font collection. Tends to crash or freeze when viewing grunge fonts in list view, but other than that it’s ok and the interface is pretty nice and clean.

BrushPilot

It’s a nifty little app for previewing your Photoshop brushes without actually opening Photoshop. Great for large brush collections.

FileZilla

Pretty sturdy and featured packed FTP client. Also, it’s free! The interface is a bit challenging though and could use a refresh.

VirtualBox

A good virtualization tool where I test my websites under different Windows versions and in different browsers like IE6, IE7, IE8, Chrome, Firefox for Windows and Opera.

Some finishing words…

It is very important to remember that a piece of software is just a tool, it doesn’t replace or make up for real knowledge of design foundations, programing basics or good CSS skills. And just getting a copy of Photoshop (legal or not) definitely doesn’t qualify you as a designer.

No program is ever perfect or “complete” and there’s nothing more pointless than arguing on the internet which is the best code editor and so on and refusing to see and try other options as well. So explore, try out new things and stay in touch with the newest developments. Use the tool that’s best for that one particular job, even if you have to switch apps from time to time during your workflow. And most of all, don’t forget to enjoy the work you do!