(PLUS SIX QUICK-HITTING TIPS TO IMPROVE YOUR SITE DESIGN)

LEARNING FROM THE BEST.

You never get a second chance to make a first impression. Thats why your homepage is undoubtedly one of the most important pages on your website. If a company homepage is its virtual front door, what happens if the door is off its hinges? With an average attention span of 8 seconds online, a new visitor needs a simple, compelling reason to stick around. If your site doesnt immediately connect with them, or they dont know what to do on your page, their knee-jerk reaction is to hit the back button and just leave. Dont let that happen. If you are considering re-vamping your website or just want to see great design check out these 53 examples of homepages to inspire your own site redesign, each of which does something worth learning.
SHARE COLLECTION

LEARNING FROM THE BEST

THE ENTERTAINERS
CELEBRITY AND MEDIA EXAMPLES

37

THE SALESMEN Current Section Title

ECOMMERCE EXAMPLES

2 4
16 27

THE TECHIES
IT EXAMPLES

46 55 69

THE PROS
GRAPHIC DESIGN EXAMPLES

THE PROVIDERS
PROFESSIONAL SERVICE EXAMPLES

THE BRANDS
RETAIL EXAMPLES

WHAT COMES NEXT?

(CLICK ON A TAB TO JUMP TO YOUR INDUSTRY)

3

THE SALESMEN.
ECOMMERCE HOMEPAGE EXAMPLES

SHARE COLLECTION

LUHSE TEA.
WHAT WE CAN LEARN: Present standard information in novel ways without sacrificing function and usability. Luhse Tea, for instance, added clear-cut navigation icons that stand out, but still convey company branding and clever details (search is a blimp!).

FIT FOR A FRAME.

WHAT WE CAN LEARN: Clearly present products and value statements. This sites value proposition (across the top) immediately tells you who the company is and what they do helping the page successfully pass the blink test. Products are listed near the bottom.

SURF RIGHT.
WHAT WE CAN LEARN: Easy navigation and beautiful design can (and should) work together. An interactive slider and a well-organized set of tiles make this website easy to surf (pun sadly intended).

SHOP LOCKET.
WHAT WE CAN LEARN: Simplicity trumps complexity. Shop Locket presents a simple yet charming design. Its Facebook Connect and the Try it buttons are both clearly visible and the rest of the site doesnt distract visitors from taking those actions.

EVEL.
WHAT WE CAN LEARN: Grids and columns help guide the eye. This site handles six different content blocks in a coherent, well-balanced manner. Contrary to the previous site, there are many calls-to-action. Its therefore paramount to package them neatly.

LEGA-LEGA.
WHAT WE CAN LEARN: Its okay not to show them ALL your products at once! While most ecommerce sites offer many product options right away (just look at Amazon), this site focuses the users attention on its top products, perhaps based on popularity.

URBAN ORIGINALS.
WHAT WE CAN LEARN: This is a clean and effective homepage design. The vibrant background and a simple navigation clearly lead to important product pages.

FANNABEE.
WHAT WE CAN LEARN: This website uses parallax scrolling to deliver a unique user experience. Reaching out to true fans on the banner also subtly conveys exclusivity, compelling the audience to click their call-to-action (CTA) button and see whats behind the velvet rope.

WHAT WE CAN LEARN: Uncrate maintains a single strong aesthetic despite multiple navigation levels. Even with multiple conversion paths, it focuses on one key product.

UNCRATE.

SCOTCH & SODA.

WHAT WE CAN LEARN: The tiled look of this homepage showcases different areas of the website while branded social icons make the content easy to share. The Latest Posts tab offers viewers more content if they are interested in delving further into the Scotch and Soda experience.

DESIGN TIP

1
Simplify Your Language.

Marketers often change the way they talk online and use marketer speak such as Buy NOW rather than a normal conversational tone. According to MarketingSherpa, clarity trumps persuasion when writing for the web.
Dont waste valuable online real estate trying to be clever. Instead, use your site copy to convey your company message in a clear, concise manner. For great examples of succinct copy, look at Galpin, Austin Beerworks and Ride for the Brand.

