Sienna Smith is a yoga teacher, therapist, and owner of Yoga Mountain Studio in Marin County, California. She needed a unique online presence of her own that would highlight her yoga therapy services, teaching schedule, and other projects that she is involved with.

Look and Feel

Sienna worked with me to create a color palette that is vibrant without being over the top. The welcoming and bright colors are supported by the lotus flower wallpaper and logo we custom-designed for this project. As for the typefaces, we used Arvo for headings and Open Sans for body text. Arvo is a beautiful slab-serif that has a lot of character and class. When combined with the neutral, geometric sans-serif Open Sans, the design takes on a friendly and very legible feel.

Content Management

Sienna is able to update all of the content on her site from any computer with an internet connection. Everything from her special events, weekly classes, homepage slideshow, and all text and images can be updated, added or deleted. WordPress handles all of this heavy lifting, including the blog and photo gallery. For those of you with more technical knowledge, I used custom post types for weekly classes and the homepage slideshow to make entering data a very simple and pain-free process.

Responsive Design

Something I am integrating into my workflow is responsive design, meaning having a website adapt to whatever screen or device it is being viewed on. Sienna’s site shifts and changes to make for a better viewing experience on large desktop monitors, small laptop screens, iPads, and iPhones. You can try resizing your browser window on her site to see how the site changes to fit the screen. Ultimately this makes for a much better experience for the visitor and a more professional presentation for my client.

Design and style are not the same thing

While a major aspect of design is the look and feel of the finished product, the real value is in the thinking behind the design. Using a term like Style doesn’t explain the value that the entire design process adds. From thinking about how people will use your product or view your brand, to creating just the right mix of usability and aesthetics, thinking things through from start to finish and asking the right questions is important. It will help create a design that will work best for your organization’s goals.

Design is the face of your organization

It may seem hokey, but investing in good design says to your customers, “We care about you.” Care enough to present your company in a way that makes your value’s clear. Care enough to design an online presence that is easy to use and really useful. Hell, care enough to create something that your customers will actually enjoy using.

Design solves problems that you may not know existed

Hiring someone to slap a new coat of paint on your homepage isn’t why you go to a professional designer in the first place. Sure, things may look polished afterwards, but a  major benefit is that problems that you may not know you had could come to light. You can’t fix something that you don’t know is broken. Maybe your website doesn’t actually say what it is your company does, or give customers an easy  way buy your product. Letting someone with fresh eyes look at what’s happening with your current design is a great way to see what can be improved and what’s working.

Design creates value for your customers.

In the words of the great designer Paul Rand:

Design, good or bad, is a vehicle of memory. Good design adds value of some kind and, incidentally, could be sheer pleasure; it respects the viewer-his sensibilities-and rewards the entrepreneur. It is easier to remember a well designed image than one that is muddled.

Paul Rand

The Brief

The creative brief outlines the goals and objectives of the design project – what are we trying to accomplish, and how might we achieve it? It includes everything from general market trends to specific directions on colors, look and feel, imagery, and mood. Information is the single most important thing that a designer can be armed with in the beginning stages of a design project, and the creative brief is the vehicle for that information.

Brainstorming

After the creative brief is ready, it’s time to get to work. David Airey and others have preached the good word about brainstorming or mind mapping long before me, but its worth mentioning here because of its effectiveness. Brainstorming allows us to make connections among adjectives that we may not have seen, to organize our thoughts, and to come up with imagery that can be used in the design itself. Just 10 minutes of brainstomring can yield a ton of directions to explore and is highly recommended.

Sketching

Sketching allows us to explore more options more quickly, in a way that using Illustrator or Photoshop cannot live up to. In the book Identify: Basic Principles of Identity Design in the Iconic Trademarks of Chermayeff & Geismar, the authors introduce the sketching process by saying the following:

Sketching by hand gives a designer an immediacy of artistic expression and intuitive extension of creative impulses that as of now using the computer lacks. We are looking for the most direct connection between an idea and the creation of a form. In the early conceptual phase, the computer’s preprogrammed function often just get in the way.

Ivan Chermayeff, Tom Geismar, Sagi Haviv
Identity: Basic Principles of Identity Design

Refine Initial Concept

After exploring the various adjectives and words that brainstorming suggested, and taking pen to paper to explore some initial concepts, it’s time to take a concept and run with it. This involves developing one concept in Illustrator, bringing it into Photoshop if necessary, and developing variations on the concept.

Present in Context

