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 New York, dedicated to smart front-end techniques and design patterns.
It's always great to have a little toolbox with just the right tools waiting for you when you need them. What if you are about to start working on a new project which should apply the material design language introduced by Google last year? What if you had just a good starter kit with everything you need to dive into the creative process without being distracted by routine tasks?
We're here to have your back — with a little selection of handy goodies, icons, templates and tools to help you get off the ground faster. This post is one of our first shorter "Sideblog" pieces where we highlight some of the more useful and helpful snippets and goodies every now and then. We'd love to hear your feedback in the comments to this post.
Every now and again we showcase fantastic favicons, those tiny pieces of art that you’ll find in your browser’s address bar or when rifling through your bookmarks. These little gems are important because they serve as visual indicators to help visitors easily identify content in their browser. That aside, favicons are just nice to look at, and way too many websites don’t make use of them. We want to change that, which is why we are presenting what is now the ninth episode in our favicons series: a small article with tiny images and fast loading time… for a change.
Any picture's merit is debatable. But notice that these favicons were chosen not simply for their beauty and originality; it was important to us also that each fit the overall website design and logo. Pay attention to the details of the design.
All favicons are linked, of course, to the websites from where they were taken (if they still exist). Click on them to get more insight into how favicon design relates to overall layout design. The order here does not indicate any ranking.
Today we are glad to release 30 Swirl Brushes, a set with 30 high-quality swirl Photoshop brushes with an average size 2000px. These brushes were created with Adobe Photoshop CS4 and also work with the version CS, CS2 and CS3. This set was designed by Thomas Béal especially for Smashing Magazine and its readers.
You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed, rented, transferred or otherwise made available for use. Please link to this article if you would like to spread the word.
CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load. And if you haven't heard of CSS sprites before, now is probably a good time to learn what they are, how they work and what tools can help you create and use the technique in your projects.
The term "sprite" (similar to "spirit," "goblin," or "elf") has its origins in computer graphics, in which it described a graphic object blended with a 2-D or 3-D scene through graphics hardware. Because the complexity of video games has continually increased, there was a need for smart techniques that could deal with detailed graphic objects while keeping game-play flowing. One of the techniques developed saw sprites being plugged into a master grid (see the image below), then later pulled out as needed by code that mapped the position of each individual graphic and selectively painted it on the screen.
You may want to take a look at the following related posts:
2008 was a successful year for us and for Smashing Magazine. Reviewing what has happened on Smashing Magazine over the last year, we could have told a couple of impressive stories that happened here and there, but we won't do that. Instead, we would like to take a rather critical look back and discuss what we've done and what has changed in 2008.
We genuinely thank our readers for your attention, criticism, ideas, suggestions and numerous emails and links over the last year. We have tried our best to improve the quality of our articles and increase its value for designers and developers. In this post, we review what has happened on Smashing Magazine over the last year: smashing highlights, setbacks and small sensations of 2008, in a brief overview, month by month.
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.
Every now and again we showcase beautiful favicons — tiny pieces of art you’ll usually find in your browser’s address bar or when searching through your bookmarks. Favicons are important as they provide visual indicators to visitors and help them to easily associate the content with a bookmark in their browser. Besides, favicons are just nice to look at and there are way too many sites which don’t make use of them. We like to change things. Which is why here is the 8th episode of the favicons series. For a change a small article with very small images and a quick loading time.
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. Pay close attention to the small details of the 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. All favicons are listed without a particular order. All images are linked - of course, if the page that contained the favicon still exists.
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 fifth 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.
In the showcase below we present 50 beautiful blog designs that literally stand out — either through their layout or through their design or through their attention to little details. Below you'll find a variety of designs: clean designs, grunge, retro, graphics-heavy designs etc. Most designs presented below risk unusual approaches in the choice of design and content presentation. That's what makes them different. Hopefully you will find some creative ideas which you can develop further in your further projects.
We strongly encourage designers to break out the common layout conventions, experiment with new approaches and risk crazy ideas. Show what you are capable of!
You may want to take a look at the following related posts:
Three weeks ago we have encouraged our readers to participate in our <hr>-contest by designing beautiful and creative horizontal lines. It was necessary, since this design-element was slowly disappearing and was often neglected in web design. But it is going to change now. We have received 1290 images and source-files from 384 designers across the globe. The result is an impressive collection of horizontal lines that designers can use for free without any restrictions whatsoever.
Many entries contained not only images, but also source-files, mostly for Photoshop or Illustrator. You can use them if you want to modify a design for your projects. For this purpose we packed these files in one .zip-archive with all source-files (109 files, 25 Mb). Of course, it would be better to provide the link to a .zip-package next to each of the designs presented below, but it would take many hours of work which we can actually use in a more effective way. We can not guarantee that all images in the .zip-package are correct as we haven't tested all of them.
Unfortunately, some entries could not be considered for the contest. They didn't meet our requirements, were too big or unusable. It was important for us that these files could be used in projects beyond the scope of our contest.