In case you still haven’t planned anything special to do in the last week of April, we’re giving away 3 tickets to the Front-Trends Conf2 in Warsaw, Poland. Simply tweet us
@smashingmag using the hashtag
#front-trends and tell us why you’d like to be there! Or, if you’d like to attend MAD 2012 Conf3 in Spain, tell us why you want to go there! We have 1 ticket waiting for you, too (please use the hashtag
#mad2012). The winners will be announced on the 6th of April on Facebook and on Twitter.
By the way, the winner of the RE:DESIGN conference ticket is Jason Kozel from Texas, USA. Congrats, Jason! High five!
Thank you for reading, and we hope that you’ll find this issue helpful and inspirational!
The Smashing Team
Table of Contents
- Free Font: Plastic Type4
- A New Responsive Design Process: Style Tiles5
- jQuery Credit Card Validator6
- Get Smaller JPEGs While Maintaining Quality7
- A One Of A Kind JS Regular Expression Library9
- Publishing Made Easy10
- Type Connection11
- Positive Messages Through Illustrations12
1. Free Font: Plastic Type
How creative can you become with type design? Since ancient times up to the digital era, many possibilities and techniques were developed to make written communication not only possible, but also effective and versatile. Besides of its functionality, other qualities of typography were spotlighted throughout time. The designers Luis Armesilla and Christian Del Moral chose to explore the “fun” aspect of it, and created the free font PLSTK13.
The design was inspired by the plastic industry; the designers wanted to explore how they can use the various forms, shapes and imperfections of plastic within their design. The result of their experiments is a freely available, beautiful, playful font, which is released under Creative Commons Attribution Share Alike license. You can use the font for commercial as well as non-commercial purposes. Explore another playful side of design with this typographic toy. (tt)
2. A New Responsive Design Process: Style Tiles
Responsive design is hard. As Andy Clarke puts it: “Responsive Web design challenges everything we know about Web design for everybody involved in the process.” And this relates to wireframes and mock-ups as well. How do you present your responsive design to a client? Do you have to design a plethora of mockups for the different responsive breakpoints? No, you don’t.
Samantha Warren has developed a new design process “Style Tiles”16 to simplify and quicken the visual Web design process for clients. While moodboards are usually too vague for clients, and mockups too precise as well as time-consuming for designers, how about using something in-between? Samantha proposes to use a deliverable design consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the Web. She provides a free PSD template17 as well.
This way the the designer can have an easier time translating the clients’ preferences into a rough design concept, without necessarily going into exhaustive details. As a designer, you won’t have to condemn part of your creativity to the recesses of your recycling bin. (jc)
3. jQuery Credit Card Validator
If at some point you’ll need to develop a secure payment gateway, you might run into the problem of validating credit card numbers. In fact, implementing such validation isn’t that easy, because you need to first understand the different credit card types and then make sure that the number length and Luhn checksum are valid for that type of card. Good news: you don’t have to build it from scratch.
jQuery Credit Card Validator19 is written in CoffeeScript. It attaches to the input event (with a fallback to the keyup event) and so every time a number in the input field changes, it calls a validation function. When a card is recognized, the credit card type is highlighted; and when the credit card number is correct, it is highlighted with a green checkmark as well. The plugin supports American Express, Diners Club, Discover Card, JCB, Laser, Maestro, MasterCard, Visa and Visa Electron. (vf)
4. Get Smaller JPEGs While Maintaining Quality
If you have a website with a lot of large images, you might suffer from slower loading times and high bandwidth usage. There are many optimization tools out there, and often you end up saving your JPEGs at a lower quality with hope that your visitors don’t notice. If you need to compress JPEG files often, you might want to give JPEGmini20 a try.
The developers of the tool claim that their algorithms make images up to 5Ã— smaller than the originals. JPEGmini works by analyzing the input image using a quality detector that imitates the human visual system, and based on this analysis, applies the maximum amount of compression while avoiding visible artifacts. In user tests, it turned out that average users could not distinguish between original photos and JPEGmini photos. Of course, actual results vary based on specific images. But you might want to give this tool a try, and try to reduce the loading time of your Web pages without a significant quality loss. (cc)
The offered privacy policies are simple to read, offer multiple language support, and are tailored to your needs by a professional legal team. The only thing you need to provide are the services that your website uses to collect any information from your visitors—be it Google Analytics, Facebook, Disqus or any other service. You can use either the free or the pro version of this service. The generated privacy policies incorporate useful design, usability and information architecture—use it. (sp)
6. A One Of A Kind JS Regular Expression Library
The library adds new regex and replacement text syntax, two new regex flags and provides a suite of functions and methods to make complex regex processing easier. Among other things, it has a comprehensive support for capture names (e.g. the characters
$. It also supports using plugins that add new syntax and flags to XRegExp’s regular expression language. XRegExp is fully compliant with the regular expression flavor specified in ES3 and ES5, and works with Internet Explorer 5.5+, Firefox 2+, Safari 3+, Chrome and Opera 9.5+. (cc)
7. Publishing Made Easy
You love to write. You even have your own website, reviewing movies, books or just musical events at your favorite watering hole. In the morning you wake up, sit down to communicate your thoughts, then open your office program, your Web browser, log in to the interface of your CMS, and then realize you forgot that awesome opening line during the tedious log-in procedure. In your funk, you start to notice the little flaws in your design, and it all starts to feel worse.
Andreas Carlsson and Jaan Orvet have created a publishing platform that allows you to auto-publish your articles by simply saving them in your Dropbox. You write in a text-file, you save it and then Skrivr converts it to valid HTML and automatically publishes it. Skrivr27 lets you create an easy-to-use, adaptive website, with pre-built themes. Thanks to advanced typographic features, you can have a much more responsive website that adapts to screen sizes and orientations. And if you’d rather use your own domain with Skrivr, you can do it, too! All-in-all, Skrivr promises an easier publishing experience, which can make publishing much less daunting. An interesting idea; only a beta-version is available for now. (jc)
8. Type Connection
A good relationship can be characterized as two people that fit together. Aura Seltzer adopted this idea for her game Type Connection28, which was her MFA thesis project. In this game, you are a procurer who mates different typefaces. Each typeface is a lonely character searching for love—so your job is to find its perfect partner.
First you choose a base character. Then you take one of four strategies to find a couple for your character. You can choose between various pairing types, such as “rely on family”, “seek the similar”, “embrace the other” or “explore the past”. The first strategy gives you information about the font family. If you use the “seek the similar”, you would bring similar looking characters together. “Embrace the other” is for pairing very different styles together. And with “explore the past”, both typefaces show a common origin. In the next step you would get three typefaces and must choose one pair for the base character. By playing the game you will not only explore type history, but also learn typographic terms, while actually learning how to pair typefaces. (sv)
9. Positive Messages Through Illustrations
There are many ways to give good advice: nice words, a lovely melody, poetry… and sometimes a simple illustration can help to deliver the message. Take a look at these Positive Posters30 and you will understand how.
This project features posters that were designed by artists and designers worldwide with one simple purpose: to send a good message out into the world. Positive Posters is an Australian-based non-profit organization that aims, with the support of designers, to raise international awareness for global social issues.
Among many examples you will see graphics about womens’ rights, social equality, anti-smoking, democracy, campaigns against nuclear energy, etc. Each of them is accompanied by a small tagline that makes sure the audience gets the message—beautiful messages presented in a beautiful way. (tt)
The authors in this newsletter are: Stephan Poppe (sp), Cameron Chapman (cc), Talita Telma (tt), Jan Constantin (jc), Svetlana Senkewitch (sv), Vitaly Friedman (vf), Iris Ljesnjanin (il).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://2012.front-trends.com/
- 3 http://www.madinspain.com/2012/en
- 4 #a1
- 5 #a2
- 6 #a3
- 7 #a4
- 8 #a5
- 9 #a6
- 10 #a7
- 11 #a8
- 12 #a9
- 13 http://www.behance.net/gallery/PLSTK-Free-Font/3010257
- 14 http://www.behance.net/gallery/PLSTK-Free-Font/3010257
- 15 http://styletil.es/
- 16 http://styletil.es
- 17 http://styletil.es/downloads/Style_Tile_Template.psd.zip
- 18 http://paweldecowski.github.com/jQuery-CreditCardValidator/
- 19 http://paweldecowski.github.com/jQuery-CreditCardValidator/
- 20 http://www.jpegmini.com/main/home
- 21 http://www.jpegmini.com/main/home
- 22 https://www.iubenda.com/en
- 23 https://www.iubenda.com/en
- 24 http://xregexp.com/
- 25 http://xregexp.com/
- 26 http://skrivr.com/
- 27 http://skrivr.com
- 28 http://www.typeconnection.com/
- 29 http://www.typeconnection.com/
- 30 http://www.positive-posters.com
- 31 http://positive-posters.com/