My mother recently asked me to speak to her Database Management class about the role of database design in building websites. Being the good son I am, I said yes. I then rushed into her office to try to skim read the database design basics!

I know something about databases.  But the fact that I’m not an official expert in databases, but am paid (or rather - expected) to work with them triggered a bigger concern.

Most 180 clients don’t come with a checklist of their needs, so they can compare them against 180’s capabilities. Many of them wouldn’t even know what to put on that checklist.  But once employment begins, they expect everything to work out great.

Even if they dont’ know specifically what they need, clients trust 180 to look out for the things they aren’t too sure about. Our clients are happily blessed, but rest of the world is riddled with stories of disappointment.

Web-industry clients continue to get frustrated and burned due to incautious providers taking on work too large or complicated for their own abilities.

This happens due to the ease-of-entrance to offering web creation as a service. Almost anyone can build a website now days. From lab geeks straight out of college to advertising and design agencies: many providers will add ‘web creation’ on their services list. However, they may not understand that ‘web creation’ is a huge field of sub-disciplines.

One of those sub-disciplines is bound to be remotely important. And anything important will be expected, even if their client doesn’t understand or ask for it explicitly.

The temptation to ‘fudge’ on quality is usually in areas that no one is checking: the proverbial foundations and attics of a building.

Grey areas in a project, as one could imagine, are where small design flaws can wreak havoc later on for both clients and service providers.

Therefore companies must exert equal energy into any service they offer, regardless of their client’s familiarity with those services.

This concept isn’t new. It’s basically the “do good work” principle we’ve all been taught. Google calls it “do no evil.” It is easy to incorporate into any practice by staying focused on strengths, and dropping or deferring all those other grey areas.

Earlier this year, i accidentally picked up Malcolm Gladwell’s book ‘Outliers’.

I didn’t intend to read it. Not really. At least not thoroughly. My book list already chalked full with a cannon of life-changing-you-can-do-it-here-are-fancy-statistics-to-prove-it books.

But Outliers sucked me in. It had one concept, really, that grabbed my attention: the 10,000 hours rule.

The idea Gladwell offers is this: All great people (the ‘outliers’ of each generation) have more than great genes and a dose of luck. They consistently have loads of logged hours working at their craft. 10,000 logged hours, to be specific, applied directly to the said function, job, or sport those individuals later become recognized for.

Now, it might seem ludicrous for someone to pee-their-pants with excitement hearing that they can work for tens of thousands of hours before gaining possibility of being great.

I peed my pants. 

Why? Because I want to be great at what I do. I want my work, my colleagues and friends, my company, and all our projects to be absolutely awe-inspiringly awesome! And, of course (...says the ‘don’t be so silly’ voice inside most of us) we are not awesome. We are average; above average if we allow ourselves some gratitude. 

10,000 hours is something physically attainable!  It’s a standardized goal, beyond the unattainable ‘be the greatest revolution of my industry’, which affords a much needed “keep going” mentality.

It is, simply, a goal procurable by anyone willing to apply themselves.; and even more so for persons with the flexibility to focus their efforts.

And as much as I like complaining to my wife about business woes, I can’t complain about 4200 hours logged designing or developing websites. That doesn’t include pitches, calls, emails, traveling, reporting, ideation, or any of the other work in the last 5 years all in the name of building websites. 

All artists have cold spells. I do. I ask myself “can i really ever be great at this?” “Would my life be better doing XYZ random other job?” The XYZ, of course, changes depending upon the last cool guy I had a drink with, or latest fancy new life-changing book I accidentally read.

We’ll never be great at a job, no matter how much amazing fortune we get, or talent we force into it, if we don’t log hours.

Find a talent, start using the talent, and pray for blessing as you keep doing it. That is, very likely, the oldest and simplest of work ethics. And that is what Gladwell’s book reminded me.

Are you ready to bail? How many hours have you logged at your craft?

The Brehm Center is an emphasis program of  Fuller Theological Seminary who leads an age old dialogue on the correlation between art and faith. Their thoughtfulness when it comes to the way they communicate is encouraging, and one of 180’s primary roles was putting together a plan for how to introduce them to the virtual world.

Below is a glimpse of the design process 180 lead to create the new BrehmCenter.com website.

Note: This article only covers the BrehmCenter.com design process, which is the first part of a new website build. To read more the entire 180 process, continue here.

Research

The original challenge that needed to be overcome was that what the the Brehm Center’s does is potentially hard to communicate. The goal of the research phase was to walk away with 1) a more simplified way to describe what the BrehmCenter does, and 2) a way to engage with the target audience and give them a great site experience.

180 spent 4 weeks in research mode. With Brehm’s generous permission, you are free to  view some of the findings here:

Moodboards

Next, in order to help us think more clearly about the mood we want the site to convey, we created simple moodboards. Separating aesthetic design from the content is extremely helpful (from the designer point of view) in allowing clients to articulate the more abstract emotional value they want the website to create for viewers. This is exactly what moodboards allow us to do.

We created boards with colors, fonts, and imagery on palettes which you can view here:

Wireframes

