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

Looking Back On 2008 With Top Web Designers

By Steven Snell, December 29th, 2008 in How-To | 78 Comments

The start of a new year is often a time of reflection on the past year, both personally and professionally, as well as a time to look forward to the year ahead. With that in mind, we thought it would be interesting to do a New Year's group interview with a number of top designers and developers. We put together a big list of questions and posed two in particular to each of the participants.

We think you'll enjoy the insight this panel provides into 2008 and 2009. There's a wide variety of topics covered, including favorite resources, trend predictions, business lessons learned, upcoming events for 2009 and more. Let's take a look at a large group interview with top web designers that takes a look back on 2008 and presents some predictions for the year 2009.

Read more...
Online Advertising And Its Impact On Web Design

By Steven Snell, December 3rd, 2008 in How-To | 88 Comments

In recent years, advertising has become a major revenue source for many websites. Not too long ago, online ads were often met with disapproval from visitors, and advertisers were unsure about their value or effectiveness. Today, most visitors have come to expect ads on commercial websites, and advertisers have recognized the potential of various online ad opportunities. Ads have long been a part of print publications, such as magazines and newspapers, and now they essentially have the same role in online periodicals and publications.

Although advertising is a concern for website owners and those pushing products or services, it is also has an impact on Web designers, because they have to be able to design and develop websites that can produce ad revenue and still meet the needs of visitors. Clients with websites that depend on ad revenue need a design that provides the necessary screen space and a proper layout for selling ads, and advertisers need placement that will get them the exposure they seek.

Read more...
A Short Story About “Back To Top” Links

By Smashing Editorial, November 27th, 2008 in Design Showcase | 65 Comments

Often it is the close attention to small details that makes a design outstanding. During the development of a website, designers tend to quickly forget about small details and focus on major design elements, such as navigation, typography and layout. If done properly, the result is usually a solid, impressive and highly professional design that communicates information. However, it is not memorable. The reason is that such designs often do not have a memorable voice: they may look visually appealing, but they don't provide a vivid anchor for users to remember a website after leaving it.

In this post, we showcase the design of "Back to top" links, a forgotten and rarely used link that helps users jump to the top of a given page. A visitor can achieve this effect by pressing the "Home" button on his or her keyboard; however, not every user is aware of that shortcut, and most probably use the vertical scroll bar in the browser for that purpose. As designers, we can help our users out by adding a stand-alone "top" link to our designs.

Read more...
25 Useful WYSIWYG Editors Reviewed

By Smashing Editorial, May 6th, 2008 in Developer's Toolbox | 243 Comments

When it comes to coding editors, it's damn hard to a get a clear overview of all the benefits and functionalities different editors have to offer. However, in the end everybody needs one, so it's important to know which editor is best tailored to your personal needs.

WYSIWYG-editors are often criticized by real coding ninjas for bloated, dirty and not standards-complaint source code they've been producing over the last years. However, WYSIWYG-editors have become much better recently. Some of them even produce valid and elegant code.

Sometimes you need to provide your clients with some simple tools to edit or update their web-sites. And this is where the utility of WYSIWYG-editors comes in. As a web-professional you need to provide your clients with some sophisticated advice and offer a simple yet effective tool — e.g. a WYSIWYG-editor. In this article we've tried to give you an overview of both useful and deprecated WYSIWYG-editors.

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...
39 Creative Flash Designs

By Smashing Editorial, April 2nd, 2008 in Design Showcase | 90 Comments

Flash is powerful. Using it properly, you can create stunning visual experience and offer your visitors incredible user interaction. Although Flash is definitely not the favourite medium for usability and accessibility advocates, it has its advantages. With Flash designers can achieve results which simply aren’t possible with (X)HTML and CSS. Whether you like Flash or not, it empowers the Web with functionalities which make it an incredibly interactive medium.

