Six Revisions

If you’re anything like me, it’s easy to "finish and forget" when it comes to web development. Once a website is live and the boss or client is happy, we close the project, kick off our shoes and crack a beer.

Part of the problem with this approach is the ever changing landscape online. Something that converts visitors today, might not be working two months from now (in some cases, it may not be working in the first place, but no one took the time to test it).

Redesigning a website, or even a single page, can be a tedious and time-consuming process. Re-opening a project that you so happily completed can take major mental willpower. However, improving a website doesn’t need to take weeks, or even days. I’m a believer in baby steps: making incremental progress, small victories, minor adjustments with big results.

That’s where my 45-minute plan comes into play. In less time than you spend watching The Bachelor each week, you can have a dramatic (and measurable) effect on your website.

Keep in mind, all times are approximate (and people work at different paces).

0 to 5 Minutes

Select a page where you can have the greatest impact

Surprisingly, this may not always be your homepage. Instead of trusting your gut, a little digging in Google Analytics (or your favorite analytics tool) can show you exactly where to start.

Here are some ideas on finding pages that you can work on:

Navigate to your "top landing pages" or "top entrance pages" report (in Google Analytics, this is found under "Content" on the left sidebar).

Use a filter to remove pages with minimal traffic (see the "Advanced Filter" link at the bottom of the table).

Sort your pages by bounce rate.

Select the biggest loser: the page with the most potential for improvement (a combination of high visits and bounce rate).

5 to 15 Minutes

Use free (or cheap) tools to determine which areas on the page need the most attention

If you really want to stick to 45 minutes, you won’t have time to use a lot of tools, but even using one will give you the insight you need to make an improvement.

Here are some tips and tools that you can help up your conversion rates:

Get free advice from the design and development professionals on Concept Feedback. You can find more tools like Concept Feedback in my previous post "10 Excellent Feedback Tools for Web Designers".

See how people interact with your site using Userfly or ClickTale (extra credit: set up an informal user test with your neighbor, or use a remote testing service like UserTesting or Feedback Army).

Use heat maps to quickly see what’s popular and what’s overlooked. CrazyEgg and clickdensity both provide heat map tools.

Setup a quick survey with Survey Monkey, or a poll with PollDaddy to see what your users want.

Still need help? Here is a quick list of high impact items you could be testing:

• Headline copy
• Buttons (size, color and location)
• Calls to action
• Whitespace
• Advertisement density
• Value proposition
• Text size
• Images
• Color scheme (There are many tools for picking colors)

Find more tools that you can use through these articles:

• 7 Tools You Should Be Using For Better Web Designs
• 7 Incredibly Useful Tools for Evaluating a Web Design
• 10 Promising Free Web Analytics Tools

15 to 40 Minutes

Define the top 3 items from your research and implement the changes

Chances are that you’ll discover a hundred different things you could change, but remember, the key is incremental improvement and not a complete overhaul. So choose the items that you believe will have the most impact, and start there.

Keep in mind that the changes you make don’t need to be perfect—this is going to be a work in progress.

As soon as you’ve narrowed down your list to three, develop the content and code a test page right away. Limiting your list to three items keeps the project manageable. Don’t try to overdo it: you’ll be surprised how much impact just three seemingly minor adjustments can make.

If you get done with three and still want to try new changes—great!—this needs to be an ongoing process. However, don’t let an overwhelming list of ideas prevent you from action.

40 to 45 Minutes

Split test your new page, rinse and repeat

Once your new page is ready, set up an A/B split test in Google Website Optimizer to track the results. Make sure to select a conversion page that accurately reflects your primary goal for that page.

Depending on the amount of traffic your page receives, you should be able to determine relatively quickly (anywhere from a few hours to a few weeks) what effect your changes made. If you’ve done your due diligence, you’ll most likely be rewarded for your effort with an increase in conversion rates, and sometimes your tweaks can result in substantial improvements.

However, you may find that your new page performs about the same, or in some cases, worse. But that’s the beauty of testing! Every test, whether successful or not, provides you with new knowledge about your site: what works and what doesn’t.

So—now that you’ve spent 10 minutes reading this—take the next 45 to improve your website. And please, come back here and let me know how it goes!

Related Content

• An Introduction to Website Split Testing
• Unleashing the Power of Website Analytics
• A 4-Step Process for a Positive Web Marketing Approach
• Related categories: Usability/Accessibility and Project Management

About the Author

Andrew Follett is the founder and CEO of Concept Feedback, a free web design review community for designers, developers and marketers. Follow Andrew and Concept Feedback on Twitter.

Unarguably one of the most important aspects of any design is its colors. Designers create the style of a site, as well as the movement it makes, the emotion it creates, and its purpose based largely upon the color choices they make. Colors are powerful tools and an important thing all designers should understand when creating websites.

Color Terminologies

Many of you may have learned some color basics in school, but let’s quickly review some terminology in order to get a better grasp on colors and how to use them.

Color Wheel Main Groups

Colors are traditionally shown in a color wheel, and from this wheel, we can separate colors into three main groups: primary, secondary and tertiary.

The three primary colors are red, blue and yellow. These colors are the base colors that make up all the other colors on the color wheel.

Mix the primary colors together, and you get the secondary colors. These are orange, green and purple.

Tertiary colors are comprised of the middle colors like yellow-green and blue-green. They are created by mixing a primary color and a secondary color.

Relationships of Colors

There are plenty of terms to describe colors, which will be helpful to know later on when we discuss colors and their emotional meanings.

Complimentary colors are colors that compliment each other well and are located opposite of each other on the color wheel. These are colors like blue and orange, purple and yellow, and red and green.

Analogous colors are those located right next to each other on the color wheel, so they usually match fairly well but provide little contrast when used together.

Color Groups Based on Emotions

There are color groups that are associated with emotions: warm, cool and neutral.

Warm colors evoke warmth like red, yellow and orange.

Cool colors make people think of cool and chilly colors like blue, green and purple.

Neutral colors, as the term suggests, don’t create much of an emotion. Colors like grey and brown are neutral colors.

The knowledge of all these terms can be used to a designer’s advantage to help create meaning and suggest certain emotions in a web design without words.

Types of Color in Design

There are two different color systems and both are used depending on what you’re designing for.

RGB is short for Red Green Blue, which are the three primary colors of the system and is produced with light. RGB is used on televisions, computer monitors, and any kind of screen.

CMYK, which is short for Cyan Magenta Yellow and Key (Black) is created by pigments and is used in print.

Designs on the web should be created using the RGB system.

Making Wise Color Choices to Convey a Meaning

Color theory is the practice of using the meaning behind colors to bring about a sensory experience. This practice can be applied to web design with some knowledge and thought.

People will often disagree about what certain colors mean and what colors designers should use to implore a certain emotion. However, what can’t be argued is that consumers do have emotional responses to colors.

When choosing colors for your designs, be deliberate; don’t use colors without purpose. Instead, use colors that are appropriate for your target audience, the message that the client wants you to convey, and the overall feeling you want the user to experience on your site.

Warm colors will bring about sunny emotions and are wisely used on sites that want to call to mind a feeling of happiness and joy. As a case in point, yellow became a popular color in web design in 2009 when the global economy wasn’t doing very well and companies wanted their customers to feel sunny and comfortable on their site.

Cool colors are best used on professional and clean-cut sites to achieve a cool corporate look. Cool colors stir up emotions of authority, establishment, and trust. For example, cool shades of blue are used in many banking sites, such as Chase. It wouldn’t be wise to use cool colors on a site about an upbeat topic because users will get the wrong impression.

What Colors Mean to Users

Most colors can be taken in a positive or negative manner, depending on how it’s used, the other colors surrounding it, and the connotation of the site itself.

Here are some general meanings of popular colors.

Red

Red symbolizes fire and power and is associated with passion and importance. It also helps to stimulate energy and excitement.

The negative connotations of red are rage, emergency, and anger, which stem from the passionate and aggressive qualities of red.

Orange

Orange is a combination of its two neighbors on the color wheel, red and yellow. Orange symbolizes happiness, joy and sunshine. It is a cheerful color, evoking childlike exuberance.

Orange is not as aggressive as red but takes on some of the same qualities, stimulating mental activity. It also symbolizes ignorance and deceit.

Yellow

Bright yellow is a happy color representing the positive yellow qualities: joy, intelligence, brightness, energy, optimism, and happiness.

A dingy yellow brings about negative feelings: caution, criticism, laziness, and jealousy.

Green

Green symbolizes nature and has a healing quality. It can be used to symbolize growth and harmony. People feel safe with green. Hospitals often use the color of green.

On the other hand, green is symbolic of money, showing greed or jealousy. It can also be used to symbolize a lack of experience or a beginner in need of growth ("green behind the ears").

Blue

Blue is a peaceful and calming color exuding stability and expertise. It is a common color used in corporate sites because of this. Blue can also symbolize trust and dependability.

A cool shade can bring about the negative side of blue, symbolizing depression, coldness, and passiveness.

Purple

Purple is the color of royalty and sophistication showing wealth and luxury. It also gives a sense of spirituality and encourages creativity.

 Brighter purples can exude a magical feeling. It’s also great for promoting creativity and feminine qualities.

Darker purples can conjure gloominess and sadness.

Black

Although black is not a part of the color wheel, it can still be used to suggest feeling and meaning. It is often correlated with power, elegance, sophistication, and depth. It is said that wearing black on a job interview can show that the interviewee is a powerful individual, and the same goes with websites.

Black can also be seen negatively because the color is associated with death, mystery and the unknown. It is the color of grief, mourning, and sorrow so it must be used wisely.

White

White—also not a part of the color wheel—symbolizes purity and innocence. It also shows cleanliness and safety.

Conversely, white can be seen as cold and distant, symbolizing winter’s harsh and bitter qualities.

Examples of Colors in Big Companies Sites

We’ll look at some large company sites to get an idea of how they use color and what that color means to their users.

Nike

Nike changes their site often, but it is usually dark with mostly black and grey hues. The black shows the power in their product, giving the impression that they sell quality products to sporty people.

White House

The White House website is mostly white and light grey with some blue and red accents. The white symbolizes hope and freedom, showing a value for safety and purity. The red and blue are of course the other USA colors, but the blue shows stability and peace, while the red shows passion and energy.

Amazon

Amazon’s site is mostly white, which is the best color to use for contrast and readability. It also shows cleanliness and helps users navigate the site freely. There are orange and blue accents to help people feel at ease when on the site, as well as excited and hopeful to find their perfect purchase.

Verizon

Verizon’s main corporate branding color is red, which is used throughout the site. This helps stimulate the excitement of users, showing a company that sells an exciting and fast-paced product. The white background is used similarly to Amazon, helping users navigate the site by displaying a clean and orderly site.

Best Buy

Best Buy’s site showcases dark blue hues, showing their stability and power in the electronic market. Buyers are making large purchases from Best Buy and need to feel secure and peaceful on their site. The yellow emits happiness and helps people feel excited and joyful while making their purchases.

Charles Schwab

Charles Schwab is an investment company, and in an unstable market, they need to make consumers feel peaceful on their site. They use soft and dark blue tones to achieve this, creating a calming and peaceful atmosphere on their site. The neutral brown is another corporate color and helps neutralize intrepid users’ feelings. The orange accents are used to generate excitement in buying stocks and help bring a happier feel to the site.

Dodge

Dodge’s site is mostly black which allows their images to pop. They use a bright red for accents. The black gives a powerful quality to the site, showing their products off in a sophisticated and masculine light. Black is a great color to use to make products look expensive and worthy of value. The red shows passion and excitement, as well as the hope to drive consumers to purchase the vehicles from a company that values commitment and quality.

Whole Foods

The main color used in Whole Foods corporate branding, as well as their website, is green. Whole Foods sells healthy and organic food for a premium price. The green in their site design does well to show their healthful and pure values as well as their nature-loving products. They also use some pale yellow accents that are very complimentary to the green, and it gives a joyful value to the site.

How You Can Use Colors in Websites

Colors give sites meaning without having to use descriptive words. They create a lot of impact, whether you intend for them to or not. They can help move a user’s eye through your site, creating movement and motion that directs users around a page. As seen in many of the corporate sites, they create emotions and values that help show users what the company is about and what kind of products they are selling.

Use colors to your advantage by carefully selecting complimentary colors and ones that showcase the values you’re trying to sell.

Pairing colors can help change the meaning of a site altogether. Pair a soft blue site that creates calming qualities with a bright orange, and you could change your site to be more exciting and joyful.

Maybe your client thinks the site you’ve designed is too harsh with lots of dark grey hues. Add soft blue colors and your site design could have a more calming and peaceful tone.

Resources for Having Fun with Colors

Many sites out there discuss color theory and the usage of color in design. Use these helpful resources below to find color matches and infuse more meaning into your site designs.

COLOURlovers

Find complimentary color matches and color palettes with this web-based tool.

Design Meltdown

This site categorizes sites based on different genres, including many color categories.

Find the Perfect Colors for Your Website – Vandelay Design Blog

Lots of color resources and tools are listed on this great post.

JavaScript Color Picker

This fun JavaScript tool can help you pick out the colors you want and help you see how they look together.

References

• Color theory – Wikipedia
• Color Meaning – Color Wheel Pro
• Color Branding: The Meanings Behind Colors – EveryJoe
• Color: Meaning, Symbolism and Psychology – Squidoo
• Color Scheme Designer 3

Hope you enjoyed this comprehensive post on colors and their vast meanings, please share your thoughts, opinions, and your favorite color tools and resources in the comments below!

Related Content

• How to Use Retro Colors in Your Designs
• 14 Brilliant Tools for Evaluating Your Design’s Colors
• Color: The Next Limited Resource?
• Related categories: Web Design and Tutorials

About the Author

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

Last month, Packt Publishing set out to give away five copies of my book, MooTools 1.2 Beginner’s Guide. Over 200 Six Revisions readers participated to win a copy of the book by leaving a comment on why they would like a copy. Today, I’d like to announce the readers that will be receiving a copy (in either paperback or eBook format) from Packt Publishing.