Wireframes are just what they sound like: a wire version of the website. There are no aesthetic design elements here, but just the basic content by itself. Here is the full document:

180 decided to take a slightly controversial approach to the website content: less is more.

By stripping the entrance page of everything except a single picture, we created a funnel for people’s eyes to focus on the 2 most important aspects of this (and most) home pages: what is this organization, and how can I move around?

What our design team came up with is this:

The hunch (backed up later by user testing) was: if people don’t have anything to click on, they will immediately start using the navigation. On the BrehmCenter.com home page, users will 1) read the tag line, 2) engage with the navigation.

180 then dreamed up a navigation to not only house a large organization, but to include snippets of text explaining what the organization was about.

Users will see tag lines describing each section of the website, and simultaneously read key words & language which gave users a quick feeling for what Brehm is all about.

All within about 2-5 seconds, visitors see a beautiful (& clean) landing page, get used to navigating the website, and get a basic understanding of what the Brehm Center organization does.

Frontend Design

After all the above work, everyone involved in the project had a good idea of what the actual page designs might look like.

Here is how the finished home page turned out:

Here is a revised way to have online dialogue in the “Conversations” section:

Here is what an online exhibit looks like:

Here is what mobile visitors of the site see:

And also very useful, here is a better ways for administrators to manage it all using in-page modal windows:

180 was thrilled that the Brehm Center welcomed the 180 process, encouraging thoughtfulness & creativity more often than not. They proved that in fact they are leaders in their (unpublished) goal of encouraging artists to be their best!

Please join the conversation at BrehmCenter.com, and let us know what you think!

Websites are representative of the organization that runs them. They are many times the first impression a visitor will have with that institution, therefore they need to be impressive.

Website visitors expect to see organized information that is relevant to their needs. The work required to give them that information is well worth the effort.

When visitors see slow loading websites, have a confusing site experience, perceive the content to be unprofessional, out-dated, or even not available, those visitors will connect the poor site experience with a poorly run organization. In some cases, it is true.

An organizations website, like the organization itself, should be amazing. What does amazing mean? Exciting? Intoxicating?Invigorating? Astonishing? Maybe all of them? It’s hard to pin-point what “amazing” will look like before your there. But looking back at amazing projects, they all look the same - lots and lots of effort.

“Amazing” is not out of reach, however, for any project. It just takes a lot of work to get. But once you’re there, it changes everything.

————————————————————————————————————————————————

PS - Series photography is by 180 friend & client Will Keeler, who continues to redefine ‘amazing’ to all of us.

A common thread among both humans and search engines is to check the POST date on website blogs, news, and comments.

Humans often relate the freshness of content to the organizations’ own understanding of current trends. This connection between a website and its owners does not have to be true, it is just perceived.

Also, SEO (search engine optimization) experts believe continual fresh content is one of the most important ways to have higher rankings on search engines, but only if the content is relevant to the rest of the website (Rankpay.com, 2010). If the most recent posts are not very recent, the entire site could be understood by search engines to be not as important as a competitors website.

The surest way to impress on a visitor that an organization is unprofessional is to have overly cheesy catch-phrases, misspelled words, unorganized lists, or sections of the website that seem challenging to understand.

In many cases (although not all) websites will start with well-structured professional content. But just as the company grows, the website will grow. The CEO will ask for his Blog link to be added to the home page. A new department will appear and ask for their link to go into the navigation. Thus, even new content intended to help an institution, can actually hinder visitor experiences when its addition isn’t thoroughly strategized.

Since it is extremely important that visitors have to do as little “thinking” as possible when trying to access the information they need (Krug, 2005), having the best available content writer/editor to construct and organize content in an ongoing capacity is absolutely essential.

The primary role of the website design team is to design the experience visitors will have from the home or landing pages through the rest of the site (all the way to checkout, contact, or final action).

However, without continual testing, there is no way to know what visitors are actually experiencing. These tests will allow site managers to adjust, and retest. “Adjust and retest” should be a manager motto throughout a website’s life.

It is really not much different to maintaining a commercial product, software, or even a family home. The difference is how accurate and professional is the user data being received.

A great website has professional data on visitor experiences: yearly, monthly, and even weekly. This data should come through advanced analysis of a sites analytics, and user testing with actual humans in a documented scenario.

When was the last time your company logged such visitor experience data?

Research demonstrates that slow web pages decrease a companies perceived credibility (Fogg et al, 2001). Essentially, visitors see a connection between the website and the parent organization’s ability to do business at a reasonable pace.

Amazon tested and found that increased load times of just 100ms decreased sales by 1% (Kohavi and Longbotham 2007). Even Google with it’s extremely fast loading queries, tested loading 30 results automatically (.09 seconds) instead of 10 (.04 seconds), to find a loss of traffic and ad revenues by 20% (Linden 2006)!  Similar results were found for Google Maps, and Microsoft live search (before starting Bing). Fast loading websites are proven to keep visitors from frustration, decreases their blood pressure (Scheirer et al. 2002), and can yeild conversion rates (Akamai 2007)!