15

THE PROS.
GRAPHIC DESIGN HOMEPAGE EXAMPLES

SHARE COLLECTION

16

JIB.
WHAT WE CAN LEARN: Great use of a simple illustration, an excellent complimentary color palate, crystal clear copy and a single call to action all combine to make this website one of our favorites.

HELLO MONDAY.
WHAT WE CAN LEARN: This unique design won the AWWWards for Site Of The Year and focuses on the pages overall look. The minimal copy works for this design firm because their competitive advantage is best conveyed visually, but other industries may need to include a clearer company value proposition on the homepage.

RIDE FOR THE BRAND.

WHAT WE CAN LEARN: This site chooses a single aesthetic and fuses it into every page element. Also notable: the continuous side-scrolling feature, which provides an interesting experience for visitors.

ANDY PATRICK DESIGN.

WHAT WE CAN LEARN: This site uses rare elements including a single accent color and a matching off-white (check out the orange undertone). It also incorporates excellent iconography and typography for a simple but slick web design.

THIS IS THE BRIGADE.

WHAT WE CAN LEARN: This homepage succeeds by including a large banner to convey exactly who the company is, plus segmented sections to break up the content.

GALPIN.
WHAT WE CAN LEARN: The Galpin page uses typography to showcase its character. Notice that the page focuses less on graphics, and instead uses text to convey its messaging.

MADE BY VADIM.
WHAT WE CAN LEARN: The Vadim site is concise and to the point. Its navigation and CTAs are both clearly-defined, so the visitor knows exactly where to go next.

ART & CODE.

WHAT WE CAN LEARN: Sometimes, less is better. The use of non-traditional icons and a balanced layout give the Art & Code website a clean, attractive look.

RILEY CRAN.
WHAT WE CAN LEARN: Here we see another appealing tilebased website design. Setting Riley Cran apart is the fact that the entire site is set within a single page - no scrolling necessary!

DESIGN TIP

2
Simplify Your Layout.

A clean design is just as important as clear copy. Your site layout should boost the overall online experience, not distract from the websites goals. Even if theyre visually appealing, site elements that confuse your visitor ultimately reduce the overall effectiveness of your website.

Avoid common errors such as awkward page hierarchy, nonexistent navigation or anything that creates friction on your page. Check out Shop Locket, Urban Originals and Madwell for simple designs that still convey a strong message.
26

THE BRANDS.
RETAIL COMPANY HOMEPAGE EXAMPLES

SHARE COLLECTION

27

REI.
WHAT WE CAN LEARN: This REI homepage takes an interesting spin on usersubmitted content by displaying photos in a tile-based layout. It also incorporates scrollable, interactive elements on the images, further enhancing the visitors on-site experience.

AUSTIN BEERWORKS.
WHAT WE CAN LEARN: This site clearly conveys the main goals of a page telling the visitor who the company is, and what they do. The clean, white background coupled with high resolution product images highlight the most important part of the page: the beer!

JAQUET DROZ.
WHAT WE CAN LEARN: The Jaquet Droz page relies on one workhorse visual. The rich, high resolution image draws visitors to the product - clearly the most important feature on this page.

WHAT WE CAN LEARN: It isnt often that restaurants focus on homepage design, but this site did it right. It includes a large, attractive slideshow across the top of the page and follows that up with more images of delicious food!

ITALIO KITCHEN.

GREY GOOSE.
WHAT WE CAN LEARN: A homepage should showcase the personality and aesthetic of a brand. For Grey Goose, its about elegant, high resolution images and a polished layout. Mission: accomplished.

TOYOTA.
WHAT WE CAN LEARN: Toyota created a Pinterest-like website for Camry lovers. The sites eclectic visual presentation uniquely targets a wide array of potential car buyers.

JACQUI CO.
WHAT WE CAN LEARN: This homepage is one of our absolute favorites. The design creates a brilliant look and feel for the site, and its interactive elements really take this homepage to a different level.

BUFFALO WILD WINGS.