The Winners

• Nejo – (ebook)
• Trevor – (paperback)
• priyadarshi kunal – (ebook)
• Jennifer – (paperback)
• Dave – (ebook)

Congratulations to the winners! You should have already received an email about your prize (or will receive one soon, shortly).

MySQL Query Screenshot

Buy a copy of the book!

If you’re interested in having a copy of MooTools 1.2 Beginner’s Guide but didn’t win one, I would like to encourage you to purchase it on Packt Publishing or Amazon.com. Read more about it here.

Related Content

• MooTools 1.2 Beginner’s Guide Book
• Win a MooTools 1.2 Beginner’s Guide Book from Packt Publishing
• How to Auto Caption Images Using MooTools
• Related categories: JavaScript 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, and a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

The first published article on Six Revisions was about the things you need for a web project to succeed. Two years later, the site has reached a point that I would consider "successful".

The definition of "success" is different to everyone. To me, I define success as having a large audience that consists of readers from all over the globe that love and enjoy your work as much as you do.

In this article, I would like to reflect and share with you the things I consider to be the ingredients of our recipe for success and growth.

This article is part of Design Instruct Week, a weeklong celebration of our newly launched site, Design Instruct. This week on Six Revisions covers topics that deal with running websites and design, written by the founders/editors of Design Instruct and Six Revisions. Be sure to check out the Design Instruct Week Twitter Giveaway, which gives out different prizes every day of Design Instruct Week.

Unyielding passion for your work

Growing a web project takes time and dedication. It involves many days with little or no sleep. It has an abundance of minutia tasks that need to be done when you’d rather be doing something else. Building a website necessitates a schedule that would make anyone but those who are truly passionate and dedicated to their idea, give up. Do you have it in you?

A strong knowledge about your subject

Whether you’re building an email app that will revolutionize the way people do emails or a web publication about baking cookies, you have to know your subject inside and out. When you’re not well informed, it clearly shows through to your audience. Being knowledgeable about your subject is about creating trust: Internet users are wary about the things they consume on the Web. If you can’t prove to them that you can be trusted, they have thousands of other sites to choose from.

Talented people

The foundation of any web startup is the people that have built it. It’s no secret that the largest component that drives the continual growth of Six Revisions and Design Instruct are their brilliant writers. Without them, our two sites wouldn’t be where they are now.

Discovering people with the same passion and belief is rare. Thankfully, we’ve found a few of them that have decided to join our family (you can see just some of them on the About page). I spend a lot of my time working with our writers, as well as helping them grow their own websites.

Partners that compliment your skills

In the first article of Six Revisions, I said that you should avoid going solo for your web project. When things start to build up, in order to carry forward your growth and keep up with demands, you need to collaborate with someone.

For Design Instruct, I knew I needed someone who would be better than I am with visual art and design. I was a graphic designer back in the days when dinosaurs still roamed the earth, but have now since moved onto web development and web design. I also knew that I couldn’t run two sites on my own, yet I was fearful to put my fate in the hands of just anyone.

This is when I approached my brother (Isaac) to team up with me. He’s an illustrator and photographer by trade, and someone who—regardless of our relationship—is vastly dissimilar from me. He has brought his knowledge, skills, fresh ideas, and passion to the table.

Design Instruct and Six Revisions wouldn’t be able to advance without a solid partner, and I’m almost certain that your web project won’t be able to either.

An open ear to your audience

Your users have a lot to say. They have a vested interest in your growth and have entrusted you with the responsibility of constantly improving yourself to meet their needs. Oftentimes, when we believe in something so steadfastly, we tend to shut these voices of alternative thoughts out.

Critics are a penny a dozen on the Web—the Internet gives people a cloak of anonymity that make it a piece of cake for raffish individuals to say negative things about your web project just for kicks.

However, there are also many people with ideas and suggestions that can make your site better. Take advantage of the collective nature of the Internet by listening to your users’ opinions, suggestions, and ideas. They have taken the time to share these ideas at no cost to you but your time to listen to them.

Relationships with people in your industry

The Web has the ability to connect us with people that we might not be in close proximity to. It’s important to foster and create relationships with people in your industry, regardless of whether you consider them competition or not. When we are working together rather than against each other, we can drive innovation and grow together instead of creating a counterproductive environment.

Make it a habit to reach out and contact the people in your industry. Participate on discussions in their website (you can, for example, frequently find me in the trenches of Smashing Magazine and Envato comment sections), see if there are opportunities to team up and build something together, trade war stories, and just get yourself on their radar.

Staying informed about the happenings in your industry

Keeping up with the events happening around you is critical. It’s part of being knowledgeable about your subject and is something your audience expects you to be doing. Especially on the Web, when things change so rapidly and interests are fickle, it’s imperative to maintain your information current.

Effective time management skills

Having a good time and task management habit ensures that you can keep up with the growth of your web project. Time is the primary limiting factor to your growth, and thus, you have to treat it as a resource, just like your budget and your technology infrastructure.

Taking risks

What stuns advancement of any project is the fear of change. Fear of change leads to fewer or no innovations. On the Web, being risk-adverse is not a good trait to have. In a realm where things move very quickly, being a stick in the mud will only make sure that the people around you that are taking all the risks will be reaping the rewards instead of you.

Looking out for opportunities to grow

The reason I personally respond to every email (I get hundreds a week) and carve out blocks of my time to partake in interviews, participate in discussions, write on other web publications, join panels, write books, and other activities that may not have a direct impact on Six Revisions or Design Instruct is because I never want to end up saying, "I wish I’d done that."

Being receptive to possibilities outside of the websites that I run, without a doubt, has contributed to the growth of my own web projects.

What are your own ingredients for success? Let’s talk about them in the comments below.

Related Content

• How to Design for Your Worst Client: You.
• How to Stay Ahead of the Curve as a Designer
• 6 Things You Need for Your Web Project to Succeed
• Related categories: Project Management 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, and a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

WordPress, the ubiquitous open source publishing platform that powers many of your favorite blogs and web publications, also powers Design Instruct and Six Revisions. By using WordPress plugins, site owners can extend and tailor their WordPress installation to meet their needs. However, using many plugins can affect a website’s performance, and thus, you must be highly selective in choosing the plugins you install.

Design Instruct and Six Revisions only uses six WordPress plugins. We’ve kept our plugins to the bare essentials—any other features we add to our WordPress installation, we develop ourselves specifically for our sites.

In this article, we share with you the WordPress plugins that we use on our sites.

This article is part of Design Instruct Week, a weeklong celebration of our newly launched site, Design Instruct. This week on Six Revisions covers topics that deal with running websites and design, written by the founders/editors of Design Instruct and Six Revisions. Be sure to check out the Design Instruct Week Twitter Giveaway, which gives out different prizes every day of Design Instruct Week.

1. WP Super Cache

WP Super Cache speeds up WordPress posts and pages by creating static HTML versions of them, updating them at an interval of your choosing. This cuts back on the need for server-side processes to generate a post or page whenever a visitor requests them. After page performance testing on Design Instruct, we discovered that WP Super Cache single-handedly improved page response times of unprimed caches by 259.1%, lowering the average total page load time from 9.56s to 3.69s for the most content-heavy post we have.

• WP Super Cache Download Page

2. Akismet

The biggest annoyance a WordPress site owner will encounter is moderating comments to weed out the ones posted by guileful spammers. Akismet abates this burden by filtering out known comment spammers that are registered on their blacklist database. In the two years that Six Revisions has been using Akismet, it has caught over 124,000 spam comments with 99.3% accuracy. This plugin saves us a lot of time so that we can focus on what’s truly important in running websites: creating and publishing content.

• Akismet Download Page

3. WP-SpamFree

Although Akismet is great, it works only through a blacklist database of reported spammers. WP-SpamFree adds an additional layer of spam protection by using cookie-based and JavaScript-based techniques to ensure that the comment form submitter isn’t using remote-site scripting or client-side scripts to automatically post comments on your site. WP-SpamFree is similar to a captcha in that it tests to see if a comment form submitter is human. This plugin eliminates the need to use a traditional captcha system that can affect website accessibility. On Design Instruct, WP-SpamFree has captured over 130 automated comments in under a month, which would have been about 26% of all the comments on the site.

• WP-SpamFree Download Page

4. Google XML Sitemaps Generator

A Sitemaps XML file is crucial to have if you’re interested in helping search engine spiders like Googlebot accurately index the content of your website. The Google XML Sitemaps plugin automatically generates and updates your Sitemaps XML file for you. It also pings search engines to let them know that there’s new content on your site waiting to be indexed every time you publish and update posts and pages. For regularly updated web publications such as Design Instruct and Six Revisions, this plugin bails us out from having to manually rebuild the file and notify search engines whenever new content is published.

• Google XMP Sitemaps Download Page

5. All in One SEO Pack

The All in One SEO Pack WordPress plugin is packed with features that improve search engine visibility of your content. On Six Revisions, with over 450,000 visitors from Google searches alone in the month of February, this plugin is critical in helping visitors find your content through search engines.

• All in One SEO Pack Download Page

6. WP-PageNavi

WP-PageNavi is a convenient WordPress plugin that adds a pagination feature on your site so that readers can navigate to older posts easier. It’s highly configurable and customizable to the way you want it to look and function. You can see WP-PageNavi in action at the bottom-left of the home page and category pages on Six Revisions, and bottom-right on Design Instruct.

• WP-PageNavi Download Page

What WordPress plugins do you consider critical to your website or blog? Share it with the rest of us in the comments.

Related Content

• 15 Useful Tools for WordPress Bloggers
• Using XAMPP for Local WordPress Theme Development
• 16 WordPress Sites to Help You Build a Better Blog
• Related categories: WordPress 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, and a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

"Why are you here?"

I was asked this question a couple of years ago. It is a question that is meant to have an easy answer and yet I found myself at a loss for words when I tried to answer it. The concept is simple enough. However, as I started thinking about what the question actually meant and what it was actually asking, it started to take on a life of its own.

This article is part of Design Instruct Week, a weeklong celebration of our newly launched site, Design Instruct. This week on Six Revisions covers topics that deal with running websites and design, written by the founders/editors of Design Instruct and Six Revisions. Be sure to check out the Design Instruct Week Twitter Giveaway, which gives out different prizes every day of Design Instruct Week.

Of course, "here" could be anywhere and it’s different for everyone. However, beyond that notion of location, we have to take into account that "here" also means being in the present; being in the ‘now’ which makes "here" not just a place on a map but also a place in time.

Knowing why we are "here" gives us the most concrete and basic thing we can know about ourselves, which is, that there’s a reason for us being where ever were are in our lives.

For artists and designers, knowing why we are "here" is especially important since it’s the kind of knowledge that can give purpose and meaning to our work.

For this piece, I asked previous contributors and friends of Six Revisions and Design Instruct to answer the question: "Why are you here?"

The writers could answer the question in anyway they like. It could be several sentences long or it can be just a single word. Their answer could be funny and clever or inspiring and deeply profound.

Below, you’ll find some of the answers I got from this exercise along with a sampling of their favorite works.

Click on the image below to see the full size of the graphic.

Special thanks to:

• Francisco Inchauste of FINCH
• Shannon Noack of Snoack Studios
• Zena Santos
• Tyler Denis of Denis Designs
• Jacob Cass of Just Creative Design
• Jan Cavan of Dawghouse Design Studio
• Miguel Cardona of Dumbwaiter Design
• Matthew Heidenreich of Devise Function
• Richard Carpenter of HV-designs

How about you? What’s your story? Why are you here? Share with us in the comments section.

Related Content

• 40 Useful and Creative Infographics
• 10 Revealing Infographics about the Web
• Performance Comparison of Major Web Browsers
• Related categories: Infographics and Graphic Design

About the Author

Isaac Gube is a photographer, philosopher, illustrator, adventurer, designer, and whatever else he chooses to be on any given day. You can connect with him on Twitter @IAMTHEGUBE or visit his Flickr page to see some of his photos.

The process of launching a website can be a daunting endeavor. There are many things you want to do, but not enough time and resources to do them. However, even though it might seem like a herculean task, as long as you keep some fundamental things in mind, you can ensure a hassle-free website launch.

In this article, I’ll share with you some tips for launching a website based on the experience of our own launch of Design Instruct.

This article is part of Design Instruct Week, a weeklong celebration of our newly launched site, Design Instruct. This week on Six Revisions covers topics that deal with running websites and design, written by the founders/editors of Design Instruct and Six Revisions. Be sure to check out the Design Instruct Week Twitter Giveaway, which gives out different prizes every day of Design Instruct Week.

1. Have scalable web server resources

With today’s high-availability and cost-effective content distribution solutions such as Amazon S3, and on-demand instant scalability offerings of hosting providers such as VPS.NET, you can affordably have web servers that can take a beating from high-burst traffic.

Not only will having scalable solutions prepare you for the high-traffic that a website launch can generate, but it also future-proof’s your set-up as your website grows. High-availability, metered set-ups give you the ability to pay for just the resources you need right now.

For Design Instruct, we set up a CDN for distributing static files for our content-heavy pages, and scaled up our VPS resources temporarily on the day of the site launch because we were anticipating a huge burst of traffic.

Regardless of how big or small you think the traffic you’ll get is, it’s never a bad idea to get a web hosting solution that will scale—they’re tremendously affordable and you pay only for what you intend to use.

Don’t risk having your website crash and your launch day ruined because of a shoddy web server.

2. Get all of your social media accounts beforehand

Nowadays, social networking is integral to a website. Don’t wait the last minute to sign up and set up your social network accounts on Twitter, Facebook, MySpace, and any other site that you’re planning to engage in.

This guarantees that your preferred account name will be available before you become known and gives your visitors additional ways to communicate with as soon as they arrive at your website.

On Design Instruct, our social media accounts were established well before the site’s launch date. For example, we had our Twitter account set up close to a month ahead of our site launch.

3. Have content ready to publish for at least a month