Even well-optimized websites frequently have spikes that can overload the server, slow down pages, or make entrances unavailable - especially as the traffic grows, which is the ultimate goal, right!?

There is no way to guarantee fast loading websites without 1) Continuous monitoring of the server load times, and 2) Making adjustments to server and page elements to ensure faster page load times.

Resources: http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

For many organizations, website visitors will enter the site multiple times before or during a relationship with the company. Their first visit is extremely important. But their return visit is equally important.

If any of these initial visits plant seeds of doubt as to the professionalism of the institution, the visitor will either stop considering the relationship, or start the relationship in a mode of caution or anxiety.

There are 5 main website problems that can introduce significant doubts to a visitor.  Ultimately, these doubts are cast upon the business owner.

5 Main Website Problems that Inject Doubt into the Visitor

1.   A Slow Loading Website

2.  A Confusing User Experience

3.  Unorganized, Challenging, or Unprofessional Content

4.  Lack of Updated Content

5. And finally, An Amazing Website

Overcoming all of these potential “doubt injectors” is possible and important, because:

Every Company Website Should be Amazing and Inspire Confidence

We will be highlighting each of these issues over the next 5 weeks in an interesting blog series entitled, “What Your Website Really Says When You’re Not Looking.”

Simon Sinek wrote “Start with Why,” a book that shows that successful companies always find a way to connect with their clients (and employees) based on why they do what they do. The why of a company, is - in reality - more important to the world than what the company does or how they do it. This concept is summarized in this TED video called how great leaders inspire action, and I highly recommend you watch it right now.

To better illustrate this, Sinek uses the ‘Golden Circle’ of each company’s offerings. “What” the company does is the outside circle. “How” they do it is closer to the middle. And “why” is at the center.

All companies know what they do. Some companies know how they do it. But very few companies realize, let alone lead with, why they exist. Yet ‘why’ is more important by far than the what or how.

What happens when you lead with ‘Why’:

1. You have happier customers.

When you make behind the scenes decisions, you make judgements for your clients without their knowledge. There is always risk here. But you lessen that risk if your similarly-minded clients would be making the same decisions if they were in your shoes.

2. You create brand loyalty.

As Sinek noted, people purchase based on belief more than logic. Thus, when you up your price, change your approach, or start new products - your clients stay on board. They like you as much as what you offer.

3. You have more referrals.

When your clients believe in you, they tell people. It’s human nature to promote things a person cares about. Once your own clients start ‘caring’ about your organization, you’ll likely be overwhelmed with success.

4. You get rid of the riffraff.

Starting with why is risky in that you might lose potential customers: the ones that don’t agree with your basic beliefs. But that’s ok. Seth Godin reminds us in his book, Tribes that your tribe of followers doesn’t have to be huge for you to be successful.

5. You don’t lose focus

Whenever you verbalize a thought, it becomes more powerful to you. If you start advertising ‘why’ you do what you do, you might find yourself staying more focused as you remember the bigger picture.

6. You make friends.

Almost all the best friends start with a base belief of some sort. If you know what you believe, and promote it, you’ll be fortunate to have clients & colleagues as friends.

Some Bad Examples

Companies that don’t start with ‘Why’

Tivo (also mentioned above) is a great example of a company that ALL of us know ‘what’ they do. I’m not sure we even get to how, let alone why. But, their ‘what’ is thoroughly well done:

Dell also leads with their what (with a little bit of ‘how’ thrown in for fun):

http://www.youtube.com/watch?v=Spa_l_12cIw

Some Good Examples

Companies that do start with ‘WHY’

A&F knew its Why before anything else:

Kay Jewelers (specifically to keep me out!):

GoDaddy.com. They don’t connect with me, but everyone using their service knows exactly what to expect:

And best of all, Apple has intuitively led with their ‘why’ ever since their famous 1984 Super bowl commercial. This 1998 ‘Think Different’ commercial instantly connects to me:

The above image was taken during a spontaneous ‘learn to ride a skateboard’ week in our 180 office. Is it amazing? Not really. But we love learning new things, pushing ourselves, and striving to never be left behind.

180 believes everyone should strive to be amazing at what they do. Not everyone agrees, and few actually strive for it, but those who do almost always succeed. Why be anything else?

What is your why?

Recently as I was reading Jim Collins book, Good to Great I was propelled into thought. Collins’ book helped me consider the areas of my life where I can be great personally, and within that vision, the specific areas in which 180byDesign can ultimately be great.

This is a bit of a non-traditional (and longer) than most of our 180 posts, but it can be extremely useful for some individuals and companies who want and/or need to reconsider their future plans.

The Hedgehog Concept

First, I’ll summarize the part of Collin’s book that sparked my interest. It’s from the chapter titled “The Hedgehog Concept (Simplicity within the Three Circles).” This is a principle based on an essay by Isaiah Berlin.

Hedgehogs are little dudes with very simple lives. Their counterparts, the fox, are sleek and cunning, and supposedly much smarter. The fox is always trying to scheme a way to catch the hedgehog, and spends many long hours and days conniving new ways to attack.

