Great Example Websites

AGENCY  & STUDIO

[thumb]hugeinc.com[/thumb]

HUGE
hugeinc.com
In homepage designed agencies choose between highlighting their work and showing off their brand.  The huge agency found a way to display both the use elements of their different projects to form “H” as a logo.

[thumb]humcreative.com[/thumb]

Hum
humcreative.com
Hum home page is full of tiger fee and tells the story of the design studio.  Instead of relying on a just a grid, they use different sizes and positions other photos to get a visual interest.  The Logo stays fixed at the top even when you scroll.

[thumb]followbubble.com[/thumb]

Bubble
followbubble.com

Bubble from the Czech Republic uses a combination of illustrations and fun transitions to try to capture your attention.  Instead of using the scroll wheel you can move from left to right using circles at the bottom of the page or you can click and drag the screen.  It’s, like flipping through a book.

[thumb]borngroup.com[/thumb]

BORN
borngroup.com
On the Born home page they have high definition video instead of where a header would be a and this helps grab your attention. When you scroll down the page you’ll encounter a wide column grid of featured photos, that show the names of clients when you hover. It’s a nice balance with creativity and authority showing.

[thumb]sidigital.co[/thumb]

Si digital
sidigital.co
The UK Agency that takes the case of digital chemistry serious. A pink liquid flows down the beaker on the homepage down showing you the different services the agency provides and has interactive elements at various locations.

[thumb]sagmeisterwalsh.com[/thumb]

Sagmeister & Walsh
sagmeisterwalsh.com

This interesting home page design is updated regularly with pictures from the office space as the background image that navigation is on the floor. In the day bottom left hand corner, you’ll find phrases that update every few seconds. This firm loves showing off its personality.

[thumb]madebyfieldwork.com[/thumb]

Fieldwork
madebyfieldwork.com
They have a party above the fold and a role business below. This is the approach this UK Agency field work takes in its projects. In lieu of showing off their personality they have crazy designs.

[thumb]soupagency.it[/thumb]

SOUP
soupagency.it
This Italy-based agency’s distinctive homepage experience all starts with a load
screen (top right), which is an animation of a soup pot being filled from bottom
to top. Once the pot is full, you’re automatically moved down to the bottom of the
page, and must navigate upward to learn more. It’s a fun bit of visual storytelling
that also reinforces the brand

[thumb]epiphanysearch.co.uk[/thumb]

Epiphany
epiphanysearch.co.uk
This UK-based digital marketing agency strikes a nice balance between fun and
informative. While their homepage greets you with some quirky animations (clouds
passing by, a bird flapping its wings), the page also makes it immediately clear
what services the agency provides using those circular icons.

ENTERTAINMENT

[thumb]katyperry.com[/thumb]

Katy Perry
katyperry.com
Katy Perry’s homepage is intriguing, to say the least. Using a combination of photos,
geometrically curious illustrations (just look at that tour date map!), and some subtle
parallax scrolling, the overall experience is captivating. The style might not be well-
suited for a business website, but it can help you think outside of the box

[thumb]borngroup.com[/thumb]

Suie Paparude
suiepaparude.ro
The Romanian band Suie Paparude’s homepage has a creative interface, which
allows a lot of information to be surfaced without being overwhelming. Hover over
a column to reveal a band member. Scroll down the page and the columns shift at
different speeds, creating a cool visual effect

[thumb]leonardodicaprio.com[/thumb]

Leonardo DiCaprio
leonardodicaprio.com
Here’s another grid-based homepage design, only this one doesn’t come with any
fancy scrolling effects. Leo’s homepage has a simple, well-organized layout and
makes good use of photography. While the overall style feels a bit “corporate,” it
makes sense when you consider that he’s using the site to promote his foundation
(in addition to his acting career)

[thumb]redhotchilipeppers.com[/thumb]

Red Hot Chili Peppers
redhotchilipeppers.com
The Red Hot Chili Peppers’ homepage is clean, easy to navigate, and uses color-
coding to organize information. Color, in fact, is the real star of the show. While the
design elements (i.e., the logo, the nav, and the fly-on-pill image) remain static, the
background of the homepage changes color as you hover over different nav items.

[thumb]dreamingwithjeff.com[/thumb]

