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

10 Ways To Put Your Content In Front Of More People

By Paul Boag, May 12th, 2009 in How-To | 116 Comments

Which is more important,driving traffic to your website or encouraging as many people as possible to see your content? Believe it or not, they are not one and the same. Too often, we as website owners live and die by Web analytics applications. We fret about bounce rates, unique visitors and dwell time. However, when we focus so heavily on the performance of our website, we miss a fundamental point: we should aim to expose users to our content, not our website. The website is a tool to showcase our content, but it is not the only tool that does this.

The content matters, not the website. That is why each company provides numerous ways to access its content beyond the website. From Amazon's affiliate scheme to YouTube's embed feature, these companies can reach audiences that may never visit their websites.

While the points mentioned below will refine your strategy to deliver content to more people, they can not serve their purpose without an appropriate environment. In the age of social media and the rise of interactive web-applications such as Facebook, Twitter etc. building a community around your website is the most important way to drive traffic and keep the users coming back.

Read more...
Bizarre Surreal and Dark Art Pictures

By Aquil Akhter, March 20th, 2009 in Inspiration | 140 Comments

Art is a thing that attracts almost every individual. Today we would like to share with you two different but very interesting mediums of art which are called as Surreal and Dark Art. These types of art are quite different from other conventional mediums of art. In these medium, artist conveys his thought and imagination in a very mysterious but somewhat fantastic or I should say in a bizarre style.

I personally like these types of arts as they express the most beautiful and positive aspects of life. Artist has much room in these types of art to motivate your life, to inspire you and to bring happiness and positivity in your life. So, here’s the collection of most momentous and conceptually imaginative surreal and dark art works.

Do have a look at these photos and do not forget to share your comments with us.

Read more...
Image Caption Design: Simply Elegant or Boldly Graphic?

By Cameron Chapman, November 4th, 2008 in Design Showcase | 24 Comments

Image captions are an often-overlooked element of Web design. They’re often thought of more in terms of function than form. As long as they include the proper photo credits or identifying information about the image subject, not much more thought is given to them.

But image captions are a great place to add a bit more style to your website or to give some unique insight into the subject of the image. Whether the captions are for photos on a news website or design samples in a portfolio, they present an opportunity for reinforcing the overall look of the website. When done properly, they can even add more visual interest and become a distinguishing trademark of a particular brand or website.

There are two basic kinds of photo captions. There is the simple, minimalist, down-to-business style. These usually have a simple sans-serif font in white, black or shades of gray. They are usually positioned either to the side or below an image, though sometimes they overlay or are above it. This type is commonly found on news websites but is also seen in portfolios and other websites.

The other major style is more graphic. This often include effects, such as the caption only appearing on a mouse-over or a “Details” button displayed that leads to the full caption. While fonts are still generally sans-serif, much more color is used, and the captions are often overlaid on the actual image. These types of image captions are generally seen on portfolio websites of designers and ad agencies. Of course, there are websites that use a crossover-type image caption, displaying elements of both styles.

Read more...
Creative User Interfaces in Modern Web Design

By Torley Wong, October 21st, 2008 in Design Showcase | 79 Comments

The whole may be more than the sum of its parts, but without the parts, there is no whole. Lest that sound like some weird philosophical meandering to you, take comfort in observing the finer aspects of creative and appealing user interface design.

The following list bucks tradition by not being tied to one particular theme; although, as you’ll see, there are subtle threads running through them. While excellent, none of these designs are perfect, and I’ve pointed out room for improvement we can learn from.

Give it a go. Grab a coffee and take time to explore further. As you would a quality timepiece made of thousands of parts, analyze and enjoy how intricate parts come together to create a cohesive experience. Look closely and see what makes each website design tick.

You may also want to take a look at the following related articles:
- 40 Creative Design Layouts: Getting Out Of The Box
Read more...
40 Creative Design Layouts: Getting Out Of The Box

By Smashing Editorial, September 3rd, 2008 in Design Showcase | 182 Comments

