Smashing Newsletter #174: Smashing Redesign, Eye Candy and SVG Pie Charts

The beginning of a new year is usually calm and somewhat unspectacular. Well, not in the Smashing Universe! Issue #174 • Tuesday, January 24th 2017 • 234,068 readers • [View in the browser] [Smashing Email Newsletter] Dear Friends, The beginning of a new year is usually calm and somewhat unspectacular. Well, not in the Smashing Universe. From the very first days of January, we've been working on the final, finishing touches to our upcoming redesign. Still, we aren't quite there yet. Usability matters, and so we go through iterations of design and user feedback to get everything right. [Pricing Plans Design Checklist] Especially with the upcoming Smashing Membership, we want to set up a package that you'll find useful and relevant — with a price accessible to everybody. On our way there, we've rediscovered a few things that potentially make any eCommerce experience better. As one of the results, we've set up a [Pricing Plans Design Checklist], with 22 things you might want to keep in mind when designing pricing pages (also available as a [public gist]a). A write-up on our learnings will be coming up after Smashing Magazine's website relaunch. We're expecting to start with a slow roll-out of the public beta version by early February, and maybe alongside the launch of [SmashingConf NYC 2017 tickets sale] (Jan 31, 10 A.M. EST). Still, please [sign up for Usability Testing Panel] if you have a couple of mins to spare — we'd love to get your constructive feedback! Thanks, and stay tuned! – Vitaly (@smashingmag) --------------------------------------------------------------- Table of Contents 1. [The Beauty Of Simplicity] 2. [A Sneak-Peek At The New Smashing Magazine Redesign] 3. [Movie Poster Design At Its Best] 4. [Fighting For The Users] 5. [Creating Color Palettes The Easy Way] 6. [A Small Plugin For Image Zoom Experiences] 7. [A Curated List Of Creative Front-End Case Studies] 8. [A Simple Pie Chart In SVG] 9. [Upcoming Smashing Workshops] 10. [New On Smashing Job Board] 11. [Smashing Highlights (From Our Archives)] 12. [Recent Articles On Smashing Magazine] --------------------------------------------------------------- 1. The Beauty Of Simplicity Sometimes we need some fresh visual inspiration to fuel our ideas. The next time you find yourself craving for some, be sure to stop by at [Search System]. The tumblog is full of design goodness that shines with simplicity and reminds us that sometimes less is more. [The Beauty Of Simplicity] What you'll get is a potpourri of stellar product, identity and print design, but also architecture. Whether it's something mundane such as the sole of a shoe, a toothbrush, or an alkaline battery, or even something as sophisticated as the interior design of an art gallery, Search System doesn't make a difference. Whatever combines beauty and simplicity can be found over there. Truly refreshing for the eyes and the mind. (cm) --------------------------------------------------------------- 2. A Sneak-Peek At The New Smashing Magazine Redesign You've already heard: Smashing Magazine will look quite different soon (redesign alert!). The starting point for the redesign was kicked off by [Andrew Clarke], while [Daniel Mall] took a more bold and playful twist on the design direction. Eventually, [Sara Soueidan] joined in as a front-end dev and both Sara and [Marko Dugonjić] helped refine the existing direction of the design. [Ricardo Gimenes] created lovely illustrations to breathe some wit into the design (watch out for cats!). [A Sneak-Peek At The New Smashing Magazine Redesign] While Sara announced to write about the techniques she used in more detail in a separate row of articles, her [case study] shares her role in the process and how her vision to better reflect the idea of Smashing Magazine was put into practice, i.e. "a magazine by the community, for the community". You can gain insights into the nitty gritty details, too, of course, especially in which Sara talks about her favorite thing to design, and handling the tricky task to master navigation. A tasty appetizer for what's to come. Watch out for February! (cm) --------------------------------------------------------------- Our sponsor: Building Beautiful Websites In No Time Whether you are designing sites for clients or for an agency or company, you can build some beautiful websites with Webydo in no time. Hosting, a built-in CMS, and even client billing are all included on their platform. [Start a free trial now →] [Building Beautiful Websites In No Time] --------------------------------------------------------------- 3. Movie Poster Design At Its Best You're a film fan? Great, then you'll love this find. And even if you're not that much into movies, we're almost certain that you'll enjoy it, too: [Movie Poster Of The Day]. The showcase presents a new movie poster each day, but not such much the ones that are part of collective memory, it's rather about the unusual finds — things like a Danish Citizen Kane Poster from 1946, for example. An inspiring and surprising stroll through movie poster design from all over the world and through all decades. [Movie Poster Of The Day] Speaking of movie posters, 2016 was a good year, too. Adrian Curry, design director at Zeitgeist Films, recently shared his [top ten posters from smaller, independent films] that were released last year. Films that took a lot more creative risk in designing their posters as their big budget counterparts. Courage that has paid off. (cm) --------------------------------------------------------------- 4. Fighting For The Users UX designers do outstanding work to craft the best experiences for their users. It's a craft that requires experience, empathy, and the will to adapt to an ever-evolving tech landscape. However, if you're just about to get started in the field, all of this can feel quite daunting. So why not learn from the pros and find out how to better stand up for your users? [User Defenders] With the podcast [User Defenders], Jason Ogle attempts to offer just what you need to stay inspired and enlightened on your UX journey: a look into the mind of leading UX practitioners. What makes them tick? What's their secret to success? There are already 31 episodes available in which experts such as Jeffrey Zeldman, Mat Marquis, Aaron Gustafson, Chris Coyier and Aarron Walter talk about empathy, creativity, design thinking and all other things that help you get better and smarter at what you do. Inspiring! (cm) --------------------------------------------------------------- Our sponsor: GraphicStock Is Giving You 7 Days To Download Anything You Want Most stock image platforms ask you to pay per image or purchase an expensive monthly subscription with download limits. The idea behind [GraphicStock] is different. They grant you access to over 300,000 images with no download limitations and for a low yearly fee of USD 99. There's a free 7-day trial available, and anything that you download during the trial period is yours to keep and use forever. [Happy downloading]! [GraphicStock] --------------------------------------------------------------- 5. Creating Color Palettes The Easy Way "Color is an underrated design tool. When used correctly, it can make a website sing." To help you accomplish just that, [Color Supply] set out to make your color choices easier — by providing an intuitive color picker. The idea is simple yet genius: You pick a main color from a color wheel, and the tool suggests combinations based on that in different tints and shades. For more influence over the result, you decide whether you want the color scheme to be complementary, analogous, triadic, split-complementary or made up of colors that are positioned on the wheel in a square shape. [Color Supply] Finally, to see the color scheme in action, the tool provides a preview of the colors applied to a set of icons as well as of how gradients made up of the scheme will look like. If you like what you see, just copy/paste the hex values and use them in your project right away. By the way, some of the color combinations were put together by selected designers and illustrators that have a knack for making up combinations that work well together. (cm) --------------------------------------------------------------- 6. A Small Plugin For Image Zoom Experiences Images enhance stories, and when it comes to presenting them in the proper light, [Medium's intelligent zoom experience] is a stellar example. You've probably noticed the subtle zoom action on Medium before: Clicking on an image, will start a seamless animation into a full-screen view; to dismiss the image zoom, you only need to click anywhere or just scroll away. A solution that just feels natural. And, well, good news: A little JavaScript plugin, namely [Zoom.js], makes it an easy undertaking to recreate the effect on your own site. [Zoom.js] To make it work, you can use Zoom.js directly as a script — just link the JS and CSS files to your site and add a data-action="zoom" attribute to the images you want to make zoomable. That's already it. Installation via npm is possible, too, by the way. Zoom.js gets by without jQuery or Bootstrap dependencies and works in modern browsers (IE10+). (cm) --------------------------------------------------------------- Our sponsor: Online Masters in Information Design and Strategy [Ad] Learn to drive effective digital communication. --------------------------------------------------------------- 7. A Curated List Of Creative Front-End Case Studies Who doesn't love to sneak a peek behind the curtains to see how fellow developers tackle a project? How they solve problems? What techniques they used to bring their ideas to life and what lessons they learned along the way? Luigi De Rosa, senior front-end developer at digital agency Epic, does. He loves reading technical case studies and, thus, started to curate "[Awesome Case-Study]", a GitHub repository in which he shares case studies that are worth a read. [Awesome Case-Study] Luigi already collected more than 30 case studies on a variety of creative front-end development topics that give insights into building interactive experiences, WebGL experiments, Virtual Reality stories, and much more. If you have something to add to the list, don't hesitate to create a pull request. (cm) --------------------------------------------------------------- 8. A Simple Pie Chart In SVG Creating a pie chart with web technologies only is a quite daunting challenge that either requires mathematical skills or a library. David Gilbertson now proves that it's possible without neither of both. Well, not exactly without any maths at all, but without the need to complicatedly juggle with radii, π, sin, cos, and tan all the time. [A Simple Pie Chart In SVG] After a lot of tinkering, David came up with a solution that fits his needs: [a simple pie chart that is scalable thanks to SVG]. And, well, it's extendable, too — without a lot of extra efforts you can adjust it so that it also shows tooltips or responds to a click or hover event. Clever! (cm) --------------------------------------------------------------- 9. Upcoming Smashing Workshops With so many techniques, tools, style guides, 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 classes are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today. [Smashing Public Workshops] Workshops at SmashingConf San Francisco 2017 - [Scalable Design Systems] with Nathan Curtis (April 3rd) - [Building Performant Websites] with Tim Kadlec (April 3rd) - [Smart Responsive UX Design Patterns] with Vitaly Friedman (April 3rd) - [Hands-On Checkout Optimization Workshop] with Christian Holst (April 6th) - [Advanced SVG Animation] with Sarah Drasner (April 6th) - [Advanced CSS Layouts With Flexbox And CSS Grids] with Rachel Andrew (April 6th) - [Creative Data Visualization Techniques] with Nadieh Bremer (April 6th) - [New Front-End Adventures In Responsive Design] with Vitaly Friedman (April 6th) Our Public Workshops - Reykjavik, Iceland • [New Front-End Adventures in RWD] Ice Web, Jan. 27th, 2017 - Amsterdam, Netherlands • [Smart RWD Patterns] FITC, Feb. 19th, 2017 - Riga, Latvia • [Designing Delightful Responsive eCommerce UX] UX Riga, Feb. 22nd, 2017 - Toronto, Canada • [Smart Responsive Design Patterns] FITC Toronto, Apr. 22nd, 2017 - Sydney, Melbourne, Brisbane — Australia • [Smart Responsive UX Design Patterns] Web Directions, May 4–12, 2017 Or, if you’d like to run an in-house workshop at your office, 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 costs — we’ll find a fair price for sure. Get in touch — it’s that easy! --------------------------------------------------------------- 10. New On Smashing Job Board Here are the recent job openings published on our [Smashing Job Board]: - [Digital Development & Design Specialist] at ReedExhibitions (Norwalk, CT) “We're looking for a web designer/developer who'll be responsible for the day-to-day maintenance of a portfolio of tradeshow and conference websites, and more.” - [Senior Frontend Engineer] at VONQ (Amsterdam or Rotterdam, The Netherlands) “We're looking for an experienced front-end developer ready to build a solid product that dazzles users. Get the chance to work in a team that open sources core tools and applies best practices.” - [Senior UX Designer] at Centralway Numbrs AG (Zurich, Switzerland) “We're looking for a Senior UX Designer with at least three years UX work experience who will contribute in strengthening our position in the industry.” --------------------------------------------------------------- 11. Smashing Highlights (From Our Archives) - [Combining UX Design And Psychology To Change User Behavior] Have you ever wondered why your users do not interact with your product the way you hope? Persuading people to perform a particular action, like signing up or buying a product, is a challenge in most industries, especially when you want that action to be performed repeatedly. - [Lessons Learned Building A Productized Service] Brian Casel shares five key lessons he learned from making the transition from doing client work to a products business. He'll share the story of how he iterated and improved the business because of them and show you that you can still find success by doing a lot of things wrong. - [Dealing With Workaholism On Web Teams] Workaholism is often confused with hard work. Some people who work on the web seem not only to disregard its dangers, but to actively promote it. They see it as a badge of honor—but is it really? On the contrary, it's a serious issue that can damage web teams. --------------------------------------------------------------- 12. Recent Articles On Smashing Magazine Design Articles - [More Than Just Pretty: How Imagery Drives UX] - [Designing Better App Icons] - [Designing A Responsive Music Player In Sketch (Part 2)] Coding & Mobile Articles - [Is App Indexing For Google Worth The Effort?] - [Internationalizing React Apps] - [Styled-Components: Enforcing Best Practices In Component-Based Systems] Inspiration, Freebies, Misc. - [Web Development Reading List #166: Efficient Docker, CSP Learnings, And JavaScript's Global Object] - [Web Development Reading List #165: Starting The New Year With Browser News, Container Architecture, And React "Aha" Moments] - [Freebie: Clothing Icons (40 Icons, 9 Styles, AI, EPS, SVG, PNG)] --------------------------------------------------------------- Sent to truly [smashing] readers via [Mailchimp]. We sincerely appreciate your kind support. You rock. Email: newsletter@smashingmagazine.com [Follow us on Twitter] • [Join us on Facebook] [Smashing Freddie: Sent via Mailchimp.] The authors are: Cosima Mielke (cm), Iris LjeÅ¡njanin (il), Vitaly Friedman (vf), Markus Seyfferth (ms), Christiane Rosenberger (research), Elja Friedman (tools). [unsubscribe] • [update preferences] • [view in your browser]