Posts Tagged ‘Showcases’

We are pleased to present below all posts tagged with ‘Showcases’.

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

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

Dilectio: A Smashing WordPress Theme

Update (22.12.2007): the theme had some comment errors; Elena has just fixed them. Please download the new version, you'll find the links below.

Over the last year Elena Gafita, the creative mind behind Design Disease team, has designed a number of free WordPress themes, as the Smashing WordPress Theme we released as a present for our readers during our One-Year-Anniversary in September'07. Afterwards we've contacted Elena and asked if it's possible to design another Wordpress theme for our readers. Elena agreed.

After we've discussed the details of the design and the main aims we wanted to achieve, Elena started to do her magic. The result is a fresh, clean, user-friendly and playful Wordpress theme "Dilectio" — a smashing Christmas present for Smashing Magazine readers. In the following, Elena describes how the design was created and what the theme has to offer.

Dilectio

Please notice that all images in the article are clickable and lead to the demo-version of the theme. You'll find the preview- and download-links in the end of the article. There you'll also find a bonus present for our Smashing readers.

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

Pagination Gallery: Examples And Good Practices

Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it is for users to follow your arguments and get the message you are trying to deliver. On the Web this can be done in a variety of ways.

In body copy headlines and enumerations are usually used to present the information as logically separated data chunks. An alternative solution is pagination, a mechanism which provides users with additional navigation options for browsing through single parts of the given article. Parts of the article are usually referred to by numbers, hints, arrows as well as "previous" and "next"-buttons.

Search engines almost always use pagination; newspapers tend to make use of it for navigation through the parts of rather large articles. And there are situations when pagination is also necessary for weblogs. Additional navigation can simplify the access to some site pages — e.g. make it easier for users to browse through the archives of the site.

In most cases pagination is better than traditional "previous - next" navigation as it offers visitors a more quick and convenient navigation through the site. It's not a must, but a useful nice-to-have-feature.

Apple Store

Misal

Flickr

Let's take a look at the good practices of pagination design as well as some examples of when and how the pagination is usually implemented.

Read more...

Tag Clouds Gallery: Examples And Good Practices

Compared to conventional navigation patterns tag clouds don't necessarily offer a more convenient and intuitive navigation. However, used properly, they can provide visitors with an instant illustration of the main topics, giving a very specific and precise orientation of the site's content. Since human beings tend to think in concepts and models, it's easier to get an idea of presented content if the main concepts are given straight away — in digestible pieces, and prioritized by their weight. In fact, the main advantage of tag clouds lies in their ability to highlight the most important or/and popular subjects dynamically which is not the case in conventional navigation menus.

Tag clouds offer a quite interesting approach for site navigation; although the technique is sometimes considered to be an "alternative", it shouldn't replace the "common" navigation but support it giving users additional clues about the content of the site. Due to their "cloudy" form the design of tag clouds sets them apart from other design elements on a page. And although designers don't really have that much choice in designing them, they still find their ways to break through the bounds of creativity and come up with some unusual approaches and solutions.

Screenshot Tagcloud

Screenshot Tagcloud

This article offers some selected examples of tag clouds, its shortcomings and also some suggestions for tagging data and links in a more profound and effective way.

Read more...

RSS: Best Design Practices And Icons

RSS is extremely simple and yet so powerful. Not only does every weblog need it for content syndication; the number of RSS subscribers is a metric for weblog's popularity and its success in the blogosphere. However, although millions do use RSS, hundreds of millions don't. That's no good news, since RSS offers a bunch of advantages that can boost your productivity and improve your information consumption in a quite elegant and easy-to-use way.

In this article we give an overview of what RSS is and present best design and usability-practices for design and placement of RSS-buttons on a web site. We also showcase dozens of free RSS-icons and provide you with references to related tutorials and how-tos.

Screenshot - RSS

Please notice that

Read more...

↑ Back to top