'Net Features : website design

Award-Winning Websites That Inspire Us

Allison Howen — Thu, 25 Apr 2013 18:20:00 GMT

There are millions of websites on the ’Net, so how do you get yours to stand out from the competition?

While the answer to this question depends a great deal on the type of site you run, implementing a combination of design best practices and popular trends will typically put your site on the right track. That said, sometimes we need a little inspiration.

One way to get inspired is to research the sites of some of your business’s biggest competitors, as this will provide you with some elements, features and functionality to consider incorporating on your site. However, another way to get inspired is to take a gander at some award-winning sites.

For example, Website Magazine’s redesigned website was recently honored with a 2013 “Best Magazine Website” IAC (Internet Advertising Competition) Award, yet it was far from the only site to be recognized by the IAC. Get inspired by looking at the examples below to learn about other companies who won a Best Website award from the IAC in 2013:

Site: Cincinnatiusa.org

Award: Best Government Website

Takeaways: This website’s navigation rocks. Not only does it have an easy to navigate drop down menu bar, but it also features parallax scrolling, which is currently a hot and unique design trend.

Site: Theupsstorelocal.com/3358/

Award: Best Small Business Website

Takeaways: It is nearly impossible to overlook the location or contact information for this business, because The UPS Store prominently highlights all of its important information on its landing page, including directions, phone and fax numbers, email address, hours of operation and UPS Air pickup times.

Site: Noonedeservestodie.org

Award: Best Advocacy Website

Takeaways: The use of images and text on this site may be jarring, however, this strategy gets to the point and demands attention. Moreover, the Lung Cancer Alliance’s site offers social login to its visitors, as well as features parallax scrolling.

Site: Assetmanagement.fidelitycareers.com

Award: Best Employment Website

Takeaways: Fidelity puts an emphasis on unique images on its career site. Not only does the main image on this site include interactive tags, but its large drop down menu also includes a variety of images that makes the company more relatable and desirable to work for.

Site: Coorslight.com/projectcold

Award: Best Beverage Websites

Takeaways: As an alcoholic beverage company, it is very important for Coors Light to have a secure website in order to keep minors out, which is why the company implements an age-based security block upon arrival. That said, the company also features a big background image that includes movement, as well as a simple menu for visitors to navigate the site with.

Site: Adventuresbydisney.com

Award: Best Travel Website

Takeaways: Disney uses a combination of high-resolution images and interactive maps to grab its visitors’ attention. Additionally, the company makes it simple for visitors to let their friends know about their dream vacation by featuring a share menu directly on its rotating images of travel destinations.

Site: Jeep.com/en/

Award: Best Automobile Websites

Takeaways: Not only does the large, high-quality image on the Jeep website demand attention, but the image is also interactive, which allows visitors to gain insights about each vehicle by simply moving their curser around the image. Furthermore, this site features very clean and easy to read menus on the top and bottom of its landing page, which includes a local feature to help visitors find nearby promotions.

Site: Garrettpopcorn.com

Award: Best Retail Website

Takeaways: Garrett’s site is simple but fun, as it features an interactive photo, prominent call-to-actions and most of the business’s other important information above the fold. In fact, without scrolling, site visitors can click on a variety of icons to take actions such as create their own tin, register to the site, browse gifts, find a nearby shop, join the company’s mailing list, read Garrett’s blog and leave a message to the company.

Site: Sixflagsjobs.com

Award: Best Employment Websites

Takeaways: The Six Flags’ employment website is colorful with a bright menu bar. That said, the real star of this site is its use of videos, which are prominently featured for each of the career categories.

Site: Chefboyardee.com/cooking-with-kids

Award: Best Consumer Goods Website

Takeaways: This site not only features delicious recipes, but also high-quality images and large call-to-actions. Moreover, the site uses parallax scrolling, which enables visitors to learn recipes step-by-step as they scroll. It is also important to note that as visitors scroll through the site, they are exposed to additional interactive content, including videos, social sharing features, as well as recipe ratings and reviews.

These 15 Search Boxes Deserve Another Look

Linc Wonham — Thu, 22 Mar 2012 19:00:00 GMT

No matter what the end goal of your Web property may be, it is imperative that you provide visitors with every opportunity to find your products, understand your services and consume your content.