Over the last months we have seen a strong trend towards more individual web designs. These designs often use realistic motifs from our regular life as visuals. However, apart from visual design elements one can also get creative with the layout of the site – its structure and the way the information is presented and communicated. To provide you with some ideas of how exactly it can be done, we have collected examples of creative design layouts.

In the showcase below we present 40 creative out-of-the-box layouts that break the boring 2- and 3-columned, boxed layouts. We have collected pure CSS -designs, CSS+JavaScript -layouts as well as Flash -designs. Most designs presented below risk their site structure and content presentation with unusual approaches. That's what makes them different. Hopefully you will find some creative ideas that you can develop further in your future projects.

We strongly encourage designers to break out of the usual boxed layout conventions, experiment with new approaches and risk crazy ideas. Show what you are capable of!

Read more...
Beautiful And Original Product Designs

By Smashing Editorial, May 26th, 2008 in Inspiration | 185 Comments

Successful product design manages to reveal useful functionality beyond its appealing form. No matter how excellent a design looks like, most customers aren't likely to spend money on something they won't be able to use. On the other hand, most people are likely to buy something useful despite the design it has.

Yet the key to a truly successful product design lies in designer's ability to combine both beautiful design and functionality making it obvious to the customers how the product can be used and which benefits it delivers. However, one can combine the beauty of design with the utility it is supposed to provide.

Most products fail to pass this test and never reach the production stage; some products do manage to get to the stores. In the overview below you'll find an overview of some beautiful and original product designs which will hopefully make the cut and will be available in the next years. Some of them are already available today.

You may want to take a look at our related posts
Read more...
More (Really) Stunning Desktop Wallpapers

By Smashing Editorial, May 15th, 2008 in Graphics | 211 Comments

Desktop wallpapers are always nice to look at and to draw inspiration from. They may provide with some fresh perspective and offer you some eye-candy for tedious coffee breaks. We are regularly hunting for free high-quality icons, fonts and wallpapers and present them to you, so you don’t need to search for them. As long as we find something beautiful, interesting or useful, we let you know in our posts. And now it’s time for some sweet wallpapers designer’s toolbox.

In this post we present more (really) stunning desktop wallpapers related to typography, photography, illustrations, HDR as well as some abstract and fantasy-related wallpapers. Hopefully, everybody will find something interesting for his or her desktop. All wallpapers can be downloaded for free.

You can also scan through the following posts:
Don't forget: until 21th of May you can participate in Smashing Texture Contest, take a photo, send it to us and win a professional digital camera. We have received over 200 entries so far.

Read more...
Now More Than Ever: 50 More Excellent Blog Designs

By Smashing Editorial, May 8th, 2008 in Design Showcase | 169 Comments

Designing blogs is easy. Designing blogs in a unique way is hard. Whatever blog engine you are using, there are literally thousands of templates available which you can apply directly, without any significant code modifications. That's efficient, but it's not creative, because using a default blog-template you risk to end up with some wide-spread look which has actually nothing to do with you. To convey your personality effectively, you need a design which reflects who you are and what you are doing. That's why important is not just what you post, but also how you post it.

In fact, beyond the template-design-culture exists a field of creative, individual and impressive blog designs. And the good thing about it is that this field has been rapidly growing over the last years. To celebrate the creativity of blog designers we regularly present reviews of excellent blog designs we have stumbled upon recently. This post is no exception. Below you'll find 50 further examples of excellent, unique and impressive blog designs.

Apart from "usual" minimal designs, one can observe more rather complex graphic works. If earlier only blog headers had striking visual elements, now whole web-layouts seem to have become more vibrant: paper clips, mp3-players, coffee cups and further objects are used extensively. Apparently, they are used as metaphors for the environment of site designers. Such designs are just impossible to copy and they unite the visual design with the author's content in a unique and very personal layout.

You can also have a look at our previous showcases:
- 45 More Excellent Blog Designs (February 2008)
- 30 More Excellent Blog Designs (November 2007)
- 45 Excellent Blog Designs (August 2007)
Read more...
Web Form Design: Modern Solutions and Creative Ideas