However, the hedgehog doesn’t ever even waste one thought on the fox. While the hedgehog is enjoying his typical day, if it is attacked by the fox it simply does one thing: the hedgehog balls up in a sphere of little spikes. The fox will then retreat at once and begin planning for its next attack, leaving the hedgehog to uncurl and continue just as it had before.

Now you might ask: What does the hedgehog have to do with growing up and finding a place for yourself in life?

It’s simple, really. Unlike the fox - who is continually planning, scheming, failing, and also succeeding in his multi-ventured world - the hedgehog has created an environment which provides him with a narrowly focused yet highly enjoyable and sustainable lifestyle. The concept is fairly easy. Once you find something that: (1)  you enjoy doing, and (2) is economically sound, and (3) - this is the best part - you have the potential to be extremely good at it:  DO IT.

For you as an individual or business, the Hedgehog concept is the principle of finding an area where you can merge these three areas:

1. What you are deeply passionate about?

2. What you can be the best in the world at?

3. What drives your economic engine?

Each of the above items can individually be found in many areas of a person’s life, but when they all collide it’s simply golden.

Here is a picture by Collins in the book, using the 3 circles to create a sort of intersect where the good stuff happens:

When someone only focuses on only one or two of the above things, he or she will eventually need or want to move on to another discipline. We all know these individuals, and we have probably experienced this ourselves. Artists that passionately focus on something that makes them less money than they need to live will eventually fall into economic crisis. Salespeople who make great money  selling items they are not passionate about often die a slow painful death from a calloused heart. And even great people who are placed in one area doing the the same service as a million other people will ultimately be replaceable.

I believe that all humans are created with unique gifts that, though sometimes hard to  find or acknowledge, set them apart in a way that is amazing. Those assets were designed to give their family, company, and community something that few others can provide.

What Do You Really Want?

So the real key here is to be able to find those gifts (all of us have more than a few) that combine all of the three areas from above. I’ve created my own questions that I think could apply here: both to individuals and to businesses. In fact, I filled this out for both myself, and for 180byDesign.

Here they are. Don’t think about $$ for these, or what job you’ll be doing.  That will be easier after these questions are answered.

———————————————

1. What things am I best at?

Example: Building up businesses and people.

2. What things am I worst at?

Example: Maintaining my home, keeping up with long-distance relationships, etc.

3. What things would fulfill me most?

Note: Imagine when you’re dying and someone asks you to summarize your happiest moments/accomplishments.

4. What would make me happy temporarily?

Example: Monthly gardener, new motorcycle, etc.

5. What does a dream day look like?

Note: Not just a holiday, but if this day represented a perfect fulfilling day for you.

6. What does a dream week look like?

Note: How many days are you working/playing/relaxing?

7. What does a dream year look like?

Note: How many days will you take off and how many are you working? Will you be traveling? Etc.

8. How can I best serve God?

Note: Only if  you’re religious, obviously.

9.  How can I best serve Others?

After spending a bit of time with the above questions - you will be best able to answer 2 additional more practical questions that will ultmiately help you make your above dreams more possible.

10. How much $$ per month or year will you need to make these dreams a reality?

11. Does your current job or occupation have the possibility to help you fulfill any of the above questions?

———————————————

I spent half a day thinking through this (with coffee & a nice pipe!) so even if you are in a hurry at first, maybe think about some of these more thoroughly later.

Finding Your Perfect Patch of Universe

After answering (more or less) the above questions, you’ll want to take the Hedgehog concept, the 3 circles, and formulate what you could imagine yourself doing.

I recommend to just start thinking about this broadly. Really open the funnel to dream about positions or opportunites you never really considered. You just might surprise yourself with what you find.

I think I’ve found it myself, at least for now. I love creative directing and developing websites. And I think for 180byDesign, this has helped us clear out the side projects we’re always playing with (mobile apps, software, film, etc.) to focus 100% on what we do best: designing and building frontend websites.

Note from author:

Our 180 content editor said no one would read this article because it’s TOO LONG for today’s busy-paced lifestyle! Although she is probably right (darn her), please help me out by letting me know if this is helpful.  Commenters get a prize!

What would you like to be when you grow up?

We just created a couple of jQuery plugins in order to format dates a little easier.  Enjoy!

jDate Plugin for jQuery
This is an easy plugin that is ported from Php.js’ date() function. Basically, it mimics php’s date function taking two parameters (date format string, timestamp in seconds) with the first being the only one required. This plugin features a jQuery function for easy returns of formatted date strings as well as the convenience of a jQuery method that inserts the formatted date string into each matched element as text. If you need help with the function just follow the guidelines at php’s documentation site here. Here are some examples of use:

$.date(string format [, int timestamp]);

Examples:
$.date(‘F j, Y \\a\\t g:i:sa’);  will return =>  “January 1, 1970 at 12:00am”
$(’.date’).date(‘Y-m-d H:i:s’);  will insert the string into .date => <div class=“date”>1970-01-01 12:00:00</div>
$.date(‘m/d/Y’, 127018165); will return => “01/09/1974”

Download: jDate.plugin.tgz