The early stages of a website is filled with many tasks. One timesaving deed you can do is to have content ready to publish so that you can follow up your launch with great content. This also frees you up for the many other activities involved in this stage of your website’s growth.

For Design Instruct, we set out to have 10 tutorials ready to go before we launched the site. We didn’t quite make that goal before our launch date, though we had enough to comfortably go ahead with the launch. This enabled us to focus on tasks that needed to be tended to without fear that we wouldn’t have great content to publish.

4. Drop hints about the upcoming launch to build anticipation

Let people know that there’s an event that’s going to occur to help create some hype. If you want to keep the details undisclosed to the public—that’s fine—you can still let people know that something on some date is going to happen.

In Design Instruct’s case, we wanted to wait until the actual launch before revealing what the site was. That didn’t prevent us from dropping hints that there was something coming soon. We did it through interviews and on Twitter a month ahead of the actual launch date.

This type of subtle hinting can pique the interests of your long-time supporters and fans. And those are the people that count the most when your website launches.

5. Plan your tasks for at least a month after the site launch

The worst question to have after a site launch is, "Now what?" You need a clear goal and direction on how you intend to follow through your site’s launch. If you’ve planned for a big site launch, don’t let the initial interest fizzle out by not having a plan. Before you launch, you should know exactly how you want to proceed right after.

For example, on Design Instruct, we had a laundry list of things we wanted to work on. Having content ready to publish, we were able to focus on growing the site and improving the user experience for our readers.

6. Triple-check the technical details before going live

Measure twice, cut once. Better yet, measure thrice. Making certain that your early visitors will have the best experience possible when first arriving at your site means that everything needs to be working correctly.

Check to make sure that all hyperlinks work. Make ultra-sure that contact forms, email accounts, commenting systems, and all the other things that your users will interface with, is working properly.
One of the late quick fixes we had to implement just hours before Design Instruct’s launch had something to do with category pages.

Users visiting a category page from the sidebar links that didn’t have an associated tutorial under it simply said that the page could not be found. It gave the impression that there was something wrong.

We had to revise the message to say, "There aren’t any posts in this category yet. We’re working on it though, so please check back soon!" to let users know that the pages do work, just that there aren’t anything in them yet.

7. Launch on schedule

Whether you’ve announced your launch date or not, you should release your website to the public when you say you’re going to. This forces you to stay on point and work towards a goal. What can cripple and delay a website launch is the attitude of "It’ll be ready when it’s ready."

When you’re nearing launch day and you think you won’t have the site fully completed, launch anyway (as long as it’s presentable and usable).

Websites aren’t like conventional consumer products—you can update and upgrade them any time you want.

At Design Instruct, we were delayed with some of the site features we wanted to implement, such as a comment rating system and a post rating system.

We still went ahead with the launch and created a malleable and constantly updated Upcoming Features page that listed the things we wanted to do in the future. We would curate this list by adding and removing items based on what our users want.

8. Contact your friends and family about the site launch

The first thing to do after a site has launched is to contact your friends and family. Let them know that you’ve launched the site so that they can be the first to see it.

Our friends list is just a bit larger than most people just starting out. However, we still sent personal emails to our friends at Smashing Magazine, Abduzeedo, Envato and others. We announced the site launch here on Six Revisions so that our regular readers would be the first to know about our new site.

It doesn’t matter how big your list of friends and family is, they should be the first to know about your site’s launch.

9. Provide easy ways of contacting you

When you first launch a site, you have to give visitors ways to communicate with you easily. Your initial visitors are early adopters, and as such, they’ll be critical and will help you find things that might be wrong with the site, as well as suggest ways you can improve the site for future users.

For Design Instruct, we had several modes of communication available: email, Twitter, the comments section in the announcement post on Six Revisions, and the comments section in the welcome post on Design Instruct.

This enabled us to find out what early adopters thought about the site, and what they wanted to see in the future.

We were also able to discover bugs via reports in comments and Twitter such as the error in color profiles in our CSS sprite and forgetting to set up RSS auto-discovery.

10. Show site visitors a roadmap of what’s to come

Perhaps the most important thing you can do when you launch a site is to show your initial users that there’s more to come.

No one gets a site right on the first day. Unless you release your website, anything you think your users will want and need is just a guess. The people who will best help you figure out what works for your users are your users.

So we’ve set up an Upcoming Features page and asked our users to tell us what they want and what they don’t want.

We’ve periodically polled our supporters and fans through Twitter to determine what we should do next.

We also track all of our site changes publicly through our changelog and version history to show our readers that we are indeed moving forward with their suggestions.

Let your users see that you have more tricks up your sleeve and that they should stay on for the ride as your website continues to grow.

Share your own tips for launching a website in the comments.

Related Content

• How to Design for Your Worst Client: You.
• The Three Golden Rules of Site Redesigns
• 25 Beautiful Examples of “Coming Soon” Pages
• Related categories: Web Development and Resources

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, and a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

It’s often said that the world is getting smaller. Of course, it’s not physically getting smaller, but rather, that statement alludes to the fact that the distances that used to separate people are more manageable today because of the improvements in communication and travel.

This could not be truer on the Internet where communication is instantaneous. A letter that would have taken days to arrive could be read and replied to within minutes via email. Documents that would otherwise take days to arrive, now only take a few milliseconds.

Of course, working on the Internet is not without its drawbacks. Working together on our newest venture, Design Instruct, was quite revelatory in that regard as my brother and I endeavored to work from different parts of the globe.

This article is part of Design Instruct Week, a weeklong celebration of our newly launched site, Design Instruct. This week on Six Revisions covers topics that deal with running websites and design, written by the founders/editors of Design Instruct and Six Revisions. Be sure to check out the Design Instruct Week Twitter Giveaway, which gives out different prizes every day of Design Instruct Week.

The Case: Design Instruct

If you’ve been keeping up with Six Revisions over the last month, you would have read about our new website called Design Instruct, which is a new web magazine offering tutorials focused on the visual arts such as design, illustration, photography, and art direction. It is a site born out of our passion for the creative arts and we wanted to share that passion with people.

Design Instruct is our first real venture together. It is the first time my brother and I sought to actually build something of our own (unless of course you count all the make-believe forts we built when we were kids).

It was also the first time we actually started working together. And as if getting used to working together wasn’t enough, we had to do it in disparate geographical locations.

There are many challenges associated with working with someone over a long distance. However, we found that there are solutions to those challenges, and so far, we’ve managed to make it work.

I share with you the areas of our workflow that posed some challenges, and the methods by which we overcame them.

Problem #1: Staying in sync

Working with people in the same town is hard enough. My brother and I are working from opposite sides of the globe.

As we started talking about establishing a new website, we realized we needed to acknowledge the difference in time zones if we were to get any semblance of synchronization in our work. Setting proper times for brainstorming sessions and meetings online proved to be quite a challenge in the beginning.

To illustrate what kind of problem a huge difference in time zones causes, let’s just say that by the time I’m done with my workday, my brother is just waking up to brew his first pot of coffee and is just getting ready for his day.

Needless to say, tending to urgent matters that needed both of our attention was a challenge in the beginning.

Solution: Schedule regular web meetings and stick to the schedule

Obviously, we weren’t able to invent a time machine to fix this problem. If we did, I wouldn’t be here writing this article, and instead I’d be collecting a shiny Nobel Prize and counting my billions of dollars.

The solution was simple enough, however. We just needed to schedule meetings at regular intervals where we can just touch base and get in sync with each other.

Of course, it’s easy to not stick to the schedule when you’re working with a long distance between you and your collaborator because there’s no one to keep tabs on either of you.

However, the price of not sticking to the schedule was apparent right from the beginning as projects were not getting done, articles were falling behind and we weren’t sure what either of us was working on.

And that was a price we were not willing to pay if we really wanted to create something special with Design Instruct.

We used Skype to video conference with each other, which allows us to send files, share links, and view each other’s computer screens when we’re talking about certain aspects of the website.

We set a solid meeting agenda, and stuck to it to make sure that the time we spend in meetings is short and efficient. It’s hard to get Jacob sitting in on a meeting, he’d rather be doing stuff, rather than talking about them – and as such, a clear meeting agenda is present that we both add to throughout the week to make sure that we’re not meeting simply for the sake of meeting.

Problem #2: Task management

Running a website is not as glamorous as one would think. There are a million emails to answer, writers to tend to, and a publishing schedule to manage. It’s a lot of work that is frankly tedious and oftentimes quite boring, and finding the motivation to keep working sometimes proves to be quite challenging for the both of us.

It’s no secret between my brother and I that I get easily bored and distracted when faced with mundane details. I’m more of a big picture/idea man and the prospect of getting bogged down with tedium just makes my brain cringe. And without each other to keep us motivated, it’s easy to fall behind on our work.

Solution: Get organized and keep your eyes on the prize

There’s no way around doing the actual work. It comes with the territory, especially if you want to create something special. One way we’ve managed to keep on task is to make the work as easy as possible by getting organized.

Let me be the first to say that it’s much more bearable to look for documents and images on your computer when you know where to find everything.

It’s much easier to look for an email conversation when you have emptied your inbox and archived your emails. And it’s much easier to follow schedules when you actually take note of it in an organizer instead of a stray sticky note you found on the floor.

The thing is, getting organized need not be one huge undertaking. Try splitting up the ordeal of getting organized into smaller, more manageable tasks. For instance, instead of cleaning out and archiving all of your old emails from your inbox in one day, try just archiving the important emails and leave the rest until the next day. And then repeat the process until you zero out your inbox.

Pretty soon, you’ll see your inbox clearing up—and the best part is that you’ll know where to look for all your important emails.

Of course, the best way to keep on task is to have a clear goal that you’re working towards. Even if it’s just an image in your mind, that image can motivate you to power through all the dull moments and get you through to the next day. Always keep your eyes on the prize.

Problem #3: Idea generation and brainstorming

The Internet has come a long way. With broadband connections readily available in many countries now, communication over the Internet has become quite robust and very capable of facilitating the flow of ideas between people.

In the past, voice calls and video calls over the Internet were seen merely as a novelty because of the impossibly slow Internet connections available to most people.

Today, people can share their screens and show the other person what they’re working on, people can talk "face-to-face" through a video call, and even conducting a conference call over the Internet is as simple as clicking a mouse.

However, communication over the Internet isn’t perfect. There is still something to be said about being in the same room with people you work with.

Brainstorming sessions don’t always have to be scheduled in the real world; they can be spontaneous. Conveying ideas through body language, through hand movements are virtually impossible on the Internet. And pointing to reference materials is sometimes cumbersome when you’re online.

The fact is, ideas don’t form as organically over the Internet as when you’re in the same room as your collaborator.

Solution: Get creative

This is where you need to get creative. I am a big proponent of brainstorming sessions in a conference room. I think it’s one of the most valuable activities you can do for productivity as long as it’s focused. We were not able to do that in the same physical location with Design Instruct on account of the thousands of miles separating my brother and I.

The way around the problem of the virtual divide is to just forget all the negatives of working over the Internet, and instead, focus on what the Internet enables you to do.

For instance, as stated above, you can share your screens with each other so you can show what you’re working on. This is a great tool to use. You can scan your notes that you take by yourselves and send it to each other over the Internet, which you can archive and save in one place. You can have an email conversation that’s rich in different kinds of media like images, video, and audio.

Working on the Internet over a long distance is definitely different than working together in the same physical location.

But being different doesn’t mean that it’s a worse way to work.

Problem #4: Version control of files

We deal with—literally—thousands of files that either one of us is working on at a given moment. This can be a versioning nightmare, especially if you’re passing emails back and forth.

Solution: Use a file syncing tool

What we did was set up a simple file syncing tool called Dropbox. This allowed us to work on files and documents without having to deal with version control. We have one shared folder that contains all our files. At the time of writing this, our shared folder contains 2,516 files and 1.6GB of data.

There are other file syncing tools out there, but Dropbox has proven to be the best one for us. If we were both to pick one tool that we couldn’t live without and that has increased our productivity immensely, it would this file syncing tool.

Problem #5: Task delegation

At any given day, running a website like Design Instruct can fill up one’s to-do list really quickly. There are many things to do, and not enough time to do them.

At first, I wanted to do everything. I wanted to learn how to write code and manage our servers, even though my background is graphic design and visual arts. Likewise, my brother wanted to manage and oversee all aspects of the site. This caused us to work harder than we needed to and spread ourselves too thin. We were trying to be redundant of each other’s skills and persona.

What we needed to do was delineate who was doing what, but task delegation gets tougher when you’re not in the same room and working in different time zones.

Solution: Recognize each one’s strengths and work autonomously

Even though we’re siblings, our personalities and skills are on the opposite sides of the spectrum.

While I’m goal-oriented, he’s task-oriented. He likes to write code (so much so that he even wrote a book about it), and I like to illustrate, design t-shirts, and snap photos. While I’m more organic and fluid in the way I approach problems, he looks at the technical and tangible aspects of a given issue. I’m a Mac user, while my brother’s a (proud) Windows user who builds his own PCs.

Some might think that such opposites are recipe for disaster, but if you think about it, we both bring something different to the table, and thus, we can work on the tasks that are best suited for our personalities and work style.

So for Design Instruct, being as he’s a web developer, he took on all of the technology related stuff. I, on the other hand, took over content management, graphics, editorial, and content creation.

When we prepare content for publication, I work with the authors for any stylistic changes that need to be made, while he focuses on the technical aspects (such as the accuracy of their writing and fact-checking).

We both have vastly different writing styles that give the content a much fuller level of review that a single editor would not be able to provide on their own.

In this way, we’re able to do the things we love doing and leverage our personal strengths, while still being able to get stuff done and produce a much better product than if we were to work alone, simply by acknowledging each other’s strengths.

Perhaps the most important benefit of this: It gives us the ability to work autonomously and ensures that we’re not doing something that the other is already doing.

Some parting words

Design Instruct is indeed quite an experience for us. Design Instruct is slowly getting into its own rhythm and it’s all been done over the Internet, which is a feat all on its own.

