As a designer, it is important to be aware of the trending colors, and how they are being applied in products and work produced today. What really isn’t being discussed by the design world at large though are the limitations being set on color. Color is as free for us to use as the air we breathe… or is it?

The color palette is shrinking. It could affect the foundation of design for everything from websites to fashion. The fate of businesses and billions of dollars ride on choosing the right one. We’ll take a look at how color is becoming the next limited resource.

Limit: One Spectrum per World

Color is limited by what our eyes can see. It’s the visible light spectrum (wavelengths of light) our eyes can detect.

On one end of the spectrum lies red (longer wavelengths) and on the other blue (shorter wavelengths); everything in between those are the colors we find in nature.

The visible spectrum.

Although this spectrum we have available is limited, we still do have a lot of choice when it comes to color. We attempt to reproduce this spectrum in printing, monitors, paintings, and so on. The difference in the way a monitor displays color versus a printed brochure is a world away and more technical than most people would want to worry themselves with.

One company is responsible for connecting this vast chasm of color. Pantone.

Color by Any Other Name Would Be Pantone

If there is anyone that could say they own color, it would be Pantone. They have a monopoly on it in the truest sense. Every color you have ever seen used has been indexed and named by Pantone.

What Pantone has done is not a bad thing; in fact, it has done the world (especially designers) a favor. They have taken color from a chaotic Tower of Babel scenario with everyone talking about colors in very different ways and brought us all on to the same page. Literally. Their paint chip and fabric swatch books sit on the desks of designers everywhere.

Pantone’s system allows for a design agency in Chicago to make sure the color they specified for a brand is printed accurately in a magazine by publication in Europe, and looks the same in television spot being created by a firm in Los Angeles.

As J.C. Herz of Wired put it, "If color is a language, Pantone is the Oxford English Dictionary."

The Battle for Color

For companies, color has become one of the most important identifiers. More often than not, colors are how you recognize and associate products to that brand.

Marketing research has found 80% of visual information is related to color. It’s not just a green, a red, a blue, or a magenta. It’s "Starbucks Green", "Coke Red", "Gap Blue", and "T-Mobile Magenta."

Separating colors from their brands is close to impossible.

The inseparable color and brand association (above) have become a legal reality. Brands are putting a stake in the spectrum and claiming that color for their own use. An infographic of what this looks like was in Wired magazine in June of 2003.

Wired infographic showing the "color location" of the world’s biggest brands.

T-Mobile owns the color Magenta

The most interesting and polemic story of a brand buying and claiming a color space is with T-Mobile (Deutsche Telekom). They have trademarked the color magenta.

Yes, T-Mobile owns the rights to magenta.

They have been enforcing this over the years suing companies like a book-on-demand publisher, and most recently, in the blog Engadget Mobile.

To clarify, companies like T-mobile can only trademark in the industry sector that they are registered in. So T-Mobile has trademarked the color magenta in telecommunications. The blog COLOURLovers says that this means, "you just can’t use the color magenta around anything to do with phones, digital media… oh and just about anything on the internet."

What’s in a name?

In addition to a trademarked color, some companies are also trademarking the actual name of the color.

The insulation company Owens–Corning, known for their The Pink Panther commercials, have registered the term "PINK" (in capital letters only) in reference to its insulation.

UPS is one of the best-known companies of the world, shipping us our goods ordered from across the world to our doorstep. They trademarked the slogan "What can Brown do for you?"

The Europe-based mobile network operator and internet service provider, Orange, uses the color Orange both in its logo and as the trademarked company name.

The Color of Money

Not only are companies trademarking existing colors, but they are producing new colors, naming them, and trademarking them.

Jay-Z, the hip-hop artist and entrepreneur, collaborated with the car company GMC to do just that. Together with GMC’s Global Color Studio, they produced a blue hue called "Jay-Z Blue." It was used on the 2007 GMC Yukon Denali.

Jay-Z debuts the 2007 GMC Yukon Denali painted with his "Jay-Z Blue" color.

This idea of mixing a color and patenting it is not entirely new. The French artist, Yves Klein (known for minimalist monochromatic paintings), primarily started using his signature mixed blue in 1958. It is called International Klein Blue (IKB) and has been used in the fashion world.

Who owns color?

These trends in limiting color usage and the rights that brands have to trademark colors is a difficult road to navigate. Not everyone is well versed in trademark laws and intellectual property rights.

On one side, companies need to protect their brand identity, which they’ve invested much capital into. On the other side, there are designers and artists trying to create great work with a limited color palette.

There of course is a fear that at some point, the best color hues will have been claimed and there would be no other good colors left to design with. How likely is this scenario? As likely as anyone would have imagined being sued by T-mobile for using the color magenta.

Credits

• spectrum #2 used in the leading image by Ole Martin Buene.
• Skylights used to illustrate the color spectrum.
• pantone_7oct2009_0995 by Patrick Lauke.

Related Content

• 14 Brilliant Tools for Evaluating Your Design’s Colors
• 25 Great Examples of Using Gradient Effects in Web Designs
• Creating a Timeless User Experience
• Related categories: Web Design and Usability/Accessibility

About the Author

Francisco Inchauste is a web and interaction designer whose work you can find over at his online presence – Finch. By day, he works as a UX specialist for Universal Mind. He’s written for various design weblogs such as Smashing Magazine. Connect with him on Twitter.

Let’s look at our top 20 essential Firefox extensions geared for people who build websites.

1. Web Developer

The Web Developer add-on extends Mozilla Firefox by adding a toolbar with various options for working with web pages. For example, it has an option to inspect CSS styles of page elements that will tell you what CSS attributes they have, and which styles affect them.

2. SeoQuake

SeoQuake will help you in optimizing your web pages for search engines. It gives you an SeoBar that has loads of useful SEO-related options for you to take advantage of. This extension will assist you in identify issues pertaining to search engine indexing in your web pages.

3. Window Resizer 1.0

Window Resizer comes in handy for testing different screen sizes and monitor resolutions. It quickly and accurately resizes Firefox’s viewport so that you can test to see how your design looks in standard resolution sizes.

4. FireShot

FireShot is a Firefox add-on that creates screenshots of your web page. What is unique about this plugin is that it gives you a set of editing and annotation tools for working with your screenshots. This can be a handy extension to have for presenting your work in your portfolio.

5. Firebug

Firebug is considered to be the ultimate developer’s tool for Firefox. You are given a ton of web development tools to use from within your browser. You can explore, edit, debug, and monitor CSS, HTML, and JavaScript in real-time on any web page.

6. Greasemonkey

The Greasemonkey Firefox add-on enables you to modify how a web page looks and works by using small snippets of JavaScript. There are hundreds of scripts that you can download to enhance this add-on.

7. ColorZilla

