Issue #70 | Tuesday, October 23rd 2012 | 122,884 subscribers | Previous issues
Dear Friends,
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 skeuomorphism; 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 Era, 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.
Sincerely yours,
The Smashing Editorial Team
Table of Contents
01. Hackers, Are You Ready For A Challenge?
02. Cut&Slice Free Photoshop Plugin
03. Faster And Better PHP Debugging
04. Free Endless Icons
05. 3D Interactive Content Publishing Tool
06. Web Designers, Listen!
07. Everything You Can Imagine On A Chart
08. People Sharing Things That Matter
09. Better Web Forms On Mobile
10. Smashing Highlights (From Archives)
11. New on Smashing Job Board
12. Recent Articles on Smashing Magazine
1. Hackers, Are You Ready For A Challenge?
HackerRank 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 ACM 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)
2. Cut&Slice Free Photoshop Plugin
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, Cut&Slice Me 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)
3. Faster And Better PHP Debugging
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 Error, 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)
Advertisement
4. Free Endless Icons
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 Icons, 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 Iconmonstr 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)
5. 3D Interactive Content Publishing Tool
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: Sketchfab 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)
6. Web Designers, Listen!
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 Show. Joined by renowned guests, they answer questions that were submitted by listeners.
JavaScript enthusiasts get their regular dose of news from Peter Cooper's and Jason Seifer's The JavaScript Show that features the latest discussions in the community. If you're interested in other podcasts, then tune in to the JavaScript Jabber and The Breakpoint as well, where experts talk about various developer tools as well as time-saving techniques. (cm)
Advertisement
7. Everything You Can Imagine On A Chart
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 Lab, 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)
8. People Sharing Things That Matter
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 Storylane, 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)
9. Better Web Forms On Mobile
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.
TypeForm 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)
Advertisement
10. Smashing Highlights (From Archives)
-
Web Form Design Patterns: Sign-Up Forms
If you want to maximize the revenue of your service, you need to maximize completion rates of your web forms. We present findings of our survey of current web form design patterns — the results of an analysis of 100 popular websites where Web forms (should) matter.
-
How To Market Your Mobile Application
App Store is a competitive environment. Against more than 140,000 apps, all screaming for attention, how do you make sure your app gets its time in the spotlight? What does it take to get good media coverage? How do you get people to talk about your app—and, ideally, how do you get them to buy it and show it to their friends?
-
All About Unicode, UTF8 & Character Sets
Find out about the history of characters, character sets, Unicode and UTF-8, and why question marks and odd accented characters sometimes show up in databases and text files.
11. New on Smashing Job Board
Here are the job openings published recently at our very own Smashing Job Board:
-
Junior Web Developer at SDG (Los Angeles, CA)
We are a top tier web design and development group in West Los Angeles (405 at Olympic) focused on building the best e-commerce applications and websites. We're heavily focused on the Magento Enterprise and Expression Engine platforms.
-
Web Master at Metropolitan College of NY (New York, New York)
MCNY seeks an experienced Web Master to manage the College's multi-faceted website. The Web Master will: Manage the production process, backups, and security. Assist content providers and departments with updating, enhancing and modifying information. Maintain standards for design, navigation and browser compatibility. Manage and update user blogs; serve as the department liaison for maintaining current and accurate information. Work closely with the technology department to ensure effective access to interdependent systems from within the website(s). Maintain SEO keywords, meta tags, xml and others throughout the site. Apply analytics code and monitor performance metrics, e.g., traffic and sources. The Web Master will take a leading role with redesign and CMS implementation.
-
Web Designer at HomeAway (Austin, TX)
Qualifications: HTML/CSS development skills; Experience in landing page design, with examples; Organized, self-directed, efficient and able to manage multiple and complex projects in a timely manner; Ability to design and build landing pages; Experience in creating a display advertising creative library; Flash design experience a plus; Ability to understand customer needs, motivations, and behaviors, and translate them into actionable designs; Experience designing for mobile devices is a huge plus; CMS system integration/custom template design experience; Cross browser compatibility testing and optimization.
12. Recent Articles on Smashing Magazine
