Inmark Packaging located in Atlanta, Georgia is a perfect example of a longer engagement for our team. We began with a Discovery Phase in Jan 2010, and the project officially kicked off one year ago this month. The scope of work spans 9 websites across 4 different divisions of the company, focused on both Retail and B2B customers.

Long engagements take a tremendous amount of planning, strategy & heavy lifting. It also requires our team to be patient through the process, motivated and focused on the end goals. We like results, and seeing the fruits of our labor with engagements like Inmark’s is a true test of endurance and organization.

Here’s a peak into this holistic solution we’ve been building.

Identifying & Planning the Big Picture

Inmark is an established company of 35 years, with an existing customer base that extends Internationally. Yet, they also have untapped markets with tremendous opportunity. Through months of research, analysis and brainstorming, we finalized a plan to build 9 different websites (focusing on different markets) coupled with a CSR tool and custom Content Management System. All these solutions tie into their new Enterprise Resource Planning system, a multi-million dollar investment that will dramatically change their business’ operations.

Different Audiences + Different Needs = Different Websites

Corporate Re-Branding & Division Sub-Branding

Brand cohesiveness across all 4 divisions was imperative. There needed to be a common element, yet possess a uniqueness to differentiate them. We used color + iconography to embody Inmark’s International outreach and emerging markets.

Asset Creation & Art Direction

Our creative team works with a variety of photographers. Sometimes clients have their photographer of choice, and others lean on us to recommend and coordinate this effort. We had the great pleasure of collaborating with Don Matter in Atlanta. We were the bridge between client and photographer to assure style and composition aligned with the big picture.

Designing the User Experience

We’re heavy into the development phase for 4 of the 9 websites currently, looking to roll these out steadily this Fall. We targeted the B2B websites first to learn about their existing customers, and then apply this valuable knowledge to the new customers targeted within the Retail market.

We constantly remind ourselves that “we’re not the user” in our web persona development. By getting in the heads of Inmark’s existing customers, we began to understand the industry, needs & behaviors of these users. Even though the actions of the Retail audience will contrast those of B2B, we inhaled critical knowledge about the world of packaging and Inmark’s own products &  services along the way.

Rigid Container Packaging division’s homepage

Custom Content Management System + CSR tool (Customer Requests, Customer Mgt, Forums, Knowledge Base, Live Chat)

Complexity takes Time, Energy & Resources

Our long and complex engagement with Inmark exploits the very uniqueness of Caxiam Group. We helped define their problems, set a strategy, plan, organize and build 9 websites targeting very different audiences. We’ve become Inmark’s greatest ally in utilizing the web to solve business problems and amplify their brand. That takes a firm with a diverse palette of talent that can understand the challenges of mid-sized businesses and remain highly focused on the end results.

Does your business have an overwhelming challenge that needs a web-based solution? Not sure where to even begin? Give us a ring at 407.838.3158 or Contact Us today. Lets see if we can help you out!

Though the conference certainly appeals to photographers, the workshops, classes and expo focused on a wide range of Photoshop fundamentals, resources, tricks and new features released in the latest version (Adobe CS5). Regardless of your craft (Graphic Designer, Web Designer, Print Designer, Retouching Artist, etc), there was opportunity to sharpen your Photoshop skillset and therefore become a more efficient creative resource for your clients.

Plus, it was just cool to be around thousands of other Photoshop geeks. Some of the best gurus in the world walked that convention center – a very humbling experience in itself.

Here are a handful of observations I took away from Photoshop World 2011 in Orlando!

#1 – Shortcuts, Shortcuts, Shortcuts

Shortcuts are a wonderful thing. Just as websites try to eliminate clicks with clear hierarchy and organization, shortcuts in the world of software also help eliminate clicks & increases user proficiency.

Julieanne Kost held a Creative Composition session and was rattling off shortcuts faster than I could write them down! Here are a couple new ones I learned (note > these reference a PC keyboard):

• X KEY = Toggles from Foreground to Background color
• ALT + RIGHT MOUSE drag Left/Right= Adjusts Brush Size
• ALT + RIGHT MOUSE drag Up/Down = Adjusts Brush Softness
• You can duplicate a mask in the Layers panel by simply dragging it onto another layer (holding ALT key)

#2 – Black and White Photography doesn’t stop at Desaturation

