Menu Search
Jump to the content X X
Smashing Conf New York

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 Barcelona, 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 and publishing — all in German.

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

25 Useful WYSIWYG Editors Reviewed

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.

Screenshot

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

Footers In Modern Web Design: Creative Examples and Ideas

According to classic principles of web design, everything at the bottom of the page isn't that important. Most users think like that. And most designers are convinced that this is true. Site elements at the bottom of the page aren't really able to catch visitors' attention which is why footers are often forgotten or ignored and not given the attention they deserve.

In fact, most footers are rather boring and uninspiring. Designers often use the bottom area to mention everything they haven't found place for at the top of the site. E.g. disclaimers, W3C-buttons, copyright, "back to the top"-link and contact details. But if most designers forget it, why don't make use of it? Why don't use footers to impress visitors with something they actually don't expect at all?

Footers - volll

This post presents creative examples of footers and ideas for footer design. We've tried to identify some trends and some interesting approaches you may want to use or develop further in your projects.

You might also want to take a look at the posts

Basically, footers need to provide users with the information they are looking for. This is why contact details and a brief information about site or / and site owners needs to be placed in the footer. Corporate designs may need to provide driving directions, telephone number, a web form or at least an e-mail.

Read more...

39 Creative Flash Designs

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 Screenshot

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

Read more...

The Secrets Of Grunge Design

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.

Screenshot

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

Blog Headers For Free Download

One month ago we've asked our readers to help us create a gallery of blog header graphics which every designer could use for free and without any restrictions whatsoever. We've announced a Header Graphics Contest and now, one month later, it's time to present the most interesting, creative and beautiful works we've received.

38 graphic designers and artists participated; as a result we've received over 100 truly outstanding entries. The best ones are displayed below. Some of the participants will be randomly awarded with Poser 7, Anime Studio, and Manga Studio provided by Smith Micro Graphics. Participants, please stay tuned — we'll contact the winners within the next 24 hours.

Blog Header For Free Download

Blog Header For Free Download

Blog Header For Free Download

This post presents the results of the contest — 45 beautiful blog header designs you can use for free. Below the designers have described their themes, intentions and shown us some examples of how header graphics can be used.

Please notice that

  • often also the source image (.ai or .psd) can be downloaded,
  • all images are clickable and lead to the full-size image of the header,
  • full-size images have the resolution of 850×200 px,
  • and you can also download graphics together with source files using corresponding links in the description.
Read more...

45 More Excellent Blog Designs

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.

Screenshot

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:

Read more...

Adobe Illustrator Tutorials – Best Of

Over years Adobe Illustrator has become the standard application when it comes to illustration design. Artists, illustrators and graphic designers use Illustrator to create vector-based graphics which — contrary to raster-based editors such as Adobe Photoshop — can be easily rescaled without the loss of quality. E.g., Illustrator is often used to quickly transform hand-drawn sketches on a sheet of paper into lively and colorful digital images.

However, to master Adobe Illustrator isn't easy; and the creating process of professional illustrations requires both time and patience. Therefore tutorials can turn out to be real life- and time-savers as they show exactly what needs to be done in order to create professional illustrations and how masters of illustration actually manage to do their magic. One year ago we’ve presented a hand-picked collection of Illustrator tutorials. Now it’s time for a fresh portion of healthy and creative Illustrator material.

Illustrator Tutiorials Screenshot

In this post we present a collection of excellent Adobe Illustrator tutorials for beginners and advanced designers. The new selection isn't enormous, but big enough to provide you with some good starting points.

Please notice that

  • we've selected only those tutorials which haven't been featured last year or were released after the article was published.
  • you might also be interested in Adobe Photoshop Tutorials - Best Of we've presented few weeks ago.
Read more...

Smashing Header Graphics Contest

In many blogs header graphics often takes a prominent position as bloggers try to impress visitors with distinctive and appealing visual elements. In fact, designed properly, header graphics can create an appropriate atmosphere and convey the style the designer has chosen. Well-designed themes can be as useful as templates, particularly if you can download them and experiment with them as you wish. However, you won't find that many sources on the Web. That's time to change it.

Blog Header Graphic

We'd like to create a small smashing gallery of blog header graphics which every designer could use for free and without any restrictions whatsoever. To achieve this we need the help of our creative visitors. To achieve this we need your help. Which is why we announce a Header Graphics Contest.

Update (02.02.2008): please notice that this contest is not about designing a header for the Smashing Magazine web-site. Your header graphics don't have to be related to Smashing Magazine at all. This is about sharing your skills with fellows designers and creating a free repository of downloadble header graphics.

Read more...

Grunge Style In Modern 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.

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?

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

↑ Back to top