How to ‘Get a Client’

1. Talk.
Either you have a convincing personality, people like you, and hire you on your word. Yes, this can happen with the right charisma. BUT it can bite you in the butt if you don’t follow up and produce a good product. People who find clients using this method (talking) usually have a hard time producing the quality they promote verbally. However, if you spend time and effort above and beyond the client’s expectations, especially on your first projects, this method will suit you well.

2. Use Your Portfolio.
If you have the liberty of time, some monetary support, or are attending school, take advantage of it and develop your portfolio. A potential client’s decision is heavily based on your past work and experience. No matter how much charisma you have, if your portfolio stinks you’ll have a hard time getting and retaining clients. Build your craft and become a master of your trade. But at the same time don’t stress about jumping into paid situations. Do your homework, put in the hours, be confident and make it happen.

3. Use Both.
Obviously using both is ideal. A talker with a poor portfolio, poor work ethic and follow-up will not get far. Yet the same goes for the extremely talented designer, who doesn’t network, advertise, or talk about their services. How is anyone going to know about your talent if they don’t know it exists? Both quality design work and good social skills are important, however we are only human and may not be able to do both. That doesn’t mean you have to throw in the towel. Hone into what you’re good at and work on your weaknesses. If you’re a good talker, put extra time into networking events, conventions, and meet-up groups. But don’t neglect your portfolio or quality of work. If you have an insane portfolio, but are really shy, advertise using social networks and listing services. But still force yourself to attend networking events. Be confident and don’t be ashamed to advertise what you do to friends and family. You’d be surprised how many people you know need a website or know someone who does.

4. Start Cheap.
This may a little controversial for some, but when you have no experience you are not very competitive in terms of portfolio and knowledge. The only way you can add a competitive edge to you service is by reducing your price. Granted you’ll be spending more time just trying to figure things out. But your learning curve is not the responsibility of your client. You are also less accountable for time sensitive projects when the price is low. If you need extra time to figure something out, a client is more likely to wait if they got a great deal. But whatever you do, don’t slack off. These projects will dictate your worth in the long run. As you get busier you won’t have time to do cheap work and your price will go up naturally. Remember, in freelance some pay is better then none.

5. Network.
I’m sure you hear it all the time, network, network, network. You are your own marketing / sales team, meaning you have to go out and sell yourself. And just attending networking events is not enough. You must advertise what you do, talk about work, and socialize with other designers to learn from their experiences. It’s also important to gauge your strong points and weaknesses. Don’t overwhelm your time trying to figure something out that you don’t enjoy doing or can’t grasp. Use networking to find others who are strong where you fall short and partner up. For example many graphic designers do not like to code websites. If you are good at coding XHTML and CSS but have trouble with the actual design, then graphically oriented designers can make good partners. And don’t just network strictly in your profession. Especially since the economy is down, many designers are looking for work. That means the field is more competitive and less designers will be referring work out. You’d be better off going to an architects networking event and advertising to them you create websites.

Conclusion

Freelance is not for everyone. It is extremely attractive to have your own hours, time, and be your own boss. But it is not without a cost. Freelancing is much more work, especially at the beginning. Usually as a freelancer you will be making less money then full-time employed designers, receive no benefits, raises are fully dependant on the demand for your work, experience tough competition, no job security, and you incur all the costs (expensive design programs like Adobe, large monitor, graphics computer, ink, printer, etc…). It takes a strange few with different priorities and the ability to live off less to choose the path of freelance. However, on the upside, a successful freelance service may grow into a new, flourishing business.

What You’ll Learn

• Colors and Their Meanings
• Keep Your Colors Natural
• Make Sure Your Website is Legible
• Avoid Too Many Colors on Your Website
• Taking in Account Visual Disabilities
• Online Tools to Help You Create a Color Scheme for Your Website
• Conclusion

Introduction

You consider color when choosing your clothes, the color of your house, when you paint the walls in a room, when lighting a stage, when picking flowers, and even the color you die your hair. Color matters for most of the things you choose, so why shouldn’t it matter on your website? Color sends a message and it is important to carefully select the message you want to communicate to your website’s users. It can instantly engage your visitors or drive them away. Understanding color and its implications is the very first step to creating attractive and affective websites.

Information regarding color and web design has no limits. This introduction to color on the web will only braise the surface of the endless resources available for this subject. Understanding colors that ‘go together’ is partly intuitive. However, you do not need to be a designer to grasp the basics and make good choices for your website. Here are some tools that will help you along the way.

Colors and Their Meanings

Al Martinovic and his article Color Psychology in Online Marketing outlines colors and their meanings. I provided his list below with a few modifications.

• RED is associated with love, passion, danger, warning, excitement, impulse, action, heat, blood, and tattoo art.
• BLUE is associated with trustworthiness, success, seriousness, calmness, power, and professionalism.
• GREEN is associated with money, nature, animals, health, healing, life, and harmony.
• ORANGE is associated with comfort, creativity, celebration, fun, youth, and affordability.
• PURPLE is associated with royalty, justice, ambiguity, uncertainty, luxury, fantasy, and dreams.
• WHITE is associated with innocence, purity, cleanliness, and simplicity.
• YELLOW is associated with curiosity, playfulness, cheerfulness, amusement.
• PINK is associated with softness, maternity, sweetness, innocence, youthfulness, and tenderness.
• BROWN is associated with earth, nature, tribal, primitive, and simplicity.
• GREY is associated with neutrality, indifference, industrial, and reserved.
• BLACK is associated with seriousness, darkness, mystery, grunge, ‘hardcore’, metal, industrial, and secrecy.

Keep Your Colors Natural

Don’t use too many bright colors on your website. This is typically seen on older websites and immediately dates your site. More importantly, it’s hard to look at bright colors on a screen for too long. You don’t want visitors leaving your site because their eyes hurt. There are some popular sites that use bright colors inventively and create a lively, young and fresh atmosphere. Twitter pages are a great example of this. Take a look at the example below:

Notice that the colors are ‘bright’ but washed out – by adding white. Web designers consider white the easiest color to look at on a screen for long time. Adding it to your bright colors keeps their ‘playfulness’ while enhancing readability.

Here is an example of a website that abuses bright colors:

But it would be boring to exclude color all together. Instead, choose a light colored background (add some white to the color of your choice) and dark text, or a dark background with light text.

Light Background / Dark Text

