Posts Tagged ‘Web Design’

10 Tips To Choose and Use Photos on Your Web Site

July 14th, 2011

A critical piece of many web designs is photography. Photographs really can be worth a thousand words because they have the power to immediately convey emotions, give a sense place, describe a feature or product in detail, illustrate a concept or set a tone. All without having to read a word.

Professional photography can help make your whole brand looking more professional, while cheap, poorly shot photos can really make a bad impression.

If you cannot afford custom photography, you are probably going to rely on either royalty-free photos or the non-professional photos taken by you, your staff or your clients. Both of these options can save money, but plan to take some time to select the best images and to present them in a way that will add relevance and visual interest to your web site design.

Ten tips for using photography effectively on your web site.

Avoid cliched, overused images and ideas. Because royalty-free photos, by their nature, are not created specifically for your project or concept they tend to have very general concepts behind them: business, teamwork, global network, etc. Therefore low cost royalty free photo sites are filled with photos that are too cliched. Adding an image like that does nothing to distinguish your company, product or service from your competitors. And in many cases it really makes you look worse.
Make sure the people look real. Photographing your own team is always a great idea if it’s possible. However, you may not have the budget for a custom shoot, or you may not have the set-up to make it ideal. But if you turn to stock and royalty free photographs to represent either your own business or your clients, make sure you are realistic. Do all or your clients look like models? Do all or your employees dress like fashionistas? Probably not. There are plenty of more “everyday” looking models that are featured in photographs.
Beware of subjects smiling at the camera. Another way to help make things look a little more “real” is to avoid photos where the people are looking at, and smiling at, the camera. Once they start mugging for the camera, it takes away from the idea that you’ve caught them acting natural.
Crop images to focus on what’s important. As a graphic designer and web designer, I nearly always end up cropping a photo rather than using at exactly the size and shape that it is provided. Trimming the edges (cropping) allows you to focus on the part of the photo that’s most relevant. It cuts out any distracting background images or other parts to an image. It can also create a more unique look at the subject.
Try different shapes. Most photos come in a format that’s around 3:5. They are basically a pretty balanced rectangle. By cropping them into something different, they become more unique. You may want to try photos that are wide and panoramic, or tall and skinny, or square. You’ll need access to a photo software tool to do this.
Make sure the photos are crisp and not fuzzy or out of focus. Many small business owners use photographs that they take with their own camera or photos supplied by clients. This is a great way to have photos that are truly unique and feature your own products, people, locations, etc. However, if the photo is blurry and not in focus to begin with, it’s just not going to work. Immediately disregard photos that are out of focus because it’s nearly impossible to fix.
Do basic photo editing to clean up red eye and brighten if necessary. Poorly lit (dark) photos are also a problem when using non-professional images. Also, people can have red eyes. Both of these sometimes can be fixed with an editing program. Either fix them, or do not use them.
Make sure images are scaled correctly. There is nothing sillier than looking at photo on a web site and having it look like the people are standing in front of a fun house mirror. Sometimes, when adding a photo to a design layout there may be a predetermined size and ratio that the photo must be. If it does not fit that size and shape it is either cropped or scaled to fit. If you are working within specific sizes like this, make sure you size and crop outside of your web site’s CMS for the best results.
Keep the resolution low for faster loading. The content management system for your web site may allow you to upload a very large image file and it will scale it for you. However, the data behind that image is probably still stored with the image making it act like a very large file, even if you are seeing it small with in the web site’s design. If you are working with large images (and it can be a good practice to start with high resolution images) make sure you crop and bring the resolution down to avoid slow loading graphics.
Realize you can’t fix all photos; start with high-quality images. Many people have the mistaken notion that with digital photography and Photoshop you can just fix any image and make it look good. Unfortunately, it’s just not possible. For example, an image that is too dark and too out-of-focus to begin with probably cannot be salvaged because there is just not enough data there. Other times people want to photoshop out or photoshop in something in an image. While this is not impossible, you need to realize that you’re basically turning a photo editing job into an illustration job: you need to recreate whatever is missing in the photo. While something like some clouds and sky can be done easily, something complex like a hand would take some serious work.

Great photography can help tell the story of your brand, but poor photography just detracts from your professional image. If you decide to use photographs on your web site, make sure they are well-lit, in focus, and cropped appropriately. Also make sure they are adding to your message, not just using cliches that add nothing to your brand’s unique story.

Tags: photography, photos, royalty-free photos, stock photos, tips, Web Design, web site, web site design
Posted in Design Basics, Web Design | 1 Comment »

