Advertise here with BSA

Using a dark color theme in a website can convey many types of feelings and emotions towards its visitors. Edginess, elegance, modernity — these are just a handful of things that can be associated with dark colors.

There are countless of gorgeous dark-themed web designs on the Web. In this web design showcase, you’ll find 30 hand-picked websites that use a primarily dark color palette.

1. Jet Cooper

2. La Bubbly

3. Designers.MX

4. Thismanslife

5. Michael Korstick

6. Fueled by Design

7. Youzee

8. DonQ Rum

9. Cuban Council

10. workdiary.de

11. James Garner

12. McCormack & Morrison

13. Société Perrier

14. Rogge & Pott

15. The Weather Digital & Print

16. Skewed Icons

17. Alien Bikes

18. 42Angels

19. Justdot

20. Designer Gleb

21. simó

22. Kansas City CreepFest

23. The Kennedys

24. Team Viget

25. Cafundó

26. Boudin & Beer

27. Michelle Carrillo

28. Sullivan NYC

29. Hollister Co.

30. Kettle

Related Content

• 50 Beautifully Dark Web Designs
• 30 Inspiring Dark and Sleek Web Designs
• Create a Dark and Sleek Web Layout Using Photoshop
• Related categories: Design Inspiration and Web Design

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Advertise here with BSA

A beautiful and well-designed blog can leave a lasting impression onto its readers. With so many sites competing for the attention of Internet users, the appearance of a blog can be a large factor in helping it stand out from the crowd. In this showcase, you’ll find a wide variety of beautiful blog designs for inspiration.

If you’d like to see more blog designs not in this collection, see our other showcase: 40 Excellent Blog Designs.

1. The Design Cubicle

2. The Kennedys Blog

3. Cookiesound is Travelling

4. Growcase Blog

5. Minne’s Diner

6. Bongo Blog

7. Colbow Design

8. The Official Squarespace Blog

9. 1LOVE

10. Solo

11. Tapp3 Media

12. Forefathers Group

13. From Me To You

14. Burciaga

15. Thomas Aull Blog

16. Column Five Media Blog

17. Colorcubic

18. Rice Bowls

19. Cory Etzkorn Blog

20. SimpleBits

21. Demain J’arrête

22. Art & Graft

23. Bitfoundry Blog

24. CSS-Tricks

25. Teehan+Lax Blog

26. Sullivan NYC Blog

27. Leaderbe Consulting

28. Sam Wilson

29. heyIndy Blog

30. Trent Walton

Related Content

• 10 Important Traits of a Great Blog Design
• Components of High-Quality Blog Posts
• 7 Blog Design Tips from a Content Strategist
• Related categories: Design Showcase / Inspiration and Web Design

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Advertise here with BSA

Working with bright, high-impact colors in your designs can prove to be a powerful tool in your creative arsenal. Bright colors are able to grab attention and they make a design appear fun, youthful, cheery and modern. Because using loud, bold colors in a design can go from these positive themes to as though a child went a little bit wild with crayons, check out this collection of beautifully vibrant web designs for inspiration.

POPA

Ryan Keiser

Tim Biskup

Sunday Best

Girl Effect

Bit This!

Solo

Tease

Netlife Research

Carsonified

vijufest.ru

Jacob Lee

Daniel Martín

OrangeSprocket

Bzzy App

RUhotEnuf?

Carbonmade

Alfred App

Rice Bowls

Love of My Life

McFarlane

Bestwork

Tori’s Eye

Republic2

Analogue

AZTROLAB

89Bytes

Trent Walton

Denny’s

feels.tv

If you liked this showcase, please also see the following posts:

• 35 Beautiful Bright, Colorful Web Designs
• Beautiful and Creative Examples of Vibrant Web Designs

Related Content

• Colors in Web Design: An Exploration
• A Guide to CSS Colors in Web Design
• Color: The Next Limited Resource?
• Related categories: Design Showcase and Web Design

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Advertise here with BSA

Beautiful typography, strategic use of colors and graphics, and obstruction-free aesthetics devoid of visual clutter are a few of the characteristics shared among web designs that are clean and simple.