I feel slightly embarrassed admitting this, but I thought B&W photography was simply about going to the menu Adjustments > Desaturate and Voilà!

That’s it…right? Shame on you Eric.

Adding a Black & White Adjustment layer is just the beginning. Though your image looks b&w on screen, you still have the ability to tweak the color in the image. Darken the blacks, lighten the whites, tweak the reds, yellows, etc.

If I had a penny for every time I heard “adjustment layer” and/or “channels” throughout those 3 days, I’d have enough coin to buy Starbucks tomorrow morning. It’s obviously a very powerful aspect of Photoshop and the pros are evangelistic about it!

My dog Yogi helped me exaggerate the technique above. Isn’t he handsome?

#3 – Start shooting in RAW

I’ve a novice photographer, so again, I’m ignorant to these types of details. I’m not going to list out reasons WHY you should (I’ll let you Google that), but a common process I kept observing was the ability to take a RAW image and directly edit in Adobe Camera RAW. This was extremely beneficial while creating Smart Objects within Smart Objects.

Note to self: stop shooting in JPG format

#4 – Extracting hair is NOT a mystical technique

Extracting people’s hair from a background can be one of the most difficult, and infuriating, techniques to master.

Using REFINE EDGE is a great start, but the steps after refine edge are where the magic happens. Pretty much every website we’ve built, we’ve needed to extract hair from a stock photo for compositing into our designs. Next time I’ll certainly feel more confident that it can be done while retaining supreme detail in those curls, waves & little frizzies.

This session with Ben Willmore was packed! Understandably so.

#5 – 3D capabilities are extremely powerful

Wow. This is one area of Photoshop that I need to become more acquainted with. From logos to headline text, the tools go fairly deep in allowing you to stylize and customize your design.

The Expo’s floor had ongoing sessions – non-stop information!

#5 1/2 – Protect your laptop’s Power Adapter pre-conference

Thanks to my other dog Klondike, I was 100% reliant on my battery life for Day 1. Have a backup!

(if you have a teenage dog with an appetite for wires)

My MacBook’s Power Adapter – KLONDIKED!

Export Solutions tasked our team with updating their Web presence. This required a new front-end design, a new back-end Content Management System, and integration with a third party e-commerce system. After completing our recent launch, we’d like to share the results of our team’s hard work.

Design

One of the challenges was educating visitors on exactly what Export Solutions does. The company has always contended with a certain level of confusion from prospective customers on exactly what they offer. We aimed to – upon first arriving at the site – immediately answer 3 very important questions as clearly as possible:

1. In general, what do you do (the big picture)?
2. Specifically, what products and services do you offer?
3. What companies have you helped in the past (to communicate credibility)?

Careful consideration had to be made to type of imagery chosen to not confuse the message of what their core competencies are and what they offer.

For the design, we wanted to show the client a few concepts – each with a very different look and feel – to gauge which direction best spoke into their business. We showed the client two initial concepts to kick things off:

Concept 1

Concept 2

After review and discussion, we discovered the client preferred more of a light-on-light color scheme, and a layout that was more traditionally corporate. We returned to the drawing board to produce the following, which we offered with a variety of accent color options:

Concept 3

With some minor tweaks, the client was extremely happy with the results and we received an enthusiastic approval to move forward with development.

Site Development

There are several key areas of the site that are custom designed and developed for Export Solutions needs. Here are a few highlights of what we built:

Products are presented in a list/detail view. Details include description, technical specs, sample pages, and pricing and purchase information. All are client managed and tie into a third party e-commerce system.

A full list of clients that have worked with Export Solutions is maintained in the CMS and presented in a visually pleasing format.

Industry news: this is built automatically using various industry RSS feeds, as well as any articles the client wishes to add manually themselves.

Content Management

For content management, Caxiam Group turned to the excellent Contao CMS. In addition to its well-written core, solid development framework, and great performance, the Contao CMS also allows us to create a highly-customized back-end user experience without the cost of a fully-customized solution. With each site we roll out, we discover more and more ways to tailor it to our specific needs. Here are a few of the customized features we built for Export Solutions:

As opposed to wrestling with a cumbersome, all-encompassing WYSIWYG editor or shoehorning everything into a customized “blog post” format,  a series of custom-built modules gives the client direct access to manage various site features, each with a uniquely tailored interface.