It’s not enough to put a single logo on a white page and expect someone to decide if it’s going to work. What does it look like at large and small sizes, full color, black and white, spot color? More importantly, what does it look like in the context of some of its most common uses – on a website, print ad, or application mockup?

Revise Concepts

Sometimes multiple concepts stem from a single idea and before you know it, you have a ton of options to choose from. Paul Rand famously told Steve Jobs when he was working on the Next Computer logo that he will solve his problem, and he will get paid for it. In other words, the goal isn’t to produce as many options as possible and decide which is the coolest, it is to create the identity that best meets the needs outlined at the beginning of the project in the first place. Whether its one or five concepts that you are working with, be sure that every single one will be an effective identity.

Invoicing – Pancake

Like a lot of freelancers I started out using Freshbooks to handle invoicing. I soon discovered that in addition to their monthly fee (about $20 a month which is reasonable), there were other limitations that came along with a hosted solution. Not only did I not completely “own” my data, I discovered I couldn’t truly delete invoices or make other changes that I thought I should be able to make. That’s where Pancake comes in. Pancake is a self-hosted app (installed on my server, not theirs) that lets me customize everything to my hearts content. The best part is I pay a once-off fee and that’s it.

Time Tracking – Pancake

Another feature that Pancake takes care of for me is time tracking. I can set up a project, create tasks within that project (design logo, create HTML) and track the amount of time it takes to complete each of those tasks. After I’m finished I click a button and an invoice is created for me automatically.

File Sharing – Dropbox

Whenever I start a new project with a client I’ll have them install Dropbox on their computer and set up a shared folder. This way, any content that I need for the site is automatically made accessible through an easy to use folder system that we’re all familiar with already. It’s a free service for up to 2GB storage and is really a seamless way to manage files across different computers and devices. You can sign up here through my affiliate link (I get a little bit of extra storage).

Google Reader

Google Reader has two purposes for me. One is to keep up with the latest design and web news from tons of blogs, and the other is to have an aggregate list of freelance job postings that I can submit my portfolio to. Sites like Freelance Switch, Authentic Jobs, Krop, Smashing Magazine, and even Craigslist can have high quality work opportunities for experienced freelancers. Google reader allows me to sort through them all in a timely and efficient way.

A designer should strive to organize and present your organization’s story in the way that best accomplishes the goals and objectives of your business, all while helping to define and strengthen your brand.

Me

Another way to say it is, let’s not just focus on design as slapping a coat of paint on the wall. Let’s approach design as a way of thinking more than anything else, a way of approaching a problem and applying the solution that makes the most sense. That solution sometimes means something very flashy and design-y, but sometimes it doesn’t. Sometimes all you need is a clean and clear message that people can read, a strong logo, and a well-taken image. So be it.

The Comparison Game

The problem that designers can come against from time to time is the comparison game. This company did this on their site, this company’s logo is awesome, and this guy created a great illustration for this poster. I’m sure they all look great, but will it work great for your particular needs?

Getting to the heart of what you need is really the sign of a good designer, and being able to create the perfect solution to those needs is the sign of a great one.

• Make everything easy to manage for Christophe
• Make the site easy to use for people visiting his website
• Keep things simple and expansive

The Design

The design combines excellent photography that Christophe provided with earthy colors and a simple layout. A lot of attention was given to the typography to create a unified look throughout the website and to make sure that dense information such as event listings would be uncluttered.

Easy to Manage for the Client

Christophe’s main need is an event schedule that is easy to update. Using WordPress, he can now edit all aspects of the site including his events,  blog posts, and all text and images.

 The event manager we included is a powerful tool that makes it easy to create new events, online registration, and location pages with maps and directions. The manager was customized to fit Christophe’s needs by categorizing  events as either Workshops, Retreats, or Events. Past events are automatically archived so students can see where he has taught over the year.

Easy to Use for People

In both the planning and design stages, a lot of attention was given to making sure that the information on the site was well-organized and easy to find. A live twitter feed and blog posts enable Christophe to communicate with his visitors, and comments, event registration and a contact form make it easy for visitors to contact him.

The most important element of his site – his schedule – is available on all pages of the site. An easy-to-manage slideshow on the homepage shows upcoming events that Christophe wants to highlight.

Some other user-friendly features of the site:

• MailChimp email newsletter integration
• Social media links for all events and blog posts
• Event schedule that automatically creates maps for each location
• Simple, clean design with clear and hierarchical typography

Keep Things Simple

During the design process, we both felt it was necessary to only include features and design elements that would make the site useful and personal. We worked together on design revisions and refining the functionality of the site until we arrived at a finished product that is clean, spacious, and reflects Christophe’s style.