Jeff Bridges Sleeping Tapes
dreamingwithjeff.com
This design is fun, quirky, and fits the subject matter perfectly (that “subject matter”
being Jeff  Bridges saying weird stuff and making weird noises to help folks fall
asleep). The design uses light text on a dark background, and employs subtle
animations to keep things interesting. Despite its inherent weirdness, it’s very clean
and easy to navigate.

[thumb]kingsofleon.com[/thumb]

Kings of Leon
kingsofleon.com
Here’s something you don’t see every day in homepage design: a subtly animated
top nav comprised of glowing orbs that “float” with you as you scroll down the page.
As a result, the Kings of Leon homepage is both visually interesting and easy to
navigate. It also does a nice of job of displaying photo and video content in an
organized grid

[thumb]beatboxacademy.ca[/thumb]

Beat Box Academy
beatboxacademy.ca
The Beat Box Academy homepage puts its craft — beat boxing — front and center. But
instead of simply writing about what beat boxing is, the homepage allows visitors to
experience it by interacting with virtual drums (which represent the different sounds
you make when beat boxing). The combination of visuals and audio creates a truly
immersive experienc

[thumb]depechemode.com[/thumb]

Depeche Mode
depechemode.com
This deceptively simple homepage uses geometry to reinforce Depeche Mode’s
brand. Three different styles of triangles are present: the hand-drawn triangles in
the band’s logo; the larger, cleaner triangles in the center of the page; and the line-
based triangles in the background, which are subtly animated

FOOD  & DRINK

[thumb]mahzedahrbakery.com[/thumb]

Mah Ze Dahr
mahzedahrbakery.com
The Mah Ze Dahr bakery’s homepage offers a nice balance of beautiful, full-
width photos (above left), cut-out images of individual bakery items (right), and
informational text. The centrally positioned logo stays fixed as you scroll down the
page, allowing their branding to stand out.

[thumb]lobagola.com[/thumb]

Lobagola
lobagola.com
This Croatian bed & breakfast definitely has a five-star homepage. By combining
big, bold typography with beautiful, purposeful photography, Lobagola is able to
provide a unique (and appetizing) experience. Spoiler alert: there’s also a cool, stop-
motion-esque transition effect that occurs wh

[thumb]roguesocietygin.com[/thumb]

Rouge Society
roguesocietygin.com
This New Zealand gin-maker’s homepage is an incredible example of what can
happen when illustration, photography, parallax design, and a brand’s identity all
come together to tell a cohesive story. Each section of content presents a new part
of the story (accompanied by enticing visuals), and a numbered nav on the left-
hand side lets you monitor your progre

[thumb]lighthousebrewing.com[/thumb]

Lighthouse Brewing Co
lighthousebrewing.com
The Lighthouse Brewing Co’s homepage immediately grabs your attention with
its beautifully illustrated ocean scene, complete with animated waves (and other
elements) that move gently up and down. As you scroll down into the depths, all of
the content is neatly aligned, and there’s a nice balance of information and visuals.

[thumb]gilgul.co.il[/thumb]

Gilgul
gilgul.co.il
The Gilgul homepage utilizes stop-motion video backgrounds to bring their culinary
creations to life. Pans are sizzling. Knives are chopping. Movement is a big part
of the design. As you scroll down the page, text and photos appear in unexpected
locations, creating even more movement. The end result is a homepage that feels
alive and welcoming

[thumb]chickenbot.it[/thumb]

Chickenbot
chickenbot.it
This Italian chicken delivery service’s homepage offers a great example of using
parallax design to tell a story. As you scroll down the page, delicious images slide
toward the center of the screen. Keep going and some stats automatically appear.
Every little movement and interaction compels you to keep learning mor

[thumb]cosowinerestaurant.com[/thumb]

COSO
cosowinerestaurant.com
Here’s another tasty Italian homepage, this one from the wine restaurant COSO.
An arrow makes it clear what your first interaction on the homepage should be,
while a vertical nav on the right-hand side allows you to monitor your progress. The
page uses a mix of black and white and color visuals to keep things interesting

[thumb]orangina.eu[/thumb]

Orangina
orangina.eu
After greeting you with some high-quality product photos, the Orangina homepage
guides you down to an interactive content grid. When you hover over a particular
square in the grid, the structure of the container has a cool morphing effect. The
end result is a well-organized, well-branded homepage that provides a fun user
experience

