Smashing Magazine we smash you with the information that will make your life easier. really.

Beautiful Examples of Vexel Artworks and Tutorials

Vexel art is a digital art that is an entirely pixel-based form of raster art that imitates the vector graphics technique, but is distinguished from normal vector graphics or raster images. "Vexel" itself is a mixture of two words ‘Vector’ and ‘Pixel’. Vexel designs are composed by using multiple layered shapes. It can be done in Photoshop, but vexel designs are not limited to only Photoshop; essentially, it can be done with any image editing software that has a good Pen Tool.

Below are some truly amazing examples of vexel artwork and also some outstanding tutorials that will help you to master the technique or at least get some understanding of how this technique can be used. Feel free to explore further works of the artists presented below. Enjoy and be inspired.

Read more...

Informative And Usable Footers In Web Design

Website designs have so many different elements that work together to convey information in a usable and organized manner. For a website to be effective, every element on the page, from the header to the footer, needs to add to its overall usability and readability.

In this article, we'll take a look at the footer and see what exactly makes for a good website footer. Keep in mind that just because the footer is at the bottom of the page doesn't mean you should slack off with good design practice.

We'll look here at what to include in footers, the importance of site maps, usability practices and styling ideas and trends. We've also compiled almost 50 well-designed footers to give you ideas and inspiration for your own footer designs.

Read more...

Non Profit Website Design: Examples and Best Practices

Non profit websites share many of the same best practices as any website. They need to be user friendly, easily navigable, and use appropriate fonts, colors, and other design elements. But often a non profit website needs to offer more than your typical corporate site.

A non profit's website needs to make it easy to find out more about their cause, to donate money, and to become more involved. It needs to make it easy for media contacts to find the information they need and the contact information of key personnel. And it needs to do all this in a way that's inviting to the organization's targeted donors and/or volunteers.

Below are a list of best practices for designing non profit websites followed by some examples of non profit websites that are getting things right.

Read more...

Showcase Of Elegant And Original Blog Designs

When visiting a blog for the first time, you get an instant and strong impression from the design and layout. Cluttered and confusing blog layouts can be an instant turn-off, while sleek and elegant designs immediately captivate the audience.

The 35 blog designs featured in this showcase engage visitors with a memorable layout, elegant design and good usability. They have no need to shout; they attract attention through sheer elegance and beauty. Through careful planning and judicious placement of elements, each of these layouts brings something unique and truly special to the Web.

Designers can take inspiration from these featured designs to create their own brand of magic.

You might also enjoy this previous article:

• 50 Beautiful Blog Designs, which lists other exemplary blog designs.

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.

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:

• 9 Common Usability Mistakes In Web Design
• 10 Principles Of Effective Web Design
• 12 Useful Techniques For Good Interface Design
• 10 Useful Web Application Interface Techniques

Read more...

Beautiful And Creative Logo Designs For Your Inspiration

Last week we already presented our first selection of beautiful, clever and creative logo designs. This post presents the second part of our selection, featuring even more beautiful and creative logos that will hopefully inspire you or at least give you the idea of what the current logo design trends look like.

Just as last time, we focused on logos that use creative methods to represent the brand through color, shapes, and typography. Every design presented below tells you something about the company that it is supposed to represent. Also note the brilliant color palletes and unique patterns used in many of these. Finally, pay attention to the typography, especially font selection and coloring.

Below you'll find a collection of 40 more beautiful and creative logo designs to inspire you. Browsing through the showcase, you will notice many trends. Some of these include the usage of simple shapes to create something complex, origami shapes, coloring and transparency trends, and many more. You may want to take a look at the post Logo Design Trends 2009 for further reference.

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.

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.

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:

• Web Design Trends For 2009
• Mobile Web Design Trends For 2009

Read more...

10 Principles For Readable Web Typography

Readability is one of the more important aspects of Web design usability. Readable text affects how users process the information in the content. Poor readability scares readers away from the content. On the other hand, done correctly, readability allows users to efficiently read and take in the information in the text. You want users to be able to read your content and absorb it easily.

In this post, we'll explain some Web typography terms and how they play into readability; we'll present numerous tips to help improve the readability of your content; and we'll showcase very readable websites, layouts and articles.

You may also be interested in the following related posts:

• 5 Principles and Ideas Of Setting Type On The Web
• 50 Useful Design Tools For Beautiful Web Typography
• Fantastic Typography Blogs For Your Inspiration
• The Showcase Of BIG Typography

Read more...

35 (Really) Stunning Photos and Pictures

We love beautiful photography. In photos, the beauty isn't necessarily reflected in an eye-catching combination of colors; perspectives, angle, composition and, most importantly, the idea behind the shot or the situation in which the shot was taken, are particularly important when it comes for our showcases.

Over the last months we have covered a variety of different photography arts, such as shadow photography, night photography, city photography, arial photography, urban decay and many others (you can find them in our section Inspiration). This time we present you a "mixed bag" of some truly outstanding photos and images, created by talented photographers and designers across the globe.