With just a fraction of a second to make the all-important first impression, the placement and design of your website’s search box is critically important to this process. Too often, however, the presentation and execution of this element is undervalued in the design process.

Internet retailers and information publishers can pay a particularly high price for making their website visitors search for the search box. If it is not immediately noticeable and recognizable for what it is, users will not only struggle to find what they are looking for but will also most likely get what they need from a competitor’s site.

Below is a collection of search boxes from a variety of websites that use a number of different strategies to make the boxes stand out to their visitors. Whether it be through the use of color, images, size, placement, text or all of the above, the following examples may offer some inspiration if you are considering a redesign of your website search box.

Shopzilla

New York Magazine

Elemental Product Page Design

Administrator — Mon, 13 Feb 2012 20:00:00 GMT

Once an Internet retailer gets a prospective buyer on their product page, there are quite a few design elements and functions that must be present for today's savvy shopper. Product pages can be complex and require ongoing testing, but starting out with some basics will ensure that the conversion opportunities earned (or bought) won’t be wasted.

In today’s E-commerce Express newsletter, we looked at some essential and elemental product-page designs, identifying some patterns and exploring the norm as it stands today.

Product Titles and Descriptions: It is unlikely that you will have a product page that is devoid of any product title or description, but their presence cannot be emphasized enough. What is most important about product titles and descriptions is how unique they are in identifying the differences between other products. Product titles and descriptions must also be unique as they play a fundamental role in search engine optimization. Basing product title-naming based on keyword volume and buying-intent levels is Step One in elemental product page design.

Price and the Buy Button: If there is one area of focus for e-commerce product page designers, it is the intricacies of layout of price indicators and buy-now buttons. Website Magazine has written extensively on the topic of buy-now buttons, but remember that size, color, text and position of these two elements (which ideally should be located near one another to support eye-gaze flow) is of paramount importance.

High-quality Images: The Web is a visual medium and those merchants who optimize the image experience for users will be those ringing the cash register at the end of the day. Today, users expect product images for two reasons – to confirm that what they are looking for is in fact what attracted them to the page in the first place, and of course to evaluate quality of those products. To satisfy users, merchants must ensure that image use is consistent across their sites (and marketing/advertising), and that they are sized in a way so that users can examine the product in more detail.

Options and Functions: While images engage, it is the options and functions within product pages that initiate a commitment from users to continue through the sales funnel. The aim with these general design elements is to give the user some control over the specifications – from colors, sizes/dimensions, styles, etc. The integration of these elements can be technically challenging and present some design layout issues, but their presence is of increasing importance.

Well-built product pages do several things well. They provide a descriptive title that matches the query of the user; they provide information that shoppers need; they indicate product availability; they provide information on warranties and policy, and yes, they must feature a means to actually proceed through the sales funnel (the buy button). These are basic or elemental requirements of product-page design, but remember that testing these elements (placement, style, etc.) is the only way to know for sure what is appealing to users.

Keep in mind that the elemental design components of a well-built e-commerce product page address herein is only a start. There are quite a few others and Website Magazine will explore additional elements such as the inclusion of video, customer reviews, bulk ordering, available stock, wish lists, delivery details, trust signals and social media integrations in the next edition of the E-commerce Express newsletter. Make sure to sign up so you don’t miss out!

Web Design's New Business Role with Paul Williams

Mike Phillips — Thu, 01 Jul 2010 19:30:00 GMT

Good Web design is essential to every online property. Whether generating leads or selling products, an attractive and functional design will keep users on your site. On the other hand, a poor design or difficult navigation will chase users away and most of them will never come back.

Paul Williams, President of ISITE Design, was kind enough to spend a few minutes with us to talk about the changing landscape of the business of website design. Williams has helped several major brands - including Nike, Nintendo and GE - improve their bottom lines with his wealth of experience.

As a Web design firm, what has contributed to your success?

We've been around for 13 years. In that time, ISITE has morphed from that agency you would come to with a brochure and wanting on online version of it, to a business consultancy. Our key differentiator is coming in and changing the conversation. These days, it's not so much about design but the basis of their business - what their user research and personas are telling them. We develop a close relationship with our clients. We help knit the online channel to their sales methodology.

