Twitter

Twitter definitely has its haters – not everyone wants to hear you describe your lunch in 140 characters or fewer. But it’s a highly searchable tool that is free and takes moments to manage. Once you set up your account, search for your favorite designers and studios as well as friends, businesses you frequent and companies you’d like to hire you. This alerts potential customers to your existence – they might in turn follow you and seek you out for future jobs. Tweet your blog, news about your business, a fun project you’re working on, artwork you find inspirational, a handy tutorial – keep your tweets short and informal. Twitter is not the place for heavy copywriting, though it IS a great place to offer exclusive deals.

Facebook

Unlike Friendster and MySpace, Facebook hasn’t shown signs that it’s going away anytime soon. Therefore, like Twitter, it’s another social-networking tool that is easy and free. Be sure you set up a business page and not a profile – Facebook can be strict with noncompliance and take down profiles that do too much promoting if they’re not billed as businesses. Include all your contact information as well as upload photos of your office space, your logo and select works. You can add tabs to the top of your page. For example, you might want to add one for your works in progress or portfolio pieces. With NetworkedBlogs you can link your blog to your Facebook page so that it automatically appears on your page and in your followers’ news feeds. Encourage comments by asking questions – as with Twitter, be conversational, not stiff.

Foursquare and Gowalla

These are location-based social-networking games that allow players to “check in” with their phones at businesses, public places and homes. Check in enough places, and users earn “badges” and other items. So where does the marketing step in? Businesses can opt to offer incentives to players when they check in. For example, Chili’s offers free chips and salsa to people who check in on Foursquare, and Best Buy hosted a contest encouraging folks to check in on Gowalla to have a chance of getting a free Eye-Fi wireless memory card. With location-based social networking, you can participate on both sides – make yourself seen by checking in places as well as offer your own rewards.

Yelp

Yelp certainly has its detractors, but whatever your opinion of the site, it pays to at least monitor your business profile. Look yourself up regularly to be sure your contact info is correct and a link back to your site works. Most important, read the reviews posted about you. Tweet the good reviews and perhaps ask those people if they’d like to contribute a testimonial for your website. Respond to negative reviews to see if you can make things right. Remember that for a lot of people, Yelp is the new Yellow Pages, and your business profile might be the first impression a potential customer gets.

Postcards

Sometimes it pays to get back to basics – not all promotions need to be web-based. A postcard was and still is a multiuse marketing tool. Design a postcard with one or a few of your best works on one side and your contact information on the other. A batch of hundreds can often be printed cheaply. Then ask to leave the postcards at businesses such as cafes, bars, clubs and gyms. Your eye-catching design should attract new customers, whether they contact you immediately or come across your postcard they’re now using as a bookmark. If anything, a postcard gets your name out there, and recognition is a key to advertising.

Conclusion

Let’s face it – for freelancers the trade-off for freedom from a 9-to-5 cubicle job is a sometimes unsteady paycheck. There just isn’t a lot of extra time or money for advertising. But with the Internet comes great opportunity – the chance to take a risk with different types of marketing. If one campaign doesn’t work, try another. You’re a creative pro, so why not exercise that creativity with unique promotions?

About the Author

Jennifer Moline writes about freelancing, small business and design for the PsPrint Blog. Follow online printer PsPrint on Twitter and Facebook.

Clear and Concise

Because the majority of Internet users scan websites for the information they are looking for, good website writing must be clear and concise. A good general rule of thumb is that the word count for websites should be half that of traditional writing. You want visitors to be able to locate the gist of each paragraph as quickly as possible. Flowery language and complex sentences have no place on the web.

Divide into Chunks

Good web copywriting isn’t only about the number of words on a site. Organization is just as important. Break your text into chunks that are easily digestible for readers who are glancing through your page. Divide these chunks up with clear subheads that tell the reader what the next paragraph is about. Readers can then quickly decide whether your site is right for them without even having to read any of the “finer print.” Bulleted lists are a great way to provide the most important information in a quick and easily understandable format.

It is also important to understand how your website looks in each different browsers and with different screen sizes so that you know what visitors see when they come to your site. Know how much of your home page is seen before having to scroll down, and make sure that the most important and eye-catching information is placed at the top of the page before the scroll.

How to Draw Readers In

Often, website homepages are organized so that users can click on several options that will take them to another page of the site. Whether or not users click on a particular item usually depends on the attention-getting ability of three things: headlines, deks and accompanying photos or multimedia.

Magazines and newspapers rely on their headlines to attract newsstand buyers, and website copywriters should think of their headlines in a similar way. Headlines and deks on the homepage are the only chance a writer has to “sell” that story to a visitor, so they should be simple, clear and attractive to readers. Headlines should emphasize verbs that connote action, something that will inform or entertain readers. But they also must reflect what the article is about. There is nothing more aggravating for an Internet reader than clicking on a link expecting to get one type of information and finding something different.

Who, What, Where, When, Why

Once users have clicked on an article, Website writers should follow the inverted pyramid style of newspaper writing. This style means that the most important information in the article is presented first, then expanded upon throughout the rest of the article. In other words, the “who,” “what,” “when,” “where,” “why” need to be answered first. The “how” will make up the rest of the article. Another reason to use the inverted pyramid style is because the majority of readers will not click to the second page of an article. Place the most important information to readers before the page break.