In this collection, you’ll discover a few excellent web designs that are clean, simple and elegant.

Here are related collections you should also check out:

• 50 Beautiful Clean and Simple Web Designs
• 40 Beautiful Examples of Minimalism in Web Design
• On Design Instruct: Visual Inspiration: 30 Clean and Elegant Web Designs

1. Nizo

2. Decorated Playlists

3. TH= SUM

4. Red Pop

5. DBA

6. Food Sense

7. For The Record

8. Vee Lee

9. Kettle

10. Makr Carry Goods

11. Hocus Focus

12. InfinVision

13. Ed Nacional

14. Idea Exhibit

15. 8 Faces

16. MCQ

17. Mister

18. Tobias Bjerrome Ahlin

19. 37signals

20. Marlon Medau

21. The Touch Agency

22. Yaron Schoen

23. Jeremy Gleave

24. Bestwork

25. Linda Dong

26. enjoythis

27. co: collective

28. Stiff Rowlands

29. 3Degrees

30. Girlfriend

Related Content

• Minimalism in Web Design: A Guide
• 20 Beautiful Minimalist WordPress Themes
• Create a Slick and Minimalist Web Layout in Photoshop
• Related categories: Design Showcase / Inspiration and Web Design

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Advertise here with BSA

"About me" pages have the ability to engage and inform your site visitors in a personal and friendly way. For web professionals, our "About me" page can be critical in establishing a true connection with potential clients, and it can set us apart from a sea of other designers and developers.

For different types of websites, keep in mind that the About page could be structured differently. For example, an About page for a blog or news site can be vastly different when compared to the same page for a portfolio website.

In this collection, I’ve rounded up 30 excellent "About me" pages from the web portfolios of amazing designers, artists, illustrators, and developers. Enjoy!

Toby Powell

An interesting use of a cutout/silhouette sets this designer’s About page out from the crowd. A halftone self-portrait and a concise biography of the site owner rounds out this web page’s design.

Guomundur

Most designers use a professional headshot photo of themselves on their About pages, but this designer from Sweden presents an interesting and unique perspective with his overhead shot. Bold typography draws you in to create added visual interest.

Dan Joe Design

The designer used a grid layout in the layout of his About page. Contemporary colors inform you of the designer’s style, while a status message of his availability to take on new projects makes it clear to prospective clients whether he’s available or not.

Tim Van Damme

A unique and effective way of organizing your personal information on the web is to create an online business card (vCard). In doing so, we learn who the designer is, other places to connect with him, and how to get in touch with him.

James A. Reeves

The About page for James A. Reeves is simple and modular, allowing for the large-scale photography in the background.

Janis

The artistic design of Janis’s website is very captivating. It gives you a glimpse into the designer’s personal aesthetic style, while supplying the information you need to hire him for your next project. The use of large photography can leave a lasting impression on the visitor if done effectively, as shown in this About page.

Dan

Here’s another example where the designer used a self-portrait in a unique and engaging way. Including a large self-portrait on your site gives a potential client a real person to relate with.

Jared Christensen

Jared Christensen used a humorous, catchy self-portrait on his About page to not only allude to his sense of humor, but also allow the client to see his creative side a little more personally.

Jason Reed

Jason Reed uses a nice illustration of himself in his About page. The use of an illustration is another way to grab the visitor’s attention and add a more character to your About page.

Soh Tanaka

This designer organized his credentials in an easily digestible format. Large photography offsets the information and gives you an idea of the site owner’s style and influences.

Emerge and Bloom

On this website for a design studio, information is organized efficiently, both giving you an idea of their services while presenting attributes of the designers behind the company.

KitFolio

Here’s another striking About page. As you can see, the design is simple, but fun and illustrative.

Alex Dawson

Alexander Dawson (a Six Revisions writer) presents his About page in a very efficient, functional manner. From looking at his credentials, you get a quick overview of who he is, what he does, and the services he excels in. It’s really all you can ask for from an "About me" page, right?