Web Site Redesign: Educational Endeavors Case Study

June 20th, 2011

Educational Endeavors has been one of our favorite clients to work with, and we’ve been working with them for about five years. When Educational Endeavors first sought us out, they had a professionally designed logo, but their brand identity lacked anything else. With their print marketing and web site we built a complete visual position for them that allowed them to stand apart in their field.

Educational Endeavors is a tutoring and educational consulting group and they compete against many national franchises. However, their personalized approach and local service appeals to many families who choose them over the other options.

Educational Endeavor's print marketing. Like any good branding system, there should be consistency from print to web.

Our initial branding work entailed creating a series of flexible, printed marketing materials. The look of the bright color palette, horizontal bands and silhouetted photographs was also picked up on the web site design. Creating a branding system for them finally made them look professional and legitimate; you may wish to read our case study white paper on how creating a professional brand image improved their bottom line.

Changes require change

Just because you have a solid brand identity system, doesn’t mean you’ll never want or need to upgrade your web site. Lots has changed in both the world of web site development and also with Educational Endeavors’ organization in the past 5 years and it was time to redo their web site. We took the opportunity to make changes to both the design as well as the functionality of the site. However, we made sure we kept the same brand identity, by using consistent, but not completely repetitious design elements.

Goals of the web site redesign:

Add a content management system. We decided to use WordPress as it’s very easy to use and the client is considering adding a blog.
Add a slideshow on the home page to be able to showcase more programs and make the home page more engaging.
Update and reorganize content to make it more in line with their current offerings.
Have more information upfront, and easy-to-find, on the home page

Before: Old design of Educational Endeavors home page

To help maintain the branding elements:

Keep the brightly colored, horizontal bands and color palette, but made the homepage’s top area more content-rich. We continued to use one color for each section as this matched up with their printed materials, and we kept the dominant corporate color green.
Keep the typography, but make it web friendly. We used the new options available through web fonts to use HTML typography, rather than graphics for the top links
Continue to use the silhouetted photographs, but redesigned how they worked within the design. We also introduced more, real candid shots on the interior pages of the site.

After: Educational Endeavors redesigned home page

With the new site, Educational Endeavors has control over the updates to their content. We created a custom-designed WordPress theme for them. If you’re considering adding WordPress to your web site, you may want to read about our advice on getting a professional involved to help you get it set up.

We were especially happy to find a solution for the slideshow on the home page that uses live text. Not only is this text updateable by Educational Endeavors, it’s also SEO-friendly.

Everyone is happy with the fact that is more relevant content on the home page. The slideshow features their programs and offerings. There is more room for additional body copy below the slideshow. The navigation has stayed very clean and well-branded. There is a sign-up form right on the homepage to join the email list.

Tags: Branding, Web Design, web site redesign, WordPress, wordpress theme
Posted in Branding, Portfolio, Recent Work, Web Design | 2 Comments »

Typekit vs. @font-face: @Font-face Offers More Choices, Better Pricing

March 17th, 2011

For years, any experienced web designer or developer relied on only a handful of web-safe fonts. These few typefaces were the only ones that were installed with every computer and therefore nearly universally available on any computer, any system, any browser. This meant that the majority of web site designs used: Arial, Verdana, Geneva, Georgia, etc.

If your design demanded something more elaborate, you had to create the typographic effect as a graphic, not as real text. If you’re not sure what I’m talking about, read: Is the Text on Your Web Site Really Text? When type is a graphic, and not real text, it is not readable by search engines and therefore not ideal for SEO.

As a web designer, you learned to work with the limitations this caused and tried to use real text whenever possible and style your HTML text using CSS tricks like background images, etc. While it worked, it meant that web design never had the same rich design qualities as print design because typographic design was never used as fully as it is in print design.

New options for web fonts

In the past few months that has been changing. Within the past year or so there are not one, but two competing ways to include many, many more fonts into your web design. This is really exciting and welcome news to web site designers like myself.

As a web design studio, we’ve been following these trends and studying both Typekit and the @font-face way of customizing the typography on the web. Both technologies are quickly adding fonts to their libraries and it’s impressive to watch.

However, for us, we plan to go primarily with the @font-face solution and this is why:

We buy most of our fonts from MyFonts.com and as of this writing they now offer more than 30,000 fonts as web fonts. It’s been absolutely amazing to watch them convert their font library to the @font-face acceptable software. We already use MyFonts for our print fonts so it makes sense to go there first for our web fonts.
The one-time-fee pricing model just makes more sense for us. The Typekit model is a per-year subscription based model. So in addition to a web hosting fee a web site would need to pay a fee for the use of their fonts.