[thumb]vins-saint-aubin.com[/thumb]

Saint-Aubin
vins-saint-aubin.com
This homepage has — perhaps — the most ambitious interface of any other
homepage in this collection. For starters, you scroll up. And as you do, you’ll
encounter interactive maps, photos of beautiful landscapes, and virtual tours of
the local village (bottom right). The overall experience is unforgettable, but has the
potential to be overwhelm

NONPROFIT

[thumb]mvmt.org[/thumb]

MVMT
mvmt.org
The MVMT homepage forgoes traditional design conventions, putting its logo in
the center of a rectangular grid of content. The surrounding rectangles all contain
statistics displayed in big, bold letters, making the page’s information (and MVMT’S
message) easy to digest. Hovering over a statistic reveals a related photo or video.

[thumb]vintagehope.co.uk[/thumb]

Vintage Hope
vintagehope.co.uk
The Vintage Hope homepage has a hand-crafted and vintage style that still
manages to feel modern and professional from a user experience standpoint. While
the brush strokes and rough edges give the homepage a distinctively organic feel,
the precise gridwork and organized layout keeps the homepage from being messy
or overly complicated.

[thumb]dadaabstories.org[/thumb]

Dadaab Stories
dadaabstories.org
The Dadaab Stories homepage does an excellent job of overlaying text onto a
video background. (FYI, what you see above is a static screenshot of a looping
video). As a result, Dadaab Stories is able to communicate its story using both
text and video. You’re not just reading about their cause, you’re seeing it.

[thumb]pushpaproject.com[/thumb]

The Pushpa Project
pushpaproject.com
The Pushpa Project homepage provides a nice balance of photos, illustrations, and
bold colors. The fixed navigation on the left-hand side allows visitors to track their
progress as they consume the page’s content. Also worth noting: the “Donate” tab
stays fixed along the left-hand side as well.

[thumb]croptheblock.com[/thumb]

Crop the Block
croptheblock.com
Here’s another great use case for the video-as-background approach to homepage
design. In this instance, Crop the Block (an international community of filmmakers)
has stitched together video snapshots to show what their community is all about.
Worth noting: the branding stays centered and consistent throughout all of the
videos

[thumb]publicartfund.org[/thumb]

Public Art Fund
publicartfund.org
The Public Art Fund homepage provides a great example of using a bold, attention-
grabbing color as a branding element. While the photos of artwork displayed on the
homepage contribute a variety of different colors to the design, the pink nav bar,
pink container borders, and pink header type tie everything together.

SOFTWARE  & TECH

[thumb]jetpack.uistore.io[/thumb]

JetPack
jetpack.uistore.io
The JetPack homepage uses subtle animations and a clean, organized layout to
surface the most important information and keep clutter (and copy) to a minimum.
The color scheme is simple, the iconography and illustrations are beautiful, and
the end result is a trustworthy and easy-to-navigate homepage.

[thumb]paypal.com[/thumb]

PayPal
paypal.com
PayPal uses a video background on its homepage both as a cool visual element
and as a way to show its product in action. The woman in the screenshot above is
(presumably) using PayPal on the go, which aligns perfectly with the messaging in
the text overlay.

[thumb]kano.me[/thumb]

Kano
kano.me
Information, illustration, and parallax design all combine to create a compelling
experience on the Kano homepage. As you scroll down the page, you’re guided
step-by-step through how Kano — a computer you make yourself — works. It’s not
parallax design for the sake of parallax design: it’s actually telling a story.

[thumb]onlycoin.com[/thumb]

Coin
onlycoin.com
Here’s another example of using parallax design as a storytelling medium. As you
scroll down the Coin homepage, you learn more and more about the product and
the problem it’s trying to solve. Meanwhile, the primary call-to-action — “Pre-Order
Now” — stays fixed at the top of the page.

[thumb]invisionapp.com/tethr[/thumb]

TETHR
invisionapp.com/tethr
While many tech and software brands go with white, or at least bright, homepage
designs, the TETHR homepage is distinctively dark, and uses hover states to bring
particular elements to light. Overall, the homepage does a great job of highlighting
the product and making TETHR technology the star of the show.

[thumb]squaresconference.com[/thumb]