SEO

The 90s are over and search engine algorithms have evolved. Keyword stuffing is no longer necessary, but SEO literacy is just as important as ever. Consider the keywords most relevant to your page, and think of ways to include them in the title and body of your article. Today’s web copywriter will use applications such as Google’s Keyword Tool to add a scientific dimension to their intuition.

Hyperlinking

Web writers should understand the function of hyperlinking. Hyperlinks provide attribution and more information to readers without bogging them down. For example, if you mention a specific fact, but you don’t want to explain the details, simply link to another article that explains that fact. Either highlight one specific word, which will clue readers in about what information that link will provide, or write something like “for more information see this study,” and link on the word study. Make sure that you set the link to open in a new tab or window so the reader will be able to get back to your website easier. Otherwise, readers will be whisked away to another site and may forget they ever began on one of your pages.

Another reason to hyperlink is for attribution. If you are quoting another source or lifting an idea from another writer, it is best to provide the reader with that information. Then if the reader is more interested in a particular point you mention, they can find more sources about it. Sites that hyperlink to other well-written and helpful sources will become invaluable for readers, and they will return to your site if they know you will provide more sources and information they can use at their own discretion.

Style

Style will make your website stand out while drawing readers in. For most websites, an informal yet lively voice is the best, helping you achieve simplicity and easy readability. Internet readers prefer sites that are written in a conversational and informal style.

Make sure you write in active rather than passive voice. Active voice will also force you to be concise.

Use of Multimedia

Finally, remember that the appeal of the internet is its ability to mix all forms of information and entertainment. Use photos, graphics, videos and flash to grab readers’ attentions. You don’t want to distract the reader by relying on these things too heavily, but make sure you are always thinking about how to best illustrate your text with multimedia.

About the Author

Sally Jacobs is a web copywriter at Cooper Murphy Webb, the website copywriting agency.

The results at the end of the site design process are usually pretty much the same with every project; I end up with a site design and I hand it off to the client. In the beginning, I have an idea of what I want to do and what the client needs, and I know I want to strive for an awesome deliverable in the end. The steps in between follow roughly the same path, however each site design is vastly different in style and character needing some different steps to achieve the proposed outcome. Sometimes I feel the need to sketch and other times I jump right on my computer. Even though the process may be different each time, it’s important to have goals with every site, whether you write them down or keep them in the back of your mind while you design. I’ve compiled a list of 5 goals that are important to think about each time you start a site design.

1. Strive for a design that’s user-friendly and beautiful.

A great user-interface is often sacrificed for a wonderful design, but both are equally important and should go hand in hand. A well-designed site helps users travel through your site with ease. Items are where users expect them to be. If they’re in unusual places, they need to make sense and the site design needs to direct users where to go. The navigation is best near the top of the page not because that’s where it looks best, but because users don’t often know to scroll down to find it. If you expect users to scroll to find the navigation, give them a reason to scroll like some movement in the design that directs their eye downward and they’ll find it more easily.

Site Example

The White House website was redesigned around the time that President Barack Obama took office in November of 2008. The old site focused on delivering information, but it didn’t seem to care how organized the information was or how the site design was incorporated to improve usability. The new site is both user-friendly and beautiful, illustrating how the site design aids usability. Soft gradients and classic architectural-inspired patterns grace the new style, creating a softer, more modern appearance. Information is organized logically and the new navigation helps users find what they need quickly and efficiently. Information is easier to find and read with the spacious layout, which also helps users navigate through the site. Unnecessary items were taken out and all that’s left are the important items for users.

2. Create a site that targets the appropriate audience.

I’ve seen many gorgeous sites that just don’t fit the target audience. A retro site with funky colors may look great for a design studio or a music producer, and your client may love the look, but it doesn’t fit a law office with a professional, corporate clientele. Your client can give you good insight on their particular audience, who they target and what customers they reach the most. Do your research and see what other similar companies are doing. You don’t have to do the same thing, but the feel your site gives to its users should be similar.

Site Example

Apple’s site is a great example of a site with an awesome design that targets the appropriate audience. They showcase a clean minimal userface with soft gradients and large bold images. Typography is important, as Apple shows they put careful thought into headlines, sizes and placement of text. This modern style accurately targets a trendy young technology-focused audience. The site also has a bit of fun and isn’t completely serious, which falls right in step with who their audience is. The design also matches their products, echoing the sleek look, rounded corners, and clean organization. This helps customers feel comfortable on the site, and creates a great cohesive look to all their branding materials.

3. Design a user-interface that flows freely, allowing users to navigate easily and find what they need quickly and efficiently.

A good navigation is key for a top notch site. A sitemap done beforehand helps determine where pages should go and what items should be placed together. Many sites often have too large of a navigation because they didn’t plan where information would fit best. You need to minimize the amount of space and maximize the amount of pertinent information. Not everything belongs on a company’s website because not everyone is going to have the patience to read it. Streamline the navigation, determine what’s important and throw away the rest.