jStrtostring Plugin for jQuery
Like it’s big brother, jDate, this plugin is a port from php.js’ strtotime() function. It acts just like the strtotime function in php taking two parameters with only the first required. It is used as follows:

$.strtotime(string time [, int now]);

Examples:
$.strtotime(’+3 weeks’); => timestamp in seconds exactly three weeks in the future
$.strtotime(’-1 year 2 days 7 hours’);
$.strtotime(‘now’);
$.strtotime(‘last Monday’);

Used in conjunction with jDate above:
$.date(‘F j, Y’, $.strtotime(’+30 minutes’));

Download: jStrtotime.plugin.tgz

Here at 180 we have developed around 4 websites with Drupal, 10 websites with ExpressionEngine, maybe 15 with Wordpress, 20 with CMSMadeSimple, and another dozen with random commerce systems. What we have found is that ExpressionEngine is by far is the most flexible as a short or long term solution.

Here is random example of developing a simple 5 page website with no addons:

CMSMS = 5-10hrs
Wordpress = 5-10 hrs
EE = 10 hrs
Joomla = 20hrs
Drupal = 50 hrs (drupal is very very powerful, but just setting it up is a headache)

But here is the beautiful part about ExpressionEngine: What if the client wants a 5 page website with blog, cataloged portfolio, heavy event management, and simple commerce system?

CMSMS = 50+ hrs
Wordpress = 70+hrs
EE = 30 hrs
Joomla = 60 hrs
Drupal = 100 hrs

And if you add everything above + registration-type member management:

CMSMS = 70+ hrs
Wordpress = 80+hrs
EE = 40 hrs
Joomla = 65 hrs
Drupal = 110 hrs

EE, Drupal, and Joomla come with this out of the box. WP does too, sort of , but it takes a lot of hacking to actually make it so registered users can do anything useful besides just adding posts (for example - if you wanted members to be able to speak to each other, upload/download files, etc).

I’m really not making this up: we built this community site in Drupal 2 years ago in around 150 hours, and a similarly powerful Expression Engine site just 5 months ago in around 35 hours. Both are fully updated by clients all the time, have advanced event management, member management, etc.

That’s why we have actually started charging clients MORE for non-expression engine projects.

Expression engine = What 180byDesign loves!

p.s.  Thank you to the WCIU.edu team for forcing us into the Expression Engine world. You’ve made our lives that much better.

Website: http://www.SoundArtLA.org
Client: Sound Art; Los Angeles, California.

Fun, energizing, exciting, encouraging: everything 180 hopes for in a new client is what we found in Catherine Goldwyn and her entire team at SoundArt!

So our ultimate goal with the new SoundArtLa.org website was to simply reflect their vibrant personality and passion for training and building up inner city Los Angeles youth.

The experience we envisioned for SoundArt’s website is unique because their organization is unique. They teach rock music to inner city kids, by classically trained musicians!

As Catherine explained to us, the same values in teaching violin and piano at a young age apply to any instrument - so why not use a medium that kids can get excited about? Their kids look forward to lessons, and when they have the instruments - they practice at home too!

So we felt the best way to direct the site visitors is a linear “storyboard” walk through to explain to visitors the Why, What, and How of SoundArt. First you see the Our Vision page for the quick “Why,” then on to the Programs for more “What” and then to Instructors for “How.”

There is still a full navigation at the top for the more traditional “choose your own adventure” way of navigating. But our user testing has shown us that most users really do follow the storyboard for at least 2-4 clicks before moving to something that piqued their interest.

All images are their real kids, the entrance page included. And all the fun page transitions and drop downs are still deep-linked; you can hit the back button or refresh the page without jumping back to the beginning.

We also had custom written content for each page’s main descriptions, and the initial 5 blog entries.

Add in a slick Mobile version and the fact that the main site is even optimized for old IE6 browsers, the SoundArt site bridges the gap between the young and the mature.  Amazingly, SoundArt does this very thing between the at risk youth of Los Angeles and professional musicians.  We are honored to have worked with them!

So please check it out: http://www.soundartla.org, and be sure to come back to comment!

This post is the Part 3 Finale in the series “A Picture is Worth 1000 Words” on the essence of good design.  Missed it? Click here for Part 2.

Spending your hard earned money on a website design only to later cut corners is neither smart nor wise. Designed websites are sometimes thought of as new rugged trucks ready to tackle the off-road experiences of online marketing.

On the contrary, professional websites are more like finely crafted works of art customized to tell your story and to tell it well. If you wouldn’t rely on a physical mentor to coach you into shape for a marathon only to eat fast food during the race, then you probably shouldn’t rely on professionals to craft a site for your organization only to use it however you see fit.

You’re probably really good at the work that you do, which is why your business is able to afford a great site. So be ready and willing to allow others who are good at what they do help you communicate your vision to the public. If in doubt ask a professional designer about the changes you want to make to your site. Run the idea by several people and make sure it fits in with the overall message of its design before completing the last step of actually uploading the content. This is a great practice to get used to!

