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

Slideshows In Web Design: When And How To Use Them

By Matt Cronin, March 9th, 2009 in Design Showcase | 79 Comments

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:
Read more...
Block Quotes and Pull Quotes: Examples and Good Practices

By Smashing Editorial, June 12th, 2008 in Design Showcase | 99 Comments

Quotes are used to emphasize excerpts of text. Since users almost never read but scan we need to provide them with some focus anchors to fix their attention to the most important parts of our articles. Furthermore, quotes are always used for testimonials and sometimes for blog comments. They can be styled using graphics, CSS and a little bit of JavaScript. Sometimes, creative dynamic solutions can be applied as well.

This post presents creative examples and best practices for design of pull quotes. We’ve tried to identify some common solutions and interesting approaches you may want to use or develop further in your projects.

You may also want to take a look at the posts
- Navigation Menus: Trends and Examples with recent trends, examples and innovative solutions for design of modern navigation menus.
- Web Form Design: Modern Solutions and Creative Ideas presents beautiful examples of web forms as well as modern solutions and creative ideas related to web form design.
- Pagination Gallery: Examples And Good Practices with good practices of pagination design as well as some examples of when and how the pagination is usually implemented.
- Tag Clouds Gallery: Examples And Good Practices presents creative examples and ideas for design of tag clouds.
Read more...
Showcase Of Creative Flash Preloaders

By Smashing Editorial, March 13th, 2008 in Design Showcase | 78 Comments

When it comes to Flash, images, animation, videos and sound effects are often used on large scale. Consequence: in most cases Flash takes quite much time to load and requires a good dose of patience from users. Users know it and are often willing to give a Flash-site some time to load. However, to count on user's patience, Flash-designers need to inform site visitors how much patience is actually required. If it isn't done, the latter have no anchor point to estimate how much more time is needed and consequently close the browser window thinking that the site simply doesn't work properly.

In this post you'll find some creative Flash-preloaders which may serve as an inspiration for your Flash-projects. Please notice that sometimes you need to look closely and precisely in order to find the preloader. Depending on the server load and your connection preloaders may quickly disappear. In most cases it's not a disadvantage — well, at least it shouldn't be.

Please notice that
- you might also want to take a look at the article 65 excellent Flash-designs we've published earlier,
- this selection is not ultimate and isn't supposed to be the best of; it is intended to provide you with some ideas for creating your Flash-preloaders once you need to — please share your favourite Flash-preloaders in the comments to this post.
Read more...
The Secrets Of Grunge Design

By Smashing Editorial, March 11th, 2008 in Design Showcase | 227 Comments

Shiny and glossy design elements are now officially outdated. Just like retro is becoming trendy again, grungy look appears to rapidly gain on popularity. And there is a damn good reason behind it. In our everyday environment we're unlikely to find ideal geometric forms or pretty shadow effects as they are manifested by glorious Web 2.0-designs. The reality is different, and Web is definitely not an exception here.

Therefore designers often tend to explore the less ideal and more realistic design solutions which reflect the world we're living in more accurately and precisely. Result: such elements give the design a more realistic, genuine look, a look one would actually expect in real life.

In such grunge designs dirty stains, torn images, "broken" icons and creased pieces of paper are as popular as hand-drawn elements and dirty textures. The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note. And dirty textures are often used as background images for navigation menus, photos and overall layouts. Usually these elements are regular objects from our daily life, replicated in their real form without any glossy effects.

Read more...
Gallery Of Date Stamps And Calendars

By Smashing Editorial, February 22nd, 2008 in Design Showcase | 84 Comments

Designer's attention to small details often has a significant impact on how visitors perceive the overall design of a web-site. Although users' main focus usually lies on finding information, it's nice to find the content being supported by finest visual details. This holds for favicons, shopping carts, pagination and tag clouds we've covered in our earlier posts. But it also holds for... well, date stamps and calendars. Apparently, the latter are used not only in weblogs, but also on large web-sites where events, news and any kind of time-planning is involved.

In such designs a tear-off calendar is often used to symbolize the date in a most intuitive way. However, it's not always the case. In fact, designers seem to experiment with a number of different approach one wouldn't really expect from such a tiny design element. Out collection of appealing and interesting calendar icons and date stamps is supposed to prove it. It might provide you with some fresh ideas once you need to design some original date stamp, but don't know where to start from. All images are clickable.

Some of presented examples may not look nice at the first glance, but they all have some idea behind them — an idea you may use and develop further.

