My latest project was working with the City of Boulder’s Parks & Recreation department on their facility displays. The city operates three indoor recreational facilities and have recently bought a 52″ monitor for each center to display departmental news and marketing material to the patrons. My job was to design the User Experience for the displays and determine the best strategy to arrange content to be displayed in an organized and informative way.

The requirements for the displays were pretty straightforward. The city wanted to display a variety of content including promotional material, videos and images. They also wanted to display a weather forecast and the city’s RSS feed.  The city chose to use a display content management system from Four Winds Interactive, my job was to design a template to display the content. Each monitor had a resolution of 1920 x 1080 to work with. The results that I came up with are what I believe to be the most efficient way to display the desired content within the space available.

The first thing that I did when I began designing the layout for the displays was to divide the space using the rule of thirds. I wanted 2/3rds of the space to be used for the main content area and the last third for 2 smaller content areas. Since HD video would be used on the display at some point, I decided to make the content areas all 16 x 9. The city’s original template had a large 8.5 x 11 content area. Their original plan was to take print material and put it up on the digital displays. I explained to them that print media and digital media are two entirely different entities. Just because it works for print does not in any way mean that it will work for another medium. In this case, large pictures and bold headlines will work best to attract an individual’s attention.

Finally, I designed a basic template for 16 x 9 content. However, it will be up to the Parks & Recreation department to keep the content current and informative. The facility displays went live two weeks ago and so far the feedback has been very positive. The biggest factor will be how often the content gets changed. Once the public acknowledges that the displays are a good source of relevant information they will be looked upon as a very good resource.

Right before I launched LifeSport Chiropractic’s new website I took a few screenshots of their old website for  comparison. The ultimate goal when I design any site is to make the site’s information well organized, concise and easy to find. After looking at the two sites side by side a noticeable difference can be seen.

The biggest challenge I faced with the LifeSport Chiropractic site was reducing the amount of text used throughout the site. When a user navigates to a new website, the site must make an immediate impact and make it’s purpose clearly known. Visitors to websites don’t read content, they scan it. As a result, all of the information needs to be presented in an easily scannable form.

My strategy for this site was to lay out the majority of the content in a two and three column format. For each section of information I used a headline, some sort of image or graphic, a brief amount of text and finally a call to action button. This format streamlines the users focus in a logical way. With only a brief amount of time scanning the site, the user knows exactly what the site is about and where to find the needed information.

The home page is the best example of the easily scannable user interface for LifeSport Chiropractic. However, each page utilizes the exact same strategy of focusing the user on what is important by maximizing white space and minimizing unnecessary clutter.  In the left hand column there is a comparison of the contact page of both the old site and the new site. There was not nearly the amount of information to organize on this page as there was on other pages. However, I tried to include the necessary information to contact and interact with Lifesport in a structured fashion. The text introduces the social media icons. The physical address leads to the map, which leads to a call to action button that directs the user to directions from Google Maps. Finally, there is a simple contact form highlighted by the call to action button to submit the form.

The goal of any website is to effectively communicate ideas from one party to another. For LifeSport Chiropractic’s site I tried to make things as simple and user friendly as possible. The less the user has to think and the simpler the interface is, the more effective the site will be. I hope that the strategy that I used for this site and will continue to use for others will be extremely effective in reaching the intended audience.

This week I launched my latest creation for a local chiropractor, LifeSport Chiropractic. My goals for this site expanded well beyond just displaying LifeSport’s services. The core of this new site is the resources that will be offered to existing and potential customers. In the coming weeks and months, LifeSport will be continually adding blog posts, home exercises and videos that will help injured athletes better understand their injuries and how to treat them. As a result of offering free resources to the community, LifeSport will be developing a relationship with customers that they have never met before.

My vision for LifeSport Chiropratic’s new site is an online resource overflowing with information that will be helpful to the athletic community, not just locally but around the world.  As a result of this information, it is my hope that an online community would form within the blog comments as well as the discussion forums that will enable athletes to help each other.  As a result of this abundance of information, a sense of trust will develop that will make it easier for potential customers to seek out chiropractic, sports medicine and muscle restoration services from the company.

I look forward to watching LifeSport’s online community and business develop together.

There are countless hosting companies competing for the right to host your website.  However, not all provide the same level of service.  From the research that I have done and the positive feedback that I have read and heard from peers in the design industry, it is clear that Media Temple is one of the best if not the best hosting company. Across the internet, some of the best sites by the most talented designers have “Hosted by Media Temple” proudly displayed in the footers of their sites.  The reason is simple. Media Temple offers an outstanding product, with superior technical support at a competitive price. Isn’t that all one can ask for from any tech company?

I completed the process of switching over my sites to Media Temple relatively quickly and painlessly.  However, when I did run into trouble their technical support staff (Stephen R.) was very helpful in quickly solving my problem at 3:00AM on a Sunday morning. Once my sites were launched I instantly noticed the difference in speed.  It really is quite amazing how the overall user experience of a site can increase when everything simply loads quicker.

Web Rhetoric has only been with Media Temple for a short time now. However, we are looking forward to a long and happy relationship with them.  All of Web Rhetoric’s current and future sites will now proudly be Hosted by Media Temple.