Let me talk about each of these in a little more depth.

The ability to choosing one font for both print and web

As a graphic design and branding firm, we often work on branding projects that include the development of a logo and a web site. In fact, we find these two elements are the most critical pieces for an organization’s brand identity. That means that we look at building a branding system that works in both print and web.

When choosing a typeface that will be the corporate font for an organization, there are several considerations. First of all, there is the look of the logo itself and the wordmark that is all or part of the logo. That typography is usually a derivative of a standard typeface. Then, when we develop business cards and letterhead materials we introduce additional type elements.

Depending on the client, it may be critical that they have access to these same typefaces, other times it doesn’t matter as much. If for example, we have a design that someone wants to be able to update in-house but they only use a PC, we need to find a font that is available on both Mac and PC. This is an example of how the technology of production affects our type choice. Typekit currently has about 500 fonts whereas MyFonts has 30,000.

The ability to also find a font that has font-face capability is just one more way to narrow our choices. But like I said, there are now thousands and thousands of choices so it’s great to feel that it will not be a severely limiting factor.

One-time pricing model

The other reason we prefer font-face to typekit is that it is a pay once pricing model. This just plain works better for us when we’re estimating and for our clients.

When we accept a branding project we don’t know if we’ll have to buy any fonts, and if we do, how many we’ll have to buy, or how much they’ll cost. I never want to tell a client that there will be an extra fee to create a design with a certain font. So the font costs become an expense that we pay for.

Note: If we recommend a font for a client for their own use, (ie they will use the typeface when typing their own letters on their letterhead), they will need purchase their own license and that is not included in our design fees.

MyFonts has package deals that make purchasing print and web-based editions of fonts together an economical deal. So, if I know we’ll be creating both printed stationery and a web site we’ll purchase the font for all usages together and the cost is minimal, and again it’s an expense that we do not expect our clients to reimburse us for.

The other reason we don’t like recurring fees for web fonts is that it’s another fee to sell to the client. When we estimate on a web design project, there is usually a discussion of web hosting. Either the client has a web host they want to continue working with (and we double check that the servers will work for our needs), or we have hosting partners who we recommend and use. These estimates provide the client with an idea of their recurring costs for the web site. If I were to add-on the cost of a web font, it’s going to be an additional fee (and a recurring one) that they weren’t expecting. I also have no control if this fee is going rise. Finally, to bill for it annually is just more trouble than it’s worth. Obviously, I have the option of purchasing the Typekit license myself and we may opt to go that route, depending on what fonts are available.

First of all, I’m really excited to even have two options to consider for web fonts! We may find applications for Typekit because the two competing groups do have different typefaces and foundries that they represent. But as of right now, we are using the @font-face solution in our web designs.

Tags: @font-face, review, typekit, Web Design
Posted in Branding, Design Trends, Web Design | 3 Comments »

Web Site Redesign Case Study: ClaimVantage.com

January 31st, 2011

Recently, we redesigned the web site of ClaimVantage.com.

ClaimVantage offers a suite of software products, available in both cloud and enterprise packages, that automate and integrate insurance claims processing. Their newest claims processing product is a cloud-based solution that runs using the force.com platform (from salesforce.com). In the insurance industry, which has generally relied on large-scale enterprise software solutions, this is a very new way of approaching claims processing.

Before

After

The web site design did not reflect this forward-thinking, cloud-based solution. It looked rather rigid and out of date with a boxy design, heavy color palette and graphic elements that looked out of date. We began the web site design project focusing on making the web site design more inviting and modern looking. We also helped to reorganize content and navigation structures to make content easier to find.

The old site had several issues that we focused on improving:

