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:

30 Beautiful Real Estate Websites

Real estate is a valuable and often expensive purchase. Copious research is done by home buyers before venturing out to acquire real estate. In this day and age, gathering information about a property is typically done online, and an effective and captivating website design can make or break a home sale.

BATICO

In this showcase, we'll explore some great designs of real estate websites. We'll also discuss some commonalities between them to tease out current trends in real estate websites.

Property realtors want to convey the message that they're reliable and well-established. They want home buyers to feel that they will be purchasing property from a company that's dependable, steadfast and time-tested. That's why most of them opt for a classic and sophisticated theme for their websites, rather than a sleek, modern theme.

Read more...

How To Use Help Elements To Improve Your Designs

When designing a website, the most important thing is to make it as usable and convenient as possible. On a website on which users could possibly get confused, it is best to include help elements. Help elements come in all different shapes and sizes: an entire page, a suggestion box or a quick tip. But they all have one thing in common: besides doing the obvious (i.e. helping the user), help elements provide an extra convenience that brings the website closer to that sought-after usability.

Screenshot

Screenshot

With the number of forms, search functions and other navigational elements on websites these days, using them can occasionally become confusing for some users. Providing help elements in as many places as possible can be a great way to make the user's experience more pleasurable. The better the experience of the user, the more likely the user will buy your product, come back to the website and fulfill the goal that the website was built to achieve.

Below is a compilation of best practices for help elements, an explanation of when to use them and a showcase of excellent help elements.

You may also be interested in the following related posts:

Read more...

Creative Print Typography Layouts

In print design, typography is one of the more crucial aspects. Typography is essential the practice of organizing, arranging, and modifying type. The typography techniques uesed in print has a direct impact on how the reader is able to receive the image. In print, typography doesn't have to be plain and boring. It can be beautiful, creative, and colorful. There are a number of ways to liven up typography, such as creative and original layouts, using color variations, use of fancy fonts, and much more.

Screenshot

This showcase will focus mostly on the layout and organization schemes. Below are about 40 different typographic layouts used in different fields of print such as brochure design, editorial design, and poster design.

You may be interested in the following related posts:

Read more...

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...

↑ Back to top