Dark Background / Light Text

The subject of contrast and legibility has many elements and complexities that cannot all be addressed in this post. Smashing Magazine has a wonderful article about contrast and legibility. I found ColorLovers blog Calculating Color Contrast for Legible Text and W3shools Color Test extremely helpful. Below I compared examples of a legible website and illegible website.

Legible Website

Illegible Website

Don’t try getting too crazy with the color of the background. If you want to add some depth to your website consider different textures. Textures In Modern Web Design from Smashing Magazine’s blog has wonderful examples of using texture on a website. Also, look at other websites you like and pay attention to what they used as a background.

Avoid Too Many Colors on Your Website

Too many colors make your site seem ‘busy.’ And the more colors you have the harder it is to design. Five different colors seem to be the magic number for web design color schemes. Cameron Chapman in Smashing Magazine’s article Color Theory for Designer, Part 3: Creating Your Own Color Palettes talks about picking the number of colors in a color scheme.

Five is a good number that gives plenty of options for illustrating the concepts here, and it’s a workable number in a design. But feel free to have more or fewer colors in your own schemes.

A lot of websites might only use three colors in their designs. Others use only two. And some might use eight or ten (which is a lot trickier than using fewer colors). Experiment and use as many or as few colors as you need to for your design. But you may want to start with a palette of five colors and then add or subtract as you see fit and as you progress through the design process.

The easiest way to add a color is to start with one of the predefined, traditional color schemes and then work out from there. That at least gives you a bit of direction as far as which other colors to consider.

Some of the easiest color schemes are white, gray, black and a color.

Or you can try it with brown.

Think About Your Audience

First consider the demographics of your target audience. How old is your target audience? Are they teenagers, children, adults or seniors? Are you targeting students, professionals, males, females, parents, teachers, lawyers, high income, or low income? Are your visitors coming largely from the US or internationally? Categorize your target audience as thoroughly as you can. The better you understand your audience the more you can customize your site to their needs. Don’t forget to take in account disabilities like poor eyesight (especially if targeting seniors), learning disabilities, and color blindness.

The Color of your Website is Important

Many web designers understand the technical workings behind a site, how to construct navigation, how to create a layout, and how to stick to a theme. However, a web designer who’s mastered the use of color is in a league above the rest. Picking the color of a website should NOT be an easy task. If it seems easy, then you are not giving it enough thought. The color of the site needs to send the same message as the text and images. The subjectivity of color makes this task difficult and ambiguous.

Choose a Key Color

A key color is a dominant color in a color scheme or mixture. Remember, you can’t choose a color until you have laid out what your website is trying to communicate. Only then, with your website’s agenda in mind, make a decision on the key color. Creating a list of associations for your color is a great tool to help you decide.

Creating a color scheme

A Color Scheme is a combination of colors that harmonize with each other. When creating a color scheme always remember the Rule of Contrast for a Website: use at least one dark color, one medium dark color, one medium color, one medium light color, and one light color.

There are endless ways to create a color scheme. The four traditional color combinations are as follows:

• Mono-chromatic: Using one color (hue) throughout, utilizing that color’s various tints, tones and shades. Using a mono-chromatic scheme with multiple textures creates character and maintains unity.
• Complimentary: Using two colors (hues) that are opposites such as red and green or violet and yellow. Choose varying tints, tones, and shades which will give the bold dramatic effect you are looking for.
• Analogous: Using three colors (hues) that are neighboring each other on the color wheel. These schemes can be warm or cool since colors are adjacent on the color wheel.
• Triadic: Using three colors (hues) that are equal distance apart on the color wheel, such as red, yellow and blue or using secondary colors yellow-green, blue-violet, and red-orange.

Using it on your Website