Flash-based web-sites can look not like web-sites at all; Flash-designers tend to use colorful, dynamic, loud and extremely vibrant approaches, with effects and animation, music and videos, stunning visual elements and interactive navigation menus. Below you'll find 39 examples of creative, beautiful, shocking, unusual, but always outstanding Flash-based designs.

You might also want to take a look at the articles
- 65 Excellent Flash Designs which features 65 examples of outstanding Flash-based web-sites.
- Showcase Of Creative Flash Preloaders which may serve as an inspiration for your Flash-projects.
- Adobe Flash Tutorials: Best Of with hand-picked professional Flash tutorials which can enrich your design skills and improve the quality of your works.
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...
45 More Excellent Blog Designs

By Smashing Editorial, February 20th, 2008 in Design Showcase | 220 Comments

We, designers, are creative folks. And being creative, we permanently strive for inspiration — innovative approaches, crazy ideas, smashing concepts and, in general, unique designs which can help us to observe a given problem from a fresh perspective. This is why we always have some fancy design books laying around on our desk, and this is why we enjoy observing other people's work — basically just because we can learn a hell of a lot from them.

There are things one can do a number of times without worrying about becoming boring. For instance, collecting and showcasing excellent blog designs. In this post we do it already the third time. Why? Web design lives in blogs; new developments appear there, that's where the music plays. And that's where you need to look for in order to keep up with current trends and developments.

This post presents 45 excellent blog designs with a perfect layout and unique personal note. We haven't analyzed the content of the blogs; instead we focused on ideas, approaches, graphics and layouts.

If you miss some stunning blog designs in this showcase please let us know in the comments. However, it's also possible that these designs have already been covered in one of our previous showcases:
- 30 More Excellent Blog Designs
- 45 Excellent Blog Designs
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 Flash Tutorials - Best of

By Smashing Editorial, January 17th, 2008 in Tutorials | 178 Comments

Although usability evangelists often consider Flash to be a usability nightmare, used properly, Flash can provide users with a rich and interactive interface which would be impossible otherwise. Today Flash is the de-facto standard for interactive elements on the Web as most users install Flash plug-in by default. And in fact, there are many paths creative designers can take to create a more interactive and user-friendly interface.

Searching for 'flash tutorials' via Google & Co. won't provide you with the results you expect. Not that you won't find any relevant results, on the contrary — you will be directed to a large number of Flash repositories which offer everything: sometimes useful, but mostly not. Besides, browsing through these repositories isn't that much fun — as you sometimes need to figure out whether a link you see is a hidden AdSense-block or the actual tutorial. And it's really hard to find something "refreshing" and new simply using some standard keywords.

This article provides hand-picked professional Flash tutorials which can enrich your design skills and improve the quality of your works. We've tried to select most interesting and useful tutorials. Most sources can serve as the entry point for further 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...
30 More Excellent Blog Designs

By Smashing Editorial, November 22nd, 2007 in Design Showcase | 209 Comments

It's not hard to design a weblog, but it's getting harder when you try to achieve a unique weblog design. It doesn't matter what weblog-engine you are using — frequently used themes tend to become boring over time, and they also don't necessarily reflect the unique identity of the blogger.

To create an original design you need fresh ideas and creative design solutions. However, you don't need to go too far with your design experiments. Basically that's a close attention to finest details which makes a weblog stand out and gives it a fresh flavour and soft touch visitors can recognize immediately.

We've selected more of them — over 30 excellent weblog designs with unusual design approaches; these blogs don't only have a unique voice, but they also pay close attention to the finest design details.
- You might find not all of the designs listed below beautiful; but that's not what it's about. They are beautiful in their own way as they are both well-structured and originally designed.
- you can find further blog designs in the post 45 Excellent Blog Designs we've published before;
- you can find even more designs in our Design Showcase section.
Read more...
65 Excellent Flash Designs

By Smashing Editorial, October 30th, 2007 in Design Showcase | 150 Comments

