Tag Archives: user interface

The Difficulty of Pricing Design Services

pricingdesignservices
Doing web design as a career and not just as an (expensive) hobby is something I’ve been tumbling about in my mind for quite some time now. Instead of watching money go down the drain every month for hosting, and every year for my domain name, why can’t I use my skills to monetize my sites?

But it’s a harder decision than that. There are, as I’ve unfortunately found out, many roadblocks to making a success of yourself in web design, not the least of which is the knowledge required to do it. But for those who wish to pursue it as a career, there’s one final hurdle to jump: how to price your design/development services?

Today’s article focuses on the 4 most important concerns any would-be designer/developer needs to figure out before jumping into a career:

#1: People need economical services, not exorbitant prices.

As much as you might think you’ve trimmed costs, somebody will always want the price lower. These days, most people can’t afford to pay a web designer/developer much money unless they are part of a corporation. You have to find the balance in pricing between “selling yourself too short” and “never getting any clients.”

I found this very difficult when I was trying to price my designing abilities. I generally overshot what most people wanted to pay for maintenance services, and undershot the original layout and development price. Finally, I took to writing it all out: what I valued my coding skills at, what I valued my graphic design work at, etc. I came up with a list of prices I could live with:

HTML/PHP Coding (Page Coding Structure)

  • Each Page of Content: $10.00
  • Main Page Layout Coding: $12.00

Graphic Design of Page (Visual Layout)

  • Each large image (layout pieces): $20.00
  • Each small image (icons, buttons): $10.00
  • Full layout (1 page, with images and appropriate coding): $35.00

Layout Mockups

  • Each mockup beyond the first: $7.00

Are these prices exorbitant or economical? To be honest, I’m not sure. But I have strong reasoning behind each of my prices. Given that it takes me about 30-45 minutes to put together a fully-debugged page of anything, and 45 minutes to an hour to make small images of any good quality, I reasoned that 10 bucks covered that time investment that I put into creating a quality product. I then scaled up the prices on large images, full layouts, etc., using these price baselines.

You’ll need to determine what your own prices will be for yourself, taking into account how much money you need to make and how low on prices you’re willing to go. Since I want to help individuals and maybe a few small start-up businesses, I wanted to make sure my prices would be accessible; your price reasoning and money goals may be different.

2. How much work do you want to put in?

When people say “I need a web designer,” they sometimes mean that they need a little HTML-driven personal site, and sometimes they mean that they need a huge database-driven multi-user site. You have to determine for yourself what kind of work you want to put in. If working for the “big guys” fires your engines, then by all means go for it! Just remember that it will be a LOT more work than likely any of your personal web design projects have been.

You also have to take your lifestyle and current available time into consideration. If you want big-money projects, but web design is only a side business for you, you will likely run into trouble trying to keep up your time commitments. Web design is one of those things that you can dip your toe into or dive in completely and still be okay; however, you have to take on the jobs that are sized for your time allotment.

For me, personally, I am not experienced enough yet in design to where I’m comfortable pitching my skills to corporations and the like; likely, they would not even look twice at somebody like me who’s completely self-taught in this field. I’m more comfortable working with individuals who need personal sites and perhaps small business sites because I simply don’t have the knowledge yet to do large-scale sites. Neither do I have the time allotment in my schedule as of yet to completely devote myself to a web design career–I have many different interests and am enjoying pursuing them all. Thus, smaller projects work better for me overall.

3. Do you do design, development, or both?

This is one of the huge stumbling blocks I found when first trying to decide on pricing my designs. Did I want to do just layouts, icons, and buttons, or did I want to do just HTML and PHP coding? Or, instead, did I want to offer both types of design services?

For people who do one or the other very well, you may be better off to go ahead and specialize in either the graphic design side or the coding side of web design/development. If you have wonderful visual design skills, then you might have a great career in web graphic design awaiting you. Conversely, if you’re a “code ninja” and can make sites that function beautifully with scripts and databases, you can easily specialize in web development with no problem.

Now, if you’re a designer like me with some skills in both web design and development, you’ll likely want to offer both design and development services, so as not to shut out clients. I don’t do awesome digital illustration, nor do I write my own super-sleek web applications, but I can write HTML/CSS and design a page. These skills are still marketable, regardless of the methods.