I am proud to announce the launch of my latest site, this time for Vanessa Gerhards. Vanessa is a dance instructor and a culinary artist, she wanted a website that clearly reflected those two aspects. I think her new website is a great representation of her two tremendous talents.

When I began brain storming ideas for her site I wanted to keep her message incredibly simple.  After a brief visit to her site, I want the viewer to immediately know who she is and what she does. The best way to do this is with one image and one word. These two items send a stronger message than a whole page of text ever could.

Vanessa looks stunning in her bright pink dress and gives a sense of movement and grace with her dance pose. She also looks great in her traditional German outfit in the next slide. I used a simple jQuery plugin for the slide effect. This allowed me to place all the attention on one item at a time.  Each image is clickable and leads to more information about Vanessa’s highlighted talent.  I used a shadow effect below the image to to create a little depth against the background. This worked perfectly with the photos that were taken outside in the sun.

The bottom of the home page displays her twitter posts, dance schedule link, Nessi’s Kitchen episodes link and her latest blog posts. I thought the blue of the two icons in the middle nicely compliment the pink of her dress and logo above.

Just like Will Kelsay’s site, I built every page with custom fields that allow Vanessa to update her site without having to know any code while at the same time keeping the flow of a good design built with valid XHTML.

After completing the site and taking a step back, I think I accomplished my goals of creating a simple, easy to use site that sends a clear and concise message. What do you think?  What do you like or dislike about the site? What would you have done differently?

Take a look at Vanessa’s new site.

Proud to launch my completely redesigned personal site. My old site was the first site I ever designed and was a static HTML site that badly needed to be redone. Finally had some time to work on my own  site and I am very happy with the results. Before I began designing my new site,  I had a few goals that I wanted to accomplish.

• I wanted the blog to be the centerpiece of the new site
• A large picture to capture the readers attention
• A sidebar that is useful
• Minimalistic styling

I wanted my new site to be a blog about my thoughts, ideas and personal experiences.  I felt the best way to  focus the reader’s attention on my post would be to start it with a large picture.  This is something that is fairly common in newspaper sites but less common in blogs.  I decided to have each image have 16 x 9 dimensions so there would be uniformity between the blog posts.

A blog’s sidebar is often something that is overlooked and hastily thrown together.  The sidebar can have two forms.  If the blog is within a larger site and not the main page then the sidebar should be focused on blog navigation.  However, if the blog is the main page or the only page, then the sidebar should give additional information about the blog and have the navigation be secondary.

For my personal site I chose to include information by descending importance.  I started with a photo of me  so the reader would be able to have a face to put with the content of the blog.  A brief bio explaining who I am, what I do and how to contact me. After the link to the contact page I chose to include social media icons as another way to get in touch.  I thought it was important to desaturate the icons so the reader’s eye would not be distracted by the colorful social media icons. After the icons I chose to include my twitter feed to give the blog a personal and quickly updated feel. For this I simply used the official twitter widget and adjusted the CSS to match my blog.  I also added some javascript that made the widget load after the rest of my site loads.  I don’t want my site to be held up if Twitter’s server’s are slow or down.  Finally, I chose to include my latest Flickr photos with the Flickr RSS plugin.  I styled this section just like the twitter widget above it.  I added the Flickr logo and the link to the right to match the styling above.

The overall styling of the page was meant to keep the user focused on the content and not distract them with the design.  I chose to use shades of black for styling.  The background is a grainy shade of gray and  the border of the main content has a slight box shadow made with CSS3. The design looks good but in no way does it overpower the content.

My personal site has come a long way since my first attempt at creating a website.  I look forward to continuing to add worthwhile content in the future.

I am very pleased to announce the launch of Will Kelsay’s brand new site.  Countless hours of research, design and development went into the production of Will’s site.  I wanted this site to be the absolute best site in the triathlon industry.  I relentlessly researched what other professional triathletes had and made sure that Will’s was several steps ahead.

Will’s new website was designed to be an informational and promotional website for his adventures as a professional triathlete.  At the same time, it was important to highlight Will’s sponsors that support him and finally tie everything in with social media.  I quickly came up with a simple wireframe that was the basis for his site.  I wanted to present a lot of information to the user in a way that was clean and easy to navigate.  At the same time I wanted to add plenty of eye candy to keep the user interested.

Once I had the ideas for Will’s site outlined, development was ready to begin.  Getting the basic structure of the sitewritten was relatively easy.  As the process went along several revisions were made.  From the 2009 – 2010 season the TIMEX Multisport team changed their color scheme from orange to red.  It was easy enough to change the CSS to a red theme.  However, Will’s site would have had a very different look if it was orange.

Will had a very well established and followed blog already running in Blogger.  My original thought was to include an iframe and import his blog into the site.  However, having his blog fully integrated with the rest of his site made for a much better user experience.  As a result, I built his blog right into the site using WordPress as his CMS (Content Management System).  It was very easy to import his old content from Blogger to WordPress using the import tool.

