Advice for New Designers

photo by: D Sharon Pruitt

One of my fellow classmates asked me for some advice today regarding the business side of design. I've been doing freelance work for about 6 years and so I told her a few things that I've learned along the way. Thought they might come in handy for others too.

What to Charge for a Website

I asked a friend of mine who's been a webdesigner for about 10 years now, though, and he said that a typical 5-page website (xHTML and CSS type of deal) would be anywhere from $600 - $1000, depending on what the client wants. If they want more, it will cost more.

What to Charge for Print
The example my friend and I discussed was for a business card and gift certificate. What I do is charge $50/hour, but when I was just starting as a designer, I charged $25/hour. However, a lot of people want a flat rate, so the best thing to do is figure out how long it took you to design your own personal business card.  Multiply those hours by $25 and you've got your flat rate. Make sure you add a couple of hours to your estimate to allot for changes, because there will be changes for sure. People are picky, as they should be.  

The Client Who Turns it Into a Competition and Wants You to do All the Work and Then He'll Decide if He Likes it or Not and if He Doesn't Like it He's Going With The Other Person He Made to do the Same Thing and You're Not Getting Paid
I tend to stay away from people like that. They have a tendency to want free work, or ridiculously low priced work. They have no concept of the fact that it's your time and effort that they're paying for, not just a finished product. If most designers are like me, and I'm sure they are, a little piece of me goes into every single thing I design. Would you give a little piece of you for a ridiculously low cost or for free?

I also look at it this way... It's the same idea as to why bridal shops don't let you take pictures of the wedding dresses. Some people take a picture of the dress, then go to a seamstress who'll create it from scratch for cheaper based on the photo. That's copyright infringement if you ask me. This dude has the potential to do that with your design. Maybe his cousin's brother's kid knows Photoshop and can reproduce it. But, I do understand that you probably want extra stuff for your portfolio. So, if you decide to go ahead with this guy, here's some advice:

1. Make sure you send him low resolution or screen resolution PDF/jpeg proofs with a watermark across everything, so he can't steal it.

2. If you save it as a PDF directly in Illustrator, it saves all the nice vectorness of it. The PDF can then be opened in Illustrator by someone else later and all the vector elements can be stolen and used. So, make sure you save it as a jpeg first and then create a PDF.

3. Don't bust your butt on the initial design. If he decides yours isn't "the one" then all your time and effort was for nothing. (However you could probably edit it later and put it in your portfolio anyway with his name changed and stuff, of course.) Once he says he's going with yours, you can add the extra special touches.

The way I work is I start off with sketches and roughs. I give the client a handful of rough ideas to choose from, so that they're involved in the process early on and you can avoid the whole thing that I mentioned in the subtitle there. Then I polish up the rough that they chose and present it to them again. We go through a series of changes and tweaks and finally end up with a finished product. That way, early on, you can tell if they're the client for you or if you're the designer for them.

One More Thing

It's best to give the client/potential client a quote. Mine is formatted somewhat like this, only prettier because I'm a designer and this one's from a printing company. 

A quote is a good idea because it makes you look more professional and that you mean business. And it also prevents clients from being all like, "oh, you never said that". This way you can reply, "you have it writing, this is what it costs".

Another good reason for a quote is so that you can deal with the whole making changes issue. Clients tend to get picky, and so they should because you're creating something that's going to represent them. But again, sometimes they forget that this is your time and effort. But in your quote, you can specify that the cost includes x number of changes once the initial design is cemented. Then say any further changes cost $25 each (or whatever you deem fitting). So, in case you end up doing 15 more sets of changes where you end up with an entirely new design altogether, this will help you get the money you deserve for your hard work. It's then in writing and there's no wishy-washy-ness later.

I hope this helps somebody out. :)

Making My New Site: What I Learned

 

I think it's pretty fitting that my first post should be about my new site.  But instead of just bragging about myself to the world, I thought I might make it a useful post and tell you what I learned in the process. Some of it might seem second nature to some, but I tried a few things that I hadn't before, so maybe there's a few people out there like me.