With Flash you can do more than just displaying videos. You can create stunning visual experience and offer your visitors incredible user interaction. Although Flash is definitely not the favourite medium for usability and accessibility advocates, it has its advantages and it empowers the Web with functionalities which make it an incredibly interactive medium. With Flash designers can achieve results which simply aren't possible with (X)HTML and CSS.

The results can be creative, impressive, beautiful and fascinating. Under two conditions: 1) if designers find the right mixture between graphics, animation, video and sound and 2) if designers follow the guidelines of usability and user interaction.

However, since there is a number of things that can go wrong in Flash, it's easy to get it wrong. In fact, there are thousands of examples where it is the case. In Flash any experiments with navigation and layouts are possible and in most cases it's extremely hard to find a creative yet intuitive approach. Flash is commonly used by designers, agencies, advertisers and interactive web sites, and not on the sites where simplicity and quick access to information are important.

In this post we present 65 examples of outstanding Flash designs with excellent use of graphics, visual elements, interface design and graphics motion. This showcase (mostly) presents "pure" web designs; we've tried to avoid Flash-based games and advertising.

Read more...
170+ Expert Ideas From World’s Leading Developers

By Smashing Editorial, September 7th, 2007 in How-To | 66 Comments

Few days ago we've published the first part of our survey "50 Designers x 6 Questions". We've presented the first three questions which we've asked and 175 professional suggestions, tips and ideas from some of the renowned web-developers all around the world we've received. Today we'd like to present you the second part of the article, which covers the rest of the survey and also presents an overview of the most important ideas and suggestions you should be aware of if you'd like to become or remain a professional.
Three More Questions
- What is one thing to do before starting a new project?
- What is one common mistake you should always avoid developing web-sites?
- What is one device/tool or/and service you can't imagine your life without?
Even More Expert Ideas!
You can find even more expert ideas, solutions and tips in our articles
- 70 Expert Ideas For Better CSS Coding Over 70 expert tips, which can improve your efficiency of CSS coding.
- 35 Designers x 5 Questions 175 professional suggestions, tips and ideas from some of the best web-developers all around the world.
You can also win one of 40+ books for professional design and development as well as one of 53 presents. First a brief summary of all 300+ suggestions, ideas and tips we've received from the world's leading web developers and experts out there. Under the summary you'll find a detailed review of all answers we've received.
Read more...
45 Excellent Blog Designs

By Smashing Editorial, August 28th, 2007 in Design Showcase | 340 Comments

Designing a blog is easy. Whatever engine you are using and whatever style you prefer, you'll always find a number of templates you can apply to your weblog in seconds. No styling is necessary, no playing with colors is needed and no mind jogging about content presentation is required. However, not every weblog should look like a typical blog. After all, not every blogger wants his or her site to look exactly like hundreds of other ones. In fact, there is a small bunch of creative, outstanding and individually designed from scratch blogs.
In this post we didn't try to showcase some eye-candy (although sometimes eye-candy is indeed offered); the designs listed below were selected for their attention to small details. Pretty and colourful header-graphics doesn't make a good blog. The blog needs a solid visual structure, a profound hierarchy of site elements; it also has to be able to build some kind of a bridge between the content and its presentation. To do this, you need to think about precision, minimalism and sound use of illustration. These criteria were the ones we've used to select the designs listed below. All these aspects make the designs we've selected look... well, not always beautiful, but outstanding, almost excellent in their own kind. Mostly it's the idea the designers used to make the weblog as usable as possible - not the implementation of this idea - which we've been after.
Below you'll find 45 excellent blog designs which impress with creative approaches and attention to details; hopefully you'll find new ideas you can develop further in your own designs. Notice that the screenshots we've provided may give you a wrong impression about the whole design of the sites; in doubt you should take a closer look at headers, footers, comment-areas, site structure and further site elements. Please also notice that you can click on screenshots to get to the sites from which the screenshots have been taken. We've missed something? Definitely! Let us know in the comments!
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...