ColorZilla is an incredibly simple extension for Firefox. If you’ve ever wanted to determine what colors are used on a web page, ColorZilla is the tool for the job. It adds an eyedropper icon to the bottom-left corner of Firefox.

8. FireFTP

FireFTP is a streamlined Firefox extension for uploading files to a server. It offers several advantages to standalone FTP applications, such as its operating system-independent requirements. This browser add-on has all the features you would expect from standalone apps.

9. IE Tab

This great add-on for web developers allows you to switch back and forth from IE and Firefox layout engines with a click of a button. This permits you to test and compare how each browser renders your web pages without having to leave Firefox or install IE(vil).

10. Palette Grabber

This add-on will build color themes that are exportable to popular graphic-editing software such as Photoshop, Paint Shop Pro, GIMP, Fireworks, and Paint.NET of the web page you’re currently viewing.

11. Font Finder 0.5c

With this add-on, you can highlight any text on a page to find out CSS styling information about that highlighted block of text.

12. Total Validator

This extension is an all-in-one validation tool that will check HTML, links, take screenshots and do a lot more. It also performs accessibility validation (WCAG, US-508), broken link checking, spell checking (in five different languages), and take screen captures via different web browsers and operating systems to see how your web pages look.

13. Platypus

Hands down, Platypus is one of the best Firefox extensions for modifying a web page. It works with Greasemonkey as a sort of WYSIWYG and it will remember your edits when you visit the web page again. You can use it to experiment with different variations of a web design.

14. Dummy Lipsum

An add-on with a very simple purpose, Dummy Lipsum generates Lorem Ipsum dummy text for you to use in your designs.

15. Page Diff

Page Diff  is an add-on that helps web developers and designers see HTML source code differences between web pages. This is helpful for finding code irregularities or differences that will enable you to debug rendering issues.

16. Aardvark

Aardvark, aimed at front-end web developers, let’s you select web page elements and gives you several options for them, such as removing them from the web page (great for screen shots) or modifying their colors (helpful when printing web pages).

17. Codetch

Codetch is a WYSIWYG editor add-on that allows you to edit web pages directly in Firefox. The interface is modeled after Dreamweaver (but thankfully, the price is not).

18. Measure It

Measure It is an add-on that gives you a built-in ruler for measuring web page elements. It’s great for figuring out dimensions of things on a web page.

19. YSlow

YSlow is a web browser utility that benchmarks a web page’s front-end design performance. It will assist you in optimizing your web designs for fast response times by identifying performance issues.

20. CSSViewer

CSSViewer allows you to inspect CSS properties on a web page that you’re viewing. It’s a great way to study styles that you’ve seen on websites to learn CSS development techniques.

What Firefox Addons do you use?

Why do you use them? Join us in the comments!

*Co-authored by Jacob Gube

Related Content

• 10 Useful Firefox Extensions to Supercharge Firebug
• Performance Comparison of Major Web Browsers
• Awesome Things That Firefox’s Web Developer Extension Can Do
• Related categories: Tools and Web Development

About the Author

Ben Mackler is a web designer and Photoshop enthusiast originally from Maryland with over 12 years design and development experience. In addition to teaching web design, he currently writes a tutorial and design inspiration blog at www.designtutorials4u.com. You can reach him on Twitter @designtuts4u.

So you finally decided to step up your blogging game and build yourself a site with WordPress. You’ve install a pretty good free theme and have a few posts under your belt. After a few days, you get seriously bored with the "My blog kinda looks like everyone else" syndrome and start your search for some creative ways to make your blog stand out from the crowd.

In this article, I will help you on your journey by showing you the 16 best places to find WordPress tutorials, hacks, themes and design inspiration to take your blog to the level it deserves.

1. Yoast

Yoast is the home of blogger and developer Joost de Valk. He has released over 20 WordPress plugins on his site and several other tools for webmasters and online marketers. If you are looking for a plugin for SEO or to track your site visits, Joost will certainly have exactly what you need. You can find all his plugins on the WordPress page of his blog. If you consider yourself a more advanced WordPress user, then I suggest you read through his "Guide To Higher Rankings For Your Blog". You will certainly see a difference in search engine traffic if you implement just a few of the tips that Joost shows you. I personally use the Breadcrumbs plugin and have implemented almost everything he has mentioned in that article.

2. WPBeginner

Are you a total WordPress novice? Perhaps you’ve been using another publishing platform such as Drupal or Joomla! and want to see what the fuss is all about with WordPress. Have I got the perfect site for you. WPBeginner offers tips, tools, resources, and suggestions to WordPress users. Check out the Tutorials section for all the help you will need when doing customizations to your blog. If you need help with installing WordPress, then WPBeginnner also has a service where they will install your blog for free. Prefer to learn about WordPress on your own? Visit the Beginners Guide and you will be an expert before you know it.

3. WPSwitch

WPSwitch is kind of like a Premium WordPress Theme on crack. In other words, if you’re searching for a sweet theme for your blog, design tips, or WordPress hacks or tutorials, this is the place you need to be. WPSwitch has all the top Premium WordPress themes from the most prominent designers in the world. You literally need to go nowhere else. Be sure to pay this one a visit whether you are a complete newbie or consider yourself the king of all that is WordPress.

4. WordPress Tavern

WordPress Tavern is a thriving community focused on all things WordPress. Those interested in the software can hang out with fellow WordPress’ers to engage in enlightening discussions. On WordPress Tavern, you’ll find reviews, news, screencasts, guest blog posts from some great community members and much more. Be sure you hook up to the WordPress Weekly podcast to keep up with all the latest hot WordPress topics.

5. WpRecipes

WpRecipes is a great place to find quick, clear and concise WordPress recipes. When you really need that little piece of code to do a certain thing, these handy, little snippets will do the job. I consider this site to cater to the more advanced WordPress user as a lot of these recipes involve diving into the code. There’s also a forum where you can ask a question to get help or even request a recipe.

6. WordPress.tv

WordPress.tv is "Your Visual Resource for All Things WordPress". There are hundreds of How-To videos that cover a range of topics to help you have a better blog. If you missed any of the Wordcamp’s, you can also view some of the speakers lectures at the events.

7. WP Topics

As WordPress has become mainstream, the number of news sources and tutorial blogs has become overwhelming. WP Topics only publishes feeds from established WP sites that provide useful, meaningful content on a regular basis. Here you will find the most relevant WordPress news, useful tutorials and influential voices in the WordPress universe — all in one place. This is a must-see resource for those who need to be in the loop of the latest WordPress trends.

8. Weblog Tools Collection

If you have ever used WordPress, you have more than likely seen this feed coming through your admin page. Weblog Tools includes the latest plugins, theme release and general WP news. This is great for the beginner, as you stay updated with new themes and potential plugins that make blogging even easier. I highly recommend keeping this site in your admin arsenal.