Creating a look and feel that complemented SalesForce.com ClaimVantage is using SalesForce.com‘s platform and wanted to benefit from SalesForce’s strong brand identity and clean graphic appeal. The original website design used rigid-looking boxes and a dark color palette. The SalesForce.com website design is light, airy and fluid looking. It visually represents the idea of cloud-based software. ClaimVantage also wanted this look that shows their new product as flexible and nimble. By rounding the corners on the boxes and using a very light color palette we were able to create that effect. We also eliminated the graphic icons in the sidebar that looked out of date.
Making the live area more narrow. The live area of the web site was very wide, about 1250 pixels wide in fact. And, one of the most critical elements—the 30-day free trial button—was on the far right side. The design did not use a fluid layout, so we guessed that many viewers were getting a scroll bar on their browser and not even seeing that important call to action. We confirmed our guess by using Googlelab’s browser size tool and discovered that 50% of their users were probably NOT seeing that element unless they scrolled to the right. Our new design is about 1000 pixels wide so that button is nearly always viewable on a standard monitor.
Using the royalty-free illustrations in a more modern way. The company had bought the usage rights to a series of illustrations, and we felt there was some merit in keeping those graphic elements as part of their brand identity. However, with royalty-free illustrations, especially ones that are a few years old, you have to make some adjustments to make them look up-to-date. We solved this problem by integrating them more fully into a design that included modern touches such as a softer color palette and rounded corners on the boxes.
Making content easier for viewers to find. We made several important design changes to make content easier to find.
- We added drop-down menus to the main navigation, so people didn’t have to guess which section held which type of content.
- We moved critical information, including a new video and key product information to the home page.
- We listed all the case studies, rather than using a rotating graphic as navigation. Before people would have to sit and wait for an animated graphic to see the different case studies that were included on the web site (do you really think prospects will do that?)
- We increased the contrast in the color of the key call to action—the 30-day free trial button.
We reshot the video that demonstrates the software. The old site had a video which showed the key functionality of the software, but the video was all shot like one mini screen shot. It never zoomed in so that it was difficult to see the details that were being demonstrated. Using the exact same content, we redesigned the video to focus on key details, and we used a professional voice over talent to make the audio easier to understand. We also moved the video from an internal page to the home page. The video is being hosted by Wistia so we have very good data to see who is viewing the video.

We encourage you to take a look at the live site and take a look around.

Next steps

The new web site design was the first step in a series of steps that are part of making this web site a more valuable business tool.

Writing. We also worked with a writing partner to rewrite much of the content on the web site. It is now much more reader friendly, while still focusing on natural SEO benefits. This included rewriting existing content, but also figuring out what content a viewer would like to read know more about, but was missing. We helped the client focus on some of the business problems that prospects are trying to solve and emphasize the solutions, rather than focusing too much on the features of the software.
Adwords and landing pages. We also reviewed their Google Analytics and Adwords campaigns and, unfortunately, found a pretty high bounce rate and several old adword campaigns linking to landing pages that were no longer part of the live site. Our next step in the web site redevelopment process is creating more relevant landing pages and linking those up with appropriate keywords in Google Adwords.
Relaunching the blog. We are planning to relaunch their blog soon. We took it offline because the client did not have the resources to create content on their own. We will be working with them to develop content and an editorial calendar. We are planning a very hands-on approach to help them create a system for writing their blog.

This web site redesign process is not a quick, one-step process. There are multiple factors that play into whether or not your web site is successful: design, usability, content, readability, search engine optimization, and AdWord traffic, to name a critical few. We are working on a step-by-step basis to not only redesign the web site, but make it a more effective tool for the business.

Tags: Web Design, web site case study, web site redesign, website design
Posted in Business, Design Trends, Portfolio, Recent Work, Web Design | 2 Comments »

Our Most Popular Posts of 2010: What Do You Want for 2011?

January 16th, 2011

I spent some time reviewing our Google Analytics to figure out our most popular content and blog posts from 2010.

Here is the list of the ten most popular blog posts from 2010:

8 Essential Elements to a Comprehensive Brand Identity This posts summarizes the eight most critical elements that are necessary for creating a comprehensive brand identity. Also, if you’d like to see some case studies that accompany this piece, drop me a line and I’ll send you our portfolio book that goes along with this post.
Get the Right Logo Files from Your Graphic Designer. This post explains the difference between vector and pixel-based graphic files, and also explains the difference between an eps, a jpeg or a gif file.
5 Tips to Make Your Web Site Say: “Open For Business”. Five things to keep up-to-date on your web site to make sure it looks current. Quick tip: Has your copyright date changed to 2001?
Don’t Let Your Developer or Content Management System (CMS) Drive the Design This article outlines how we keep our web design projects design-focused.
Web Site Redevelopment Process: Well-Fit Case Study. I was glad to see this article gain traction because it took a lot of research to pull together screen shots from four different iterations of the web site for this growing company. It’s very helpful for showing how a brand can remain consistent even as the web design evolves.
10 Reasons To Be Your Designer’s Best Client. This post outlines how everyone wins when there is a good relationship between designer and client.
Improving SEO in WordPress: H1, Title Tags & Custom URLs (Video Tutorial). The meat of this post is covered in a video tutorial that demonstrates how to use the settings and plug-ins for WordPress to make your web site easy to find. This posted late in the year and I expect it will keep getting reader’s attention.
Logo Development Process: Greater Freeport Chamber of Commerce. This post showcases the newly redesigned logo for the Freeport Chamber of Commerce and talks about what went on behind the scenes that drove some of the design decisions.
Your Logo: Be There and Be Square. This post explains why square versions of your logo, for avatars and favicons are an essential part of your brand identity.
Connect your Words and Design for the Most Impact. A quick and light-hearted case study based on campground signage.