An example of editing a custom module. Here, the client is able to manage the clients that appear on their website, choosing a name, link, logo, a toggling visibility options to control appearance on various areas of the site. On the frontend, this information is automatically formatted and images are resized on the fly to maintain a consistent look and feel.

Conclusion

We really enjoy working with Export Solutions and appreciate their business. We hope the results of our collaboration reflect our fruitful relationship.

Great quote from Charles Eames.

When executed in a consistent manner, those eloquent details in a design can become a voice to your users. ”Hey, we’re glad you found us. Your user experience is important and we’ve gone the extra mile for you”. Those details can:

• Enrich the overall presentation of information
• Facilitate further understanding of hierarchy & functionality
• Entice a user to explore content
• Keep users (customers) coming back to your website with a deeper appreciation of your product or service

Here are a handful of some delicious design details I’ve stumbled upon lately.

Google Search Results Paging

The “o” above the current page changes from Yellow to Red. Could they have simply left “22″ black and bolded for page indication? Of course. But, they didn’t.

Tinder Navigation

Madebytinder.com‘s very top navigation (the color swatches below) swaps the background color of the page. This isn’t earth-shattering functionality by any means, but the detail comes on the mouse hover state. The color swatch has a nice rollover movement, and the increased opacity of the underlying shadow gives it life and depth.

CNN Pull Quote

Extremely simple, yet effective. Love the styling of the graphical quote aligned bottom right providing the text with the perfect padding.

Facebook Loading Sequence

I’ve seen some agonizing and bloated pre-loading sequences during my days as a designer and developer. So, when I come across stripped down versions that are effective, I take notice.

Facebook has a nice touch to theirs. It uses basic rectangles, and displays them directly to the right of the option a user chooses.

The details of the sequence are compact, clean & light.

San Diego Zoo, Polar Bear Plunge

A complete 180 when it comes to pre-loading sequences in comparison to Facebooks. San Diego Zoo’s Polar Bear Exhibit is a rich experience of educational material & games.

When navigating from section to section, this preloader comes and goes so quickly that some awesome detail is probably missed (consciously). Look closely at the yellow/golden bar and how it moves left to right BEHIND the frozen snow directly above. What a subtle touch, providing great 3d perspective. I also love the shadow the overall bubble makes on the snow covered ground below and the font choice.

Kontain’s Sign Up Screen

The colored bands in the bottom left and top right align in proximity with the colors of the forms (orange = username, green = password) on Kontain.

These background images provide a fluid flow of color (from left to right) as a user submits information (from left to right). Slick.

BNET Header & UI Elements

I admire BNET.com‘s overall look and feel. Maybe it’s because I love green, or maybe it’s because of the site-wide consistency of little abstract elements sprinkled around the interface.

Check out the very top of their website where they feature articles. The details popping out at me are the exceptional usage of gradients, and slight embossing that helps separate each article. The little plus sign indicates open/close functionality and the type has great contrast from the background.

That plus sign then changes appearance once the article preview is opened (below). And the article name (“The 7 Interview Questions You Must Ask”) is reiterated, larger and in a different font. There’s also a subtle border to the entire box differentiating itself from the elements underneath.

They also use this little arrow-cutout (for lack of a better term) throughout the body of the pages. It’s a prevelant feature to their overall look and feel – and they’re consistent about the treatment for the most part (the angle of the shadows changes occasionally).

Porsche Panamera

I wanted to save this website till last, as it’s the zenith of my examples of exceptional design detail. I could highlight over 100 features from this site because it’s truly remarkable. It was almost sensory overload from a designer’s perspective to see how eloquently everything came together.

So, if I had to choose just ONE detail from Porsche’s site, I would go with this rollover treatment for it’s “Next” button.

The OFF state…

…and the ON state (below) has a beautiful treatment and provides the user with “what’s next?” through some intro verbiage. The smoothness of the animation really makes the detail when navigating “Back” and “Next”. You must see it in action.

Could a basic rollover treatment worked in this area of the site? Of course. But would it be as engaging? Would it motivate users to keep clicking and inhaling the Porsche brand? A small detail that could have a serious impact.

