Smashing Newsletter: Issue #70
We’ve all been there: “Why don’t we add a nice drop shadow to make the object a bit more realistic?” or “Perhaps a glass texture to make the design feel a bit more polished and valuable?” Our user interfaces often embed the qualities and materials from our offline life, such as wood, leather, glass, on/off-switches or even knobs. We may use these elements to make the design a bit more authentic, but by doing this, aren’t we turning the design into something superficial instead?
And it’s not really about skeuomorphism3; it’s about the purpose and meaning of our design decisions. We are not only designers, but also storytellers—we tell our own stories or the stories of our clients to the users. To tell a story properly, we have to discover it, understand it, craft it and present it meaningfully and consistently—adding real-world metaphors wherever they are appropriate.
In his tumblog post, The Flat Design Era4, Allan Grinshtein appeals to designers to change their mindset and stop adapting real-world metaphors for their products. Instead, we all could focus on creating honest, digital interfaces. After all, each design project deserves its own individual decision. This is a good reminder for us all to think twice before we embed wood or glass into our projects next time.
The Smashing Editorial Team
Table of Contents
01. Hackers, Are You Ready For A Challenge?5
02. CutandSlice Free Photoshop Plugin6
03. Faster And Better PHP Debugging7
04. Free Endless Icons8
05. 3D Interactive Content Publishing Tool9
06. Web Designers, Listen!10
07. Everything You Can Imagine On A Chart11
08. People Sharing Things That Matter12
09. Better Web Forms On Mobile13
HackerRank14 is a new platform that demands a bit more of their users than the ability to post photos and status updates. At HackerRank, coders can build quick hacks, code game bots and collaborate to solve real-world challenges. The site was co-founded by Vivek Ravisankar, a competitive spirit who says he was addicted to sites such as ACM15 back at school. He and his team believe that coders are most interested in solving real-world problems, and therefore aim to have users work out challenges that companies currently deal with, in areas such as machine learning, artificial intelligence and distributed systems.
The degree of difficulty of the existing 10 levels is determined by the number of users who solve a problem. In order to ensure a learning effect, solutions are eventually posted online. The site wants to focus on attracting well-versed coders, not beginners. However, to log in you don’t need to be a scripting genius, but you need to manage to figure out a logic puzzle. Good luck! (ea)
Nobody loves slicing. If you still find yourself working with PSD deliverables that have to be turned into solid HTML and CSS, you probably know how tiring it can be to find your way through the weird PSD mockups. Or if you design for mobile devices, how often did you simply want to export image assets to formats and sizes adjusted for iPhone and Android (Retina display, xhdpi, ldpi, mdpi or hdpi)?
Well, CutandSlice Me18 is a free CS6 Photoshop plugin that saves much of your time and allows you to export your assets to different devices by just naming your layers properly. Essentially, you organize the elements in PSD in groups as if they were objects, add
@ at the end of the layer name you want to export and select how exactly you’d like it to be exported. And if you want the exported asset to be of a particular size, just create a rectangular vector as the first layer and name it
#. You can also export all states in your buttons automatically by just naming them properly. A handy little tool that can save you a lot of hassle! (vf)
Debugging code, be it your own or someone else’s, can be terribly time-consuming. The error messages are often quite ambiguous or not transparent enough, and it takes hours to find the tiny string of code that just doesn’t do what it’s supposed to. Joseph Lenton’s little tool may be just what you need to speed up the process.
With PHP Error20, the appearance of an error triggers a page with a full stack trace, with the erroneous syntax highlighted. To use the tool, just include the library in your project and customize it to meet your requirements and needs. The library allows you to catch Ajax errors, find cases when a class is loaded but doesn’t exist or supress errors. A detailed documentation and setup guide are provided as well. The code is provided on GitHub. (jc)
Perhaps you like collecting stamps, vintage posters or floppy disks. Or maybe you are into type specimens. Or maybe you just like to draw. Finding time to explore your creative potential is both refreshing and necessary, especially if your regular work tends to get quite predictable and mundane over time.
Min Kim loves designing icons and sharing them with everybody for free. On his site, Endless Icons22, he presents his icons—actually over 75 of them so far—for free download. The icons aren’t really related, but they all have his unique personality embedded into them. Every icon can be downloaded as a transparent high-resolution PNG file (614 × 614 pixels). Because the icons are quite abstract, you can use them in various projects—be it for designs, presentations, invitations or anything else. And if you need even more icons, you can use Iconmonstr23 as well, with 876 simple pictograms in large size. So what’s your side project that you love dedicating time to in your spare time? (vf)
Imagine this situation: You spend endless hours modeling and rendering 3D objects and, after all the hard work, you still have to find your way to present these 3D models nicely, without worrying about the different formats that your files are in. Does this sound familiar to you? Well, seems your prayers have been heard: Sketchfab24 makes the overall publishing process easy for you!
Cédric Pinson and Alban Denoyel created this website to facilitate the lives of 3D designers, and they included important features, such as facilities for sharing, embedding, integration with showcases, support for textures, maps, specular, diffuse, transparency and lights, and so on. It supports 25 formats such as Blender, 3DS, ac3d, DirectX and others.
The tool doesn’t require any third-party application installation to work, you just need a WebGL-compatible browser. Once the model is uploaded, the server processes it, and uses WebGL and HTML5 to display it in real-time in the browser. You can share your model and comment on other models submitted to the site — now if that’s not a godsend for 3D designers, what is? (tts)
Podcasts are a great way to stay up to date, get to know some nifty tips and tricks and find answers to burning questions. Since January 2012, Chris Coyier and Dave Rupert have covered front-end Web design, development and UX topics in their weekly ShopTalk Show26. Joined by renowned guests, they answer questions that were submitted by listeners.
How many different varieties of beer exist on this planet? How many ways are there to produce coffee, and how many drinks can you prepare by combining coffee with mixers? If you are interested in these kinds of fun facts and want to see how they can be visualized on a chart, then pay a visit to Pop Chart Lab31, a lab that is going after a science which is quite unconventional. It surely takes many hours of research to figure out the whole lot of all existing rap names from Snoop Dogg to Freekey Zekey, or to create a mixological breakdown of twelve martinis illustrating all ingredients and ratios.
Sounds funky, and who on earth wants to make the effort? Patrick Mulligan and Ben Gibson do. One a book editor and the other a graphic designer, they joined forces to render all human experiences in chart form and they offer them to you as a poster print or on a T-Shirt. A perfect thing to get if you are looking for something which is fancy and unique, but yet affordable. (ea)
Have you ever wanted to go a bit beyond posting mundane pictures of your lunch or your plans for the evening? What about turning your social media message into… stories? What was the happiest moment of your life? What moves you? What life lessons would you tell your 13-year-old self if you could?
With Storylane34, Jonathan Gheller takes social media to a new level. You can go in-depth, become a storyteller and share the things that really matter to you. Of course, just like in other social media channels, you can follow people, discover trending stories or browse interesting stories by category. You can not only “like” stories, but also express your emotions, e.g. that you are moved with the teardrop button, or use the lightbulb to show that you feel inspired.
Do you want to share your story, but don’t know where to start? After registration, the tool provides you with some suggestions to begin with. Giving the Internet an emotional touch can be as easy as this. (cm)
Do you like to fill in Web forms on your mobile device? How often have you found yourself jumping from your phone to a tablet or a laptop to just get through that lengthy checkout process? Especially on our little mobile companions, we still haven’t found a way to make interacting with Web forms at least as bearable as on large resolution views.
TypeForm36 might have found a solution. The designers of the service have decided to reinvent the Web form by making the user focus on one simple step of the form at a time. The service allows you to build, design and use forms for your projects. The forms make full use of available screen width, use beautiful typography, include a progress indicator and work nicely with touch and keyboard. The tool is currently in beta, but it’s definitely worth bookmarking. Now, that’s a great option for public polls, surveys or good ol’ Web forms! (vf)
The authors are: Esther Arends (ea), Jan Constantin (jc), Talita Telma-Stöckle (tts), Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), Clarissa Peterson (proofreading).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://layervault.tumblr.com/post/32267022219/flat-interface-design
- 3 http://sachagreif.com/what-skeuomorphism-is-and-isnt/
- 4 http://layervault.tumblr.com/post/32267022219/flat-interface-design
- 5 #a1
- 6 #a2
- 7 #a3
- 8 #a4
- 9 #a5
- 10 #a6
- 11 #a7
- 12 #a8
- 13 #a9
- 14 https://www.hackerrank.com/
- 16 https://www.hackerrank.com/
- 17 http://www.cutandslice.me/
- 18 http://www.cutandslice.me/
- 19 http://phperror.net/
- 20 http://phperror.net/
- 21 http://www.endlessicons.com/
- 22 http://www.endlessicons.com/
- 23 http://iconmonstr.com/
- 24 https://sketchfab.com/
- 25 https://sketchfab.com/
- 26 http://www.shoptalkshow.com/
- 27 http://www.shoptalkshow.com/
- 30 http://www.youtube.com/watch?v=ktwJ-EDiZoU&feature=youtu.be&noredirect=1
- 31 http://popchartlab.com/collections/prints
- 32 http://popchartlab.com/
- 33 http://www.storylane.com
- 34 http://www.storylane.com
- 35 http://www.typeform.com/
- 36 http://www.typeform.com/