For the most part with these schemes, the first color (if we look at this from left to right) would likely be used for headlines. The second color would be used for body text or possibly the background. The third color would likely be used for the background (or body text if color #2 was used as the background). And the last two colors would be used as accents or within graphics.

Online Tools to Help You Create a Color Scheme for Your Website

Once you’ve decided on the mood you want to convey to your visitors, use these tools to help you pick a color SCHEME (a series of about 5 colors that you use consistently throughout your website).

Adobe Kuler is a site that provides preset colors schemes. The main advantage is the fact that visitors can choose the set of colors that best suit them based on different criteria like rating, positive comments, or even the names of those combinations. Adobe is also responsible for Adobe Creative Suite (Illustrator, InDesign, Photoshop, Flash, and more…). The site is fun and easy to use with literally hundreds of color combinations.

ColourLovers is a resource that aims at influencing chromatic trends. This is a great place to check out the world of color irrespective of the purpose, be it for ad campaigns, product design or architectural design. You can compare palettes, submit news and comments, or read articles and interviews.

Red Alt – I Like Your Colors is another important resource if you enjoy a particular website and you would like to employ the same set of colors, or at least detect exactly which are the hues employed with their corresponding programming code. You just insert the URL of that site and the colors are extracted.

ColorJack is a very interesting site, very similar to Kuler, providing different color combinations based on certain algorithms. The main tools offered are Color Galaxy, Color Sphere and Color Studio; if you are not familiar with web design programs, they may seem a bit difficult to use, but you will get easily accustomed.

DeGraeve Color Paletter Generator is similar to the Red Alt tool. What is more interesting about this one is the fact that you can select a photo that you think best suits your type of business and this instrument will extract the color palette it consists of.

Conclusion

Spend more time considering color and you will see a huge improvement in your web design. Color on a website is like lighting in a room. Cool fluorescent lights belong in an office building or a school, not your bedroom or living room. Just as warm mood lighting would not belong in an office or school. It is important to choose your colors wisely so they fit the purpose of your site and don’t confuse your visitors. Colors also affect readability, the illusion of space, implicit connections to objects and places, and have the ability to calm or excite the viewer. Use all of these connotations to your advantage, rather than ignore them and risk sending the wrong message.

Color can make or break traffic on your site. So follow these 3 steps when choosing your color…

1. Consider what you are selling or communicating.
2. Look at the list of colors and their meanings. Find the color that falls under the category of what mood you want to convey to visitors
3. Now that you’ve chosen your ‘general’ color, make wise decisions choosing different hues, tones and compliments of that color. Don’t overload your site with too many bright colors because it will be hard for visitors to look at the screen. Create a color scheme using the tools above and limit your palette to around 5 different colors. Check out this article from smashing magazine to learn more about hues, tones, chroma, saturation, shades, contrast and other color theory terms.

Apply your color scheme to your website and STICK WITH IT. Make sure the color of your site is cohesive and follows a pattern. If the color scheme changes all of sudden visitors will think they are looking at a different site. You are branding a company and avoiding confusion by carefully selecting your color scheme and sticking to it.

Some superb examples for a variety of color schemes include:

• Using a Monochromatic Color Scheme- Buy Rolls
• Light Blue Can Keep Your Website Visitors Calm – Computers in Personnel
• The Rule of Contrast for Website Color Schemes

Works Cited

11, // March. “Web Blog / Calculating Color Contrast for Legible Text by COLOURlovers :: COLOURlovers.” Color Trends Palettes :: COLOURlovers. Web. 29 May 2011. <http://www.colourlovers.com/web/blog/2010/03/11/calculating-color-contrast-for-legible-text>.

Chapman, Cameron. “Color Theory for Designer, Part 3: Creating Your Own Color Palettes.” Smashing Magazine. 02 Aug. 2010. Web. 29 May 2011. <http://www.smashingmagazine.com/2010/02/08/color-theory-for-designer-part-3-creating-your-own-color-palettes/>.

Chapman, Cameron. “Color Theory for Designers, Part 1: The Meaning of Color.” Smashing Magazine. Web. 29 May 2011. <http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/>.

Chapman, Cameron. “Color Theory For Designers, Part 2: Understanding Concepts And Terminology.” Smashing Magazine. Web. 29 May 2011. <http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/>.

“Choosing Colors For Your Website Design.” How to Create a Website – Free Tutorial for Beginners. Web. 29 May 2011. <http://www.2createawebsite.com/design/color-psychology.html>.

“Choosing the Right Colors for Your Web Site.” Avangate.com. 15 Sept. 2008. Web. 29 May 2011. <http://www.avangate.com/articles/color-web-site_59.htm>.

“HTML Color Names.” W3Schools Online Web Tutorials. Web. 29 May 2011. <http://www.w3schools.com/html/html_colornames.asp>.

Kuler. Web. 29 May 2011. <http://kuler.adobe.com/>.

London Executive MBA, MBA HRM, MBA Finance, MBA Accounting, Training Institute UK. Web. 29 May 2011. <http://hrodc.com>.

Primary and Secondary Colors. Web. <http://personal.monm.edu/KHEALDSCHMELZER/>.

Snell, Steven. “Textures In Modern Web Design.” Smashing Magazine. Web. 29 May 2011. <http://www.smashingmagazine.com/2009/01/07/textures-in-modern-web-design/>.

Studio 13: to Make Your Design Come True. Web. <http://www.studio13.fr/>.

• What To Do Before You Begin a Layout
• Web Page Anatomy
• Containing Block
• Logo & Identity Block
• Navigation
• Widgets & Blog Navigation
• Content
• Footer
• Whitespace
• Phone Number

Introduction

Layout & Composition mark the beginning of a website’s creation; before color, texture, backgrounds, typography, navigation or any other element of web design are considered. This makes it the hardest step in web design – getting started. The best way to learn about layout is by looking at other websites you particularly like, then decompose and analyze its composition by drawing a diagram. You can save these web designs in something called a design morgue; a collection of graphics, fliers, ideas, layouts, patterns, inspiring images, and whatever else may help inform your design. However, you are not limited to things you put in a box. You can keep a morgue file on your desktop of documents folder with links and screenshots of your favorite websites, inspirational blogs, great online designs, artwork, and so on. Since layout is such an intensive subject and so intrinsic to a good website, you may want to keep a separate morgue just for layout.

What To Do Before You Begin a Layout

Before you begin to design your website layout, you need to ask yourself, and eventually your client, some essential questions.

What does this company do?
What function/purpose is this website serving? Will it be an online store or just informational? Does the client perceive that it will be an e-store in the future?
Do have a detailed site-architecture map (basically a site-map) and list of pages that will be included on the site?
What is your target audience?

Never start a design without having the answer to these questions. Even though it may not seem directly related to ‘layout,’ you will find through experience that the answers change a design radically.

Web Page Anatomy

The standard website layout can look like this:

There are many variations to a standard layout. However, in order to have an effective and working site you must have these elements:

Containing Block

Every web page has a container or “wrapper” that contains the all the content of the page. The container may be a <body> tag or a <div> tag usually with the ID of “wrapper” or “container” that contains all the content. It can also be a table though it is NOT encouraged, except for pages with tabular data. The width of the container can be fixed, meaning a set amount of pixels that never changes. For example, you can set the width to 950 pixels. When choosing a width size, remember you are limited by the average size of computer screens and should not exceed 950px. The width of a container can also be liquid, meaning a percent or relative unit that change with the size of the window. For example, a width of 100% will stretch the container to the width of the window. Note that it’s harder to control the design of a website in a liquid design. The type, images, and composition of the site will change with different window sizes. If you neglect to include a container completely, your website will be a mess. Think of it as defining the size of an actual ‘page’ or ‘art board’ in print. The only difference is the page can stretch (if you give it a liquid width), and grows downward.

Logo & Identity Block

The logo is one of the first items a visitor sees on your website. A logo is the visual identity of a company. Fonts, colors and imagery used on a company’s logo and print marketing should repeat throughout the website. This creates and promotes a defining identity and brand. The identity block on a website should contain the company’s logo and name, and sit at the top of the webpage. This enhances brand recognition and assures visitors they are still on the same website. If your client does not have a logo, strongly suggest they have one designed. It helps define the theme and design of a website, and doubles up as an icon and favicon (a tiny icon that identifies a website, located by the web address bar at the top of the browser). A website that does not properly display their logo and identity may detract visitors since they cannot identify the company or purpose.

Navigation

The most important thing to remember when designing for web is that functionality and usability are critical to good design, not just something that looks pretty. That means navigation that is easy to use and understand is key when designing a website. In order to develop navigation in the best possible manner, you must understand the site architecture before you begin.

Site architecture is the hierarchal structure of the pages in a website. Basically a visual sitemap like the example below:

Well-organized site architecture is very important to the success of a website. If there are too many links on a page, the visitor is bombarded and will miss key links and information. If the pages are not properly labeled, then there could be a communication failure causing visitors to leave your website. Most importantly, links should always be above the fold. The fold is where the viewing window cuts a page off at the bottom, and a web user must scroll to see it. That means, don’t put important links/categories like “services” or “contact us” in the footer. Put technical links like ‘sitemap’ and the copyright in the footer. Many people choose to reiterate their contact information. That is fine, but make sure contact information or a ‘contact us’ link is somewhere above the fold as well. Organize the pages under basic categories. The more pages, the more important site architecture and navigation are for good web design. Web interface is about simplifying something complex. The simpler and more organized you can make a complex site, the better the communication, which translates to better sales and visitor retention.

Widgets & Blog Navigation

This layout element is generally for websites with a blog. A web widget is a small application that can be installed and executed within a web page by an end user. On blog sites they include categories and recent post links. Other popular web widgets include dynamic calendars, galleries, recently posted documents and press releases. As a general rule, don’t put in too many widgets on one page. Widgets that are not necessary for navigation or have lesser importance (aka galleries, press releases, etc..), should be put in the footer or somewhere below the fold. It can be exciting to add in dynamic content on a website. However, too much on a single page (especially above the fold) can clutter your website and distract visitors from important elements and information.

Content

Studies show that a visitor on your site takes 1/20 of a second to construct his/her first impression. That is barely enough time to see the most obvious elements on a website. Make sure you create visual emphasis on the key elements, since that is primarily what is communicating to your (human) visitors. Most visitors look at/read headlines, logo & id block, imagery, and bold or large type. Not everyone scrolls, so make sure that most important content is featured above the fold, not below where it can get lost. Content has a slightly different purpose to non-human visitors (aka Google, Yahoo, and other search engines). Even though a visitor might not read the smaller print or text on a website, a search engine might. So don’t neglect content, and use text to include as many keywords as possible on your website. However, place text blocks with keywords below the fold so it doesn’t occupy what designers consider ‘prime real estate’ on the your website.

Footer

The footer is a visual conclusion. Your footer should reiterate important links, contact info, and can include the entire sitemap, widgets that show recent blog posts, press releases and galleries. You can also hide non-important technical links like privacy policy, copyright, a link to the web designer, partner sites, etc. However, every site must go through the ‘footer test,’ which requires that a site be fully functional (meaning the end user can access all the important pages, posts and galleries, and contact info) without utilizing the footer.

Whitespace

Whitespace is another term for “negative space” or space between imagery and text. Negative space is as important as the text and imagery it surrounds. If there was no empty space on a website, everything would be cluttered and run together. In order to provide emphasis on key elements of you website, whitespace must be carefully considered and maximized. A ‘clean’ site usually means the layout utilizes a lot of whitespace, allowing each element to ‘breath’ and be seen clearly. The goal of a website is to create a webpage with sufficient information, yet allow for enough space so the page doesn’t look cluttered and confusing. This can be a tedious line and it takes practice and experience to really master the use of whitespace. The first step to consider, however, is an element of its own.

Phone Number

A phone number is not always a mandatory element on a website; however it is usually extremely important. For most websites, whether it is a business, service or skilled professional, the ultimate goal is to be contacted. When creating a website you must consider your whole audience. That means considering those who are not computer savvy and those who prefer to CALL rather then click around on your website. For those people you must have a phone number on the homepage, above the fold, and usually contained by the identity block or header.

Conclusion

Now you have all the tools you need to start a website layout. When starting a new website, make a list of the categories mentioned above. Check off each element as you include it in your design. If you are updating or revising an old site, go through the list and make sure the site has all the essentials and is well organized and laid out. Here is a brief recap of the layout elements described in this post:

Containing Block: A container for all the elements in your website, usually in the form of a <div> or <body> tag.

Logo & Identity Block: This is usually the first element seen by a website user. It usually includes a logo, company or website name, and a short slogan or tagline.

Navigation: This is the element that allows your website users to find and navigate the pages on your site. Make sure that a HOME link is always visible throughout your website and that the logo returns visitors home as well (a standard practice).

Widgets & Blog Navigation: Generally applicable to blog sites and websites containing blogs. Don’t overdue widgets and dynamic content on a single page. It can clutter the website and confuse visitors. If you do want to include a variety of widgets, put the non-critical ones below the fold.

Content: This element serves two purposes in web design: 1) It tells the visitor what you or your company is about, and includes important facts, imagery, and web functions. 2) It can be optimized for search engines (SEO) by including keywords, well-labeled header tags and images.

