Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Author:

Sven is the co-founder and former CEO of Smashing Magazine. He's now writing at his Conterest Blog, where he focuses on blogs, content strategy, writing and publishing — all in German.

Twitter: Follow Sven Lennartz on Twitter

Google Profile: https://plus.google.com/+SvenLennartz-sf/posts

Grunge Style In Web Design

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. [Content Care Nov/03/2016]

Web 2.0 style is an excellent example for this evolution in design. In 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. 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.

Texture Screenshot

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

Isn’t it sweet? Mascots in 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. [Content Care Oct/11/2016]

Mascot Screenshot

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. [Content Care Oct/30/2016 – this is a memorial, no links here anymore]

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. [Content Care Nov/03/2016]

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

Splash Pages: Do We Really Need Them?

Yes, sometimes we do. Should we use them? No, we probably shouldn't. Splash screen (or splash page) is a front page of a web-site that don't provide the actual content, but offers visitors some kind of intuition or background information for what the site is about. Designers use splash pages in their portfolios to impress potential clients with eye-candy. Companies tend to make use of them to draw users' attention to their latest products. And users literally can't stand them, because splash pages usually take a long time to load and provide (almost) no navigation options — except of "entering the site". [Content Care Oct/11/2016]

Splashpage Screenshot

Depending on designers' creativity, splash pages use more or less attractive visual elements. Splash pages usually have a very simple structure — mostly just an image with few text lines and links. The design of these pages sometimes isn't related to the overall site design. And although most sites don't use them, splash pages are sometimes necessary and therefore remain popular. In fact, there are some situations in which we might want or might even need to use them. Even although we shouldn't — for our visitors' sake.

Read more...

Logotrend 2007: Leaves

In modern logo-design leaves stand for fresh ideas or - more generally - for an innovative way of thinking. In Web they are mostly used to communicate light-weight solutions as well as clean and unobtrusive designs. In fact, leaves, plants or ornaments which appear to be related to the nature can be found almost everywhere; it's a trend that will probably be reversed soon, due to an extreme overuse of the theme in modern designs. The sites themselves, using leaves for their logos, mostly do not have a relation to foliage - and even although often green color is used, that is not necessarily the case.

9rules
30Logo
Logo with leafes

We'd like to present you some of them. The following logos aren't supposed to represent the quality of logo designs with leaves, but the trend we observe on the Web. The images can be clicked and lead to the sites from which the logos have been taken. You'll also find tutorials you can use to learn how to create "leaf logos". Please notice that this post features only those logos which are related to the Web.

What do you think? Is an extensive use of leaves in logos a current Web 2.0 hype which will disappear soon or are the leaves here to stay?

Read more...

Time-Savers: Code Beautifier And Formatter

Well-documented and readable source code is essential for every collaborative project. Logically structured, well organized and nicely formatted, the code can speed up the bug hunting and help to keep the code clean, minimal and still functional. These facts are particularly important if the code is being developed by a group of developers: in this context a common scheme for source code presentation is necessary. You don't have to do everything by hand; in fact, there are many tools which can save a lot of time - for you and your co-workers. [Content Care Oct/10/2016] The tools and services we've collected below aren't validators. They format and beautify the code; some of them can remove redundant elements. Using them, you have to make sure you have a backup, so your data can always be restored. Screenshot Screenshot Let's take a look at code beautifier and formatter which can save you a lot of time and help to maintain a clean and readable source code. Read more...

30 Scripts For Galleries, Slideshows and Lightboxes

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. [Content Care Oct/14/2016]
Screenshot
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...

↑ Back to top