Adham Dannaway

Through the use of a grid layout, Adham Dannaway achieves a simple, straightforward About page that also gives you an idea of his skills, illustrated as graphs.

egopop

The About page for egopop presents a large-scale photo of the designer as well as a simple biographical statement about himself and his history as it relates to his profession.

Monkeyworks

Monkeyworks uses a clean, structured layout on their About page. Not only are the illustrations captivating, but the typography stands out and the graphics used add a nice touch.

Darren Hoyt

Great use of typography is what stands out in this "About me" page. Not only does the type make the page easy to read, the grid layout increases readability as well.

Mark McGall

The designer took their About page to the next level by superimposing their face on Mount Rushmore. Tastefully done, this tactic adds a unique and memorable visual to an otherwise straightforward page.

Mr. Joe Payton

The About page of Joe Payton presents a short bio about him in a beautifully laid out format. The designer also presents information for following him on various social networking sites.

Elliot Jay Stocks

The About page of Elliot Jay Stocks is laid out rather simply, but the typography is carefully thought-out and makes you want to explore this designer’s work further. The designer, who is also a speaker and author, presents you with links to pertinent information related to his professional activities.

Kitschen Sink

The compelling website for Kitschen Sink made me want to explore the About page. I found out that they’re a jewelry and accessories shop and I learned the history behind the company. Although it’s laid out very simply, captivating branding led me to the About page through curiosity.

Matt Mullenweg

Matt Mullenweg sets the backdrop for his About page on a highly textured background. These visual layers compelled me to read more about the founder of WordPress.

Who is Leon

This beautiful About page features animations and depth to draw the visitor in. Clear typography and a monochromatic color scheme set this About page apart.

Amour Chaleur

This designer’s About page is really simple and straightforward. It includes a short bio, links to relevant info, and her library. It’s always the neatly designed pages that attract me the most.

Owltastic

This beautiful About page of designer Meagan Fisher lets you know all the pertinent information about her and the services she provides. Included are links to social networks and other affiliated websites, all organized into a clean and inviting format.

Lord Likely

This compelling About page’s character is what draws the visitor in. Inspired by Victorian-era design, the designer implemented old-world style in creating a unique and professional page that serves as an introduction to himself.

Dustin Curtis

This unique About page presents a timeline of the site owner’s life — from birth to his projected death.

Ian Mintz

The beautiful watercolor illustrations grabbed my attention on this website. As you can see, his About page is laid out very simply and elegantly. We get a sense of his design influences, on top of his skills and education, through this clean and straightforward approach.

Monsieurlam

Large-scale photography is what sets this "About me" page apart. The page is laid out in a clear format, providing information about the designer and where he can be found.

Floating Asian Kid

The interaction on this website intrigued me enough to explore its About page. You can see from his short biography what the designer specializes in and how to reach him.

Related Content

• What Your Web Design Says About You (Infographic)
• Common Misconceptions About Web Designers
• 8 Things They Don’t Tell You About Being a Web Designer
• Related categories: Design Showcase / Inspiration and Web Design

About the Author

Stephanie Hamilton is a freelancer graphic and web designer who runs her own design studio, Stephanie Hamilton Design. You can find her on Twitter @SHamiltonDesign and Linkedin.

Advertise here with BSA

Depth perception is our ability to see the world in three dimensions. It allows us to gauge the relative distances of objects we can see. In a plane/2D surface, depth can be simulated by the use of concepts related to depth of field, perspective, focal/vantage point, shading, lighting, and others.

Web design is traditionally a two-dimensional medium. However, experimenting with faux 3D effects can lead to interesting and memorable user experiences. In this showcase, I present to you web designs that successfully create an illusion of depth.

The Pixel

Perspective is a concept you can use for creating a sense of depth, as can be seen in The Pixel website.

Ecoda Zoo

In this web design, visitors are confronted with various interesting animation effects. By holding down the mouse button, users are able to navigate through the three-dimensional scene.

Frito Lay