Footer: The footer has evolved over the years in web design. Before it was simply a place to put privacy policies, copyrights, disclaimers, and repeat navigation for users at the bottom of the page. Today you can use it to include widgets, calendars, and other dynamic content. Many designers choose to put the site map in the footer too.

Whitespace: Even though this element literally means ‘empty space,’ it is critical for web design layout. Not enough whitespace means your website is too ‘packed’ or cluttered. It is important to let every element ‘breath.’ Carefully composing whitespace can also help to emphasize certain elements over others in an inviting and subtler way.

Phone Number: Though the phone number can be considered part of the Identity Block, it has its own sections since it is so important. Not everyone likes clicking around on a website, and each person has different degrees of web savvy. The phone number must be clearly placed in the header (unless you do not want phone calls) for those who prefer it “the old fashioned way.” This also makes it easier for an interested prospect to contact you directly without searching around your website.

Having the basic elements is only the start to learning good website layout. There are many more factors that dictate a good layout versus a bad one. However, if your site includes these elements then you are assured, at the very least, of a fully functional web design.

Additional Reading –

Decomposing a Website’s Layout: A Case Study On Maxwell Scott
Emphasis on a Website Does Not Have To Be Loud
Web Design: How to Properly Implement Forms on Your Homepage
Website Layout: A Case Study on Auto Bid Master

Non-Paying Clients

If a client cost you money by taking up too much of your time without compensation, don’t hesitate to terminate that relationship. Just because the word ‘FREE’ is in freelance doesn’t mean you work for free. Many clients are unaware how the freelance business works. Explain to them that your time is the most important aspect of your business. If they take your time without compensation, they are basically taking money from you because you could be putting that time toward paying clients, marketing and networking.  Always try to get at least some compensation for early projects, even if you feel unsure of your ability. It is always the non-paying clients that will try to squeeze you for time and more free services.

Don’t Be Sensitive!