Logo, Business Cards and Flyer

For a teacher with a busy schedule, having a recognizable brand is important. Christophe’s website, business cards, and flyers are tied together visually with a custom-designed logo and style. His flyers are completely editable using iWork.

What the Client Said

What marks me most about David is both his passion for creating outstanding work and his dedication to serving his clients fully. With attention to detail and creative innovation, David delivered just what I envisioned – a website which is elegant, clear, easily updatable and which authentically reflects my offering to the world.

Despite our communicating exclusively via the internet, from beginning to end David was always there to skillfully respond to my nit-picky questions and concerns. Even long after the completion of the project, he is still there to support me if ever I need guidance. It’s been a pleasure co-creating together and I recommend him to anyone looking for a stunning website!

Christophe Cappon

You can view the completed website at christophecappon.com

This is the second of my free business card template giveaways. There are two different designs – a white background and a dark background. There is also a grunge effect that can easily be added to both the logo and background of each PSD. This design is especially useful for yoga teachers, yoga studios, spas, massage therapists, or anyone looking for a unique business card design. You’ll need Photoshop to edit the files, or you can send the files to your local printer and they can edit the design for you before they print.

White Background Design

Front of card, clean version

Back of card, clean version

Dark Background Design

Dark background, grunge logo

Fully Layered PSD Templates

Each PSD template is layered, labeled, and print-ready. Grunge effects on the logo and background can be turned off and on using the layer masks included in the designs. The fonts used for the design are Adelle Basic Bold (available here for free), Futura Medium, and Myriad Pro. Feel free to email me with any questions and enjoy!

Download Dark Background PSD 4.7 MB

Download White Background PSD 3.8 MB

Admittedly, there are a few areas in life that I am not so organized. Laundry, bills, knowing where my shoes are, what I’m doing two days from now, etc.

Email, however, is not one of those areas. Using Gmail’s Labels and Filters, we can set up an email labeling system that is automatic, easy to use, and will improve the efficiency of your email workflow.

Labels in Gmail

If you haven’t used labels in Gmail before, they’re basically folders. Except your email messages don’t get filed away anywhere. Apply a label to a few messages, click the label on the left, and Gmail will bring up only those labeled messages. Easy and straightforward. Add the ability to create custom colors for each of your labels, sub-labels, and the fact that you don’t have to go folder-diving, and we’re looking at a pretty awesome way to organize your inbox.

Filters in Gmail

Filters are exactly what they sound like – set up a rule to filter all your incoming messages into one place or another. You can tell Gmail to do something to an email that is sent to you from a specified person, or contains a keyword, or lots of other variables. These filtered emails can be given a label, sent it to your spam folder, forwarded, marked as a priority, etc.

Combining Labels and Filters

The organizational magic is the strongest when you get Labels and Filters working together to sort your inbox for you.

1. Create a New Label

Create a new Label on the left hand side of your inbox. Pick a lovely new color to go along with your clever label name. Done.

2. Create Your New Filter

Go to Mail Settings > Filters > Create a New Filter and start setting up your new filter.

Extra Top Secret Tip:

Use the word “OR” to create one filter for multiple email addresses. For example, in the From field, we can use “example@test.com OR example2@test.com OR example@test2.com” to create one rule that will apply to any of these email addresses. This is great when you want to apply one label to emails sent from members of a workgroup, class, or circle of friends.

A Word of Caution

Be careful not to add too many rules to one filter. For example, if I put “example@test.com” in the From field and “example@test.com” in the To field, I’ll only end up with emails that have been sent and received from this email (like a reply to an email that was sent to me). You can always check to see how the filter will sort messages in your current inbox by clicking the Test Search button. When you’re happy with the criteria for your new label, click Next Step.

3. Choose Action / Apply Label

Now it’s time to apply your new label. Select Apply New Label and choose your new label from the dropdown menu. If you would like Gmail to apply the new label to emails already in your inbox (in addition to new emails that will be sent to you) then select the Also Apply Filter checkbox.

Tying Up Loose Ends

To and From

Like I hinted at above, if you’re trying to set up a filter that will show all emails either sent or received to a single person, you’ll have to create two separate filters. One filter will have their email in the From field, and one filter will have their email in the To field. This is useful if you send them an email, but they don’t reply, for example. If anyone knows a way around this please let me know.

Gmail+ Address