The strongest aspect of your site is the design—the way your site is planned to speak to those who engage it. The text on the site only serves to reinforce that primary message. Seeing your site in this light can help you trust in the purpose of your design and rely on your site’s presence over the words that you choose to place on it. Doing this can create a powerful impression that might lead each visitor closer to taking action, and this, of course, is always the end goal.

At 180byDesign we specialize in designing beautiful websites and turning your business around by better communicating who you are. That’s our design; our purpose. We only hope this brief message will help a little more to do just that.

This post is Part 2 in the series “A Picture is Worth 1000 Words” on the essence of good design.  Missed it? Click here for Part 1.

So. You’re not a designer. What should you do?

The first thing you want to do is make sure your vision for your company is clearly articulated before ever starting the design process. It doesn’t need to be a 100% completed version of your vision, but the foundation must be laid and enough direction given that the designer can effectively and efficiently plan out your site. Starting with a bad design vision (one that fails to communicate who you are) will only confuse whatever else you plan to place on the site.

Second, think twice about the content you want to place on your site. In most content areas there’s room for images. When it comes to communicating, the use of good, professionally-prepared images or graphics can explain what you’re getting at much faster than your words. Images are valuable because they tell a more personal story.

Third, be conservative. Think of it as speaking in a one-on-one conversation. Remember that whatever you place on your site, whether images or text, is communication. It’s tempting to post content without realizing you wouldn’t say the same thing if you were speaking to your visitors face-to-face. Use this opportunity to be genuine, authentic, and compassionate toward the needs of your guests. You’ll often find that the reaction is mutual.

Stay tuned for next Thursday’s installment: How can I utilize expert advice? Design 103.

This post is Part 1 in the series “A Picture is Worth 1000 Words” on the essence of good design.

Design, by definition, is the purposeful planning and communication that expresses the objective thing that is your business or organization. More simply, design is communication purposed for a desired outcome. It is the clothing of your business.

One of the most common downfalls of any site with great potential is to flatten its communication. Communicating never comprises just words. In fact, words are one of the worst ways in which to communicate!

Think about your everyday living experience. Communication comes from all sorts of directions. It is received through the five different channels of your senses. Words that you see are only a small fraction of that overall input and, not to mention, they’re not really natural. Your brain has to go through countless conditioned steps of interpretation in order to construct a thought or scene from words, whereas a beautiful, crisp photo of a peaceful meadow is understood naturally. Upon seeing the image you immediately feel something for that scene, whether good or bad.

Design is an art and a science. It concerns engineering the communication of your site so that it will inspire within your audience the feelings and thoughts that are wanted. That is, with as little effort needed on behalf of your guests.

Trusting your design to do your communicative heavily lifting can not only save you time (and money!), but it can also help ensure that your site stands out from the rest, especially against your competitors.

Before placing any new words on your site, first ask yourself: “How does my current design communicate what I want to say?”

If you’re not sure your design is meeting your needs, check back next Thursday, April 1st for the next post in this series: But I’m not a Designer! Design 102

Trust. There’s no better philosophy for adding content to your site than the mantra: “Use words when you must.” Trusting in your design to speak for you is the best practice when it comes to site content.

Take, for example, this image of the helicopter disrupting the sky with its power and almost mysterious elegance. Your imagery and overall design process should interrupt your site visitors and make them feel something about your company. It should be striking and commanding. It should communicate more than words.

Who you are, what you do, why you do it, and where your passions lie should all be evident at some level in the design of your site. Showing your users your values through visual cues will invite them to become a living, breathing part of those values. Words are factual but visuals are engaging. This is what design is for.

The next few blog posts will focus on these questions:

Why is design important for my site?

I’m not a designer. What can I do?

How can I utilize expert advice?

When this blog series is complete you will feel more equipped to use the best design resources for your company. You will be well-informed and ready to trust your designer to help you develop the highest quality of content that your company deserves.

And thanks to Will Keeler, we hope to show users the power of great imagery.

Website: http://www.CudaPro.com
Client: Kevin Sena, Birmingham, Alabama

Frequently our clients ask for imagery that (to them) makes perfect sense to have on their new 180 by Design website. But often, their reasoning has little connection with the end goals of the website.

“I really like the color green because my grandmother had a green scarf.”

“I like the idea of the sea being on the website. I think that would communicate what I represent.”

In situations where clients are not familiar with how to communicate “What they do” through design, we tend to recommend for them to step away from their ideas and imagine how someone with a different perspective (in some cases: the whole world) might view the website.

Poor Design Communication

http://www.webpagesthatsuck.com/ (Snapshot taken March 18th, 2010)

The imagery on this site begins to almost makes sense after a few minutes of concentration. They talk about websites that suck. Perhaps it could possibly make sense to have a baby sucking a pacifier right where we would (usually) place a logo. The first picture we see is of a guy who looks like he’s about to barf. He is obviously gagging because he is looking at websites that suck.

However, the first glance of these images, along with the tag line “On our 14th year of sucking,” gives a very strong impression that their own website is the one that, well, might make their own list. [Legal Notice: In no way am I outright saying that their website does, in fact, suck. Just implying.]

Great Design Communication

