As today’s 111th newsletter issue wings its way into your inbox, the SmashingConf in New York2 is taking place. Looking back, many of you have probably accompanied us ever since the very first round-up hit the web, while some of you discovered Smashing Magazine only after it was already an established online publication for designers and web developers. Regardless of how long you’ve been reading SmashingMag, we’d like to thank you all for your support. It really means the world to us.
Without you, we wouldn’t be where we are today. Back then, our aim was to publish articles that would deliver value and prove to be useful to our readers, and help the web design and development community grow stronger by sharing their experiences with each other. Later on, we realized how important it was not only to share our experiences online, but also offline. Conferences are a great time to get away from our day-to-day work and take a look at the bigger picture. We encourage you to attend at least a few events a year — you won’t regret it.
If you’d like to follow up on what’s happening at the SmashingConf today, you’re more than welcome to do so by following the #smashingconf5 hashtag on Twitter. Oh, and if you missed your chance in getting a ticket to today’s event at NYC, perhaps we’ll see you at the SmashingConf in Freiburg6 this upcoming September? ;-) There are still a few tickets left!
See you offline,
Table of Contents
- Creating CSS3 Animations In No Time7
- Free Wireframing eBook8
- Spritebox: WYSIWYG Tool To Create CSS From Sprite Images9
- A Lightweight, Minimalist Icon Set10
- A Grand Gesture11
- It’s All About The Passion12
- For The Love Of (Pantone) Colors13
- Unifying The World’s Handwriting14
- Exploring Visual Trends In Contemporary Graphic Design15/li>
1. Creating CSS3 Animations In No Time
With the rise of CSS3 and HTML5, the usage of fake textures and complex image assets rapidly declines. Designs become simpler and minimalistic. While some of us complain about the similarity of many websites, some are about to embrace the digital possibilities that make the web much more different from print design, i.e. while keeping your design simple, you can still make it stand out with clever animations and hidden surprises that surprise and delight the user.
Bounce.js17, by Joel Besada, is a tool that can help you create great interactions for the selected objects on your website. Simply choose a pre-defined preset and tweak it to fulfill your needs. Or start from scratch and add desired components. Whenever you’re ready, simply export the CSS or get the short URL to share it with your peers. Fancy! (ml)
2. Free Wireframing eBook
As Chris Bank from UXPin says, one of the goals of sketching, wireframing and prototyping is delivering great product concepts — not great deliverables. On over a hundred pages, Chris shares a variety of insights, comparisons, frameworks and references to help better utilize wireframes during the product design and development process.
The Guide To Wireframing19 is a free eBook that covers a lot of different areas of wireframing; it explains the why and how wireframes were introduced, portrays different types of software (pros and cons are analyzed), and last but not least, presents the most popular web and mobile UI design pattern wireframes. This eBook provides you food for thought in a diverting way — we highly recommend it! (kv)
3. Spritebox: WYSIWYG Tool To Create CSS From Sprite Images
Creating CSS from sprite images is tedious work especially for designers who don’t have a lot of coding experience. Luckily Gilbert Sinnott created Spritebox20, a great WYSIWYG tool to help web designers easily create CSS from sprite images. Simply upload your sprite into the web-based editor and click and drag to slice our icon. Assign a class name to each slice and output the CSS.
The current beta features include the generation of sprites, the combination of spritesheets, the creation of Retina ready images and the export into CSS, Less or SASS files. (ml)
4. A Lightweight, Minimalist Icon Set
Are you looking for a lightweight, minimalist icon set? Then we recommend checking out Licon22. Created by Siamak Mokhtari, Licon consists of 30 useful UI icons that suit any project that requires something chic yet simple. And the best part: the icons are made with pure CSS3 so they can be embedded without adding any additional bulk to your site.
The set includes only the useful stuff — think arrows, checkmarks, a finder, trash, lock and other versatile things that are sure to come in handy in any kind of project. And if you wish, you can even add Animate.css24 effects to the icons. Handy! (cm)
5. A Grand Gesture
In a time in which touch screens and gestures are all the rage, you may have some custom interactions and gestures of your own in mind. If so, then we’ve got just the right article for you: learn how to implement custom gestures25. Keep in mind that you will have to consider user interaction first, and how different gestures will work with one another.
For instance, when implementing a scrolling gesture, you want to be explicit in your intention that a user should only ever scroll vertically or horizontally. For some other instance, you may also find that you want to support mouse interactions. But then again, why not simply give these gestures and interactions a go and find our for yourself? (sh)
6. It’s All About The Passion
So, are you ready to jump out of bed at 3 AM in the morning? For what, you ask? How’s this for an answer: For the passion! But not just any kind of passion — we’re talking about passion-based business! Seriously, what if you could really make that old dream finally come true and create a business doing what you love?
Some of us may keep this kind of dream in the back of our heads, and have never thought of taking a single step towards it in order to make it come true. Why, oh why? Have you at least tried to seek the opportunity to monetize your skills? Have you taken at least a tiny step? Maybe all you need is a bit of inspiration? Get it now by joining Ashley Baxter and Paddy Donnelly on a journey to figure out how to create a business doing what you love on Working Out Podcast28. The world is big enough for any skill! (ea)
7. For The Love Of (Pantone) Colors
Colors, colors, colors… what’s your favorite color? Pantone 1575 C? Or how about Pantone 116 C? Unless you are totally not into graphic or printing, you will know that these terms are not names of robots but color codes belonging to the popular Pantone Matching System29 (PMS). Each Pantone color equates to a formula and a graphic designer anywhere in the world can specify a PMS color and (if all goes well) a printer that is located anywhere in the world will print out the exact and correct ink color for the printing project.
Besides making life easier in printing, it looks like Pantone’s system is also something people really love to play with — almost similar to a toy box that brings all kinds of extraordinary projects into life. Want to see some? On Tiny PMS Match31, Inka Mathew takes you on a beautiful visual journey through tiny everyday objects that match specific Pantone colors. Or check out what it looks like when someone tries to match the world’s skin tones32 with their corresponding Pantone colors. Truth is out: there’s a little bit of Pantone in and around all of us! (ea)
8. Unifying The World’s Handwriting
With all its distinctive squiggles and lines, edges and curves, our handwriting is something very unique. But what would it look like if someone unified the handwritings of as many people as possible, and from all over the world, into one typeface? An interesting scenario that the Universal Typeface Experiment33 is exploring at the moment.
To find it out, a specially developed algorithm calculates the average of all handwriting entries that are made on the project’s site35 and merges it into a font that is constantly evolving as more people contribute to it. A nice bonus feature: the Universal Typeface Experiment does not only showcase the current state of the typeface, but also lets you explore each letter individually by gender, age, country, handedness, and industry. Fascinating! (cm)
9. Exploring Visual Trends In Contemporary Graphic Design
Everything around us is influenced by contemporary trends and tendencies — or even by going against them. To explore these visual trends in contemporary graphic design, Trend List36 has set themselves a high goal. By searching, sorting, and naming these tendencies, they try to spot when and where they exactly arised, in which countries they are most extended and how they’ve evolved over time.
The team at Trend List also analyses the appearance of posters, books, catalogs, magazines, album covers, and even invitations for the cultural sphere. Take a look at the analyses and comparisons sorted by countries, trends and studios — you’ll be amazed! (kv)
The authors in this newsletter are: Melanie Lang (ml), Kristina Vogt (kv), Cosima Mielke (cm), Shavaughn Haack (sh), Esther Arends (ea), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://smashingconf.com/schedule
- 3 https://twitter.com/hashtag/smashingconf?f=realtime&src=hash
- 4 https://www.flickr.com/photos/marcthiele/14413584686/in/set-72157644792424680
- 5 https://twitter.com/hashtag/smashingconf?f=realtime&src=hash
- 6 http://www.smashingconf.com/freiburg-2014/
- 7 #a1
- 8 #a2
- 9 #a3
- 10 #a4
- 11 #a5
- 12 #a6
- 13 #a7
- 14 #a8
- 15 #a9
- 16 http://bouncejs.com/
- 17 http://bouncejs.com/
- 18 http://uxpin.com/guide-to-wireframing.html
- 19 http://uxpin.com/guide-to-wireframing.html
- 20 http://www.spritebox.net/
- 21 http://www.spritebox.net/
- 22 http://siamakmokhtari.github.io/licon/
- 23 http://siamakmokhtari.github.io/licon/
- 24 http://daneden.github.io/animate.css/
- 25 https://developers.google.com/web/fundamentals/input/touch/touchevents/
- 26 https://developers.google.com/web/fundamentals/input/touch/touchevents/
- 27 http://workingoutpodcast.com/
- 28 http://workingoutpodcast.com/
- 29 http://en.wikipedia.org/wiki/Pantone
- 30 http://tinypmsmatch.tumblr.com/
- 31 http://tinypmsmatch.tumblr.com/
- 32 http://humanae.tumblr.com/
- 33 http://theuniversaltypeface.com/home
- 34 http://theuniversaltypeface.com/home
- 35 http://theuniversaltypeface.com/home
- 36 http://www.trendlist.org/
- 37 http://www.trendlist.org/