Cullmann Design Blog

A friend had asked me where they would begin if they had wanted to start building a website for their business. I started an email that outlined a few of the basics, starting with a URL and outlining what they wanted to say and who they wanted to say it to. Of course the e-mail started to talk about producing content and making some of that content available via blog. A thought had crossed my mind: Practice with you preach. Here is my open-letter for starting your first website (I’ll likely miss some of the finer points, so please feel free to contribute).

Before you buy a domain, start to design, find a host, before you start to write any content for your new website, you should decide what is it that you want to communicate? From the largest fortune 500 company to the blogger with the smallest audience, the owner needs to know what they are using the blog for. Most business (big and small) want to create an online footprint that let’s people know who they are, create branding and allow an easy method to locate their business. This is a great way to approach the challenge of your new site and allows you to define your goals. Those same goals can help steer your design, the writing style, call-to-action and a sense of scope moving into the future.

Now that you’ve defined what you are going to be using your site to communicate and who the audience is, you can look at what your competitors are doing. How are they designed? How do they speak to the audience? How do they handle their branding? If you’re planning on sharing this space with them, you have an advantage to learn from their mistakes and successes. You should also look at their design-and other designs on the web that you like so you have an idea of what styles you like and how they divide their messaging, contact information, pricing, call-to-action, etc,.

The beginning of a great website, and the foundation for your new online brand, is the domain name. If you are building a business, try to find a domain that IS your business name (mybusinessname.com). You can see if your domain is available for free using WhoIs.net, NetworkSolutions or GoDaddy. NetworkSolutions will also make name suggestions if the domain you are searching for is taken. I recommend sticking with .com names as opposed to .net or .us. You can also look at foreign top-level domains (the .com .net extensions on the end). Some of these can be used to create creative solutions for your domain name like bit.ly or del.icio.us. Just remember that you may be communicating this domain name (or URL) verbally and simpler is better! Once you have found your open domain name, you should purchase it. GoDaddy usually has the best prices and offers hosting at an additional charge.

Now that you have a domain name, you need to design your website. Find a designer? Hire an agency? Pay a web developer? How much does this all cost? I have a biased opinion here: I am a web designer and usability and web standards are VERY important to me. If your website is a fundamental part of your business or you are planning to use it as the foundation of your marketing and to generate business, you should work with a professional web designer and/or web developer. If the previous is true and you’ve never done anything like this on the web before change “should” to “definitely must”. If you believe your website isn’t going to make a dramatic change to your business or you don’t have a budget to invest in having someone design and build a website, there are several options that can leave you with a great looking website without a tremendous cost:

• Consider hiring someone right out of school or even still IN school. There are a lot of very talented and capable web developers and designers out there waiting for a shot to work with you. You can find some at your local college or university. Many students have a portfolio of work to show or may even do your project on spec.
• Look at a DIY solution like SquareSpace. This service, and others like it, give anyone with a vision a way to deign their own website and host. This takes all of the “tech” out of it and makes it easy for someone to get their start.
• Think about a blog format for your website. There are many, many businesses that use a blog for their PRIMARY customer interface tool. Platforms like WordPress, Tumblr and Posterous. allow you to turn a rainy-day into a start-up marketing platform. WordPress and Tumblr allow you to add “pages” that can easily make your site look like a brand.com with a “About”, “Contact” and “Info” page. All three of the platforms I mentioned are very easily customized with free or paid-for templates and designs that are a snap to install. All of these platforms also include hosting (many at no cost), metrics (to see who is coming or going from your site) and you can add your domain name so no-one will ever know that you’re using a blog engine to host your company’s web presence.
• Social media is a great solution for a start-up. This wouldn’t apply to all audiences, but if your business is selling music from indy artists, clever t-shirts or video games, a FaceBook fanpage may generate more leads than any .com website. If you’re selling turn-signal shut-off reminders for 60 year-olds driving oldsmobiles, a FaceBook fanpage would be a very lonely place for your brand. A FaceBook fanpage is easy to set-up, fast and free. There are several studies to support the this as a tactics, but you have to think about how this fits in with your product/brand.

Before you do anything, you should ask yourself how important your new site will be to your brand? If you believe that it is important at all, the investment in a professional web designer is well worth the cost. Finding someone who understands your needs, your industry adn will work with you collaboratively will yield results beyond your expectations. Designing and building websites is a craft and its proper execution will attract and keep visitors, improve your search engine ranking and define your brand as a whole.