WHAT WE CAN LEARN: This is a great example of a webpage built to promote a branded look and feel. The colors, design styles, and fonts all align with the sporty Buffalo Wild Wings image.

DESIGN TIP

3
Create a Brand Experience.

Your webpage should reflect your company personality. Whats the best way to reinforce your company branding? Create a single, unified aesthetic for your website and make sure every page element supports that experience. In this collection, you can find great examples of branded design from Surf Right, Uncrate and Grey Goose.

36

THE ENTERTAINERS.
CELEBRITY AND MEDIA HOMEPAGE EXAMPLES
SHARE COLLECTION

37

CLOUDS OVER CUBA.

WHAT WE CAN LEARN: Sweet and simple, this homepage effectively accomplishes its one goal to get the visitor to watch the documentary.

POTTERMORE.
WHAT WE CAN LEARN: Here Sony conveys both the look and feel of the Harry Potter franchise. They then use familiar imagery and interactive elements on the site to further engage the visitor.

HEATH LIFE.
WHAT WE CAN LEARN: This site presents multiple interactive and visual elements (e.g., icons and a Google Maps integration) without being overwhelming. Not only does it look great; its helpful too!

MAGIC LEAP.
WHAT WE CAN LEARN: Despite Magic Leaps apparent simplicity, this page presents vivid images and well-designed typography that draw visitors into this website.

WHAT WE CAN LEARN: If anyone knows how to entertain, its Jay Z. The eclectic nature of his personal website mirrors his real-life brand in this interactive tile-based homepage.

LIFE AND TIMES.

TV SAFETY.
WHAT WE CAN LEARN: The animation-style visuals on this page work as a counterbalance to the serious nature of this message, presenting important information on TV safety in an approachable manner.

IMPRESS A PENGUIN.
WHAT WE CAN LEARN: Graphically, this website feels like a storybook, attracting attention by coupling interesting graphics and smart text. While this minimalism will work for some audiences, carefully consider your market before eliminating a clear value proposition that explains what your company does.

DESIGN TIP

4
Get Creative.

Good design is a terrific way to set your company apart from the other 633 billion websites in the world. Experiment with creative ways to present standard information without sacrificing function or usability. Luhse Tea, Art & Code and Sagmeister Walsh are all great examples of non-traditional designs that elevate their company pages.

45

THE TECHIES.
IT HOMEPAGE EXAMPLES

SHARE COLLECTION

46

REZDY.
WHAT WE CAN LEARN: Rezdys use of visual elements such as icons and arrows allow the company to clearly explain the purpose of its product without having to rely on heavy copy.

VIDDY.
WHAT WE CAN LEARN: Viddy effectively presents a clear value proposition and a strong call to action, which combine to direct visitors through its site registration process.

COLLABORATE.
WHAT WE CAN LEARN: The layout of this website effectively handles several different user stories by presenting three different CTAs without having them compete with one another.

PREZI.
WHAT WE CAN LEARN: This page sets up a clear information hierarchy and thought sequence. Everything that you need to know is provided in a few pixels via a video, company tagline and clear CTA. The video is also a smart addition if Prezis target audience will want deeper information.

FUNCTION POINT.
WHAT WE CAN LEARN: Function Points website maintains a consistent look and feel across all of its design elements. The sites illustration, style and choice of colors also help enhance the design and build a visual hierarchy.

CSS PIFFLE.
WHAT WE CAN LEARN: The sole CTA on this page (the floating red button) draws the visitors attention and leads them to click the icon. While optimization experts are divided on using the color red for CTAs, it works here in conjunction with the overall site color palate.

URBAN BOUND.
WHAT WE CAN LEARN: Putting the CTA front and center, as Urban Bound does here, is another great example of a web design focuses its most important information in the center of the page.

DESIGN TIP

5
Optimize for the User.

Every part of your website should be designed for the person at the other end of your screen your visitor. There are a number of design tools you can employ to accomplish this, including grid layouts (check out Scotch and Soda), arrows and icons to guide the viewers eye path (which Rezdy does well), and interactive elements to engage the reader (just like REI).