9. WordPress Hacks

WP Hacks is a place to discuss all things WordPress. In addition to featuring a large variety of WordPress themes and providing reviews of WordPress plugins, WordPress Hacks was set up to cover the world surrounding WordPress, including the latest WordPress hacks, news, tips, tricks, and how-to’s of the popular open source blogging software.

10. Hongkiat WordPress Category

If you are any kind of Web guru, you have at one time or another visited the blog of Hongkiat. When visiting this popular design blog it is an absolute necessity to take a trip to the WordPress category. Hongkiat covers a wide range of topics from inspiring blog designs, all the way to the detailed hacks. If you are a fan of WordPress at any level, this is definitely a place you want to go.

11. Pro Blog Design

Pro Blog Design writes about web design (blog design in particular!), coding, and WordPress (Yay!). They cover all the technical bits that bloggers should know, so they can get the most out of their blogs. For sake of this article, you should definitely browse their WordPress category as it offers numerous hacks, the best plugins to use, and super design techniques relative to your WordPress blog.

12. WPSeek

A WordPress search engine for developers and theme authors is what WPSeek.com is all about. You can find all kinds of code snippets for WordPress using this search site. This includes various WordPress functions, template tags, function sources, and random user notes. I would definitely say that this site is for the advanced WordPress developer.

13. WP Engineer

Three WordPress Junkies who love WordPress, created WP Engineer. They show various ways to make WordPress a little bit better, more convenient, more flexible or in short – just awesome! You’ll find some very in depth tips and tricks to really build a better blog. Some of these are very simple for the beginner and some can get pretty in depth to the WordPress core.

Where to find WordPress Design Inspiration

These sites are showcases of WordPress-powered sites to inspire your next blog design. They all feature an up-to-date collection of websites created using WordPress.

14. We Love WP

15. WP Inspiration

16. WP Float

Where do you go for all your WordPress hacks, tutorials, and design inspiration?

If you have a favorite WordPress site that I have not listed here, I would love to see it. I hope that there are some great finds out there that a lot of people don’t know about. Tell us all about it in the comments below!

Related Content

• 50 Beautiful Free WordPress Themes
• 30 Excellent WordPress Video Tutorials
• 15 Useful Tools for WordPress Bloggers
• Related categories: WordPress and Web Development

About the Author

Matt Alexander is a passionate Web junkie from Dallas, TX specializing in WordPress blog design. He is currently a full time freelance designer and blogger at WPSwitch. If you need some help with WordPress you can always find him on Twitter.

Section 8

By Alessando Baldasseroni

SEGA’s VIKING

By Michael Kutsche

Starcraft: Protoss Hero

By ProlificPen

Dawn of War

By Cheol Joo Lee

Ninja Gaiden

By Tomonobu Itagaki and Hiroaki Matsui

Gears of War

By Michael Heilemann

Red Steel

By Renaud Bec

Beacon (Unreal Tournament 3)

By Mavor

Halowars

By Alessando Baldasseroni

For the Horde (World of Warcraft)

By abraaolucas

Assassin’s Creed Fanart

By kerembeyit

Godfather

By Tyler West

Stranglehold

By Stephan Martiniere

Riddick Concept 02

By torvenius

Wanted: Weapons of Fate

By Nacho Yagüe

Elveon

By Radoslav Javor

God of War

By Eduardo Gonzalez

Killzone 2 – Extrasolar War

By skybolt

Assassins Creed

By Nicolas Bouvier and Patrick Desgreniers

Path of Neo

By Rick Majon

San Marco (Assassin’s Creed 2)

By Ubisoft

Half Life 2

By Jeremy Bennett

Starcraft

By Harley Huggins

The Path

By Auriea Samyn

Killzone

By Marcos Domenech

Hitman game

By Cynthia Iurinic

Project Gotham Racing 2

By Ben O’Sullivan

U-Wars Concept-Art

By leopardsnow

STF Lighting (Fable II)

By Lionhead Studios

Frontlines

By Alessandro Baldasseroni

Wagon (Assassin’s Creed 2)

By Ubisoft

Riddick concept

By torvenius

Smoke (Grand Theft Auto IV)

By Rockstar Games

Full Auto

By Vince Chui

Warhammer Online

By Alessando Baldasseroni

Johnny Shotgun (Grand Theft Auto IV)

By Rockstar Games

LCPD (Grand Theft Auto IV)

By Rockstar Games

God of War PSP Concept

By andyparkart

Fable II spell concept

By PeteAmachree

Halo wars

By agnidevi

King on Throne Concept

By aaronsimscompany

The Witcher

By Damian Bajowski

Gears of War

By Michael Heilemann

Damnation Moodpainting

By Mavor

Making of Perry Rhodan

By Sven Sauer

Terran Marauder Concept

By ProlificPen

Lair

By Deak Ferrand

The Hunter

By Alessandro Baldasseroni

Fable Village

By skybolt

Rise of Legends

By Dylan Cole

Related Content

• Popular Logos with Hidden Symbolisms
• 40 Useful and Creative Infographics
• 20 Beautiful Vintage Photoshop Brush Sets
• Related categories: Digital Art and Design Showcase / Inspiration

About the Author

Tomas Laurinavičius is interested in web design, graphic design and web development, based in Lithuania. He’s also the founder of WebDesignFan.com, a blog about Photoshop, web design, WordPress and inspiration. If you’d like to connect with him, you can follow him on Twitter.

UPrinting.com and Six Revisions teamed up to give five Six Revisions readers a chance to win a set of 500 die cut business cards. Today, we’d like to announce the winners of the giveaway.

Winners of the UPrinting Die Cut Business Cards

These are the folks you’ve won the business cards of the "Best Online Resource for Graphic Designers?" giveaway:

• Nikas
• Jose Adan Ortiz
• AJ
• Sandra Kidd
• Annick

Congratulations to the winners and you should get an email soon with details on how receive your prizes.

Screenshot

Here is the screen grab of the MySQL query that was executed to randomly select the winners.

Thank you all!

Thank you UPrinting for hosting this awesome Six Revisions giveaway and for giving away such lovely prizes. Thank you to the participants who voted for what they thought was the best resource for graphic designers. Be sure to subscribe to the RSS feed to get notified of future Six Revisions giveaways.

Related Content

• Best Online Resource for Graphic Designers?
• 20 Useful Websites for Graphic Design Textures and Patterns
• 25 Impressive Character Designs from Behance
• Related categories: Graphic Design and Photoshop

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Last week, Navicat, the creators of popular database administration software, worked with Six Revisions to give three lucky winners a chance to win single-user licenses of their wonderful tools. Today, we’re happy to announce the winners.

Winners

