As a designer creating a good business card for yourself can be quite task. The need for a visually appealing business card design is greater than in other work fields. There are 2 steps to giving a business card, not only as a designer, but as a business individual in general. The first step, and most important is ensuring the business card is kept. The second step is, of course, getting the project.
Sharing a great looking business card with a partner can often make the difference between getting the job or not. Not to mention that most, let’s say ordinary business cards end up in the trash after awhile. An unusually creative card made out of metal, plastic or rubber can ensure you a permanent slot in that ever-growing pile of business cards of your potential business partners.
There is a growing trend of digitizing business cards through card scanners. Though there are some advantages to having the cards scanned such as the space gained and ease of search, the lasting impression of receiving an appealing and unusually creative business card cannot be matched.
Feeling the unusual shape, the embossed metal or letterpressed paper will certainly help gain you the appreciation and respect needed to start or cement a good business partnership. So take a look at the showcase we have prepared of unusual business cards.
Two years ago, we launched the Smashing Email Newsletter. Today, we’d like to reflect on some of the greatest newsletter articles of the past year and celebrate this anniversary with our 100,000 readers with a fabulous book giveaway!
Back then, we planned to launch the Smashing Newsletter only if we had at least 10,001 subscribers who were interested in receiving the newsletter; and indeed, we managed to reach over 17,300 subscribers! Up to the present day, our newsletter is being sent out to more than 100,000 readers and we have promised ourselves to do our best to make their subscriptions worthwhile. Every two weeks, we hunt down obscure blogs, useful tools, valuable techniques as well as quality goodies, and present them to our readers in short bits and pieces in our newsletter issues.
The Smashing Newsletter has been traveling quite a lot in the past two years!
We work very hard to ensure that each and every article featured in the newsletters has a purpose, a value and a meaning—something tangible for our subscribers to take away from each issue. The Smashing Newsletter is a collective effort of the entire Smashing team: the editors, eBook producers, support team, proofreaders—the initials of the team members are what the mysterious signatures at the end of every piece actually stand for. It’s our little team project that involves everyone here at Smashing Magazine and is dedicated to the best interest of our dear readers. Also, the feedback that we receive from our subscribers is what truly motivates us to keep up our work and helps us to constantly improve on its quality.
Of course, no birthday bash is perfect without a little fun and games—that is why we have selected a handful of outstanding design books to give away! If you’ve found the newsletter issues useful to you, please feel free to share the Smashing Newsletter with your friends and colleagues. And in case it still hasn’t found its way into your inbox yet, you can subscribe anytime:
How Do I Win A Book?
It’s quite simple actually. Post your opinion about the Smashing Newsletter in the comments section below. Tell us which of last year’s posts was your favorite, or why someone should subscribe to the Smashing Newsletter, or what you’d like to see featured, or even other newsletters you’d like to recommend. The 6 winners will be randomly selected and announced on the 12th of March 2012.
PANTONE: A Color History of the 20th Century by Leatrice Eiseman and Keith Recker. Chronicle Books, 204 pages.
The Icon Handbook by Jon Hicks. Five Simple Steps, 323 pages.
Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement by Aaron Gustafson. easyreaders, 144 pages.
Malcolm Gladwell: Collected by Malcolm Gladwell. Little, Brown and Company, 768 pages.
Saul Bass by Jennifer Bass and Pat Kirkham. Laurence King Publishers, 428 pages.
Notations 21: 165 Musicians Visualize Sheet Music in Unusual Ways by Theresa Sauer and Mike Perry. Mark Batty Publisher, 320 pages
Typography Sketchbooks by Steven Heller and Lita Talarico. Princeton Architectural Press, 368 pages.
Street Sketchbook: The Creative Process of Top Graffiti Artists by Tristan Manco. Chronicle Books, 272 pages.
Best Of Smashing Email Newsletter: Year Two
Last year, the Smashing Newsletter delivered 183 short articles in total. The ones below were the reader’s favorites:
Cinemagraph: Animated Photography
If you ever feel drained, Jamie might be able to help. Jamie collects vintage cameras and old typewriters, and he makes a living off of his photography in New York City, occasionally using film. From Me To You is his impressive photography blog, a collection of scenes from around the world, memorable events, food, people and small personal universes. The interesting part is that the photos are animated (hence the name); they come to life using good old animated GIFs.
The author’s experimental cinemagraph posts not only seem to come alive, they really do! Your jaw may drop as you scroll through the colorful entries, perhaps catching a model winking at you or seeing those curtains rustled by the wind. Just sit back for a moment and let Jamie take you on a journey. Did a taxi really just drive by? Did this girl in the right upper corner really smile?…
If From Me To You has aroused your interest in the Cinemagraph technique, then pay a visit to the article Positioning an animated gif over a jpg image. His short tutorial explains how to save on bytes when putting GIFs and JPEGs together, without losing too much quality. (sp)
Works Of Art Done Entirely In Light
Light painting is probably one of the most beautiful forms of photography. Using nothing but various lighting tools and a single long exposure, beautiful shapes are created seemingly from nothing. In true light painting, no post-processing or retouching work is done.
David Gilliver creates beautiful light paintings using a variety of light tools. The one shown above, Ribbon Dance, shows beautiful reflections in the water, and bright, vibrant colors. The photographer is “present” in all of his paintings, although he isn’t visible because he wears dark clothing and is constantly moving. Be sure to check out his website and his photostream for even more great light paintings! (cc)
A Lyric A Day
Take one lyric from a song every day and create art or shoot a photograph inspired by it. That’s exactly what Lukes Beard has been doing for almost a year now. The result is fascinating: A Lyric a Day is a remarkable collection of artwork, all dedicated to powerful statements in songs and heavily influenced by the music and the designer’s personal mood and interpretation of the songs.
The designer’s commitment to the project is both encouraging and challenging: are you ready to commit yourself to designing something every single day, too? A Lyric a Day is a good example of a creative side project, which in this case helps the designer explore his creativity and imagination and study new ways to connect music, lyrics and visual design. (vf)
Tilt Firefox Extension: DOM Inspection In 3-D
How much time do you spend traversing the DOM in Firebug, exploring the relationships between nodes, analyzing the structure of code and trying to manipulate it with nasty (or not so nasty) JavaScript? Well, perhaps you’d like to try a different approach to DOM inspection for a change. Mozilla’s new tool, Tilt Firefox Extension lets you visualize the DOM tree of any Web page in 3-D. Because the DOM is essentially a tree-like representation of a document, the developers of the tool have decided to layer nodes based on the nesting in a tree, creating stacks of elements, each with a corresponding depth, and textured according to the Web page being rendered.
Unlike other DOM inspectors, Tilt allows for instant visual analysis of the relationship between various parts of the Web page, but it also makes it easy to see obscured and off-page elements. On request, developers can pull in further information on each node’s type, ID, class or attribute, providing a way to inspect (and edit) the inner HTML and other properties. The driving force behind the visualization is WebGL. The latest build of the extension is available for downloading and should work in the latest version of Firefox. Who knows? Perhaps playing with the DOM can be fun after all. (vf)
Thirty-Three Vintage Album Covers
Some people collect postcards, others collect stamps or pencils. The guys behind Jive Time Records, a Seattle-based store specializing in used vinyl, collect — guess what? — vintage album covers. More than that, they group and classify them according to their shapes: circles, dots, squares, lines, stripes or arrows.
The result is Project Thirty-Three, a growing collection of vintage album covers that convey their messages with only simple shapes and typography. The website features over 430 covers and the collection keeps growing. Now, that’s an interesting source of inspiration for your next cover design or poster! (vf)
Things Organized Neatly
Being organized may be very helpful in our everyday lives. Some people are naturally organized, and without noticing it, create patterns and rules for systemizing their objects. In case you’re one of those talented people who makes a hobby out of this mania, you’d certainly like to visit Things Organized Neatly.
In the blog curated by Austin Radcliffe, you’ll observe perfectly harmonized compositions that vary in shape, size, material, color, category and related objects. Some examples are vintage matchboxes, headphones, keys, cups, to name a few. There’s also the possibility of posting one of your compositions, in case you’d like to show your friends that organization can also be an art in itself. (tt)
Art Of The Menu
The days of boring laminated restaurant menus are finally over. The good old UnderConsideration, a legendary website that chronicles the most curious, creative and notable projects around the world, has come up with a new category: “Art of the Menu” which catalogues the underrated creativity of… menus.
Pay the website a visit and discover how scanning a menu in a restaurant or bar does not have to be boring. Does your favorite bar or diner have a menu worth looking at? Submit it, and make it part of this inspiring collection, which covers various cuisines. Hopefully soon, the menus will cover many countries and continents, too; until they do, enjoy the creative outbursts of the field’s pioneers! (sp)
Cutting-Edge Web Typography Experiments
Modern Web technology allows for remarkable interactive and visual experiments with media that used to be static and monotonous. Those times are long gone, and the project Web Typography for the Lonely proves just that. Christopher Clark, creator of the website, celebrates the power and beauty of Web typography through various visual experiments.
The website is essentially an ongoing collection of experiments and writings on Web typography and the possibilities of cutting-edge standards-based Web design. Christopher is pushing the boundaries of what is both possible and practical in Web standards in a way that is compelling and exciting to the visually minded creative. At the moment, five experiments are presented, among them creative works that play with SVG, HTML5 canvas, CSS and JavaScript. All examples are documented, and the source code can be downloaded and studied on GitHub, along with related techniques and resources. (vf)
Fractal: Valid Code In HTML/CSS Emails
CSS support in email clients is all over the map. Some have great support, some have almost no support, and most fall somewhere in between. Figuring out what to use and what to leave out is tricky at best, especially if you constantly have to refer back to charts and graphs that tell you what does and does not work in each client.
Fractal is a tool developed by Campaign Monitor that validates your HTML and CSS and lets you know which clients your email will and won’t work in. Fractal gets even more useful, though: in addition to flagging the parts of your code that are unlikely to work, it also gives you suggestions on how to fix the problems. You can even contribute your own fixes to make the app even better. (cc)
HTML5 Canvas Vector Graphics Scripting Tool
HTML5′s canvas opens up whole new opportunities for creating vector graphics right in the browser. You can work with the canvas directly, of course, but using a wrapper has added benefits. Paper.js is more than just a wrapper, though. It’s a full library with a lot of highly useful tools that canvas alone doesn’t provide.
These tools include highly optimized and accurate mathematical calculations for bezier-related manipulations (such as bounding-box calculations) and a well-designed scene graph and DOM. Paper.js makes it easy to create paths and add segments, and it comes with handlers for mouse and keyboard interaction and assets such as symbols (which let you place multiple instances of an item in your project). Some useful Paper.js tutorials are available, too. The library is being developed by Jörg Lehni and Jonathan Puckey and is distributed under the permissive MIT license. (cc)
DesignersMX: What Tunes Keep Designers Rolling?
Music. Design. Inspiration. The three have gone hand in hand ever since homo sapiens have walked the earth. DesignersMX is dedicated to finding out which tunes keep designers around the globe rolling and get their creative juices flowing. Blake Allen and Josh Sullivan kept it simple: just sign up, log in and share your own compilation of fresh beats and bright tunes. Let the world out there know what music is worth playing during those brainstorming sessions and periods of focused concentration.
Every featured compilation consists of 10 tracks. All of the tracks are playable on the website, so you can cycle through the playlist or enjoy the entire compilation. Last but not least, the designers’ reviews of album art are worth a glance or two. (sp)
David Rumsey’s Map Collection
David Rumsey’s Map Collection is a large collection of maps of the world from 1700 to the 1950s. The project was started over 25 years ago and contains over 26,000 high-resolution images of maps, with new ones added regularly. A good number of historical maps are also mapped to Google Earth and Google Maps. so you can track them on current geographic data.
The project provides access to carefully catalogued high-resolution images of maps, as well as a variety of tools for comparing, analyzing and viewing items in new and experimental ways. The website is updated monthly. (il)
Mr. Stacks: On-the-Fly Layer-Comp Storyboarding
For us designers, an effective workflow is all about having a solid collection of little time-savers, each of which eliminates some mundane task and helps us focus fully on more pressing and creative responsibilities.
Mr. Stacks is a tool that helps exactly with this. It is a small Photoshop script that can quickly generate storyboards, stacks and PDFs for project CDs, client presentations or anything else — right from the Layers Comps in your Photoshop file. The script would be useful for a series of animations, storytelling elements in a design and advertising.
You can take any normal-sized banner and spit out paneled storyboards in just a few clicks; or you can use it to email the latest PDFs of your work to clients (although an installed version of InDesign is required for that). To use the tool after installing it, go to “Scripts” in the File menu in Photoshop and select “Mr. Stacks.” Unfortunately, the script works only in Photoshop CS5. (vf)
Method & Craft: The DVD Extras of Web Design
Looking into the methods (and sometimes madness) of other designers can be fascinating and insightful. And reconsidering our own work habits after observing the habits of others sometimes results in higher productivity or better results. Finding that kind of information in a single place, though, is challenging at best. It often requires going to a bunch of different blogs, each of which focuses on a different designer.
Enter Method & Craft. Describing itself as “the DVD extras of design,” it offers a behind-the-scenes look at different designs, including how they were achieved, the techniques used and how the designers have grown in their professional careers. It offers articles, interviews, videos (showing designers at work) and notes (offering short tips and links). Eight authors are currently contributing to the website, all with varied design backgrounds. (cc)
The Current State of HTML5 Forms
HTML5 has many new features intended to make the process of creating websites easier and to improve people’s experience in using those websites. Among the features are many enhancements to Web forms. Because HTML5 is fairly new and not all of its features have been worked out yet, not every browser supports HTML5 features the same way.
On Wufoo’s HTML5 Forms website, you can explore all of the new features to learn which browsers support which features and to what extent. The list of browsers includes various versions of Firefox, Safari, Chrome, Opera and Internet Explorer. Unfortunately, IE9 is far from wide HTML5 support in terms of HTML5 Forms. (tb)
Moshik Nadav’s Typography
Moshik Nadav’s true love is typography and typeface design. He sees typography as a distilled form of design. He is currently a fourth-year student in Jerusalem specializing in typography. Below is only one of the many great experimental type designs that he exhibits on his website and that are worth checking out.
Nadav’s portfolio is full of inspirational typographic artwork and creative projects. Especially interesting is his project “Playful Ampersand” which features hundreds of experimental designs of the traditional Ampersand sign. Moshik worked for two years as a graphic artist at a prominent advertising company in Israel and now works as a freelancer, practicing typography and typeface design. (ik)
The Art of the Title Sequence
This Web resource of film and television title designs from around the world is free to the public and updated monthly. The Art of the Title Sequence is dedicated to the brief history of title design, and it features opening titles for film and television. High-resolution thumbnails from the titles are presented, the works are extensively cataloged, and the variety of tools allow you to compare, analyze and view items in new and experimental ways.
The works, which are intended to foster creativity, are accompanied by stills and video links, interviews, creator notes and user comments. Also, check out A Brief History of Title Design Video, a short film that features some memorable and remarkable title designs. Hats off to all the designers who have created and are still creating excellent title sequences! (il)
Diptych, Triptych and N-tych for Photoshop
Every photographer and Web designer who has spent time arranging images and photographs knows that scaling and resizing takes time. But even existing templates are unnecessary when you try out Reimund Trost’s latest little Tych Panel for Photoshop. It completely automates the n-Tych creation process, and it has a lot of layouts to choose from. “Tych Panel comes with a fresh aroma of speed and feel of simplicity.”
Here’s how it works. After installation, the panel is available through the Adobe extensions manager. Once open, just select the images you want to use, tell the panel your target width for the whole Tych, and then select the quality of the automatically resized images and whether you want the single images to be saved separately. Each image will be opened in a separate layer, and the document will be ready to be tych’d!
Pick a Tych variant, and you are ready to go. Applying the script repeatedly will add further rows and columns to your layout. (sp)
A Paper Record Player
There are some sleek invitation cards out there, and this is surely one of them: a wedding invitation with a paper record integrated in it that amplifies the sound of a sewing needle moving along the grooves of a flexidisc record. Kelli Anderson and her boyfriend Daniel have come up with a remarkable way to invite Karen and Michael’s loved ones to their wedding.
Not only did they design a fine cover for the invitation card, but they managed to bring the simple paper card to life with Karen and Michael’s wedding song, which they composed themselves. And to think this is only a taste of what’s to come. (il)
Death To Comic Sans
Not a day seems to goes by anymore when you don’t come across some instance of Comic Sans being used completely inappropriately. Police communications, office memos, church bulletins, restaurant menus: the list goes on. For whatever reason, your average DIY graphic designer thinks that Comic Sans is the perfect font for every occasion.
The next time you see someone using Comic Sans inappropriately, consider sharing with them a link to Comic Sans Criminal, which lays out the reasons why Comic Sans is misused and offers some helpful alternatives. Apparently, the only appropriate uses for Comic Sans are when your audience is under 11 years old, when you’re designing a comic and when your audience has stated that they prefer Comic Sans. (cc)
PayPal Fee Calculator: I Wonder What I’ll Be Left With…
If you haven’t heard about it, it’s about time: PPCalc is what you need on days when you shoot money over the Web via PayPal. If your clients pay your invoices via PayPal or you are an active eBay’er or just a regular online shopper, you might want to know PayPal’s fees in advance before making a transaction. PPCalc shows you the exact amount you would have to charge a buyer if you wanted to sell your item for, say, $100, and not $100 minus the $3.20 PayPal fee, which would leave you with a net $96.80.
This PayPal fee calculator supports different PayPal rates, including the standard and merchant rates, as well as different countries and currencies. It even lets you calculate the 2.5% currency conversion fee due in some multi-currency transactions. The MassPay File option allows for up to 5000 simultaneous payments, charging the fee to the sender, not the recipient. PPCalc comes with a button generator for any possible call to action you might need on a commercial website. The online mobile version of PPCalc might also be helpful.
If you have been wondering why the money you receive via PayPal tends to vary, check PPCalc before accepting your next payment. Thanks to Ryan Olbe for his development efforts. (sp)
Sprite Cow: Generate CSS For Sprite Sheets
When it comes to optimizing the loading times of pages and reducing the number of HTTP requests, CSS Sprites is one of the most popular techniques to use. With sprites, you store small images in a larger master file and then “grab” them using the background-position property in CSS. The technique is often used for icons, user interface design elements and buttons in various states. However, manually calculating the values of the background-position property can be quite tiresome. There has to be a better way.
Indeed, there is. Sprite Cow is an online tool that helps you get the background-position, width and height properties of sprites from a sprite sheet as a nice bit of copy-able CSS code. To get the CSS code, just upload the master sprite, click on the image in the sprite that you’re interested in, or select an area by clicking and dragging. The tool also works with master files that do not have transparent backgrounds, but to use them you’ll need to select the color using the “Pick background” feature.
Overall, a quick, simple and useful time-saver. The tool currently works in Chrome and Firefox, but doesn’t play well with Safari on Mac due to a lack of HTML5 File & FileReader support; hence, you might want to consider alternative tools, such as SpriteMe, Sprite CSS Generator and Smart Sprites. (vf)
GreatAster: The Online Art Boutique
Museums around the world stockpile the great works of art, making them inaccessible to most people. GreatAster has chosen to grant the world access to its fine collection of historical and contemporary art. High-resolution scans of illustrations from antique textbooks, as well as engravings and renowned masterpieces make up this treasury of art. Simply search the collection by entering your query, and specify the desired size and resolution prior to purchasing.
If GreatAster is unable to find your desired style, theme or technique, it will put all of its wheels in motion to get it for you. You can subscribe to the RSS feed to get constant updates on the collection. If you are a true art lover, you can not only download, but purchase pieces as wall art. GreatAster also has a “Free for web” section in which the owners of the project allow to freely employ any available images from their gallery but require a link back to the site. The whole collection is updated constantly, so check back daily. The website might at least trigger your creativity anew. (sp)
Meeting Notes Made Easier
Take the hassle out of creating meeting notes with minutes.io. This is a neat little Web app for creating and sharing notes quickly and effortlessly. We all know how writing down ideas and suggestions from meetings can be time-consuming, and yet the best time to note those comment is either during the meeting itself or right after it has ended.
This tool can be used at both times very easily. Minutes.io essentially gives you a detailed template in which you can track attendees and record agenda items, with due dates and owners. Once the meeting has finished, you can email the notes to all of the attendees before they get back to their desks. The tool uses HTML5 local storage, so your drafts are saved in the browser even if you are offline, waiting to be sent when you’re online again. You can even use keyboard shortcuts for quicker notes. (ar)
So, You Think You Can Build A Website?
We all know how it works: you have a great idea, get all worked up about it, only to realize moments later that you would have to recruit just about every freelance programmer, designer and copywriter you know to get it done. That’s when disappointment strikes. But there is a solution (well, kind of).
Vitamin T has come up with a handy flowchart “So, You’ve Got an Awesome Idea for a Website?” to determine whether you’ve got the drive and talent to launch that rocket and make your idea fly. Simply start in the center and work your way through the question filters. It sounds a bit dry but is actually quite entertaining once you start recognizing yourself in some of the answer paths. You’ll end up with advice either on who could greatly enrich your project or to consider bartending. Let’s hope for the former: go try to be the next Web sensation! (sp)
World Time Buddy: Simplified Coordinated Universal Time
Companies with collaborators around the world, as well as people who live far away from their dear ones and people who simply have many friends abroad can now count on a new tool. World Time Buddy is a tool that helps you coordinate time zones. Choose a home zone, and add up to nine other places. The interface is easy to use and shows concise information: the days and times of the locations you have selected are conveniently listed in a column.
To help you avoid scheduling a video conference at 3:00 am, the hours of the day are differentiated by color. Working hours are shown in light yellow, early morning and evening hours are in light blue, and nighttime hours are in dark blue. Once you’ve decided on a time by clicking on the relevant column, you can send it via Gmail, insert it in your Google calendar, copy it to your clipboard or share a Web page that lists the details. Another simple idea that works. (tt)
More Than A Facelift For Browsers
The conceptual design of browser windows has not changed much over the last decade. Address bars are where they have always been, unnecessarily taking up space at the top of the window. How wonderful would a real native full-screen view of a website be? Inspired by the recent release of Mac OS X Lion, and in an attempt to address the complications that arise with mixing old and new interaction paradigms, Henrik Eneroth took on the challenge of developing a mock-up of a new browser concept.
Henrik suggests getting rid of address bars and combining some of the functions found in existing browsers that have not matured enough to conquer a spot in the minds of users. Henrik has grouped related tabs together, applying name tags that describe the contents of the groups. The user also has the option to save groups. Do you have suggestions of your own, or do you find the topic especially interesting? Join the discussion and help innovate the browsing experience! (sp)
TileMill: A Map Design Platform
The guys over at MapBox have come up with something that will save many of us the hassle of making maps look good. They’ve created TileMill, a modern map design platform that enables designers to easily create map designs using custom data. The tool is built on the open-source map-rendering library Mapnik and covers a variety of maps, from globe to street level.
Selecting exactly what TileMill should display is easy. Styles, markers, heat maps, you name it: TileMill will render them accordingly. The instant preview allows you to target specific areas and styles using styles.mss and labels.mss, which is the intuitive Carto language (similar to CSS). You can export your maps to PNG, PDF and MBTiles formats. The tool can be used on Mac OS X, Linux and Windows (using VirtualBox). How much more useful can it get? (sp)
Open-Source Exchange Rates and Currency Conversion
So, you’d like your customers to be able to purchase your products in various currencies, but how exactly do you build this functionality into your product? Sure, there are plenty of free currency conversion services, but finding a free and reliable API for developers to access the rates data is darn hard.
Joss Crowcroft has created an Open Source Exchange Rates API, which provides up-to-date, flexible and portable currency-conversion data that can be used in any application, framework or language (not just JavaScript). It has no access fees, no rate limits, no nasty XML: just free, hourly updated exchange rates in JSON. Even better: Joss has also built money.js, a JavaScript currency conversion library that can be easily integrated in any website. A demo playground and detailed documentation are provided on the website, and the source code is available on GitHub. (vf)
Format Dates And Times With Moment.js
Properly formatted dates and times are often a common headache when it comes to websites where users have to provide either a specific date (time) or a date (time) range. Of course, your interface should be forgiving and accept all meaningful input that your users provide — independent of the format they choose to use. But what you need apart from that is a fine-tuned control and the ability to manipulate how they’re formatted.
Moment.js makes it easy to do just that. It’s a lightweight JavaScript library which lets you format, parse and manipulate dates. You can add or subtract dates from one another, as well as parse things like Unix Timestamps. Display options include formatted dates, time from now, difference, time from another moment, native date, support for leap years, and much more! (cc)
Easier Number and Currency Formatting
Proper, consistent formatting of numbers and currency is a tiny detail that makes a difference in design. But you can’t always count on those who update the content to adhere to the preferred style. Some will use numbers with commas, while others will leave them out; some will use the proper currency symbols, and some will not; and some will add more than two decimal places. You end up with a mess that someone has to go in and manually fix.
Not so if you use Accounting.js. This simple, tiny JavaScript library will solve your currency and numbers-related formatting hassles, and it even includes optional Excel-style column rendering to line up symbols and decimals. It will make all of your numbers and currencies look much more uniform and professional than they would if left to many content creators. (cc)
jQuery Credit-Card Validation Plugin
So, you have to integrate credit-card validation in your next project? Where do you begin? Should you break out that trusty book on regular expressions? Should you look up the numerical structures of various credit-card types? And how many credit card providers are there anyway? Good news: it doesn’t have to be that difficult.
Smart Validate is an off-the-shelf solution that ensures users have entered a valid credit-card number before processing the transaction. The plugin supports American Express, MasterCard, Visa, Diner’s Club and Discover. Now, that’s a plugin that will save you headaches in your next e-commerce project! (vf)
Typing With Style Requires Inspiration
Typography is one of the most important elements of design. It can make all the difference, turning your product either into a useful, usable delight or the audience’s worst nightmare. Rather than commit the common mistake of setting type randomly, why not study and explore resources on typography offered by Typetoken?
Typetoken offers not only examples of good typography, but also interviews with designers, discussion on typography, visual language artwork, typefaces, and book announcements. It certainly is a goldmine for explorations in typography for your next design. (tt)
The Web Developer’s Wonderland
We love to create wonderful things for the Web. But as in any other profession, Web development comes with truly enjoyable, creative tasks and some mundane, boring ones. Probably the most frustrating task is having to reload the browser page during development or debugging every time you make a change to the page. It doesn’t have to be this way.
LiveReload — a “Web developer’s wonderland,” as the authors describe it — is a desktop app that monitors changes in your file system. As soon as you save a file, the file is preprocessed as needed, and the browser is refreshed. Also, every time you change a CSS file or image, the browser is updated instantly without you having to reload the page, which might save you some time that you could invest in more meaningful tasks. The tool supports CoffeeScript, SASS/SCSS, LESS, Stylus, HAML and Jade, and it ships with all of them included. A great useful time-saver for every Web developer’s toolbox. LiveReload is currently available only for Mac. (ld)
CSS Tilt-Shift Technique and Animated Background Patterns
CSS is powerful. Just when you think nothing else can be done with CSS, a creative front-end developer comes along and develops a striking new technique that shows the possibilities of the technology and pushes its limits.
Simon (“Simurai”) has been experimenting with various CSS properties for a while now, and his experiments are certainly worth checking out. In his CSS3 tilt-shift technique, he uses text-shadow and adds a bigger offsetY and blur-radius to the top and bottom edges, so that the text appears to have a lens blur that is typical of the tilt-shift effect. There is also some rotate, rotateX and skewX to make the text match the perspective of the background image. This is a great example of what can be achieved with text shadows and rotations when properly used. Also, last week Simon created animated CSS3 background patterns using Webkit keyframe animation and radial gradients and dozens of background-image properties. Have you experimented with CSS recently, too? Let us know on Twitter or Facebook!
(ld)
HTML5 Whiteboard Magnets
There are a number of ways to produce wireframes or just to discuss the structure of a design or of code at an early stage of development. You could use a whiteboard, paper, wireframing kits… or you could combine them all. Cameron Moll has produced HTML5 Whiteboard Magnets which can be used on a whiteboard to show and discuss mark-up and to explain and communicate design decisions.
It’s very simple, too. Just buy magnetic sheets that are compatible with any inkjet printer, or print labels for magnets. Put them on your whiteboard with enough space for hands-on HTML5 instruction and for writing the actual mark-up. You can download Cameron’s AI files for the magnets, and add your own HTML5 (or CSS, JavaScript, etc.) elements if you wish. A very simple idea that could prevent misunderstanding and confusion. (vf)
A Curiosity a Day
Did you know that Apollo 11 had only 20 seconds worth of fuel left when it landed? Or that the tone for an incoming message on a Nokia phone is “SMS” in morse code? Or that the first smiley ever written was in 1982? Or that Pablo Picasso was accused of stealing the Mona Lisa? If you are eager to learn more curiosities like these, you should check the website Learn Something Every Day.
Two years ago, the designers of Young studio started gathering information about various areas of interest, such as popular personalities, the natural sciences and worldwide curiosities. Every day until August 2011, they published a new illustration, presented as a humorous comic with a vibrant colorful illustration. You can check out most of them online, but they are also released as special paperbacks. A simple idea, yet so many surprising facts. (tt)
CSS3 Image Styles
Did you know that if you apply CSS3′s inset box-shadow or border-radius property directly to an image element, the browser won’t render the style perfectly? But if you apply the image using background-image, then you can add any style to it and it will render properly.
Nick La’s article “CSS3 Image Styles” shows you the possibilities of using the background-image CSS property to create basic circles, a card style, an embossed style, a cut-out style, morphing and glowing, a glossy overlay, reflections and a feather circle. And to make it dynamic, you can use jQuery to wrap the background image dynamically for every image element. The techniques work in every browser that supports border-radius, box-shadow, :before and :after. Unsupported browsers will fall back to the image without any styling. (ld)
Useful Document Templates for Web Designers
Whether you’re a seasoned veteran or a newcomer to the Web design industry, various documents are a vital part of your day-to-day business, everything from contracts to invoices to client worksheets. In practice, though, we usually don’t spend enough time refining them in order to improve our workflow.
DocPool aims to change that by sharing commonly used documentation, created and submitted by designers and developers worldwide. So far, the website offers examples from a variety of designers, including a business planning template, an invoice template, an estimate worksheet for Drupal consultants, and a financial planning spreadsheet for startups. You can use them as is or adapt them to your needs. If you have a document that you’d like to share, you can do that, too! (cc)
Battle of Drawings Between Designers
What began as a game between two designers went in directions and acquired dimensions that no one expected. In the game, one designer draws a powerful character. Then, the other player has to draw a character whose powers can overcome the first character’s strengths. And repeat. The game eventually turned into a collection of heroes and villains. You can relive all of the battles by checking the website The Superest.
You will get to see how Opus Rumpus vanquished Antler Enchanter and was in turn defeated by Vic Hume. Seeing the contestants’ drawing talents and creativity in inventing new heroes for every situation is a rather engaging affair. The result of this ongoing drawing game between illustrators Kevin Cornell and Matthew Sutter was not only hundreds of drawings: in 2009, they turned the concept into a printed book. As designers say, “The battle is over, but there are still scars to show and stories to tell.” Perhaps it would be worth finding time for a similar game in your design lab, too? (tt)
Easy Scheduling With Doodle
The name may be familiar, recalling that famous search engine, but the product is different. Doodle is a tool that helps you pick the best time to schedule a meeting or event. There are no restrictions if you are a sporadic user and want to invite friends over for the occasional barbecue. Choose a name for your party, suggest a date and time, add a location, and then invite your friends (via email) to choose a time slot. The address is conveniently linked to Google Maps.
There are other options for those who need daily organization support. MyDoodle is the free account for frequent users. MeetMe allows you to coordinate meetings with other users. And Doodle Mobile connects your account to your iPhone or Android. One can also combine the Doodle Calendar with Google Calendar, Outlook Express, Exchange, Lotus Notes and other calendars. A simple and useful tool than can save you a lot of time and frustration. (tt)
3-D Animation With JavaScript
Producing 3-D objects and animations for the Web has becoming increasingly easier as new technologies emerge. But actually creating those objects and animations isn’t quite easy. The process can be intimidating and confusing to those who aren’t expert developers.
Three.js is a lightweight JavaScript engine that makes 3-D animation a whole lot easier. It can render with Canvas, SVG and WebGL. One great example of the library in use is the WebGL cars demo. You can play around with two luxurious cars and drive them around a track. You can change camera views, control one or both cars, switch from day to night view, and enable and disable motion blur. Suddenly, the idea of having games like Need For Speed right in the browser doesn’t seem so unrealistic! (cc)
ASCII Character Pronunciation Rules
Most programmers would recognize ASCII characters on a website and know how to use them in their own work. But how many know what to call all those characters? Could you have a conversation about those characters with another programmer and actually be able to understand each other? Do you know what a quadrathorpe is? What about a scratchmark? Prime? What about square and unsquare? Did you even know there were so many varied words to describe all those common ASCII characters?
ASCII Pronunciation Rules for Programmers gives a pretty thorough rundown of common and not-so-common names for ASCII characters. It’s a useful guide if you’re ever at a loss when listening to another programmer speak about coding. (cc)
Testing Your Typography Skills
If you are passionate about typography and have fun experimenting with glyphs, then you will certainly like the rather unusual type-design game created by the interaction designer Mark MacKay. This JavaScript-based letter-shaping game is called Shape Type.
The idea is simple: you get 10 modified letters from various classic typefaces, and you have to try to make them right by dragging curves along their axes. You can hold Shift to snap to an axis and hit Alt for a quick preview. After adjusting a letter, you can compare your results with the original letter and measure their similarity. Once you have passed the 10 levels of the game, you can tweet your final score. It’s an engaging way to explore what makes or breaks a glyph. (tt)
Get Rid Of Tasteless Restaurant Menus
Do menus on restaurant websites really have to be so terrible? All you want is a quick peek at a menu to see whether the establishment serves something to your liking… and you end up just getting lost. The folks at Unit Interactive have a simple mission with Clear Menu: to demonstrate how easy it is? ?to create a menu page that works on any screen size, that is easy to update, but that delivers a consistent and delightful experience.
This little project showcases three examples of responsive HTML/CSS/JS-based restaurant menus. Unit Interactive encourages restaurant owners and marketing managers to demand better from their Web teams, and it shows Web designers how easy it is to provide useable, contextual, branded experiences to their clients. Learn how to accent and highlight correctly in order to make a restaurant menu clear and striking. And above all, never stress out a hungry user! (sp)
Food Illustrations By Lana Porter
You’ve most probably seen a great variety on food artworks, such as paintings, drawings and even photograps. If you’ve had fun exploring these possibilities of food art, you will certainly provide your eyes with a treat by checking out this postcard exhibition by Simplifood.
With quite simple shapes and colors, Lana Porter manages to show the everyday items we usually have on our menus by adding little details which help differentiate a bagel with cream cheese from a slice of pineapple or a hot dog from a bratwurst. The perspectives and colors used are also very appetizing, so mind the warning: you might get very hungry by the end of the album! (tt)
An Animated CSS3 And jQuery Calendar
When it comes to the design of small elements such as breadcrumbs, pagination and calendars, having some techniques that are ready to use when you actually need them is handy. One CSS3 and jQuery calendar was started by Jepija as part of a larger project to create a shared calendar-subscription service. It includes a lot of useful features for designers and developers, including elegant animations and color-coded event markers. You can customize the color, length and padding of events with CSS.
It also includes a jQuery accordion so that you can expand each week to view events in more detail. You can view a demo of the calendar. There is a downside, though. The code for the calendar isn’t very semantic, so tweaking the script first before using it in production is required. (cc)
Subway Map Visualization jQuery Plugin
If you often deal with government projects, university departments or any websites of sophisticated organizations, every now and again you’ll be asked to design a nice visualization that would explain the various divisions, structures and internal hierarchy of those organizations. Where would you start? Well, creating a Subway Map-alike visualization is an option worth considering.
Nik Kalyani’s Subway Map Visualization jQuery Plugin provides a framework for creating subway-alike maps to convey real-world ecosystems, e.g. evolution of a product’s design features. The plugin uses HTML5 Canvas for map rendering and an unordered list as the markup. The plugin has a detailed documentation and demos that can be used and reused right away. (vf)
Zara Picken’s Vintage Illustrations
It’s remarkable how sharp an eye visual artists have for various things. They can find inspiration in unthinkable sources. The artist Zara Picken has managed to show an inspiring side of everyday objects with her patchwork of textures, scrapbook-look effects and vintage color palette.
Women with radio heads and pixelated images of old high-tech objects, such as a photo camera and a joystick from a 1990s video game, are examples of illustrations by Picken that you’ll see in her Flickr stream. Have a look, and you’ll see the creative side of everyday objects, too. (tt)
Interactive CSS3 Lighting Effects
While CSS3 is becoming mainstream, designers keep experimenting with CSS3 features and come up with quite impressive coding techniques. Things that were once possible only with Flash now lie at the doorstep of anyone who is willing to try it. Even better is what CSS3 is capable of in combination with just a bit of JavaScript.
Our editor Tom Giannattasio has come up with an interactive CSS3 lighting technique. He used 3D transforms with CSS gradients and masks; the cast shadow was created using box shadows and transforms. Have a look, move your mouse around, and get ready to be pleasantly surprised. Then look at the code and start imagining what you could do with it! (ld)
CSS3 Bitmap Graphics
CSS3 has opened many possibilities for creative Web designers. The trick is to connect the various dots available in CSS3 to produce remarkable results. Thomas Giannattasio has created a CSS3 bitmap graphics demo that doesn’t require any extra markup, images, canvas or data URIs. It’s drawn entirely with gradients that are sized precisely to pixel boundaries. As the developer says, “There are certainly more practical uses for this technique, but none quite as nostalgic.”ù
If you are looking for some not-so-nostalgic techniques, have a close look at Justin Schwinghamer’s CSS3 Daft Punk LED demo animation or Cameron Adams’ interactive CSS3 dodecahedron. So, what are you capable of? (cc)
Responsive Multi-Column Data Tables
When it comes to responsive Web design, we need to carefully consider many design elements and adjust them to particular contexts. Responsive design isn’t just about images and layout, but also navigation menus, videos, forms, font sizes, links and even tables. In fact, have you ever thought about how you would adapt a complex multi-column data table from your desktop version for convenient viewing on a mobile device?
Well, the creative guys behind Filament Group have. They’ve come up with a technique for always displaying a manageable subset of table columns for common screen sizes, and also for allowing the user to easily change the visibility of columns. Essentially, the technique displays a limited set of columns on smaller screens, while providing quick access to the hidden data. The technique uses JavaScript to adapt to smaller screens and Respond.js for cross-browser compatibility. And if you’re really fancy about tables, you might want to look at David Bushell’s responsive calendar table as well. (vf)
Color Palette Generator: Color Thief
Starting a new design concept takes creativity, talent and special skills. Sometimes all your new client gives you is a single picture, from which you have to create an entire color palette. Due dates are always too soon, and you would always like more time to invest in conceptual development. Does this sound like a common predicament? How about easing the process with the help of Color Thief?
Created by Lokesh Dhakar, this tool uses a script to identify the dominant color from a picture and the adjacent colors with which to compose the palette. Try incorporating this little service in your workflow next time and you’ll find you have more time for creative brainstorming sessions. (tt)
We’ve all been there: email notifications from popular social networking websites keep polluting our inbox, informing us of new messages, birthdays, recently uploaded images, random acquaintances and unsolicited invitations to groups, circles and games. Unfortunately, most websites don’t make it particularly easy for users to turn off all email notifications at once, so just deleting the message itself rather than going into the settings to disable each notification category often seems easier. Well, not anymore.
Notification Control is a little service that helps you get rid of notifications in a few clicks. The website essentially presents a list of pointers to notification settings pages on Facebook, Twitter, Tumblr, Google+, LinkedIn, StumbleUpon, Forrst and other websites. Take a couple of minutes to actually go through the links, tick off some settings and make your inbox a bit cleaner in one fell swoop. (vf)
Showcase Of Typographic Posters
When the subject of typography comes up, the first things that come to most people’s minds are text, fonts and arrangement of space. Indeed, the main function of typography is to make language visible and understandable. But this function can also be applied to expressive artwork.
Good examples of how type and art can come together well can be seen on Typographic Posters, curated by AndrÈ Felipe, a graphic designer who loves typography and its unorthodox uses. The project features literally hundreds of posters, a great resource that could be either a new platform to show your talent or a reference for your next design project. (tt)
HTML5, Please
With all the excitement surrounding new HTML5 and CSS3 features, perhaps we sometimes overlook the problems some of them might introduce as well. HTML5 Please is a resource that offers us the collective knowledge of professional developers who have worked deep in the trenches of HTML5.
The website lets you look up HTML5 and CSS3 features, see whether they are ready for use and, if so, learn how to to use them — for example, with polyfills, fallbacks or as they are. It features both well known and obscure features and explains how well they are supported today. You can sort features according to browser, mobile device, whether they require prefixes, polyfills or fallbacks, and coding language (i.e. CSS, HTML, API or JavaScript). And you can type the feature that you want to look up as well. A useful resource worth bookmarking. (vf)
Facebook And jQuery Bootstraps: Strap Those Boots
If you have been looking for a toolkit to get your Facebook app development rolling, consider Fbootstrapp by Clemens Krack. The toolkit helps you develop iframe apps at appropriate sizes, and it includes the basic CSS and HTML that you need to match the typography, forms, buttons, grids and navigation to Facebook’s style.
You might also want to look at the jQuery UI Bootstrap. Its live preview feature lets you see buttons, file inputs, error messages, sliders, progress bars and calendars in the style of jQuery UI. Download the stable version to start building your apps, or get in the game and help develop the Bootstrap theme further. (sp)
Spicing Up Your Navigation Menu With CSS3
Do you remember those days when we used nasty JavaScript libraries with onMouseOver effects for “advanced” navigation menus? Comparing those nasty techniques with the simplicity and power of CSS3, we understand how far we have actually come up in our industry over all those years. Mary Lou’s technique for a sliding navigation with images is a vivid example for that.
A very simple CSS navigation technique allows you to add an image for every menu item and slide it out on hover. Essentially, it uses very basic HTML, CSS transitions and the nth-child selector. A very simple and useful technique — especially if you are working on a portfolio site, a gallery site or a slideshow. (vf)
Free Font Family: Exo Font Family
Free quality fonts always come in handy. However, because creating a rich typeface always requires a lot of time and attention, typographers rarely release them for free — which is perfectly understandable. But there is a way for type designers to actually release fonts for free and still get some revenue for their work.
For example, Free Exo Font Family is a successful Kickstarter project which made it possible for Natanael Gama from Portugal to create and release the typeface publicly. Exo is a comprehensive geometric sans serif font family with nine weights — both in Regular and in Italic. Each font comes with many OpenType features such as small caps, ligatures, alternates, oldstyle figures, tabular figures and fractions. Both OTF-version and source files are available to download for free — now that’s the power of community at play! (vf)
Design Seeds: For All Those Who Love Color Palettes
Our universe offers us a huge variety of tones and hues, but we seem to pick similar palettes every time we start a new design. Does this happen to you, too? Then maybe it’s time for you to explore the endless possibilities of color palettes on Design Seeds
In her blog posts, Jessica — a passionate lover of colors and color palettes — features palettes for various situations: travel, fashion, furniture materials, decoration, among others. You can search by color value or the overall theme of a palette. So for your next project (or even your new house) this may be a site worth revisiting for a delightful color combination. (tt)
Exploring The Beauty Of Content: Contents Magazine
Instead of presenting useful tidbits of knowledge, many sites force the reader to glean cunningly hidden information through a mountain of visual data. This often exhausting exercise of reading online often results in a tossed salad of diverse information, where an article on postmodern art seems to somehow be related to dating (or whatever current popular pop-up ads endorse).
So, if you’d like to learn about conten and content strategy practices, take a look at Contents Magazine. You’ll find inspiration, motivation and a good visual example of how to integrate content strategies into visually pleasing, non-distracting frameworks. They showcase helpful notions and interesting articles on the role of content in Web development. (jc)
Quick Peek At A Designer Hall Of Fame
Whether you are a design enthusiast or a company marketing director, you’re likely to be always looking for new and exciting designs to spice up your wallpaper/company website. Browsing for nuggets on the Web can be a lot of fun, but sometimes you wish someone would take the time to put together a little designer “Hall Of Fame”… actually, ‘he’ did.
365 Awesome Designers is a “no-frills” — but lots of “design-thrills” — project, that features interesting, creative, (pick your “awesome” adjective of choice) designers and some of their creations. Every day the avid design fan can discover a new craftsperson. And should your interest in a designer go deeper, the website’s creators provide you with all the necessary information to either stalk your new favorite designer online or on Twitter. (jc)
Common Patterns Of Markup & Style
Whatever project you’re working on, the chances are high that you’ll be using the same snippets of code that you’ve used in your previous projects as well. Whether it’s a data table, a search, breadcrumbs or pagination — wouldn’t it be nice to have a library of bulletproof reusable CSS/HTML components and just grab them when you need them for your work?
Pea.rs might be just the tool you’re looking for. It’s an open source WordPress theme that lets you collect, test and experiment with interface pattern pairings of CSS and HTML. You can easily have your own pattern library setup and running quickly. Essentially, each pattern is a post in WordPress, code snippets are added using custom fields, and the main content field is used for optional notes. Very useful! (vf)
The Great Discontent
Many paths lead to the same destination. Perhaps many of us were destined to become part of the creative industry in one way or another. Think back: what really made you choose the path you took? Did you have an “a-ha” moment? Did someone motivate you, or did you simply wake up one morning knowing exactly which route to take?
Many people in this industry became what they are today by taking totally different paths. And still, everyone featured on The Great Discontent is a creative individual somewhere in this world. Find out what they were doing before discovering their calling, and learn about what drove them. You’ll be surprised at how simple or complicated their choices have been. “The Great Discontent is about understanding the human side of creativity and our innate drive to create that keeps pulling us forward, united in the sense that there’s something more.” You’ll see why the page is called the way it’s called. (sp)
Small Is Good: Showcase of Tiny and Beautiful Stuff
Almost everyone collects something that they have a fondness for: postcards, coins, key holders, stamps. Even without consciously thinking about it, we start collecting whatever we find beautiful, interesting or special. In most cases, these objects are a reflection of our personality. If you feel part of the “collecting community,” then you will certainly like LessThan100g, a blog dedicated to tiny and beautiful stuff.
Specially developed to showcase objects that weigh less than 100 grams, this website presents a unique selection of bottle caps, vintage erasers, old stamps, buttons and even little paper animals. Every issue comes with a brief history of the collection, including the owners’ names, curious facts and conversation starters (such as “Is bigger really better?”). A wonderful small resource that makes us think about the elegance of the simplest things that surround us every day. (tt)
Chemical Design
When joined hand in hand, design and science can result in an explosion of color, shapes and ideas — without the environmental damage. The collection of designs by Simon C. Page titled International Year of Chemistry confirms this.
Atoms, ions, structures of elements, theories of relativity and combustion are among the themes of the creative graphics on display, all referencing major scientists in chemistry. In this centenary of the awarding of the Nobel Prize to Marie Curie, the only unforeseen effect you might feel from examining this collection is a spontaneous overflow of visual delight. (tt)
Getting Sticky With HTML5
With the growing support of HTML5, more designers and developers have experimented ever since, creating useful but sometimes also not so useful techniques and demos. There are indeed no limits to creativity and there are definitely a good number of demos out there that will keep you busy for a while. For example, the “Sticky Thing“, created by Daniel Puhe, provides us with evidence that almost everything is possible.
This sticky “thing” can fly across whitespace and sticks to the borders of the browser’s viewport. You can adjust the stickiness, stiffness, size and gravity of it — and guess what else? It works offline as well as online, and runs both on iOS and Android. The experience is even more engaging on mobile devices with multi-touch sensitivity, gyroscope and which support HTML5 features. (af)
Cut The Rope: An Addictive HTML5 Game
If you’ve got some work to do, you should probably skip this post and move right along to the next one. But if you do have time to spare, make sure to check out Cut the Rope, an HTML5 game developed by Microsoft’s Internet Explorer development team, Pixel Lab and ZeptoLab (which created the original game for iOS devices) to showcase advances in Web standards. The game features canvas-rendered graphics, browser-based audio and video, CSS3 styling and WOFF fonts.
The developers also provide an interesting case study on how the game was ported from Objective-C to HTML5. In fact, the browser version contains about 15,000 lines of code. Now that’s an effort worth our appreciation! (cc)
Here’s To Year Three!
We hope you enjoyed last year’s newsletter articles and look forward to your feedback, ideas and further input. We want to keep the Smashing Newsletter something you look forward to receiving in your mailbox. Share your thoughts about the newsletter in the comments section below, and of course which book you’d like to have in your bookshelf!
If you enjoy the Smashing Newsletter, share it with your friends and colleagues around the world, because in the end it’s you folks out there who keep the Smashing spirit going! Thank you.
Two years ago, we launched the Smashing Email Newsletter. Today, we’d like to reflect on some of the greatest newsletter articles of the past year and celebrate this anniversary with our 100,000 readers with a fabulous book giveaway!
Back then, we planned to launch the Smashing Newsletter only if we had at least 10,001 subscribers who were interested in receiving the newsletter; and indeed, we managed to reach over 17,300 subscribers! Up to the present day, our newsletter is being sent out to more than 100,000 readers and we have promised ourselves to do our best to make their subscriptions worthwhile. Every two weeks, we hunt down obscure blogs, useful tools, valuable techniques as well as quality goodies, and present them to our readers in short bits and pieces in our newsletter issues.
The Smashing Newsletter has been traveling quite a lot in the past two years!
We work very hard to ensure that each and every article featured in the newsletters has a purpose, a value and a meaning—something tangible for our subscribers to take away from each issue. The Smashing Newsletter is a collective effort of the entire Smashing team: the editors, eBook producers, support team, proofreaders—the initials of the team members are what the mysterious signatures at the end of every piece actually stand for. It’s our little team project that involves everyone here at Smashing Magazine and is dedicated to the best interest of our dear readers. Also, the feedback that we receive from our subscribers is what truly motivates us to keep up our work and helps us to constantly improve on its quality.
Of course, no birthday bash is perfect without a little fun and games—that is why we have selected a handful of outstanding design books to give away! If you’ve found the newsletter issues useful to you, please feel free to share the Smashing Newsletter with your friends and colleagues. And in case it still hasn’t found its way into your inbox yet, you can subscribe anytime:
How Do I Win A Book?
It’s quite simple actually. Post your opinion about the Smashing Newsletter in the comments section below. Tell us which of last year’s posts was your favorite, or why someone should subscribe to the Smashing Newsletter, or what you’d like to see featured, or even other newsletters you’d like to recommend. The 6 winners will be randomly selected and announced on the 12th of March 2012.
PANTONE: A Color History of the 20th Century by Leatrice Eiseman and Keith Recker. Chronicle Books, 204 pages.
The Icon Handbook by Jon Hicks. Five Simple Steps, 323 pages.
Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement by Aaron Gustafson. easyreaders, 144 pages.
Malcolm Gladwell: Collected by Malcolm Gladwell. Little, Brown and Company, 768 pages.
Saul Bass by Jennifer Bass and Pat Kirkham. Laurence King Publishers, 428 pages.
Notations 21: 165 Musicians Visualize Sheet Music in Unusual Ways by Theresa Sauer and Mike Perry. Mark Batty Publisher, 320 pages
Typography Sketchbooks by Steven Heller and Lita Talarico. Princeton Architectural Press, 368 pages.
Street Sketchbook: The Creative Process of Top Graffiti Artists by Tristan Manco. Chronicle Books, 272 pages.
Best Of Smashing Email Newsletter: Year Two
Last year, the Smashing Newsletter delivered 183 short articles in total. The ones below were the reader’s favorites:
Cinemagraph: Animated Photography
If you ever feel drained, Jamie might be able to help. Jamie collects vintage cameras and old typewriters, and he makes a living off of his photography in New York City, occasionally using film. From Me To You is his impressive photography blog, a collection of scenes from around the world, memorable events, food, people and small personal universes. The interesting part is that the photos are animated (hence the name); they come to life using good old animated GIFs.
The author’s experimental cinemagraph posts not only seem to come alive, they really do! Your jaw may drop as you scroll through the colorful entries, perhaps catching a model winking at you or seeing those curtains rustled by the wind. Just sit back for a moment and let Jamie take you on a journey. Did a taxi really just drive by? Did this girl in the right upper corner really smile?…
If From Me To You has aroused your interest in the Cinemagraph technique, then pay a visit to the article Positioning an animated gif over a jpg image. His short tutorial explains how to save on bytes when putting GIFs and JPEGs together, without losing too much quality. (sp)
Works Of Art Done Entirely In Light
Light painting is probably one of the most beautiful forms of photography. Using nothing but various lighting tools and a single long exposure, beautiful shapes are created seemingly from nothing. In true light painting, no post-processing or retouching work is done.
David Gilliver creates beautiful light paintings using a variety of light tools. The one shown above, Ribbon Dance, shows beautiful reflections in the water, and bright, vibrant colors. The photographer is “present” in all of his paintings, although he isn’t visible because he wears dark clothing and is constantly moving. Be sure to check out his website and his photostream for even more great light paintings! (cc)
A Lyric A Day
Take one lyric from a song every day and create art or shoot a photograph inspired by it. That’s exactly what Lukes Beard has been doing for almost a year now. The result is fascinating: A Lyric a Day is a remarkable collection of artwork, all dedicated to powerful statements in songs and heavily influenced by the music and the designer’s personal mood and interpretation of the songs.
The designer’s commitment to the project is both encouraging and challenging: are you ready to commit yourself to designing something every single day, too? A Lyric a Day is a good example of a creative side project, which in this case helps the designer explore his creativity and imagination and study new ways to connect music, lyrics and visual design. (vf)
Tilt Firefox Extension: DOM Inspection In 3-D
How much time do you spend traversing the DOM in Firebug, exploring the relationships between nodes, analyzing the structure of code and trying to manipulate it with nasty (or not so nasty) JavaScript? Well, perhaps you’d like to try a different approach to DOM inspection for a change. Mozilla’s new tool, Tilt Firefox Extension lets you visualize the DOM tree of any Web page in 3-D. Because the DOM is essentially a tree-like representation of a document, the developers of the tool have decided to layer nodes based on the nesting in a tree, creating stacks of elements, each with a corresponding depth, and textured according to the Web page being rendered.
Unlike other DOM inspectors, Tilt allows for instant visual analysis of the relationship between various parts of the Web page, but it also makes it easy to see obscured and off-page elements. On request, developers can pull in further information on each node’s type, ID, class or attribute, providing a way to inspect (and edit) the inner HTML and other properties. The driving force behind the visualization is WebGL. The latest build of the extension is available for downloading and should work in the latest version of Firefox. Who knows? Perhaps playing with the DOM can be fun after all. (vf)
Thirty-Three Vintage Album Covers
Some people collect postcards, others collect stamps or pencils. The guys behind Jive Time Records, a Seattle-based store specializing in used vinyl, collect — guess what? — vintage album covers. More than that, they group and classify them according to their shapes: circles, dots, squares, lines, stripes or arrows.
The result is Project Thirty-Three, a growing collection of vintage album covers that convey their messages with only simple shapes and typography. The website features over 430 covers and the collection keeps growing. Now, that’s an interesting source of inspiration for your next cover design or poster! (vf)
Things Organized Neatly
Being organized may be very helpful in our everyday lives. Some people are naturally organized, and without noticing it, create patterns and rules for systemizing their objects. In case you’re one of those talented people who makes a hobby out of this mania, you’d certainly like to visit Things Organized Neatly.
In the blog curated by Austin Radcliffe, you’ll observe perfectly harmonized compositions that vary in shape, size, material, color, category and related objects. Some examples are vintage matchboxes, headphones, keys, cups, to name a few. There’s also the possibility of posting one of your compositions, in case you’d like to show your friends that organization can also be an art in itself. (tt)
Art Of The Menu
The days of boring laminated restaurant menus are finally over. The good old UnderConsideration, a legendary website that chronicles the most curious, creative and notable projects around the world, has come up with a new category: “Art of the Menu” which catalogues the underrated creativity of… menus.
Pay the website a visit and discover how scanning a menu in a restaurant or bar does not have to be boring. Does your favorite bar or diner have a menu worth looking at? Submit it, and make it part of this inspiring collection, which covers various cuisines. Hopefully soon, the menus will cover many countries and continents, too; until they do, enjoy the creative outbursts of the field’s pioneers! (sp)
Cutting-Edge Web Typography Experiments
Modern Web technology allows for remarkable interactive and visual experiments with media that used to be static and monotonous. Those times are long gone, and the project Web Typography for the Lonely proves just that. Christopher Clark, creator of the website, celebrates the power and beauty of Web typography through various visual experiments.
The website is essentially an ongoing collection of experiments and writings on Web typography and the possibilities of cutting-edge standards-based Web design. Christopher is pushing the boundaries of what is both possible and practical in Web standards in a way that is compelling and exciting to the visually minded creative. At the moment, five experiments are presented, among them creative works that play with SVG, HTML5 canvas, CSS and JavaScript. All examples are documented, and the source code can be downloaded and studied on GitHub, along with related techniques and resources. (vf)
Fractal: Valid Code In HTML/CSS Emails
CSS support in email clients is all over the map. Some have great support, some have almost no support, and most fall somewhere in between. Figuring out what to use and what to leave out is tricky at best, especially if you constantly have to refer back to charts and graphs that tell you what does and does not work in each client.
Fractal is a tool developed by Campaign Monitor that validates your HTML and CSS and lets you know which clients your email will and won’t work in. Fractal gets even more useful, though: in addition to flagging the parts of your code that are unlikely to work, it also gives you suggestions on how to fix the problems. You can even contribute your own fixes to make the app even better. (cc)
HTML5 Canvas Vector Graphics Scripting Tool
HTML5′s canvas opens up whole new opportunities for creating vector graphics right in the browser. You can work with the canvas directly, of course, but using a wrapper has added benefits. Paper.js is more than just a wrapper, though. It’s a full library with a lot of highly useful tools that canvas alone doesn’t provide.
These tools include highly optimized and accurate mathematical calculations for bezier-related manipulations (such as bounding-box calculations) and a well-designed scene graph and DOM. Paper.js makes it easy to create paths and add segments, and it comes with handlers for mouse and keyboard interaction and assets such as symbols (which let you place multiple instances of an item in your project). Some useful Paper.js tutorials are available, too. The library is being developed by Jörg Lehni and Jonathan Puckey and is distributed under the permissive MIT license. (cc)
DesignersMX: What Tunes Keep Designers Rolling?
Music. Design. Inspiration. The three have gone hand in hand ever since homo sapiens have walked the earth. DesignersMX is dedicated to finding out which tunes keep designers around the globe rolling and get their creative juices flowing. Blake Allen and Josh Sullivan kept it simple: just sign up, log in and share your own compilation of fresh beats and bright tunes. Let the world out there know what music is worth playing during those brainstorming sessions and periods of focused concentration.
Every featured compilation consists of 10 tracks. All of the tracks are playable on the website, so you can cycle through the playlist or enjoy the entire compilation. Last but not least, the designers’ reviews of album art are worth a glance or two. (sp)
David Rumsey’s Map Collection
David Rumsey’s Map Collection is a large collection of maps of the world from 1700 to the 1950s. The project was started over 25 years ago and contains over 26,000 high-resolution images of maps, with new ones added regularly. A good number of historical maps are also mapped to Google Earth and Google Maps. so you can track them on current geographic data.
The project provides access to carefully catalogued high-resolution images of maps, as well as a variety of tools for comparing, analyzing and viewing items in new and experimental ways. The website is updated monthly. (il)
Mr. Stacks: On-the-Fly Layer-Comp Storyboarding
For us designers, an effective workflow is all about having a solid collection of little time-savers, each of which eliminates some mundane task and helps us focus fully on more pressing and creative responsibilities.
Mr. Stacks is a tool that helps exactly with this. It is a small Photoshop script that can quickly generate storyboards, stacks and PDFs for project CDs, client presentations or anything else — right from the Layers Comps in your Photoshop file. The script would be useful for a series of animations, storytelling elements in a design and advertising.
You can take any normal-sized banner and spit out paneled storyboards in just a few clicks; or you can use it to email the latest PDFs of your work to clients (although an installed version of InDesign is required for that). To use the tool after installing it, go to “Scripts” in the File menu in Photoshop and select “Mr. Stacks.” Unfortunately, the script works only in Photoshop CS5. (vf)
Method & Craft: The DVD Extras of Web Design
Looking into the methods (and sometimes madness) of other designers can be fascinating and insightful. And reconsidering our own work habits after observing the habits of others sometimes results in higher productivity or better results. Finding that kind of information in a single place, though, is challenging at best. It often requires going to a bunch of different blogs, each of which focuses on a different designer.
Enter Method & Craft. Describing itself as “the DVD extras of design,” it offers a behind-the-scenes look at different designs, including how they were achieved, the techniques used and how the designers have grown in their professional careers. It offers articles, interviews, videos (showing designers at work) and notes (offering short tips and links). Eight authors are currently contributing to the website, all with varied design backgrounds. (cc)
The Current State of HTML5 Forms
HTML5 has many new features intended to make the process of creating websites easier and to improve people’s experience in using those websites. Among the features are many enhancements to Web forms. Because HTML5 is fairly new and not all of its features have been worked out yet, not every browser supports HTML5 features the same way.
On Wufoo’s HTML5 Forms website, you can explore all of the new features to learn which browsers support which features and to what extent. The list of browsers includes various versions of Firefox, Safari, Chrome, Opera and Internet Explorer. Unfortunately, IE9 is far from wide HTML5 support in terms of HTML5 Forms. (tb)
Moshik Nadav’s Typography
Moshik Nadav’s true love is typography and typeface design. He sees typography as a distilled form of design. He is currently a fourth-year student in Jerusalem specializing in typography. Below is only one of the many great experimental type designs that he exhibits on his website and that are worth checking out.
Nadav’s portfolio is full of inspirational typographic artwork and creative projects. Especially interesting is his project “Playful Ampersand” which features hundreds of experimental designs of the traditional Ampersand sign. Moshik worked for two years as a graphic artist at a prominent advertising company in Israel and now works as a freelancer, practicing typography and typeface design. (ik)
The Art of the Title Sequence
This Web resource of film and television title designs from around the world is free to the public and updated monthly. The Art of the Title Sequence is dedicated to the brief history of title design, and it features opening titles for film and television. High-resolution thumbnails from the titles are presented, the works are extensively cataloged, and the variety of tools allow you to compare, analyze and view items in new and experimental ways.
The works, which are intended to foster creativity, are accompanied by stills and video links, interviews, creator notes and user comments. Also, check out A Brief History of Title Design Video, a short film that features some memorable and remarkable title designs. Hats off to all the designers who have created and are still creating excellent title sequences! (il)
Diptych, Triptych and N-tych for Photoshop
Every photographer and Web designer who has spent time arranging images and photographs knows that scaling and resizing takes time. But even existing templates are unnecessary when you try out Reimund Trost’s latest little Tych Panel for Photoshop. It completely automates the n-Tych creation process, and it has a lot of layouts to choose from. “Tych Panel comes with a fresh aroma of speed and feel of simplicity.”
Here’s how it works. After installation, the panel is available through the Adobe extensions manager. Once open, just select the images you want to use, tell the panel your target width for the whole Tych, and then select the quality of the automatically resized images and whether you want the single images to be saved separately. Each image will be opened in a separate layer, and the document will be ready to be tych’d!
Pick a Tych variant, and you are ready to go. Applying the script repeatedly will add further rows and columns to your layout. (sp)
A Paper Record Player
There are some sleek invitation cards out there, and this is surely one of them: a wedding invitation with a paper record integrated in it that amplifies the sound of a sewing needle moving along the grooves of a flexidisc record. Kelli Anderson and her boyfriend Daniel have come up with a remarkable way to invite Karen and Michael’s loved ones to their wedding.
Not only did they design a fine cover for the invitation card, but they managed to bring the simple paper card to life with Karen and Michael’s wedding song, which they composed themselves. And to think this is only a taste of what’s to come. (il)
Death To Comic Sans
Not a day seems to goes by anymore when you don’t come across some instance of Comic Sans being used completely inappropriately. Police communications, office memos, church bulletins, restaurant menus: the list goes on. For whatever reason, your average DIY graphic designer thinks that Comic Sans is the perfect font for every occasion.
The next time you see someone using Comic Sans inappropriately, consider sharing with them a link to Comic Sans Criminal, which lays out the reasons why Comic Sans is misused and offers some helpful alternatives. Apparently, the only appropriate uses for Comic Sans are when your audience is under 11 years old, when you’re designing a comic and when your audience has stated that they prefer Comic Sans. (cc)
PayPal Fee Calculator: I Wonder What I’ll Be Left With…
If you haven’t heard about it, it’s about time: PPCalc is what you need on days when you shoot money over the Web via PayPal. If your clients pay your invoices via PayPal or you are an active eBay’er or just a regular online shopper, you might want to know PayPal’s fees in advance before making a transaction. PPCalc shows you the exact amount you would have to charge a buyer if you wanted to sell your item for, say, $100, and not $100 minus the $3.20 PayPal fee, which would leave you with a net $96.80.
This PayPal fee calculator supports different PayPal rates, including the standard and merchant rates, as well as different countries and currencies. It even lets you calculate the 2.5% currency conversion fee due in some multi-currency transactions. The MassPay File option allows for up to 5000 simultaneous payments, charging the fee to the sender, not the recipient. PPCalc comes with a button generator for any possible call to action you might need on a commercial website. The online mobile version of PPCalc might also be helpful.
If you have been wondering why the money you receive via PayPal tends to vary, check PPCalc before accepting your next payment. Thanks to Ryan Olbe for his development efforts. (sp)
Sprite Cow: Generate CSS For Sprite Sheets
When it comes to optimizing the loading times of pages and reducing the number of HTTP requests, CSS Sprites is one of the most popular techniques to use. With sprites, you store small images in a larger master file and then “grab” them using the background-position property in CSS. The technique is often used for icons, user interface design elements and buttons in various states. However, manually calculating the values of the background-position property can be quite tiresome. There has to be a better way.
Indeed, there is. Sprite Cow is an online tool that helps you get the background-position, width and height properties of sprites from a sprite sheet as a nice bit of copy-able CSS code. To get the CSS code, just upload the master sprite, click on the image in the sprite that you’re interested in, or select an area by clicking and dragging. The tool also works with master files that do not have transparent backgrounds, but to use them you’ll need to select the color using the “Pick background” feature.
Overall, a quick, simple and useful time-saver. The tool currently works in Chrome and Firefox, but doesn’t play well with Safari on Mac due to a lack of HTML5 File & FileReader support; hence, you might want to consider alternative tools, such as SpriteMe, Sprite CSS Generator and Smart Sprites. (vf)
GreatAster: The Online Art Boutique
Museums around the world stockpile the great works of art, making them inaccessible to most people. GreatAster has chosen to grant the world access to its fine collection of historical and contemporary art. High-resolution scans of illustrations from antique textbooks, as well as engravings and renowned masterpieces make up this treasury of art. Simply search the collection by entering your query, and specify the desired size and resolution prior to purchasing.
If GreatAster is unable to find your desired style, theme or technique, it will put all of its wheels in motion to get it for you. You can subscribe to the RSS feed to get constant updates on the collection. If you are a true art lover, you can not only download, but purchase pieces as wall art. GreatAster also has a “Free for web” section in which the owners of the project allow to freely employ any available images from their gallery but require a link back to the site. The whole collection is updated constantly, so check back daily. The website might at least trigger your creativity anew. (sp)
Meeting Notes Made Easier
Take the hassle out of creating meeting notes with minutes.io. This is a neat little Web app for creating and sharing notes quickly and effortlessly. We all know how writing down ideas and suggestions from meetings can be time-consuming, and yet the best time to note those comment is either during the meeting itself or right after it has ended.
This tool can be used at both times very easily. Minutes.io essentially gives you a detailed template in which you can track attendees and record agenda items, with due dates and owners. Once the meeting has finished, you can email the notes to all of the attendees before they get back to their desks. The tool uses HTML5 local storage, so your drafts are saved in the browser even if you are offline, waiting to be sent when you’re online again. You can even use keyboard shortcuts for quicker notes. (ar)
So, You Think You Can Build A Website?
We all know how it works: you have a great idea, get all worked up about it, only to realize moments later that you would have to recruit just about every freelance programmer, designer and copywriter you know to get it done. That’s when disappointment strikes. But there is a solution (well, kind of).
Vitamin T has come up with a handy flowchart “So, You’ve Got an Awesome Idea for a Website?” to determine whether you’ve got the drive and talent to launch that rocket and make your idea fly. Simply start in the center and work your way through the question filters. It sounds a bit dry but is actually quite entertaining once you start recognizing yourself in some of the answer paths. You’ll end up with advice either on who could greatly enrich your project or to consider bartending. Let’s hope for the former: go try to be the next Web sensation! (sp)
World Time Buddy: Simplified Coordinated Universal Time
Companies with collaborators around the world, as well as people who live far away from their dear ones and people who simply have many friends abroad can now count on a new tool. World Time Buddy is a tool that helps you coordinate time zones. Choose a home zone, and add up to nine other places. The interface is easy to use and shows concise information: the days and times of the locations you have selected are conveniently listed in a column.
To help you avoid scheduling a video conference at 3:00 am, the hours of the day are differentiated by color. Working hours are shown in light yellow, early morning and evening hours are in light blue, and nighttime hours are in dark blue. Once you’ve decided on a time by clicking on the relevant column, you can send it via Gmail, insert it in your Google calendar, copy it to your clipboard or share a Web page that lists the details. Another simple idea that works. (tt)
More Than A Facelift For Browsers
The conceptual design of browser windows has not changed much over the last decade. Address bars are where they have always been, unnecessarily taking up space at the top of the window. How wonderful would a real native full-screen view of a website be? Inspired by the recent release of Mac OS X Lion, and in an attempt to address the complications that arise with mixing old and new interaction paradigms, Henrik Eneroth took on the challenge of developing a mock-up of a new browser concept.
Henrik suggests getting rid of address bars and combining some of the functions found in existing browsers that have not matured enough to conquer a spot in the minds of users. Henrik has grouped related tabs together, applying name tags that describe the contents of the groups. The user also has the option to save groups. Do you have suggestions of your own, or do you find the topic especially interesting? Join the discussion and help innovate the browsing experience! (sp)
TileMill: A Map Design Platform
The guys over at MapBox have come up with something that will save many of us the hassle of making maps look good. They’ve created TileMill, a modern map design platform that enables designers to easily create map designs using custom data. The tool is built on the open-source map-rendering library Mapnik and covers a variety of maps, from globe to street level.
Selecting exactly what TileMill should display is easy. Styles, markers, heat maps, you name it: TileMill will render them accordingly. The instant preview allows you to target specific areas and styles using styles.mss and labels.mss, which is the intuitive Carto language (similar to CSS). You can export your maps to PNG, PDF and MBTiles formats. The tool can be used on Mac OS X, Linux and Windows (using VirtualBox). How much more useful can it get? (sp)
Open-Source Exchange Rates and Currency Conversion
So, you’d like your customers to be able to purchase your products in various currencies, but how exactly do you build this functionality into your product? Sure, there are plenty of free currency conversion services, but finding a free and reliable API for developers to access the rates data is darn hard.
Joss Crowcroft has created an Open Source Exchange Rates API, which provides up-to-date, flexible and portable currency-conversion data that can be used in any application, framework or language (not just JavaScript). It has no access fees, no rate limits, no nasty XML: just free, hourly updated exchange rates in JSON. Even better: Joss has also built money.js, a JavaScript currency conversion library that can be easily integrated in any website. A demo playground and detailed documentation are provided on the website, and the source code is available on GitHub. (vf)
Format Dates And Times With Moment.js
Properly formatted dates and times are often a common headache when it comes to websites where users have to provide either a specific date (time) or a date (time) range. Of course, your interface should be forgiving and accept all meaningful input that your users provide — independent of the format they choose to use. But what you need apart from that is a fine-tuned control and the ability to manipulate how they’re formatted.
Moment.js makes it easy to do just that. It’s a lightweight JavaScript library which lets you format, parse and manipulate dates. You can add or subtract dates from one another, as well as parse things like Unix Timestamps. Display options include formatted dates, time from now, difference, time from another moment, native date, support for leap years, and much more! (cc)
Easier Number and Currency Formatting
Proper, consistent formatting of numbers and currency is a tiny detail that makes a difference in design. But you can’t always count on those who update the content to adhere to the preferred style. Some will use numbers with commas, while others will leave them out; some will use the proper currency symbols, and some will not; and some will add more than two decimal places. You end up with a mess that someone has to go in and manually fix.
Not so if you use Accounting.js. This simple, tiny JavaScript library will solve your currency and numbers-related formatting hassles, and it even includes optional Excel-style column rendering to line up symbols and decimals. It will make all of your numbers and currencies look much more uniform and professional than they would if left to many content creators. (cc)
jQuery Credit-Card Validation Plugin
So, you have to integrate credit-card validation in your next project? Where do you begin? Should you break out that trusty book on regular expressions? Should you look up the numerical structures of various credit-card types? And how many credit card providers are there anyway? Good news: it doesn’t have to be that difficult.
Smart Validate is an off-the-shelf solution that ensures users have entered a valid credit-card number before processing the transaction. The plugin supports American Express, MasterCard, Visa, Diner’s Club and Discover. Now, that’s a plugin that will save you headaches in your next e-commerce project! (vf)
Typing With Style Requires Inspiration
Typography is one of the most important elements of design. It can make all the difference, turning your product either into a useful, usable delight or the audience’s worst nightmare. Rather than commit the common mistake of setting type randomly, why not study and explore resources on typography offered by Typetoken?
Typetoken offers not only examples of good typography, but also interviews with designers, discussion on typography, visual language artwork, typefaces, and book announcements. It certainly is a goldmine for explorations in typography for your next design. (tt)
The Web Developer’s Wonderland
We love to create wonderful things for the Web. But as in any other profession, Web development comes with truly enjoyable, creative tasks and some mundane, boring ones. Probably the most frustrating task is having to reload the browser page during development or debugging every time you make a change to the page. It doesn’t have to be this way.
LiveReload — a “Web developer’s wonderland,” as the authors describe it — is a desktop app that monitors changes in your file system. As soon as you save a file, the file is preprocessed as needed, and the browser is refreshed. Also, every time you change a CSS file or image, the browser is updated instantly without you having to reload the page, which might save you some time that you could invest in more meaningful tasks. The tool supports CoffeeScript, SASS/SCSS, LESS, Stylus, HAML and Jade, and it ships with all of them included. A great useful time-saver for every Web developer’s toolbox. LiveReload is currently available only for Mac. (ld)
CSS Tilt-Shift Technique and Animated Background Patterns
CSS is powerful. Just when you think nothing else can be done with CSS, a creative front-end developer comes along and develops a striking new technique that shows the possibilities of the technology and pushes its limits.
Simon (“Simurai”) has been experimenting with various CSS properties for a while now, and his experiments are certainly worth checking out. In his CSS3 tilt-shift technique, he uses text-shadow and adds a bigger offsetY and blur-radius to the top and bottom edges, so that the text appears to have a lens blur that is typical of the tilt-shift effect. There is also some rotate, rotateX and skewX to make the text match the perspective of the background image. This is a great example of what can be achieved with text shadows and rotations when properly used. Also, last week Simon created animated CSS3 background patterns using Webkit keyframe animation and radial gradients and dozens of background-image properties. Have you experimented with CSS recently, too? Let us know on Twitter or Facebook!
(ld)
HTML5 Whiteboard Magnets
There are a number of ways to produce wireframes or just to discuss the structure of a design or of code at an early stage of development. You could use a whiteboard, paper, wireframing kits… or you could combine them all. Cameron Moll has produced HTML5 Whiteboard Magnets which can be used on a whiteboard to show and discuss mark-up and to explain and communicate design decisions.
It’s very simple, too. Just buy magnetic sheets that are compatible with any inkjet printer, or print labels for magnets. Put them on your whiteboard with enough space for hands-on HTML5 instruction and for writing the actual mark-up. You can download Cameron’s AI files for the magnets, and add your own HTML5 (or CSS, JavaScript, etc.) elements if you wish. A very simple idea that could prevent misunderstanding and confusion. (vf)
A Curiosity a Day
Did you know that Apollo 11 had only 20 seconds worth of fuel left when it landed? Or that the tone for an incoming message on a Nokia phone is “SMS” in morse code? Or that the first smiley ever written was in 1982? Or that Pablo Picasso was accused of stealing the Mona Lisa? If you are eager to learn more curiosities like these, you should check the website Learn Something Every Day.
Two years ago, the designers of Young studio started gathering information about various areas of interest, such as popular personalities, the natural sciences and worldwide curiosities. Every day until August 2011, they published a new illustration, presented as a humorous comic with a vibrant colorful illustration. You can check out most of them online, but they are also released as special paperbacks. A simple idea, yet so many surprising facts. (tt)
CSS3 Image Styles
Did you know that if you apply CSS3′s inset box-shadow or border-radius property directly to an image element, the browser won’t render the style perfectly? But if you apply the image using background-image, then you can add any style to it and it will render properly.
Nick La’s article “CSS3 Image Styles” shows you the possibilities of using the background-image CSS property to create basic circles, a card style, an embossed style, a cut-out style, morphing and glowing, a glossy overlay, reflections and a feather circle. And to make it dynamic, you can use jQuery to wrap the background image dynamically for every image element. The techniques work in every browser that supports border-radius, box-shadow, :before and :after. Unsupported browsers will fall back to the image without any styling. (ld)
Useful Document Templates for Web Designers
Whether you’re a seasoned veteran or a newcomer to the Web design industry, various documents are a vital part of your day-to-day business, everything from contracts to invoices to client worksheets. In practice, though, we usually don’t spend enough time refining them in order to improve our workflow.
DocPool aims to change that by sharing commonly used documentation, created and submitted by designers and developers worldwide. So far, the website offers examples from a variety of designers, including a business planning template, an invoice template, an estimate worksheet for Drupal consultants, and a financial planning spreadsheet for startups. You can use them as is or adapt them to your needs. If you have a document that you’d like to share, you can do that, too! (cc)
Battle of Drawings Between Designers
What began as a game between two designers went in directions and acquired dimensions that no one expected. In the game, one designer draws a powerful character. Then, the other player has to draw a character whose powers can overcome the first character’s strengths. And repeat. The game eventually turned into a collection of heroes and villains. You can relive all of the battles by checking the website The Superest.
You will get to see how Opus Rumpus vanquished Antler Enchanter and was in turn defeated by Vic Hume. Seeing the contestants’ drawing talents and creativity in inventing new heroes for every situation is a rather engaging affair. The result of this ongoing drawing game between illustrators Kevin Cornell and Matthew Sutter was not only hundreds of drawings: in 2009, they turned the concept into a printed book. As designers say, “The battle is over, but there are still scars to show and stories to tell.” Perhaps it would be worth finding time for a similar game in your design lab, too? (tt)
Easy Scheduling With Doodle
The name may be familiar, recalling that famous search engine, but the product is different. Doodle is a tool that helps you pick the best time to schedule a meeting or event. There are no restrictions if you are a sporadic user and want to invite friends over for the occasional barbecue. Choose a name for your party, suggest a date and time, add a location, and then invite your friends (via email) to choose a time slot. The address is conveniently linked to Google Maps.
There are other options for those who need daily organization support. MyDoodle is the free account for frequent users. MeetMe allows you to coordinate meetings with other users. And Doodle Mobile connects your account to your iPhone or Android. One can also combine the Doodle Calendar with Google Calendar, Outlook Express, Exchange, Lotus Notes and other calendars. A simple and useful tool than can save you a lot of time and frustration. (tt)
3-D Animation With JavaScript
Producing 3-D objects and animations for the Web has becoming increasingly easier as new technologies emerge. But actually creating those objects and animations isn’t quite easy. The process can be intimidating and confusing to those who aren’t expert developers.
Three.js is a lightweight JavaScript engine that makes 3-D animation a whole lot easier. It can render with Canvas, SVG and WebGL. One great example of the library in use is the WebGL cars demo. You can play around with two luxurious cars and drive them around a track. You can change camera views, control one or both cars, switch from day to night view, and enable and disable motion blur. Suddenly, the idea of having games like Need For Speed right in the browser doesn’t seem so unrealistic! (cc)
ASCII Character Pronunciation Rules
Most programmers would recognize ASCII characters on a website and know how to use them in their own work. But how many know what to call all those characters? Could you have a conversation about those characters with another programmer and actually be able to understand each other? Do you know what a quadrathorpe is? What about a scratchmark? Prime? What about square and unsquare? Did you even know there were so many varied words to describe all those common ASCII characters?
ASCII Pronunciation Rules for Programmers gives a pretty thorough rundown of common and not-so-common names for ASCII characters. It’s a useful guide if you’re ever at a loss when listening to another programmer speak about coding. (cc)
Testing Your Typography Skills
If you are passionate about typography and have fun experimenting with glyphs, then you will certainly like the rather unusual type-design game created by the interaction designer Mark MacKay. This JavaScript-based letter-shaping game is called Shape Type.
The idea is simple: you get 10 modified letters from various classic typefaces, and you have to try to make them right by dragging curves along their axes. You can hold Shift to snap to an axis and hit Alt for a quick preview. After adjusting a letter, you can compare your results with the original letter and measure their similarity. Once you have passed the 10 levels of the game, you can tweet your final score. It’s an engaging way to explore what makes or breaks a glyph. (tt)
Get Rid Of Tasteless Restaurant Menus
Do menus on restaurant websites really have to be so terrible? All you want is a quick peek at a menu to see whether the establishment serves something to your liking… and you end up just getting lost. The folks at Unit Interactive have a simple mission with Clear Menu: to demonstrate how easy it is? ?to create a menu page that works on any screen size, that is easy to update, but that delivers a consistent and delightful experience.
This little project showcases three examples of responsive HTML/CSS/JS-based restaurant menus. Unit Interactive encourages restaurant owners and marketing managers to demand better from their Web teams, and it shows Web designers how easy it is to provide useable, contextual, branded experiences to their clients. Learn how to accent and highlight correctly in order to make a restaurant menu clear and striking. And above all, never stress out a hungry user! (sp)
Food Illustrations By Lana Porter
You’ve most probably seen a great variety on food artworks, such as paintings, drawings and even photograps. If you’ve had fun exploring these possibilities of food art, you will certainly provide your eyes with a treat by checking out this postcard exhibition by Simplifood.
With quite simple shapes and colors, Lana Porter manages to show the everyday items we usually have on our menus by adding little details which help differentiate a bagel with cream cheese from a slice of pineapple or a hot dog from a bratwurst. The perspectives and colors used are also very appetizing, so mind the warning: you might get very hungry by the end of the album! (tt)
An Animated CSS3 And jQuery Calendar
When it comes to the design of small elements such as breadcrumbs, pagination and calendars, having some techniques that are ready to use when you actually need them is handy. One CSS3 and jQuery calendar was started by Jepija as part of a larger project to create a shared calendar-subscription service. It includes a lot of useful features for designers and developers, including elegant animations and color-coded event markers. You can customize the color, length and padding of events with CSS.
It also includes a jQuery accordion so that you can expand each week to view events in more detail. You can view a demo of the calendar. There is a downside, though. The code for the calendar isn’t very semantic, so tweaking the script first before using it in production is required. (cc)
Subway Map Visualization jQuery Plugin
If you often deal with government projects, university departments or any websites of sophisticated organizations, every now and again you’ll be asked to design a nice visualization that would explain the various divisions, structures and internal hierarchy of those organizations. Where would you start? Well, creating a Subway Map-alike visualization is an option worth considering.
Nik Kalyani’s Subway Map Visualization jQuery Plugin provides a framework for creating subway-alike maps to convey real-world ecosystems, e.g. evolution of a product’s design features. The plugin uses HTML5 Canvas for map rendering and an unordered list as the markup. The plugin has a detailed documentation and demos that can be used and reused right away. (vf)
Zara Picken’s Vintage Illustrations
It’s remarkable how sharp an eye visual artists have for various things. They can find inspiration in unthinkable sources. The artist Zara Picken has managed to show an inspiring side of everyday objects with her patchwork of textures, scrapbook-look effects and vintage color palette.
Women with radio heads and pixelated images of old high-tech objects, such as a photo camera and a joystick from a 1990s video game, are examples of illustrations by Picken that you’ll see in her Flickr stream. Have a look, and you’ll see the creative side of everyday objects, too. (tt)
Interactive CSS3 Lighting Effects
While CSS3 is becoming mainstream, designers keep experimenting with CSS3 features and come up with quite impressive coding techniques. Things that were once possible only with Flash now lie at the doorstep of anyone who is willing to try it. Even better is what CSS3 is capable of in combination with just a bit of JavaScript.
Our editor Tom Giannattasio has come up with an interactive CSS3 lighting technique. He used 3D transforms with CSS gradients and masks; the cast shadow was created using box shadows and transforms. Have a look, move your mouse around, and get ready to be pleasantly surprised. Then look at the code and start imagining what you could do with it! (ld)
CSS3 Bitmap Graphics
CSS3 has opened many possibilities for creative Web designers. The trick is to connect the various dots available in CSS3 to produce remarkable results. Thomas Giannattasio has created a CSS3 bitmap graphics demo that doesn’t require any extra markup, images, canvas or data URIs. It’s drawn entirely with gradients that are sized precisely to pixel boundaries. As the developer says, “There are certainly more practical uses for this technique, but none quite as nostalgic.”ù
If you are looking for some not-so-nostalgic techniques, have a close look at Justin Schwinghamer’s CSS3 Daft Punk LED demo animation or Cameron Adams’ interactive CSS3 dodecahedron. So, what are you capable of? (cc)
Responsive Multi-Column Data Tables
When it comes to responsive Web design, we need to carefully consider many design elements and adjust them to particular contexts. Responsive design isn’t just about images and layout, but also navigation menus, videos, forms, font sizes, links and even tables. In fact, have you ever thought about how you would adapt a complex multi-column data table from your desktop version for convenient viewing on a mobile device?
Well, the creative guys behind Filament Group have. They’ve come up with a technique for always displaying a manageable subset of table columns for common screen sizes, and also for allowing the user to easily change the visibility of columns. Essentially, the technique displays a limited set of columns on smaller screens, while providing quick access to the hidden data. The technique uses JavaScript to adapt to smaller screens and Respond.js for cross-browser compatibility. And if you’re really fancy about tables, you might want to look at David Bushell’s responsive calendar table as well. (vf)
Color Palette Generator: Color Thief
Starting a new design concept takes creativity, talent and special skills. Sometimes all your new client gives you is a single picture, from which you have to create an entire color palette. Due dates are always too soon, and you would always like more time to invest in conceptual development. Does this sound like a common predicament? How about easing the process with the help of Color Thief?
Created by Lokesh Dhakar, this tool uses a script to identify the dominant color from a picture and the adjacent colors with which to compose the palette. Try incorporating this little service in your workflow next time and you’ll find you have more time for creative brainstorming sessions. (tt)
We’ve all been there: email notifications from popular social networking websites keep polluting our inbox, informing us of new messages, birthdays, recently uploaded images, random acquaintances and unsolicited invitations to groups, circles and games. Unfortunately, most websites don’t make it particularly easy for users to turn off all email notifications at once, so just deleting the message itself rather than going into the settings to disable each notification category often seems easier. Well, not anymore.
Notification Control is a little service that helps you get rid of notifications in a few clicks. The website essentially presents a list of pointers to notification settings pages on Facebook, Twitter, Tumblr, Google+, LinkedIn, StumbleUpon, Forrst and other websites. Take a couple of minutes to actually go through the links, tick off some settings and make your inbox a bit cleaner in one fell swoop. (vf)
Showcase Of Typographic Posters
When the subject of typography comes up, the first things that come to most people’s minds are text, fonts and arrangement of space. Indeed, the main function of typography is to make language visible and understandable. But this function can also be applied to expressive artwork.
Good examples of how type and art can come together well can be seen on Typographic Posters, curated by AndrÈ Felipe, a graphic designer who loves typography and its unorthodox uses. The project features literally hundreds of posters, a great resource that could be either a new platform to show your talent or a reference for your next design project. (tt)
HTML5, Please
With all the excitement surrounding new HTML5 and CSS3 features, perhaps we sometimes overlook the problems some of them might introduce as well. HTML5 Please is a resource that offers us the collective knowledge of professional developers who have worked deep in the trenches of HTML5.
The website lets you look up HTML5 and CSS3 features, see whether they are ready for use and, if so, learn how to to use them — for example, with polyfills, fallbacks or as they are. It features both well known and obscure features and explains how well they are supported today. You can sort features according to browser, mobile device, whether they require prefixes, polyfills or fallbacks, and coding language (i.e. CSS, HTML, API or JavaScript). And you can type the feature that you want to look up as well. A useful resource worth bookmarking. (vf)
Facebook And jQuery Bootstraps: Strap Those Boots
If you have been looking for a toolkit to get your Facebook app development rolling, consider Fbootstrapp by Clemens Krack. The toolkit helps you develop iframe apps at appropriate sizes, and it includes the basic CSS and HTML that you need to match the typography, forms, buttons, grids and navigation to Facebook’s style.
You might also want to look at the jQuery UI Bootstrap. Its live preview feature lets you see buttons, file inputs, error messages, sliders, progress bars and calendars in the style of jQuery UI. Download the stable version to start building your apps, or get in the game and help develop the Bootstrap theme further. (sp)
Spicing Up Your Navigation Menu With CSS3
Do you remember those days when we used nasty JavaScript libraries with onMouseOver effects for “advanced” navigation menus? Comparing those nasty techniques with the simplicity and power of CSS3, we understand how far we have actually come up in our industry over all those years. Mary Lou’s technique for a sliding navigation with images is a vivid example for that.
A very simple CSS navigation technique allows you to add an image for every menu item and slide it out on hover. Essentially, it uses very basic HTML, CSS transitions and the nth-child selector. A very simple and useful technique — especially if you are working on a portfolio site, a gallery site or a slideshow. (vf)
Free Font Family: Exo Font Family
Free quality fonts always come in handy. However, because creating a rich typeface always requires a lot of time and attention, typographers rarely release them for free — which is perfectly understandable. But there is a way for type designers to actually release fonts for free and still get some revenue for their work.
For example, Free Exo Font Family is a successful Kickstarter project which made it possible for Natanael Gama from Portugal to create and release the typeface publicly. Exo is a comprehensive geometric sans serif font family with nine weights — both in Regular and in Italic. Each font comes with many OpenType features such as small caps, ligatures, alternates, oldstyle figures, tabular figures and fractions. Both OTF-version and source files are available to download for free — now that’s the power of community at play! (vf)
Design Seeds: For All Those Who Love Color Palettes
Our universe offers us a huge variety of tones and hues, but we seem to pick similar palettes every time we start a new design. Does this happen to you, too? Then maybe it’s time for you to explore the endless possibilities of color palettes on Design Seeds
In her blog posts, Jessica — a passionate lover of colors and color palettes — features palettes for various situations: travel, fashion, furniture materials, decoration, among others. You can search by color value or the overall theme of a palette. So for your next project (or even your new house) this may be a site worth revisiting for a delightful color combination. (tt)
Exploring The Beauty Of Content: Contents Magazine
Instead of presenting useful tidbits of knowledge, many sites force the reader to glean cunningly hidden information through a mountain of visual data. This often exhausting exercise of reading online often results in a tossed salad of diverse information, where an article on postmodern art seems to somehow be related to dating (or whatever current popular pop-up ads endorse).
So, if you’d like to learn about conten and content strategy practices, take a look at Contents Magazine. You’ll find inspiration, motivation and a good visual example of how to integrate content strategies into visually pleasing, non-distracting frameworks. They showcase helpful notions and interesting articles on the role of content in Web development. (jc)
Quick Peek At A Designer Hall Of Fame
Whether you are a design enthusiast or a company marketing director, you’re likely to be always looking for new and exciting designs to spice up your wallpaper/company website. Browsing for nuggets on the Web can be a lot of fun, but sometimes you wish someone would take the time to put together a little designer “Hall Of Fame”… actually, ‘he’ did.
365 Awesome Designers is a “no-frills” — but lots of “design-thrills” — project, that features interesting, creative, (pick your “awesome” adjective of choice) designers and some of their creations. Every day the avid design fan can discover a new craftsperson. And should your interest in a designer go deeper, the website’s creators provide you with all the necessary information to either stalk your new favorite designer online or on Twitter. (jc)
Common Patterns Of Markup & Style
Whatever project you’re working on, the chances are high that you’ll be using the same snippets of code that you’ve used in your previous projects as well. Whether it’s a data table, a search, breadcrumbs or pagination — wouldn’t it be nice to have a library of bulletproof reusable CSS/HTML components and just grab them when you need them for your work?
Pea.rs might be just the tool you’re looking for. It’s an open source WordPress theme that lets you collect, test and experiment with interface pattern pairings of CSS and HTML. You can easily have your own pattern library setup and running quickly. Essentially, each pattern is a post in WordPress, code snippets are added using custom fields, and the main content field is used for optional notes. Very useful! (vf)
The Great Discontent
Many paths lead to the same destination. Perhaps many of us were destined to become part of the creative industry in one way or another. Think back: what really made you choose the path you took? Did you have an “a-ha” moment? Did someone motivate you, or did you simply wake up one morning knowing exactly which route to take?
Many people in this industry became what they are today by taking totally different paths. And still, everyone featured on The Great Discontent is a creative individual somewhere in this world. Find out what they were doing before discovering their calling, and learn about what drove them. You’ll be surprised at how simple or complicated their choices have been. “The Great Discontent is about understanding the human side of creativity and our innate drive to create that keeps pulling us forward, united in the sense that there’s something more.” You’ll see why the page is called the way it’s called. (sp)
Small Is Good: Showcase of Tiny and Beautiful Stuff
Almost everyone collects something that they have a fondness for: postcards, coins, key holders, stamps. Even without consciously thinking about it, we start collecting whatever we find beautiful, interesting or special. In most cases, these objects are a reflection of our personality. If you feel part of the “collecting community,” then you will certainly like LessThan100g, a blog dedicated to tiny and beautiful stuff.
Specially developed to showcase objects that weigh less than 100 grams, this website presents a unique selection of bottle caps, vintage erasers, old stamps, buttons and even little paper animals. Every issue comes with a brief history of the collection, including the owners’ names, curious facts and conversation starters (such as “Is bigger really better?”). A wonderful small resource that makes us think about the elegance of the simplest things that surround us every day. (tt)
Chemical Design
When joined hand in hand, design and science can result in an explosion of color, shapes and ideas — without the environmental damage. The collection of designs by Simon C. Page titled International Year of Chemistry confirms this.
Atoms, ions, structures of elements, theories of relativity and combustion are among the themes of the creative graphics on display, all referencing major scientists in chemistry. In this centenary of the awarding of the Nobel Prize to Marie Curie, the only unforeseen effect you might feel from examining this collection is a spontaneous overflow of visual delight. (tt)
Getting Sticky With HTML5
With the growing support of HTML5, more designers and developers have experimented ever since, creating useful but sometimes also not so useful techniques and demos. There are indeed no limits to creativity and there are definitely a good number of demos out there that will keep you busy for a while. For example, the “Sticky Thing“, created by Daniel Puhe, provides us with evidence that almost everything is possible.
This sticky “thing” can fly across whitespace and sticks to the borders of the browser’s viewport. You can adjust the stickiness, stiffness, size and gravity of it — and guess what else? It works offline as well as online, and runs both on iOS and Android. The experience is even more engaging on mobile devices with multi-touch sensitivity, gyroscope and which support HTML5 features. (af)
Cut The Rope: An Addictive HTML5 Game
If you’ve got some work to do, you should probably skip this post and move right along to the next one. But if you do have time to spare, make sure to check out Cut the Rope, an HTML5 game developed by Microsoft’s Internet Explorer development team, Pixel Lab and ZeptoLab (which created the original game for iOS devices) to showcase advances in Web standards. The game features canvas-rendered graphics, browser-based audio and video, CSS3 styling and WOFF fonts.
The developers also provide an interesting case study on how the game was ported from Objective-C to HTML5. In fact, the browser version contains about 15,000 lines of code. Now that’s an effort worth our appreciation! (cc)
Here’s To Year Three!
We hope you enjoyed last year’s newsletter articles and look forward to your feedback, ideas and further input. We want to keep the Smashing Newsletter something you look forward to receiving in your mailbox. Share your thoughts about the newsletter in the comments section below, and of course which book you’d like to have in your bookshelf!
If you enjoy the Smashing Newsletter, share it with your friends and colleagues around the world, because in the end it’s you folks out there who keep the Smashing spirit going! Thank you.
As we look around the web, we see so many examples of designers who have brilliantly used color in web design projects to make the page or various page elements really pop. Even in some cases when we see designers opting for more minimal designs, using bold splashes of color can really take the look to fantastic new heights in very simple ways. Using bright, bold colors can often be risky, as the colors can end up visually overwhelming or even downright uncomfortable. So it has to be done with care.
Below is a showcase of sites where the designers struck that balance nicely. From headers to backgrounds to calls to action and beyond, these bold and beautiful uses of color in web design are sure to inspire you to find interesting ways to wield this powerful element in your next project.
Web of Color
Will Fernandes’ Personal Portfolio is a perfect example of using bold colors throughout the design to really bring the personality of the site to life in beautiful fashion.
Blurst uses both strong colors and bold typographic elements to create a really sharp design that by contrast remains soft and comfortable.
Somos la pera limonera has a very simple illustrated site design, where the multitude of earth tones give the site a wonderful natural cartoon feel.
Sitesquared has a design overrun with exciting layers of colors bursting all over the site. Even using multiple font colors well, which cannot often be done in such a complementary and visually pleasing manner.
Mydezzign is an example where the minimal website design, and dark background really pop with the splashes of color that have been added in around the content area edges.
Cultural Solutions uses a large burst of colors in the site header, but as you scroll down through the page, the colors come in more subtle splashes. The Bokeh style background elements work well to drop in the color throughout.
Web Munky uses a nice soft background with bold, royal purple elements that stand out beautifully against it. Creating a welcoming feel and a sense of reliability through the colors.
Panda Creatiu has an elegant look created with a warm brown background that allows the colorful portfolio navigation to shine.
Eye Styles uses softly shaded navigable, animated menu elements that provide the subtle design beautiful splashes of color. They really work well to draw the user’s eyes to the products.
Camp Creative Group uses a slightly transparent streak of bold colors in their over-sized header to set a professional tone through the design.
Meomi has a wonderfully whimsical website design with bold splashes of color scattered down throughout the warm background colors. They help visually lead the users down the page.
Art4web uses bright colorful elements in the header to really set off the clean, sharp design. Coupled with bold, colorful typography highlights, the design is fed by the splashes of color added in throughout.
Treehouse uses a dark design with large colorful button calls to action to grab the user’s attention as soon as they arrive at the site.
Moby beautifully injects random bits of color in an otherwise lightly tinted design. With a couple of colorful headers, but also with a clever logo design that follows the user down the page, changing colors with each section.
Sanctuary T Shop has a colorful navigation menu to grab the user’s focus and help steer them along without drawing too much attention away from the products.
nGen Works has a bold header and footer with other soft colorful elements on the page that give the design a very striking impact.
Duoh! uses lots of bold colorful elements to edge the design and scattered throughout the site and its pages that really help the website’s playful and professional edges combine in flawless fashion.
Soup Studios uses lots of pastel coloring throughout the design beautifully. So much color without crossing the line and hurting the site or the products it features.
Mooty Graphic Design boldly fills their header, and to a lesser degree footer, with bright colors, meanwhile using sporadic colorful elements in the main content area to draw the users.
Beautiful 2.0 keeps their bold colorful elements to the upper reaches of the page, descending into more darkness as you go down. The colors really make the the navigation pop.
Bjarke Clauson-Kaas breaks up the large, softly tinted background of the page with two bold, leading splashes of color. One main set of colorful arrows to direct the reader down the page, and another arrow cutting across the page as you hover to split up the work from the bio.
Stripes Design has a very subtle background and design overall, with an explosion of color down the side of the page which creates a powerful contrast and calls to mind a sense of creativity.
Havaianas uses a canvas like textured background filled with bold colorful decorative watercolor styled elements that perfectly complement the feeling of creative energy which drives the company.
Clair Baxter has a website filled with bold colorful design elements scattered throughout to add extra flair and a creative edge to the design.
F91W uses a large, colorful background which carries a light unobtrusive flow around the content area.
As a Japanese person living in Europe, I’m sometimes asked: “Japanese is a difficult language, isn’t it?â€� Those asking are often surprised when my answer is a simple: “No, actually, it’s not.â€�
While it is true (at least to many Westerners) that Japanese is an exotic language, when compared to learning other European languages, it may seem harder because it has no relation to their own language. But from my own experiences of learning English and German (and also from seeing some European friends learning Japanese), I can say with confidence that learning spoken Japanese is, in fact, not so difficult. The grammar is in many ways simpler than most European languages. Take for example the fact that we don’t have cases, grammatical genders, nor articles. However, reading and writing in Japanese is… well, not so simple.
While discussing typography we most often focus on English language problems, which is only natural considering that the majority of design material is written in English. However, a lot can be gleamed by looking at how other languages are used as part of communication and design — it helps to lend context and a different point of view.
Japanese Scripts
Modern Japanese is written in a mixture of three basic scripts: Kanji — which are Chinese ideographic symbols — as well as Hiragana and Katakana — two phonetic alphabets (syllables). There are a few thousand Kanji characters, while Hiragana and Katakana have 46 each. Although there is a basic rule for when to use which script, there are many exceptions, and what’s worse is that words written in Kanji have often multiple pronunciations, depending on the context or conjunction. This is hard enough for native speaker to get right every time, so I almost feel sorry for those non-natives who are learning to read and write Japanese.
From top to bottom: Kanji is mainly used for the lexical elements: nouns, verb stems, adjective stems, and so forth; Hiragana has rounded letter shapes, which are mainly used for the grammatical elements of sentences such as particles, auxiliary verbs, and suffixes of nouns; Katakana has an angular letter shape, which is most often used for foreign words and also for the purpose of emphasis.
Some say that the “tragedy� started when Japan decided to “import� the Chinese writing system, inscribing it into their own language in the 3rd century.
Since Japanese is as different from Chinese as it is to any other language, simply using the Chinese writing system was not sufficient, and a more appropriate way of writing Japanese was sought out. Some Chinese characters began to be used not for their meaning, but purely for their phonetic value. So by the 9th century, Hiragana and Katakana scripts were derived from simplified Chinese characters that were used to write Japanese phonetically.
The story doesn’t end there. As if using three scripts isn’t enough, we write in both horizontal and vertical orientation.
Horizontal? Vertical? The Unique Case Of Japanese Typography
“Vertical or horizontal?â€� — when setting a piece of text in Japanese, this is a question that Japanese designers constantly need to ask themselves. Being able to use both vertical and horizontal writing orientations is something so normal for us native Japanese speakers that most of us won’t even stop to wonder why this is possible, or even when and how it was first introduced.
The identical piece of text set vertically (right) and horizontally (left). When it is set vertically it’s read from top to bottom, as the lines go from right to left; when it is set horizontally, it is read from left to right, like in European languages.
In general, these two writing orientations have a clear usage: vertical for something “Japanese�, “traditional�, “novels and other humanistic writings�; horizontal for “contemporary�, “business documents�, “scientific & foreign language related writings� and so on. When a main text is set horizontally, the binding is on the left-hand side, and pages progress to the right, like books in Latin scripts. Traditional books in vertical setting are the other way around, with the binding at the right hand side, and pages progressing to the left. So when you handle a Japanese book, don’t confuse the front with the back!
A typical page layout of a Japanese paperback novel using a vertical setting. Ogai Mori (1913), “Abe Ichizoku�, Shincyo-bunko.
Needless to say, traditional calligraphy is always done vertically. With their organic flow, characters are often connected and have different heights and widths — which makes it impossible to disconnect and align them horizontally. Calligraphy by Keiko Shimoda, 2011 (tsukushidesign.com)
Horizontal setting is preferred for scientific texts, mathematical texts and language related books, where words and phrases in foreign scripts and signs are often included, as they are more easily incorporated horizontally. The example (above) is a Japanese-English dictionary. (Pocket Comprehensive English-Japanese / Japanese-English Dictionary, 2000, Obunsha)
Where the efficient use of space is important — namely newspapers and magazines — both orientations are often combined. Although it may appear a bit chaotic, or even random to foreign eyes, these two directions are usually used in a systematic way as a means to indicate different text elements on a page. For instance, a main text is often set in a vertical setting, but headings and captions may be set in a horizontal setting.
A typical newspaper layout — the main text is vertical but headings, diagrams, tables, and captions are placed horizontally.
In a way, it’s comparable to “typographic variantsâ€� which are found in Latin typography — in Latin script text one may use bold, italic, or a different font to differentiate things such as pull quotes from the main text, whereas in Japanese we can do this by using a different orientation. Publications which accommodate non-linear or complex text (as opposed to linear text, such as novels) seem to benefit in particular from having these two orientations, which allow the layout to be highly flexible, and also to create strong visual impact.
The extreme cases of “space-efficiency-oriented typography” are informational-heavy pieces of text, such as diagrams and signage — also exploiting the two directional orientations. The Tokyo Metro map (Fig 10) is a good example of this — as you can see, both orientations are used accordingly, so that everything fits best within the limited space.
Tokyo Metro map
Tokyo Metro route map. The large type on the top is the station name which is placed horizontally. The name of the metroline may be horizontal, but the name of the stops are placed vertically.
It’s true that in many cases they look quite chaotic and sometimes even aesthetically questionable to eyes that are used to “orderlyâ€� design. But it’s easy to appreciate the visual impact and energy they create — they remind you that effective, appealing informational design does not always have to look “neat and tidy”.
Letters from my friends: when it comes to handwriting, orientation is up to a personal preference or simply one’s “mood”. But when you are writing a more official letter, or writing to somebody who is much older than you, it’s probably safer to opt for vertical orientation.
What’s Happening On Screen-Based Media?
Since the introduction of horizontal writing in the Japanese language, print-based media and signage have been employing both of these writing orientations effectively, and in ways that complement one another. But what’s been happening to screen-based media? With a few exceptions — such as word-processing machines made exclusively for the Japanese text output, or subtitles for film and TV screens, which tend to use either depending on the background image — horizontal orientation has been the dominant choice.
The prime example of this is the Web: horizontal orientation has been used almost exclusively. For the past 15 years, I have hardly come across a website that uses vertical setting. Mobile phone screens also use a horizontal orientation. I believe this may be due to the relations of hardware, operating systems and user interfaces that have become the norm, all of which have been designed to work with horizontal writing. It feels somewhat awkward to see vertical writing while all the other elements on the screen, such as the menu bar and UI elements, are horizontal.
Needless to say, the technical limitations (the support of a vertical setting by browsers is a fairly recent introduction) have largely contributed to this too. Perhaps underestimated, maybe the biggest factor for not using vertical setting for screen-based media could well be the mental association with horizontal orientation being used for something “modern� and “contemporary�.
The Nihon Keizai Newspaper website. Although the printed newspaper employs a vertical setting for the body texts, the web-version uses a horizontal setting.
So far, even with content as Japanese as a tea ceremony, a website will use a horizontal setting. (Accessed Jan. 20th, 2012)
Will Vertical Writing Orientation Die Out?
Will vertical writing orientation die out from screen-based media? Or can it make a comeback, when the technological environment allows us to use vertical settings more easily? Many e-book apps on smart phones and tablets have already started using vertical settings. With its intuitive way of navigating the screen along with the lack of external input devices (and apps being able to have more flexible/responsive layout), vertical writing seems to be incorporated much more comfortably.
I’ve spent some time reading these e-books — and pleasantly surprised at how easy they are to read. Apart from the fact that you need to scroll the screen horizontally, it’s just as comfortable as reading “normalâ€� or horizontally set text. In fact, it’s even better for some types of publications like novels, or Manga. Our association towards this type of content when compared to the vertical setting is pretty strong; it would somehow feel “wrongâ€� to see them set horizontally.
Amazon’s Kindle has yet to support the Japanese language, but apparently they’re on their way to doing so. If they seriously want to attract Japanese readers, it would be unthinkable for them not to support vertical setting.
Soseki Natsume’s “Sanshiroâ€� (1908) e-book on iPhone.
Kotobuki Shiriagari’s “OSHIGOTO” (2010) e-book on iPhone.
The situation also seems to be slowly changing on the Web — some interesting attempts have been made in order to familiarize ourselves with Web pages that have vertical setting. One such example is Taketori, which works just like Google translate — you can type in the URL of a Web page you wish to see in vertical setting, and Taketori does it for you. There’s also a piece of software called Kagetaka, which can switch any Web text into a vertical orientation.
Personally, I’m not too sure how well vertical setting will be supported by the users of normal Web pages, unless the way we navigate Web pages is re-developed, or a new type of browser with more innovative UI appears. Even though I complained earlier about the difficulty of the Japanese writing system, I do appreciate its diversity and flexibility, while making use of its three scripts and two orientations allows us to express subtle nuances of content — and we have been benefiting from that for decades.
I thought it would be a shame if we lose these methods of textual articulation in an age of screen-based media. But what has been happening for the last couple of years on touch-screen mobile devices (as well as the Web) can reassure us that both writing orientations may happily co-exist and collaborate on screen in the future, just as they have done off-screen for the last hundred years.
Feel free to share your thoughts in the comments section below.
