Smashing Newsletter: Issue #47
Goddag Smashing Magazine family! I just came back from a visit in Denmark. SmashingMag fan Alex Rock invited me for a tour through Copenhagen2 and introduced me to my Danish family3. I have to admit, this time it is taking a bit longer to write my hello to you. I’m still suffering a major hangover4 after the second SmashingMag MeetUp5 with the awesome crowd from the BeyondTellerand conference. You should really become a member of our MeetUp! We have something smashing planned for December: Paul Irish is going to join us in Stuttgart on the 21st of December6!
— Keep rocking! *meow*
Table of Contents
02. Format Dates And Times With Moment.js9
03. Getting Sticky With HTML510
04. Organize Projects And Tasks With Trello11
05. The Battle Of The Fonts12
06. Meaningful Interface Transitions13
07. The Future Of Interaction Design14
08. Running Titles Of 8/16 Bit Games15
09. Food Illustrations By Lana Porter16
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.
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 Thing25“, 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)
Keeping an eye on all projects happening at the same time in your company can be quite difficult and tiresome. A great project board to help you organize and follow your teams’ projects would be Trello2927, a collaboration tool that organizes your project(s) into boards and allows you to join them into lists as wished. You can easily add other members who are also working on the same project at one stage by dragging them into the list and follow all changes with the help of email updates and notifications.
Trello2927 also supports attachments such as images, videos, twitter previews and includes comments, checklists, a voting system, labels and members. A bonus this tool offers are the public boards: these enable your customers to preview the current roadmap to a particular project and even allow public commenting as well as voting for all team members to see. (af)
It is time for your favorite font to stand its ground. Have you heard of the Font-Bot Project30 yet? The idea is to build robots out of a type face, showcase them and hope others put together a potential opponent. Once there are two font-bots ready to compete against each other, only thing left would be to “let the battle begin!”
Participating is not hard, the rules are clear: all robots must be built of type alone (letters A to Z). You may reflect and rotate the letters. You may not distort the letterforms in any way. You may use as many font families as you wish. As soulless as it is, you may beg for votes on your social profiles. Any kind of smack talking/showmanship is welcome. Keep it civil. So, sit down and put your bot together. May the best bot win32. Let’s see if your font has what it takes to defend its corner. Fight! (sp)
In the last couple of years, the possibilities in interaction design have become more sophisticated and the difficulty in explaining their process to your client still remains. Does this sound like your reality? Then try to include some of the meaningful transitions33 created by Johannes Tonollo in your next UI design presentation and you’ll see how easy your life can get.
There are different categories in UI motion graphics35 which include orientation, spatial extension, awakening controls, highlight, feedback and feedforward. In each category, you will find more details and possibilities which are shown in an simple yet concise way. One thing is for sure: your next brainstorming session with your client will surely have a whole new perspective. (tt)
We tend to use more and more devices on a daily basis and seem to be depending even more on technology. Our lives have changed since all we need to do these days is simply touch or slide over a screen. This is something that Bret Victor36 has noticed and has brought up a good question to us all: Do we really know what human needs are and will be for the future to come?
A brief rant on the future of interaction design38 is a movie that shows us what the future people exactly use to interact with their future technology. There is a clear factor which is neglected by all of us: our human capabilities. What we, each and every one of us, are capable of. So be sure to ask yourself once again, “Do I really want our future to become just an interaction with pictures under glass?” (af)
Do you remember good old days when games used to have a limited color range, pixelated graphics and very simple, basic animations? The ability of game designers from the 80s and early 90s to create engaging gaming experiences using the (quite modest) available technology at that time is remarkable to say the least.
In particular, the running titles of 8/16 bit games often were masterpieces in their own right, with skillfully created 3D effects, impressive graphics and, of course, the titles of the games. Title Scream40 features dozens of intros from legendary games such as Prince of Persia, Sonic, Tetris, TheLegend of Zelda and Mortal Kombat. Now, this sure brings back memories! (af)
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 Simplifood41.
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)
The authors in this newsletter issue are: Stephan Poppe (sp), Cameron Chapman (cc), Talita Telma (tt), Luca Degasperi (ld), Lisa Lang (ll), Ana Flasker (af).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://www.flickr.com/photos/68892449@N05/6381865269/in/photostream
- 3 http://www.flickr.com/photos/68892449@N05/6381865385/in/photostream
- 4 http://www.flickr.com/photos/68892449@N05/6375552251/in/set-72157628078434885/
- 5 http://www.flickr.com/photos/68892449@N05/sets/72157628078434885/with/6375552251/
- 6 http://www.meetup.com/The-SmashingMagazine-Meetup/events/42026332/
- 7 https://shop.smashingmagazine.com/thanksgiving-smashing-ebook-bundle.html
- 8 #a1
- 9 #a2
- 10 #a3
- 11 #a4
- 12 #a5
- 13 #a6
- 14 #a7
- 15 #a8
- 16 #a9
- 18 https://github.com/mozilla/pdf.js
- 19 https://github.com/nddrylliog/jsmad
- 20 https://github.com/cosinusoidally/mp2dec.js
- 21 https://github.com/mbebenita/Broadway
- 22 http://mbebenita.github.com/Broadway/broadway.html
- 23 http://momentjs.com/
- 24 http://momentjs.com/
- 25 http://www.spielzeugz.de/html5/sticky-thing/
- 26 http://www.spielzeugz.de/html5/sticky-thing/
- 27 https://trello.com/
- 28 https://trello.com/
- 29 https://trello.com/
- 30 http://font-bot.com/
- 31 http://font-bot.com/
- 32 http://font-bot.com/
- 33 http://www.ui-transitions.com/
- 34 http://www.ui-transitions.com
- 35 http://www.ui-transitions.com/#categories
- 36 http://worrydream.com/
- 37 http://worrydream.com/ABriefRantOnTheFutureOfInteractionDesign/
- 38 http://worrydream.com/ABriefRantOnTheFutureOfInteractionDesign/
- 39 http://www.titlescream.com/
- 40 http://www.titlescream.com/
- 41 http://cargocollective.com/simplifood
- 42 http://cargocollective.com/simplifood