Of course, it’s a different way to work, but it’s also a very effective way to work once you acknowledge the challenges and are willing to adapt.

Just think, a few years ago, working from such great distances would have been quite an ordeal, and today it is done with such great ease and effectiveness.

Of course, the key to successfully working over long distances is to acknowledge its strengths and weaknesses. The Internet isn’t meant to simulate real life, and—in many ways—that’s one of the strengths of working online since it forces you to think and work differently.

Share your stories of working over long distances with us in the comments.

Related Content

• The Remote Designer: How to Work While on the Road
• A Quick Look at Mobile Web Designs
• 10 Useful Gadgets for Mobile Computing
• Related categories: Project Management and Web Design

About the Author

Isaac Gube is a photographer, philosopher, illustrator, adventurer, designer, and whatever else he chooses to be on any given day. You can connect with him on Twitter @IAMTHEGUBE or visit his Flickr page to see some of his photos.

March 1 through March 7, 2010 is Design Instruct Week here on Six Revisions.

Design Instruct Week is a weeklong celebration of our newly launched site, Design Instruct. This week on Six Revisions will cover topics that deal with running websites and design, written by the founders/editors of Design Instruct and Six Revisions.

Be sure to check out the Design Instruct Week Twitter Giveaway, which gives out different prizes every day of Design Instruct Week.

Design Instruct Week Twitter Giveaway

We’ll start off Design Instruct week with an announcement: top notch companies that support the design industry have signed on to give away amazing products and services on our Twitter-based giveaway.

For 7 days—from March 1 through March 7, 2010—we’ll have different prizes to hand out. The best way to make sure that you don’t miss out is to follow Design Instruct on Twitter and to read this post on Design Instruct.

Prizes such as the Apple iPad, subscriptions to stock libraries, and more, will be given away.

You just have to stay tuned to find out what the prizes will be!

Design Instruct’s Growth

Design Instruct recently turned 1-month old, and the speed of growth it has shown us is something we could’ve only imagined and hoped for.

We’d like to thank everyone who has supported us! We’re thankful to the awesome design community that we’re fortunate to be a part of.

Upcoming Changes on Design Instruct

We’ve already made several updates to the site, and improved the way some things work (you can get the full details in our changelog).

We have many more plans in store for Design Instruct! We’re increasing the diversity of the types of content published on the site, and we’ve got amazing tutorials about design and digital art lined up that will enrich your knowledge and enable you to learn from some of the top designers and digital artists in the industry.

Additionally, we’re also brewing up some awesome site features to encourage community discussions around the content and regular monthly series of articles for you to look forward to!

Subscribe to Design Instruct’s RSS Feed

We’ve recently updated the RSS feeds on Design Instruct. We recommend checking out our brand-spanking-new RSS feed.

Thank You!

It’s not a secret what the recipe for Design Instruct’s success is: You.

The Six Revisions community helped our new website grow, and we’re eternally indebted to you. We want to thank you for visiting our sites, for supporting our endeavors, for telling your friends about us, and for giving us your well wishes and advice.

If you have ideas on how we can improve, share it with us in the comments below and feel free to contact us anytime.

Related Content

• Design Instruct: A New Tutorial Web Magazine for Designers
• 6 Things You Need for Your Web Project to Succeed
• MooTools 1.2 Beginner’s Guide Book
• Related categories: Project Management and Resources

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, and a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

I’ve always been a fan of Apple’s design. As a web designer, I’m sure that many of you are. When Apple released the iPhone and iPod Touch, thousands of apps hit the app store. As a result, web designers started creating sites for Apple apps. These sites promote, give information about, and help sell these apps. In this showcase, you’ll find 35 beautiful handpicked app websites.

1. Barista

2. Firetask

3. Convertbot

4. Pull Things Off

5. Nota

6. Sudoku

7. Finger

8. Ecoki iPhone Reader

9. Birdfeed

10. Buzzapp

11. Dig Deep Fitness

12. Paraply

13. Tripmiz

14. iPhonevine

15. Parking App

16. Bills

17. Boardersheet

18. Outpost

19. Whisper

20. Cornhole All Stars

21. Easy Tracker

22. Tearound

23. Prayer Engine

24. Tappolox

25. Happy Dangy Diggy

26. Confess

27. FutureTap

28. Wordpress for iPhone

29. iSaid What?

30. Tweetie

31. Classics

32. Spendly Touch

33. Snow Reports

34. Tweetdeck

35. Cellar

How about some feedback?

I’d love to know what you thought of the sites above. Which ones were your favorites? Leave a comment below to let us know.

Related Content

• 20 Killer iPhone Game Designs
• A Quick Look at Mobile Web Designs
• How to Design the Web in a High-Def World
• Related categories: Design Showcase / Inspiration and Web Design

About the Author

Sean Geng is a web designer and developer in Pittsburgh, PA. He is also the chief editor over at Designmess, a web community dedicated to designers and developers. If you enjoyed this article, you should follow him on Twitter.

A portfolio design is a reflection of the skills and talents of the designer that owns it. Often, the hardest web design is creating your own portfolio, and thus, can take a lot of the designer’s time to create and finish. This collection is a follow up of the showcase called, "25 Impressive Portfolio Web Designs" which you should view as well.

Feast your eyes on some of the web’s most beautiful online portfolios.

1. camellie

2. Fool’s House

3. Ed Peixoto – I create Flavors

4. COO/COO CORE Graphic

5. n.design studio

6. Fully Illustrated

7. Attack of the Web

8. Ekin Yalgin

9. Twenty3design

10. Jirí Šebek

11. Nathan Sanders

12. Getmefast

13. The Design Studio of Mike Precious

14. Alexandra Tong

15. Dezinerfolio

16. Trevor Saint

17. Aaron Moody

18. SpoonGraphics

19. Richard Carpenter

20. Serj Kozlov

21. davorvaneijk

22. agiaco

23. Maurice Krijtenberg

24. Puppetbrain

25. heyIndy.com

26. Positive Hype

27. Archives for Portfolio

28. ECTOMACHINE

29. TORRANCE WEB DESIGN

30. gummisig

Related Content

• Five Popular Design Portfolio Website Styles
• Design a Minimal and Modern Portfolio Layout with Photoshop
• 25 Impressive Portfolio Web Designs
• Related categories: Design Showcase / Inspiration and Web Design

About the Author

Jack Dilision is an Australian student, and Photoshop is one of his passions. He is the Editor and Author of Psdbase, a weblog about design. You can follow him and all of his creations on Twitter — he goes by the name of @psdbase.

Our instinctive dislike for forms originates from having to fill out seemingly endless paper forms, many of which require a Master’s degree in Form Content Filling to understand and fill out correctly the first time.

Unfortunately, in the offline world, getting some answer wrong would mean having to fill out the form in full and sending it again, usually days apart.

Online, we have the opportunity to not only resubmit forms countless times, but also as web developers, we can provide people with much more relevant feedback at various stages of using a web form.

Through hints and validation, we can create forms that are a lot more user-friendly than their offline counterparts. And in some cases, we can make forms that people might even enjoy filling out.

Hints in Web Forms

Validation is frequently used to provide users with a response on what information they should have entered when an error occurs.

By using a number of helpful hints, we can provide much of this information before they even enter their name. By showing more information before a user submits a form, we can reduce the chance of an error happening.

Information available prior to submission can come in three forms:

Labels: These should quickly describe what information should be entered into an input field—this could be their username, password, email, etc.

Required or optional information: an input field should be denoted as required or optional, usually by an asterisk (*) or any cues or text-based hints that tell the form user they can’t leave a field blank.

Help hints: Help hints function to give the user additional tips on how to format their information. For example, a help hint might tell a user what the password requirements are (as shown below).

Alignment of Labels

Of course, all information should be placed in such a way that it is clearly associated to a given input field, but the alignment of a label can actually affect not only a successful submission, but also the speed of completion.
The alignment of a label is typically either left, right or top; there are benefits and disadvantages to each alignment:

Top labels: Positioning a label at the top of input fields improves the association between the label and field, but does tend to give the impression of a longer form.

Right labels: Labels at the right of the input fields reduces the vertical space of the web form, and improves the association between the label and input. However, right labels can reduce the readability and scanability of web forms.

Left labels: Labels at the left of form fields can make for easier reading of the labels, and also makes the web form vertically shorter. However, it tends to affect the association of labels to inputs.

Choosing the alignment of labels in a form can depend on the type of web form you are creating, the available space you have for your web form and which of the disadvantages are of greater concern to you in the given situation.

Labels inside Inputs

Some forms will use placeholders to indicate suitable examples of information within an input field, but in some instances, when screen real estate is at a premium, developers will use labels within the input fields.

This doesn’t pose too many issues on shorter forms, but as the form grows, this becomes an issue. By using the label within the input, it means that once a user enters any data, the label disappears and cannot be referred back to when reviewing the form either before or after submission.

Hints within inputs should be used only where sufficient information still exists to indicate an input’s purpose or requirements after the user has entered their information and the original hint has disappeared.

Additionally, labels inside input fields can be troublesome if done incorrectly, as they often rely on client-side scripting such as JavaScript.

One potential solution to the downsides of labels within inputs is using the sliding labels technique—proposed by CSSKarma—where the labels move to the side and remains visible when the user focuses and enters text into the fields. However, this technique still doesn’t solve space limitations.

Dynamic Hints

If space is at a premium or your form looks too cluttered with hints beside each input field, then you can make them dynamic. A hint can appear as a tooltip based on user action either when the user focuses on the input field or when the user hovers over a help icon placed near the input field.

Using dynamic hints allows for more descriptive information to be communicated as the character limit isn’t restricted by the available space around the input field.

Data Validation in Web Forms

Given sufficient and correct use of hints, it may be possible that the majority of users will never see any validation, but this does not mean validation is not vitally important.

Validation provides a safety net for many users as well as a system to ensure the website is gathering the correct information required.

The structure on which the web is constructed allows us two methods by which we can validate a user input:

Server-side Validation

When using server-side validation, any information entered by the user is sent to the server to be checked rather than anything happening locally on an individual’s own computer. With the exception of using Ajax server-side form validation, this is a slower form of validation as it requires the user to first submit the form and then wait for the server to validate the data before reloading the page in order to provide a response.

However, what you lose in speed, you gain in security, as this process is not easily bypassed like client-side validation.

Client-side Validation

Although HTML5 will change the way we undertake client-side validation, JavaScript is commonly the language used for client-side validation today. Because users can disable JavaScript in their browser, a website cannot rely solely on JavaScript as a method of validation.

Instead, client-side validation should be seen as an extra layer on top of server-side validation.

Real-time Validation

Real-time validation is one of these server-side validation disadvantages that client-side validation allows us to solve. Although client-side validation can be activated via a submit button too, there is also the opportunity to use real-time validation as users enter data into the form.

Real-time validation is where JavaScript can be used to provide an instant response to a user action. So rather than having to fill out the entire form and pressing submit, the user gets an instant response as they are typing so that they can make immediate corrections if necessary.

One example of real-time validation would be a password strength indicator where each key stroke triggers the validation and sends a response to indicate to a user how weak or strong that website thinks the password they have chosen is.

The Good, the Bad and the Ugly of Web Form Validation

Validation isn’t all bed of roses.

The Good

Just why do we use validation exactly? It’s not exactly the easiest thing to code, especially if you duplicate the work by using client-side and server-side web form validation.

For users: Of course, it’s pretty obvious that we do validation for our users. By using validation correctly, we create a user-friendly form that makes the process as easy and quick as possible.

For obtaining correct information: It might create a usable experience for users but it also ensures the website receives the correct information it requires and in the format necessary to store it in a database for future use.

For spam protection: By validating for specific information, we can cut out some of the spam that a form may otherwise receive. However, keep in mind that any validation we put in place for spam should never affect the user experience. Remember that users are unconcerned with the level of spam you may receive.

The Bad

Validation isn’t all good though, as developers and clients alike have been known to abuse forms, forgetting the original purpose of the form and creating something that isn’t all too user-friendly:

Unusual required fields: Rather than creating a form with only the information a user truly needs to continue, we enter optional fields. Sometimes these are useful for the user, such as extra address fields or additional information text areas. In other cases they might help site owners gather such information as "Where did you hear about us?"

When these traditionally optional fields are required by the validation, they create a barrier for completion and causes the user to wonder why such information is requested of them.

Restrictive formats: Where possible, we will ensure users enter information in the format we expect. But at times, validation goes too far and constricts the user to a given format that causes validation errors where they shouldn’t exist. This usually forces a user to jump through hoops to meet the specific criteria laid out to suit the system. One example would be the requirement of no spaces in a phone number. This is something that should be amended by the code, not the user. Another example of this is having too many requirements for the type of password you need (e.g. "Must have three numbers, a capital letter, and must be between 6-12 characters only").

The Ugly

As we all know, some malicious users on the Web are out to cause mischief by bringing down websites. When developers are a little lax with their validation, it allows some of these people the opportunity to abuse exploits like cross-site scripting (abbreviated as XSS) to break a website or gain access to areas or information they shouldn’t be accessing. It’s an unfortunate reality of the web, and something that can be addressed with validation techniques.

By protecting your site against such attacks you ensure the website is always live for you and your users and that your users’ information is always safe.

For more information on XSS, visit XSS (Cross Site Scripting) Cheat Sheet on ha.ckers.org.

Validation Responses

Simply outputting hints and validation isn’t enough. Design plays its part too, helping communicate and reinforce the messages any validation is outputting.

Many different factors help towards ensuring that a user, if they do get an error on their first attempt, can correct their submission and get the form sent in second time around.

Colour

Colour is a great design element to use in order to reinforce a message. Commonly, red would be used in the instance of an error, and green for success. The use of colour clearly indicates to a user even before they read any textual responses that result from form validation.

Colour can be used in multiple ways within a web form to highlight a particular error. As well as using colour for any validation response, you can reinforce what specific inputs have errors by using colour to alter the label, border or background of a given input field.

