Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #28

This newsletter issue was sent out to 51,552 newsletter subscribers on March 2nd 2011.

Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming issue. The newsletter is sent out on Tuesdays, and contains unique tips and tricks for designers and Web developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter1, of course.

Table of Contents

  1. DesignersMX: What Tunes Keep Designers Rolling?2
  2. The Secret Life of Punctuation3
  3. Mr. Stacks: On-the-Fly Layer-Comp Storyboarding4
  4. User Interface Patterns For Mobile Apps5
  5. Anatomy of Typography6
  6. An Illustrated Guide: Picture Books Reviewed7
  7. Providing Keyboard Navigation With a jQuery Plugin8
  8. FlockDraw: A Free, Collaborative Group Whiteboard9

1. DesignersMX: What Tunes Keep Designers Rolling?

Music. Design. Inspiration. The three have gone hand in hand ever since homo sapiens have walked the earth. DesignersMX10 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.

DesignersMX: Which Tunes Keep Designers Rolling?11

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)

2. The Secret Life of Punctuation

Punctuation is a huge part of communication. Without it, the thoughts we attempt to express in written form would be a giant garbled mess. And yet, how many of us know any of the history behind the punctuation marks we use? Where did the comma come from? Or the colon? Or rarer punctuation marks such as the pilcrow and interrobang? Any typography junkie would likely be curious about the origins of their favorite punctuation mark.

The Secret Life of Punctuation12

Shady Characters13 is the blog of Keith Houston, and it aims to shed light on the history of both well-known and outlandish marks of punctuation. So far, he’s covered the pilcrow (in part), but more entries are sure to follow. It’s an interesting study in the stories behind the punctuation we use every day. (cc)

3. 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. Stack: On The Fly Layercomp Storyboarding14

Mr. Stacks15 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)

4. User Interface Patterns For Mobile Apps

Design patterns are reusable solutions for recurring problems. They are found in many areas of our lives and also exist for mobile user interface designs.

User Interface Patterns For Mobile Apps16

Mari Sheibley has put together a comprehensive set of examples of Mobile UI Patterns17. The collection includes examples for check-in screens, activity feeds, notification screens, user profiles and more. With all of the examples provided, designers will be able to better select patterns that address the needs of their users. (tb)

5. Anatomy of Typography

Understanding the anatomy of type is a big help when you’re trying to figure out how to select or combine typefaces in a design. If you understand the variations in the basic construction of typographical characters, then you will be able to better match typefaces that, at least on the surface, appear to be wildly different. But many typefaces are visually complex, and nailing down exactly what makes them complex or different can be difficult without a starting point.

Typographical Anatomy18

Typography Deconstructed19 is a useful guide that breaks down the anatomy of typefaces. Everything is presented visually and in alphabetical order, so finding what you’re looking for is easy. In addition to its resources, the website also offers a letterpress-style poster of the anatomy of typefaces that is not only beautiful, but a great quick reference for designers. (cc)

6. An Illustrated Guide: Picture Books Reviewed

Many of those old picture books from our early years are still worth a look once in a while. An Illustrated Guide20 reviews some of the most notable picture books out there. Guide’s authors, Catherine and Matthew Buchanan, have collected many of them from the last decade.

An Illustrated Guide21

The books are categorized according to cover art styles (traditional, digital, mixed media, etc.) and reading level (junior, wordy, dark, etc.). The authors invite readers to submit picture books for review. Each review comes with a direct link to Amazon or the Book Depository for convenient ordering. (sp) (ik)

7. Providing Keyboard Navigation With a jQuery Plugin

A lot of websites, especially Web-based apps, now incorporate keyboard shortcuts into their navigation. So, a plug-in that makes keyboard-based navigation easier to set up was bound to be developed sooner or later.

Easier Keyboard Navigation22

mapKey23 is a jQuery plug-in that does just that. Call a function or target any link on your website easily with a single keyboard character. It makes it incredibly simple to implement keyboard navigation, which, when done properly, greatly improves the user experience and usability of a website. (cc)

8. FlockDraw: A Free, Collaborative Group Whiteboard

Drawing is a multifaceted artistic medium. It captures the world by simultaneously recording its minutiae and abstracting it on a flat surface. Some people draw to kill boredom. For others, drawing is a pure delight, a mode of self-expression, perhaps a religious act or means of meditation, or simply a way to satisfy a basic natural instinct. In prehistoric ages, people painted on rock walls; nowadays, artists create digital drawings for posters, book covers, illustrations, video games and even Hollywood blockbusters.

FlockDraw: A Free, Collaborative Group Whiteboard24

In the last few years, advances in hardware and software have made it much easier to produce high-quality digital images. FlockDraw25 is a fancy online drawing tool that is easy to use and, generously, free to use. FlockDraw offers the artist various goodies. An unlimited number of users can draw on a canvas at the same time, enabling you to be part of a community at anytime. (cs)

The authors are: Vitaly Friedman (vf), Iris Kopic (ik), Thomas Burkert (tb), Stephan Poppe (sp), Christina Sitte (cs), Cameron Chapman (cc).


  1. 1
  2. 2 #a1
  3. 3 #a2
  4. 4 #a3
  5. 5 #a4
  6. 6 #a5
  7. 7 #a6
  8. 8 #a7
  9. 9 #a8
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' web with the latest tips and tricks for designers and web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top