You might want to check out the following articles as well:
Read more...
Flash-Based Galleries For Your Images

By Smashing Editorial, October 12th, 2007 in Graphics | 119 Comments

In many situations web designers should avoid Flash and prefer usual text-based presentation. For instance, in most tasks related to pure text presentation Flash is neither necessary nor user-friendly, and it also has some serious accessibility problems: in fact, "pure" text is easier to maintain and easier to copy and paste.

However, if you'd like to present some multimedia-content, particularly images, Flash can often be a feasible solution, with flexible image management for web designers and impressive visual presentation for users. Used moderately, Flash-based galleries can give the presentation a fresh spark and create a rich visual experience you might want to offer your visitors.
In this post we present some of the free, attractive and flexible Flash-based galleries you can use to present your images more effectively.
- You might find some useful references to further galleries in our article 30 Best Solutions For Image Galleries, Slideshows and Lightboxes.
Read more...
Selected Wallpapers For Your Desktop

By Smashing Editorial, September 21st, 2007 in Graphics | 146 Comments

If you can't live without a nice wallpaper on your desktop you might need to invest many hours in the search for the perfect one - that fits to your resolution and has an appealing theme. The quality of the desktop images is often not the one you'd praise over and over again looking at your desktop. The best wallpapers aren't cheap photos, but are works of art in their own right. In the third part of our collection you'll find many different types of background images - beautiful wallpapers, devkits, Flickr pools, Widescreen and HD-monsters and even wallpapers-related social communites and wallpapers for gamers. You might want to take a look at the previous collections of wallpapers we've already put together:
- Selected Wallpapers: For Desktop & Web-Design 60+ selected posters, wallpapers, galleries and background images.
- More Creative and Beautiful Wallpapers 42 more galleries of wallpapers and posters.
Read more...
Creativity Spark From Masters Of Illustration

By Smashing Editorial, August 21st, 2007 in Design Showcase | 406 Comments

Creative thinking is an essential part of design workflow. Whatever sketch you are working on, at some point you find yourself in the situation where you simply need some fresh ideas to find your path around the creativity block. Going away may help. Listening to the music may help. But particularly the works of the famous graphic artists may help. In fact, studying them very closely, you can not only explore new ideas, but also learn the smallest details - they form the profound foundation of every masterpiece. In this post we'd like to present you an ultimate breakthrough for your creativity blocks; over the last weeks we've been searching for the most popular graphic designers, illustrators and artists around the world. We've selected some of their works to give you an idea what style they have and what details of modern design you can expect and learn from them. So what do we have as result? Over 100 breathtaking illustrations from some of the best contemporary graphic designers, illustrators and artists; besides you'll also find references to further (mostly unknown) sources for inspiration you can use on a daily basis.

Once you've selected the artist whose works you like, click on the image to get to his/her portfolio and explore his/her work in more depth. Please notice that most artists listed below are well-known in the worldwide design community (and so are their works); hopefully you know not all of them. Please be patient, it may take a while until the images are loaded. Please be aware that it also may take a while until you've seen most of showcased images. Further suggestions and ideas? Please comment.
Read more...
Inspiration Package: 60+ Usable & Elegant Designs

By Smashing Editorial, July 4th, 2007 in Design Showcase | 192 Comments

We all love beautiful, usable and impressive web designs. To achieve them, web developers need to focus on many aspects, but basically it all boils down to the question, how well the content is presented and how easily the information can be perceived. Harmonic color schemes are as important as solid and consistent typography. Precise visual structure and intuitive navigation are essential for both usability and accessibility. In fact, mostly it's a keen attention to small details which gives web-sites a profound and enduring nature.
We've selected some more of them. Over 60 elegant, usable and impressive designs with a well thought-out color scheme, typography and visual structure. Their beauty lies in the way the information is presented. Their usability lies in the way they communicate presented data. That's what makes them different.
Next week we'll present the .pdf-version of this showcase. You might be willing to check out further showcasese we've presented before.
- Subscribe to our RSS-feed to keep updated about our new posts.
- 60 Elegant and Visually Appealing Designs
- Keep It Simple, Stupid! - the showcase of simple designs.
- 45 Fresh, Clean and Impressive Designs
- 30 Beautiful Dark Designs
- 50 Beautiful CSS-Based Designs in 2006
Read more...
60 Elegant and Visually Appealing Designs