However, it’s best to get a balance as we’re only trying to clearly indicate errors to a user, not beat them over the head with them.

As much as colour is a useful tool to communicate a given message, it can never be used independently to convey a message for accessibility reasons. Blind, low-vision and colour-blind users will have issues in determining where errors have occurred if colour was the only method for indicating where errors have occurred.

Positioning

How you position any validation elements can also have an effect on how usable a form is, especially when it comes to longer forms:

Top of the page: This is a validation response placed at the top of the page, most frequently directly above the form. For server-side validation without Ajax, this is great for screen-reader users if done correctly, because it can be the first element they read when the page reloads.

Inline: Any validation placed in close proximity to the input where an error has occurred is considered "inline". This can work well for real-time validation and for longer web forms.

If you have a long form that disappears below the fold, then using both of these techniques is a good idea.

For example, if an error occurred towards the bottom of the form, and you use both techniques, then the user may quickly see a response that clearly gives them a hint for correcting the mistake when scrolling through the form.

If you are using real-time validation, then the use of a top of the page response would be unnecessary, as the user would only require inline validation in this instance.

Using Icons and Visual Cues

Although they aren’t as instantly recognizable as colour, icons are again a way of communicating a message before a user has a chance to read any textual response. Icons are a great way of displaying inline validation where screen real estate is at a minimum, but only works to reinforce any textual response at the top of the page.

Examples of good icons to use in validation would be a tick mark (checkmark) for success, or a red cross (X) for an error.

Other Styling Techniques for Validation Responses

There is a wealth of other style elements that you can add to particular responses, such as borders, font weights, backgrounds, etc. The use of these would depend on the positioning of your errors, how you are displaying the errors, and what suits the design of your website.

Although any response messages should have a level of differentiation with surrounding elements in order to be recognizable—there is no reason they should not be symbiotic to the rest of the website design.

Web Form Validation Response Messages

Styling and positioning only helps indicate that an error has occurred, and where it has occurred. It is the textual responses the website outputs that communicate what is necessary to a user.

Any error message should communicate the following as best it can:

List all errors: To make sure a user gets the form on the next attempt, all the errors should be displayed in close proximity to each other for convenience. This allows the user to go to that list, instead of hunting it down throughout the web form.

Where the errors are: An error response should mention what input field the error relates to. When referring to an input, you would traditionally use the label of that input as this is how users will identify with particular inputs best.

How an error may be fixed: If the error is complex —more intricate than simply letting the user know they missed a required field—it’s always best to communicate what the solution might be. If a telephone number can’t accept alphabetic characters, then tell the user. If a user didn’t enter their email address in the correct format, you might show them an example of what the correct format is.

Sticky form information

When submitting a form with errors, a user will expect that the form enable them to adjust their previous responses, rather than having to fill out the entire form again. Not having the form retain previous user entry could lead to dropped forms.
Making sure the data a user has entered is "sticky" allows them to more easily understand the error that has occurred.

Don’t Use Alert Dialog Boxes for Validation Responses

Primarily used with client-side validation, Alert dialog boxes issue problems for users, often creating a barrier for completion. Here are a few reasons why:

Alert dialog boxes are temporary: When an alert box is displayed, it must first be closed before returning to the form. Once closed, the only way to view the error again is to re-submit the form. This gives the user no information to refer back to. Unless you are catering exclusively to people with extraordinary memory skills, it is a safe assumption to say that most Web users have a short attention and memory span.

Alert dialog boxes are troublesome for a submitted form with multiple errors: When using alert boxes and popup windows, it is common that only the first error found is displayed, rather than a full list of errors. The form is then re-submitted by the user multiple times to discover multiple different errors.

Alert dialog boxes are text-only: Alert boxes can only display text to communicate a message so no other design elements can be used to create a different style depending on an error or success message.

Don’t Use Error Pages for Validation Responses

Another poor form of validation is when using error pages. This is where the form sends the information to a separate page to validate, and any errors that do exist get output on this page without the original form. This means the user must navigate back to the form where they may lose the information they previously entered, as well as the errors they need to correct.

Examples of Good Forms with Hints and Validation

Conclusion

Forms are can be a complex feature of any website for both the developer and user, but they are the only method in which the user and the website can interact with one another.

This is why web forms have to be given careful consideration—unusable forms can seriously affect your business and your profits.

Sometimes the effort that goes into a web form and validation design is minuscule, even on the best-designed sites. Outputting a text error simply isn’t enough—you need ensure it provides sufficient information in both content and design to achieve the best user experience.

So rather than thinking of your form and validation as just another thing to get finished, consider spending more time creating web forms that are as perfect as the rest of your website.

Related Content

• 25 Stylish Examples of Web Forms
• Five Simple but Essential Web Usability Tips
• 10 Simple Web Accessibility Tips You Can Do Today
• Related categories: User Interface and Web Development

About the Author

Kean Richmond is a full-time web designer and developer based in Yorkshire, UK. Working as a generalist in most areas of web design and development he currently works at Bronco, tweets as @keanrichmond and rants on his personal blog.

Here’s a chance to win a copy of my book, MooTools 1.2 Beginner’s Guide published by Packt Publishing. Five winners will be selected to win a copy. Read on to see how you could be one of them.

*Giveaway is now closed. Please stay tuned for the results!* About the Book

In case you missed the announcement post yesterday, MooTools 1.2 Beginner’s Guide is a book that I wrote with Garrick Cheung. The book is a hands-on approach to learning professional-level web development using the powerful MooTools framework. The book is packed with usable examples that help the learner understand the concepts using a pragmatic teaching method.

My publisher, Packt Publishing, was kind enough to offer five copies (2 paperbacks and 3 eBooks) of the book to Six Revisions readers.

If you’d like to learn more about the book, read my post from yesterday or head over to the Packt Publishing product page of the MooTools 1.2 Beginner’s Guide.

How to Enter for a Chance to Win

All you have to do is comment on why you’d like a copy of the book in the comments. If you prefer a certain book format (paperback or eBook), also note that down as well, so that if you are selected, we’ll try our best to get you your preference.

Giveaway Details

The duration of this giveaway is for 7 days. The giveaway ends on March 3, 2010 after which the commenting on this post will be disabled. Five winners will be randomly selected in the same fashion as previous giveaways on Six Revisions to win a copy of the MooTools 1.2 Beginner’s Guide from Packt publishing. Ensure that you use a valid email in the comments form so that we can contact you if you win. Winners will be announced on Monday, March 8, 2010 and also contacted via email about their prize. Good luck!

Related Content

• Learning MooTools: MooTools Tutorials and Examples
• MooTools 1.2 Beginner’s Guide Book
• How to Auto Caption Images Using MooTools
• Related categories: Web Development and JavaScript

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.

I have written a book with Garrick Cheung about the MooTools JavaScript framework called "MooTools 1.2 Beginner’s Guide" published by Packt Publishing.

It’s a book for beginning web developers looking to make interactive websites and web applications rapidly with the help of MooTools.

The book is formatted in a way that teaches you by way of practical examples that you can apply to real-world situations.

If you’ve read my tutorials here on Six Revisions, you can expect the same level of detail and clarity in each page of the "MooTools 1.2 Beginner’s Guide".

Writing the book was one of the best experiences I’ve had, and I hope that by picking up a copy, you’ll see the amount of passion and work I’ve put into it to help web development newcomers become familiarized with this amazing JavaScript framework.

The book has 9 chapters (you can see the complete table of contents here):

• Chapter 1: MooTools and Me
• Chapter 2: Writing JavaScript with MooTools
• Chapter 3: Selecting DOM Elements
• Chapter 4: The Core’s Useful Utility Functions
• Chapter 5: Working with Events
• Chapter 6: Bringing Web Pages to Life with Animation
• Chapter 7: Going 2.0 with Ajax
• Chapter 8: Beefing Up MooTools: Using the MooTools More Plugins
• Chapter 9: Creating Your Own Plugin

The book is available as a paperback or eBook at Packt Publishing, or as a paperback on Amazon.com.

You can learn a lot more about the book by visiting the book’s product page on Packt Publishing.

Reviews

Aaron Newton, a MooTools core developer and author of MooTools Essentials (another book you should pick up) wrote a review of "MooTools 1.2 Beginner’s Guide" on his site, Clientcide:

• Book Report: MooTools 1.2 Beginner’s Guide

Erik Hazzard of Quixotic wrote a book review of "MooTools 1.2 Beginner’s Guide", giving the book a 5/5:

• MooTools 1.2 Beginner’s Guide – Review

Check out the reviews of "MooTools 1.2 Beginner’s Guide" on Amazon.com:

• Amazon.com: Customer Reviews: MooTools 1.2 Beginner’s Guide

Questions?

If you have any questions about the book—or just want to talk about MooTool—you can pose your questions and thoughts in the comments below.

I’d love to discuss the book with you!

Buy it!

There are several places that you can purchase the book online—on Packt Publishing’s website, Amazon.com, and Barnes & Noble (where you can check your local Barnes & Noble if the book is in stock or order it for pickup), to name a few vendors.

• Buy MooTools 1.2 Beginner’s Guide on Pack Publishing’s website
• Buy MooTools 1.2 Beginner’s Guide on Amazon.com
• Buy MooTools 1.2 Beginner’s Guide on Barnes & Noble

Thank you

You’ve truly helped hone my writing skills throughout the years by continuing to support and read the site. You’re every bit an author of this book as I am, and for that, I want to thank you.

About the Author

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

On the surface, saving images for the web can be a pretty straightforward process. However, if you dig deeper there’s a wealth of information and techniques you might be missing out on.

This article will focus primarily on the diverse features of Photoshop’s “Save for Web & Devices” command along with some best practices related to saving images that are optimized for web use. We’ll start extremely basic for all the beginners, but there will be plenty of advanced information for the seasoned veterans as we progress.

Before the Save

Preparing images for the web doesn’t start at saving. It’s a good idea to check out a few things before you go into the Save for Web dialog.

First, you’ll want to have a look at your image mode. When designing for the web or any other on-screen media, you’ll want to make sure your images are formatted in RGB. Traditionally, CMYK is reserved for print. This is because there is a fundamental difference between creating colors with light vs. simulating colors with ink. While printers use tiny dots containing only one of four colors (Cyan, Magenta, Yellow or Black) to create the illusion of other colors, screens are capable of producing millions of colors.

Furthermore, RGB is an additive system, meaning the result of greater amounts of color is white. Conversely, CMYK is a subtractive system, meaning the lack of any color is white (the color of most paper) and colors are added to approach black. Additive systems are capable of producing much brighter colors across a wider spectrum.

The key information here is that for on-screen graphics, you can’t beat an RGB image.

Keep this in mind at the very start of a project, especially if you’re creating web graphics with Photoshop. Starting in an RGB workspace is far better than working with CMYK and converting later, which can create mottled gradients and muted colors. Photoshop’s Save for Web command will automatically convert CMYK images to the appropriate color system based on your choices in the dialog, but you’ll definitely want to know and consider the original color mode of the image before you even enter the dialog. If you don’t know the color mode of a given image, look in the menu bar under Image > Mode.

The second thing you’ll want to consider is the size of the original image. If your image is too large, hitting “Save for Web” will give you this warning:

Essentially, Photoshop is telling you that your image is not only way too big for most web uses, but is also larger than the Save for Web command was created to handle. If you click “proceed” Photoshop will in fact go through with the save. However, the dialog and included commands can be painfully sluggish due to the size of the file, depending on your computer system resources. It’s a good idea to downsize large files before entering the Save for Web dialog to prevent any problems.

Entering the Save for Web Dialog

Once you have your color mode and image size all squared away, hit Cmd/Ctrl + Shift + Alt + S on your keyboard to bring up the Save for Web & Devices dialog.

If you’re not familiar with this dialog, it can look a bit overwhelming at first. In fact, even if you’re a time-tested Photoshop professional but don’t possess CS4, things are going to look a bit different as Adobe has completely redesigned this menu.

Everything in here is important, but you’ll find there are a few key features that you will use most often, highlighted below.

Image Size

In the bottom right of the window, you should see a section labeled “Image Size”. This section is pretty straightforward and works just like it did in previous versions of Photoshop.

You can choose to set the dimensions using either pixel height/width or by simply typing what percent of the original size you want your image to be. As you adjust these numbers, pay attention to your image preview as it will update to reflect the changes.

Resampling Quality

The most complicated part of this section is the Quality drop down menu. If you open it up, you’ll see that you have the choice of selecting Nearest Neighbor, Bilinear, Bicubic, Bicubic Smoother, or Bicubic Sharper. Each of these reflects a different method of pixel interpolation.

Resizing an image with only basic interpolation simply enlarges/reduces the pixel data and can produce some pretty ugly results. To prevent this, Photoshop attempts to manipulate the way the pixels are interpreted as the size of the image changes.

Unfortunately, there is no best solution for every image and Photoshop isn’t smart enough to decide which mode is best for a given image. By default, Bicubic is selected. This is generally good enough for most beginners and is in fact the most complex method. However, if you really want to learn to maximize your output, check out the brief explanations of the pros and cons of each method below.

Nearest Neighbor: This setting is the most basic interpolation mode and seeks to preserve the hard edges in an image by simply enlarging or reducing the pixel data as mentioned above. This may be good if your image doesn’t contain many gradients but will produce an over-aliased, pixelated image if you are significantly changing the size.

Bilinear: Slightly more intelligent than Nearest Neighbor and uses a weighted average of the 4 nearest pixels to increase the number of pixels. This method produces an anti-aliasing effect which eliminates harsh pixelated edges but can produce a blurry image as a result.

Bicubic: Bicubic is the most complicated method and samples from the nearest 16 pixels. As with bilinear, this method results in anti-aliasing to keep out any unwanted artifacts.

There are three versions of the Bicubic method in Photoshop: Bicubic, Bicubic Smoother and Bicubic Shaper. To get a hint for when to use each, we’ll look to another part of Photoshop. Close the Save for Web dialog and go the menu bar under Image > Size > Image Size. Now look under the “resample” dropdown menu and you’ll find some familiar options.

