Dear Friends,
Randomness is powerful. In times when everything seems to be like everything else, the best strategy to avoid generic solutions is to avoiding generic sources of inspiration. Instead of looking at similar websites or exploring remotely connected designs or art posters, what if we embraced randomness instead?
Andy Clarke's brand new "Hardboiled Web Design" uses the "detectives" theme throughout the book to provide a few smart front-end techniques. The book is being dispatched this very moment, by the way. Just sayin'!
Pick a random antique book from a library and start exploring typography. Visit a random Wikipedia article and just follow your curiosity: from a historic article to a map of a country to map design to data visualization. Look around you at the wallpapers, tiles, carpets, signage or the shape of pencils and chairs and look into ways of synthesizing all of these ideas creatively. Avoid frameworks. Avoid Photoshop. Avoid CMS. Avoid design patterns. Just draw and sketch and design and explore.
But how do you apply the idea to your creative project then? Well, pick a theme and design an experience around it. Perhaps retrofuturism could work as a theme, or geometric shapes, or zooming experience or floating cards. That's a way to create unique, expressive and distinctive experiences that users might remember way better than another Bootstrap website. Explore randomness, and make it a ritual to dedicate 15 mins every other Sunday to something purely random: not only will you learn a lot, but will explore things that you might never have stumbled otherwise.
Keep exploring!
Vitaly (@smashingmag)
Table of Contents
1. Served! Butler, a Free Font Family
You can't have enough free quality fonts, can you? Fabian De Smet has released Butler, a free serif typeface with a conservative personality, by a mix between both Dala Floda and the Bodoni family. According to the designer, the main goal for the typeface was to bring a bit of modernism to serif fonts by working on the curves of classical serif fonts and adding an extra stencil family.
The result: a beautiful family with 334 characters, 7 regular weights and 7 stencil weights, text figures, ligatures and fractions, well suited for a variety of languages, too. A good choice for type in large sizes, posters and books. Downloaded! (vf)
2. Remarkably Precise Image Cropping With JavaScript
Content-aware image cropping. Something that is best done manually? Well, not necessarily. A remarkably precise image cropping algorithm comes from Jonas Wanger: smartcrop.js. Based on simple image processing rules, smartcrop.js generates crops of your images that keep the details in the center.
Browser support is nearly gapless (only IE 8 isn't supported) and it takes smartcrop.js less than 100 ms to find a square crop of a 640x427px picture. But please keep in mind: it's fine to run the library on one picture, but running it on page load for an entire gallery will harm performance. For a Node implementation of smartcrop.js make sure to also check out Jon Stuebe's SmartCrop Node. (cm)
3. Advent Calendars for Web Designers
Here we go, it's this time of the year again! Not only of cheerful holidays but also of annual advent calendars to web designers. As always, 24ways features 24 ways to impress your friends with front-end and UX, while Performance calendar covers practical techniques for faster and more resilient websites.
Furthermore, the Content Strategy Advent Calendar shares advice and tips on all things content related, Sysadvent provides great articles about systems administration topics written by sysadmins. If you prefer to read in German or French, Webkrauts-Adventskalender 2015 and 24 jours de web have a few things worth checking out as well. Not enough? Christmas Experiments features digital artists who produce something unique and creative to celebrate the festivities. Shape Christmas is similar but is themed around shapes, experiment with one shape a day until Christmas. Want to create your own advent calendar? Here you, it's still not too late: 25daysof.io to the rescue! Happy holidays, everyone! (vf)
Advertisement
4. On The Hunt For Color
Colors take us on an associative journey: cool blues might remind us of a windy day by the sea, warm tones of an autumn forest, a soft color palette of the candy store from our childhood. Whatever it is, colors have something fascinating to them. If you are hunting for color inspiration or just want to indulge in their beauty, then Color Hunt is for you.
Curated by Gal Shir, Color Hunt is a community for sharing color palettes. You can browse and like existing palettes or submit your own. A nice add-on: the accompanying Chrome extension transforms every new tab you open into an inspiring color palette. (cm)
5. Bullettproofing Slider Interfaces
Slider interfaces seem intuitive, but out in the wild they can turn out to be quite problematic. In fact, a recent e-commerce usability study conducted by the Baymard Institute found that sliders not seldomly end up as a case of false simplicity: it seems simple, but when users try to interact with the interface it breaks apart and results in a clumsy experience. But that doesn't mean we should avoid sliders at all cost. If we stick to just a handful of implementation details, we can make them work, for good.
To bulletproof your sliders even further, you can also turn to an accessible slider script such as Brian McAllister's fd-slider. It conforms to the WAI-ARIA defined role of "slider" and can also be used as an HTML5 input range polyfill solution. Besides that, the slider is keyboard accessible and designed for touch, too. (cm)
6. Understanding JavaScript Promises
Whether you are writing advanced JavaScript or you've accidentally stumbled upon a piece of code — chances are high that you might have run into JavaScript promises, a relatively new concept which defines many of the sophisticated Web technologies today, like Service Workers or Node.js.
Yet understanding promises isn't as straightforward as one might assume. JavaScript is single threaded, and the language semantics are inherently synchronous and sequential. It means that two bits of script cannot run at the same time, they have to run one after another. So if you want to run scripts asynchronously, you had to use events and callbacks in the past — with promises, you can do the same thing with a much simpler interface, and way faster. How?
Well, How Do Promises Work? goes into detail explaining promises with illustrations and examples, while Jake Archibald's article provides practical examples, and Nicolás Bevacqua's Promisees visualizes JavaScript promises in slow-motion. It might take a while to get it, but once you do, writing JavaScript will be much easier! (vf)
Advertisement
7. Font Usage Across The Web
Arial, Verdana and Helvetica Neue are some of the usual subjects when it comes to choosing fonts for a website. But what exactly does font usage across the web look like? Which fonts are trending, which ones are a more unique choice? If you want to assess how widespread a font is before you implement it into your design, then FontReach is for you.
Brought to life by Jesse Chase and Jason Chen, FontReach lets you search for a font and shows you its popularity rank along with a list of websites that have it in their font stacks. The results are based on data from the top million sites on the web. Impressive. (cm)
8. Calendars For Creatives
Do you rely on digital calendars or do you prefer the tactile experience of having a tear-off calendar on your desk or a pocket calendar to jot down your deadlines and meetings? If you belong to the later and are still looking for a paper companion to track your time in 2016, well, Designer in Action has put together a fine selection of calendars that are bound to put a smile on your face. The site is in German, but nevertheless very inspiring for everyone with a sweet spot for well-made paper products.
Among the calendars are ones that celebrate minimalistic typography, some provoke our thoughts or wake our curiosity with photography, others impress with beautiful details and their choice of materials. A collection that will certainly wake your fancy for paper. (cm)
9. Letter Collections: A Handlettered Postcard Project
We send and receive a plethora of emails and text messages every day. But when was the last time you took the time to send someone a handwritten postcard? A message that doesn't get lost in the digital clutter of overflowing inboxes and social media streams? Something that, well, stays?
Martina Flor, a Berlin-based letterer and designer, shows her appreciation for the people she loves, likes, misses, those who inspire her and those whom she always wanted to meet with a handwritten postcard. Her goal is to send 100 postcards in total, and, what makes the plan even more special, she designs each one of them herself, with unique handlettering that tells a story tailored to the recipient. Luckily for all of us who aren't on her mailing list, she shares her works online in the Letter Collections. From there we can even send postcards (although digitally, of course) with a custom message. A beautiful tribute to the written word and to taking the time to show people what they mean to us. (cm)
Advertisement
10. Upcoming Smashing Workshops
With so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That's exactly what our front-end and RWD workshops are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.
Full-Day Workshops at SmashingConf Oxford
Full-Day Workshops at SmashingConf San Francisco
Online Classes
But what about in-house training instead? We can improve your eCommerce checkout and conversion rates right on spot — or performance, accessibility or UX. Feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Don't worry about the cost — we'll find a fair price for sure. Get in touch — it's that easy! (vf)
11. Smashing Highlights
-
The Good, The Bad And The Great Examples Of Web Typography
Choosing typefaces is an integral part of every web design project. With thousands of typefaces available from hosting services such as Typekit, as well an ever-improving collection of free fonts available, there has never been a better time to be a typography-obsessed web designer.b animation is coming out that might just unite both camps.
-
Absolute Horizontal And Vertical Centering In CSS
We've all seen margin: 0 auto; for horizontal centering, but margin: auto; has refused to work for vertical centering… until now! But actually absolute centering only requires a declared height and these styles:
-
Design Principles: Visual Weight And Direction
Every element on a web page exerts a visual force that attracts the eye of the viewer. The greater the force, the more the eye is attracted. These forces also appear to act on other elements, imparting a visual direction to their potential movement and suggesting where you should look next.
12. New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
-
Digital Designer at Population Reference Bureau (Washington, DC)
"The digital designer is a well-rounded expert in design for multiple types of digital media. S/he is excited about keeping up with current design trends and developing innovative visual storytelling approaches."
-
Online Instructor at Envato Tuts+ (Melbourne, Australia)
"We're looking for online instructors to teach video-based courses or write how-to tutorials at Tuts+. Get paid a competitive rate to share your knowledge and experience. "
-
UX / UI-Designer at Social Fashion Company (Cologne, Germany)
"You want to make a difference, change the status quo? So do we! You have high quality standards and you are dedicated to support us in continuously improving our online shop? Then we are looking for you to join our team at our Cologne headquarters as a full-time UX / UI Designer!"
13. Recent Articles On Smashing Magazine
No comments:
Post a Comment