Smashing Newsletter: Issue #90
Yes. No. OK. Cancel. Whenever you’re designing an interface, you don’t only have to thoroughly think about the visual style of your buttons, but also about the microcopy that will be displayed on those buttons. What words should you choose for the confirmation buttons? What about the checkout buttons, and even the alerts?
There has been a lot of discussion whether more general or more abstract terms should be used as labels on buttons. The more precise3 the label is, the better. Also, it might be a good idea to use meaningful verbs4 like “Save” or “Confirm”, instead of “Yes”, “No” or “Cancel”. Mailchimp, for example, prompts users to actually type in the word “DELETE”5 when deleting their data and confirm it with a button also labeled “Delete”.
— Vitaly (@smashingmag)
Table of Contents
01. Skeuocard: Credit Card Input Redesigned7
02. Automatic Enumeration With CSS8
03. Free Icons: Download The World For Free9
04. Remove Image Backgrounds In The Browser10
05. Not Your Usual Animated GIFs11
06. Resolution Independent Background Graphics12
07. Precomposed Touch Gestures13
08. What’s Something Most People Don’t Know About You?14
09. There Is Always Money In The Banana Stand15
10. Get Better And Smarter: New Smashing Workshops16
171. Skeuocard: Credit Card Input Redesigned
Do you like typing in your data in a credit card input field, do your users? Probably not. That’s why Ken Keiter has decided rethink and redesign the credit card input on Web forms. As you enter your credit card number, Skeuocard 18 matches your information with an accepted card type, like Visa or MasterCard for example. When typing in a CVC number on the back, you are prompted to flip the card to the other side and enter the information once all the information on the front is accepted.
It’s really simple to use — you can compare the card you’re holding in your hand directly with what you see on the screen. Which means less time rereading and double checking the numbers on the screen. And a much simpler design for customers who aren’t used to buying things with their credit card. The project is a work in progress though, and Keiter has said he will add new credit card layouts as they are contributed. (sh)
202. Automatic Enumeration With CSS
Formatting long HTML documents can be very time consuming and frustrating. Frankly, sometimes on the Web, I miss some visual treatments and functions which are standard features in Word, Pages or InDesign. One of these features is automatic numeration. It is common knowledge that automatic numeration certainly can be archived with ordered lists. But what if I need to automatically enumerate headings?
Vladimir Simovic wrote a few simple CSS lines that enable simple numeration for headings — even nested sub-sections and list-types (known from list-elements) are possible! This technique not only works with headings though. You could use it to enumerate other elements like images or tables. It works in all “good” browsers, and IE8 onwards. Furthermore, the technique has successfully been tested for exporting HTML in Kindle format which comes in handy for the eBook publication. You can check out the the JSFiddle by Jens Grochtdreis22 or read the full article by Vladimir Simovic23 (in German). (ml)
243. Free Icons: Download The World For Free
There is now no need to travel to see the Taj Mahal of Agra, the Egyptian pyramids, Rio de Janeiro’s Cristo Redentor or San Francisco’s Golden Gate Bridge. The world is now at your fingertips with the Famous Landmarks Icon Set25 — a free set of 12 beautiful and pixel-perfect mini landmarks from around the world. Each one of them was carefully and tenderly designed by Shaun Dona26.
All of Shaun’s landmark icons are available in three different formats (AI, EPS, PSD). They also come in vector shapes, so you can easily resize them. Licensed under a Creative Commons Attribution 3.0 Unported license, the icon set can be shared, adapted or used commercially. But pease do not redistribute the icon set without the prior consent of the author. (ea)
284. Remove Image Backgrounds In The Browser
Do you usually have simple image editing tasks and can’t afford advanced image processing tools like Photoshop? Worry no more! With Clipping Magic29, there is now a way to easily remove the background from your photos to create masks, cutouts, or clipping paths — all done instantly online in the browser!
All you need to do is simply drag your image onto the drop zone to upload a picture. Mark foreground areas green and background areas red, and the algorithm takes care of the rest. The background is removed by adding an alpha channel, with a suitably feathered boundary. The tool is still in an alpha phase and the team is working on a better handling of complicated situations like hairy and blurry boundaries. (ml)
315. Not Your Usual Animated GIFs
When we think of animated GIFs, we probably have one-liners32 from famous movies or shows in mind, or perhaps weird images of weird animals doing… weird things. But GIFs don’t have to be just that. If we combine art, illustration and an animated GIF together, we can actually create a different kind of looped animation. In short, the result can look like Bisous les copains33.
Every single week Guillaume Kurkdijan, who lives in Nantes (France), designs his very own GIF animation which is a scene from a life of virtual characters living in their own little world with their own rules, principles and even laws of physics. The attention to detail is remarkable, and every animation is an artwork of its own. Not your usual animated GIF now, is it? (vf)
356. Resolution Independent Background Graphics
In times of multi-sized screens and resolutions, graphics aren’t that easy to handle anymore as they used to be. Imagine you want a background graphic for a website that still looks crisp on a large monitor; you’ll have to put up with huge high-resolution images. A great, but still pretty underused, alternative is of course SVG. If you aren’t looking for photographic background, you might solve this issue with just a few lines of XML, and they can easily be adjusted to your needs. SVGeneration36 is a good place to automate this work for you.
Featured patterns can be customized to your needs by easily adjusting everything from widths and heights to borders, paddings, and of course, colors right in the browser. The result is displayed live in the background and (once you’re happy with it) can be exported and embedded directly in your own project. As the graphics are licensed under an MIT Licence, using them doesn’t require any credits, but some sort of “thank you” for the efforts is nevertheless appreciated! (cm)
387. Precomposed Touch Gestures
Got any presentations coming up or product demos that have to be designed? Well, we’ve got something just for you then. Pre-Composed Touch Gestures39 by Areus Wade is a set of basic precomposed touch-device gestures that are available as raw Quicktime animations. Tap, swipe, flick, pinch — you name it!
The set is basically free, and you can pay for the files with a tweet or by donating $2 to AFSP. The gestures are available as QuickTime animations which will work in a video editor as well as Photoshop. You can also subscribe to file updates and receive notifications via email. (sh)
418. What’s Something Most People Don’t Know About You?
You may be a big fan of some developers, designers, writers or speakers, but how much do you really know about them? Of course, you know how their faces look like, you know about the work they do, also what inspired them in their careers, and so forth. But imagine you bumped into one of these people in person. Imagine they invited you for a drink and you had half an hour to talk to them. What questions would you ask?
You would probably ask them about the work they do and what has inspired them in their careers. But really? Don’t you already know this?! The chance is high, that the person has already shared this information online. When INDEX 4243 gets a chance to ask people questions, they don’t bother asking them questions about work. INDEX 42 asks people intimate questions like “What do you need most right now?” or “What do you want to remember forever?”. Now that’s a nice change! (ea)
449. There Is Always Money In The Banana Stand
After only three seasons that were released 2003 to 2006, an unexpected family reunion took place in 2013 with Netflix airing season four of Arrested Development. As you probably now, the show depicts the life of a rather dysfunctional family Bluth that find itself forced to bond together in difficult circumstances. Good news: the family was now back for another season and might be for more in the future.
Even though critics are torn between critical acclaim and dismal ratings, Arrested Development fan and artist Nigel Evan Dennis felt compelled to give the show a graphical tribute46. Next to a display of all the main characters, you’ll also find quite a few graphic visualisations of long-running inside jokes that the Bluths are famous for. (kv)
4710. Get Better And Smarter: New Smashing Workshops
We cannot emphasize enough the importance of quality. With our full-day workshops48 in Germany, we aim to bring together only the best experts from various fields of Web design and development. And if these workshops won’t help you get better and smarter, what will?
Here’s a quick overview of workshops taking place in Berlin and Freiburg in the upcoming weeks:
- Responsive Design50 with Brad Frost,
- Typography51 with Dan Mall,
- Mobile Input52 with Luke Wroblewski,
- Product Launch53 with Rachel Andrew,
- Regular Expressions54 with Lea Verou,
- Sketching Interfaces55 with Eva-Lotta Lamm,
- Responsive Design56 with Vitaly Friedman,
- Node.js57 with Remy Sharp,
- UX 58 with Dan Rubin.
Haven’t had enough? Check out our full list of Smashing workshops59 — you won’t be disappointed! You can also subscribe to the Events List60 to stay updated and find out where the next workshops may take place. Who knows, there may be one in your neighbourhood soon! (vf)
The authors in this newsletter are: Shavaughn Haack (sh), Melanie Lang (ml), Esther Arends (ea), Cosima Mielke (cm), Iris Lješnjanin (il), Kristina Vogt (kv), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://ux.stackexchange.com/questions/9946/should-i-use-yes-no-or-ok-cancel-on-my-message-box
- 3 http://ux.stackexchange.com/questions/9946/should-i-use-yes-no-or-ok-cancel-on-my-message-box
- 4 http://www.usabilitypost.com/2008/08/30/usability-tip-use-verbs-as-labels-on-buttons/
- 5 http://kb.mailchimp.com/article/how-can-i-delete-my-list-or-clear-my-subscribers-from-a-list
- 6 https://twitter.com/smashingmag/status/365422870068854784
- 7 #a1
- 8 #a2
- 9 #a3
- 10 #a4
- 11 #a5
- 12 #a6
- 13 #a7
- 14 #a8
- 15 #a9
- 16 #a10
- 17 #
- 18 http://kenkeiter.com/skeuocard/
- 19 http://kenkeiter.com/skeuocard/
- 20 #
- 21 http://jsfiddle.net/Flocke/LJ66t/
- 22 http://jsfiddle.net/Flocke/LJ66t/
- 23 http://www.perun.net/2011/12/07/css-automatische-nummerierung-von-ueberschriften/
- 24 #
- 25 http://tympanus.net/codrops/2013/07/31/freebie-famous-landmarks-icon-set-ai-eps-psd/
- 26 https://twitter.com/shaund0na
- 27 http://tympanus.net/codrops/2013/07/31/freebie-famous-landmarks-icon-set-ai-eps-psd/
- 28 #
- 29 http://clippingmagic.com/
- 30 http://clippingmagic.com/
- 31 #
- 32 http://giphy.com/
- 33 http://bisouslescopains.tumblr.com
- 34 http://bisouslescopains.tumblr.com
- 35 #
- 36 http://svgeneration.com/
- 37 http://svgeneration.com/
- 38 #
- 39 http://areuswade.com/precomposed-touch-gestures/
- 40 http://areuswade.com/precomposed-touch-gestures/
- 41 #
- 42 http://indexfortytwo.com/
- 43 http://indexfortytwo.com/
- 44 #
- 45 http://thereisalwaysmoneyinthebananastand.com/
- 46 http://thereisalwaysmoneyinthebananastand.com/
- 47 #
- 48 https://shop.smashingmagazine.com/workshops/
- 49 https://shop.smashingmagazine.com/workshops/
- 50 https://shop.smashingmagazine.com/smashing-workshop-atomic-design.html
- 51 https://shop.smashingmagazine.com/smashing-conference-workshop-dan-mall-just-my-type.html
- 52 https://shop.smashingmagazine.com/smashing-conference-workshop-luke-worblewski-mobile.html
- 53 https://shop.smashingmagazine.com/smashing-workshop-shipping-your-product-freiburg.html
- 54 https://shop.smashingmagazine.com/smashing-workshop-lea-verou-demystifying-regular-expressions.html
- 55 https://shop.smashingmagazine.com/smashing-workshop-sketching-interfaces.html
- 56 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-clever-tricks-and-techniques.html
- 57 https://shop.smashingmagazine.com/smashing-workshop-nodejs-knowledge-smash-and-grab-berlin.html
- 58 https://shop.smashingmagazine.com/smashing-conference-workshop-dan-rubin-design-ux.html
- 59 https://shop.smashingmagazine.com/workshops/
- 60 http://www.smashingmagazine.com/the-smashing-conference-list-join-in/