Once you have decided on your design solution, you should begin to develop content. Again, you can work with a professional or write the content yourself. The content you create will drive design, so involving your designer/developer is important. The arrangement and importance of your work will drive how the site is constructed and how search engines will see your website.

With the design, copy and architecture all in place you’re site is ready for launch. Make sure that you tell people to go to your site! Tell everyone you know, put it on business cards, on your email signature, on your facebook page. Every person who visits your site helps create “buzz”. They may share it with friends or remember it when the need arises for your services next week, next month or next year. Don’t be bashful about telling others in your industry. Go to some blogs or forums focused on your industry. Leave comments and reply to threads with your business URL in it. Someone may see your contribution, go to your site and make a purchase or come to you for a service based on your contribution.

Lastly: Update your website with new content, news, customer reviews/testimonials. Not only will updated content make your website (and business) look thriving and alive, but it will also help you with search engine position. Once launched your website is a “living” brand footprint that needs to be maintained to thrive. It will also give your customers and users reason to return regularly and keep you and your brand top-of-mind.

For more about building your brand online:
http://blog.cullmanndesign.com/2010/02/building-brand-you/
http://mashable.com/2008/07/18/building-your-online-brand/
http://www.chrisg.com/social-media-brand/
http://www.slideshare.net/alihadi/build-your-brand-online-presentation

If you have worked as a Graphic Designer or Art Director for any length of time, you’ve been asked to integrate a chart into your design. There are some innovative and inspiring ways to create informational graphics—it’s an art-form in itself. In some cases, the experience and craft is stifled by having to accommodate changing data. For the web designer or developer, there are additional hurdles: clarity of data, being able to showing values for large data-sets, updating data frequently, how to present that same data for search engine index.

Google has introduced a tool that may help alleviate some of the designer and developer’s burden: Google Chart Tool. This new service from Google allows you to use a generated image or, via javascript, a live rendering of your data on your webpage or presentation. The solution includes a gallery with a huge selection of graphic solutions to present data in a variety of forms.

Your chart can be fed data from a huge variety of sources. The most simple is to create your data parameters in Google Docs and “connect” that data to your chart for real-time updates. Google also provides an embedded data solution that allows you to provide plain-language data within your page. Although there is no documentation the data is enclosed in Google’s tagging structure and will likely be indexed for search and categorized as “charted data”. This can be an advantage to content that relies on the expression of data as a business model or a differentiator. The charting API (Application Programming Interface) also allows you to tie your chart to a wide variety of dynamic solutions including JAVA, JSON and XML.

Although the solution provided by Google is not a replacement for good graphic design and creating a comprehensive design solution for your information, it does give designers and developers a tool that allows for flexible inclusion of data into a web design and separates presentation from the data itself. It is crucial to remember that using Google’s (or any third-party tool) for charting will have you relying on that party for your site’s integrity. If the service changes or goes down, your data may not display properly, or at all. These same solutions will give you a great looking solution without creating a custom code or constantly updating data and give you more opportunity to focus on making your site’s design great.

Learn more about information graphics and design around data and take a look at some of the sites and books below:

Edward Tufte
Flowing Data
Infosthetics
Jakob Neilsen

(5 Things Everyone Must Know About Good Web Design)

I spend a lot of my day working with all kinds of people to scope, design, code and deliver websites. I work with people having many different skill sets and coming from all kinds of disciplines. Of all of the challenges that I face in the process of getting from the conception of a website to complete, the toughest, and often-times the hardest to articulate is the concept of good usability.

I’ve put together 5 items that I believe everyone who is thinking about, in the act of or has recently completed a website should know about usability and why it is so important to you, and your end user.

1. Copy (too much, too little, too complicated, too dense)
   It’s usually too much, copy that is. I believe that content is king, but content does not always mean a lot of copy. It’s very important to not loose perspective of web behavior when writing messaging and content for a website. You have about 3-5 seconds to provide an engaging experience while a user is deciding if they are going to hit the “back” button or close your site. In that time, you have to visually engage them and be able to deliver some type of scannable messaging in that window. To do this, write your copy so that it’s skimmable. Make use of headlines, subheads, bullets and bolding. The length of copy is very important as well. Unless you are writing long-format editorial or scientific content, you should break your copy into digestible bites. If the content still becomes too cumbersome, consider breaking it into multiple pages (which will help with natural search-engine optimization).