Full Screen Background Image

I have a tendency to over think things and I totally over thought this whole filling up the background thing. I did a whole tutorial on it even. Turns out all you really need is a little CSS action.

First, you need to make your background image at least 1920 pixels wide. That way, it'll fill the entire background no matter what size screen.  

Then add this to your CSS:

body {
            background-image: url('your-images-folder/your-background-image.jpg');
            background-repeat:no-repeat;
            background-position:center top;
        }

The no-repeat is obvious. You don't want it repeating if you want that one image to take up the whole background.

The background-position: center top; centers it and makes the top of your image flush with the top of the browser. If you don't have top there, it just centers the whole image, including the top and bottom.

Cool JQuery Rollovers 

I specifically chose to try out a jQuery rollover because I love the smooth transitions it can achieve. For my own site I wanted something subtle. I chose a simple fade in, fade out. I found this tutorial to be super helpful. It even comes with source files. :) http://www.technabled.com/2009/06/how-to-amazing-rollover-effect-with.html 

Basically what it does is uses a jQuery function to manipulate the CSS z-index property. I'm not, like, fluent in jQuery just yet, but this is the gist of what I understand the code to do. (I didn't exactly read the whole tutorial - just as I'm sure not everyone will read all this - because it was about 11pm and my website redesign as my final assignment was due at midnight.)

The jQuery function, which goes in the <head> basically says, "When the mouse hovers over one of the list items that belong to the thumb-over ul property, make that list item fade out. Otherwise, make it fade in."

$(function(){
            $(".thumb-over a").hover(function(){
                $(this).children("span").fadeOut();
            }, function(){
                $(this).children("span").fadeIn();
            })      
        });

The code you add to your own CSS then works in conjunction with this function. Using the z-index property, you're basically putting one thumbnail image on top of the other. So your thumbnail image is visible on the stage until you mouse over and your rollover image is revealed underneath via the awesome function we just talked about.

ul.thumb-over {
    list-style:none;
    margin: 0;
    padding: 0;
}

ul.thumb-over li {
    width:120px;
    height:135px;
    float:left;
    margin: 0;
    padding-bottom: 15px;
}

ul.thumb-over li a {
    display:block;
    position:relative;
}

ul.thumb-over li a img {
    position:absolute;
    z-index:1;
}

ul.thumb-over li span {
    display:block;
    width: 120px;
    height: 135px;
    position:absolute;
    z-index:2;
}

In your HTML, you have both images in the same code like this:

<img src="images/your-rollover-image.jpg"/>

<span><img src="images/your-thumbnail.jpg" /></span>

But the jQuery function only affects the image within the <span> (i.e. your thumbnail). 

So, basically, the you're fading your thumbnail image in and out while your rollover image sits underneath it minding its own business. Pretty cool, eh?

Fancybox vs Lightbox

So, the previous version of my portfolio website was a one-pager. I had intended on adding a cool jQuery sliding transition from one section to another, but I discovered that Lightbox was conflicting with with my jQuery. I learned the hard way that Lightbox's Javascript files don't play nice with other Javascript files. They basically rendered my jQuery useless. 

How did I fix the problem? I have to admit I didn't. Well, not in that version. Time is precious and because I knew a version 2 of my site was part of my final assignment in one of my classes this semester, I just left it. So it did Lightbox stuff, but no cool jQuery transitions.

How did I fix the problem in my version 2? To tell you the truth, I tried Greybox first. Greybox looks really sweet, but my images wouldn't load. Not until the second or third trip through the gallery. Couldn't have that. I heard that this might be because Greybox is old and came before even Lightbox. It's just something I heard, though. I can't confirm it.

Okay, so seriously, how'd I fix my problem in version 2? I found Fancybox . Problem solved. I like that it doesn't look entirely like a typical Lightbox clone. I even customized it a bit by playing with the CSS and the images it comes with.

And that's what I learned while making my new site. :)