Here are the winners of the Navicat giveaway.

• Shaun – Winner of Navicat for MySQL Enterprise Edition license
• JR – Winner of Navicat for PostgreSQL Enterprise Edition license
• Matt Powell – Winner of Navicat for Oracle Enterprise Edition

Congratulations to the winners and you will be contacted soon about claiming your prizes. For those who were not able to win, there are more giveaways in store for you so make sure to sign up for the Six Revisions RSS feed to get notified whenever a giveaway is posted.

Screenshot

Here is the screenshot of the MySQL query used to randomly select the winners.

Thank you!

On behalf of the Six Revisions community, I thank Navicat for furnishing these licenses and for hosting a wonder Six Revisions giveaway. Also, thank you to the participants who voted for their favorite database administration management tool.

Related Content

• Navicat Database Tool Licenses Giveaway – Vote for Chance to Win!
• 7 Applications to Make Working with MySQL Databases Easier
• 12 Essential Security Tips and Hacks for WordPress
• Related categories: Tools and Web Development

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and PHP development. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

In this web design tutorial, you’ll see a process for converting a Photoshop mockup to working HTML/CSS template. This is Part 2 of a tutorial series that will show you how to create the design, and then convert it to an HTML/CSS template.

Minimal and Modern Portfolio Layout Tutorial Series

• Part 1: Design a Minimal and Modern Portfolio Layout in Photoshop
• Part 2: Minimal and Modern Layout: PSD to XHTML/CSS Conversion

Demo

Click on the image preview below to launch the demo of what we’ll be creating today.

Before you begin

If you haven’t already, you’re highly encouraged to do the Part 1: Design a Minimal and Modern Portfolio Layout in Photoshop of this tutorial series before you go any further. This is because the following will require the Photoshop mockup file from the first part. If you’ve done the first part, get your PSD mockup ready as we’ll be using it here.

If you want to skip the creation of the Photoshop mockup, you should go back to Part 1 and download the source files, as we’ll need it in this tutorial.

Creating the file structure and preparing the files

1 Create a new empty folder on your desktop called portfolio.

2 Inside the empty portfolio folder, create another folder called images that will contain our CSS background images and other image assets.

3 Next, create an empty CSS document called styles.css and an empty HTML file called index.html.

4 Open up your index.html file in your favorite source code editor; I’ll be using Adobe Dreamweaver in this tutorial.

5 At the top of your document inside the <head> tags, link to your style sheet (styles.css) so that it’s ready to go. You can use the code below.

Code block 1

<link href="styles.css" rel="stylesheet" type="text/css" />

Coding the layout sections

Below, you can see the basic structure of our web template. We’ll start our conversion by creating the basic sections of our minimal and modern web page template.

6 We are going to start with a main container (also commonly referred to as a wrapper), which will hold our document in place, centered on the web browser. Inside the container were going to have five div’s which will make up the sections of our website: the sections are #top, #welcome, #sidebar, #content and #footer.

The HTML code looks like this.

Code block 2

<!--CONTAINER STARTS-->
<div id="container">
  <!--HEADER/NAVIGATION STARTS-->
  <div id="top">

  </div>
  <!--HEADER/NAVIGATION ENDS-->
  <!--WELCOME AREA STARTS-->
  <div id="welcome">

  </div>
  <!--WELCOME AREA ENDS-->
  <!--SIDEBAR STARTS-->
  <div id="sidebar">

  </div>
  <!--SIDEBAR ENDS-->
  <!--CONTENT STARTS-->
  <div id="content">

  </div>
  <!--CONTENT ENDS-->
  <!--FOOTER STARTS-->
  <div id="footer">

  </div>
  <!--FOOTER ENDS-->
</div>
<!--CONTAINER ENDS-->

Slicing the template’s body background

7 Before we start diving into coding each section, let us first add our web page’s background. Open up your PSD file in Photoshop, select the Rectangular Marquee Tool (M) and then make a small selection covering the header/navigation and a bit of the background; the selection can be as little as 1px wide (because we’ll repeat it horizontally using CSS).

8 At the bottom of the selection, take note of the hexadecimal color code by using Eye Dropper Tool (I).

9 Once you’ve made the selection, go to Edit > Copy Merged, create a new Photoshop document (Ctrl + N), and then paste the selection to a new document. Usually, Photoshop will automatically fill in the width and height dimensions with the item on your clipboard, but in case it doesn’t, make sure that the dimensions of the new Photoshop document matches that of your rectangular marquee selection.

10 Once you’ve copied the selection into the new Photoshop document, go to File Save for Web & Devices (Alt + Shift + Ctrl + S), choose PNG-8 as the file format, and then save it as background.png inside the images folder.

Coding the template’s body background

11 Now that we have our background image sliced out of the Photoshop document, we can begin to code it nto our template. Open up your CSS file (styles.css) in your source code editor, and then use the following code.

Code block 3

* {
  margin: 0px;
  padding: 0px;
  border: none;
}
body {
  background-image: url(images/background.png);
  background-repeat: repeat-x;
  background-color: #001b32;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #c8c8c8;
}
#container {
  margin: auto;
  width: 850px;
}

Explanation of Code block 3

Let’s go over the styles in more detail.

First, we reset all of our elements’ margins, paddings, and borders to 0 to avoid cross-browser inconsistencies. We do this with the * selector.

Next, we style the body element; we set background.png as it’s background property and we repeat it horizontally (repeat-x). We also set our background color to a dark blue (#001b32).

Finally, we style the #container margins to auto to center the layout, and set a fixed width of 850px.

Slicing the logo/site name

12 We’ll move on to our web template’s logo/site title. Using the Rectangular Marquee Tool (M), make a selection around the website’s title and slogan (look at the following figure for guidance).

13 Just like with the background.png, copy the marquee selection into a new document, and save it for the web as a transparent PNG called title.png inside the images folder.

Coding the logo/site name

14 With our logo/site name all ready to go, switch back to your HTML document. Inside the #top div, create a new div with an ID of title.

15 Then, inside the newly created #title div, add an <h1> element with the name of your website; we’ll also create a hyperlink element (<a>) that will link back to the home page of our website. For the template, we’ve simply assigned the href property of the a element a value of #, but if you’ll use this on a live website, you can use a backslash (/) instead to link them back to your home page.

The HTML code looks like this:

Code block 4

<!--HEADER/NAVIGATION STARTS-->
<div id="top">
  <!--WEBSITE TITLE STARTS-->
  <div id="title">
    <h1><a href="#" title="Your Website Name">Your Website Name</a></h1>
  </div>
  <!--WEBSITE TITLE ENDS-->
</div>
<!--HEADER/NAVIGATION ENDS-->

16 Now, let’s move over to the stylesheet. To style our #top section elements. Here is the CSS code.

Code block 5

#top {
  float: left;
  width: 850px;
  height: 119px;
}
#title {
  float: left;
  width: 278px;
  height: 74px;
  padding-top: 45px;
}
#title h1 {
  display: block;
  float: left;
  width: 278px;
  height: 74px;
  text-indent: -9999px;
}
#title h1 a {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(images/title.png);
  background-repeat: no-repeat;
  background-position: 0 0;
}