Site Example

Media Temple’s site design is sophisticated and very smooth with dark gradients and a technology-focused appearance. Their easy-to-use top navigation includes illustrations to help users find what they are looking for. The site design is free of clutter and pages are wide and spacious, making it easy to read and navigate. After clicking on introductory pages, bright learn more buttons direct users deeper into the site and eventually lead to their sales pages, which is where Media Temple hopes you’ll land. Users are assisted through the whole process with matching buttons and helpful guides that are easy to follow.

4. Give the client what they want plus what they need.

As many designers know, the client usually thinks they know best. They do know their company better than you (in most cases!) so do take their advice on their industry, listen to what they say about their audience and the products they are selling. However, they may not know how to organize the information in the most practical manner, and they may not realize the characteristics of web users. Educate your clients on items that are important for them to know and help them understand why they don’t need certain things that may seem cool, like a 5 minute flashy intro to their site.

Site Example

Mobify’s site is clean and modern with a minimalism design and great visual details that aid users surfing their site. The site is targeted toward companies as well as developers and designers wanting mobile-friendly sites. People coming to this site are probably already very web-saavy and hoping to extend the functionality of their own site. The site design is everything that a company selling mobile services needs. The interface is minimal and smooth, with a similar feel to that of a mobile device. The navigation is clean and easy-to-use, giving users what they need on this modern and technology-focused site.

5. Increase the site functionality with additional code.

A simple website can be made into a great website with the addition of some fancy features with the use of javascript or php. Users will enjoy the extra added feature and it gives designers a chance to try out a new tutorial. There are so many skills out there to learn and add to your repertoire, why not aim to stretch your design legs and try something new with each site? Try a new jquery tutorial or add a fun php script. There are tons of new things to learn every time you sit down to design a site. If you could learn just one new thing with every site, think of where you could be in one years time.

Site Example

Authentic Jobs does a nice job of incorporating details into the site that increase the usability and functionality. The site could have been more basic and served a similar purpose, but some javascript was added that significantly increased the value of the site and makes it more fun for users. You can change types of jobs and add or delete categories to help filter through their list of jobs with the click of a button, making it easy to find exactly what you’re looking for in less time. These types of details really make a site shine.

Goals are definitely an important part of being a designer and moving forward with your design and coding skills. You can’t hope to increase your skills and dazzle your clients if you don’t aim for something. Think of what you want to accomplish when you start a new site and aim not for perfection but for a great site design, each and every time. What are your goals when you sit down to design a site? Share your thoughts and comments below.

About the Author

Shannon Noack is a designer in Arizona and the Creative Director of Snoack Studios. Designing is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs regularly here and you can connect with her on Twitter as well.

Answer: Be different.

Face it – there are plenty of talented designers out there. Allowing for the fact that you are one of them, the only differentiating factor you may have is the random chance that one particular item in your portfolio will cause the prospect to think: “YES! That’s exactly the kind of design I’m looking for. I must have this person working on my project.” Alas, eureka moments like that do not happen very often. Most times the prospect will select someone whose work is attractive and offers the fairest, not necessarily the lowest, price.

Here’s where that red nose comes in. What if there were magic words you could put into your proposal that were so different, so far beyond what any other designer proposed, the prospect was almost hypnotically drawn to you as if you had a red nose? Wouldn’t that be special? There are magic words. Most designers don’t use them. You should. “I can help you increase conversions.”

Conversion is what every business web site is all about – turning browsers into buyers. The organization works hard to attract visitors with the hopes that a great number of them will convert to buyers, members, subscribers, or whatever the action is the site owner wants a visitor to take. And when you use the phrase “increase conversions”, you just showed up with a red nose.

Many designers put all of their effort into selling how attractive their work is and how “one picture is worth a thousand words.” Maybe that’s true, but you can bet that in addition to your lovely pictures, your prospect’s web site is going to have words. And links and offers. After all, that’s what business web sites are all about. So what you need to do, if you want to be different, is to convince your prospect that you understand how website design works hand-in-hand with copywriting, click stream, and all of the humans psychological triggers that have to be activated in order to reach that Holy Grail known as conversion.

Here is what you else should say to make your proposal zing.

• I design with usability in mind. A visitor should never be left wondering what to do next. High conversion rates require a clearly defined and intuitive funnel that leads the visitor from where they are to where you want them to go.
• I optimize for a minimum number of clicks to arrive at that destination, and provide breadcrumbs or other clear indications of the path for the user to follow.
• I integrate my design with your web copy so the visual and written elements work together to lead the visitor to the ultimate destination.
• I ensure that each page delivers the information a user would expect to find there. If I notice inconsistencies between the content on a page and the presumed purpose of the page, I bring those inconsistencies to your attention so you can decide what action should be taken to address the issue.
• I avoid delivering “eye candy” graphical elements that deliver no value and do nothing to generate trust in your brand and contribute to increasing conversions. Your website will look pretty and deliver results.
• I realize that the purpose of website design is to contribute to the conversion process and not to showcase my leading-edge design skills for ego gratification.
• I design and place graphical elements with the goal of highlighting and calling attention to product or service features that are an important part of your offering.
• I recognize that not all of your visitors will have 20-20 vision, so I choose font sizes and typefaces that are the most likely to be easily seen by visitors of all age group and with a variety of different eyesight issues.
• I incorporate W3C disability design standards into the sites I create or the specific standards required by the laws of the country your web site operates in. This ensures legal compliance and a wider potential audience.
• I understand the concepts of Search Engine Optimization and keep those concepts top of mind when I design a web site. If I observe any inherent SEO issues with your site, including copy-related issues, and I will bring them to your attention so they can be addressed.
• I believe in teamwork. That’s why I check my ego at the door when I’m working on a project. I realize that your copywriters, SEO consultants, marketing staff and me are all “partners” who need to work together seamlessly in order to deliver a web site that raises your company’s visibility and meets your conversion goals.