For example, when clients think about changing their sales methodology (which is happening a lot these days), it's a perfect time to rethink their online strategy as well. In a sales cycle, people are validating what they see on the Web. Our clients are building out their two- to three-year plan and we help get those plans together. They are thinking about the future, and the priorities of their online channel.

Are most of your clients these days actually focused on their long-term design needs rather than just an immediate "fix"?

That's a key qualifying question for us [when working with a client]. We want them to think about it as a business process with us. Very few other agencies are doing this, but it's an area that is rapidly growing.

Do you find design these days is more focused on usability or aesthetics?

That depends on the target audience. Brand-forward, or brand-first is not necessarily wrong. But as an e-commerce site, you better be focused on conversion and usability. Overall, the "why" is taking place of the "how." The strategic approach is what sets up the long-term relationship and repeat projects. Sometimes it paints us out of a job -- we tell them they need to build out their own team.

Where is the tipping point for a company to create their own design team, rather than outsourcing?

What is the role of the website? How well is my company set up to put together a design team? Companies might have a webmaster, but they need to rethink their processes. For them, it depends on the industry, the website objectives and the availability of talent.

How often should a company reassess their design and consider redesigns?

It depends. One of the major travel sites, for example, is literally updated every hour with continuous improvements. That's not practical for every business. But if you're in a business focused on conversion on the Web, you need to be constantly measuring and updating. A common theme is improvement of current initiatives to improve after launch, rather than building new ones.

Paul Williams, president and co-founder, launched ISITE Design in 1997. As president, Williams leads ISITE Design's corporate strategy and plays a key role in client strategy, design, and analytics. Williams was recently recognized by the Portland Business Journal as one of Portland's top executives under 40.

The New Rules of Website Design, Usability and Revenue

Linc Wonham — Thu, 17 Jun 2010 02:30:00 GMT

Your website can be your business’ greatest asset or its biggest liability, depending on how well you understand the relationship between visual aesthetics, usability and sales. Digital marketing leader OneUpWeb has released a new study that breaks down the keys to success in today’s ultra-competitive environment.

The white paper, Revolutionizing Website Design: The New Rules of Usability, reveals the new standards in website form and function and shows how they directly affect sales. To identify the formula for building balanced websites that deliver maximum returns, OneUpWeb evaluated 100 sites across four different industries: e-commerce, business-to-business, travel and hospitality, and higher education.

Among the findings on which they based the report were the following:
•    E-commerce websites had a 45-percent task failure rate
•    Participants in the study were “skeptical” of companies whose sites lacked professional-quality design, regardless of the ability to navigate those sites
•    Travel and hospitality sites received the lowest user-experience ratings of the four industries

Follow the above link to download the free report and determine if your design is driving customers to or away from your business.

CNN.com Gets Major Overhaul: What We Can Learn

Mike Phillips — Mon, 26 Oct 2009 23:30:00 GMT

CNN has released a redesign of their website and it is substantial. And when a property as valuable and recognizable as CNN.com undergoes a major overhaul, you can bet plenty of thought went into it.

The new design appears focused on two factors that often are at odds with each other - 1) suggesting content for users to read and encouraging clicks, and 2) helping readers find content they want. Also, you will see that the site is much cleaner and easier to scan without sacrificing content - not an easy task. To help with this effort, in part, text size has been reduced in favor of more white space and better organization. While readers with less-than-ideal vision might find this change difficult to cope with, it does offer an information-packed page without feeling overwhelmed.

Let's examine the CNN redesign in a little more detail and expose some good tips for Web professionals and designers. Below are five observations and what we can learn from them. Below that are screen captures of the old and new CNN.com to help illustrate.

Branding is everything. What stands out most on the new page? Red. Over the years CNN has become known for their red logo. However, they have now gone to using "CNN Red" as an entire branding mechanism in itself. It's bold, and looks authoritative. Closer attention to the logo shows that not only is it centered on the page (it's impossible to ignore when the page opens) but they dropped the ".com" - now it's just "CNN." This is worthy of some attention and might even spark some debate for your business. CNN is making a statement here; they are more than just another website, they are a leading, globally respected news source who need not remind users that they are "on the Web."