Where Will’s site really stands out is the attention to detail used throughout the site.  This can be seen in several places, most notably the transparent background which shows off the mountains in the background but doesn’t detract from the content of the site.  Another area is the photo gallery, I constructed a custom photo gallery just for Will’s site that was both beautiful and easy to navigate.  Finally, take a look at the custom call to action buttons on the front page and contact forms.  These buttons were made in Photoshop to complement the social media icons found on the contact page.  All of these details come together to make the site truly unique.

One of the most important features of the site was for Will to be able to update the site easily without having to know how to write any code, but at the same time making sure everything would still look good.  Websites that are not hand coded with XHTML and CSS are made with a WYSIWYG (What You See Is What You Get) editor.  These editors make it easy on the user because they do not have to learn any code and generally have a similar layout to Microsoft Word.  Unfortunatley, the results often look like Microsoft Word documents.  The way to get around this issue is to format everything with hand coded XHTML and CSS and then include custom fields where the user can insert a picture or a block of text.  This ensure that everything will look good in the end.

After feverishly working on this project I am excited to launch and get some feedback.  What do you think, did I accomplish my goal of making Will’s site the best in the triathlon industry?  What do you like about the site and what would you change?  Take a look at Will’s Site and you can be the judge.

The use of CSS3 in web design is beginning to see more and more popularity.  Unfortunately, users of Internet Explorer (which still has a large browser market share) are left out of the party until the release of IE 9.  However, this doesn’t mean that you should abandon the cool features that the next generation of CSS has to offer.  CSS3 allows designers to simplify their efforts which used to be based on designing images in Photoshop.  Now designers can let the code do the work of rounding corners and adding shadows.  Here are three simple CSS3 methods that every designer should know.

Rounded Corners

The old way of rounding corners in your design was to painstakingly include photoshoped images.  This process bloated your code and made it frustrating if you wanted to change aspects of your design after including the images.  With the CSS3 property of border-radius, the process is much simpler.

Simply add the following code to the element you want rounded in your CSS file.  If you want your corners to be only slightly rounded use a smaller number of px.  If you want large rounded corners use a larger number of px.

Take note that I included the Firefox (-moz-box-shadow)  and WebKit ( -webkit-box-shadow) versions of this property.  You should include this code in your own design.

Text Shadow

To add more emphasis to your headlines (or any other text) a cool new feature in CSS3 is the text-shadow property.

Take a look at the code below.

text-shadow: 2px 2px 1px #000;

When I tell people that the name of my web design company is Web Rhetoric they are often confused as to what rhetoric is and quite often they are unsure how to spell it.  I chose to include the term rhetoric in my company’s title because it was at the core of my education at the University of Colorado and hope it will be a large part of my future career.  But what is rhetoric?

There are countless definitions of rhetoric from ancient philosophers such as Plato and Cicero to more modern thinkers such as Kenneth Burke and Gerard Hauser.  However, one of the best definitions comes from the ancient Greek philosopher Aristotle who defines rhetoric as “the ability to see in each particular case the available means of persuasion”.  In easier terms, Aristotle is explaining that rhetoric is simply using language to communicate effectively.   Even if you haven’t heard the term rhetoric or just don’t know how to spell it, I guarantee that you use it every day. Back in Aristotle’s day, the art of persuasive discourse was extremely important.  Quite often whoever could give the best speech would have the most influence over public opinion and civic life.  Over 2,000 years later in our modern day culture, rhetoric is just as important as it was in ancient Greece.  Rhetoric is seen everywhere from President Obama’s carefully crafted speeches to our arguments with friends over what movie to watch.  We are constantly trying to persuade and influence the opinions of those around us.  So what does this have to do with the internet? Everything.

The rise of the internet has given rhetoric a new medium to be expressed with an exponentially growing audience.  The web is the perfect place to demonstrate rhetoric at its finest.  In the ancient Greek days, speakers only had their voice and the stage they were standing on to influence their audiences.  Today, the web presents countless opportunities to connect with people. The web started out with designers using basic web development techniques such as manipulation of colors, fonts and pictures to persuade viewers.  Modern web development fully engages the viewer using videos, comments and two way interactions such as Twitter or Facebook.  There are more ways than ever to engage, interact and persuade the opinions of others.

With every site that I create, I attempt to engage, interact and connect with the viewer.  I think about who the audience is and why they are visiting this website.  What information did they come looking for and what impression do I want them to leave with? The web is a tremendous place to express rhetorical skill.  I wonder how Aristotle would use the web if he were a designer?

Welcome to Web Rhetoric, LLC’s new blog and website.  My name is Dave McCollum and I am the founder of this new web development company based in beautiful Boulder, CO.  I look forward to sharing my thoughts and experiences as a new entrepreneur in the web development field.

In this blog I plan on routinely sharing updates on the company and it’s developments.  I will pass along any web development tips that I feel are important to the progression of my peers and the industry as a whole.  Currently, my portfolio is small but I am looking to quickly build on my early work.  I will share any updates on the progression of new sites and proudly display them in my portfolio upon completion.  If you have any comments or suggestions please feel free to leave a comment below or send me a message on the contact page.  I am truly looking forward to the journey Web Rhetoric is about to begin and very excited to see where it leads.

Dave