Award Winning Web Design

By Collin Hummel
FindLaw Design Lead

In the past few months, FindLaw designers have been transitioning from a traditional set of client intake questions (elements like logos, photos, colors) to a Creative Brief intake process. Our designers go beyond the element questions and ask the client about the  purpose of the site and how it relates to the clients’ goals. Any Web designer can add a logo or tweak colors, but a skilled design expert, like a FindLaw designer, will be able to better serve a client by addressing the overall goal of a site.

Yes, we still want to hear about the aforementioned element set (logos, colors, photos), but we are more concerned with getting on the same page as the client when it comes to a firm’s audience, competition, and ways of serving and representing clients. By having a more in-depth discussion with our clients, FindLaw’s designers are better able to “hit the mark” sooner, providing a site design that will better serve our clients as well as  their potential clients.. While this process may take a couple of minutes longer than previous design ideation meetings, the result will be a stronger, more effective product.

A Creative Brief is defined as “A document that outlines the strategic direction for creative development, covering the specific task at hand, the communication objectives and strategy, and any elements that the executions must contain.” For FindLaw’s customers, this brief will serve as a document that, once approved, will be the basis for the design direction the designer will take when creating the overall look of the site.

On an Initial Call, a FindLaw designer will start the intake process by asking the client questions relating to the firm’s current marketing situation and how this site should serve the firm’s goals. While the designer will ask questions relating to branding, colors, and example sites, the main focus for the 15-minute discussion will be around the goal of the site, not simply the desired look and feel.

By getting to the heart of the site’s purpose, a FindLaw designer will be able to create a design that fits the firm’s needs and objectives. In years past, FindLaw’s designers spent the time they had on calls going over which sites a client likes or what logo they may or may not have. While this served us well to some extent, a Creative Brief will offer a higher level of service.

Here is a great example of a Creative Brief filled out on a recent Initial Call. (Some information has been changed for purposes of privacy.)


0 Comments »

Color Palattes!
Choosing colors is often overlooked in developing a website. There is actually a particular thought process that occurs when a designer chooses a specific color palatte. Outside of a Firms pre-existing logo colors, there are limitless color combinations. The challenge is for the designer to find combinations that work well together, are legible together, and are congruent with the target audience.

Balance
A successful balance of colors working together is a very effective way of triggering a person into feeling a certain way. The process uses combinations of hue, brightness and saturation of all colors. Viewing certain colors can effect ones mood and this will subliminally give an association to a personal emotion. The first thing to decide is which main emotion the Firm would like to portray to potential clients. The following paragraphs are geared to breifly educate and provide assistance in selecting the most appropriate color palatte:

Muted Colors
Muted color palattes have more muted tones that softly work together in harmony.
These color combinations work best for sites where the lawyers would like to portray a feeling of helping, calming, healing, comfort, kindness, or sympathy.
Some muted Colors would include shades of powder blue, taupe, sage, rust, plum and others. These colors often work best with a clean white or cream back color to set off the harmonious color combination.
 
Bold Color
Bold color palattes include more sharp saturated colors that can contrast. These color combinations work best for sites where the lawyers would like to portray a feeling of being straight-forward, powerful, aggressive demeanor, bold and exciting presence, taking-action attitude. Some Bold Colors would include reflex blue, bright orange, red, charcoal, lime green, teal and many others. These often work best when only a one or two bold colors are associated with other colors that are muted or dark so that the bold color can shine without being overpowering.

Professional Color
Professional color palates have more regal combinations. The portray feelings of security, validation, wisdom and trust-worthiness.
Some Professional Colors include Burgundy, purple, navy, tans, forest green, gold as well as others.
 
Within each of those three categories there are other ways to further refine your color selection. Is the target audience more men or women? Do they want to appear traditional or modern? These questions affect not only the layout and photos chosen, but also the color palatte. If you'd like to play around with color combinations, or to see some color palattes that others have created, visit www.kuler.adobe.com.

-Melinda Johnson
Web Designer

I'm sure at some point in the process of creating a website (or having a website created for you) you looked at your design and wondered that exact same thing. That dummy text filling your page is referred to as Lorum Ipsum and it has been in use since the 1500s.
Want to know a little more, check out www.lipsum.com.

Collin Neugebauer

Breaking the myth of the crammed Web site

My first real introduction to technology – at least in terms of something I was to interact with – was at the age of 9 when I used an Apple IIC to play Oregon Trail. And while I may have died a virtual death of cholera due to my lack of hunting skills (Hey, who hunts deer by walking in straight lines anyway?), leaving my wife, two children and a set of oxen to fend for themselves in the hostile American West, my “real” self loved this new world filled with pixels and floppy discs.

My first experience with the Internet, aside from being told that it was a series of inter-connected tubes, was late in college when I logged on to AOL; I indeed “had mail.” What a world. One interesting fact about the early years of the internet was the lack of page scrolling. AOL, for example, wouldn’t allow users to do any vertical scrolling, instead relying upon text fields and list boxes to display information (not to mention splash pages – yikes!). This new technology was limiting and, for me, a bit cumbersome.