Should you consider a similar step for your site? That depends. If you are a pure online presence, billing it as such with "YourBusiness.com" makes more sense than just "Your Business." After all, the point to drive home with users is that you are an online business. However, if you have brick and mortar locations, or other offline branding channels (such as a print publication or physical product) dropping the ".com" has its merits. For one, it signals that you are a major, respected brand and not just another website or affiliate.
Navigation is key. Another not-so-subtle change is that navigation elements are prominently displayed at the top of the page. Before, navigation links were small and obscure - a reader's eye was drawn to just about every other element than the navigation. Now, you immediately see the option to get straight to what you want. At the same time, the strong images, "Highlights" and "Latest news" directs readers toward discovery. It's a very nice balance that is incredibly user-friendly.
Community is driving interaction. Of course, it helps that the image in the center of the page is a raging inferno, but you'll notice that the most prominent portion of the page comes from iReport - CNN's community-driven news source. Also notice the "Newspulse" section on the bottom right. These stories are displayed according to readers' interests. Users can filter through all the stories on the website using this feature.

What you won't see on the home page are links to CNN's Twitter or Facebook account - these are reserved for interior pages. While it's tough to recommend that you omit your business' social links from your home page, it's interesting that CNN took this route. It almost suggests to readers, CNN.com is your main destination for news and information, not Facebook or Twitter. Is this an effort to control content or simply a way to reduce clutter? Either way, it's a little reminder that our websites are the key to our success. Yes, you want to establish a presence on other websites and networks, but you want your users on your site.
Advertising is on even ground with content. Even if it's only one ad, the Lexus ad on the new page shares top billing with the rest of the eye-catching elements of the page. On the old site, the feature story's image was most prominent, then "Video." While video is nice, it takes attention away from the ad ('AD' in the screen capture below.) Advertising still drives revenue and keeps websites afloat. Keep this in mind when designing your page - advertisers will.
Below the fold is not an afterthought. Below the fold (the portion of the site a user must scroll down to see), CNN's home page features a new, four-column layout as opposed to the old sometimes-two-, sometimes-three-column option. It holds a ton of information, but is airy and elegant, well-organized and well-balanced. The "Editor's choice" section allows for some light browsing while the other categories let the user dive deeper into categories with a quick scan.

Now look at the old CNN.com below the fold. In comparison, it's hectic. It's difficult to know where to look, white space is not evenly distributed, and There simply is not nearly as much "usable" information. In short, it looks thrown together. See the difference by scrolling down the page at CNN.com, and this CNN.com from July 31, 2008.

Keep this in mind with your own website. If you're lucky enough to get users to scroll down your site, don't turn them off as they explore.

Altogether, the new CNN.com focuses on usability and the delivery of a large amount of information in an easy-to-digest format. Web users have plenty of options from which to get their news, so CNN decided it was time to freshen up. They seem to have accomplished this task while staying true to their mission.

Also read: The LA Times' User-Centric Redesign

Web Design: Use Cufon For Text Replacement

Pete Prestipino — Tue, 28 Apr 2009 00:13:00 GMT

Back in March we discussed how to use FLIR (Facelift Image Replacement) as one way to replace text and use any font on your website. FLIR is a great alternative to sIFR that does not require Flash, but there are some good alternatives - namely, Cufon.

Unlike sIFR (Scalable Inman Flash Replacement) Cufon requires no plugins. Cufon consists of two individual parts - a font generator (which converts fonts to a proprietary format) and a rendering engine written in Javacript.

The font generation is essentially just a web-based interface to FontForge (an outline font editor that lets designers create postscript, truetype, opentype, cid-keyed, multi-master, cff, svg and bitmap fonts, or edit existing ones, which allows for the conversion from one format to another).

The generator (check an online version here) builds a custom FontForge script based on user input and then runs it, saving the result as an SVG font. The SVG font is then parsed and SVG paths are converted to VML paths. The resulting document is then converted into JSON with a mix of functional JavaScript. The process is then repeated for the rest of the fonts given to the generator and the resulting JavaScript file is sent back to the client with a distinctive filename.

Use Any Darn Font You Want FLIR