Allow your ego to take the back seat. This is not to say be a pushover when comes to pay. Always handle your freelance business like it is a business, not a favor, side project, or hobby. But when it comes to remarks a client may have regarding your design, stay cool. Always listen to what they have to say. It doesn’t mean always doing with they want, but you must listen first.  Then, if you have good reason, explain to your client why it is not a good idea. If you really aim to impress your client, think of some type of cooperative solution that meets their request halfway. It has happened to me countless times, a client suggests a change and I explain to them why it won’t work. A few days later I come up with a redesign and incorporate their request somehow in the design (without sacrificing quality). This way they are usually happily surprised, yet realize that it was an added effort and are more appreciative.

Don’t Take Forever

Turn around is a huge factor with freelancing web design. The longer you take to complete a project, the more frustrated your client is, and the longer it takes for you to get paid. Of course, you should always ask for half upfront as a retainer, but then you still need the second half. In addition, the longer it takes you the less you are receiving an hour. The best way to accomplish good turn around is to put in the hours. Calculate how many hours you’d need to put in a day if you were to put in forty hours a week. If you are serious about your business then you’ll put at least these many hours a week and should be working at least a few hours everyday. Freelance is not excuse to work less if you want to be successful. It’s about having the liberty to organize your time at your discretion. That means if you want to take a two-hour surf from 11am- 1pm you can. But you should still make up for those two hours later in the day.  Even vacations, if you extremely dedicated to your trade, should be working vacations. You should always be available for your clients; never avoid them! Anyone can find a designer who is impossible to reach and never gets the job done. If you want to be competitive and chosen over a hundreds of competitors (including pre-made print design packages like VistaPrint and do-it-yourself online services), you must offer excellent customer service and quick turn around.

What If Your Personalities Clash?

Sometimes clients are unorganized, emotional, poor businessmen/businesswomen, unhappy and frustrated, and just plain crazy. When do you draw the line as a freelancer and fire your client?  The same rule for non-paying clients goes for dysfunctional clients, if they are costing you time (with equals money) then they are not worth it. That is not to say that you never do someone a small favor or volunteer your time into cooperative startups. But if you are donating time and hate the people you working with then you are wasting your time. You should only invest your free time into projects you feel strongly about, and those you see as potentially successful. If it is a paying client (that pays well) or a project involving other people you like and potential for success, then you should consider finding some sort of compromise. This compromise usually must come from you, not the dysfunctional party. You need to put your ego out of the way. If they insult you put them to shame by showing them results, and don’t forget to charge Always try to follow through and complete the project. Once completed, you can choose not to work them again in the future.

Conclusion

Don’t waste your time on pro bono projects, but don’t rule them out if you don’t have work. If you are having trouble with dysfunctional clients, it may be you. Don’t put yourself above the rest. Make a list of clients you’ve worked with, clients you’ve fired, and returning clients. If you’ve worked with quite a few people, but also fired quite a few, and don’t have many returning clients, then you are doing something wrong. Perhaps you may be looking in the wrong places for clients. However, most likely you are not compromising. Make it your priority to satisfy your clients’ needs, be available by phone and email, and make sure you turn over projects as quickly as possible. Organize your time so that you put in close to forty hours a week and always try to be ahead of your clients’ demands. The more reliable you are, the more your clients will want to use and recommend you. In turn you will experience more repeat clients, referrals, and partnerships.

1. Go to school.
You can always develop your craft. If you freelance web design then you are fully aware that the web changes by the day. Better and improved code, widgets, templates, CMS platforms, and design trends are developed everyday. Community colleges and online schooling offer classes at affordable rates. If you live in California you can apply for the BOG waiver and receive classes FOR FREE! Do your homework and check out classes in your area. Even if you feel up to date with your own craft, today’s economy insists that freelancers offer the whole package of online and graphic trades. Learn about video productions, animation, web animation (such as Adobe Flash and Adobe After Effects), or take a class in PHP coding, JavaScript, or other relevant coding languages for web. You may even want to take a photography class so you can provide the photography for a client’s website or brochure.

The more you diversify your abilities to more you can offer to your clients. Today’s economy forces freelancers to go beyond their specialization and offer a range of services. The advantage to your client is that he or she doesn’t need to hire any more people, and can go to you for all their online and graphic needs. Even if you find that you are only good at one thing and can’t grasp other subjects like graphic design for print, coding, video, photography, or animation, going to class is a great way to network with other people who may be very talented in those fields, yet are still students and are willing to collaborate and work for less to gain experience.

2. Networking.
Needless to say, this is the most important factor to successful freelancing. If you don’t network, no one will know you exist. If you don’t exist, well, you won’t have any clients or work. Go online and join social networks like LinkedIn.com and Meetup.com. Both LinkedIn & Meetup have groups that you can join as a freelancer and meet other people in your trade. You can also join groups that are in industries you’d like to work with. Sometimes networking OUTSIDE your field is the most effective. If you are a designer and only network with designers, there is little likelihood that you will gain clients or work, especially when the economy is down and everyone is looking. If you network with fields that can use your services (aka architects, programmers, medical companies, real estate agents, beauty industry businesses, etc…) then you’ll be more likely to get work from these groups. Especially if you show interest and are familiar with their field.

A great tip for developers (even if its simple XHTML, CSS, and implementing pre-coded PHP and Scripts) is to network with designers. Designers usually have a lot of trouble coding their designs for websites. I personally have received a lot of work from designers having trouble customizing WordPress templates and creating websites from their Photoshop comp (a non functional design of a website). If you design as well, it will help communication since you understand leading, kerning, use of fonts, and other tedious design elements that other developers don’t. The same tactic works for designers. Developers and programmers on average make pretty bad designers. If you network with them, you’ll get more work suggesting changes to their design and/or creating designs for them to code.

3. Develop and improve your portfolio.
Second to networking, your portfolio is one of the most important tools for gaining clients. This is where a prospective client goes to see if you are qualified. The portfolio is second to networking mainly because you may not haveany prospective clients to see your portfolio if you don’t network. At times, clients will take a chance on your ability without a developed portfolio if you offer to work for less. So there again, networking is more effective then just a portfolio. Yet a better portfolio will help you seal the deal, and assist in receiving better pay for your work.  The more experience and talent a potential client sees by looking at your portfolio, the more worth they perceive in your services.