Now you don’t have to use these words. Use whatever words work best for you. But do cover these topics either formally or informally. I guarantee that if you do, your proposal is going to be the one that stands out most in the prospect’s mind when it’s time for them to choose their designer.

And the best part is, you won’t have to change the color of your nose at all.

About the Author

Jeff Foster is a co-founder of WebBizIdeas, a corporate web design company specializing in internet consultancy and social networking development.

Reasons for clients (and you!) to spend locally

Spending money locally helps build your own community. If you spend your money locally, your tax dollars stay there, helping to fund schools and road construction. When a local client commissions me to do a project and then I buy something from a store down the street, our money circles through the community, boosting everyone’s business. We’re all helping each other by spending locally.

Networking in your community

There are tons of ways to network within your community. Large metropolitan cities offer more options but you can certainly find other businesses to network with anywhere. Search online for small business groups, they provide an excellent avenue for quick leads. As a designer, tons of startups and new businesses need our help right away. They need a logo, business cards and a website to get off the ground. Even after they have been in business for a while they may need help marketing their services or a website redesign because they went the cheap route in the beginning. Even if these business don’t need your services, if you make a good impression they may refer you to someone that does need a designer. Meetup.com has lots of small business groups that meet and trade business resources and opportunities, and can be found in tons of cities.

Getting your name out there

Tons of people are looking for quality businesses to work with and a growing number of people are looking for design work, especially websites. Spreading the word that you have a great business that creates high quality work is the key! Hold a booth at local shows, conferences and expos, it’s a great way to spread the word to a large group of people in a short amount of time. People at these types of events are looking for businesses to work with, so you’re hitting a good target audience of people that are focused and ready to do business. You can hand out flyers and business cards as well as talk to people directly about the services you offer. A less direct method that spreads the word to a number of people is to set up a fishbowl at a local restaurant or coffeeshop. Ask people to leave a business card in the bowl and then draw a winner at the end of the month, giving away a free dinner or some movie tickets. Also leave your information with the fishbowl, so people can see who sponsored the giveaway.

Show your expertise

A great way to market yourself and find business is to establish yourself as an expert in the field. You could teach a class at a community college or be a guest speaker at an event. College classes and community groups are always on the lookout for knowledgeable people to come in and do guest lectures on marketing, advertising, and other business-related topics. You could also set up a workshop for people to learn from you. You could teach people how to use Photoshop, the basics of html, or any topic that would be relevant to a group of people in the community. Business may not come directly from the workshop, but it will get your name out there and show that you’re a knowledgeable business person worthy of a referral down the line.

Directly solicit business

Cold calls and emails are usually not the most fun way to get business but it’s a great way to target specific people. If you have a niche that you work with, like restaurants, get a list of all the restaurants in your area and call them, asking if they are in need of a new website. Be sure to look at their website before you call and find something new that you could offer them. Maybe you offer a content management system, which makes it really easy for clients to update and maintain their own content. Or maybe they have a small site with hardly any content, tell them you could assist them with a new search engine friendly design and some SEO advice. Make sure they understand what it is you offer, and how spending the money with you will benefit them.

Be on the lookout for business opportunities

I love collecting business cards and I have a large stack at home of good and bad cards that I’ve collected over the years. So I’m always on the lookout for a business card when I walk into a new business. If I don’t see a business card or their cards are less than stellar, I offer to leave my card with some kind words (it’s very important to not insult them here!) about how I could help with any design services they need. Be sure to have a great 10 second pitch ready about what you do, but don’t insist that they call you. They’ll contact you if they’re ready.

There are so many ways to find business locally and network with people in your community. You just need to get your name out there and find avenues available in your town. Marketing your business creatively and effectively is the key to succeeding as a small business, and helping to build your community is an important step for anyone.

About the Author

Shannon Noack is a designer in Arizona and the Creative Director of Snoack Studios. Designing is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs regularly here and you can connect with her on Twitter as well.

Your Name Says it All…

Most of, if not all, renowned graphic designers use their own name to shine and create a lasting personal brand. Rather than having a website named “CeativeDesignServices”, how about giving it the most important name in your life: your own! Soon enough, your name will be equally important to your niche market after you deliver quality work.

Why AUTHENTIC Branding is the Way to Go…