Interestingly, our all-time most popular post among readers comes from 2009:

The Logo Development Process: New England Breeze Case Study An interesting side note is that we are currently redesigning their logo, because of a legal name change for the business.

What would you like to read and see in 2011?

I’m interested in hearing what you would like to read and hear more about. I’m happy to see our web traffic continuing to grow and I’d love to learn and hear more about you!

Judging by this list, I see you all as very interested in truly educational blog posts‚ posts where I show and make a case for good design. I also need to do a better job showcasing our new design work as it goes live. I hope to do case studies on some past logo design and web site design work in addition to new design work.

What else would you like to read or learn more about?

Tags: Branding, graphic design, Web Design
Posted in Design Basics, Design Trends | 2 Comments »

The Most Important Web Design Trend of 2011: Trust

January 2nd, 2011

One of the basic tenets of marketing is: know me, love me, trust me, buy from me. Whether your web site is your business (for an e-commerce store), or an extension of an offline business (the majority of businesses), your web site creates an impression that either leads to greater trust, or to lots of skepticism.

I believe the most critical factor in website design in 2011 will be the ability to build the trust of your viewers. A combination of technological, economic and educational elements are coming together that puts a more urgent spin on creating a true, and trustworthy web experience.

Specifically, I’m talking about :

The continuing evolution of web design and development
The recovering economy
The greater understanding and appreciation of design and branding

These three elements separately and, more importantly, together are creating a critical movement as we march into 2011.

1. Maturing web site design means higher standards

If you’ve been in business for a while you understand that you can’t just design your web site once and think it’s done. Not only should you be updating content frequently, but you should plan for a fairly extensive overhaul every few years. The reasons behind this are that both your own business is changing, and also the web is changing. Many things that are considered “best practices” (or at least trendy) today either didn’t exist or held a different value five years ago.

As an example: a flash-based intro splash page. These were very popular five to ten years ago and someone was doing a very good job selling a lot of people on the importance of these. Now, they’ve fallen out of favor. I can pretty much guarantee there is something very popular today that is going to fall out of favor really soon. (My hunch: those walk on videos; but for right now the data shows that people react to them).

Web standards are also continually evolving. And the way we interact with the web is ever changing. Mobile applications will continue to grow in importance. We are in a period of rapid evolution in web design. I bet that if you haven’t redesigned your web site in the past few years, that you are starting to hate it.

You need to stay on top of web design and web development trends. That doesn’t mean that you need to be the leader. But an out-of-date web site screams that your organization is not keeping up.

2. Moving into economic growth mode

While the economic growth may not be robust, the US economy is no longer contracting. Business owners are starting again to invest in the growth of their business. We are seeing it with with our own sales. In 2008 and 2009 business owners were hunkering down and saving any cash they had. Now, it’s time for the survivors to think about moving forward.

The first movers are already investing in a better web presence. Have your competitors already launched a new web site redesign? Is your web site showing you as out-of-date? It’s time to get moving.

During the recession, many companies thought it was OK to take a do-it-yourself approach to your web site design. No one wanted to be seen as frivolous. And a plethora of low cost, do-it-yourself templates and web-building tools made it attractive. Now that some organizations are getting busy again, they realize that it’s a better use of everyone’s time and money to hire an expert to do it right.

Also, the recession forced many unemployed professionals to consider becoming entrepreneurs. These accidental entrepreneurs probably lacked the funding and planning to hire out for their first web site design. If you’re in this group, and have realized that you’re ready to take on the challenges of being a small business owner, then you need to show the world that you are serious by having a professionally designed web site.

3. A greater understanding and appreciation of design and branding

As I explained in a recent blog post, I’m happy to say that there is clearly an increase in the awareness of the importance of good quality design, well-designed websites, and branding. That means that people are judging your web site as never before.

People are more savvy about how poor most do-it-yourself sites look. They are able to recognize stock templates, junk photography and out-of-place graphics. All of these portray you and your organization as unprofessional and lacking seriousness about your business. It’s time to get serious about redesigning your site.