Explanation of Code block 5

Let’s look at the above code in more detail.

Firstly we need to float the #top div to the left and give it a fixed width and height.
The width should be 850px, identical to the #container and the height is the same as the light gray area on the web layout mockup.

Next, we use a technique called CSS background image replacement using the text-indent method. We indent the text inside #title h1 by -9999px to the left, which essentially pushes it out of the browser view port. This is a good technique for screen reader accessibility and search engine optimization.

Coding the Navigation

17 Still inside the #top, create another div with an ID of navigation right after the #title div. Inside the #navigation div, add a simple unordered list containing your navigation links and give it a class of nav-links. Here’s the code block for the #navigation div.

Code block 6

  <!--NAVIGATION STARTS-->
  <div id="navigation">
    <ul class="nav-links">
      <li><a href="#" title="home">home</a></li>
      <li><a href="#" title="about">about</a></li>
      <li><a href="#" title="portfolio">portfolio</a></li>
      <li class="borderx2"><a href="#" title="contact">contact</a></li>
    </ul>
  </div>
  <!--NAVIGATION ENDS-->

Explanation of Code block 6

Giving the unordered list a class of nav-links allows us to target it with CSS and not have other unordered lists in the web page affected. Note that the last list item has a class of borderx2, which basically means "border times two"; this is because our PSD web layout mockup had separators in between each navigation link and when we add our CSS styles later on, we’ll give the last item a 1px border on the left and the right (hence border x 2).

Slicing the hover indicator

18 Before we add the CSS styles for our navigation, we must first slice our little hover triangle. Head over to your PSD file and make a selection around the triangle using the Rectangular Marquee Tool (M). Copy and paste the little triangle to a new document with a transparent background then save it as nav_hover.png in the images folder.

Styling the navigation

19 Now, it’s time to add the CSS code for the navigation of the web template. Head on over to your stylesheet and use the following CSS:

Code block 7

.nav-links li a {
  float: left;
  width: 120px;
  height: 68px;
  text-decoration: none;
  text-transform: capitalize;
  color: #666666;
  font-size: 12px;
  text-align: center;
  padding-top: 51px;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #cecece;
}
.nav-links li a:hover {
  color: #00284a;
  background-image: url(images/nav_hover.png);
  background-repeat: no-repeat;
  background-position: center bottom;
}
li.borderx2 {
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: #cecece;
}

Explanation of Code block 7

First, to display the list items side by side, we float them to the left. We give them a fixed width and height so that they’re evenly spaced. Then we remove the default underline on hyperlinks by giving it a text-decoration attribute of none (browser default is underline). We give each list item a 1px gray border on its left.

We then style hover states with the :hover psuedo-selector. When hovered on, we give the list item the CSS background of nav_hover.png.

Finally, to deal with the situation that the last list item doesn’t have a 1px gray border on the right, we declare border attributes for the .borderx2 class.

Creating the Welcome Area

The welcome area will be split into two parts, the left side (#welcome-text) and the right side (#welcome-image).

20 To start, go back to your HTML document (index.html). Inside the #welcome div we created earlier, create two new divs: give the first one an ID of welcome-text and the second one an ID of welcome-image. We’ll continue to filling in these two new divs after we slice out the things we need for the welcome are.

Slicing the Welcome Images

21 Head over to the PSD file, inside the layers window hide all your layers (click on the eye icons beside each layer to turn off the visibility) apart from the dark blue background which has the radial gradient applied to it.

22 Select the Rectangular Marquee Tool(M) and make a selection around it. The width should be no wider than 850 pixels, so use the Photoshop guides that we set up in the first part – Design a Minimal and Modern Portfolio Layout in Photoshop – of the this tutorial series.

23 Copy and paste the dark blue background to a new document and save it as content_background.png inside the images folder. Using the same method explained above, turn the visibility of the respective layers back on and then slice the welcome image and bullet point (see the figures below for reference).

The HTML for the new sections look like this.

Code block 8

<!--WELCOME AREA STARTS-->
<div id="welcome">
  <!--WELCOME TEXT STARTS-->
  <div id="welcome-text">

  </div>
  <!--WELCOME TEXT ENDS-->
  <!--WELCOME IMAGE STARTS-->
  <div id="welcome-image">
    <img src="images/welcome_image.png" alt="Welcome..." />
  </div>
  <!--WELCOME IMAGE ENDS-->
</div>
<!--WELCOME AREA ENDS-->

24 Inside the #welcome-text div, we add some welcome text like that shown in our Photoshop mockup. Use an <h2> element for the heading of the welcome text, and then add a simple unordered list underneath.

25 Inside the #welcome-image div, add your welcome image (in this case, the Six Revisions screen shot).

All together, the the HTML code should now look like this.

Code block 9

<!--WELCOME AREA STARTS-->
  <div id="welcome">
  <!--WELCOME TEXT STARTS-->
  <div id="welcome-text">
    <h2>welcome to <span class="heading-color2">yourwebsite!</span></h2>
    <p>Lorem ipsum dolor sit amet, consectetur[...]</p>
    <p>Proin fringilla nunc lorem, in sollicitudin orci. Sed ut eros ligula.</p>
    <ul class="list">
      <li>Lorem ipsum dolor sit amet...</li>
      <li>Lorem ipsum dolor sit amet...</li>
      <li>Lorem ipsum dolor sit amet...</li>
      <li>Lorem ipsum dolor sit amet...</li>
    </ul>
  </div>
  <!--WELCOME TEXT ENDS-->
  <!--WELCOME IMAGE STARTS-->
  <div id="welcome-image">
    <img src="images/welcome_image.png" alt="Welcome..." />
  </div>
  <!--WELCOME IMAGE ENDS-->
</div>
<!--WELCOME AREA ENDS-->

Styling the Welcome Area with CSS

26 We can now start to style our elements within the welcome area. Copy and paste the following code into your style sheet and read the explanation of the code block that follows.

Code block 10

#welcome {
  float: left;
  width: 850px;
  background-image: url(images/content_background.png);
  background-repeat: no-repeat;
  height: 326px;
  padding-top: 40px;
}
h2 {
  text-transform: uppercase;
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 15px;
}
.heading-color2 { color: #9a9a9a; }
#welcome-text {
  width: 406px;
  line-height: 18px;
  padding-top: 50px;
  float: left;
  text-align: justify;
}
#welcome-text { margin-bottom:10px; }
.list li {
  text-decoration: none;
  background-image: url(images/bullet.png);
  background-repeat: no-repeat;
  list-style-type: none;
  float: left;
  width: 180px;
  padding-left: 20px;
  margin-top: 10px;
  background-position: left center;
}
#welcome-image {
  float: right;
  height: 326px;
  width: 427px;
}