2. Creating a visual flow
   Going hand in hand with copy is the visual flow. You should break your copy into easily scannable pieces and make use of headlines, subheads and bullets to further guide the user to your key points. This can also be greatly enhanced with images and graphic devices like block-qoutes. If you have a fair amount of copy you should be sure that the main focus of the page is close to the top. If the content runs long, you risk the copy falling “below the fold” or beyond what is shown in the browser window without scrolling down in the page. The eyes of your users should move from one paragraph to the other quickly and catching all of the primary messages and headings.
3. Call to Action
   I am used to working with commercial content on the web. Very often the site owners want an action to be executed by the users. This action can be a purchase, registration, enrollment in a service or clicking on link to a section of the website where one of these actions can be made. Not all content creators have such a direct “call to action”. If your purpose is to educate people or share information a call to action may not seem as obvious, but there is reason to keep your users attention and draw them deeper into your site. You may want to have your readers learn more about your subject or click on links to other content on your site (as I have on the my own site). You may want to establish your credibility by having users look at your background or even continue to stay engaged by following you via social media. Regardless of your tactic, you want to keep your user engaged and do not leave them on a “dead-end” or with nowhere to click.
4. Color
   From a usability stand-point readability is king. Regardless of your branding or corporate aesthetic, you should use a high-contrast field for type and call to action. Not only will you make your site accessible to someone who may be color-blind or using a device with a weak screen (like a mobile device), but you will also lessen reading fatigue. The most desirable design solution is to use very dark text on a white field (black and white), with a san-serif typeface designed for screen-reading (Arial and Verdana come to mind as a safe standard). Recently, the quality of computer displays and advances in the way that operating systems render text has presented serif typography as an option, but conventional wisdom still makes the safe choice a san-serif typeface. Avoiding type on top of images and patterns is also recommended. Although screen-readers can parse text separately, patterns can make text difficult to read and your audience may miss key messages.
   Headlines and subheads should be presented as plain-text whenever possible. Although your use of special typefaces may be limited, you should avoid relying on images to present text. There are several reasons including search engine optimization and bandwidth, but the key reason is platform interoperability. With such a huge variety of browser and mobile options, being sure that your headlines are delivered is the primary reason to rely on tried and true methods for text presentation. There are several very promising solutions currently being developed to allow designers to use a much wider range of fonts and this will likely widen options for site owners and content creators. It is also important to avoid using images for headlines and subheads whenever possible.
5. Conventions
   Nothing helps your users more than using conventional solutions for message delivery, navigation, interactivity and the location of content. Don’t avoid innovation or even completely new alternatives for how users can engage your content, but make sure that your solution is easy to adopt and that you don’t mistake “engagement” for turning off your users. A few examples that come to mind are hyperlinks: Traditionally hyperlinks are blue with an underline. Visited links change to purple and it’s very easy to scan a page for the next chance to move to new content. I think that we (users and content creators) have come a long way and we can move comfortably to an expanded visual vocabulary for links. You should make your links obvious. Make use of color, underlining, icons (or all three) and be sure to visually cue a user that they have already seen a particular URL by enabling a different visual label for “visited” sites.
   Don’t hide your navigation or branding. The “inverted L” is a truth and users are conditioned to looking in the upper left-hand corner for navigation and branding. If you do engage users with compelling content, you would like them to know who you are and how to find out more about you! If you want a user to pay special attention to a call-out, make sure it’s in the top-left of your layout or in the left-hand edge of your design. This will dramatically increase the chances that it gets noticed and clicked on. Marketers have unfortunately trained users to avoid the right-hand edge of the screen with consistent placement of banner ads and unrelated content. Use this to you advantage and stack your messages towards the left.

Many of the usability tips mentioned above are proven methods to those designing and developing websites. Many of the tips outlined are things that successful designers ignore-successfully, but may be relevant to someone starting out or, if you’re having trouble with traffic or people “sticking” on your site, you should try. It’s a return to best practices, good design and appreciating your user’s time and attention.

Learn more about usability and the how it can make or break your next project:

Don’t Make Me Think by Steve Krug
Jakob Nielsen
25 Point Usability Checklist
Usability.gov Standards