Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Category: Inspiration

This category is supposed to help you break your creativity block by exploring galleries of art, design and photography. It also features showcases of web designs (blogs, portfolios and online-shops) and design elements (navigation menus, search boxes). Different from Showcases, here you will more general and abstract ideas. The section covers galleries of beautiful photography, articles about influential artists and their styles as well as showcases of art and digital art.

Popular tags in this category:

Showcase Of Well-Designed Tabbed Navigation

There are an extensive amount of roads you can take in web design, specifically in navigation. Here, we will talk about one specific navigation technique, tab-based navigation. If properly carried out, tabbed navigation can be very clean and organized within a web layout. [Links checked February/10/2017]

So what is tabbed navigation? Well, it is essentially a set of buttons most often set horizontally. Tabs generally follow numerous different styling guidelines. First, a tab set usually is attached to or slightly protrudes from a container, like in the example below. Also, notice how the open tab matches the background color of the container, and the other buttons are darker. This is another common styling guideline.

Screenshot

When you look at tabbed navigations, you will also notice many styling trends. First, many tabs will have rounded corners on buttons. This helps to create a clean look. Also helping to make a clean look is the use of separation between buttons. Most designs use space to separate buttons, but a bevel, single line, or background color contrast will also look nicely.

Read more...

Showcase Of Beautiful Sports Websites

We recently showcased beautiful websites from the fashion industry, and in response to reader requests, we'll do the same thing here for sports websites. This article showcases the most beautiful website designs from the North American sports industry, including ones for news, teams and leagues, sports apparel and more.

Screenshot

As in any industry, sports websites have their own trends, as you will see below. However, because the websites showcased here fall into a number of different categories and serve different purposes, not all of the trends we discuss will be relevant or applicable to all types of sports websites.

Read more...

Backgrounds In Web Design: Examples And Best Practices

Web design has come a long way since its beginning, especially in terms of styling. Take a look at a website from 10 years ago and compare it to one from today. The differences are enormous. One of the major changes you will notice is the background. Today, backgrounds are one of the core features that determine how visually interesting a website is.

Screenshot

The background holds the theme of the website, and there are a vast amount of possibilities when designing a website background. This article goes over the best practices and popular trends of backgrounds in the current stage of innovative Web design.

You may also be interested in the following related posts:

Read more...

Designing Drop-Down Menus: Examples and Best Practices

As a general rule, most Web developers, especially usability enthusiasts, say it is bad practice to use drop-down menus because they are confusing, annoying and oftentimes dysfunctional. From a design standpoint, however, drop-down menus are an excellent feature because they help clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature. [Links checked February/10/2017]

Yes, that's right: drop-down navigation menus can be user-friendly. Just yesterday Jacob Nielsen the results of his recent drop-down menus study, in which he found out that big, two-dimensional drop-down panels that group navigation options help users to avoid scrolling and can precisely explain the user's choices with effective use of typography, icons, and tooltips.

Screenshot

In this article we take a closer look at the nature of drop-down navigation menus, analyze situations in which they should or should not be used, discuss various implementations and finally showcase a couple of bad and good examples of such menus. The article also includes various tips and suggestions to help you work with your drop-down menus. Read more...

Breadcrumbs In Web Design: Examples And Best Practices

On websites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages. They are also an effective visual aid that indicates the location of the user within the website's hierarchy, making it a great source of contextual information for landing pages. [Content Care Dec/03/2016]

Using breadcrumbs when you do not need it.

A "breadcrumb" (or "breadcrumb trail") is a type of secondary navigation scheme that reveals the user's location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

Read more...

Fantastic Typography Blogs For Your Inspiration

Some say that web design without typography is like an orange without its peel, it just isn’t complete. Typography encompasses the reality of effective web design and achieves success in creating web page identity, eye-catching sites, and the enhancement of visual appearance.

Screenshot

Typography is much more than the “art of text”, it’s the evolution of creativity within simple to intricate web designs. One can say that a good architecture needs great support, the same concept can be applied to web design in the sense that a good blog could do without the use of typography, but an astounding one could use the creative support.

Typography leaves you with the option of bringing together simple creativity with unique and effective communication in order to get your blog or sites main focus across. Now, with all of this information at hand here are 40 fantastic blogs that will allow you to expand your knowledge base of what typography really is.

You may want to take a look at the following related posts:

Read more...

Showcase of Beautiful Fashion Websites

From a web designer's perspective, it can be very interesting to look at the top websites from a particular industry to see how they relate to their target audience, the different approaches that are used, and how they compare to websites in other industries. The fashion industry consists of companies that make their mark by designing beautiful and stylish items, and by setting trends for consumers, so one could expect to see some creativity and a focus on appearance in terms of their websites also.

Victoria's Secret

In this article we'll take a look at the websites of leading fashion companies, as well as some fashion news sites, and see when fashion, style and web design come together. As you browse through the sites that are showcased below, you'll see some variety, but you will also notice the presence of certain trends. Here is a brief look at a few of them.

Read more...

Slideshows In Web Design: When And How To Use Them

The key to smart strategic Web design is finding an appropriate and interactive way to display information. One comes upon endless possibilities when searching for ways to display information. One solution, slideshows and sliders, is an excellent way to display information such as images in an organized and compact manner. Slider galleries are excellent for organizing content into a nice clean module.

Screenshot

There are many reasons to use a slideshow or image slider. The slideshow is a universally known tool, and anyone who has used the Internet will know how to work a slideshow. Therefore, they are very usable and convenient for any user, and they can be used almost anywhere.

This article focuses on how to implement the slideshow technique correctly. We will cover when you should use a slider and how to make a good slideshow, and we will showcase good slideshows and content sliders.

Please also consider our previous articles:

Read more...

How To Use Icons To Support Content In Web Design

Why use icons? Design is all about communication: it doesn't matter how important or exciting the information that you're sharing is if you fail to hook your visitors. When initially viewing a website, most users will first scan the page for visually interesting content, and only after something grabs their attention will they actually begin reading. Icons are a simple, effective way to draw users into the content of your website. [Content Care Dec/03/2016]

Icons serve the same psychological purpose as paragraph breaks: they visually break up the content, making it less intimidating. A well-formatted page, with text broken into easily accessible paragraphs and accented by icons, is easy to read and visually interesting enough to sustain the user's attention. So, stop wasting time writing so much content that no one will read, and start using icons!

In this article we showcase beautiful examples and best practices of using icons to support content in web design. Please feel free to take a look at the showcases of navigation menus, search boxes, blockquotes and web forms.

Read more...

20 Brilliant TV Show Title Sequences

Since the advent (and in turn, massive success) of "TV on DVD", television programming has really upped the ante in production value. Now-a-days it seems every show is presented in glorious high definition with big name actors and well-structured story telling. But there is another significant improvement in television over the last few years that could use some recognition: the title sequence.

Long gone are the days of cheesy video montages involving "memorable" moments from seasons past, coupled with tacky music you can't get out of your head... yes I'm looking at you, Golden Girls.

Screenshot

Today, the credit sequences on television are so visually pleasing that even though we possess the technology to skip past them, we don't. They're that captivating. It is in recognition of these amazing television title sequences that we've compiled our favorite 20 Brilliant TV Show Title Sequences.

You may want to take a look at the following related articles:

Read more...

40 Excellent Illustrations In Web Designs

In website design, there are an endless amount of possibilities, styles and techniques that can be used to make a beautiful design that flows with the content. One of these styles is an illustration-heavy layout, which can take a website to a whole new level. Illustrations are becoming more and more popular, and some designers are really pushing the limits with some beautiful ones. [Content Care Dec/01/2016]

Screenshot

Below you'll find 40 designs that feature skillful and beautiful illustrations, integrated properly to create a visually pleasing style.

Read more...

Movie Website Designs: Examples And Current Practices

It can be an interesting experience looking around at websites in particular industries to identify trends and see how they differ from those in other industries. In this article, we'll take a look at the websites of major motion pictures to see what types of websites are being created. Movies are a big part of the entertainment industry, and in recent years their websites have become increasingly critical to their overall success. [Content Care Dec/01/2016]

Paul Blart Splash Page

The purpose of movie websites. Before getting into the details of specific movie websites and discussing current trends, it's important first to consider the primary purpose of movie websites. Obviously, in order for a movie to be financially successful, it needs to do well at the box office, and today many moviegoers use the Internet to find movies to see and to buy tickets. Having things like trailers and other video clips helps to engage visitors and encourages them to find show times and buy tickets online.

Read more...

↑ Back to top