Squares Conference
squaresconference.com
The Squares homepage does a great job of integrating its brand into the design,
but perhaps more importantly, it provides a clean, easy-to-navigate environment.
All of the site’s content is surfaced on the homepage, and the top nav links simply
drop you down to different sections. It’s clean, easy, and effective.

[thumb]hellonod.com[/thumb]

Nod
hellonod.com
The Nod homepage uses video in an entirely novel way. Instead of using it as a
background element — in place of a static photograph — Nod uses a cut-out video
of a hand to show visitors how to use their product. The homepage successfully
integrates a product demo into its design. (Cool!)

BIG BRANDs

[thumb]reebok.com[/thumb]

Reebok
reebok.com
Reebok eschews the traditional big brand wisdom of showing off your logo and your
products and instead puts the focus on creating a particular feeling or emotion. It
screams “lifestyle” brand, not “sneaker” brand. And FYI: The header is actually a
video loop, and the grid below tells the stories of actual athletes.

[thumb]vw.com[/thumb]

Volkswagen
vw.com
Car brands aren’t generally well-known for having brilliant homepage designs. But
Volkswagen’s homepage is definitely an exception. While it doesn’t push many
stylistic boundaries, it keeps content well-organized, uses a nice mix of photos and
icons, and has a left-hand nav that contributes to a modern feel.

[thumb]ge.com[/thumb]

GE
ge.com
GE is a ginormous brand. And as such, it really doesn’t need to splatter its homepage
with product photos and logos. So, instead, GE’s homepage is dedicated to showing
the times and current weather of different cities around the world. It highlights GE’s
position as a global brand, while simultaneously providing a memorable experience.

[thumb]bk.com[/thumb]

Burger King
bk.com
Beautiful product photography; a well-structured, easy-to-navigate layout; and big,
bold typography all give the Burger King website a clean, modern feel. The star of
the show is definitely the food, and the homepage does a good job of displaying it
in different ways (including bringing in photos from customers’ Instagram feeds).

[thumb]sony.com[/thumb]

Sony
sony.com
The Sony homepage makes great use of the popular grid design. By staggering the
sizes of the rectangles in the grid, displaying a mix of videos and static photos, and
using color coding, Sony is able to create a cohesive experience that ties together
all of its various products and content.

ECOMMERCE & RETAIL

[thumb]hardgraft.com[/thumb]

Hard Graft
hardgraft.com
Hard Graft takes an innovative approach to displaying products on its homepage.
As you scroll down the page, the Hard Graft logo stays fixed, while beautiful, cut-
out photos of its products pass by. The end result: the products feel like design
elements, and contribute to the homepage’s attractiveness.

[thumb]purefixcycles.com[/thumb]

Pure Fix
purefixcycles.com
Here’s a great example of letting product images do the talking on your homepage.
Instead of bogging visitors down with details (e.g., price, construction specifications,
etc.), Pure Fix simply shows you their bikes — no backgrounds — in a well-organized
grid. It’s clean. It’s pure. It fits their brand.

[thumb]bornshoes.com[/thumb]

Born
bornshoes.com
The Born homepage uses three distinct styles of photo to show off its footwear:
high-quality closeups (left), high-quality environment shots (top/right), and — if
you scroll down their homepage — customer photos from Instagram. Some subtle
scrolling and hover effects add to the homepage’s visual appeal.

[thumb]shopsanctuaryt.com[/thumb]

Sanctuary T Shop
shopsanctuaryt.com
The Sanctuary T Shop’s homepage uses beautiful photography to tell a story that’s
not only about what their products are, but where their products come from. The
end result strikes a pleasant balance between organic/natural and clean/modern.

[thumb]giacomorelli.com[/thumb]

Giacomorelli
giacomorelli.com
The Giacomorelli homepage first captures your attention with its dramatic loading
screen (left), and it then presents you with an extremely innovative user experience.
Instead of clicking on nav items, you move your cursor around, causing different
rectangles of content to dynamically shift in and out of focus.

[thumb]rebel8.com[/thumb]

REBEL8
rebel8.com
With its dark background and engaging product photos, this homepage definitely
has a distinct personality. From a usability standpoint, the design shines because
it surfaces all of REBEL8’s products in an organized (and attractive) grid directly
on the homepage. Everything is a scroll away, so you’re not forced to click into
endless collections and subpages.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.