This time we see that each option (except Bilinear) comes with a little tip regarding when to use it. We can now see that each Bicubic option has a strength: Bicubic is best for creating smooth gradients, Bicubic Smoother is best for enlargement and Bicubic Sharper is best for reduction.

Always keep these tips in mind when resizing images within the Save for Web dialog. However, don’t blindly follow them without examining the results of each to decide which option is best for a particular image.

File Type and Image Quality

Near the top right of the window you’ll find the settings to choose which type of file you want to output along with various options pertaining to the quality of the output.

As you adjust these settings, you’ll obviously want to keep an eye on your image preview, but just as important as the way the image looks is the information directly under the preview pertaining to the image size and approximate load time.

Remember that there is always a trade-off between quality and file size. As a beginner, you may be tempted to choose quality over size and shoot for the maximum, but this is a big mistake that can cause your sites to load painfully slow. As you can see in the images above, by default my file size is coming in at nearly 1.3 MB. This is much larger than is preferable for most web images. With only a few size and quality adjustments, I can easily knock this down to around 20 KB (a much more preferable size).

File Type Options

There are three main file types we’ll want to focus on for saving images optimized for the web: GIF, JPG and PNG. Each file type has its own strengths and weaknesses and it is very important to know and keep these in mind when saving an image. We’ll start with the most complicated: GIF.

Working with GIFs

GIFs are popular for simple web-based graphics because of their relatively low file size. However, GIFs are restricted to a mere 256 colors and should therefore be used very selectively. Many designers will point out that photographs should not be saved as GIFs because of the millions of colors necessary to recreate a “real life” scene. This is definitely correct but does not give you the freedom to use a GIF on all non-photographic elements. For instance, the “six revisions” graphic that we’ve been using thus far was created in Photoshop and is therefore non-photographic, but it is still a very poor candidate for a GIF file. Check out the close up below of the text highlight using GIF compression:

As you can see, even with the highest number of colors enabled, the gradient from white out to red is pretty mottled. However, this definitely does not eliminate GIF as a useful file format. There are plenty of times when you’ll save an image such as a logo that may only have a few colors in it. Anything with large areas of solid color and very minimal gradients should look great as a GIF. For instance, if our image were changed to look more like the one below, we’d have a lot more freedom over which file type to use.

As you can see, the above image is fairly simple and shouldn’t even require the full 256 available colors. With GIF selected as the file type in the Save for Web dialog, you’ll have several options for how many colors you want to use ranging from 2 to 256.

Obviously, 2 colors is far too few to create a nice image. However, 256 looks a bit like overkill because our 16 color version is coming in so nice. This version comes it at a mere 7K while a JPG of similar quality would push us up to more than double that at 16K.

Other ways to reduce the file size of a GIF include reducing or eliminating any dither, adjusting the color palette settings (perceptual, adaptive, etc) and increasing the lossy compression. It would take at several more paragraphs to do these options justice so I’ll just encourage you to adjust these settings while watching the file quality and size to attempt to find an ideal result.

Working with JPGs

As I mentioned before, JPGs are going to be your best bet when working with photographs or graphics containing complex effects like shadows, gradients, etc. Because of the wide range of colors available in a JPG, you don’t have to worry about selecting a color palette. This just leaves the basic quality settings to adjust.

To adjust the image quality, either use the “Quality” slider on the right, or the present dropdown on the left (ranging from low to maximum). Again, remember to keep an eye of both your image preview and file size as you sample different settings. As you can see in the image below, there’s a wide gamut of quality between the lowest and highest settings.

Notice that as the quality decreases, it’s not just the hard edges that suffer but also the gradients as well. The graceful degradation from one color to another becomes a sloppy mess with clearly identifiable steps of color. However, at the largest size we’re pushing 90K, which is a bit unnecessary for this small image. You’ll find that the best solution is almost always somewhere between the lowest and highest settings. Try to find the lowest quality setting that doesn’t significantly degrade the finer visual details of your image.

Tip: By increasing the “Blur” option when saving a JPG, you can reduce file the size. However, only do this to the degree that it doesn’t significantly degrade the quality of your image.

Working with PNGs

Photoshop gives you two options when working with PNGs: PNG-8 and PNG-24. If you bring up the PNG-8 options, you’ll see that they are very similar to the options we saw for GIFs. Again we are back to choosing the number of colors up to a maximum of 256. This means that PNG-8 is limited to the same types of simple files that you would use for GIFs. Sometimes using a PNG-8 over a GIF can give you a smaller file size at a nearly identical quality. It’s best to experiment with both to see which provides a better result

PNG-24 on the other hand, provides a much higher quality image. PNG-24s retain much of the original PSD image quality and can handle transparency much better than a GIF.

As you can see in the image above, the shadow quality is fairly high and would look just fine dropped onto a solid background in an HTML file. However, there are two big downsides to using PNGs. The first is file size; notice that for the 550px wide PNG above the file size in 40.9K. This isn’t too bad for most modern internet connections but it’s a lot larger than an equivalent JPG or GIF and can really bog down a web page with a lot of images. The final and even more serious downside of using transparent PNGs is that they are not supported by all major web browsers. Nearly every professional web designer is aware of this and either ignores it in defiance of all users who won’t update their browsers, avoids using PNGs altogether, or comes up with clever hacks to trick browsers such as IE6 into submission. No matter which method you choose to live by, be sure to make an informed decision before leaving behind any visitors. If you already have a site, use Google Analytics or some equivalent to track the percentage of visitors you’re getting with browsers that don’t support PNGs. This allows you to make the best decision to cater to your current user base.

View Modes

By now you may be feeling a bit overwhelmed with the number of options available for saving images for the web. You might be thinking that switching between various options is too time intensive and that comparing those options accurately is nearly impossible without saving out a version of each. Fortunately, Photoshop eases these concerns by allowing you to see multiple options at the same time. In the top left corner of the Save for Web dialog, you’ll notice 4 tabs labeled Original, Optimized, 2-Up and 4-Up. These are often overlooked by designers but are extremely helpful in deciding on the optimized settings for a given image.

Original and Optimized

Viewing both the Original and Optimized tabs will give you a single image preview. The principal difference is that Original allows you to see the unaltered PSD while Optimized lets you see what the image will look like after it is saved with the current setting.

2-Up and 4-Up

These two tabs make saving images for the web a lot easier by allowing you to experiment with different options without losing settings. They both work exactly the same way and differ only in how many options you get to experiment with.

Each preview shows you the file type, size, quality and approximate loading time of the image with the settings pertaining to that selection. If you select a preview by clicking on it, you can change its settings on the right by using all of the methods discussed above. Then you can select another preview and change its settings for a quick visual comparison. You can compare across file types (JPG, PNG, GIF, etc) or within a given file type and limit the variation to quality settings. If you’re doing the latter, Photoshop can automate the task by automatically populating each window with a different setting so you can see which direction you want to go.

First select the type of file you think you’ll need, for instance: JPG. Then follow the picture above to locate the dropdown at the very top right of the Save for Web window. Click on this and go down to “Repopulate Views.” This will automatically fill each view with a JPG containing various quality settings. Just find the one with the most acceptable image clarity and file size and tweak the settings until you’re satisfied. This method makes it much easier for beginners to get a feel for the settings without spending a lot of time digging through them one at a time.

Working with Slices

Web designers that handle most of the initial layout in Photoshop usually work in one of two ways. They either pull images out of the layout and crop/save them individually, or they use Photoshop’s built-in slicing tools to select and save different parts of the image.

If you’re the type of designer that frequently use slices, there area a lot of options in the Save for Web dialog to speed up your workflow. Using the Slice Select Tool (C), found in the upper left, you can select individual slices to work with (hold shift to select multiple slices). Using this method, you can change the settings of each slice. This means if you want your header image to be a GIF but your footer to be a JPG, it’s as easy as selecting each slice and assigning a file type. After you’re done, hit the “Save” button to bring up the save dialog. Here you can decide if you want to save all the slices in your image as individual files or just those that you have selected. Exporting all slices at once allows you to accomplish the feat of collecting all the images you need from your PSD layout in a single step. This can save you loads of time if you’re working with a complex site design.

Outputting HTML

The final feature we’ll discuss is using the Save for Web dialog in conjunction with slices to output an actual HTML file. To begin, slice up your PSD and bring up the Save for Web dialog. After you get the settings you want for each slice, go back to that dropdown in the very top right of the window and click on “Edit Output Settings.”

This should bring up a window that gives you options to adjust the settings for HTML, Slices, Background, and Saving Files. Using these options you can adjust whether you want to output XHMTL, what color you want your background to be, what naming convention you want to use, etc. Most of these options are pretty straightforward and don’t require further explanation but I will recommend though that you select “Generate CSS” instead of “Generate Table” under the Slices menu. Unless you are actually trying to create a table, modern web standards discourage using tables to generate a web page layout.

Finally, to export your sliced PSD as an HTML document, hit “Save” and select the option to export “HTML and Images.” Don’t expect to use this method to build an entire website in Photoshop. It’s simply meant to aid the process of exporting the images and marking them up in HTML. If you do most of the layout in Photoshop anyway, using the export HTML option can save you a lot of time setting up the initial HTML file. The downside is that there will be plenty of clean up to do to organize the code in your preferred manner. Consequently, most seasoned coders will prefer to skip this method entirely and code from scratch, but I encourage you to experiment with it to see if you can improve your workflow in any way.

Conclusion

The information above is more than enough to start you on your way to becoming a Save for Web guru. I hope you’ve learned a thing or two you didn’t know about Photoshop’s “Save for Web & Devices” dialog. Use the comment section below to let us know what you thought of the article. Also, there’s actually still plenty more to the dialog that we didn’t go over so feel free to point out any features that you use regularly that weren’t mentioned above.

Related Content

• 8 Excellent Tools for Optimizing Your Images
• How to Auto Caption Images Using MooTools
• 15 Best Places for Designers to Get Free Stock Photos Online
• Related categories: Web Design and Web Development

About the Author

Joshua Johnson is a Graphic Designer/Web Designer with over six years of experience working with a major international marketing agency. He is also the Editor of Design Shack, a web design and development blog. Check out his recent work and follow him on Twitter: @secondfret.

Classic Luxury is a high quality, clean and simple CSS-based template with three custom pages created by CssTemplateHeaven exclusively for Six Revisions readers.

It is clean and has a lot of whitespace and nice typography. The code is well-organized and uses standards-based HTML and CSS.

Classic Luxury is great for portfolios and personal photo sites, and can be converted easily to a CMS theme as needed (such as Drupal or WordPress).

You may use this template in any projects you like (both personal/non-profit and commercial), but you cannot resell this pack’s source files.

Features

• 3 custom page templates
• Photoshop PSD files included
• Valid XHTML
• FancyBox support (jQuery plugin for modal windows)
• Dropdown menus
• Social media icons for Facebook, Twitter, and LinkedIn

Previews Home

Gallery

Page

Demo

Click below to open live demos of Classic Luxury’s page templates included in this pack.

• Classic Luxury Demo 1 (Home)
• Classic Luxury Demo 2 (Gallery)
• Classic Luxury Demo 3 (Page)

Download

• classic-luxury (ZIP, 0.2 MB)

Related Content

• Dark Aurora: A Free & Beautiful Flash Template
• Free WordPress Theme: Zexee
• Letter Frame – A Free WordPress Theme
• Related categories: Freebies and Web Design

About the Author

Dieter Schneider is the site owner of CssTemplateHeaven, where you can find high-quality CSS templates and WordPress themes (both premium and free). If you’d like to keep in touch with CssTemplateHeaven, you can follow them on Twitter: @csstemplates.

"Coming soon" pages are a great way to tide over your visitors until you finish your new website. They can be used as a teaser for your future website, or places to simply put your information where people can get to it while you are under digital construction. We are going to look at a collection of how websites are successfully using "coming soon" pages.

1. SquidChef

SquidChef has a cute under-the-sea theme and an illustrated squid character to go with their name "SquidChef". Having a character illustration like this almost ensures that the site is going to have a friendly feel. (Check out some more illustrated character designs). I also like the idea of putting all the information into the talk bubble.

2. Accentuate

I like the color scheme of this "coming soon site". It’s a simple theme that uses pink to highlight the important areas. The colors go well with the simple layout of the website and the image of the chairs makes the website more interesting than just having text.

3. Flowdock

Having an illustrated look to a website usually gives it more of a fun and laidback feel. It has a bright and welcoming color palette, and I like how the headings in the three sections in the footer are different colors. It makes the color flow throughout.

4. Rumble Labs

Usually when you say "hello" right off the bat, it gives off a friendly vibe, and despite the dark background, this page gives that endearing feeling. The bright highlight colors help emphasize that point, as well as the arrow and dotted lines.

5. Irava Stefan

I like the hovering logo – it creates a sort of 3D look, which gives the page a little more dimension. Also, what makes this site interesting is that when you hover over the logo and Twitter icon with your mouse, it displays more information. (Learn how to create 3D text via this tutorial).

6. chocolatepool

The brightly colored quirky illustration gives a good sense of what the style of work could be, or at the very least, gives fun laidback feel. The sign that says, "summer" integrated into the illustration gives a hint as to when the website will launch.

7. Berengere Monin

This website has a very nice clean and simple look. I like the Asian-inspired style, with the tree/plant on the right and the black, white and red color scheme. It gives the "coming soon" page a nice sense of simplicity.

8. Birdboxx

This is a successful illustrated "coming soon" web page. This site pours out a peaceful and calming character with the green colors and the white dove.

9. Creative Joomla! Design Book

I like the sketchy-style of this soon-to-launch page. Not only is it a fun layout, but it is also useful, with the "be updated" web form mixed in to the design. This "coming soon" page gives you ways of keeping in touch, by including Twitter and email options into the composition.

10. Lilly’s Table

The color palette is what really draws me to this website. The colors have a slight retro feel (learn how to create a retro color scheme), but it still gives off a bright, clean, vibrant feel. In addition, I like how the last post from their blog is displayed on the left.