How to build trust

We are entering a time when people will find you and judge you by your web site like never before. You don’t just need a web site. You need a good one. Previously, there was the idea that you have to have a web site to be legitimate. But we’re beyond that. You can’t just have a web site; it has to instill trust.

You can get started by reading my suggestions on the Top 10 Web Design Trends for 2011 That Will Help Your Small Business.

You need to present yourself and your organization in a way that shows you are real and presents a solid brand identity.

All of these suggestions revolve around the fact that you can’t cut corners with web design and expect people to trust you. Your clients don’t want to work with someone who skimps on quality, sells snake oil, or who isn’t serious about their own business.

They want business relationships with people and firms that they can trust.

Tags: 2011, trends, trust, Web Design
Posted in Branding, Business, Design Basics, Design Trends, Starting a Business, Web Design | 6 Comments »

Top 10 Web Design Trends for 2011 That Will Help Your Small Business

December 31st, 2010

It’s the new year and it’s time to look at how you can improve your organization’s web site in 2011. These 10 tips for improving your web design will not just make for a better looking web site, it will make for a more effective business tool.

Here’s my Top 10 Web Design Trends for 2011 That Will Help Your Small Business. I’ve presented these David Letterman-style with the reverse count down.

10. Have a system for creating and maintaining content. At the core of this is a CMS (content management system) enabled web site. But more than just having the tool in place, you need to be trained on how to use it, and have a plan for creating and updating the content. We’re hearing from more of our clients who now realize that in addition to their CMS they need editorial help with creating or editing content. Read these posts for some advice about choosing a CMS or having a design-driven web site development process.

9. Integrate your social media channels. Integrate them both visually and strategically. In terms of web site design, make it easy for people to find you by adding direct links to Twitter, Facebook or LinkedIn profiles. But more importantly, figure out a strategy for how your web site fits in with other social media channels. Will you show your Twitter feed on your home page? Does your Facebook page graphically match your web site? Do you promote your blogs posts on social media channels? Does your Facebook wall redirect friends back to your web site?

8. Embrace design details that are reminiscent of the beauty of print. For years, designers have struggled with the lack of control that is at the heart of web design. And while there will never be a way to control every detail from one browser and viewer to the next, that doesn’t mean we need to strip away the qualities of great design. Because of this lack of control, for a long time there was a simplicity in web site design that was not about beautiful minimalism, but rather about just playing it safe. Now, there is a return to some of the things that print, because of it’s long history, has done splendidly. Many details such as texture, imagery, hand-drawn effects, and contrasting typographic styles can also be part of great web site design. This return does not mean the end result is print-like, but it’s the idea of taking the time to put in the many design details that really make a web site gorgeous.

7. Use HTML-based text when possible, rather than graphics. If you still have a lot of graphic-based text images on your site, think about replacing them with HTML and CSS based text. This will make the text readable by search engines, make content more easy to update, and it should load faster. If you are hoping to keep a unique look, there are several web-based font tools that are starting to gain traction that will allow for more variation in font choice, while still being “readable” to search engines and text readers. If you don’t understand the difference between text as graphics and as HTML read this.

6. Systematize SEO best practices into your web site design. Tools like the Platinum SEO Pack for WordPress make it easy for you to remember to add keywords and descriptions as you build new web pages. Make sure your CMS has an easy way for you to add this meta data. See our previous post and video tutorial about setting H1 tags, title tags and adding descriptions in WordPress.

5. Say goodbye to the cheap clipart and poor photography. I’m amazed this is still an issue, but there is still loads of tacky illustrations and photography scattered throughout the web. They say a picture is worth a 1,000 words, so you can calculate that your cheap looking pictures are saying many, many bad things about your organization. Find pictures that add value to your site’s design, or use other graphic elements. For some tips for working with royalty-free and low-cost photography read this post.

4. Register and host your web site and your blog at your own domain. If you have a web site address that includes .wordpress.com or .blogspot.com, etc. Move it! It screams of being amateur. And you really have no good way of fully protecting all of your content from the whims of the web host. Hosting at your own domain name also helps with your brand awareness and assists prospects in remembering your domain name.

3. Keep it real. If you are a small business owner, don’t try to make yourself into a faceless organization. Talk about yourself and your employees by name and ideally show your face, too. If someone meets you at a networking event and then goes to your web site, there should be an authentic connection between the two. And always include a physical address where you can be reached. Having no contact information on your web site is a big red flag that makes people question the legitimacy of you and your company.