Frito Lay’s website uses perspective to give the viewer the impression that they are in a three-dimensional environment. Colorful character animations and shading further reinforce the 3D theme of the site.

Cup Cup

In this website for a cupcake shop, depth is achieved through the use of an awning (among other things), making it appear as though you’re looking at a storefront displaying cupcakes. The cupcakes are placed in such a way as to give them the appearance of sitting on top of a shelf.

WebDesignbe.com

Through the use of perspective, depth is achieved on WebdesignBe.com. An almost photorealistic illustration of an octopus further exemplifies the three-dimensional characteristic being portrayed on the site.

Mike Dascola

The portfolio website of web designer Mike Drascola establishes an illusion of depth. A surreal quality characterizes the three-dimensional scene presented on the site.

Gardener & Marks

Gardener & Marks creates a photorealistic setting that seems to embody the company’s style. Depth is attained through various mechanisms, including the use of shadows on objects.

Dez Vila Aplina

Dez Vila Aplina uses perspective in their illustrated roadmap. Shadows are another technique used to portray depth in this design.

Versions App

Visual depth is achieved on this website through the use of a landscape, lighting, and shadows. The color palette also helps support a 3D look-and-feel.

The Dascola Barbers

The Dascala Barbers website pays homage to Ann Arbor, while focusing on the people that make the shop a success. A figure/ground perspective is achieved through the caricatures of the barbers.

Imaginamos

On the Imaginamos site, depth is simulated in the illustrative header through the appropriate scaling of objects.

Skittles

Through the use of a large scrolling rainbow that protrudes from the background, Skittles gives the viewer a glimpse into the company and its history. Viewers are engaged into a unique interactive experience when they visit the site.

Plantate

This fun website features a rotatable, 3D planet underscored by well-placed shadows and layering to create the illusion of depth.

Adobe Creative Suite 3

A surreal 3D illustration gives the Adobe Creative Suite 3 website an otherworldly character.

Iceberg Quest

Great composition produces an interesting landscape that’s used as the background and a central design element on the Iceberg Quest website.

Wing Cheng

Wing Cheng is a designer whose portfolio site establishes an illusion of depth. By unfolding the pages, you get a real-life look into the work of the designer. Shadowing helps give the elements a 3D appearance.

The Villager Restaurant and Catering

This website features a wonderful illustrative header that simulates depth. Depth is used as a functional tool to create visual hierarchy by attempting to focus your attention on the navigation menu bar after you view the beautiful illustration of the restaurant’s exterior.

Planeje Sua Carreira

Site visitors are greeted by a faux 3D environment when they go to the Planeje Sua Carreira website.

Foundation Six Web Design Studio

The website designs by Foundation Six take center stage in this portfolio website. The illusion of depth is created by the use of shadows, layering, and object scaling.

Inglorie

The Inglorie website gives you a sense of depth through the use of perspective and shadowing. The 3D effect, coupled with animation and the use of distinction techniques, draws your attention to the objects at the center of the screen.

Aka-Acid

An aerial/bird’s-eye view of a house creates a sense of depth for the Aka-Acid site. Shading also adds to the illusion of depth.

Green Woods Country Club

By using a natural landscape and perspective, the Green Woods Country Club website creates an almost realistic scene.

Creative Switch

Creative Switch achieves depth through the use of scaling, which brings the mascot to the front as the city landscape fades into the background. Darker colors also help the background fade into the distance.

Adlucent

Depth is achieved by using perspective in the photograph that is a central design piece in this website.

UIS- Ultimate Interactive Studio

The Interactive Studio UIS website creates depth by layering and by using shadows.

Help Scout

The Help Scout website uses depth of field, as can be seen by the birds being blurred to create an illusion of distance.

Hippo App

By using colorful, bright illustrations and perspective techniques, the Hippo App website achieves a nice simulation of depth.

Dino Yul

This unique website by Dino Yul creates an illusion of depth in the layout’s central element, the image slideshow. Shadows and layering bring the image slideshow to a higher plane.

Zennaware

Through the use of shadows, depth is conveyed masterfully on Zennaware. Objects look like they’re resting on top of a table.