11. ChkChkBoom

I like the paint splatter effect, which they use to draw attention to the important parts of the layout. They also use some bright colors to emphasize certain areas like the headline, and the green play button which is used for the RSS email feed.

12. Mogulista

This website gives off a glamorous countenance, and that is probably because the business is geared towards women, who typically find these sorts of theme appealing. What really struck me about this "coming soon" site was the navigation. They use a nice animation that keeps you on the same page but rolls in and out new text below the logo.

13. Dialed Tone

I like the usage of the 3D dial, as well as the shadows on the "coming soon" box and the sign up button, which give the site a lot more dimension.

14. Evert Slagter

The icons are a nice touch considering they work with mobile user experience. I also like the simplicity and the subtle light glow in the background that gives it a little more depth that just having a black background.

15. Chuck Barrett

I think when I look at this, I immediately get an idea for what kind of style of fashion will be on the future website with the black and white photo. I also like the idea of having the icons in grayscale, which goes with the photo, and how, when you hover over them, they change to colored.

16. Jon Ward

At first glance, this is your run-of-the-mill name, logo, and title "coming soon" page, but if you stay on it for a second or two, you’ll notice that where the job title is, is actually an animation that rotates the title, email and phone number. It’s a great way to present that little bit more information, and at the same time keep the page as simple, but engaging, as possible.

17. FILTERED.LANGUAGE

The logo has a techno look to it, which was why it drew me to the site in the first place. It turns out that it’s for a poetry publication. Regardless, the logo, which gives this "coming soon" page a nice dose of color, is spectacular.

18. Johnny Walker Plumbing

I love how simple the look is, but you can still get the impression that he is a plumber at someone’s house fixing their flooded toilet or sink. It is simple but effective.

19. DesignSvn

I always love good Photoshop lighting work, and this website has it working really well with the web 2.0ish Twitter and subscribe icons.

20. Upstate Design Collective

Other than the 3D effects, I really like how the bright fresh colors make the website stand out.

21. Handsome and Gorgeous Clothing

I think that it is important to showcase your merchandise, even if your website isn’t finished yet. I also like the use of the jagged edge, giving it a layered fabric feel, which is appropriate for what they are selling.

22. The Republic

I like the white design with the subtle cityscape at the bottom; it gives it an interesting look. I also like how they use gray colors instead of the typical black on white, which gives it a less harsh look and  helps to make the logo mark stand out more.

23. Gimmr

Not only does this "coming soon" page have a color scheme that I really like, it also has a unique feature. You can upload a photo of yourself and add glasses to your portrait so you can look like the character/mascot to the left (which you can then use as your avatar).

24. myNiteLife

This is another website that uses some nice lighting effects, and the purple colors give it a night feel that goes perfectly with their name (myNightlife).

25. FavMovie!

It seems like they are using their "coming soon" page as more of a teaser, not really saying what they’re all about. All I can gather is that it has something to do with about movies (probably). If you want to find out, you can sign up for email updates.

Related Content

• 25 Impressive Character Designs from Behance
• 25 Stylish Examples of Web Forms
• How to Use Retro Colors in Your Designs
• Related categories: Design Showcase / Inspiration and Web Design

About the Author

Tyler Denis is a part-time freelance designer from Ashland, New Hampshire. He is also the creator/writer of the design blog Denis Designs/blog, a website dedicated to bringing quality tutorials and inspiration. You can follow him on Twitter or at his personal site, Denis Designs.

In this Photoshop web design tutorial we are going to design a smashing, clean, and professional website layout in Photoshop. The layout we are doing in this tutorial can be used as personal or corporate website design.

Final Preview

Have a look at the layout that we’ll be creating in this tutorial. You can see the final preview of the image below or click here for a full size version.

Prepare your Photoshop document

1 Create a new document in Photoshop (Ctrl/Cmd + N) using the settings from the following image.

Set the units and rulers settings

2 Make sure that you are working in pixel units, which is the standard fixed unit for web design. Set up the following settings for your Rulers from the Preferences dialog window (Ctrl/Cmd + K); click on Units & Rulers and ensure that you have everything set as shown in the figure below.

Add guides to designate the content area

3 Activate Photoshop Rulers from View > Rulers. Toggle the visibility of the rulers by pressing "Ctrl/Cmd + R". Also open the Info panel from Window > Info (shortcut key: F8). The Info panel gives useful information depending on the selected tool. By pressing "M", choose the Rectangular Marquee Tool and create a box that is 120px wide from the left corner of the canvas. You can adjust the size by looking into the Info panel while making the selection. Now click on the left ruler and drag a guide to the right of the marquee selection as shown in the image below.

4 Move this selection on the right edge of the canvas. Assign another guide to the left side of the selection.

Your canvas now should look like this:

Creating the logo

5 Now we are going to create the logo for our website. The logo is going to be very simple and it will have a color gradient effect. Create a new group (Layer > New > Group) and name it "logo".

6 Select the Horizontal Type Tool (T) and type "SMASHING" (or the name of your website) in capital letters.

7 Then in the Character panel, set the font to Arial, the style to Bold and the size to 42pt. Also set the anti-aliasing method option to Sharp and use the color #101112. You can also set these options in the Options bar when the Type Tool is the active tool.

8 Double-click to open the Layer Style dialog box. Select Gradient Overlay, click the Gradient Editor and use the settings as shown below.

