It’s By Design

Creating Your Website’s Look & Feel

Working with the client to design the “look and feel of a new website, (or, refreshing the look of an existing site), is one of my favorite phases of the development process.  Creating a distinctive and cohesive brand? is crucial to building your business, and that brand should be used as the common thread that weaves through all your marketing efforts, both online and print.  When embarking on the design phase, it is helpful if you already have a logo or theme in mind that can be used as the jumping off point for inspiration, (perhaps in the form of print material, or examples of other websites that catch your eye).  Your technology and/or design partner can then get the ball rolling by providing you with an initial mock-up (including 2 or 3 variations) of the overall design scheme. Once the mock-ups are in hand, the next step will be to review and provide your feedback.  Here are just a few thoughts on the review and feedback process:

1) Remember, it’s a mock-up. The idea behind the first couple of design drafts is to determine the direction of the general layout and theme, including the header graphic. As you’re reviewing the mock-up, ask yourself a few basic questions: do the colors, font, content placement, use of sidebars, etc., compliment your overall brand strategy? What changes would you make? Do you have examples you can reference? (Hint: it’s OK to look at the competition’s website for inspiration!) The better able you are to articulate the changes you’d like to see, the better able your technology partner will be to provide subsequent drafts that comes closer to the overall vision for the site. Try to avoid vague feedback such as “it needs to be spiffier”, “can we spruce it up a bit”, “I think I’d like to see something else, but I’m not sure what”, and the like. Instead, make specific statements about color preferences, fonts, (bolded, larger, etc.), inclusion of additional graphic images or enhancements to existing images, (for example, placing a frame around an image to make it stand out), etc. Keep in mind that, since the design theme will carry over to the other pages and sub-pages included on the website, certain aspects of the initial design mock-up, such as the menu options included in the navigation, menu option labels, content, etc., will be discussed and dealt with after you’ve approved and signed-off on on the overall design.

2) To pull your brand and marketing strategy together, make sure you are using the same header graphic in your e-communications. Use that graphic to build your identity and foster brand recognition.  For example, a client I’ve recently been working with is using the same header graphic on his website, as well as in his e-newsletters. In this case, he made only a slight tweak to the header graphic on his website, by changing the “catch” phrase text; the catch phrase in the e-newsletter graphic states “There’s no substitute for experience…”, The e-newsletter is his first line of communication to prospective buyers, encouraging them visit to his website;  the “experience” text conveys the idea that he is the resident  expert, and will provide top-notch service. Once on the website, the catch phrase in the header graphic changes to “Live the dream…”, which sets the tone for the information presented within the site, (i.e., visitors to the site can view properties for sale, receive buying/selling tips, etc.).  However, all other elements in the header grpahic remained the same, color scheme, fonts, etc., again, to create and build upon the client’s brand identity.  The value of a cohesive approach cannot be emphasized enough.

3) If at first you don’t succed… If the first or second design draft isn’t a “WOW”, (note to self, they rarely are), do not despair.  The review and feedback process is an important one, so spend the time needed to give it the thought it deserves, and to provide your technology partner with concrete suggestions and guidance.  The back and forth will most likely result in some great conversation and idea exchanges, and help bring your design goal into focus…and make it a “WOW”.

(Brush and palette image courtesy of

Posted by Birgit Pauli-Haack

Since 1998 Birgit Pauli-Haack has worked with nonprofits as a web developer, a technology strategist, a trainer and community organizer. She founded Pauli Systems, LC in 2002, now a team of six. It is a 100% distributed company. Since 2010, her team has used WordPress to build new nonprofit sites and applications. In her spare time, Birgit serves as a deputy with the WordPress Global Community team, as a WordPress Meetup organizer and a Tech4Good organizer.