4. Find a field of interest and specialize.
Create mock clients and design their logo, website, stationary, advertising etc to feature your work in that field.  That way you can appeal to that industry without ever being previously employed by someone in that field.  It helps to position your services and serve a specific industry. Then you have potential to become an expert in that field and receive more pay for specialized services. Choose an industry in which you are somewhat familiar and have ties to. You may also want to include mock websites, print design, and social networking pages for your mock client and feature it in your portfolio. This way you have something tangible to show your clients/potential clients and advertise more services.

5. Intern.
Interning is an easy way to quickly gain experience and enhance your portfolio. It can also lead to a full time position or help you network with different people you meet. You may end up collaborating with other interns and starting business together.

6. Work on your own website.
What’s in your portfolio is important, but how it is presented is important too. Don’t neglect your own website. Make sure it’s minimalist (to showcase your work), clean, easy to navigate, and everything important is above the fold(whatever a visitor sees on the website without scrolling). Great work presented poorly looses it luster and may be dismissed. Your website should also be current and well designed.

7. Create a business plan.
Create a plan of action for yourself and your business. Sometimes we need a checklist to get things done. If this applies to you then create a business plan that outlines your networking plans, portfolio enhancement plans, designs for a new improved website, online networking goals, and other plans of action that will help gain clientele and enhance your business. It also helps to define what services you want to offer clients. Do you want to focus on online marketing? Branding? Web design for small business? Web design for a specific industry? Clarify how you want to market and brand yourself. Once you’ve defined your services you’ll find it’s easy to convey to prospective clients exactly what you can offer to their business.

8. Educate yourself with tutorials online or Lynda.com.
Self educate yourself on the latest trends, software, and related skills. Perhaps you may be interesting in including video with your website package. If you don’t have work, this is a great time to learn another trade or familiarize yourself with another valuable skill.

9. Brand yourself.
Come up with a focal point or ‘sweet spot’ to your business. Do you want to specialize in social marketing? Branding? Graphic development? Back-end development? Front-end development? Website updating and repair? Creating new websites for start-up companies? And list goes on. Find your place then brand your company accordingly.

10. Work on your business’s online social networking.
Currently, the top three social networks are linkedIn.com, Facebook.com, and Twitter.com. Personally I see LinkedIn as the most effective online network for businesses and freelancers. It is important to have your LinkedIn profile 100% complete. That takes more time then you would think. And it is one of the most widely used social networks for employers, headhunters, and other professionals looking for business partners and services.Second to LinkedIn is having a Facebook page(not profile). A Facebook page usually searches much better then a personal website since it is hosted by such a verbose and popular platform. When referrals or potential clients search for your services they will most likely come upon your Facebook page first. You can create links on that page that go directly to your website or online portfolio. You can also use the Facebook page to feature your best work and services. With the addition of iframes to Facebook pages, you can develop your page to look like a mini website.

Twitter is a good way to create a following and is easy to update. It also forces you to make your posts short and simple. What’s Twitter? It’s just like Facebook where you can update your status (what you’re currently doing, reading about, or learning) and now you can actually include an image. But mainly twitter consists of only text and links. Your status update is also limited to 140 characters so it has to be short. This appeals to the modern short attention span. You can feature links to your blogs, cool design ideas, blogs you’ve read and loved, something funny, or whatever you can squeeze into 140 characters.

Conclusion

Inaction is never an option if you want to be successful freelancing. Don’t be lazy or let yourself feel defeated. Freelance is difficult and requires a lot of work. If you just want to design and don’t like marketing yourself, try pairing up with other freelancers who prefer marketing. That means whether you like it or not you must network. If you can’t see yourself talking to other people, perhaps you should follow a different route. Work on a really good portfolio and resume and apply to full-time and part-time positions. But don’t forget, even though you spend time alone designing, collaboration and cooperation are the foundation of a successful, growing business. And when you decide to freelance you are no longer just a designer, but a business that must be self-sufficient, maintained and promoted. Follow the list and make sure you’ve covered every corner. When all else fails, create work for yourself and stay busy. Do whatever works for you, but never do nothing.

First, a bit of background info. The “avoid using tables for layout” blurb can be found in Introduction to Tables in the HTML 4.01 Specification:

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

However, as a practicing web designer you cannot overlook the importance of tables for tabular data. Tables are very important parts of user interfaces but often overlooked. Their purpose is to make that data readable, scan-able and easily comparable. One of the most common places to find tables online is on applications pricing pages, web hosting companies pricing pages and so on. Many people find tables full with information boring. However, a cleverly designed table can be very attractive and increase readability.

How to Create a Simple Table

TABLE HEADERS
Let’s start with a very simple table that only has a single row of headers, each defining the data in a column. Marked up with just table rows and cells, the markup would be this:

With no borders or styling, the table will look like this in most browsers:

By styling the table with a bit of CSS, you can make the headers more obvious for those using a graphical browser:

Now let’s break down the elements of the table and describe each one.

The block element tag that contains the table is <table> </table>.
A new row is created by using the <tr> tag.
Then columns in that row are created using the <td></td> tag.
When all the columns for that row are entered, the row is completed with </tr>.
A new row is started using the <tr> tag…. And so on until you finish creating the table. Don’t forget to close your table by using the closing </table> tag.

Best Practices for Marking Up Tables

Another important (but many times ignored) element used in tables is the table header <th>. Use this tag instead of <td> (table data) for the header cells. This actually makes your tables more accessible for the visually impaired. Visually impaired and blind persons use web ‘readers’ like JAWS that read the website out load. By using <th> instead of <td> for the header cells, JAWS and other readers will dictate to the visually impaired that it is a header, making it easier for them to understand. The example above using <th> would look like this:

Styling Tables

By default, a table does not include spacing, borders or styling. You can style a table using HTML styles or use CSS code. Styling a table directly in the HTML code looks like this:

<table width=”192″ border=”4″ cellspacing=”4″ cellpadding=”4″>
<tr><td>one</td><td>two</td><td>three</td></tr>
<tr><td>four</td><td>five</td><td>six</td>
</tr></table>

Notice you can control the width, border, cellspacing and cellpadding using HTML styles. Cell padding controls the white space between cell content and the borders. Cell spacing controls the distance between cells. You can even dictate the color of the border, background color and background image using HTML styles. However, its best practice to format tables using CSS styles.

CSS Styles for Tables