4. Don’t sell yourself short—make a contract!

When trying to figure out how to price design services, don’t let anything slide by for free. Some unscrupulous customers may want you to do more than you first bargained for, such as saying “Well, I thought icons and buttons would just come with the layout design–can you go ahead and make me some?”, or “Hey, can you add about 5 more pages? I just realized I need more pages about these other topics.”

That’s why I suggest making a contract beforehand, so that both you and the client know exactly what needs to be done and how much money it will cost. Getting the contract in unalterable writing, either on paper or in a PDF file, keeps anyone from falsifying the contract terms later. That way, if the client wants you to do something extra that’s not on the contract, you can simply refer to the document and say, “I’ll be glad to do this for you, but we’ll need to add this to the contract and re-total up the price.” Clients changing what they want done is okay–it’s just that you need to be compensated for extra time and effort investment.

5. Paid by the hour or by the project? I think it depends on the situation.

There’s a big debate in the web design world about whether you should be paid according to the number of hours you’ve worked on a project, or whether you should be paid according to the size of the project you did. I thought that I was solidly on the side of “by the project,” until I started trying to price services myself. Now, I think it depends on the type of work you’re doing.

For One-Time-Only Projects, Get Paid by the Project

If you’re doing a one-time-only design/development project–say, if a client wants a layout and coding to go with it–then I’d likely choose to get paid by the project. Since you’re not going to be doing ongoing maintenance, and assuming you’re going to complete the work in as quick a time as possible, asking for payment based on the number of images you made and the pages of code you created seems to be a better fit than asking to be paid based on hours you worked.

For Ongoing Projects, Get Paid by the Hour

However, for continuous maintenance job on a website, I’d personally get paid by the hour. Since you’re likely doing daily to weekly maintenance, you need to be compensated for that time you spend each day or each week. It’s not really a “project” in and of itself–it’s keeping up the quality of the project by checking in on it and making sure things are still current.

This is, however, a personal decision that each web designer has to make for himself or herself. These are simply my reasons for choosing which type of payment style works best for me.

Summary

If you want to do web design/development as a career, you need to consider methods of payment, client relations, type of work done, and contracts. This all goes into how you want to price your design services. I hope this article has helped jump-start your own thinking, and given you some food for thought!

How Does Web Design Affect The User?

affecttheuser
We designers often feel saddled with the need to make our layouts compact and yet readable, everything beautifully-designed and yet fast-loading. And often, in the fever of design, we end up forgetting to make our pages actually usable (guilty as charged). When we’ve spent so much time with our graphic design creation, we tend to see it more as an extension of our pride and effort rather than an entity that needs to be intuitive and useful.

Based on this tendency, I have created a checklist for creating web designs that are both graphically pleasing and user-friendly. Bear in mind, most of my experience comes from my personal preference, but it also comes from many years of trial and error in web design. Beauty is still in the eye of the beholder, but usability is on trial today.

Color/Pictures

Do the design’s colors draw attention where you want it most?