Creative Mints

Colorful and creative illustrations take center stage on the Creative Mints website. Once again, we can see how the use of shadows and proper scaling of objects can be used to establish a sense of depth.

Conclusion

Establishing a sense of depth in website designs can help produce striking and memorable experiences. I hope these beautiful examples have inspired you to experiment with 3D elements in your own web design projects.

Related Content

• How to Create Remarkable 3D Text in Photoshop
• Beautiful Examples of 3D Elements in Web Design
• How to Create an HTML5 3D Engine
• Related categories: Design Showcase/Inspiration and Web Design

About the Author

Stephanie Hamilton is a freelancer graphic and web designer who runs her own design studio, Stephanie Hamilton Design. You can find her on Twitter @SHamiltonDesign and Linkedin.

Advertise here with BSA

The color blue, in many cultures, symbolizes wisdom, trust, depth, intelligence, confidence, faith, and truth. It’s the color of the sky and the ocean, and so it’s also often associated with tranquility and calmness.  Below are 50 examples of blue logos. Notice the variety of blues, from lapis lazuli to sky blue, used in these logos.

If you liked this collection, you might also want to check out this collection of 30 Beautifully Blue Web Designs.

City College

Malawi shop

AquaBird Consulting

bebocean

invectra DESIGN

YES

OSL

Longwarry Milk

INTERACTIVE LION

Blue Whale Agency

Seahorse

joy’s gallery

Modern Electrician logo

Yoolf

awas

Ex Libris

Tejara Omlat

Sea Change

Camplin

Blue Moon Grass

Fringy

geek

Water Trekking

SurfCube

Zolango

FC Managed Services

Window Center

Acronis Webcast

Bath Simple

Dr. Zoom Clinc

Candado Náutico

Insight India Pvt. Ltd

organizations forum

Reg-Meg

Floatopia

Frozen Food Month

UOGC

Blue Wave Real Estate

Necma

Logo to the 30 anniversary of fan-movement FC

ZEPHYR

Minimac

О2Invest

injoy water

New Windows

Pixel8ed Creative Studio

World Gem Trade

J & S Agencies Logo

Peru Water Project

Related Content

• 70 Excellent Logo Design Tutorials and Resources
• 5 Branding Basics Every Logo Designer Should Know
• 15 Excellent Logo Design Tutorials Using Illustrator
• Related categories: Design Showcase/Inspiration and Graphic Design

About the Author

Stoian Hitrov is a freelance graphic designer from Bulgaria. He’s listed in DesignCrowd.com’s Freelance Graphic Designer directory. View Stoian’s design portfolio and hire him on DesignCrowd.

Advertise here with BSA

The use of textures and patterns in web design has been popular for several years. Textures and patterns add strength and a sense of realism to a web design. There are many creative ways of using patterns and textures in your designs. In this collection, I will show you 20 excellent examples of web designs that use textures and patterns. I hope you like the collection and become inspired by it.

Pointless Corp

Design Disease

August Interactive

Vector Mill

THIS IS TEIXIDÓ

Northern Bee Auctions

ReadyForZero.com

Coloma Ventures

XGO

Ryan Scherf

Forever Heavy

Ideaware

Archibald Studio

CURE International

Red Tiki

Lifetree Creative, Inc.

Solo

McCombs Creative

HTML5 Interactive Infographic

Min Tran’s Journal

Related Content

• 20 Useful Websites for Graphic Design Textures and Patterns
• How to Create a Sleek and Textured Web Layout in Photoshop
• 30 Beautifully Textured Web Designs
• Related categories: Design Showcase/Inspiration and Web Design

About the Author

Waheed Akhtar is a freelance web designer from Dubai, UAE. He is the founder and editor of Boost Inspiration, where he showcases different creative resources of Digital Art, Graphic Design, Illustration, Photography and Typography for inspiration. You can reach him via Twitter or Facebook.

Advertise here with BSA