http://www.stoffers-steinicke.de/ (Snapshot taken March 18th, 2010)

This Non-English website demonstrates just how well thought out imagery and an overall aesthetic can communicate so much in such a short time.

You probably got the impression that this German website is for a creative company. The variation in colorful objects against the far wall, the empty table with apples and a Macbook: they are almost beckoning clients to employ them in a new project.

(If you actually speak German you will get the added benefit of knowing they are, ”not only good but also very fast.”)

It is possible their potential clients will feel comfortable with their company within the first 2 seconds of entering their website.

Great home pages should have images that add function and value. They will communicate clearly and provide a comfy welcome mat to the visitor. Any other images will likely be distracting and unnecessary.

Many websites are like those “Choose Your Own Adventure” children’s books. At each stage of the story you make your own decision about where to go next. But even those children’s books make the choice clear: Choose to follow the Ninja and see what he’s up to: Turn to page 48. OR Follow the Gingerbread Man and learn how muffins are made: Turn to page 133.

Many home pages don’t offer any choices. Instead, they just leave the visitor staring at a chaotic screen with no clear direction on where the owner intends for them to click next.  This is Mistake #2.

Great websites will give clear recommendations for a range of different types of visitors.
“New to our company? Here is what we do.” “Already know about us? Would you like to skip to our contact information?”

These questions do not have to be stated so obviously, but can be asked through design.

Bad Direction:

http://www.yournew.com/ (snapshot taken March 18, 2010)

Seeing this home page is like walking into a lobby and having 20 people standing around, each quietly whispering completely different questions, simultaneously! You walk in, and what do you feel? You’d like to walk right out the door. The design of this home page does nothing to welcome the visitor and show them around.

Notice the overload of small print questions asked on the page. “Check availability.” “Need a website.” “Ask a pro.” But the questions themselves aren’t asked in any particular order. What is the point? What action are we supposed to take?

Good Direction:

http://www.squarespace.com/ (snapshot taken March 18, 2010)

Squarespace has done a great job giving multiple audiences direction – each of whom will most certainly have different intentions when entering the website.

For a person who already knows Squarespace’s services there is a clearly-placed “try it free” button in primary visual space. There is also a “sign up” button that is seen within 2-3 seconds of visual engagement.

For a person who is unsure of what they do, the most primary focal point on the page is the large text which includes “exceptional websites.” This instantly clues us in to the fact that they are involved in making websites happen. To learn more, there are clear 3 columns to choose from: “What is it?” “Who is it for?” “Why use it?” There is also a nice large “Learn More (Take the Tour)” link.

Here is a great example of clear direction for visitors. It even includes instructions that apply to visitors with different needs.

The best websites make a visitor’s choices so easy that they won’t realize they even had a choice. Instead they will simply exit the site after having their unique needs met.

A company’s purpose must be vividly clear.  When a visitor arrives on your home page, they must be immediately drawn in to your company’s unique specialty.

If the design and imagery communicates your company’s purpose, it doesn’t have to be repeated through words.  But it rarely hurts to “say it” twice!  Make your message obvious.

Mistake #1: Under-communicating to your site visitors and making them guess your company’s purpose.

Your message should be blatantly ingrained into a visitor’s train of thought.  If a visitor glances away from your website, or closes their eyes after first seeing the home page – they should immediately remember the main idea.

Poor Communication

http://www.reddingcollectives.com (snapshot taken March 5th, 2010)

You might think you know what reddingcollectives.com focuses on by this snapshot – but believe me you don’t. Not until you’ve heard from narrator Baron Galocy speak to you for about 25 seconds will you understand that you’re actually here for news about marijuana.

Our friendly on-screen narrator has to explain what the site is about because, you guessed it, that purpose is not readily apparent.

As a news website the best thing he has to offer is NEWS, yet interesting enough – you won’t find any marijuana news until you’ve journeyed a few clicks into the website.

http://www.bigcartel.com (snapshot taken March 5th, 2010)

Indie Labs’ bigcartel.com website is, as the subtext reiterates, a “simple shopping cart for artists. It’s easy to use, customizable, and awesome.”

And this website itself is (indeed) “easy to use and awesome.” The message is clear and distinct. They have a niche market, yet somehow made a design that is large-audience accessible.

They have summarized the 4 things you could ever want into 4 links at the top, the last being “Pricing + Sign Up” – a clear call to action.

BigCartel has done most of the heavy lifting when it comes to selling the product.  The only thing left to hinder sales is an artist’s cheap pockets!

Make sure that from the start your website message is clear, distinct, and to the point.

Website: http://www.harpjas.com
Client: Julie Ann Smith; San Diego, California.

Harpjas.com is the promotional website for Julie Smith, the principal harpist for the San Diego Symphony.  To date it probably turned out to be one of our better projects. Here is a little ditty about how we built it.

Just prior to beginning Harpjas.com, 180 began implementing the Kaizen method to revamp our entire web building process - in the hopes of making better websites, more efficiently.