Out of all the marketing jargon I came across, “authentic branding” struck me the most. When I say authentic, I mean that you need to honor the essence of how you really are and embrace it. As a result, your artwork will reflect your personality, character, values, ambitions, vision, you name it. While in some fields people could get away with false pretends, that’s impossible to achieve in graphic design in particular. You simply can NOT ”fake” creativity or tailor it to become something else. It’s a clever idea to focus your branding on at most 3 values based on your core personality definitions. You might ask me: what if my authentic branding is not appealing to my niche market? I would say: you chose he wrong niche. Change it!

Too much too soon versus slowly but surely…

Quite often some designers, especially beginners, fall into the trap of taking on too many projects, hoping to create a rich and versatile profile as quickly as possible. That’s a HUGE mistakes because you will be scattering your energy and out of the pressure of meeting endless near-future deadlines, you’ll end-up producing “so and so” work. One of the obvious shortcomings of such approach is that your existing clients will be unhappy and yes you will build a big “so and so” portfolio in 2 months! How effective is that?! What if, instead, you FOCUSED on two projects and did an outstanding job on them? Yes, you will take longer to build a portfolio, but you will be creating it slowly but surely and it’ll standout eventually. Even better, your satisfied customers will not only use your service again but will gladly do some marketing on your behalf and refer others to you. Sweet!

CONSISTENCY is a keyword…

In order to stand on the front lines of the fierce web design war, you must establish yourself as a passionate designer who consistently delivers quality work. In other words, you must continually produce great work that’s linked to your name. Don’t ever compromise quality under any circumstances. If your work value starts dropping, so will your name alongside your brand! Moreover, you need to be consistent in establishing your personal brand. For example, I always use the same avatar and main website picture so that the public will connect that picture of myself to my brand. I might change my logo zillion times along the way but my picture will never change. (Unless I get hit by a truck and 6 surgeons have extensively remodeled my face)

When it comes to visibility, work smart not hard!

Here are some intelligent ideas to get your name out there and create massive visibility easily and effortlessly:

• Start guest posting on high-traffic blogs about web design
• Establish yourself as an expert in your field by blog-commenting on relevant posts. (CSS3, jQuery, Photoshop or even MS Paint)
• Introduce yourself to other people in your niche. Get yourself out there and get to know the big players around. It wouldn’t hurt to make a few phone calls would it?
• Learn how to become recognizable and increase your added value by taking advantage of popular social websites in order to spread the word about your brand and expand your network
• Build your personal equity while offering meaningful contribution to your community. For example, you could volunteer to give free tutorials or give some design work for free to an organization that you support. Even better, do the same for an organization that your niche is likely to support
• How about some offline presence as well? Face-to-face communication is very powerful. Make it a habit to attend relevant media events and try out some public speaking. Public speaking is very effective in creating the “expert” image

What do you think? I can’t wait to read your comments. Good luck!

About the Author

Davy Kestens is a motivated young lunatic from Belgium with a highly entrepreneurial vision on his life. Currently working as a freelance creative director and continuously starting up online projects when he’s not out trying to take over the world. His latest published tool for world domination is RunAddicts.net – A professional blog about running. Want to keep up with him? Go ahead and visit his website. You can also follow him on twitter.

The drama comes when you actually become a full time designer. The friends and family who drew upon your talent during your newbie years are still standing around with their hands out, and now you also must contend with two more groups of favor askers: clients and anonymous foreigners who contact you through Twitter.

Here are 8 of the most common and eye-rollingly annoying favors all designers encounter at one point or another. For ease of reference, we’ll call the offending party “Dude.”

1. “Hey, can you take a look at my site and tell me what you think?”

At first glance, this seems like a harmless five to ten minute project. Dude asks for your opinion, and you both know that you are an esteemed and dedicated design pro. You optimistically click on his website link, and you’re teleported back in 1998 with a Geocities-reminiscent design so horrifying it makes MySpace look professional. After you try hard not to lose all respect for Dude, you carefully suggest that he get rid of the Flash intro. You are then met with an uncomfortable defensiveness, where Dude refuses to accept your professional advice.

Lesson learned: Decipher whether your friend is looking for actual advice or just a pat on the back.

2. “Um, would you mind designing my site… for free?”

It’s shocking how many people feel truly entitled to a free web design. If you’ve ever had the pleasure of introducing yourself as a web designer, you may notice the wheels instantly starting to turn in your acquaintance’s mind. Everyone, even those without any product or any relevant thing to say, want, demand and need a website. These are the people, especially, who will want such a website produced for free. They may lure you with the distant hopes they use to fuel their own insanity: “Once I get some visitors, I’ll direct them to your services” (Standard practice, regardless).

Lesson learned: Limit your charity cases to those you can do in your free time and only do it for charity because the only reward you’ll reap is psychological.

3. “Can you help me design my site to look like ______?”

This request is closely related to the first two requests. Perhaps Dude has taken it upon himself to designed a website, already had a moment of epiphany and now realizes that it sucks. At least you’re on the same page. Then comes, “I’d like my site to look just like Avatar. You know, all 3D and stuff.” Once you realize that Dude is serious, another realization also sinks in. If you take on this “consulting” project, all of your time and energy will be engulfed by this vortex, and you won’t be getting paid for your trouble. What’s the solution? Direct Dude to Yahoo! Answers? No, he’ll never go for that, because this is a top secret idea.

