Issue #82 | Tuesday, April 16th 2013 | 139,261 subscribers | Previous issues
Dear Friends,
You probably have been there at some point. You end up with dozens of open tabs in your browser, some work-related, others not so much — and usually distributed across a few browser windows, too. Yet suddenly something happens that profoundly changes the course of action of that day, and easily sucks you out of your creative flow. What happens? One of the numerous tabs starts playing music automatically — courtesy of the designer of the website.
Especially if you work with a quite distinctive (and loud) music playing in the background, this can be extremely annoying and disturbing. Yet if you have lots of tabs, you have to muddle through each of them and search for any indication that music is being played. Wouldn't it be nice to have some sort of a detector (or blocker) for auto play? What if browsers integrated some sort of the which tab is playing audio-feature, with an icon indicating audio displayed right next to the favicon in the tab (see the image above)? Wouldn't it make a great UI feature? It would definitely make searching for the pundit much easier!
But since the feature isn't available in most browsers yet, in the meantime you might be well served with the article How To Disable Annoying Autoplay in Chrome, Firefox and Safari which provides quick tips on how to disable auto play in all major browsers. Hopefully, this will help you keep unwanted interruptions away from your workflow.
Have a truly productive (and hopefully exciting) week!
— Vitaly
Table of Contents
01. TimeJump: Deep Linking For Audio And Video
02. Coffee For Your Ears
03. Getting The UI Flow Out Of Your Brain
04. Forecast.io: Your Weather Service In Your Browser
05. Exploring Undiscovered Young Talent
06. Turn Illustrator Graphics Into Code
07. Slide In... As You Scroll Down
08. Diving Into iOS Development — Workshop With Johannes Fahrenkrug
09. Free Artistic Wallpapers By Nathan Yoder
10. Take Me To A Sunny Sunday
11. Smashing Highlights (From Archives)
12. New on Smashing Job Board
13. Recent Articles On Smashing Magazine
1. TimeJump: Deep Linking For Audio And Video
If your website features lots of audio fragments, videos or podcasts, you may have wished you could provide a simple link that would send your visitors directly to a specific part of the audio or video file rather than having to ask them to jump forward to a specific timeframe. There are some workarounds for major platforms, but what about a more universal solution?
TimeJump, by Chris Coyier and the creative minds from Paravel, adds deep linking capabilities to HTML5 audio and video podcasts. Essentially, the library reads out the time parameter in your URL and starts playing the file at the specified timeframe. The syntax is straightforward: e.g. http://pdca.st/first-episode/#t=1:23:45. Easy. Another little design problem solved even before you thought of considering it for your next project. (vf)
2. Coffee For Your Ears
Try to remember these two situations: In the first, you were in your office working on a complicated problem. You finished after a few hours, but you just knew you hadn't done your best work. In the other situation, you were doing some work over the weekend, and you decided to get it all done in the morning while having a wake-up beverage at your favorite café. Despite all the distractions, you finished in record time.
Image credit: Derrick Collins.
According to the folks at Coffivity, the café has just the right amount of noise and movement to inspire creativity. So Justin Kausler, Nicole Horton and ACe Callwood set up a little website to help you out at work. It pipes café sounds into your headphones, which you can mix with your music. Try it out and prove them wrong. I couldn't. (jc)
3. Getting The UI Flow Out Of Your Brain
If you've designed a website, app or software product, you've certainly spent some time tweaking the interactions the user will have with your product — the UI flow. UI flows are as important to good interfaces as individual screens are. But how do you communicate these flows? How do you visualize the interactions? You might use storyboards, flowcharts, or mindmapping software. Curious to try out a new technique? Then check out Ryan Singer's shorthand for designing UI flows.
Singer's sketch demonstrates each state of the flow like a coin with two sides: what the user sees, and what they do. An arrow connects the user's action to a new screen with another action. With some interesting examples, Ryan demonstrates how this shorthand can illustrate a lot of user behavior. Sure, most diagrams might end up in the garbage — as Ryan also notes. Yet a good sketch can help you to get the flow out of your brain and communicate your work properly along the way. (ea)
Advertisement
4. Forecast.io: Your Weather Service In Your Browser
When you have nothing to talk about, talk about the weather. Forecast.io is a friendly online weather service that might save your next awkward small talk situation. Unlike other services, it's pretty comprehensive but not cluttered. The map (with global and local views) shows rain animation for your location and all over the world. You can easily navigate to other locations by dragging the pin.
Furthermore, the service presents minute-by-minute forecasts for your exact location. Instead of simply giving an icon or a single word, the tool generates text summaries that consider usual and unusual behavior in your area. You can choose between Celsius and Fahrenheit. You can also use the time machine feature and view weather observations/predictions for the past and the future.
Forecast is powered by 16 data sources, which are aggregated together statistically to provide the most accurate forecast possible for a given location. It also provides a custom-developed API that is freely available for developers to use, e.g. to integrate weather in your own app or to help users make some UI flow decisions based on the current weather. (ml)
5. Exploring Undiscovered Young Talent
Isn't it always exciting to work with passionate, creative minds who have lots of ideas and are not yet discouraged by the (sometimes) harsh reality of unfair deadlines and political decision-making? Undercoat celebrates the most beautiful, inspiring and innovative content produced by students. It specifically features the artwork of young newcomers to the industry who are coming out of universities, art schools and design schools — working their way towards a career in a creative field.
The archive encompasses student work from designers all around the world, categorized by institute and also searchable. Most original designs are featured in a regular (quarterly) Overcoat Magazine, with large feature interviews with artists, discussing their design thinking and, of course, their work. A great source for inspiration and yet undiscovered talent. (vf)
6. Turn Illustrator Graphics Into Code
Turning your Illustrator graphics directly into code can simplify your coding work a lot. With Drawscript, Tom Krcha has released an extension for Illustrator that generates code from vector shapes in real time. Drawscript supports OBJ-C, C++, JavaScript, Processing, ActionScript 3, JSON and Raw Bezier Points — and as such it is great for user interfaces or creating vector assets for gaming.
Since it transforms your graphic into code the moment you draw it, Drawscript might also come in handy when learning or even teaching creative coding. You can install the free extension via the Adobe Extension Manager. The project is currently available in its third beta version. Once the final version is released, it will be open-sourced. (cm)
Advertisement
7. Slide In... As You Scroll Down
Subtleties matter, and especially in design, a little attention to transitions in interfaces can go a long way, especially to introduce small kindness (as Aarron Walter puts it) into your UIs — little niceties that embrace and define your personality and make the interface just a tiny bit more pleasant to use. For example, if your website provides a list of items in an overview, or loads update on the fly, what about allowing new modules of content to softly slide up into place as the user swipes down?
In the article Slide In (As You Scroll Down) Boxes, Chris Coyier explains a simple technique for creating this small kindness using jQuery. Make sure to read the comments on the article as well: they feature other solutions and links to forks and extensions of the script. (vf)
8. Diving Into iOS Development — Workshop With Johannes Fahrenkrug
Before we launched a series of Smashing Workshops a couple of months ago, we approached the selection of workshop coaches very thoroughly, very much like we do it with our editorial work. We care about quality and we care about delivering value to our audience. That's why we are honored to welcome Brad Frost (sold out), Andy Clarke and now also Johannes Fahrenkrug to our hometown Freiburg, Germany, to host a full-day workshop.
Johannes has been developing on Apple's platforms since 2007. He has co-authored the book "Objective-C Fundamentals" and actively contributes to the open-source community. Through lots of practical hands-on examples, Johannes will help you master the steep learning curve of the "cryptic" Objective-C programming language and make you feel right at home with the tools, the language, the frameworks and the concepts that you need for building iOS apps. The workshop will be held on May 21st 2013. The number of seats is limited, so make sure to grab your ticket now!
PS: We also would love to welcome you in our hometown for our upcoming Smashing Meetup on Responsive Design on April 29th, too — so if you happen to be in the city, let's grab a beer or two! (vf)
9. Free Artistic Wallpapers By Nathan Yoder
Every artist and designer needs a personality — a unique signature that is prevalent in their work, that makes it recognizable and distinguishable from the crowd. Whenever you stumble upon Nathan Yoder's work, you'll notice his signature and his unique visual and typographic style written all over it.
In fact, Nathan provides a series of beautiful wallpapers in various resolutions for desktop and mobile. Each wallpaper is an artwork of its own, and they are definitely a nice accessory for your working environment. What about you releasing a set of nice freebies or goodies for your visitors? They would surely appreciate it. (vf)
Advertisement
10. Take Me To A Sunny Sunday
Your work week is half over, the weekend lies ahead of you, but you feel stuck in your city. The thought of staying at home is suffocating, and your heart is shouting out, "I want to get away!" Most often, we don't. What stops us? It could be lack of money — but definitely not always. Maybe, quite often, it's just comfort?
So, what's uncomfortable about getting away? Arranging your getaway, for example. You start browsing the Web for flights and you see so many offers, but in the end you can't seem to find what you're looking for. You are frustrated and reject the idea.
Don't be disheartened. There comes hope for your much longed-for sunny getaway: Escape Flight, a clever one-stop travel agent that wants to help you escape without the hassle. The free service works with an algorithm that does the thinking for you. It considers cost, travel time, activities and the weather, and filters the results to give you only the best options: direct flights, Friday to Sunday, no more than three hours away. The service currently only lets people from London escape. Adding more cities is in the works, so let's hope that yours will be added soon as well! Or perhaps that's a nice idea to work on for your local community on a lazy weekend? (ea)
11. Smashing Highlights (From Archives)
-
"But The Client Wants IE 6 Support!"
We got ourselves into this. We are the ones who caused this problem for our industry. We are the ones giving ourselves this trouble and making our profession less creative and enjoyable than it could be. It's entirely our fault and no one else's.
-
Five and a Half Habits of Highly Effective Designers
We humans love theories. Yet as a wise person once said, "In theory, theory and practice are the same. In practice, they are not." This article is about practice. It's about five and a half habits which I've observed first-hand in the complicated, non-theoretical, absolutely real world. If practice is your thing, keep reading.
-
Exporting From Photoshop
It's probably the least interesting part of designing software, usually entailing hours of grinding. Saving images to multiple scales — as required by iOS and other platforms — adds complication to the process. But there are ways to streamline or automate the exporting process.
12. New on Smashing Job Board
Here are the job openings published recently at our very own Smashing Job Board:
-
Front End Web Designer at Information Management Services, INC. (Beltsville, MD)
We are currently seeking a full-time, entry level, creative front end web designer to collaborate with IMS staff and clients to support their public-facing websites and collaborative research sites. Design and layout websites using current design techniques with special emphasis on usability and accessibility.
-
Front End/UI Developer at Publishers Clearing House (Port Washington, NY)
Publishers Clearing House (PCH), headquartered in Port Washington, NY is a multi-channel direct marketer of value-based merchandise, magazines and promotional offers and a leading provider of digital "play and win" entertainment.
-
Website/Graphic Design at QScend Technologies, Inc. (Waterbury, CT)
We seek a professional, experienced graphic designer with 3+ years experience in print and website design for a full-time position in Waterbury, CT. The individual filling this position should be independent and be able to complete work quickly and efficiently.
13. Recent Articles On Smashing Magazine
