Cullmann Design Blog

If you design or develop for any of the web, iPhone or iPad LiveView is a must-have app. Essentially a screencasting tool, it allows the user to place a “virtual” device on their host mac and share that marque view with an iPad or iPhone via WiFi. Great tool, genius idea. John Hicks has posted a video that does the product justice.

Quick demonstration of how LiveView works from Jon Hicks on Vimeo.

Google Wave, the strange, neither here nor there Google app is turning over it’s first year. Recently at the Google I/O Conference, some new life has been breathed into the application and there seems to be a renewed buzz in the online community. The pre-release version lacked some functionality and a clear purpose. It actually had, and now still has, a tremendous amount of potential. In the last year, improvements in the stability and development of extensions have allowed the benefit of such a “real-time” oriented application to become evident. If you are not familiar with Wave, it’s a hybrid employing the length and editing tools you would find in an email client, with the “real-time” content delivery instant messaging offers. Additionally, you can now “publish” waves to any webpage and also review the collective work as via a playback feature and see how a given “wave” has formed.

The most recent release is a maturing application that can be used immediately for sharing, distributing, editing and publishing a collaborative workflow to a group of any size. I can see now what had driven Google to create such a unique tool. Like many other great idea that have launched, user adoption is going to be key in the success of Google Wave. It’s ideal for groups that work remote from one another or instances where seeing a linear progression in a conversation is required. If you haven’t had a chance to try it, wave.google.com is open to anyone with a Google ID. If you want to get a strong grasp as to what Wave is capable of, I recommend Gina Trapani’s book The Complete Guide To Google Wave. Google also has a dedicated Wave Blog and there is technical documentation for the Wave protocol as well. A Wave to accompany this post is also available.

Nothing feels better than being able to help someone who’s really in need. This can mean a lot of things from donating money or possessions or to serving in your local community or church. Many people forget that the skills they have as marketers, designers, developers, writers can be a huge benefit to organizations in your local community or abroad.

For professionals—or students just getting started—your training, expertise and experience can help an organization that is struggling to get off the ground or reinvent themselves. As marketers and designers, we understand how much branding can mean for branding and communicating a message that can yield results. For many non-profits and community organizations, the costs associated with quality communication and marketing services can be overwhelming. This is an excellent chance for writers, designers, developers and anyone with an understanding of marketing to make a big contribution with a little of their free-time.

Were to start? If you’re interested in making a difference for a charity, you can reach-out directly to an organization that you know needs help or that you have an interest in. If that organization can’t use your help right away, they’ll likely add you to their volunteer list or be able to recommend an affiliate that can use your help. You can also go online to one of the many websites created to unite marketing do-gooders like yourself with organizations in need. Grassroots.org is a large and popular site. There are also many niche volunteer organizations who cater to special interests. Creativepaw.org is an example of a site that aligns creative professionals with groups who support and care for the interests of animals.

Before you begin you should think about what kind of services you’d like to help provide. Like any opportunity, knowing how to present yourself and your capabilities will help you and the organization you’d like to help figure out how best to apply your expertise.

You may also use this as a chance to self educate and broaden your capability. Unlike a traditional client, non-profits are happy to have support. This is an excellent opportunity for you to apply some new techniques to your craft or experiment with new skills. Although it’s best to communicate your plans with the organization that you are helping, most are open to trying new things and open to new solutions. There are few better ways to broaden your portfolio or create a case-study for your new marketing idea than to have a real-world example with non-profit.

Although donating your time is a great way to help the community and feel good about your contribution, you don’t have to be completely altruistic. Ask the organization you are working with for a contributor’s credit, a letter of reference or a link in their website footer. This will give some referral traffic to you or your website and may eventually lead to a new opportunity.

The most important thing to remember when donating your time, as a marketing professional or otherwise, is to enjoy yourself and know that your effort can make a big difference to any organization or charity effort.

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