“Rules are made to be broken,” as the old saying goes. Well, why not break some, look beyond the black box and experiment? However, while creative chaos is fruitful for visual explorations and creative work, rigid constraints can be just as helpful in your workflow. Front-end methodologies such as BEM give us a concise way to structure and organize our code, but do we follow the same process in other areas of our daily routine? What about our PSD2s? What about our invoices or folders that contain illustrations for our clients? Do you use any naming conventions that help you find your files whenever you need them?
A couple of weeks ago (for the very first time in a long time) I sat down to reconsider how we actually organize our work here at Smashing Magazine. Now, this may sound like a little unnecessary detail, but the way you name your keyboard shortcuts, files or how you structure folders can help streamline processes and move all distractions out of the way. At the same time, you can also ensure that the end result doesn’t need an extra polish once you’ve passed the deadline (nobody does this anyway, right?). Once the SmashingConf 20133 was over, it was a pleasant surprise to realize that all files were in the right order and structure, so no cleaning up was necessary. When was the last time you felt the same way? Honestly?
— Vitaly (@smashingmag)
Table of Contents
- Free Font: Born Typeface5
- Another Take On Off-Canvas Navigation6
- Making The Best Out Of Your… Favicon!7
- Credit Card Payment Within A Single Input Field8
- Printing Shipping Labels The Easy Way9
- Wait! What’s That Font Called?10
- Throughout The Dark Corners Of The Web11
- Flashback To The Present12
- Advice From Designers13
- Exploring Visual Trends In Contemporary Graphic Design14
- Smashing Workshops In Berlin And London15
1. Free Font: Born Typeface
What happens when a type designer moves to a new big city and ends up meeting lots of amazing people from different cultures and different parts of the world? Obviously, this is how new typefaces emerge. Well, at least that’s how it worked for Carlos de Toro.
Carlos designed and released Born, a free “Mediterranean” humanist typeface17 based on traditional calligraphic forms with a large
x-height, and hence offering high legibility even in small sizes. Born Regular includes 262 glyphs, with uppercase, lowercase, alternative glyphs, ligatures, uppercase numerals, symbols and punctuation marks. Unfortunately, only Regular weight is available so far. The font is available for both private and commercial projects, but to download it, a tweet is required. Definitely a nice addition to your font library! (vf)
2. Another Take On Off-Canvas Navigation
We’ve all been there: we have a navigation to include in narrow views, but we don’t want to make the interface crowded, so we hide it behind a navigation icon. When a user clicks on the icon, the navigation is revealed. In fact, there are many solutions for this pattern, and off-canvas navigation is just one of them.
3. Making The Best Out Of Your… Favicon!
Have you ever noticed how little free space there is available on most websites, Web services and programs? Once you take a closer look, you’ll see that there is still room to add some UX. For example, how about a favicon? Even though it’s only 16×16 or 32×32 pixels, a favicon offers great potential. In Gmail for example, you can activate an option in Google Labs to have the favicon notify you of unread emails.
If you like the idea and are interested in more options of how dynamic elements can be added to favicons, then you should definitely check out Favico.js24, a Javascipt plugin developed by Miroslav Magda25. It allows a favicon to go through different types of transitions and can even change its color. And believe it or not, Favico.js even lets your favicon play an HTML5 video and webcam live stream! (ea)
4. Credit Card Payment Within A Single Input Field
Mobile designers have been advised to avoid text input for years. But not anymore! Square Wallet has introduced a new approach to the credit card input field on mobile. This particular technique seamlessly moves from the credit card number input to other details, such as expiration date, CVV and ZIP code — everything done within a single input field!
“Payment Info” runs on a script that automatically detects the credit card type and changes the icon accordingly — no separate fields added! If the card number is validated, it moves left and displays only the last four digits. Luke Wroblewski26 has written more about this technique on his blog, and a video of the demo is also available. (ml)
5. Printing Shipping Labels The Easy Way
If it’s one thing we can all agree on, it would be that email was indeed a great invention. You type a message, click on “Send” and it is immediately delievered to the recipient. Could you think of anything more comfortable? Imagine you had to post a conventional letter each time you hit that “Send” button instead — the tedious task of waiting in a queue at the post office in order to get a few stamps. Luckily enough, technical progress has saved us countless hours. However, there are still those shipping labels left that you have to get at the post office, but isn’t this also something we can take care of ourselves?
Well, thanks to ezsendit28, we can! Currently in its development phase, ezsendit‘s goal is to save us precious time by offering an easy way to print stamps and shipping labels ourselves — from anywhere — be it via phone or tablet. This service will first be available for the three biggest US postal services and accessible without any registration or login required. Apart from pre-filling addresses from ZIP or current location, other features will include showing you the closest drop-off point. Sound good? Well, why not encourage the team by giving them a virtual push via their landing page29. If you don’t, you may regret it while standing in that long line next time! (cm)
6. Wait! What’s That Font Called?
Do you ever find yourself asking what fonts are being used on a particular website? Well, since it has never been easier to deconstruct designers’ decisions, the folks at Typ.io30 have taken it into their own hands and have revealed various type choices for everyone to see. You can browse through, upload a site or even search for a specific font.
This is a great tool to explore font combinations, too. The designers have also tallied up the most popular fonts, most popular header fonts, most popular contents fonts, etc. So, why not give it a bash? And, in no time at all, you could learn what works and explore the pairings that you’d never thought would work together. Not enough? Well, you might want to check out Google Web Fonts We Love32 and Just My Type33 for further beautiful type pairings. (sh)
7. Throughout The Dark Corners Of The Web
What happens when every member of a digital agency comes together and takes a week-long sabbatical from client work? Something like Dungeons and Developers34 can come to life! It’s a talent tree for Web developers in which you can select a character and send it on a dark journey starting at “HTML” and ending at the “Web Development Mastery” level. Throughout the journey, you come across lots of challenges such as CSS, JS Libraries, Prototyping and UX.
At each stage on the path there’s a door to a new technology which will unlock once your character has learned the needed skills. Dungeons and Developers is not only a great visualization of a talent tree for any Web developer, it’s also a great educational resource. Each rank in the tree includes useful links to websites where you can learn the skills you need to be able to pass on to the next level. Great for anyone who’s ready to explore the world of Web Design!
8. Flashback To The Present
Stamps, old coins, antiques, Kinder Surprise figures — there are hundreds of things one can collect. Having a passion for photography, copywriter and journalist Katharina Zimmermann has found her own field of interest: old and extraordinary store fronts38.
The recent photos on her blog have been taken in London, UK. If you browse through this collection, you may be helplessly tempted to start having nostalgic dreams of the “good old times”. Nevertheless, these gems are all one of a kind — just let them speak for themselves! (kv)
9. Advice From Designers
My business professor always used to stress that nothing is ever invented from scratch. New technology builds on current technology, and current components can be used to compose a new product. In the same way, art and design can also create a new composition of existing components and techniques. So? Fantastic things can come to life! Like Adrien Heury’s “Designers Checklist Advices40“, for example.
Adrien Heury42 combined two articles together to create a large library of checklists from various designers around the world. Adrien would love to extend this little project of his, so get involved and share your favorite design checklist43 with him! (ml)
10. Exploring Visual Trends In Contemporary Graphic Design
Graphic designer Wim Crouwel once said, “You are always a child of your time, you cannot step out of that.” Words that stay like an echo. Just like fashion and music, graphic design has always been influenced by trends and tendencies. For you, as a designer, this means a constant balancing act between being unique and hitting the zeitgeist. An enormous resource to help you stay on top of what’s going on in graphic design is Trend List4644.
Trend List4644 may look like a rather plain-looking website at first sight, however, it turns out to be a real treasure for any designer — Web folks included. It contains a collection of posters, books, catalogs, magazines and album covers. What makes it even more comprehensive is that Trend List also tries to spot when and where a trend has arisen and how it has developed over time. With new additions being made almost every day, the site is definitely worth bookmarking to check back every now and then. (cm)
11. Smashing Workshops In Berlin And London
We can’t really help it, can we? As people who care about their craft, we want to keep getting better and smarter at it. We care — that’s what makes us who we are. If all of this sounds all too familiar to you, then join our upcoming full-day workshops47 and brush up your skills for good.
Workshops in Berlin, DE
- “Responsive Workflow by Stephen Hay48” with Stephen Hay
Forget fixed-width Photoshop comps and overproduced wireframes. This full-day workshop shows you how to adapt to the responsive design paradigm and introduces a new, effective design workflow.
- “Product Launch49” with Rachel Andrew
In this workshop you’ll learn what you need to know before launching and shipping any product. By the end of the day you should have an action plan tailored to your product idea, with clear next steps.
- “Sketching Interfaces50” with Eva-Lotta Lamm
We will explore when and how to use sketching in the design process, how to make your sketches communicate more clearly and efficiently, and how to run a collaborative sketching session with a group of people.
Workshops in London, UK
- “Front-End Warrior53” with Addy Osmani
Modern front-end tooling can help you automate the setup and usage of most front-end tools so you can spend more time building awesome sites and apps. Let’s see how we can make that happen.
- “Responsive Design54” with Vitaly Friedman
In this full-day workshop, Vitaly will present practical techniques, clever tricks, responsive design patterns and useful front-end strategies from mid- to large-scale real-life responsive projects.
- “Photography55” with Dan Rubin
A full day of theoretical and practical photography tuition that will start with a review of photo shooting techniques, equipment, troubleshooting photography problems and assessing your kit.
We look forward to finally meeting you at one of the Smashing workshops! If you have any questions or workshop suggestions, please don’t hesistate to contact us and we’ll get back to you right away! (vf)
The authors in this newsletter are: Esther Arends (ea), Melanie Lang (ml), Cosima Mielke (cm), Shavaughn Haack (sh), Kristina Vogt (kv), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).
- 1 https://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://photoshopetiquette.com
- 3 http://lanyrd.com/2013/smashingconf/
- 4 https://twitter.com/search?q=%23smname&f=realtime
- 5 #a1
- 6 #a2
- 7 #a3
- 8 #a4
- 9 #a5
- 10 #a6
- 11 #a7
- 12 #a8
- 13 #a9
- 14 #a10
- 15 #a11
- 16 http://www.carlosdetoro.com/born-en/
- 17 http://www.carlosdetoro.com/born-en/
- 18 http://codepen.io/matthoiland/pen/vHFCk
- 19 http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/
- 20 http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/
- 21 http://codepen.io/matthoiland/pen/vHFCk
- 22 http://www.roblukedesign.com/projects/trunkExperiment/trunk.html
- 23 http://lab.ejci.net/favico.js/
- 24 http://lab.ejci.net/favico.js/
- 25 https://twitter.com/MiroslavMagda
- 26 http://www.lukew.com/ff/entry.asp?1667
- 27 http://ezsend.it
- 28 http://ezsend.it
- 29 http://ezsend.it/
- 30 http://www.typ.io/latest
- 31 http://www.typ.io/latest
- 32 http://typewelike.wirsindsmyk.de/
- 33 http://justmytype.co/
- 34 http://www.dungeonsanddevelopers.com/
- 35 http://www.dungeonsanddevelopers.com/
- 36 http://www.352media.com/
- 37 http://www.352media.com/blog/the-race-to-352-day-2-project-update/
- 38 http://fantasticshoppefronts.tumblr.com/
- 39 http://fantasticshoppefronts.tumblr.com/
- 40 http://adrien-heury.net/designers-checklists/
- 41 http://adrien-heury.net/designers-checklists/
- 42 http://www.adrien-heury.net/
- 43 mailto:firstname.lastname@example.org
- 44 http://www.trendlist.org/
- 45 http://www.trendlist.org/
- 46 http://www.trendlist.org/
- 47 https://shop.smashingmagazine.com/workshops/?pk_campaign=Editorial-Newsletter-19-09-2013&pk_kwd=full-day-workshops
- 48 https://shop.smashingmagazine.com/smashing-workshop-stephen-hay-responsive-design-workflow.html?pk_campaign=Workshops-Mailing-17-09-2013&pk_kwd=stephen-hay
- 49 https://shop.smashingmagazine.com/smashing-workshop-shipping-your-product-berlin.html?pk_campaign=Workshops-Mailing-17-09-2013&pk_kwd=rachel-andrew
- 50 https://shop.smashingmagazine.com/smashing-workshop-sketching-interfaces.html?pk_campaign=Workshops-Mailing-17-09-2013&pk_kwd=eva-lotta-lamm
- 51 https://shop.smashingmagazine.com/workshops/#Berlin
- 52 https://shop.smashingmagazine.com/workshops/
- 53 https://shop.smashingmagazine.com/smashing-workshop-the-front-end-warrior-workshop-london.html?pk_campaign=Workshops-Mailing-17-09-2013&pk_kwd=addy-osmani
- 54 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-london.html?pk_campaign=Workshops-Mailing-17-09-2013&pk_kwd=vitaly-friedman
- 55 https://shop.smashingmagazine.com/smashing-workshop-seeing-the-shot.html?pk_campaign=Workshops-Mailing-17-09-2013&pk_kwd=dan-rubin
- 56 https://shop.smashingmagazine.com/workshops/#London
Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.