2. Does your web site quickly sum up your brand? The logo, the colors, the imagery, the navigational elements and the words should all quickly assure your viewers they have come to the right place. If your web site design doesn’t match your other collateral, or the tone of the writing is too stuffy, or if the design just doesn’t the feel right, get some help assessing how to fix it. Often an outsider, whether that’s your clients, your employees, your prospects, or a graphic designer, can help you pinpoint what the problems are and prioritize a plan for fixing them. If you need a better understanding about how to build a comprehensive brand identity, read this popular post.

And what is the number one, most critical aspect of web site design in 2011? Read tomorrow’s post to find out.

Tags: 2011, trends, Web Design, web site design
Posted in Branding, Business, Design Trends, Web Design | 4 Comments »

Web Design and E-Newsletter Design Tip: Links Default to Blue

November 10th, 2010

Most web browsers and HTML-based email programs show linked text as underlined and blue, unless you change the default settings.

Changing the style of your links is an important way to add visual appeal to a web site. While underlining is the default style for indicating links, most web site viewers are savvy enough these days to recognize colored text or bolded text as links. For example, on this blog my links are set to be green without an underline. There are many different ways to indicate links—and also rollover (hover) states—and these should all be well-considered by your web designer so they complement the design of the web site.

Remember, by default, most HTML readers (ie browsers, email programs) will indicate links with blue and underlined text, unless your web designer has set the CSS style to something else. Leaving your links at the default blue underlined style is a red flag (or a blue one?) that your web designer did not take the time and effort to look at the details of your web site design.

This default link style makes your web site, and therefore your organization, look sloppy and unprofessional. At worst, it can make things pretty unreadable.

Check out this e-newsletter I received recently from Time Warner Cable.

Yes, those blank areas are blue links. And the key words within those links are unreadable, making the entire message almost worthless. (I’m not sure why the web site address link did end up white; they should all look that way!)

Tags: links, Web Design
Posted in Design Basics, Web Design | 2 Comments »

Don’t Let Your Developer or Content Management System (CMS) Drive the Design

October 21st, 2010

In our previous post we explored how we make a decision on which Content Management System (CMS) to recommend to our clients for their web site. As I wrote, we use a range of tools to design and build web sites that our clients can update and edit on their own.

How do we keep the web development process design centered?

When you consider that your web site is likely to be your number one place for building your brand identity and brand equity, you want to make sure that your chosen CMS and the web development process allow for the web design to be rendered as it was imagined by your professional web designer.

Our web development process starts with design work in PhotoShop. We show our clients mockups that are not fully functional, and in fact are sometimes nothing more than a large jpeg. We’ve found this workflow to be the best use of our time, and allows us to focus on the design and branding elements without taking too much time to build out HTML, CSS or other functionality.

Understanding Web Design

But this process would not work if we didn’t understand the parameters of effective web design, and understand fully the capabilities and limitations of HTML and CSS. For example, during the design process we are aware of when we are using HTML-rendered type and when we will be creating a graphic element. We are aware of showing mockups that demonstrate content being presented in a way that works with the chosen CMS.

Our goal is to create design mockups that will translate with 98% accuracy to the live site. Otherwise, there is a problem.

That means we only use certain web building tools and only work with the best developers. In general, we avoid highly templated systems because it’s unrealistic to expect to create a unique and compelling brand identity for our client if we are highly limited by a generic template. We also demand that our web developers use the best CSS practices to be able to render our design as close as possible to our mockups.

For each content management platform, we understand the functionality of how it pulls in data. So while we say that our designs are not CMS-driven that doesn’t mean that the CMS is not a consideration.

For example, for branding purposes we may want to use graphic images rather than text in the navigation of a web site. We did this recently with the site: PolyphonyHS.com. No matter which CMS we worked with, the client will not be able to edit the items in their top level navigation. But that’s OK. We knew the client’s expectation up front. Also, for SEO purposes those words are not content-rich; yet in terms of building a brand identity, they are critical.

The navigational area of PolyphonyHS.com which uses graphic elements in the navigation. Regardless of the CMS tool, these items will not be editable.

Why a designed-focus approach is critical

For many small businesses, their web site is the most widely seen component of their brand identity. Your prospects are going to your site to learn about you before they meet you or use your product or service. Or, later in the sales process they are visiting your web site to validate a choice to buy from or do business with you. A site that has weak design (because of a poor choice of CMS or just the effects of an inexperienced web designer) has the potential to lose a client’s business before it even gets started.

Tags: Branding, cms, Web Design
Posted in Branding, Web Design | 2 Comments »