TABLE BORDERS
To specify table borders in CSS, use the border property.
The example below specifies a black border for table, th, and td elements:

Example:

Notice that the table in the example above has double borders. This is because both the table, th, and td elements have separate borders. To display a single border for the table, use the border-collapse property.

COLLAPSE BORDERS
The border-collapse property sets whether the table borders are collapsed into a single border or separated:

Example:

TABLE WIDTH AND HEIGHT
Width and height of a table is defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the th elements to 50px:

Example:

TABLE TEXT ALIGNMENT
The text in a table is aligned with the text-align and vertical-align properties.
The text-align property sets the horizontal alignment, like left, right, or center:

Example:

The vertical-align property sets the vertical alignment, like top, bottom, or middle:

Example:

TABLE PADDING
To control the space between the border and content in a table, use the padding property on td and th elements:

Example:

TABLE COLOR
The example below specifies the color of the borders, and the text and background color of th elements:

Example:

Conclusion

You can uniquely describe tables as rigid. The reason tables are no longer used for layout is precisely for that reason, it’s too rigid. In the past, before CSS (cascading style sheets), tables were the only way to organize the information on a page. You can immediately pinpoint sites online that use tables for their layout. Take www.coffeemakersetc.com for instance:

Nothing overlaps; the site is very ‘boxy,’ and organized into columns and rows. However, notice how neatly a table organizes the product images and their captions. Many times e-commerce websites use tables to organize the product images and information. If a caption below an image is particularly long the whole row adjusts and the information and images still look neatly laid out (without overlapping). However the actual PAGE layout on most modern e-commerce websites uses CSS positioning. Price pages and other tabular data also work great with tables. Tables should be used WITHIN the design when needed, but not FOR the design of your website.

Works Cited

” Tables in Web Design: Beautiful Examples and Best Practices | webexpedition18.” webexpedition18 | Web and Graphic Design Inspiration and Photoshop Tutorials. N.p., n.d. Web. 30 June 2011. <http://webexpedition18.com/articles/tables-in-web-design-beautiful-examples-and-best-practices/>.

“Bunn Coffee Makers, Fetco, Curtis, Grindmaster, Newco, Bunn – CoffeeMakersEtc.” Bunn Coffee Makers, Fetco, Curtis, Grindmaster, Newco, Bunn – CoffeeMakersEtc. N.p., n.d. Web. 30 June 2011. <http://www.coffeemakersetc.com/>.

“Web Design — Creating Tables.” James Q. Jacobs, Anthropology, Archaeology, …. N.p., n.d. Web. 30 June 2011. <http://www.jqjacobs.net/web/tables.html>.

description., a column. “Tables in HTML documents.” World Wide Web Consortium (W3C). N.p., n.d. Web. 30 June 2011. <http://www.w3.org/TR/html401/struct/tables.html>.

What is CSS?

CSS stands for Cascading Style Sheets, and is the code used by web designers to create styles, colors and the layout of a web page. In the past, styles, colors, and layout were dictated by the HTML and tables, which were very limiting. Today, web designers are expected to know how to create websites without table-based layouts. In fact, clients or hiring agents many times REQUIRE that web designers avoid table-based layouts. Instead, the designer must use CSS positioning to move elements on a web page. Positioning may be hard to understand at first, but once mastered it opens to doors to a much larger range of designs and effects, including layering elements.

What is Positioning?

Positioning allows the web designer to place an element anywhere on the page or screen. An element refers to any HTML tag such as <div> , <p> , <h1> , <ul>, <li>,<a>, <img>, <td> , and <li>. CSS has the capability to layer elements and determine the order they are layered. Positioning elements using Absolute and Relative properties is arguably the most challenging task when learning CSS. However, once positioning is understood and mastered the web designer has the ability to create almost any design his or her heart desires. Of course, there are still some limitations with different browsers, screen size, loading issues when using large images, and within the CSS itself.

Types of Positioning

STATIC POSITIONING:

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.

FIXED POSITIONING:

An element with fixed position is positioned relative to the browser window.

It will not move even if the window is scrolled. However, it WILL move if the window is adjusted. That means if you fixed positioned an element to the top left corner of the viewing window, when you widen the window the element will move to left so it remains in the top left corner. This can be useful for navigation or a link that you want always to be visible, even when the user scrolls the page.

Example of CSS syntax for Fixed Positioning:

Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is specified. Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist. Fixed positioned elements can overlap other elements.

RELATIVE POSITIONING:

A relative positioned element is positioned relative to its normal position.

Example of CSS syntax for Relative Positioning:

The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow. This creates what some refer to as a SHADOW. This means if you move an image that is 300px by 150px using relative positioning, there will be a blank space 300px by 150px where the image originally was in the normal flow of page.

Large/Main image on this site is statically positioned, meaning it’s in the normal flow of the page:

If we were to RELATIVELY position the main/large image 200px from the top and 100px from the left, our CSS would look like this:

And the result would look like this:

Notice the space where the image USED to be (between the top navigation and content below) is still there, almost like a permanent shadow.

IMPORTANT TIP: Relatively positioned elements are often used as container blocks for absolutely positioned elements.

ABSOLUTE POSITIONING:

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is the viewing window (essentially the same as fixed positioning). Absolutely positioned elements can overlap other elements.

Example of CSS syntax for Absolute Positioning:

Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist. In other words, the absolutely positioned element will not leave a ‘shadow’ like a relatively positioned element.

If we were to ABSOLUTELY position the main/large image (pictured before under relative positioning) 200px from the top and 100px from the left, our CSS would look like this:

And the result would look like this:

Notice how the content has moved up to meet the top navigation. The content is acting as if the image never existed in the natural flow of the page. The image can then be placed anywhere on the page, without affecting the other elements on the page.

IMPORTANT TIP:

Don’t forget, in order to absolutely position an element to anything other than the viewing window, you must establish a positioned parent element. A parent element is a ‘containing’ element, usually a block element like <body>,<div>,<h1>, and <p>. Decide ahead of time that you want to absolutely position elements on your webpage. Then relatively position the <body> tag, but do not move it left, right, bottom, or top. Your CSS should look like this:

Now you can absolutely position elements on your website without worrying about it positioning to the viewing screen.

OVERLAPPING ELEMENTS
When elements are positioned outside the normal flow, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element can have a positive or negative stack order. Here is an example of three images with different stacking orders.