Lesson learned: Find your inner ineptness and apply it to this situation. Feign ignorance, suggest peripheral design ideas such as blue color palettes and wait for your friend to get bored of the idea and come to his senses.

4. “I think I have a virus.”

No one likes to hear these words, and if someone’s sharing this information with you, they usually want one of two things: sympathy or help, sometimes both. When you hear these words come from a client, you must assume they are referring to a computer virus (let’s hope). This your client’s passive/ aggressive way of getting you to offer assistance. If you, wisely, remain silent, he or she will shamelessly ask you for your help. Just because you work in front of your computer all day does not mean that you qualify for tech support. You have to Google things just like everyone else.

Lesson learned: Get the courage to finally direct someone to Let Me Google That For You. However, for professional relationships, avoid the snark and actually lightly research the problem, but make no promises and waste no longer than 15 minutes.

5. “Let me help you with any of your extra work.”

This favor comes in the form of a donated favor. In other words, Dude is suggesting that he’s doing you a favor, when he’s actually just trying to get paid. One morning you open your email box, and there’s an email from some dude you’ve never heard of. He wants you to lend him some of your work. Depending on your level of job-related stress, you may be inclined to offer him some work, but what’s this? No portfolio? No website? No spell-check. Wait, is Dude even located in the same hemisphere as you?

Lesson learned: You get what you pay for.

6. “So, it’s been a minute… How much longer is it going to take?”

Just when you’ve got your Good Samaritan on and decided to help Dude during your free time, he starts becoming a diva. Never mind the impossible requests to make his website look just like *let your imagination run wild on this one,* or the countless revisions to a perfectly designed logo, or the endless hours you spent over IM trying to explain why putting an invisible list of keywords at the bottom of the webpage is unnecessary. When you least expect it, expect to receive a phone call, email, direct tweet saying, “Hey, so, um… when’s the project going to be finished?” You reply back, “Dude, I told you I was going to fit this in between my actual work from actual clients that actually pay.” To this, Dude replies, “I didn’t think it was going to take this long, maybe I should just get this professionally done.” Oh, that’s a killer. First of all, Dude has no consideration for the amount of time you’ve invested in this project. Secondly and more importantly, you are a professional. Why not offer you money so that you can prioritize his project?

Lesson learned: Clearly state from the beginning that it will take you some ridiculously long amount of time to complete the project for free and if Dude’s still on board, he’ll be happy if you finish it sooner than expected.

7. “Can I use your server until I get my own hosting?”

What’s so wrong about this request? You have extra space and you can afford the bandwidth. The problem is that Dude will never get his own hosting, and eventually he’ll forget about his site. A year later, you’ll remind him, “Hey Dude, you know you still have your stuff on my server? I’m moving to another server, so is it alright if I get rid of it? You have a back up, right?” Dude will do one of two things: he’ll respond with indignant anger, upset that you’re rushing him to get his act together or he’ll pretend to be okay with it, all the while, holding a grudge.

Lesson learned: Friends don’t let friends use their servers.

8. “Hey, I volunteered you to re-do my co-worker’s step-daughter’s wedding album.”

You can replace this with any task in which your mom volunteers your services for free. It’s always lovely to deal with someone who’s happy to accept your honest labor for free, because we all know they won’t make any unreasonable demands. The most difficult part of this ordeal is having to contend with your mother in her role as the merciless middleman who nags you for quality, timeliness and her good reputation.

Lesson learned: Grin and bear it? There’s no real way to avoid this nightmare.

What are some of the most annoying favors your friends and family have asked from you?

About the Author

Jacqueline is an artist and a writer who spends an inordinate amount of time playing Super Nintendo and watching Star Trek. You can find out more about Jacqueline on her website, and follow her updates on Twitter.

HTML Mistakes

Forgetting to Close a Tag

This is very common, especially in beginners. Several tags require closing tags such as divs, strong tags, and links to name a few. Other tags require a closing slash to end the line such as an img tag.

<div>Text inside the div.</div>

<img src="images/imagename.jpg" />

Incorrect DOCTYPE

HTML requires that you start out the document with the correct DOCTYPE declaration. It needs to be before anything else in the code, starting the document by declaring what type of HTML you’re using. Here’s the DOCTYPE for XHTML 1.0 Transitional.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Improperly nesting tags

It’s very important to open and close tags in the proper order. Once something (for example a div) has opened, it must close before anything above it can close. The following is incorrect.

<div><strong>text</div></strong>

Capitalizing tags

This is just considered bad practice, but won’t result in your code not being validated. You should always use lowercase for tags like divs, links, and images. The following is incorrect.

<DIV></DIV>

Forgetting to open or close quotes

I’ve seen this a lot in beginners and will result in broken code and things not functioning properly. HTML requires double quotes that open and close correctly. Here’s an example of correct usage.

<img src="images/headerimage.jpg" />

Using Inline Styles