Explanation of Code block 10

Let’s look at the important CSS declarations in more detail. Firstly, we give the #welcome div the radial gradient as a background attribute (content_background.png). The image is added as a background that doesn’t repeat (repeat: no-repeat). We’ve then given the div a set a fixed width and height; the width should span the width of our web template (850px) and the height is as high as the welcome image (236px).

We then have our <h2> elements. We make it all caps by using the text-transform property. We wrap the second ‘yourwebsite’ text inside a span with a class of heading-color2 to give it a different color.

For our unordered list that has a class of list, we give its list items a background image property set to bullet.png and remove the default rounded bullets of list items by declaring a list-style-type property of none.

Finally, so that our #welcome-image div displays on the left of #welcome-text, we float it to the right and give it a fixed width (which is good practice when floating elements). We also give it a width and height equal to welcome_image.png that we sliced out of our PSD file.

Slicing the 3D Separator

27 For the 3D separator, I’ve decided to use an empty div element with a class of separator so that it can be used numerous times very easily. To start creating the 3D separator, head over to your PSD file and make a selection around the 3D separator using the Rectangular Marquee Tool (M); the selection should be no bigger than 850 pixels wide and no higher than the separator itself, but make sure you get it all in.

28 Copy and paste the separator to new document with a transparent background and save the file for the web as separator.png inside the images folder.

Coding the 3D Separator

29 The HTML and CSS for the separator is quite easy. In your HTML document, pleace the following code right after where the {#welcome} div ends. We use a non-breaking space ( ), to put something inside our .separator div.

Code block 11

<!--WELCOME AREA ENDS-->
  <!--SEPARATOR STARTS-->
  <div class="separator">&nbsp;</div>
  <!--SEPARATOR ENDS-->

30 Head on over to your CSS file and use the following code.

Code block 12

.separator {
  background-image: url(images/separator.png);
  background-repeat: no-repeat;
  float: left;
  height: 17px;
  width: 850px;
  margin-top: 20px;
  margin-bottom: 20px;
}

Explanation of Code block 12

We give .separator a background-image property equal to the separator.png we obtained from the PSD mockup. We give it a fixed width of 850px, equal to the width of our layout and float it to the left. The height property is set equal to separator.png. We give it some top and bottom margin so that there’s always a 20px gutter on top and at the bottom of the elements that it separates.

Slicing the Sidebar

31 For the sidebar, all we will need is the sidebar box. The sidebar box will have fixed dimensions for this tutorial, but it can be easily expandable later on if you desire (we’ll leave that part up to you). In your PSD file chose the Rectangular Marquee Tool (M) from the Tools Panel and make a selection around the box; my selection is 259 x 259px.

32 Copy and paste the sidebar box to new Photoshop document with a transparent background and save the image for the web as contentbox.png inside the images folder.

33 Once you’ve saved your image, head back to the PSD file and make a 1px wide by 2px high rectangular marquee selection around the small separators in between each dummy list text (see the following figure).

34 As per usual, copy it into a new Photoshop document and save it for the web with the filename of divider.png inside the images folder. The selection only has to be small for the separators as it will be repeated horizontally using CSS.

Marking up the Sidebar box in HTML

35 Lets look at our HTML for our sidebar box. Head on over to your HTML document and use the following HTML markup right after the .separator div. Notice that we have a third level heading (<h3>) for the sidebar’s heading. Also note that we assign the unordered list a class of sidebar-list so that we can target it easily with CSS and give it its own styles.

Code block 13

<!--SEPARATOR ENDS-->
  <!--SIDEBAR STARTS-->
  <div id="sidebar">
    <h3>lorem ipsum dolor</h3>
    <ul class="sidebar-list">
      <li>Lorem ipsum dolor sit amet, consectetur sit adipiscding...</li>
      <li>Lorem ipsum dolor sit amet, consectetur sit adipiscding...</li>
      <li>Lorem ipsum dolor sit amet, consectetur sit adipiscding...</li>
    </ul>
</div>
<!--SIDEBAR ENDS-->

Styling the Sidebar box with CSS

36 Go to your stylesheet and use the following styles (read the code explanation that follows to understand what’s going on).

Code block 14

#sidebar {
  float: left;
  height: 209px;
  width: 219px;
  background-image: url(images/contentbox.png);
  background-repeat: no-repeat;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 20px;
}
h3 {
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  margin-bottom: 20px;
  font-size: 12px;
}
.sidebar-list li {
  list-style-type: none;
  margin-top: 10px;
  padding-bottom: 10px;
  background-image: url(images/divider.png);
  background-repeat: repeat-x;
  background-position: bottom;
}

Explanation of Code block 14

We give the #sidebar div a fixed width and height equal to the width and height of contentbox.png. We float it to the left so that it will display to the left of the content section (which we’ll tackle next). Also, we set the background-image property to the contentbox.png.

We transform the text of our h3 elements of our web page to all uppercase letters with the text-transform property and center it using the text-align property.

Finally, remove the default bullets from the .sidebar-list list items by setting the list-style-type property to none, as well as set their background-image to divider.png and repeat it horizontally (repeat-x). We then give them some margins and paddings to give them some space in between each other.

Coding the Content Area

37 The content area is really simple as it only contains a couple of paragraphs and headings. Inside our #content div, just add a second-level heading element (<h2>) and wrap the second part of the text with span.heading-color2 to give it a different color. To fill out the content area, just insert some paragraph elements with lorem ipsum text. The HTML looks like this.

Code block 15

<!--CONTENT STARTS-->
<div id="content">
  <h2>welcome to <span class="heading-color2">yourwebsite!</span></h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque.</p>
</div>
<!--CONTENT ENDS-->

Styling the Content Area with CSS

38 Head on over to your stylesheet and use the following style declaration for the #content div elements.

Code block 16

#content {
  float: right;
  width: 550px;
  text-align: justify;
}
#content p { margin-bottom: 10px; }

Explanation of Code block 16

The #content div is floated to the right and with a fixed width so that it displays on the right of the sidebar box. We don’t give it a fixed height because we want the text inside it to control the height. We give the paragraph (<p>) elements a margin at the bottom to give them some space in between one another (since we’ve reset our margins and paddings earlier on, this needs to be done).

Slicing the Footer

39 We’re coming close to the end, so let’s keep going and finish this bad boy up! Switch to your Photoshop file and make a rectangular marquee selection with dimensions of 850px x 60px around your footer background image (see the following figure as a reference).