By Smashing Editorial, April 17th, 2008 in Design Showcase | 129 Comments

Web form is often the main communication channel between visitors and site owners. Feedback is always important which is why it's necessary to make sure that web forms are easy to understand and intuitive to use. Nevertheless, even in form design one can afford some healthy portion of creativity.

Web forms don't have to be boring and, using CSS or Flash, you can easily make sure that they are appealing and effective. To get noticed, you need to come up with something unique and interesting — symbols, icons, colors, position or the size of web form are often used to achieve interesting design solutions. We've searched for some examples and we've found them. Creative, original and unusual web forms.

Below we present over 40 (really) beautiful examples of web forms as well as modern solutions and creative ideas related to web form design. Some of the examples are Flash-based; however, in most cases you can easily create similar designs with pure CSS and (X)HTML.

Also consider our previous article
- CSS-Based Forms: Modern Solutions which lists modern solutions for CSS-based form design.
Read more...
Getting Creative With Transparency in Web Design

By Smashing Editorial, April 16th, 2008 in How-To | 99 Comments

Arm yourself with the knowledge of how different file types of images can be used to achieve transparency on web-pages. It's important to first understand these basics. Then learn how to push the limitations of browser support. Take a look at what others are doing with transparency on the Web; only then you'll be able to learn how to get creative with transparency in Web design.

There are well-established methods of imitating Web transparency that have been developed to overcome browser support issues. While we can appreciate past solutions, it's important to break out of this faux methodology and learn to work with PNG graphics. We are at a tipping point where IE7 continues to grab market share. And fortunately, IE7 has thet support for full Alpha Transparent PNG graphics. In the near future, transparent PNG graphics will have excellent browser support.

Ultimately, it's necessary to consider creative uses for transparency on the Web. This article reviews the use of faux transparency methods, presents examples of transparent images on both fixed and dynamic backgrounds, and points to creative solutions that take full creative advantage of today's modern Web transparency effects.

Read more...
Breathtaking Typographic Posters

By Smashing Editorial, February 25th, 2008 in Fonts, Inspiration | 237 Comments

You can't design without type. However, yon can use only type (or mostly only type) to create breath-taking designs. In fact, many graphic designers and artists take exactly this route to communicate their ideas through their works. The results are sometimes crazy, sometimes artsy, sometimes beautiful, but often just different from things we're used to. Thus designers explore new horizons and we explore new viewing perspectives which is what inspiration is all about.

This post showcases over 50 breathtaking typographic posters designed by artists across the globe. We feature Oriental, Iranian, Hebrew, Japanese, Chinese and Russian typographic posters as well as a number of further references. This isn't a "best of", there is no ranking and the collection isn't supposed to be complete; it's rather subjective and quite random. All screenshots are clickable; however, links not always lead directly to the corresponding image (e.g. it's impossible in Flash-based sites) — sometimes you'll need to search for it.

You may also want to take a look at the article Typography In Motion we've published few months ago.

So what can be achieved out of simple letters and symbols? Please be patient, some screenshots are huge.

Read more...
Grunge Style In Modern Web Design

By Smashing Editorial, January 29th, 2008 in Graphics | 214 Comments

Most design trends come unexpectedly, evolve over time, become pointless and finally disappear from the design landscape. This holds particularly for web design, which is — just as every other creative field — prone for over-hyping and over-usage of trends. Being used excessively (sometimes properly, but mostly without any reasonable purpose), trends lose their ability to communicate information, express something unique or innovative and consequently lose their visual appeal.

Web 2.0 style is an excellent example for this evolution in design. In the last months of 2007 we've observed a clear example of design abuse, as glossy buttons, colorful reflections, 3D-effects, rounded corners and xx-large font sizes could be found almost everywhere (and we've presented some examples a year ago). However, currently we've been observing a new step in this evolution. Web 2.0 elements start to disappear; they become more subtle, more user-centric, more content-oriented and less loud. Is it a sign for coming changes?