This is another one that is considered bad practice. Inline styles do work but will result in headaches later on! Items should be styled globally through an external stylesheet. It will be much easier to edit and add styles to in the future. An example of inline styles:

<a href="link.html" style="color: #000; text-decoration: none;">link name</a>

Not Encoding Special Characters

Characters like “©” and “&” should be shown with the proper HTML code for the character. Here’s a great list of characters and their HTML counterparts that you should use.

Confusing Classes and Ids

Classes are for items that are used more than once on one page. This can be a link style that you’ll call in multiple times on one page but doesn’t follow the global link styling. Ids are items that are called in just once, like the header div. Classes and ids are often overused and used in unnecessary places as well. Stick to the minimum amount of classifications that you need.

CSS

Forgetting to Close Things Properly

Each div or item called in starts with the opening curly bracket and ends with the closing curly bracket. Each style called in needs to end with a semicolon. The last declaration within an item doesn’t need a semicolon, but it’s best to use it in case you plan on adding more items later on, you may forget to add it back in. An example of proper use:

#divname {
width: 40px;
height: 30px;
}

Condensing your stylesheet and putting all declarations for a div on one line is up for debate. I prefer to put each declaration on its own line, I think it’s easier to edit that way, but some may say that it just produces longer code.

Not Using Global Styles

Many things should be styled globally like paragraph and heading styles for text as well as link styles. This will reduce the risk of mistakes and will also cut down on the amount of code in your stylesheet.

Not Using Unique Names for Ids and Classes

It’s very important to choose names that are unique so that it’s easy to edit later on, and easy to identify in your stylesheet. Name your divs specific things like #home-left-column which is better than just #left.

Not Using Shorthand Code

Shorthand code is another way to condense your stylesheet, which is helpful for speeding up user load times as well as finding things when you’re editing later on. Instead of calling in padding-top, -left, -bottom, and -right you can just use:

padding: 5px 10px 0 10px;

Shorthand code can be used for many declarations including: padding, margin, border, and font.

Not Using Shortened Color Declarations

Hex numbers that repeat like #ffffff and #000000 can be condensed to #fff and #000. This is another way to condense your code and keep things short and easy to look at.

Incorrectly Using Positioning

Positioning is tough to understand when you’re first starting out with CSS. Your choices are static, relative, absolute, and fixed. Static is the default option and is positioned according to the normal page flow. A relative item is positioned relative to itself, meaning you can move it up, down, left or right, based on where it would normally sit. Absolute allows you to place an item anywhere on the page, and is the most misused positioning statement. The values you set for it will be relative to the last parent item with relative or absolute, and if there aren’t any, it defaults back to the html tag, allowing you to position it anywhere by declaring top left right or bottom values. Fixed is positioned relative to the browser window, so an item will stay in place if a user has to scroll. Learning how to use positioning correctly is important, but shouldn’t be used excessively. I rarely use these at all in my stylesheets.

Validate

Validating your HTML and CSS files will help in reducing errors and figuring out where a problem might be coming from. Your website may function correctly with some of the common HTML and CSS mistakes, but it doesn’t make it good practice or valid code. The validator will help identify these problems and you’ll be able to adjust the way you code for the future.

More Resources

• 12 Common HTML Mistakes
• 10 HTML Mistakes that Should be Avoided
• Ten Common CSS Mistakes
• CSS Shorthand Guide
• CSS Beginner Mistakes
• CSS Cheat Sheet

Many of us are guilty of these HTML and CSS errors, myself included! We can only strive to learn from our mistakes and practice better coding in the future. Cleaning up your code will help you further your coding skills and allow you to create better sites with more functionality for your users.

About the Author

Shannon Noack is a designer in Arizona and the Creative Director of Snoack Studios. Designing is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs regularly here and you can connect with her on Twitter as well.

Contrast is the difference between two or more elements. With contrast, a designer can create visual interest and direct the attention of the user. But imagine if all of the elements on a web page were the same in style and appearance. There would be no organization, no flow, and definitely no hierarchy. Content would be nearly impossible to digest. This makes contrast an essential part of effective web design.

In this article, we’re going to see how contrast can be achieved by creating differences in three aspects of design: color, size, and alignment.

Contrast in Color

When most people hear the word contrast, they think of color. Even though the principle of contrast is not limited to color, it can go a long way in helping the user differentiate page elements from one another.

It’s a given that almost all web designs have a header, a content area, and a footer. These are three completely different areas that should have a clear visual separation. Using contrast in background color is an excellent way to achieve this.

Here you will see that the Church Media Group’s website is an excellent example. The header and footer have dark background colors, while the content area is white. This clearly establishes the content as being different and even more important than the other areas. If we look a little further there is another level of background contrast within the content area. The “Featured Project” area has a light blue background. Since the amount of contrast between this area and the rest of the content is minimal, it tells us that the two are related.

Phil Renaud’s portfolio has a unique layout and an incredible color scheme. He uses a gold-yellow color to create contrast between the vertical navigation and the rest of the predominantly brown design.

Color can also be used within text to create contrast. Billy Tamplin does an excellent job of creating separation and hierarchy by giving the headings, subheadings, and paragraph text all different colors. For a blog style layout, establishing contrast between post headings and body text is critical. It helps the user easily see where articles begin and end as they scroll down the page.