Coding the Footer

40 Once again, the footer is really simple to code: we just use the {#footer} div that we already created earlier on in the tutorial. Inside the #footer div, we add our copyright text embedded using a <p> element. The HTML looks like this:

Code block 17

<!--FOOTER STARTS-->
<div id="footer">
  <p>Copyright &copy; Six Revisions - Design By Richard Carpenter</p>
</div>
<!--FOOTER ENDS-->

Styling the Footer with CSS

41 We then style our footer using the following styles (go to your stylesheet and place this code block in there).

Code block 18

#footer {
  float: left;
  width: 850px;
  background-image: url(images/footer.png);
  background-repeat: no-repeat;
  height: 60px;
  margin-top: 40px;
  padding-top: 25px;
  text-align: center;
}

Explanation of Code block 18

We use footer.png as the background-image property value of the #footer div; floated to the left and making sure that the CSS background image doesn’t repeat with the no-repeat property value. The #footer div has a fixed width and height  equal to the dimensions of the footer background in our Photoshop file. We give it a top margin to give it a bit of space from the div’s on top of it.

Finito!

We are done! Thank you for reading this tutorial and following along, I look forward to your comments and questions! If everything went well, you should have ended up with something like this:

(click on the image to launch the working demo)

Download

The source files for this tutorial is released under the Creative Commons license; you can use it for commercial and personal use, as long as you leave the copyright information in the source file.

• minimal-modern-portfolio-demo.zip (ZIP, 0.29MB)

Related Content

• How to Code a Grunge Web Design from Scratch
• Coding a Clean & Illustrative Web Design from Scratch
• How to Create a Dark and Sleek Web Design from Photoshop
• Related categories: Tutorials and Web Development

About the Author

Richard Carpenter is a freelance web and graphics designer from England. He is also a Blogger and Tutorial Writer, and owner of HV-Designs.co.uk. You can follow him on Twitter – @hvdesigns.

When you have a website or a network, it’s helpful to be aware of any issues as soon as they occur. There are open source and freeware server/network monitoring tools that will supervise your infrastructure for any issues that may arise. These tools are meant to aid you in avoiding being taken offline and evaluating if your resource needs has outgrown your infrastructure.

In this article, we review our top 10 server/network monitoring tools. You will see a variety of server applications here so that you might find the tool (or tools) for your needs.

1. Monit

Monit not only monitors your server, but also attempts to remedy problems by taking predefined actions for certain situations. For example, if your database server crashes, Monit can automatically restart the service if this is the action that you want to take (hint: it usually is).

If you have more than one server that you need to monitor, then you can use M/Monit- an extended version of Monit that provides a simple way to monitor multiple machines.

There’s also an iPhone app available for M/Monit to help you conveniently check on your network without lugging around a laptop around.

2. Ganglia

When you have a cluster of machines, it’s difficult to see how the whole cluster is doing all at once. Ganglia, instead, presents an overview of the whole cluster. This is a great tool to have set up when you’re working with a server cluster; with that said, it may be overkill for single-machine set-ups.

3. Munin

Munin monitors and graphs system performance metrics. It can automatically produce daily/weekly/monthly/yearly performance graphs and reports of many important metrics. It comes with the ability to monitor core system resources, such as memory, disk space, CPU usage, server applications such as MySQL, Apache, and Squid.

One of Munin’s greatest strengths is how simple it is to extend. With just a few lines of code, you can write a plugin to monitor almost anything. Being so easy to extend means that Munin is also a good choice for graphing things unrelated to server performance, such as the number of user signups or website popularity.

4. Cacti

Cacti is similar to Munin in many ways. What is makes Cacti different though–and where it stands out in relation to Munin–is that it allows you to resize your graphs and view data for an arbitrary range. Whereas Munin has fixed daily, weekly, monthly and yearly graphs (unless you write a custom extension), Cacti lets you view your data however you want to: last 2 hours, last 4 days, last 6 months, out of the box. You can even visually select and zoom into regions on your graphs.

5. Nagios

Nagios is "the industry standard in IT infrastructure monitoring,"–well, at least that’s what it says on their website. Nagios can be complicated to install and configure, but its wealth of features are unmatched by any tool out in the market and is geared for the experienced IT network administrator. Nagios supports monitoring of multiple hosts and can send out alerts via email, pager (if you still use this ancient technology) or SMS/text messaging. Like Monit, it can also be configured to automatically respond to problems.

6. Zabbix

Zabbix is a feature-packed monitoring tool. It has great visualization support including user-defined views, zooming, and mapping. It can send out alerts via email, SMS or instant message. It also provides audible alerts, which can be useful when you’re physically near the monitoring machine.

7. ObserverNMS

ObserverNMS is geared towards Linux, BSD and Cisco networks. It supports auto discovery of your network infrastructure, finding the networks that you’re likely interested in monitoring; this feature can be compared to how your Wi-Fi software automatically finds signals in range that you can jack into. ObserverNMS provides detailed graphs, and can be set up alongside Nagios to provide alerts. It also integrates well with Collectd (featured below) for a more robust interface.

8. Zenoss

Zenoss is an open source version of the commercial server monitoring tool Zenoss Enterprise, written entirely in Python. It supports the Nagios plugin format, so many existing Nagios plugins can be used in Zenoss. One of the main highlights of Zenoss is its powerful yet simple to use user interface.

9. Collectd

Collectd is similar to Munin and Cacti in that it focuses on graphing system metrics. Where it excels in is that it is designed specifically for performance and portability; this ultimately means it’s great on rugged systems, low-end systems, and embedded systems. Being designed for performance and low-system resource use means that Collectd can gather data every 10 seconds without interfering with your server processes, providing extremely high-resolution statistics. You can write extensions for it in C, Perl or Java.

10. Argus

Argus focuses on the monitoring of network services, and supports IPv4 and IPv6. It has a nice alert escalation procedure: after sending out an alert and the problem still isn’t resolved within a fixed amount of time (because the systems admin is at home enjoying his sleep), another alert will be sent out to someone else.

What do you use?

Do you have experiences with any of the tools above? Do you use something else? Join our discussion in the comments.

Related Content

• Website Features That You Can Easily Offload
• 6 Tools to Help You Analyze a Web Host
• 7 Applications to Make Working with MySQL Databases Easier
• Related categories: Tools and Web Development

About the Author

Ben Dowling is a passionate software developer who specializes in web and mobile application development. He currently works for Mendeley in London, UK, and regularly blogs about development at Coderholic. You can also find him on twitter.

Pixmac, a microstock photo site (read more about them on the microstock:insider blog), is giving away 20 credits worth $23.00 to five randomly selected winners.