Advertising and marketing agencies often position themselves as being specialists in creativity. So it’s just natural that their websites are often creative and beautiful. As clients expect these businesses to be creative (and a website is often one of the first things potential clients look at), ad agencies need to have effective and impressive websites.

Below is a collection of 30 agency websites from all across the globe. Take a look at these websites for creative web design inspiration.

Sponge Agency

The Holla Agency

Smart Inc.

Freckle

CHE

BMF Agency

Zubiad

Leo Burnett

Goodby, Silverstein & Partners

DGWB

Fallon Agency

Teqtonic

SBW Advertising

Bartle Bogle Hegarty

Newhaven Agency

Toybox

M/C/C Agency

Mundra Agency

Sasi Advertising

Madison India

Crayons

1 Point Size Agency

Ignitee Agency

JEKI Agency

Hakuhodo Agency

Dentsu Agency

ADK Agency

Yomiko Agency

CEMIC Agency

Beacon Agency

Conclusion

From the showcase above, ad agency sites tend to use an array of color, type and imagery to present a creative design to their audience. Simplicity, photo collages, bold colors and clever copy are universal themes.

Related Content

• Excellent Examples of Using Photos in Web Design
• Banner Ads: Excellent Examples for Inspiration
• 60 Beautiful Clean and Light Web Designs for Inspiration
• Related categories: Design Inspiration and Web Design

About the Author

Emma Egan is a freelance graphic designer from Sydney, Australia. Emma is listed in DesignCrowd’s Freelance Web Designers directory and you can invite her (and other designers) through DesignCrowd’s Web Design Crowdsourcing service.

Advertise here with BSA

Having a clean and well-structured website navigation is key in designing an effective user interface. Drop-down menus are great for sites that have multiple levels of content hierarchy. The typical design pattern of a drop-down menu is that when a user hovers over the parent navigation item, a submenu of navigation items appears.

In this collection are many different types of drop-down menus used in websites all over the web for your navigation design inspiration.

Here are some related collections regarding site navigation that you may also be interested in:

• 30 Exceptional CSS Navigation Techniques
• 50 Stylish Navigation Menus for Design Inspiration
• 20 Excellent JavaScript Navigation Techniques and Examples

1. Pure Grips

Pure Grips feature images in their drop-down menu to make it clear to the user which products are which.

2. Porsche

As you hover over each car, the image on the right changes. It also looks stunning with the semitranspart background.

3. B&Q

B&Q has a clean and eye-catching drop-down menu that lists columns of products that customers are looking for.

4. Red Brick Health

This drop-down navigation menu fits perfectly into the site design, and the pink hover highlight is a great touch of detail.

5. Carreras Con Futuro

This drop-down menu’s design embodies the hand-drawn theme of the website.

6. Galaico Folia

This drop-down submenu has a wonderful animation effect with the smaller pieces of wood folding down from the main menu item.

7. Callaway Golf

This is a masterfully neat drop-down navigation design that has an orange hover effect.

8. Converse

Converse has a grunge-styled drop-down menu that has a cloth-like texture with frizzy edges.

9. Puma

This dark drop-down menu really stands out from the rest of the site’s lighter colours.

10. Sunglass Hut

This drop-down menu is functional in that it also serves as an illustrated visual of the various styles of sunglasses.

11. Nettuts+

Netttuts+ has a clean drop-down navigation menu that works well with their header colours.

12. Tennessee Trails & Byways

This drop-down is unique because within the submenu, there’s also tabbed navigation.

13. Gateway

The drop-down menu in this design has nice curves and beautiful visuals that serve to display images of the computer manufacturer’s products.

14. Bern

This rough grunge style website has an edgy drop-down menu that complement the look-and-feel of the website’s general aesthetics.

15. Ski Alpine

This drop-down menu highlights the attention to detail that the site designer has.

16. Guitar Hero

This simple drop-down menu is practical and doesn’t distract away from the main areas of the web page layout.

17. Mac Appstorm

Here’s a clean drop-down menu that fits perfectly with the overall landscape of the site design.

18. Noizi Kidz

This navigation is bright and shaped unconventionally.

19. Audi