At Caxiam Group, we’re consistently striving to go the extra mile for our customers. When we say “we’re all about the details“, we truly take that to heart. Enrich the user experience, provide quicker understanding of hierarchy & functionality, entice users to click and keep them coming back!

Well executed design details can make a good product great, and that effort up-front can have a major impact for your audience in the short and long term.

Learn more about our Branding & Design Services and thanks for reading! May the details be with you.

Since that time the site has evolved into a comprehensive resource for people to find true meaning and happiness in their lives, and Caxiam Group’s relationship with Paul has evolved into that of a true friend to the team. We are grateful for the opportunity to work with Paul, and are proud to present some of the results of our relationship.

Custom Design

It was important for us to create a design that matched Paul’s message. We shot for a look that was calm, light and uplifting, while at the same time remaining clean and easy to navigate. Here are a few screenshots of some key areas:

Paul’s Home Page acts as a portal directing new and existing visitors
to the areas they are looking for.

The “What Is It?” page sums up the purpose of the site to new visitors.

We created a custom Flash assessment to help new visitors determine
where they are in the Sacred Path, Joyful Journey process.

WordPress Integration

Working on Dr. Paul Dyer’s site has presented some unique challenges that motivated us to learn the inner workings of WordPress’s API. Much of the site is driven on custom programming elements that we feel really stretch the capabilities of WordPress as a CMS platform. Here are a couple examples:

In addition to a custom, tabloid-style layout, custom queries were relied up heavily
to pull supporting content in from other areas of the site.

Paul offers tools to help users along with their Sacred Path, Joyful Journey process. These tools are categorized under one of the three stages of the process, then further categorized by type of tool. Each type is marked by an icon, offering users a clear visual indicator.

Admin Interface

As the project evolved, it was clear that in order for WordPress to continue to be an effective solution, we needed to expand the capabilities of the platform – content no longer fell into the simple post vs. page model. In this regard, the More Fields plugin has been vital. Here’s how we were able to leverage it:

Custom Post Types

More Fields allowed us to create additional categories to organize content. No need to wade through hundreds of posts – Paul’s content is neatly separated into a set a several categories:

Custom Content Boxes and Fields

WordPress’s support for custom fields is a nice addition, but it’s out-of-the-box interface tends to be unwieldy and unintuitive for client use. More Fields allowed us to present custom fields in a clean interface with professional-looking fields that could be logically grouped into collapsible boxes. Additionally, it allowed us to hide WordPress elements Paul didn’t need to use, keeping things uncluttered and relevant:

To top things of, we also made use of the Admin Menu Editor plugin to more logically rearrange and organize the WordPress admin links.

It has been announced that WordPress 3.0 will offer support for custom post types out of the box, so we look forward to trying it out and seeing how the two solutions compare.

GOOD.is may be one of the best organizations when it comes to infographic design. There’s some top notch stuff there, and I could spend hours browsing through their archive.

Recently, I found some fantastic SEO infographics on Elliance’s website. Whether you’re an SEO expert, an ameatur looking to boost your knowledge, or know nothing about how Search Engine Optimization works – I think you’ll find the below infographics helpful and/or interesting.

Also, check out this blog post on SEOmoz. This “4 Essential SEO Infographics” is a good read.

SEO Factors contributing to optimal rankings

Long Tail SEO

(Long Tail – what’s that?)

The Algorithm

Organic vs. Paid

Ecommerce SEO tips

Search Engine Click-Thru Behavior

Our Internet Marketing team would love to educate you further on SEO importance and how it can benefit your business. Learn about Caxiam’s Search Engine Optimization services.

Thanks Elliance – very inspirational stuff guys! View more infographics from Elliance

The software keeps me humble with its vast complexity, and there’s just SOMETHING about watching a concept come to life that brings an indescribable sense of accomplishment. I do believe if clients witnessed my energy level during a “cranking night” (that’s a 2E reference), they might begin to look at me differently.

On February 19th Photoshop turned 20. When I first discovered the program (version 4.0 to be exact) it had been around for 10 years. It was one of the first software packages that my creative soul quickly identified with while studying Mechanical Engineering. Woah, what? Yes, Engineering. Thank goodness I trusted my intuition back then. Don’t get me wrong, the Engineering field is highly respectable and there are some super smart people in that field. However, I would be lost and have little drive without this industry.

