While we love sharing nifty tools, services and techniques we stumble upon, we often tend to focus on them instead of looking a bit more closely at how we work ourselves, what our own workflow looks like and what tools we use to save our poor souls and minds unnecessary headaches and stress. We can all learn from each other’s failures rather than successes. Remy Sharp has kindly been publishing short screencasts about his workflow2 in which he explains his full coding stack and how he works in DevTools. Andrey Tarantsov has also published an article about his Sublime Text Workflow3, and Paul Irish as well as Addy Osmani have written about their tools and workflows quite4 often5 recently6.
Not many folks like to talk about their mistakes, disappointments and things that just didn’t work out, but quite often they’re just as useful as all those amazing success stories you can read about in hundreds of books and articles. We can significantly benefit from sharing how we work, build and play, so why don’t you post a blog post or a short screencast about your own workflow as well? What tools worked for you and which didn’t, and why? Please share your stories and your thoughts using the hashtag
P.S. If you’re a huge fan of learning and sharing valuable experiences just like we are, then why not engage students and educators8 or even a company or your coworkers9 to read our lovely eBooks and encourage better productivity and quality of work in various fields including design, Web development, copywriting, and more! Just sayin’! ;-)
— Vitaly (@smashingmag)
Table of Contents
- No More Color Worries In Your Digital Workflow10
- Quirky Nots: A Free Display Font11
- Let’s Pair Program! But Let Me Stay On Native Ground13
- 40 Days Of Dating14
- Make Some Mock-Ups15
- Eye Candy For Lettering Lovers16
- Retro Furnish: Free Icons17
- Connecting Time And People18
- Unfold To Zoom In: The Zoomable Map On Paper19
1. No More Color Worries In Your Digital Workflow
Color management in the digital workflow is not a piece of cake. Lots of different roles are involved and each role and task has their typical issues. The photographer is worried about whether the display on the monitor used to check the image can be trusted. The retoucher needs to take care that he edits the image the way the photographer intended. The designer might notice that the color displayed on the monitor doesn’t match the printed one.
If you are in some way involved in managing colors, these issues are probably very familiar to you. Guess what, there’s help available and you don’t even have to pay for it! Check out the Color Management Handbook, a free guide which introduces a color management system and shows you the benefits and key points of each and every step of it. The handbook is only 14 pages long and very compact. You can also download it from iTunes20. (ea)
2. Quirky Nots: A Free Display Font
Amit Jakhu from Canada made this beautiful display font21 for his Typography class and decided to share it with us and release it for free. It’s perfect for a friendly and playful invitation, e.g. for your next summer barbecue or your child’s birthday party.
You can use it everywhere, share it, and even modify it. There are no restrictions. However, the creator is curious what you will do with it, so why not share a screenshot of your work, get in touch23 with him and make him happy? (ml)
Filling in Web forms is probably one of those few things that are so time consuming and sometimes so annoying on websites. It’s getting even worse on mobile, especially with those tiny button controls that have to be zoomed in and out all of the time. Don’t you just prefer to get stuff done via phone hotline or at a counter in these situations? Point in case: calendars.
4. Let’s Pair Program! But Let Me Stay On Native Ground
Once upon a time, in a vibrant tech firm not too far away from the San Francisco Bay Bridge, two coders met. Their names were Geoff and Matt. Geoff liked to mess with motorcycles and Matt liked to climb stuff. Besides that, they both liked to code and so ended up pair programming. After they had coded together for almost a year, they were not quite happy. It bugged them that they couldn’t find a real-time collaboration tool which allowed them to work in their favorite native editors. So, what did they do?
They simply decided to build such a tool. And so they created Floobits27, a platform that lets you use native text editors to collaborate on code in real time. Floobits currently supports Sublime Text, Vim and Emacs. It has a collaborative terminal so you can share shells. There’s a diff shipper that keeps a directory on your computer in sync with a Floobits workspace. And you can use Google+ Hangouts to voice-chat and screen-share while editing. Floobits still has a few bugs, but Geoff and Matt are diligently working on them. Just go ahead and test it — for free! (ea)
5. 40 Days Of Dating
Jessica Walsh and Timothy Goodman are two young designers based in New York City with opposite relationship problems. They’re tired of wading through the dating scene and have decided to conduct an experiment together. They will date each other for 40 days, since that’s how long it takes to break any habit.
They both have six rules to follow: 1) They will see each other every day for 40 days. 2) They’ll go on at least three dates a week. 3) They’ll attend weekly couples therapy. 4) They will go on at least one weekend trip together. 5) They will fill out a daily questionnaire, and 6) They won’t be seeing anyone else during these 40 days. And guess what? They’re already almost halfway through29… (sh)
6. Make Some Mock-Ups
Brand identity is an essential part of graphic design; your brand will get you noticed and tell everyone what you’re about. All businesses, no matter how large or small, need a brand and we’ve found a few tools that’ll make life a little easier for you to include this skill to your repertoire. Whether it’s for a client or for your portfolio, these tools will give your work a professional edge with a polished finish.
Blue Graphic31 provides a whole host of vectors in PSD file format and all you need to do is to pay with a tweet. Take a look at the Producer’s Mixtape of advertising agency, CP+B, too. They’ve provided InDesign files for production checklist and a custom 3D printable case. Graphic Burger32 provides a basic PSD template where you can change the colors and add your own design elements. And last but not least, Phan Giang Hong Phuc33, a freelance graphic designer, provides free downloads for an assortment stationery. (sh)
7. Eye Candy For Lettering Lovers
Nice typography makes my heart leap for joy — whether it’s on the Web, or on a simple milk package. But the personal touch of hand lettering made with pencil on a piece of paper or with chalk on the smooth black surface of a restaurant’s chalkboard menu is something special. If you do feel the same, here is a site to satisfy your handlettering needs (well, at least for a while): The Art Of Hand Lettering34.
This Tumblr blog is a collection of beautiful hand-lettered art, unique, twirly and wonderfully inspirational. From pencil sketches to final prints and wall art, this resource is filled to the top with eye candy waiting to be explored. New inspiration guaranteed! (cm)
8. Retro Furnish: Free Icons
Great things happen when creative minds think alike and get together. Two designer siblings, Clotilde and Adrien Heury, have created a collection of retro furniture icons36 including lamps, tables and even chairs that make you almost consider refurnishing your very own home.
These 25 fantastic icons are available under a Creative Commons Attribution 3.0 license, so you can use the set for your own purposes (including commercial use) as long as credit is provided! If you like these icons, please support Clotilde38 and Adrien39 by spreading the word with a kind tweet or facebook post. (kv)
9. Connecting Time And People
With over 7 billion people living on this planet, there’s quite a lot happening around the world. Timg40 wants to help and give you a glimpse by letting you search for pictures by location, date and time. There’s also a little map in the top left corner where you can simply move your mouse and zoom into any place you like.
You can find pictures of particular events that people have experienced and were willing to share with the world, e.g. the mass protests in Moscow42 following the conviction of Alexei Navalny. What Timg basically does is search for pictures that people from all over the world have posted on Flickr. If you don’t have a Flickr account yet, then what are you waiting for? (kv)
10. Unfold To Zoom In: The Zoomable Map On Paper
Summer is knocking on our doors, bags are packed and we’re all ready to explore new places. But honestly, do you still carry paper maps to prevent you from getting lost in some obscure backstreet? With digital maps always at our fingertips, most of us have long said goodbye to these giant monstrosities on which we never really found what we were looking for anyway. Pinching and zooming just feels a lot more natural than juggling with 10 square feet of wrinkled paper that resembles advanced origami. But now, paper deserves a second chance!
With map244, Anne Stauche has reinvented the traditional map and created something that you can confidently call the “smartest paper map ever”. With its ingenious design, map245 is incredibly intuitive to use. When folded together, it fits the palm of your hand. Unfolding it once provides you with a quick glance at the public transport system, and twice for an overview of the entire city. And to zoom into your desired area, all you have to do is open up one edge of the map. Simple, and brilliant. At the moment, map2 is available for Berlin and London. (cm)
The contributors to this issue are: Iris Lješnjanin (il), Vitaly Friedman (vf), Esther Arends (ea), Shavaughn Haack (sh), Cosima Mielke (cm) and Kristina Vogt (kv).
- 1 https://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://remysharp.com/2013/07/18/my-workflow-v3-full-coding-stack/
- 3 http://tarantsov.com/blog/2012/02/sublime-text-workflow-that-beats-coda-and-espresso/
- 4 http://www.paulirish.com/2012/talk-tooling-the-webapp-development-stack/
- 5 https://speakerdeck.com/addyosmani/tooling-for-the-modern-webapp-developer
- 6 https://www.smashingmagazine.com/2012/12/22/talks-to-help-you-become-a-better-front-end-engineer-in-2013/
- 7 http://remysharp.com/2013/07/18/my-workflow-v3-full-coding-stack/
- 8 https://shop.smashingmagazine.com/smashing-library-educational-license.html?pk_campaign=Library%20licenses%20from%20shop%20front&pk_kwd=educational
- 9 https://shop.smashingmagazine.com/smashing-library-corporate-license.html?pk_campaign=Library%20licenses%20from%20shop%20front&pk_kwd=corporate
- 10 #a1
- 11 #a2
- 12 #a3
- 13 #a4
- 14 #a5
- 15 #a6
- 16 #a7
- 17 #a8
- 18 #a9
- 19 #a10
- 20 https://itunes.apple.com/de/book/color-management-handbook/id659236022?l=ja&ls=1
- 21 http://www.behance.net/gallery/Quirky-Nots-(Free-Font)/9550009
- 22 http://www.behance.net/gallery/Quirky-Nots-(Free-Font)/9550009
- 23 https://twitter.com/amitjakhu
- 24 http://matthewmueller.github.io/date/
- 25 http://matthewmueller.github.io/date/
- 26 https://floobits.com/
- 28 http://fortydaysofdating.com/
- 29 http://fortydaysofdating.com/
- 30 http://graphicburger.com/branding-identity-mock-up/
- 31 http://www.blugraphic.com/2013/03/08/blugraphic/
- 32 http://graphicburger.com/branding-identity-mock-up/
- 33 http://sdmd.org/download
- 34 http://theartofhandlettering.tumblr.com/
- 35 http://theartofhandlettering.tumblr.com/
- 36 http://heuryandheury.eu/retro-furnish-icons/index.html
- 37 http://heuryandheury.eu/retro-furnish-icons/index.html
- 38 https://twitter.com/clotildeh
- 39 https://twitter.com/Bentoutif
- 40 http://timg.co/?4115387456935998412600141343415600
- 41 http://timg.co/?4115387456935998412600141343415600
- 42 http://timg.co/?4157548166739762075066131374174000
- 43 http://www.thezoomablemap.com/
- 44 http://www.thezoomablemap.com/
- 45 http://www.fastcodesign.com/1672989/an-ingenious-paper-map-zooms-in-just-like-google