In general, users’ eyes are attracted to the brightest or most interesting-looking color first. In your design, is there color beside or behind the element you want users to pay attention to first? If there isn’t, your users might be momentarily confused as to where to look first. (See point #3 for how to choose an interesting color that doesn’t take over the whole page.)

Do the pictures in the layout enhance the content?

When we design layouts, we can easily get too caught up in how pretty the pictures look in the layout, how well we’ve blended several pictures, etc. But we have to make sure that our designs’ pictures don’t take away from the content, but instead offer our “brand” or otherwise identify our site in the user’s mind.

Your graphics can be simple or complex, incredibly detailed or pixelated, but it’s got to make sense with the rest of the site. A grungy design can take away from a sleek technology-based site, for instance, and vice versa.

Do the colors “go” together?

Using complementary (opposite) colors in a web design can work to great effect when trying to draw attention to important elements (see point #1). But if there are way too many colors going on, the site design can cross the line between funky and tacky (like wearing too many patterns at once). Likewise, if your site has a monochromatic look, it may seem boring to users’ eyes. You have to throw at least something in there to break the tone-on-tone look, otherwise users won’t know where to look, or they will be turned off and navigate away from your site.

My fix: put in at least one contrasting or vibrant color into your layout, and for the rest of your color scheme, select colors that harmonize with each other. Then, you’ll have an “accent” color that draws attention to what you want to highlight, without overwhelming the rest of the page.

Content Organization

Is it easy to find site navigation?

I’ve seen it many a time–site navigation that is so darned tiny you can barely see it, and it’s tucked away close to the bottom of the page where nobody is going to find it. Place your navigation at or near the top of the page, and make it big and bold so your users immediately see it–otherwise you’ll have a lot of frustrated users on your hands!

Is it easy to keep reading the page?

Headings, subheadings, and a good amount of white space are essential, especially for long articles (such as the one you’re reading right now). If text is crowded together with no paragraph breaks, no headings, etc., then it will suffer from “Wall of Text” syndrome and no one will read it.

Is it easy to figure out where a particular page is located?

We designers can be awfully vague when we name our navigation links! Be careful that your navigation categories make sense and are immediately recognizable…even if this means typing a few more words into your navigation panel/bar than you’d really like to. (For instance: “Layout Info” is much more meaningful than just “Site Info”.)

Fonts

Let me preface this by saying that Web designers have long been trying to outdo each other by using the prettiest or most complex fonts they can find in their graphics. Nowadays, the font battles continue even on regular text in blog posts and pages, since designers have found custom font tools such as Typekit. (I still stick to the Web-standard Verdana, Garamond, Arial, Times New Roman, etc., but many designers have gone over to using custom fonts for everything.)

Fonts do, however, tell users more about our content than perhaps we intend; one funny chart about fonts’ true meaning (with a bit of bad language) puts this competition over fonts in perspective. (I read this chart and thought, “Finally, somebody else who can’t tell the difference between Helvetica and Arial!”)

While this lends a humorous angle to the “font wars,” we as designers do have some serious concerns to address when we choose fonts for our designs:

Is the font style easy or hard to read?

We often forget, in trying to make our site look inventive and cool, that the font actually has to be reasonably legible. Overly cursive, decorated, or symbol-like fonts may look really unique, but it makes it almost impossible to determine what letter is which, especially on small resolutions. When we choose fonts, we must make sure that our users can still read our content underneath the “icing” of the font. (Pet peeve: really cursive font that is set to a tiny size. STOP. DOING. THAT.)

Is the font size big enough?

Before you choose 10pt font for your body text, ask yourself: do you like looking at pages and pages of text in 10pt font? Most people will say that they don’t. Many web designers, however, resort to using 10pt font (and even smaller!) to try to cram all their content onto one page without the user having to scroll. This is not the best way to draw users to your site–if it’s hard to read, they’ll leave and not come back. If you want your user to enjoy your content, make your fonts big enough to read; after all, isn’t the content the reason you created the site in the first place?

Summary

Designing layouts is not just about creating a visual work of art–we’re also creating an INTERACTIVE work of art, one which our users must be able to navigate and use to their heart’s content. Being considerate and careful in how we use color, fonts, and content organization will make our layouts much more usable–which means more people will visit our easy-to-use, easy-on-the-eyes sites!

Navigation Placement, Part II: New Ideas to Try

navigationp2
In last week’s post, we looked at 3 traditional navigation placements in layout design, and briefly discussed the pros and cons of each. But there are some tricks to changing up and decorating the navigation itself without making it too hard to use, as you’ll see!

Idea #1: Mix in a few icons as well as text links.

iconfonts
Font names, from left: Webdings, Wingdings, Wingdings 2, Wingdings 3, Stateface, Socialico, Nymphette, Entypo, Bergamot Ornaments, Modern Pictograms.
Navigation doesn’t have to be just plain, boring text links–icons are a modern webdesigner’s friend! For instance, you could use the Facebook icon shown above to link to your site’s Facebook page, or you could use the speech bubble icon to show where users can leave comments, etc.

Most designers rely on icon fonts for this; Modern Pictograms, Socialico, and Entypo (all linked above) are some of my favorites, and there’s a more comprehensive list here. To use your icon fonts, you can either link and style them directly in your CSS using the CSS property @font-face (more about that here), or you can use a graphics-editing program to type out each of your needed icons and save them as individual images. Just make sure your icons all have transparent backgrounds so that they blend in more seamlessly with your layout.

(Note: I included some ornamental icons as part of the above graphic as well, for the purpose of dressing up your navigation if you don’t like the idea of just having clickable icons and no text. Icon fonts are multipurpose!)

Idea #2: Keep similar links together.

A long list of unsorted links down one side of the layout can be a lot of text for your visitors to read when they are browsing your site. How about grouping like pages together within your navigation instead?

An example would be my City of Heroes site, Skies over Atlas–I placed all my site content links going down the left side, and used a horizontal navigation bar underneath the header image for my guestbook links, my contact email, a “back to homepage” link, and the links to the Twitter and Tumblr account associated with the site. Even though the navigation is in the same general area on the page, one part of it is devoted to site content, and the other part is devoted to user interaction.

You could also accomplish this with the old standard three-column layout design. Have your main content navigation on whichever side you like, and on the other side, you could have user navigation, admin area, links to your other websites–just anything that isn’t really related to your main content.

Sorting your navigation this way can help your user more easily pinpoint what area of the site they wish to go to. Of course, be sure to label which area is which so the user does not have to read everything to find out where things are!

Idea #3: Combine your header and navigation for a super-streamlined design.

For the tidiest, most mobile-friendly design, pull your navigation into your header space–in fact, just a site logo or site name text plus a horizontal navigation bar can BE your header! This way, your navigation is up where your users see it when the page first loads, and it leaves more room for your content so that perhaps your pages won’t even scroll so much. Your navigation bar can then be colorful or even patterned to play off the colors in the rest of your design, drawing attention to it without making it huge or heavy with text links.

Additionally, using social media icons alongside text links in a horizontal navigation bar at the top of the page can highlight your navigation further, bringing the user’s attention to it as the rightful central hub of your site. As a user, I love seeing an organized navbar like this; I know I won’t have to worry about searching the rest of the page for info I need!

Summary

I hope the ideas in this two-part series have started your brain percolating about navigation. It may sound like the most boring part of your website, but with these tricks, it certainly doesn’t have to be!

Navigation Placement in a Web Design, Part 1: Traditional Placements

tradionalnavplacements
Part of designing a website is determining where the site’s main links–its navigation–should be displayed in a layout. It’s important to place the navigation in a clearly visible spot, where the user does not have to scroll or hunt endlessly for it.

Yet many of us webdesigners balk at just putting the navigation in the same tired old places in a layout every time; you want to be able to innovate just a little, make your layout look different from everybody else’s. Yet your site must still be easy to browse.

With that in mind, what are some of the traditional navigation placements?

Position #1: Left of Content

navleft
Many websites nowadays have at least some navigational links placed at the far left of their layouts, like the graphic above. For left-to-right readers, this works great, because the left-to-right reader’s eye instinctively navigates to the top and/or left of any page to begin viewing, and having navigation placed there can direct them quickly to your content.

However, this placement being so traditional means that it can be rather boring in terms of design. How much can you innovate a left-aligned navigation without simply imitating what a thousand other webdesigners have already done?

Position #2: Center-Aligned Over Content

navtopcenter
This navigational position is great for sites that don’t have a whole lot of links in their navigation, and it’s become a big trend in design as of late. It looks clean and sharp, blends in with the layout a lot better than left-aligned, and it allows room for one or more sidebars of extra content beside your main content block. (This has been especially adopted for mobile-friendly layouts!)

However, this presents a problem when users (especially desktop users) are viewing extra-long pages of content: in order to browse to another page, you have to scroll all the way up to the top again to click on another link. All the “Back to Top” links in the world can’t permanently solve that problem.

Position #3: Right of Content

navright
This is actually a favorite navigation position of mine, because it’s a bit unexpected. This way, users are drawn to your index page’s content first. If you’re creating a site that’s meant to be browsed slowly and thoroughly, this is a great design, and it works well for personal sites.

But the problem with this navigation position is also that it’s unexpected. People may spend more time hunting for links than they do clicking on them. How can you draw more attention to the links without putting them somewhere else on the page?

This and many other issues are tackled in Experimenting with Navigation Placement–click to read the 2nd part of this article!