Pete Prestipino — Tue, 17 Mar 2009 14:45:00 GMT

Do you remember that designer who told you there was simply no way you could use Calibri as the font for your website? Well, he was wrong. Using FLIR - Facelift Image Replacement (or FLIR), an alternative to sIFR that does not require Flash - you can use any darn font you wish. Quick side note - one of the most popular (highest trafficked) posts in November of 2008 was on Web design package CoffeeCup's Web Typography Pack which includes a sIFR Font Maker.

Getting started with FLIR takes just a few minutes. Download, unzip and upload, then choose and configure your fonts. Make the necessary modifications to CSS declarations and selectors and you're pretty much good to go. FLIR is probably best used for making modifications to headlines, subheads, etc. and not as the actual body copy itself.

Designers/developers will need Web servers with PHP and the GD library. There are some issues, but minor ones. The PHP GD library does not render details very well, but FLIR is easier to implement sIFR and does not require Flash to create or view.

Solutions like sIFR and FLIR may be tail chasing as CSS3 will support various webfonts (as do recent versions of Firefox and Safari).

__________

What's One Great Idea Worth?
Upgrade to a professional-level membership from Website Magazine and find out!

Bigger Search Box: Small Change, Big Impact

Pete Prestipino — Fri, 27 Feb 2009 17:27:00 GMT

Google's Inside AdSense blog has a terrific case study on a site that made a small change with a big impact as a result.

The owner of the site was using Google's SiteSearch for displaying search results on his pages. A few minor changes were made, including moving the search box to a more prominent location (from the sidebar to the center of the page - see image below) and extending it to twice its original width. In addition, some aesthetic changes were made to the search result pages, including removing the borders around the sponsored ads themselves.

The result of these small (fifteen minutes total) changes?

The number of queries increased and that ultimately led to more clicks on sponsored listings. It makes you wonder what sort of small changes you could make on your own site that would produce a positive result, doesn't it? Share with other WM readers (by commenting) the small changes you've made recently on your site and what impact it's had on the bottom line - good or bad.

Below are some before and after shots of the search box change:

Adobe CS4 Arrives for $1799

Pete Prestipino — Tue, 23 Sep 2008 12:58:00 GMT

Adobe announced the Adobe® Creative Suite® 4 product line today. The design and development software allows users to design across media more efficiently by making it easier to complete common tasks and switch between mediums without leaving a project. Some noteworthy features are listed below.

- InDesign CS4 includes a new Live Preflight tool that allows designers to catch production errors and a newly customizable Links panel to place files more efficiently.
- An expanded version of Dynamic Link in CS4 Production Premium enables users to move content between After Effects CS4, Adobe Premiere Pro CS4, Soundbooth® CS4, and Encore® CS4, so updates can be seen instantly without rendering.
- Adobe ConnectNow, an online service* of Acrobat.com, can be accessed from InDesign CS4, Illustrator CS4, Photoshop CS4 Extended, Flash CS4 Professional, Dreamweaver CS4, Fireworks CS4, and Acrobat® 9 Pro, allowing real-time collaboration with two colleagues or clients.

“Designers and developers are shaping the way that people consume information, share ideas, sell products, tell stories and create memorable experiences—in print, online and via mobile handsets” said Shantanu Narayen, president and chief executive officer, Adobe. “Whether you’re creating a rich Internet application, a video or a best-selling magazine, Adobe Creative Suite 4 delivers powerful cross-media technologies that have the ability to elevate products, brands and ideas above the clutter.”

What you can expect to pay for the latest version? Estimated "street price" should be around $1799. Now might be an excellent time to pick up a copy of of Adobe Creative Suite CS3.

MerchantCircle Instant Website

Administrator — Wed, 06 Aug 2008 14:19:00 GMT

Local business network MerchantCircle announced its "Instant Website" service. Users will be able to select a customized web address through the MerchantCircle platform and instantly create a website under that domain name. Included in the monthly service, MerchantCircle provides all web hosting and content creation tools (for developing coupons, blogs, images, newsletters), with business information automatically pulled and updated from their MerchantCircle listing onto a separate website.

The Instant Website product from Merchant Circle will be offered for between $14.99 and $6.99 per month depending on the number of web addresses selected.