This drop-down menu contains thumbnails of the auto maker’s model of cars; when you hover over a car, it displays details about it along with relevant links to other pages.

20. Famous Cookies

This drop-down navigation menu showcases the yummy cookies that the store makes available to its hungry patrons.

21. Duchy of Cornwall Nursery

This paper-styled website design has a nice, clean dropdown menu.

22. EA

Electronic Arts has a playfully styled drop-down menu.

23. Bonfire Snowboarding

Bonfire Snowboarding has an awesome 3-column drop-down submenu on their "Products" main navigation item, placing their products within three categories.

24. Facebook

Facebook has their simple drop-down menu on the site’s "Account" main menu link with relevant links for editing your Facebook account.

25. Nick Ad

You have to click-and-hold your mouse pointer for the submenu to appear. Then you move onto the link you want on each drop-down and release your mouse button to visit that page; it’s an interestingly unconventional interaction design.

26. TN Vacation

This dark blue drop-down menu really stands out.

27. MTV UK

This site design features a clean and standard drop-down menu.

28. DC Shoes

The red and white text on the semitransparent black background really works its charm.

29. Envato Marketplaces

This is a really beautiful drop-down menu.

30. Tennessee Theatre

This navigation is special because it’s clean but creative at the same time. The brown really stands out from the rest of the site’s soft colours.

31. Boden

Each menu item has a different font and the drop-down menu is very clean.

32. White House

The white background, blue text, and red top and bottom borders utilizes the the USA flag’s colours.

33. Navigant Consulting

The colours used on this site work together like players of a football team.

34. Officers Club

Another clothing website with a drop-down; having a dropdown submenu makes it so much easier to find products. The Officers Club drop-down has a multi-column layout.

35. Fall For Tennessee

Fall for Tennessee has a horizontal drop-down menu that slides out to the right hand side. The menu items that have a drop-down submenu have a small arrow next to them to indicate that they can be expanded.

36. Sony

Sony has a very wide and simple drop-down menu on their main UK site.

37. Project Vino

This drop-down menu uses colours that fit the rest of the site. The big font size and the overall design looks amazing.

38. Media Temple

Media Temple has by far one of the best drop-down menus out there, aesthetically. The small thumbnail of each hosting type next to the name of them looks great, along with excellent JavaScript-based animation transitions.

39. Mozilla

This is a simple yet sleek drop-down menu on the Mozilla.

40. August

The semitransparency effect in this drop-down menu works will with the vivid background image.

41. Henleys Clothing

The main navigation colour creeps down onto the drop-down submenu.

42. Digg

The classic Digg drop-down submenus work with their website’s overall design.

43. Action Envelope

This drop-down menu is special because it has a nice shadow effect that really brings the drop-down menu out of the page from the rest of the site.

44. Very

Very, a new e-store, has a clean and structured drop-down navigation menu.

45. Incase

The Incase drop-down menu is slightly lighter in color shade than the navigation background, and works well with the site’s overall clean look-and-feel.

46. American Eagle

I really like the American Eagle drop-down menu because it fills the whole site’s width and also blends in with the clean paper-style look.

47. Mayflower Brewing

The colours used in this drop-down (and the site, in general) are gorgeous.

48. Select Clothing

Select Clothing’s drop-down menu has a dark background that stands out over the sliding images below.

49. Bird Malaysia

This drop-down menu is special because the colours stand out from the rest of the website, and I quite like the subtle background image at the bottom of each drop-down menu.

50. The Web Squeeze

The Web Squeeze has implemented jQuery into their drop-down menu to give it some nifty hover effects.

Related Content

• 30 Exceptional CSS Navigation Techniques
• 50 Stylish Navigation Menus for Design Inspiration
• 20 Excellent JavaScript Navigation Techniques and Examples
• Related categories: Design Showcase / Inspiration and Web Design

About the Author

Andy Johnson is a freelance web designer and developer living in the UK. Andy freelances through his own design studio Authentic, and also co-founded a lightning fast UK hosting company called Pixeno. You can follow him on Twitter: @Andy92.