A one time colleague of mine over 8 years ago described his Photoshop love in 3 effortless words…

“It’s like therapy”

He was right. For someone to lose themselves in a computer program for hours means focus. Focus means a clear head, a cleared head produces work (in our case at least). Once the swirling ideas in our conscious (and subconscious) reach the Photoshop canvas and we’re at a logical break point, our deeply rooted imagination itch is brought serenity. We can step away from the screen and simply feel, better.

Photoshop is a constantly evolving tool for creative professionals that has kept me on my toes and consisently provides new ideas, tips and methods for accomplishing today’s web, video, print & branding challenges. I believe even the most skilled Photoshop users in the world are still learning on a periodic basis. The program is deep, like my love for it.

Anyways, enough of this love fest before my dogs catch wind of it and become jealous. Below is a collection of case studies, online resources, personal tips & random things I’ve had archived.

Handful of Photoshop Tips & Resources

• PSDTuts.com Photoshop tutorials galore – some extremely great content here
• FI case studies on their work for Porsche. I have mad respect for this company and their talent: http://www.kontain.com/fi/entry/89/54886
  
• DIM (“Design-in-Motion”) is an Ericism I coined many years ago. I first learned of the concept from a college instructor. Typically I’ll have over 15 different .PSDs by the time I finalize a composition. “SAVE AS” often people. Explore new creative ideas with each new document. You can always revert to a different concept and re-build on top of that if your current direction isn’t flowing. Enjoy the process! Some of my best ideas happened by accident through turning on/off layers from various DIMs and randomly moving elements around. Plus, it’s fun to look back at previous versions and have“What in the world was I thinking?!” moments
• Get a large monitor! I have a Gateway 30″ and the resolution offers numerous advantages for Photoshop users. Seeing an entire web comp at 100% and more of my layers, brushes, & history palettes screams productivity
• Speaking of large monitors, here’s some desktop wallpaper inspiration for all resolution types
• You like shortcuts? How about ‘dem shortcuts?!
• Ah, this is a fun one: Photoshop Disasters
• Name layers. Create folders. Have a hierarchy! I’m very systematic when it comes to my layers (I was traumatized by an old boss who rarely named his). I personally feel that I spoil our developers with how clean my files are. Right guys?!
• I just found this the other day: Free Photoshop Brushes. Never underestimate the power of presets. You can pretty much get any kind of brush, shape, pattern or texture within 5 minutes of a good search (for free)

Happy belated birthday Photoshop! You…complete me.

Ok, if you insist.

Most of the startups Caxiam works with typically fall within our Web Application Development services. An idea is born, capital is raised, and our team is brought in to help the idea come to fruition on the Web. Most of the time the client has also engaged our Discovery Phase to generate detailed requirements and construct a framework for strategy & execution. Basically, by the time mood boarding kicks off, we have a great understanding of who the customer is, how they think, and what their needs are.

I’ll get to your eagerly asked question in a second, but first, remember if you will the old Atari game Asteroids (gamer or not, you have to appreciate this classic that helped spawn video games for decades to come!)

Remember how berserk it was to have all those asteroids coming at you? From multiple angles, various speeds & of different sizes. It seemed to be pure chaos in the moment – until you started eliminating asteroids with your little spaceship. One at a time, away they go. 1 down. 2 down. 5 down. The process of elimination was not only required, but very rewarding (especially for a country boy who could only play the Atari at his Aunt’s house!)

To answer your question (finally), I pretty much like to throw everything but the kitchen sink at them. That’s what I like to do with startups during our mood boarding process.

Client = “Spaceship”
Caxiam’s mood board options = “Asteroids”

This analogy may be a bit corny for you, but here’s what’s certainly not. From our experience, clients hiring us to build startup applications feel really good about eliminating numerous concepts during our mood boarding. The business idea was born, its purpose easily understood, but visually they need options and careful guidance throughout the creative process.

Take a New Dirt for example, a startup client of Caxiam’s with a unique idea for a custom web application for the commercial real estate industry. With a full branding effort needed, we set our sights on locking down a color palette (that would appeal to their target audience) and an adjective cloud (that would help guide our logo design). We also spent numerous hours clicking through existing websites (in & out of their industry) to get grip on specific aesthetics that the client found appealing.