By Smashing Editorial, May 21st, 2007 in Design Showcase | 226 Comments

It's quite easy to get stuck in creativity blocks, but it's damn hard to get out of them. Particularly if you are out of time and don't want to compromise your professional principles selecting the first "quick-n-dirty" solution you can think of. To get things done, you need inspiration and creative thinking. You need fresh ideas and elegant approaches. And you need to be able to find them as quick as it is possible. Handy references and examples are therefore both useful and enjoyable - after all, who can resist gorgeous, professional, elegant and visually appealling designs?
We've selected some of them. In an overview below you'll find 60 fresh, elegant, professional and visually appealling designs, which pay close attention to details and manage to remain simple, user-friendly and nice-looking. You might be interested in taking a look at design showcases we've published before:
Please feel free to comment upon the selected designs: nothing is more important to us than constructive criticism from your side. You can also Digg this post, bookmark it on Del.icio.us and Stumble it!.
Read more...
30 Scripts For Galleries, Slideshows and Lightboxes

By Smashing Editorial, May 18th, 2007 in Developer's Toolbox | 297 Comments

Family photos, vacation snapshots or creative artistic works: whatever images you have to present, you can present them in a variety of ways. On a big screen, in slide shows or in a thumbnails gallery. However, to convey the message of presented data effectively, it's important to offer it in an attractive and intuitive way. Furthermore, the presentation itself can make images more valuable and simplify the browsing through hundreds of slides. There are literally hundreds of solutions for web-based galleries out there. We've selected 30 scripts of impressive slideshows, lightboxes and galleries you can use for effective presentations of your images. Most of them don't have any technical requirements, so you can use them right away. Let's take a look.
Read more...
10 Fresh, Elegant and Clean Wordpress Themes

By Smashing Editorial, May 7th, 2007 in Design Showcase | 259 Comments

We like to observe the Web. We like to present fresh ideas, creative solutions and interesting approaches. We like to share them with our readers, making both our personal work and the work of fellows developers easier. Observing creative works of talented designers, you can improve your skills and learn new techniques. However, to do that, you need to keep an eye on fresh and inspiring starting points. We collect them. And present them to you. Every month. So you don't have to.
Let's take a look at 5 fresh and elegant and 5 simple Wordpress themes you might be willing to use for your next project.
Read more...
Inspire Yourself: 58 Creative Logos

By Smashing Editorial, March 13th, 2007 in Graphics | 156 Comments

Logotypes stand for Corporate Identity. The better a logo is designed, the greater is the probability that your potential clients will remember your CI and get back to you once your service is needed. Consequence: designers have to be creative and put many efforts in designing beautiful, unique and catchy logos. And the results they come out with are sometimes stunning and spectacular. Both in graphic design and web design. This isn't just another collection of logotypes. These are 58 creative logos you can inspire yourself from. Nevermind how different the logos are - they show the current trend in modern logo design. The logos we've selected below have been created and optimized for Web.
Read more...
More Creative and Beautiful Wallpapers

By Smashing Editorial, February 22nd, 2007 in Graphics | 117 Comments

Wallpapers can be creative, inspiring, gorgeous and hilarious. Recently we've posted an overview of Selected Wallpapers for Desktop and Web Design and Christmas Wallpapers. However, there is more to showcase. And these wallpapers are definitely worth a look. Now it's time for something fresh, original and creativie. Let's take a look at some more creative and beautiful wallpapers for your personal desktop.
Read more...
CSS-Based Footers: Modern Solutions

By Smashing Editorial, January 9th, 2007 in Design Showcase | 59 Comments

Every design element deserves particular attention in Web 2.0. Navigation menus, forms, comment forms, comment designs, tables, typography, fonts, even more fonts and even download buttons are designed in more detail to make a good first impression. The smallest things can make a big difference - one of those smallest things are footers, used to visually close the content of a page; however, as you'll see below, sometimes they also have some more functions.

Read more...
Crème de la crème of CSS: List of CSS Galleries

By Smashing Editorial, December 21st, 2006 in Design Showcase | 95 Comments

One can discuss whether numerous CSS-galleries challenge our creativity, however they can serve as a quite nice source for inspiration. The galleries of CSS-based designs showcase exemplary design practices, solutions, ideas and templates. Once you have no idea what you should do next with your web-site, it's worth taking a look at some beautiful works - crème de la crème of CSS-designs - out there. Below you'll find a brief overview of css-galleries you can explore inspiration from.
Read more...