Author:

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

Google Profile: https://plus.google.com/u/0/104031840292767553284/posts

Isn’t it sweet? Mascots in Modern Web Design

The more emotional a site design is, the more likely it is to evoke positive feelings within its visitors. To achieve a lasting impression, designers tend to use visual cues and offer some eye candy for hurried and hectic users. E.g. vibrant color schemes, photos and illustrations can be used to draw user's attention to some specific site section.

But are there any further options? Yes, there are. Actually, mascots are traditional for sports competitions such as Football World Championship or Olympic Games. Mascot is a more or less nicely designed creature which is symbolic for something and is supposed to evoke sympathy and strengthen the sense of belonging to one single team.

Mascot Screenshot

Should Smashing Magazine have a mascot? We’d like to know your opinion. If yes, how should it look like? Please let us know in the poll below and in the comments!

Read more...

Adobe Photoshop Tutorials – Best Of

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.

Photoshop Tutorial Screenshot

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

Hand-Drawing Style In Modern Web Design

The most valuable and innovative ideas had all been handwritten first. That's no big news, since designers tend to produce first sketches as paper prototypes anyway; still it's important, because web design is different from "usual" design. Of course, it also has a personal note and it is hand-made, however users can't see that. As CSS is "boxy but good", designs tend to have a rather limited appearance — they are too boxy and too right-angled.

If designers want to achieve a different design, they have to draw their sites by themselves — or at least some parts of it. And in fact, this is done quite often: whether a blog, a shop, an ad, a private page, or some collaborative project — doesn't matter whether with Flash or (X)HTML. The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note in times when colorful, sharp and rounded Web 2.0 elements can be found almost everywhere.

Screenshot

How impressive can the results be? And when can the hand-drawing style be used? Let's take a look at some excellent examples of hand-drawing style in modern web design. All screenshots can be clicked and lead to the sites from which they've been taken.

Read more...

Favicons Episode 5: The Delicate Beauties

The New Year's Eve is a tricky time for designers. Some of us eagerly analyze deadlines, define milestones and refine the time schedule for the upcoming year. The other ones discover the need to update footers and copyright statements on their web-sites (by the way, have you actually replaced "2007" with "2008" in your footer?). Still, even on the January 1st passionate designers continue to strive for inspiration in order to come up with fresh ideas for the ongoing projects.

If the latter is your case, is there really a better way to find the inspiration rather than in a fine gallery of excellent favicons - our not that secret and very lively passion? We've written a lot about favicons in the previous articles. If you'd like to find more inspiration or find out more about how they are actually created, take a closer look at the following articles and showcases:

Below you'll find more examples of an excellent favicon design; we've collected these delicate beauties over the last three months.

Favicon

Favicon

Favicon

Favicon

Please notice that the favicons weren't chosen simply because of their beauty; it's been important to us that the favicon perfectly fits to the overall site design. All favicons are linked to the sites where they are used — you can click on them to get more insights into how favicon design can be related to the layout design.

Read more...

Smashing Highlights 2007

Although Smashing Magazine is quite young, a number of things happened in 2007. Aside from dozens of articles, we've organized few contests, re-designed our weblog and we also have released two WordPress-themes and a Smashing free font.

Smashing Magazine Highlight 2007

In this post we revise what happened on Smashing Magazine over the last year. Smashing highlights, setbacks and small sensations of 2007 — in a brief overview, month by month.

Read more...

Paper Strips Menus

The beauty of an excellent design lies in designer's attention to smallest details. Conventions are our friends; however, to stand out, a design needs a creative spin, an elegant play of colors, some unique flavour — a small detail that would make a big difference.

Where the boundaries between traditional solutions and unusual approaches become fuzzy, designers tend to get creative. However, to come up with unusual ideas isn't that easy, particularly if you are dealing with some daily routine-tasks.

Paper Strips Menu
Deb Sofield sticks posts on a paper pile.

Still, nothing is impossible. Even if you're designing a navigation menu there are a number of possibilites you can explore. For instance, have you ever thought of... navigation in form of paper strips?

Read more...

Icons For Your Desktop and Icons For Your Web Designs

The value of icons lies in their ability to communicate with visitors or users in a more intuitive and effective way. Jakob Nielsen, the maestro of usability, postulated few years ago that "recognition rather than recall" is one of the basic heuristics for user-friendly design. In fact, it's necessary to "minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate."

Icons are supposed to achieve just that. And this is why it's useful to actually use them both on your desktop and in your web design. They can reduce the complexity of the design and make it easier to get from point A to point B.

Icons

Icons

In the overview below we present some of the fresh high-quality free icons which you can use for your desktop; we also showcase free professional icon sets, buttons and vector graphics you can use for your web designs. You might know some of them, but hopefully not all of them. Not all listed freebies can be used for commercial projects, however you can use all of them in your private projects of for you personal purposes. Please read the disclaimers carefully before using the icons - they’re changing from time to time.

You can also scan through the icons-related articles we’ve published before:

Read more...

↑ Back to top