9 Put the "SMASHING" type layer at the distance of 35px from top and 0px from left guide. You can do this accurately using the Move Tool (V) and your arrow keys. Duplicate this type layer (Layer > Duplicate Layer). Move the duplicated layer right next to the "SMASHING" word and edit the text to "Dzine". Repeat Steps 6, 7, 8 but use different gradient colors (Left color stop: #b27625, Right color stop: #e5ad27) for the word "Dzine".

10 Select the Horizontal Type Tool (T) and add a tag line under the logo with following settings.

11 The final logo should look like the image below. To activate/deactivate the guides, go to View > Show > Grid or use the shortcut Ctrl/Cmd + ;

Creating the navigation bar

12 Create a new group and name it "navigation", it should be above "logo" group. Drag a guide from the top ruler, 150px below the top edge of the canvas. Select the Rectangle Tool (U) and draw a horizontal line of 4px height with a color of #e3ab27, across the canvas.

13 Add navigation links at 12px-high from this horizontal line and 20px to the right of the left guide. Select the Rounded Rectangle Tool (U) and draw a box with the size of 72px by 35px. Move this layer below the text links and name the layer "hover". Straighten the bottom rounded corners with the Convert Point Tool. Move the sides of uneven edges below with an 8px margin to make the edges equal to other inner edges at bottom. Double-click the "hover" layer to open the Layer Style dialog box and add gradient colors (Left color stop: #e5ad27, Right color stop: #b27625). Select the Horizontal Type Tool (T), select the text, "Home" and change color to #ffffff (white).

Creating the "call us" section

14 Next we are going to create the "call us" section at the top-right of our design (exactly opposite side of the logo). Download this phone icon and place this near the right guide. Name this layer "phone icon". Select the Horizontal Type Tool (T). Add a phone number on the left of the phone icon using the font Arial, with the size set at 20pt and the color #292929. Add some related text below the phone number using font Arial, set at Bold, with a size of 11pt and a color of #595959.

Creating the header

15 Now we are going to a create the header section. Create a new group and name it "header".

16 Select the Rectangle Tool (U) and create a rectangle shape with the size of 1200px by 440px. Put this rectangle at a distance of 1px below the navigation bar and name this layer "header bg". Double-click the "header bg" layer, select the Gradient Overlay layer style and have these two colors in the Gradient Editor (Left color stop: #2e2226, Right color stop: #7a7556). See the image below for the rectangle position and colors detail.

17 Create another rectangle from the Rectangle Tool (U) with the size of 960px by 360px. Put this rectangle at the distance of 40px from the top of the "header bg" layer and 0px from the left guide. Name this layer "header container". Preview below what we have done until now with the design.

Creating the "featured project" section

18 Next we will create the featured project section. Create a new group inside the header group and name it "fp". Select the Rectangle Tool (U) and create a rectangle with the size of 630px by 340px at the distance of 10px from the top and the left of header container. Give this layer color of #000000 and name it "fp container".

19 Open an image in Photoshop to place here as your featured project. Go to Select > All (Ctrl/Cmd + A), then Edit > Copy (Ctrl/Cmd + C). Come back to the our web design. Create a new layer above the "fp container" layer and go to Edit > Paste (Ctrl/Cmd + V) to paste in your featured project image. Rename this layer to "fp image". Right-click the "fp image" layer and select Create Clipping Mask. Now the image is visible only inside the rectangle ("fp container"). Make adjustments so that your featured project image is similar to the one shown below.

20 Go to Edit > Transform > Scale (Ctrl/Cmd + T). From the Options bar, click in the rotation box and type -4 and press enter twice to adjust the angle. Stay on the same layer ("fp image"), and select Luminosity as the blending mode of this layer.

21 Next we are going to create the title and description bar for the featured project image. Select the Rectangle Tool (U) and create a rectangle shape with the size of 630px by 90px using color #161718. Change opacity of this layer to 90% and name it "title bg". Place this rectangle as shown in the image below.

22 Create another rectangle with the size of 630px by 1px using color #9c9c9c and name it "title horizontal line". Place this rectangle on the top edge of the contents of the "title bg" layer.

23 Add a title and description inside the rectangle we created in Step 21, using the following settings for title and description.

For the title:

• font: Arial, color: #ffffff, size: 25pt and anti-aliasing method option: Sharp

For the description:

• font: Arial, color: #a4a4a4, size: 12pt and anti-aliasing method option: None

Creating the "quick quote" section

24 Create another group inside the header group and name it "quick quote". Select the Rectangle Tool (U) and create a rectangle with the size of 300px by 340px. Place this rectangle at the distance of 10px to the right of the featured project section and name it "qq container".

25 We will copy a Layer Style from another layer we created in a previous step. Go inside the "navigation" group, right-click the "hover" layer, select Copy Layer Style, go back to the "qq container" layer, right-click and select Paste Layer Style. We have the same Layer Style of the "hover" layer for our "qq container" now.

26 Select the Horizontal Type Tool (T). Write "Quick Quote" inside "qq container" at the distance of 20px from the top and left edges of the containing box. Set the font family to Trebuchet MS (or a web-safe font of your preference) with the color of white (#ffffff) and anti-aliasing method option set to Sharp. We are going use the Rounded Rectangle Tool (U) to create three form fields. Select the Rounded Rectangle Tool (U) and set the radius to 3px. Then create two rounded rectangles with the size 260px by 35px using the color of white (#ffffff). Then name the shape layers as "field1" and "field2" respectively. Create the third rounded rectangle with the size of 260px by 75px using a white color (#ffffff) and name it "field3". Select the Horizontal Type Tool (T) and create labels for each form field.

27 Select the Rounded Rectangle Tool (U) and create a box of 80px by 35px and name it "submit btn".

28 Double-click the layer to open the Layer Styles dialog window and tick the Gradient Overlay checkbox from left. Click the Gradient Editor and change colors of the gradient as shown below.

29 Select the Horizontal Type Tool (T) and type "Submit" using the font Arial, style Bold and size at 13pt. Select both layers in the Layers panel ("submit btn" and "Submit text").

30 Choose the Move Tool (V) from the Tools panel and click Align vertical centers and Align horizontal centers from the Options bar. (Alternatively, you can get the same result by going to Layer > Align > Vertical Centers and Layer > Align > Horizontal Centers).

Creating the main content area

31 Create a new group and name it "content". Select the Rectangle Tool (U). Create a rectangle of 300px by 175px and name it "c01". Place this layer 30px below the header and 0px from the left guide. Double-click the layer and use the settings from the following image.

32 We are going to add content to this box now. Select the Horizontal Type Tool (T) and add the text, "About SmashingDzine". Make a selection of the "About" word using the Horizontal Type Tool (T), and then change its color to #b47825. Then make a selection of the "Smashing" word, and then change the color to #2f2f2f. Add a little description and a link text beneath the title. The following options were used for the title, description and link text. (You can adjust these options as needed).

For the Title:

• Font: Trebuchet MS, style: Normal, size: 24pt, anti-aliasing method: Sharp

For the Description:

• Font: Arial, style: Normal, size: 12pt, anti-aliasing method: None, color: #767676

For the Link text:

• Font: Arial, style: Bold, size: 13pt, anti-aliasing method: None, color: #252525, Underline

33 We will add a square box next to the description now. Select the Rectangle Tool (U) and color #ffffff, hold down the Shift key to maintain the proportions and create a square with the size 88px by 88px. Move this square at a distance of 10px from the left of rectangle ("c01"). Name this layer "border". Double-click the layer to open the Layer Style dialog window, and add a Stroke layer style with the following settings:

34 Create another box with the size of 82px by 82px and place it in the center of the "border" layer. Name this layer "box" and change the color of this square to #d5d5d5. Select all layers in this group ("content" group), go to Layer > New > Group from Layers (Ctrl/Cmd + G) and rename this new group "about".

Note: The inside grey square box is a place holder for an image and can be replaced with any image of your choosing.

35 Duplicate the "about" group (Right-click on the group and select Duplicate Group) and name it "services". Right-click on the "services" group and select Duplicate Group again and name it "portfolio". We have three groups now ("about", "services", and "portfolio"). Move the last group ("portfolio") to the right guide as shown below.

36 Select all three groups in the Layers panel, and then go to Layer > Distribute > Horizontal Centers to space them out equally. Click here to see the full size image of the following image.

37 Change the titles for the "services" group (center) and "portfolio" group (right) as shown below. (You can change these titles according to your requirement.)

Creating the footer

38 Create a new group and name it "footer". Select the Rectangle Tool (U) and create a rectangle with the size of of 1200px by 100px at the bottom of our design layout. Name this layer "footer bg". Use the same Gradient Overlay style as the "header bg" layer by right-clicking the "header bg" layer and choosing Copy Layer Style. Go back to the footer group, right-click the "footer bg" layer and select Paste Layer Style.

39Select the Horizontal Type Tool (T) and add copyright text and footer links text on the left using the font Arial, size of 12pt and a grey color (#dddddd).

40 We are going to add the email subscription section on the right. Create a new group inside the "footer" group and name it "subscribe". Select the Rounded Rectangle Tool (U) and create a rectangle of 85px by 35px. Name this layer "subscribe btn".

41 Repeat Step 26 for adding the form fields and labels.

42 Select the Horizontal Type Tool (T) and type "Subscribe" using the font Arial, style set to Bold and size at 13pt. Select both layers ("subscribe btn" and "Subscribe text").

43 Repeat Step 28 for creating the subscribe button.

44 Select the Rounded Rectangle Tool (U) and set the radius to 3px. Create a rounded rectangle with the size 210px by 35px using a white color (#ffffff) and name this shape layer as "email field". Add a text line above "email field".

Final Result

OK, that’s it and we are done. Here is the final result. Click on the image below to see the full size layout.

Thanks for following along with my tutorial. I hope you all enjoyed and learned something new from this tutorial. Kindly leave your comments below and share your thoughts and opinions, I would love to hear them. You can also share this design tutorial to your friends if you think it could be helpful to them!

Download the source file

You can download the Photoshop file (PSD) of this tutorial from the link below as a ZIP archive.

• clean-professional-weblayout (ZIP, 2.4 MB)

Related Content

• How to Create a Clean Blog Design with Photoshop
• Coding a Clean Web 2.0 Style Web Design from Photoshop
• Create a Slick and Minimalist Web Layout in Photoshop

About the Author

Waheed Akhtar is a freelance Web Designer from Dubai, UAE. He is the founder and editor of Smashing Share, where he helps the Design Community by sharing tutorials and design resources. You can reach him via Twitter or Facebook.

Thousands of service buyers complain of poor quality work from freelancers and design agencies every year; often to the point that reputations are ruined and the design industry as a whole suffers. From disappearing service providers to fly-by-night scam artists, the online world is packed with opportunities for things to go wrong, and it’s really not surprising that so many online and offline entrepreneurs have a bad impression of freelancers and one-off designers.

Of course, there’s another side to that coin.

While cheapskate designers and fraudulent artists ruin business for one side, ultra-demanding clients and power-tripping businesspeople can certainly do the same for the other. From bizarre requests to ridiculous revision ideas, some clients can be an absolute nightmare to work with.

Unfortunately, it’s part of being a designer—especially a newbie designer—and a lot of people simply suck it up and get back to work.

The problem with that approach is that it’s not a long-term strategy. You can only work with poor clients for so long—they certainly pay the bills, at least most of the time —but they quickly become a major roadblock to your business flourishing, costing you in terms of opportunity. Time gets wasted catering to ludicrous requests. Rates are slashed to keep them onboard. And an all-round negative aura immerses your business.

The good news is that, with enough planning and marketing direction, you don’t have to work for clients that are frustrating and difficult.

Here are some strategies that will help you refine your freelancing business and personal marketing to the point where you’re choosing clients; not them choosing you.

Get your planning book out, file a new page for marketing, and incorporate these tactics into your new client acquisition strategy.

Search by Yourself

Searching for great clients can take time, but the satisfaction that comes from a low-maintenance client base is fantastic. Image source.

It’s one thing to put up an advertisement on a popular website, and another altogether to respond to someone else’s. While it’s typically unwise to respond to advertisements for service work – primarily since you’re often forced to work on the clients terms for payment and scheduling – it’s occasionally a great strategy for picking out clients and saving yourself the hassle of having to say "no".

Most webmaster forums will feature a website that’s packed with design-related jobs, and although wages are typically pretty low, they’re often a good place to start building up your portfolio and acquiring clients on your terms. If you’re catering to a higher-end market, a number of local directories and design-related websites typically offer job leads or other design contracts.

Create a Great Web Presence so They Can Find You

Without directions and instructions, how are your clients going to find you? Image source.

You’ve built a website, done some basic SEO work, and now you’re stuck waiting for clients to come to you. The only problem: they aren’t coming.

A basic website is just that – a basic website, and it’s unlikely to attract any valuable clients to your business. While people may stumble across is from a bizarre and unrelated search result, it’s very unlikely that you’ll gain any valuable clients without your own client-driven and well-marketed website.

Before you create your long-term business website, look at the people who are getting all of the jobs you’d like. Even if you’re not at their level currently, look at their websites and observe what it is that’s pulling in new clients week after week. For example, if it’s conversion-driven sales copy, hire a professional to write your page in an appealing and buyer-friendly style.

You can only imitate for so long, but as a starting strategy, it’s a good way to gain exposure and influence. When you’re dead set on getting clients to come to you, look at the people who are inundated with clients and see what they’re doing right. Reverse engineering can help as a beginner, and could end up being the difference between 10 great long-term clients and 10 frustrating one-time clients.

Ask Your Current Clients for Referrals

Sometimes a single phone call from a client is enough to land a major contract. Image source.

After a few months of freelancing as a designer, you’ll quickly build up a group of designers that come back to you for orders often. From weekly logos to frequent entire website designs, some designers are inundated with orders from one or two of their best clients, and completely free of work from anyone else.

This is the type of situation where you have to look at the advantages you have, not the potential disadvantages that only having a small stack of clients causes. Contact your best clients with an honest and important email, asking them if they know of anyone else that would be interested in working with you.

This situation can be taken to extremes, sometimes with very profitable effects. Want to really encourage your clients to get their friends working with you? Create an affiliate or referral program for your design agency, and convince past clients to bring in new ones for a small commission, discount on their next order, or special bonus. Incentives go a long way online, and sometimes something as minor as a free blog theme could bring in a new major client.

Advertise Yourself Strategically

When it comes to advertising, it’s all about strategy and placement.

PPC (pay-per-click) advertising can be worthwhile for service businesses, especially large service businesses that can afford to cater to a pool of clients at once. However, most PPC advertising platforms are used in a non-strategic manner, causing lost ROI and wasted time. From banner ad mistakes to on-page advertising that simply isn’t effective, even minor advertising mistakes can end up costing some serious money.

The best way to advertise is to go where your clients are. A great design blog or community might expose you to thousands of new designers, but it’s not the type of place that’s likely to be brimming with potential clients. Advertise strategically to target the most clients, and the most valuable clients, with every pick.

For example, a simple text advertisement on a small business forum could be worth much more than a large full-page post on a design marketplace. Why? Because an advertisement specifically tailored to small businesses will bring in hundreds of entrepreneurs and local business owners that are interested in working with you, whereas a marketplace posting will only ever bring in the occasional client, as the level of choice is hugely increased.

Don’t just advertise; advertise strategically for optimum clients.

Master the Cold Email Approach

Local clients will often like to meet in person, so get your suit and tie ready. Image source.

It’s surprising how effective an email marketing campaign can be for service business owners.

Relax, there’s no need to spam anyone, but targeting individual businesses and community companies with the offer of design services can be quite worthwhile. Many businesses want to be online, but simply don’t know how to move their business there. As a designer, you can approach them with a deal in mind, limiting their barrier to entry and maximizing your local business profits.

This works best with local clients, and for some designers it can seem like quite a mission. Most of us internet-based providers aren’t used to working with offline businesspeople, so get ready for a few changes.

Email as casually as you’d like, but expect in-person meetings, discussions over lunch, and more than a few questions for a large contract. For some, this might be too much work, while for others it presents a lucrative opportunity.

Partner With Other Designers and Design Firms

Sometimes even the unlikeliest of partnerships can work in your favor.

There are going to be times in your life when scheduling gets completely out of control. Clients will stack up, website design requirements will tally well off the page, and work will become a major headache for you. Then again, there will also be times when clients simply aren’t contacting you, leaving you completely free of work, and unfortunately, free of income.

Realize that every service business experiences these changes from time to time, and while many don’t adapt, many others do.

If you want a more constant flow of long-term clients, why not team up with another designer or design firm? You’ll be free to take care of their overflow when things get rough, and they’ll be available to take care of yours. While not a perfect solution for long-term clients, this approach can minimize downtime and keep your schedule smooth even through low-client patches.

What Are Your Strategies for Finding Awesome Clients?

How do you find your clients? What are some great resources online to find clients? Share it with us in the comments!

Related Content

• How to Design for Your Worst Client: You.
• A Simple Guide on How to Effectively Talk to Clients
• How to Get Your Ideas Across to Clients
• Related categories: Project Management and Resources

About the Author

Mathew Carpenter is a 17-year-old business owner and entrepreneur from Sydney, Australia. Mathew is currently working on AddtoDesign, a website which provides value added design buzz. Follow Mathew on Twitter: @matcarpenter. Follow the development of @AddtoDesign.

One of the challenges that we as web professionals face is that of keeping our skills updated in a constantly changing world. Our expertise can and will quickly become outdated if we don’t work purposely to continue our education, which makes continuing education one of the most important things you can do.

But when you’re putting in full days to take care of clients and working hard on developing your business, we look at that continued education and often end up telling ourselves, "That can wait," and before we know it our skills have fallen behind and then our work suffers because of it.

The good news: with a little bit of determination, you can stay on top of those skills and even have fun with the learning. Today, we’re going to look at how you can overcome your obstacles and make it happen.

And by the way, the best part is that this continuing education has both long-term and short-term results, so it’s not one of those things where you have to wait forever to start seeing the fruit. You can put your new skills to use right away, in addition to reaping long-term success from your maintained competence. I don’t know about you, but I think that’s pretty exciting! Let’s look at the how-to.

Step 1: Make a Plan

Your educational efforts will be much more productive if you make a plan ahead of time. Ask yourself, "What do I want to learn? What skills have I seen in others that I would like to have?" These could be things specifically related to your work, like if you decided that you wanted to master Photoshop Actions. Or they could be from a different but similar skill set, like if a developer decided he wanted to learn a new programming language. Or your desired skills could be business/people related, like if you decided you wanted to become better at making good first impressions with potential clients.

It’s all up to you, and you have the freedom to set your sights on anything! It’s important to break out of the box and make sure you don’t have any of those "I always wanted to learn how to ______, but I never did" regrets in regards to your job.

In case you wondered, there are two reasons why it’s important to plan what you want to learn about.

First, this brainstorming might make you think of some ideas you would have missed out on otherwise.

And second, on the other end of the spectrum, is that it keeps your education efforts focused on the things you really wanted them to be focused on. I know some of us (me included) have a tendency to get distracted reading blogs and such and then excusing it as "continuing education". I know from experience it’s an easy trap to fall into, and we don’t want to end up there, so making a plan ahead of time and help us avoid that!

Step 2: Schedule It

If you’re like me and most other people, you know that if it doesn’t get put in the schedule, it probably won’t happen. That’s why it’s essential to set aside a time each week and just make yourself stick to it. Before long, you’ll find yourself looking forward to your weekly learning session.

Pick a time that is generally free from interruptions, and then be consistent in setting apart that time. Of course, you don’t have to pick a weekly timeframe. Once a week has worked well for me, but if you find that some other scheduling works better for you, by all means go with that.

The key is regularity, and other than that it’s up to you.

Step 3: Find out How

You’ve got the plan, you’ve got a time scheduled, now what? The next step is to find the resources you’re going to use for this extra learning – a way to expand your knowledge in an easy, fun and cost-effective way. Of course, for different people this will take different forms. For example, I’m a book person. I’d rather learn from a good, thorough book than pretty much anything else. You’ve got plenty of other options, though – seminars, videos, and heck, you could get a full education just from all the excellent blogs out there. Each of these has its own pros and cons, so I would repeat that it’s vital to establish your own criterion based on your own needs and preferences and then go from there.

Here are some of the excellent, varied options you have for continuing your education.

Conferences

While these aren’t so cost-effective or schedule friendly, the seminars and other opportunities cannot be overlooked, and the contact-building capabilities of conferences are another benefit. If you’re the conference-going type, check out these lists of web conferences and writing conferences.

Social Media

the great part about using social media for education is the personal interaction that goes with it. If you’re interested in expanding your social media experience to include education, try reading and Social Media Basics for Freelancers and  Continuing Your Education 140 Characters at a Time

Blogs

I don’t have to explain this one!  A good collection of feeds is an indispensable resource – and very possibly the only education you’ll ever need. You probably already have a collection of favorites, but if you’re looking for more ideas, there’s a whole host of great opportunities:

• Top 100 Freelance Blogs
• The Top 10 Blogs for Writers
• 30 Web Design Blogs with Consistently Good Content
• The 20 Best Productivity and Personal Development Blogs

Books

Books can add up quickly, but they are certainly fabulous learning tools. And don’t forget to check your public library – they won’t have everything (and not the very newest stuff), but it’s a great way to be able to read some good books without putting a whole lot of cash on the line. Then, if the book was a once-through kind of book, you didn’t spend any money, and if it’s the kind you’ll want to refer back to, you can always go get your own. Wondering how to find what’s worth reading? Try these:

• 50 Must Read Books in Web Development
• 40 Books for Professional Design and Development
• The Top 10 Media and Marketing Books
• The 10 Best Books for Writers
• Copywriting Books You Should Buy

There’s a whole world of opportunities out there – the important thing is that you pick something that fits you well and gives you the inspiration to stick with it.

Where Will You Go?

The world moves fast, and it’s up to you how you’ll stay on top of it, but I hope you’ve been able to see that you can definitely maintain your professional skills without draining your wallet or adding another chore to your schedule. Learning is really an enjoyable adventure – and the destination is all up to you!

Related Content

• How to Stay Ahead of the Curve as a Designer
• 6 Things You Need for Your Web Project to Succeed
• How to Start a Freelance Company
• Related categories: Project Management and Productivity

About the Author

Nick Parsons is a web enthusiast, designer and developer from Houston, Texas, as well as the owner of Webitect, an awesome resource blog for webmasters. Feel free to contact him via email or Twitter.