If you’re adventurous, you can set up a separate email account using a gmail + address. Basically, you add a plus symbol and any word to your normal address, and the email will still work. So if my email address is test@gmail.com, I can sign up for a newsletter using test+spammy@gmail.com, then set up a filter that sends all emails sent to test+spamy@gmail.com to a certain Label. If that email newsletter starts getting spammy like I may have suspected, then I can change the filter to send those emails right to my spam folder. There’s no guarantee that Gmail will support the + address forever, but its nice to use now while we can.

How do You Use Filters?

If you have any creative uses of Labels and Filters, I’d love to hear about them. I tend to sort my inbox by projects, so that all of the people that I’m working with on a project get filtered into one label. It makes it easy to keep track of what the current status of a project is and having the visual labeling in my inbox helps me out a ton.

I don’t think there’s much debate that the growing popularity of @font-face has been a strong step forward for web typography. Not only has it allowed designers previously constrained to a limited set of typefaces to be more creative and effective with their online designs, but it has also encouraged a proliferation of high-quality, free fonts available for use on websites. There are a few shortcomings with @font-face compared to other web typography services such as TypeKit – we’re limited to using fonts with the appropriate licenses, and there are a lack of multiple weight/style variants with lots of @font-face approved fonts. Even still, in my eyes @font-face remains the most cost effective and easy to manage choice for beautiful web typography.

Web Font Considerations

There are a ton of resources that can help you with implementing the technical side of @font-face, so I won’t get into those details here. FontSpring has the latest snytax for bullet-proof @font-face implementation, which is vital to ensure that your fonts are seen correctly by your visitors. I’ve listed some not-so-technical considerations when implementing @font-face in your designs.

• 1. Pick your font stack with care.

  Even though @font-face is widely supported, there is still the chance that your web fonts will not load. We can prepare for this by declaring a solid font stack that will maintain the visual appeal of our design and not break any layouts. A great example of this issue is when using a font that is relatively small compared to many default font sizes. League Gothic, a popular typeface with designers, falls into this category. Since it is a condensed, small typeface, a default font such as Arial, Helvetica or Verdana will appear much, much larger than League Gothic would have rendered if it fails to load. This can especially be a problem when working with grid layouts and large headlines. Declaring a condensed font such as Impact (while not ideal), certainly will help to relieve this issue. Take the time to explore different fallbacks, it will make a difference.

• 2. Watch your font style and font weight declarations.

  This is an important consideration when handing over your design to your client using a CMS to update content. If you don’t have bold and italics versions of the font you are embeddeding, browsers will attempt to fake bold and italics styles (similar to “faux” character settings for Photoshop users). Even if you do have the different weight of your font available, we still need to be careful. Roger Johannson from 456bereastreet.com has an excellent article about this very issue that is very complete so I won’t repeat the concepts here. The key is to declare font-weight:normal and font-style:normal; in your original @font-face declaration.

• 3. Resources for finding new web fonts.

  I’ve had such a great experience using Font Squirrel that its hard to recommend any other site for high-quality, free fonts that you can use for your sites. If they don’t have a font that you’re looking for, and you’d like to create @font-face compatible versions of a web font you own, you can use their @font-face generator. They’ll create the appropriate files and create a CSS file that you can copy and paste into your stylesheet.

  Some other great choices for quality web fonts are FontSpring, Lost Type Co-Op, and Font Fabric.

Some Fonts I’ve Been Using

Tittilium Text

Titillium Text is a modern sans-serif that will continue evolving as students attending the Accademia di Belle Arti di Urbino in Italy cooperatively work on the typeface. It works as an uppercase display font quite well. It also has a number of different weights available for free for other uses.

Download from FontSquirrel

Aller

Aller is another large, modern sans-serif family great for headlines. It has a little more of a playful character to it, which is why I thought it was perfect for a summer camp design I recently completed. Aller Display is particularly good for bold headings.

Download from FontSquirrel

Droid Sans

Since this site is set in Droid Sans, you don’t have to look very far for an example of what it can do for body copy. Google had this font developed for use on its handheld devices, and its clarity, space, and readability make for a useful and flexible solution for lots of websites.

Download from FontSquirrel

Bebas Neue

Bebas Neue (released 2010) is an updated version of Bebas (released 2005), a condensed sans-serif that is great for (you guessed it), headlines.

Bebas Neue is far better for website implementation over its predecessor if only for the reason that its size is a lot closer to standard default sizes. If the font fails to load, you’re layouts will be more in tact. You’ll see this typeface all over the place once you start looking, and for good reason.

Download from FontSquirrel