Below we've collected everything you would ever need for a perfect design in a grunge style — design examples, free fonts, icons, textures, brushes and even few tutorials.

Read more...
Adobe Photoshop Tutorials - Best Of

By Smashing Editorial, January 10th, 2008 in Tutorials | 491 Comments

When it comes to graphic design, Adobe Photoshop is usually the first option to consider. However, the software itself is a quite tough nut to crack — and definitely extremely hard to master. For instance, the concepts are not always intuitive and it's not always clear when to use what tool and how to use it effectively. In fact, in Photoshop it usually takes pretty much time to achieve something you have never done before.

However, you don't need to muddle through numerous Photoshop features and extensions for every design problem. You can use professional suggestions instead, e.g. professional step-by-step tutorials which provide excellent results and thus can save you a lot of time.

One year ago we've presented a hand-picked collection of Photoshop tutorials. Now it's time for a fresh portion of healthy Photoshop learning material. This article provides professional Adobe Photoshop tutorials which can enrich your design skills and improve the quality of your works. Although the authors of the tutorials rarely provide the information about the used version, we tried to pick only those tutorials that can be used with both CS 3 and older versions of Adobe Photoshop.

Read more...
Creative Favicons: Tiny Artwork

By Smashing Editorial, September 11th, 2007 in Graphics | 73 Comments

Since visual elements are easier to remember, they can be used to draw visitors' attention to the brand identity of the site. As visual indicators, favicons can establish the communication with visitors and make a web-site easier to remember and get back to once you need it - for instance, once the visitors look for the site in their bookmarks. Still most sites don't make use of them - just like 404-error-pages, favicons are often forgotten or simply ignored. It's time to change that, folks. Every once and again we present some of the most creative and beautiful favicons — to prompt you to design them for your sites. In fact, we are willing to do that until the trend is finally established. The design of favicons might look like a simple task; however to
- make the design recognizable,
- keep it simple and
- combine visual identity with
- visual clarity
- within a 16x16 rectangle
is a creative challenge you shouldn't underestimate. The details build the foundation of a successful logo, and to take care of the smallest details is extremely important for a usable and visually appealing favicon. The images below can be clicked - apparently, they lead to the sites from which the favicons have been taken. The examples show not only how a well-designed favicon might look like, but also which creative approaches can be used to give a favicon the freshness and clarity it deserves. The examples also demonstrate how favicons can support the overall design of the site it is being used on. You can find further favicon-showcases and some more information in the posts we’ve published before:
Read more...
50 Designers x 6 Questions

By Smashing Editorial, September 5th, 2007 in How-To | 117 Comments

Some months ago we’ve selected 50 prominent designers and design companies, contacted them and asked to answer five design-related questions, sharing their knowledge and experience with fellows developers. 35 designers have responded then. For each of 5 questions we've received 5 precise answers. The result was 35x5 professional ideas from some of the leading web-developers all around the world. Good news — planning the celebration of our 1st anniversary, we've decided to do some more math. We've selected 6 questions, which main purpose was to give fellows designers more insights in practice, and in the experience prominent designers gained during their work over the last 5-10 years. So this time we wanted it to be not about useful coding suggestions or clever CSS-techniques, but about the practical knowledge and personal experience developers would share with us and our readers. What are the things you should know before starting designing / programming? What things should you be aware of? How to get your project done? In fact, we wanted to take a close look at some practical answers to these questions - from the worlds' best designers.
First Three Questions
Since we've received many answers, we've decided to divide the article in two parts; as you might suggest, each part will cover designers' answers to three (out of six) questions. Here are the first three questions we've asked. As in the first survey, one single text line would have sufficed.
- What is one typical myth about web-development (which is not true)?
- What is one bulletproof method to get over creativity block?
- What is one thing you wish you knew before you've started programming/designing/... ?
50 Designers x 3 Questions
In August we've contacted over 70 renowned designers, and asked them even more — six — questions. 65 of them agreed on answering the questions in time, however not all of them managed to send the answers till the deadline. This time over 50 world leading designers, developers and experts have participated, however, not everybody answered all six questions. So the result is ca. 300 professional suggestions and facts one can learn only from his/her own experience. We'd like to thank all designers and developers who participated in our survey and/or were willing to take part it. Among them are Eric Meyer, Shaun Inman, Veerle Pieters, Carole Guevin (Netdiver), Jakob Nielsen, Patrick Griffiths (HTMLDog), Oliver Reichenstein (Informationarchitects.jp), Meryl K. Evans, D. Keith Robinson, Jonathan Snook, Jina Bolton, Daniel Mall, Cameron Adams, Andy Rutledge, Carolyn Wood (Digital Web Magazine), Andy Peatling, Andy Budd, Christian Montoya, Garrett Dimon, Jason Beaird, Luke Wroblewski, Mike Davidson, Richard Rutter, Dan Rubin, Matt Brett, Paul Boag, Roger Johansson, Russ Weakley, Mark Boulton, Jesse Bennett-Chamberlain and many more.
Thank you!
- Please feel free to post your own ideas, suggestions and tips in the comments. Share your knowledge with fellows developers!
So, let's move to the answers, shall we?
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...
Creative Favicons: When Small Is Beautiful