54

THE PROVIDERS.
PROFESSIONAL SERVICE FIRM HOMEPAGE EXAMPLES
SHARE COLLECTION

55

WHO IS WILDLIFE.
WHAT WE CAN LEARN: This site focuses almost entirely on its branding. Both the strong, visually unique image and the non-traditional CTA copy match the site aesthetic. One slight improvement we might suggest: Clarify for the visitor what getting wild will actually get them.

SILKTRICKY.
WHAT WE CAN LEARN: Another example of content organized into visual tiles is Silktricky. Notice the use of a carrot visual element (the white triangle in the text boxes) to unobtrusively connect the sites text and visuals for the reader.

SAGMEISTER WALSH.
WHAT WE CAN LEARN: This page offers a truly unique way to address site navigation. Called augmented reality, each element on the floor can be clicked to advance the reader through the site, a visual that definitely sets it apart.

CAPTAIN DASH.
WHAT WE CAN LEARN: The mock movie poster is fantastic! Although some might wonder what the company does at first (which isnt the best site optimization strategy), this design makes you want to learn more about this intriguing Captain Dash.

MADWELL NYC.
WHAT WE CAN LEARN: Using excellent graphic and design work, Madwell presents a clean homepage experience that simply, yet effectively, showcases the quality of the companys portfolio.

WOODWORK.
WHAT WE CAN LEARN: Despite the potentially overwhelming visuals on this page, clear navigation and layout (shown here) ensures that the user isnt overwhelmed.

RYAN EDY.
WHAT WE CAN LEARN: As a professional photography website, the design plays well into what its visitors expect: A stunning image. The site also offers simple navigation and showcases a series of pictures to let the visitor see more work.

NEW BREED.
WHAT WE CAN LEARN: New Breeds website effectively balances its different buckets of content and presents it all in a well-organized, easily-digestible page.

OLIVER RUSSELL.
WHAT WE CAN LEARN: The color and subtle design elements in the page background make this webpage a great example of how to use attractive visuals that dont take away from the core content on the page.

QUARTER REST STUDIOS.

WHAT WE CAN LEARN: This homepage is essentially one large slideshow paired with a simple top navigation. It gives the visitor a limited, but useful set of options presumably ideal for the magazines visual-based target market.

FANCY RHINO.
WHAT WE CAN LEARN: Heres another website that showcases their company with an embedded video on the homepage. The navigation and sidebar are simple enough to stand out, while not detracting from the video clearly the primary goal of the page.

BLIND BARBER.
WHAT WE CAN LEARN: This website does a great job at focusing the visitor on the most important aspect of the site the button on the center of the page. This headline/CTA combo draws the eye and inspires visitors to learn more about this Blind Barber.

DESIGN TIP

6
Step Back.

Once you finish your site design, take a final step back. Does your website pass the blink test? In three to five seconds, can someone look at your page and know: who your company is, what you do, and what you want the visitor to do on the page? If not, revisit both your copy and design to highlight those important messages. Want to check out some blink test winners? Click to Jib, TV Safety and Italian Kitchen.

68

WHAT COMES NEXT?

We hope these examples help inspire you to find a style that represents your brand. An effective website does three things well: it explains who the company is, what the company does, and offers a clear directive through a single CTA or well-defined options - that tell the visitor what theyre supposed to do on your site. Keep these goals in mind when developing your own online experience. First, select a style that mirrors your company branding. Then, answers the questions above. Finally, consider the user at every stage of your design. There is a person on the other side of your screen. Clearly meet their needs, and you will have a truly brilliant homepage.
SHARE COLLECTION

69

Start Building Beautiful, Dynamic Mobile-Ready Web Pages in Minutes

Get your 30-Day Free Trial of HubSpots new Content Optimization System (COS).
Build SEO-friendly and mobile-optimized webpages and blog posts - no IT required Create personalized and remarkable experiences using "smart" dynamic content Integrate your website with every marketing channel for greater reach Generate more traffic and leads using targeted landing pages

Start Your Free Trial Today!