After throwing 12+ color palettes at the client (Adobe Kuler is a tool we use routinely) we finally discovered that New Dirt carried some green initiatives and was searching for a fresh, vibrant & modern palette to appeal to their target audience. The asteroids were destroyed and we triumphantly moved on (ok, I’ll stop with the analogy now).

A parallel step in the mood boarding process that helps shape our color choices is the Adjective Cloud. Though this step doesn’t require heavy lifting, it may be the most important (and a personal favorite of mine). Our job is to help examine & extract words that describe the solution and its value to its audience.

• What associations will the Brand itself carry? (e.g. It’s a Targeted application)
• How will we shape the User Experience? (e.g. Encourage users to feel Connected & create tools that are Easy within a Trustworthy online environment)
• How will existing customers speak of the solution? (i.e. Viral & Word of Mouth marketing)

With a solidified color palette & adjective cloud, we can than proceed into the highly anticipated logo development phase. As you can observe below, options are plentiful and the client continues to feel heavily involved.

With sign-off on a selected logo, we’re then full steam ahead with a typography mood board. Sticking with the three pillars of web typography (Legibility, Hierarchy & Expression) it made sense to stick to a clean, san-serif font (we chose Vegur).

With these carefully orchestrated mood boards, we have now laid the creative force behind the project and setup our designers for success. In a collaborative effort with our UI developers, the visual design should (and was) a home run.

In reference to my (Mood boarding Part 1 post), the mood boards for New Dirt vs. The Foundation for SCPS took on different meanings to the client. New Dirt entered our world ready to focus on the areas that would shape their application’s value, marketing efforts & overall perception. A refined adjective cloud, spot on color palette, and logo design was delivered to a hands on client. Contrarily, The Foundation was a casual mood boarder that presented a brand new set of challenges. Their branding was cemented, and vision/purpose heavily exposed to the community already. Their focus was encouraging website users to take action and facilitate understanding in a easily digestible format. Different high level mission statements, similar solution oriented activities within the mood boards.

To persistently remain agile to the diverse clientele Caxiam serves, it’s crucial for our team to understand which mood boards are valuable to the project. We strive to collaborate within a general framework, and then provide a little wiggle room for further exploration & massaging of the overall process. Give us a holler today if you would like further information. We can promise you solutions to your creative challenges, but not without some corny analogies along the way!

A type of poster design that may consist of images, text, and samples of objects in a composition of the choice of the mood board creator…mood boards are often used by graphic designers to enable a person to illustrate visually the direction of style which they are pursuing.

Our creative team brushed the surface of utilizing “official” (as in, clients were aware & understood it’s part of the overall Caxiam process) mood boards over 5 years ago. It might not have completely stuck because we didn’t layer the process of choosing adjective clouds, color palettes, typography, imagery & textures in a convincing way. Or, maybe the value wasn’t organized in a way understood by the client. Regardless of the failed attempts, we kept massaging the process (realizing its potential) and have found tremendous success in making it officially part of the CG approach. Mood boarding, when done properly & involving the client strategically, can be very useful in creative collaboration.

Two recent projects at Caxiam were put through some successful mood boarding, and I wanted to highlight that success we shared with these clients. I picked these two particular projects because:

• they are vastly different in nature (one is a non-profit, the other a custom real estate application)
• one involved a thorough logo design, the other had established branding
• one client was very hands on, the other was what I call a “casual mood boarder” (they’re there for the ride)

The first of the two projects I’ll highlight is The Foundation for Seminole County Public Schools. We’ve had the pleasure of working with this great organization, and have really enjoyed guiding their online initiatives. The creative possibilities for this website were dramatic, and mood boarding truly set the tone for the project’s vision.

A vital objective for the Foundation, as with many non-profits, was the actual donation piece to the website. From a technical perspective, no sweat for the CG team. The key was not only providing an online environment for users to donate, but INSPIRING them to donate. Donate Time,  Resources and/or Money.

The Foundation was that “casual mood boarder” I spoke of above. Decision making was done by a large committee, which can be challenging sometimes, but the marketing team loved our ideas from the get-go. They quickly got on board with our proposed concepts to inspire users to take action right from the homepage. The Foundation was certainly there for the ride! (this is not to underscore their amazing input & feedback)

The key step in the mood boarding process for the Foundation was when we took inventory of their existing imagery assets. We quickly came to the realization that:

• their point-and-shoot photos were extremely limiting & lacking quality
• using stock photography meant less personalization & little control over shot composition

With a distinct vision to utilize their “BE INSPIRED” off-line campaigns & existing branding (red apple), we took some of their existing point-and-shoot photos and suggested ideas like this:

Which then convinced the Foundation to hire a professional photographer (marcharmonphoto.com rocks!) and have Caxiam art direct shoots like this…

…which lead to amazing shots like this…

…and then worked into our visual design mockups for the homepage (below)

With telltale images (using actual students from SCPS) + distinct call-to-actions to donate (in this concept, donating time to their mentorship program) + familiar settings (shooting on-site at SPCS), the website now generates a platform to clearly communicate The Foundation’s purpose and vision, and hopefully inspire their audience to take action & DONATE!

Check out FoundationSCPS.org in a few weeks after launch to see our ideas in action!

Continue reading Part II of this post where I highlight an aspect of another client’s mood boarding process.

See what others have been saying & doing with moodboards around the world of Web Design:
fuelyourcreativity.com/moodboarding-methods-for-web-designers/
webdesignerdepot.com/2008/12/why-mood-boards-matter/

While I’d like to pursue the subject of content in another post,  I say the above to say this – “Content is King” is most commonly abused as an excuse to minimize the role of design in a project. Sometimes it is well intentioned, but often the culprits usually either do not understand the importance of good design as a marketing tool, or simply can’t do it that well and thus attempt to minimize its importance and help land a deal. Listen to them, but blindly follow them at your company’s peril.

Specifically, I’ve heard the philosophy tossed around a lot that design should be as minimal as possible – its role solely as a method to transparently interact with content. In all other instances, design should get far out of a user’s way. In such a philosophy, any design element or graphical flourish is gratuitious and inessential.

It’s not that these advocates are incorrect – it’s just that they are describing a specific subset of project that does not represent the Web as a whole (although they may believe – or want you to believe – it does). This is without question the correct approach for an administrative interface or a Web application. But if you attempt to apply this ethos to, say, a marketing site for your Web application, you may have just sentenced your product to a slow, painful death.

So let’s back up from this specific subset and address the role of design in a more general sense. What does good design really do for your Website?

1. It provides credibility and authority. Make no mistake about it, we all form judgments based on appearance – it’s human nature. When we observe someone we deem reputable and professional, we lend more weight to what that person has to say. Design is the same – the impression users get of your company, product, or service is based as much on outward appearance as anything else. It’s simple – a Website that is well designed and appears professional gives potential customers a much more positive impression than ones that do not. Ignore design, and you miss a golden opportunity to rise above your competition.
2. It provides context and voice. One of the primary principles of effective content is choosing a personality or “voice”, and staying consistent to that voice throughout. In this sense, design becomes a vital tool to help get this voice across. How do you want your company, product, or service to appear to potential customers? Formal? Informal? Friendly? Hip? In this regard design and content working together convey this voice much more effectively than content can alone. Without effective design, at best the voice becomes less clear; at worst it conflicts and creates confusion in the minds of your visitors.
3. It gives you a unique identity. It never seizes to amaze me when clients ask for design services and say, in so many words, “we want a Website that looks like Website X.” It completely misses the point. One of the main strategic goals of an effective design (especially, but not only, as a marketing tool) is to differentiate a company, product or service from its competitors. If a potential customer browses your site as well as several competitors, it should leave an indelible impression – they shouldn’t scratch their heads as to which of several similarly-styled Websites they saw that product or service they were interest in. It was on your site.
   Again, often this request is well intentioned – another site does something well and others want to emulate it. It is a natural part of the process. But ultimately your goal should not be to emulate another competitor’s site, but to create a unique user experience that others want to emulate (because they don’t know what you know).
4. It gives a strong first impression. Here’s one dirty fact the “abusers” cannot get around: a visitor forms an impression of your site – and thus your company, product or service – within 8/10 of a second upon arrival. Before a single sentence is read, or a single product browsed, a potential customer has already formed a strong opinion about you based solely on initial appearance. This point is far too important to disregard.

I hope you find this article interesting and helpful. Thank you for taking the time to read it, and I look forward to any feedback you may have.

Photo by xjyxjy.