img.bottom-image
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}img.middle-image
{
position:absolute;
left:0px;
top:0px;
z-index:0
} 

img.top-image
{
position:absolute;
left:0px;
top:0px;
z-index:100
}

A higher number z-index will always appear on top of a lower number z-index. Note that there is never a unit for a z-index since the number refers to the stacking order and not measurement.

IMPORTANT TIP:

Z-index can ONLY be applied to a POSITIONED ELEMENT (other then static).

Conclusion

It is IMPERATIVE that you understand and master CSS positioning before you decide to professionally create websites for clients or a company. The best way to master positioning is the same for anything else you want to be good at: practice, practice, practice. If positioning confuses you, the worst thing to do is avoid it. You cannot get around positioning when creating a website. In fact, once you have this technique down you begin to love it. Positioning is hard to initially understand because it is difficult to articulate. When you actually EXPERIENCE positioning elements you will understand how it works much better, usually from mistakes. So don’t give up if it seems hard, keep at it!

Block elements can also be placed into other block elements like this:

A block-display element will span the full width of the space available to it, and will start on a new line in the flow of HTML. The flow will continue on a new line after the block-display element.

Common Block Elements

<div>
Your general-purpose box

<h1> … <h6>
All headings

<p>
Paragraph

<ul>, <ol>, <dl>
Lists (unordered, ordered and definition)

<li>, <dt>, <dd>
List items, definition list terms, and definition list definitions

<table>
Tables

<blockquote>
Like an indented paragraph, meant for quoting passages of text

<pre>
Indicates a block of pre-formatted code

<form>
An input form

Common Inline Elements

Inline-display elements don’t break the flow. They just fit in with the flow of the document. So here I’ve got a paragraph going on, and I’m going to add a <span> tag that has a yellow background and italic text. See how it just fits right in with the flow of the text? More elements are naturally inline-style, including:

<span>
Your all-purpose inline element

<a>
Anchor, used for links (and also to mark specific targets on a page for direct linking)

<strong>
Used to make your content strong, displayed as bold in most browsers, replaces the narrower <b> (bold) tag

<em>
Adds emphasis. Usually displayed as italic text, and replaces the old <i> (italic) tag

<img />
Image

<br>
The line-break is an odd case, as it’s an inline element that forces a new line. However, as the text carries on the next line, it’s not a block-level element.

<input>
Form input fields like Text Fields and Buttons

<abbr>
Indicates an abbr.

<acronym>
Working much like the abbreviation, but used for things like TLA.

Changing an Inline Element to Block and Vise Versa

You can use the CSS property ‘display’ to change an element from inline to block and vice versa. Here is an example of changing an <a> tag (used for links) from an inline element (its inherent property) to a block element:

a {display: block;}

This can be very useful when you want your page to look a particular way while using semantically-correct HTML. Changing an inline element to block is most commonly used for navigation and buttons. Semantically, the navigation for a website is a LIST of links, with sub-lists that constitute dropdown menus.

Here is an example of a simple navigation menu created as a list:

Here is how it looks as a normal list:

• Home
• About us
• Products
• FAQs
• Contact us

Now if you add a little CSS (in this case using the class .navigation):

And you get a menu that looks like this:

Conclusion

Understanding the difference of inline and block display elements is the same as learning grammar. You can still build a website even if you don’t know whether a tag you used is inline or block. But understanding it can take your design to new levels and help you solve complicated problems. Don’t ignore the small things. Those are the things that will drive you mad when you can’t get a particular element of your website to work. If you are having trouble positioning an element, manipulating it with CSS, or an element is acting ‘funny’ on your website, you should check to see whether the element you are trying to manipulate is inline or block. As a general rule, inline elements need a block element parent. If you are trying to style an inline element, style its parent block element instead.

Works Cited
Hunt, Ben. “Free Web Design Articles, Web Design Tutorials & Web Design Resources.” Free Web Design Articles, Web Design Tutorials & Web Design Resources. N.p., n.d. Web. 30 June 2011. .

A Quick Review on Cool and Warm Colors

Color sets the mood and feel for visitors on your website. While the effect of color varies by individual, there are some color effects that have universal meaning. Colors in the red area of the color spectrum are known as warm colors and include red, orange and yellow. Warm colors evoke emotions ranging from feelings of warmth and comfort to feelings of anger and hostility. Colors on the blue side of the spectrum are known as cool colors and include blue, purple and green. These colors are often described as calm, but can also call to mind feelings of sadness or indifference.

The Color Red and its Meanings

Red, the color of blood and fire, is associated with meanings of love, passion, desire, heat, longing, lust, sexuality, sensitivity, romance, joy, strength, leadership, courage, vigor, willpower, rage, anger, danger, malice, wrath, stress, action, vibrance, radiance, and determination.

Red is assertive, daring, determined, energetic, powerful, enthusiastic, impulsive, exciting, and aggressive. Red represents physical energy, lust, passion, and desire. It symbolizes action, confidence, and courage. The color red is linked to the most primitive physical, emotional, and financial needs of survival and self-preservation.

The color red is an intense color that is packed with emotion ranging from passionate, intense love to anger and violence – representing both cupid and the devil.

Variations of Red (hue, tone, tint and shade) and Their Meanings

Red is right at the transition of warm and cool. Therefore, the more magenta and purple the red, the cooler it is; the more orange it is, the warmer. A cool red is more representative of love and adds a little innocence. The more pink the hue, the less it refers to harsher connotations like the devil, passion, daring, and power. A warmer red conjures emotions of anger, passion and aggressiveness, mainly because it reminds the viewer of FIRE. You can further manipulate the meaning of red by adjusting the tone (add grey), tint (add white) and shade (add black).  A red tone may mute the pure red’s harsh connotations and add some neutrality (from the gray). A red tint will make the red look pinker and add some innocence and youthfulness. A red shade gives depth and adds more sophistication.

Conclusion

It is my opinion that red is the most misused color in web design, especially on older websites. When companies and site owners want to draw attention to an item or text (i.e. a sale price) they usually want to use RED. However, red has very strong cerebral & emotional connotations that may not fit the subject or message of a particular website. It is important to always consider a website’s color scheme. If there isn’t red or harmonizing colors already on the website, introducing it may make it look cheesy or ‘loud.’ Try using a complementary color (a color that is opposite to another on the color wheel) if you want an item to stand out from the rest.