Contrast in Size

Another way to create contrast in web design is to use size differences between elements. In other words, make some things bigger than others.

Creating contrast through size becomes very important when you can’t rely on color. Taxi has a lot going on within it’s layout and has a minimal color scheme. So in order to establish a hierarchy among the three columns, the designer used a much larger width on the middle column – over two times that of the left and right columns. This makes it apparent to the user that the middle column is the most important area of the page.

Just as color can be applied to typographic headings to create contrast, so can size. Big headings are a great way to establish hierarchy within the content of a website. The website of Imaginaria Creative, uses big headings to catch the visitor’s attention and draw them in so that they read more of the smaller paragraphs below.

Contrast in Alignment

Good alignment plays a big part in creating a quality web design. Things just look better when they line up. This is why I think using different alignments to create contrast is tricky and should be used sparingly. However, when done well it can be very effective in creating separation.

LegiStyles uses a large left margin on the content blocks below each heading. Along with the the large size of the headings, this creates a good amount of contrast. If you are going to use this kind of difference in alignment, be sure to make it a big difference. Otherwise it will end looking like a mistake of poor design.

Centering large paragraphs is a big typography no-no. It makes text very hard to read. However, don’t be afraid to mix left aligned paragraphs with centered headings. It’s another good way to use difference in alignment to create contrast. Combined with a nice serif font, it can also give your typography a classic look.

Simon Collison uses centered headings paired with left aligned paragraphs in each of the content boxes. Since the font size of the headings isn’t much larger than that of the paragraphs, this helps set the headings apart.

A List Apart is another great example of using centered heading with left aligned paragraphs.

Now Go and Be Different

Learning to create the right amount of contrast in your designs is just like mastering any other principle of design – it takes practice. Take time to study the work of talented designers and see how they are using contrast in their designs. Remember that contrast is all about differences. If two elements are very different in nature, be sure to make their visual differences very obvious.

What is Whitespace?

Even though its name seems to suggest otherwise, whitespace doesn’t actually have to be white. It gets its name from the early days of graphic design where most printing was done on white paper. Whitespace is simply the empty space between and around the elements of a design or page layout. This can include: space around graphics and images, margins and gutters, space between columns, and even the space between lines of type. Whitespace is also referred to as “negative space”.

Whitespace is made of nothing, but shouldn’t be treated that way. There are several benefits that a generous dose of whitespace can bring to a design. Simply by increasing the space between elements in a layout, a design can take on a more elegant appearance, and by injecting more whitespace into a web design’s typography, content becomes more legible.

Elegance and Sophistication

In print design, paper is a valuable resource and clients will usually want you to use every square inch of it. After all, it costs them money and they want to get their money’s worth. Similar value is placed on screen real estate in web design. They both have set dimensions and represent limited space in which a message can be presented by displaying text and graphics. This is why being generous with your whitespace will speak volumes about your brand. By using large amounts of it, you’re saying that your content is far more important than the screen real estate that it rests on, and you can afford to sacrifice that space in order to better present your message.

Luxury brands use this concept to convey an image of sophistication and elegance. Let’s take these two furniture companies for example. Pottery Barn, being the more upscale of the two, uses lots of white space between the various elements. Notice even the logo uses large amounts of whitespace between each character.

Rooms To Go, on the other hand, is a lower end furniture store and it shows in their web design. There are several factors that contribute to this, and a lack of whitespace plays a major role. With so little space between elements, I won’t even attempt to insert the little red arrows.

Notice how the list of category links is crammed up against the left border. Things like this can make a design look sloppy and unprofessional.

Lets’s take a look at two other brands that you will probably recognize. Below is a comparison of the Apple home page and the Microsoft home page. You will notice that Apple, being the epitome of elegance and sophistication, uses plenty of whitespace. While the layout of the Microsoft home page is a bit more crowded, resulting in a not-so-elegant feel. This is right in line with each company’s general brand perceptions.

Better Legibility and Usability

On a micro level, whitespace plays a major role in typography and even usability. Text that is cramped with minimal line spacing can be very difficult to read. By adding more whitespace between lines of text, content becomes easier to scan and digest.

Information Highwayman is the portfolio of D Bnonn Tennant, and it’s an excellent example of great use of whitespace within text. The large amount of spacing between lines makes the content a joy to read.

Micro whitespace not only makes text easier to read, but also helps separate blocks of content from one another. This can help a user differentiate where content starts and stops.

Analog is a single page website. So it’s important to create enough separation between the various blocks of content so that they stand out from one another. Here, the Analog team uses varying amounts to create separation and flow within the content. A larger amount of whitespace is used to separate the content blocks, then a smaller amount is used between the paragraphs within each block.

Develop an Eye for Whitespace

Like so many other aspects of design, there is no set guidelines or rules for calculating the right amount of whitespace. All designs are different so the amount you use will vary from project to project. The best way to learn is experiment and study the work of other designs that seem to be getting it right. Eventually you will develop an eye and feel for what is the right amount of whitespace.