3 Considerations for Choosing a Content Management System (CMS)

October 21st, 2010

I’m often asked which content management system (CMS) is best? Choosing a CMS can be challenging and there are many considerations.

At Visible Logic we find that we are developing web sites in a number of different CMS platforms. We have used WordPress, ExpressionEngine, and Joomla extensively, and have a project that is just getting started that will be developed in Drupal. In addition, we have worked with developers on fully custom-built tools. Therefore, we are using many of the major content management tools that are available.

Our top 3 considerations when recommending a content management system

There are a number of considerations that go into helping us determine which platform we will develop in. But these can be boiled down to these three key questions:

What are the major components and content of the site? Pages, blogs, forums, calendars, news listings, portfolios, photos, e-commerce capabilities, etc. What type of content will the web site display? Will it have a login area for content only available to certain users?
What are the functional requirements of the site? The content may be presented in a fairly page-centric way, which is very straightforward. Or there may be content or data that needs to be triggered by date or by the user’s login information, etc. Are there databases, APIs, or other software tools that need to integrate with the web site?
Who will be updating the site and what is their comfort level with computers and the web? Frequently we have a handful of key personnel who get trained to use whichever CMS we develop. They are willing to invest some time into learning the platform and understanding the tools. Other times, it may be just a business owner and he or she may be short on time and/or not very comfortable on the computer. In that case, we want to make sure we are creating a very easy-to-use tool. One of the key benefits of a content management system is the ability to update your web site yourself, but if you don’t understand how to use the tool you’ll either avoid making updates or end up paying someone to make them for you.

The bottom line for us is that the CMS needs to be able to handle the content and functionality demands, and still be usable by our clients.

You’ll notice that design needs are not addressed in the above considerations. It is our strong belief that design should remain separate from the content management tool. Our short list of preferred platforms will adapt to whatever design solution we think is best. As long as you have talented developers working with the tools (and we do) worries about compromising the design are not part of the question.

How do we choose?

In general, our clients and potential clients do not have a Content Management System picked out when they ask us for an estimate, although it occasionally happens. Rather, they are looking for our expertise in helping them to select the right tool.

The reality is that there is no magic bullet CMS. Usually more than one tool could get the job done.

WordPress: If you expect to have frequent, small changes WordPress offers an editing platform that is not intimidating and has been compared to working in Microsoft Word. If you plan to have a blog, it is arguably the most popular and widely used blogging platform available. The presentation of content is generally what we call “page based” which works for many marketing types of small business web sites. Because of the simplicity of the tool, WordPress sites can be set up quite quickly, but do have the potential to handle more robust expansions.
Joomla: Compared to WordPress, the capabilities of Joomla allow for less of a page-focused presentation of information. If you want to be able to easily present different content types and have content in more than one place on the site without maintaining that content in duplicate forms, Joomla makes that easy. We find the learning curve is steeper with Joomla, but once people spend time with the tool they like the more robust functionality of it.
ExpressionEngine: ExpressionEngine is not free, but the low licensing fee is generally not a a show stopper. In addition to handling regular page-based content it can easily expand to host a blog and a forum. Because ExpressionEngine is a paid product some people feel the support is superior to open source choices.
Drupal: Drupal is extremely flexible with the type of content it can handle, which makes it a great choice for complex projects but may be overkill and potentially more costly for smaller, more simple sites.

At Visible Logic, we’ve made a decision to use the best tool for each web site and not limit ourselves to only one platform. We do some development work directly in-house and have built great relationships with development partners such as Dunkirk Systems and Transit ID for more complex work. With that combination of resources we can offer the best solution for each individual client or project.

We have a full arsenal of tools at our disposal. And we find that we add value to web design and development projects with our ability to help our clients sort through the choice of a content management system.

Universal choices

We prefer to use tools that are widely available and economical. With so many free open-source tools and low-cost options there is nearly always a way to develop your web site without having to pay large upfront or recurring software fees.

We also want to ensure that our clients “own” their web site and its content. That is why we would never recommend a tool that essentially leaves you at the mercy of an outside vendor. Using open-source and other commonly used tools, we are able to promise to our clients that should something happen to us (God forbid) someone else could step in and take over the site. We also have enough confidence in our work to bet that our clients won’t go elsewhere unless something does happen to us.

How did you choose your CMS? Did you do your own research, or did your web designer or developer help you with the decision?

Tags: cms, content management systems, Web Design
Posted in Web Design | 5 Comments »

Search

Recent Posts

Categories