How to participate

This giveaway is sort of like a scavenger hunt; this is what you have to do:

Step 1: Head over to the Pixmac

• Web Address: http://www.pixmac.com

Step 2: Look for a photo that you think represents design and/or development

Step 3: Head back to this page and, in the comments:

• provide a link to your photo
• describe why you think it represents design and/or development
• and share your experiences with using the Pixmac site

Giveaway details

The giveaway ends on November 10, 2009, after which commenting will be disabled on this post. Five winners will be randomly selected from the comments of this post. Please make sure to fill out the email field in the comments web form because this is the only way we can contact the winners.

About Pixmac

The Pixmac stock photo agency offers more than 7,000,000 pictures. It’s very easy to use and you can start purchasing your photos in a matter of minutes, no registrations required! Registered users are able to purchase credits at a reduced price. Finding the photos you want is fast and easy with their excellent search feature. Check out the Pixmac blog where you’ll find interesting interviews and news about Pixmac, and connect with them on Twitter and Facebook.

We know all too well the common and frustrating design scenarios clients present us with, such as wanting us to stretch images disproportionally, cramming as much information as possible in a small space so that you need a magnifying glass to read the text, or brushing off design best practices. Yet we seem to always have the same flat rebuttals to throw back, and furthermore, we repeat them time and time again.

I’d like to share with you two quotes that have helped me deal with getting my ideas across to clients.

"Tell me and I will forget. Show me and I might remember. Involve me and I will understand."

- Chinese Proverb

"You only need three guiding principles: show up, tell the truth and be on time."

- Brian Matt, Founder/CEO, Altitude, Inc.

I’ve come to realize that in order to drive the point home, you have to evolve your method of communication. From the two quotes above, I have narrowed down four key points that we should always keep in mind when briefing and dealing clients.

Be Honest, Brief and Direct

Your relationship with a client can be compared to any other relationship: if there is no trust, you will not be able to communicate effectively. I urge you to let clients know before signing a contract that–as a professional designer–you have boundaries, that you will be very candid in your responses, and most importantly, that you are offering design consulting as a service, not as a thoughtless product factory.

Say something like this:

"I don’t believe this will be effective to reach your goal, it will actually hinder it – I’ll tell you why, and then show you how we can improve on your concept."

Instead of humoring your client like this:

"Um… yeah that won’t be a problem, I’m sure I can get it to work…oops, no it didn’t work, let’s go back and maybe try something else?"

You grab their attention by stating your point first, elaborating on it briefly, and then summing it up with a positive note. By doing this, you get your main concern or idea across without wasting your breath on details or redoing a mock-up because you were too passive.

Identify a problem and present alternative solutions and ideas.

Involve and Engage the Client

Wearing the hat of an expert in anything almost always doubles as that of an educator. You have to be meticulous when showing what you mean, you want to make sparks fly.

Here are three scenarios to illustrate:

Lab Experiments

Let’s say, for example, that you’re designing an email campaign and you want to show the client why it’s better to use eblast software X over eblast software Y. The best way to answer the question of "Why this?" is by setting up trial accounts for software X and software Y and having them try each software.

By letting the client experience first hand the difference between ‘cheap but bulky‘ vs. ‘user-friendly but slightly more expensive‘ (for example), they will appreciate you for being candid and for engaging them in the decision-making process regardless of what eventually ends up being the choice of software.

Show and Tell

Recently I was stuck recreating a corporate board presentation modeled after an outdated design. During proofs, I made two versions of the presentation: one version adapted to my standards, and one version that was quite literally what they asked for.

That way, I covered my bases by giving them what they want, but I also managed to put in my two cents; I’m able to show the pros and cons of their concept versus my concept in a way that they can actually see.

This approach works well when it doesn’t take too much time and effort to do so.

In Another’s Shoe

How about the "horribly stretched and pixelated photo" scenario? Clients might not be able to notice the issues with pixelated images as easily as you or me, but they would definitely react to them if they were to see a photo of their own face being stretched out and pixelated. Wouldn’t they?

The point here is not to frustrate or embarrass your client, but to figure out a way to relate the goal to them personally so that it makes more of an impression.

The key is to make a connection to reduce the chances of clients ignoring your advice and bridging the gap of understanding between a creative mind and an end-user.

As a designer, you need to be creative not only while creating the design, but also when you’re presenting it to the client.

Be the Professional that You Are

This usually goes without saying, but it doesn’t hurt to state it again once in a while – you’re a professional, so look and act like it.

Dress the Part

Being professional not only means that you know your profession inside and out and that you make a living out of your expertise, but it also means you put in effort to present yourself as such when meeting with a client. This can be anywhere from dressing up in a suit and tie or wearing an attire that will impress your clients.

Be Prepared

Preparation and being resourceful will more than likely gain you respect and leverage with your clients. You will find yourself less nervous, and you’ll have more current and cognizant examples handy during your discussions.

In turn, you will find that clients will listen and be more responsive to you because you are showing that you care enough to prep yourself and that you know what you’re doing.

Utilize Effective Communication Techniques

Psychology plays a big part in how you communicate with your clients (or anybody for that matter). I’ll briefly mention a couple of techniques that have worked for me in the past.

Smiling on the Phone

Smile when talking to a client over the phone — they can hear it. How you react when answering the phone resonates a vibe. Ever call someone while they’re running late or when they’re fuming because they’re stuck in traffic? The vibe you give out will either encourage the client to be more receptive and at ease, or more defensive and guarded.

Mirroring

Mirroring is a psychological method that works for me when sitting face to face with a client. By reflecting your clients’ movements and gestures, you can show a sense of empathy and understanding. Doing a little bit of homework on effective communication methods will really help in improving your interaction with clients. Here are some resources you should check out:

• Theories about persuasion
• Do you make these 10 mistakes in a conversation?
• A Simple Guide on How to Effectively Talk to Clients

In Summary

Any scenario of briefing a client will be unique based several factors such as the personalities during the meeting, how effective you are at communication, and the messages you’re trying to share. However, patiently tuning into the correct wavelength and adopting positive practices never fails.

Using these four key concepts gives me the confidence and leverage to break through to many people, especially with my clients.

What methods have worked for you? Are they similar, different? Care to share a scenario where communication methodology got you through? Join the discussion in the comments.

Related Content

• 7 Things Web Designers Hate Hearing from Clients
• Feedback. The Creativity Killer.
• Inspirational Tips and Tools from a Designer
• Related categories: Project Management and Resources

About the Author

Fatima Mekkaoui, aka Imokon, strives to help small businesses develop a commanding brand and online presence and educate them about it. She is currently contracted as a creative catalyst at St. Julien Communications Group LLC, a PR firm in Houston, TX. To get in touch, visit her site or send a tweet @Imokon.