Below you'll find 35 truly stunning, beautiful and unusual photos. Every image is linked and leads to the source from which it was taken. Please feel free to explore further works of the talented photographers presented above.

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

• (Really) Stunning Pictures and Photos
• Beautiful Black and White Photography

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.

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.

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:

• User-friendly navigation menus
• Search box design showcase
• Block quotes and pull quotes
• Web Form Designs
• Pagination: Examples and Best Practices

Read more...

10 Steps To The Perfect Portfolio Website

You may have a personal portfolio website for a number of reasons. If you’re a freelancer, then you'd need one to showcase your work and allow people to contact you. If you’re a student (or unemployed), then you'd need one to show prospective employers how good you are and what you can do, so that they might hire you. If you’re part of a studio, then you might use one to blog about your design life, show people what you’re doing and build your online presence.

A personal portfolio website is all about promoting you. You are a brand, and your name is a brand name. No one is going to know about your brand unless you get it out there; and if you’re a Web designer, developer, writer, gamer or any other type of creative, then it’s essential that you have a good portfolio website.

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

• Creating a successful online portfolio
• 50 beautiful and creative portfolio websites

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.

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:

• 50 Incredible Stop-Motion Videos
• 30 Unforgettable Movie Opening Sequences
• 60 Beautiful Music Videos
• 29 Brilliant Music Videos

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.

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

Also consider our previous articles:

• Web Design Trends 2009
  A review of trends and popular design elements for 2009.
• Retro and Vintage in Modern Web Design
• 50 Beautiful And Creative Portfolio Designs
• Textures in Modern Web Design
  A great showcase of websites that have unique and creative textures.
• 50 Beautiful Blog Designs

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.

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.

Movies are made to entertain audiences, and movie websites are much the same. In order to get visitors' attention and encourage them to see the movie, a website needs to give them what they are looking for and provide some entertainment at the same time. Today's movie websites make it easy to take a couple minutes and watch a few trailers before deciding which movie to see.

Read more...

50 Beautiful And User-Friendly Navigation Menus

Usability is an essential goal of any website, and usable navigation is something every website needs. It determines where users are led and how they interact with the website. Without usable navigation, content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website — with some creativity and good design thrown in.

Below we present over 50 excellent navigation menus — we feature CSS-based design solutions, CSS+JavaScript-based menus and Flash-designs. However, they all have something in common: they are user-friendly yet creative and perfectly fit to the style of their respective websites.

Please also consider our previous articles:

• CSS-Based Navigation Menus: Modern Solutions, which lists modern solutions for CSS-based navigation.
• Navigation Menus: Trends and Examples is an inspirational collection of navigation menus.

Read more...

Whitehouse.gov Redesign: The Change Has Come

The US government is a brand, one often overlooked in favor of the obvious companies and celebrities. The United States of America is arguably a brand in dire need of refreshing. While this is certainly a larger task than simply restyling a logo or adding a smattering of Web 2.0 cliches to its Web and print material, a significant step has been taken in the full overhaul of the White House website.

Millions across the world focused on the United States' inauguration of Barack Obama, waiting for the change they were promised in the election campaign. While only time will tell if that happens, a dramatic change can be seen on the new White House website.

In this installment, we'll take a tour of the updated Whitehouse website, as well as quickly compare it to the old website under the George W. Bush administration. The many changes within the government are reflected in the website's new direction: the design, the content and the technology.

Read more...

404 Error Pages, One More Time

The design of 404 error pages is often overlooked and underestimated. However, designed carefully, these pages can make a random visitor stay on your website, take a look around and eventually find the information he or she was looking for in the first place. Effective 404 error pages communicate why a particular page couldn't be displayed and what users can do next. A search box and list of useful resources (possibly related to the missing page) could be helpful in this case.

We've already covered the design of 404 error pages in previous posts. In them, we also covered some interesting and useful ideas for designing 404 pages. Now, it's time for a fresh dose of 404-error inspiration. This article presents 50 more examples of beautiful and original 404 error designs. Some of them are beautiful but not user-friendly, others are user-friendly but not really beautiful. Please use these examples as a source of inspiration; hopefully, this showcase has something for everybody.

Also note that some examples used in this post were suggested by our Twitter followers: please follow us on Twitter to vote on which article gets published next, discuss new ideas, get fresh updates and suggest great ideas for our next posts. Thank you.

Read more...

Mobile Web Design Trends For 2009

Web designers know that the industry involves plenty of change, and continuous adaption and development of skills is required in order to stay up-to-date. In the past few years one of the biggest areas of change has been the amount of internet users that are accessing websites via phones and mobile devices. As a result, web designers have a growing need to be educated in this area and be ready for designing sites that will accommodate this audience.

Because designing websites for mobile devices brings some unique situations and challenges into play, the subject requires a strategic approach from the designer/developer. In this article we'll look at the subject as a whole, including current trends, challenges, tips and a showcase of example mobile websites. Plenty of helpful resources and articles are also linked to throughout the post, so if you're interested in learning more about designing for mobiles, you should have plenty of information at your fingertips.

Read more...