The same can’t be said for my son whose first foray into technology - specifically that of the Internet - was at the ripe old age of 2. He could log onto the Web, open up his “favorites” folder and peruse a variety of Web links (Wiggles, Barney, Disney, et al). The amazing thing (and what is the most pertinent in terms of this article) was his natural inclination to scroll down the page. Inherent in his and each of our Web experiences is that we will and most definitely do scroll. By embracing this knowledge, FindLaw’s talented Web development teams don’t have to worry about cramming as much information and imagery at the top of a Web page as we first believed or were led to believe. We can now design open and user-friendly designs.

In the beginning (right around Al Gore’s creation of the Web) Web designers and developers looked at the Internet much the same way a newspaper editor looked at a newspaper. Most newspapers were (are) displayed to potential customers folded in half; meaning that only the top half of the front page is visible. Editors knew that this space, which they called “above the fold,” could convince a reader to buy the paper as it would be the first information viewed by their readers.

As time passed and research became made available to them, Web designers began to see that users may not necessarily come to the home page (think SEM and the value of targeted content) upon first visit to a Web site, instead coming to a more specific search-related page on a site. Also, users expected that whatever page they were to land on or visit, they would have to scroll. After scrolling became a consistent implementation on all Web sites, Web browsers alleviated the concern that users won’t scroll.

Famed Web expert Jakob Nielsen touched on this topic 3+ years ago when he said, “On the Web, users expect vertical scrolling. As with all standard design elements, it’s better to meet user expectations than to deviate.”

Nielsen also wrote that users will stick with a site as long as they feel that they are getting closer to their goal of finding the information they want. This search is referred to as the “search for sent.” Draw the user in with compelling imagery and pertinent text and they will continue to move through your site; this is where we come in.

When designers at FindLaw are asked by others (clients, the field, et al) to place as many elements above the fold as possible, the answer indubitably should be: “Where is the fold?” With viewing screens coming in all different sizes and resolutions – from iPhones, PDAs and Blackberrys to widescreen LCD monitors - where then is the fold? Unlike the aforementioned newspaper, the fold of a Web page has no fixed location. Most data shows that the largest majority of page “folds” can hover anywhere from 600 to 610 pixels – and this accounts for only 10% of the folds! If you add in the next few largest fold distributions (570 and 630 pixels), together they account for only 26% of fold locations. Basically, the fold is everywhere! How would you account for where the fold is since we don’t know what each user’s default font size, window size, or screen resolution is? If we design for one, we lose the rest. Braced with this knowledge and the current shift to Web 2.0’s cleaner and less cluttered sites, designers are more in tune with users as well as the presentation of information.

That said, FindLaw’s Web Designers do place great emphasis on what goes atop a Web page, but not at the sacrifice of the entire site - much less the user. The top of a FindLaw-created home page should, in most cases, answer these questions:

1. Who is the firm?
    • Name, location, practice area(s) focus
2. How can I contact them?
    • When and how (phone, email, what hours, etc).
3. Why choose this firm over the competitor?
    • Market differentiator

Answering these questions in a graphically powerful (and hopefully unique) way helps the user make a decision in a timely and non-frustrating way. With abundant data showing that the majority of Web users scroll and that most sites have a scroll-bar, we can better design sites, placing data and imagery throughout the site/page to improve the overall user-experience. Some liken this to the analogy of an attractive person who has no personality: If a site crams as much info as possible at the top of the page and leaves the rest of the site “empty,” the designer has failed. If a designer has a site that is well thought out and designed top-to-bottom, the site has a better chance to be successful — good-looking AND smart!

While the Web is littered with valuable data supporting that there is indeed no fold, here are a few very supportive metrics based off a 2006 (and a subsequent follow up in 2007) ClickTale* study of over 120,000 page-views:

• 91% of all pages viewed had a scroll-bar
• 76% of all pages viewed that had a scroll-bar were scrolled to some extent
• 22% of all pages viewed that had a scroll-bar were scrolled all the way to the bottom

Are users less likely to scroll to the bottom of a page? No. Visitors are equally likely to scan the entire page, no matter the length. As my 2-year old son proved (and seemingly anyone who uses the Web), people scroll until they find what they are looking for. Scrolling is also associated with Web 2.0 design because big, clear text and spacious, clean content implies longer Web pages.

What recommendations do the designers at FindLaw have for their clients (and the field)? Because users are more inclined to scan Web sites for data instead of reading a site line-by-line:

• Divide your layout into sections with graphics to draw the user in.
• Let your designers create a visually compelling header area to draw users in and make them want to scroll. (Click data research from CrazyEgg shows that even though a tag line may not be a link, users are clicking on it as they expect it to bring them someplace. Use this as an opportunity to sell your firm’s overall message and get users to delve deeper into the site.)
• Think of your firm in comparison to your competition. Why choose you? It’s not simply a matter of “we return phone calls promptly” (all firms do and should), but think larger — “We get results prior to court. We are former police officers. I am a former judge.”
• As users visually scroll, minimize written text (maintain the content minimum as to not affect the search engines’ ability to find your site) and maximize images. Entice users visually to stay on your site.
• Make the search box prominent as users find these mandatory in their search for answers or help.

In the end, trust your designer and the designer’s experience and expertise in creating sites that not only attract users, but engage them. Let your designer open up your site to give the user more visual breathing room and don’t fret that a user won’t know what to do; they are more savvy than we give them credit for.
...

Besides, you've been scrolling through this entire entry ;-)

*Data provided by ClickTale who collected a subset of roughly 120,000 page-views, as well as the research done by Jakob Nielsen.

Collin Hummel