By Smashing Editorial, June 14th, 2007 in Graphics | 87 Comments

We love creative favicons. Their beauty lies in the approach a designer has chosen to put something really unique inside of the 16x16px box. Designing favicons, it's necessary to work with miniature images, and every extra pixel can be the wrong one. A good favicon is original, beautiful and - in best case - fits to the logotype and color schemes used in the web-site. Creating them is a challenge not every designer is able to cope with. It's hard, but not impossible. In fact, many creative solutions are possible, but it's damn hard to come up with some of them once you need them. Sometimes it's enough to rescale the logo to an appropriate size, as shown by Xpanity Favicon: If rescaling doesn't provide optimal results, you can try to extract some parts of your logo and bundle them together, like Kijiji did. We've collected some of them - 40 gorgeous, creative and visually appealing favicons you can use as a source of inspiration, e.g. if you have a creativity block. Images are linked; to visit the page with the favicon you like, just click on it. You can find further favicon-showcases in the posts we've published before:
- Inspire Yourself: 50 Remarkable Favicons
- Inspire Yourself: More Creative Favicons
Read more...
11 Almost Perfect Business Layouts

By Smashing Editorial, April 26th, 2007 in Design Showcase | 101 Comments

Business companies tend to impress visitors with solid site structures, precise navigation and the credibility of presented content. Therefore business layouts are usually quite unspectacular, mostly informative, but not attractive. It's an appropriate approach if you want to inform your visitors, but what should you do if you want to attract users' attention? How to combine serious tone with attractive design? We've decided to figure it out. And selected 11 almost perfect business designs / layouts used by companies from different countries of the world.
What does perfect mean?
Different tastes result in different understandings of a perfect layout. The examples we've selected stand out, because
- they are clean. It concerns both code, text and graphics.
- they have a balanced layout, all site elements have their own place and are consistently placed on all pages
- they pay attention to small details; the smallest things such as link colors and headings are well thought-out
- they make use of white space, which places special emphasis on design and content
- they use modern design elements, but remain moderate, without extreme use of graphics
- they use intuitive color schemes and high contrasts to make sure the legibility of the text and the perception of visual elements are optimal
- not all of them are gorgeous, but they don't have to. All of them are descriptive and they work, and that's what really matters.
Read more...
50 Beautiful CSS-Based Web-Designs in 2006

By Smashing Editorial, December 19th, 2006 in Design Showcase | 470 Comments

2006 was rich on creative, beautiful and unusual design concepts. We've seen a lot of whitespace, many examples of readable and usable text-design, badges, stars, rounded corners, shapes, gradients, mirror and 3D-effects - just name it. Let's take a close look at some of the most beautiful designs we've seen in 2006. Some gorgeous designs are missing? Let us know - comment on this article!
Read more...