We had decided to start each project with lots more research and brainstorming in the beginning, dreaming as big as possible - stretching ideas to their max - all before even creating a sitemap. All discussions began and ended with Julie’s end goal and secondary goal in mind. Those goals were, to us, primary - and we really tried to subdue any idea that could hinder success.  Of course, our ultimate intention was to make her a rock star!

Those beginning conversations included everyone on our team. This sounds so elementary, but many web teams forgo having developers and designers talk before starting!  Those meetings led to a sitemap and entire site building game plan (a bit flexible of course) that Julie approved before beginning. Julie was very trusting through this process!

During design, we decided not to use Julie’s previous logo, which was actually fairly nice. Instead, we felt that the best branding for Julie would be Julie - her picture, music, and name all packaged together as “someone who will make your event amazing.”

Our hope is that people remember her name and persona more than anything.

Fortunately we had amazing imagery (by Darin Fong) shot specifically for the website. We used the images like a foundation for the rest of the content. We thought: “Why have an interior page full of self portraits?”  People really want to see Julie’s beautiful composure from the very start.

Very few people enjoy websites playing music automatically. Yet Julie is a very good musician, and we wanted people to play her music. Thus, what we ended up incorporating was a large “LISTEN” button on the very first page. And this combined with the smooth page transitions means that people can listen to carefully selected audio snippets throughout their entire site experience.

One thing we wanted to do is use Julie’s impressive event engagements to promote her - and traditional table calendars wouldn’t do that. Big square calendars are just always going to have lots of empty boxes even with a full schedule.

Instead of just styling the website for mobile content, we decided it would be just as easy to display similar content designed specifically for mobile browsers.

It was a fun and already successful project. 180byDesign recently won an award for it.

The final step was kick starting her social networking.

So please checkout her website: http://www.harpjas.com, maybe follow her on twitter or fan Julie on facebook.  But be sure to come back and tell us what you think.

Website: http://www.WCIU.edu
Client: Kevin B., Web Revision Project Manager; Altadena, California.

William Carey International University is a distance learning graduate school in California.

Along with designing and developing the website, 180 was hired to design their identity.  Our biggest challenge on this project was conveying a very complex ideology and strict guidelines in an accessible and memorable logo.

Other challenges, which are part-in-parcel of working with larger institutions, was the large amount of needs that had to be fulfilled by the website.

To keep the click through process simple for first time prospective students - we consolidated the returning visitors’ many needs into an easy login system with site wide menus.

William Carey currently has students and faculty accessing their website for information all over the world. And so, an important part of the project was to ask—via online surveys—past and current students what they would have liked on the website when they first visited.

We followed up after completing the project with user testing to make sure the website communicated well to new visitors from different cultures.

If you visit WCIU.edu, please come back and comment. Feedback is welcome.

Let’s start with when video should not be used. First, many assume video will add flare to their website, making it more hip and up-to-date. Well, video in and of itself is no longer impressive. The internet is chock-full of videos; it has become commonplace.

Second, creating a professional, effective video is challenging. It takes skill, experience, and strategy. So, unless a video is professionally made, it probably should not be included on a website.

Third, video should not be used simply because it is offered. Many website designers will include video as a part of their design package. Just because it’s an option, does not mean it’s desirable. It’s like buying a hot dog at a ball park, even though it’s an option, you may want to pass on the relish.

Now, when should video be included on a website? First and foremost, it must serve a purpose that is best served via video. For instance, customer/client testimonies praising a product or service is much, much more powerful on video versus mere text. Watching and hearing a real person praise a product or service is profoundly more powerful than merely reading their words. A genuine human being is always more trustworthy and convincing than written text.

Second, a video must contribute to the overall purpose of the website itself. For instance, if a website exists to help customers utilize a product, then a “how-to” video is practically necessary, e.g., the makers of an exercise machine demonstrate via video how to safely use their product.

Third, video ought to be included when it adds unique content to the website. A musician may want to include concert footage or a church can exhibit clips of their Sunday service.

Fourth, video can tease the viewer, peak their interest, whet their appetite. Just as movie trailers tease audiences, a website video can present a product or service in such a way that the viewer gets excited and wants more. Through motion and light, video brings energy and life to a product: slow-motion footage of a car making a tight turn on a dessert highway. And video adds warmth and authenticity to a service: the genuine smile and warmth of a doctor advising a patient.

By all means, this is not an exhaustive list. There are just as many reasons not to include video on your website as there are reasons to include video. In most cases, video will simply undermine your website unless it is strategically and professionally produced. Many claim to be video professionals simply because they own a camera.  Be smart: request samples of their work and ask tough questions like why you need video in the first place. That is the ultimate question and you’ll be surprised as to how few people have a solid answer.

So how do we build new website?

Off to a Great Start

After a client contacts us, from the beginning we start thinking about how we can increase value for that person/business. We send them a list of questions like “Tell us more about your brand, “What is your end goal,” and “What differentiates your business from the rest.” We want to make a website that differs from the competitors websites. If that client doesn’t have competitors (which would be extraordinary), we still want to make sure the website will make an amazing impression on its visitors. And to do that, we need the client to think critically about how they can be set apart from the rest.