Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #174

This newsletter issue was sent out to 234,068 newsletter subscribers on Tuesday, January 24th 2017. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

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 Checklist2

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 Checklist3, with 22 things you might want to keep in mind when designing pricing pages (also available as a public gist4a). 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 sale5 (Jan 31, 10 A.M. EST). Still, please sign up for Usability Testing Panel6 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 Simplicity7
  2. A Sneak-Peek At The New Smashing Magazine Redesign8
  3. Movie Poster Design At Its Best9
  4. Fighting For The Users10
  5. Creating Color Palettes The Easy Way11
  6. A Small Plugin For Image Zoom Experiences12
  7. A Curated List Of Creative Front-End Case Studies13
  8. A Simple Pie Chart In SVG14
  9. Upcoming Smashing Workshops15
  10. New On Smashing Job Board16
  11. Smashing Highlights (From Our Archives)17
  12. Recent Articles On Smashing Magazine18

191. 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 System20. The tumblog is full of design goodness that shines with simplicity and reminds us that sometimes less is more.

The Beauty Of Simplicity21

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)

222. 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 Clarke23, while Daniel Mall24 took a more bold and playful twist on the design direction. Eventually, Sara Soueidan25 joined in as a front-end dev and both Sara and Marko Dugonjić26 helped refine the existing direction of the design. Ricardo Gimenes27 created lovely illustrations to breathe some wit into the design (watch out for cats!).

A Sneak-Peek At The New Smashing Magazine Redesign28

While Sara announced to write about the techniques she used in more detail in a separate row of articles, her case study29 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)

303. 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 Day31. 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 Day32

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 films33 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)

344. 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 Defenders35

With the podcast User Defenders36, 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)

375. 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 Supply38 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 Supply39

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)

406. 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 experience41 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.js42, makes it an easy undertaking to recreate the effect on your own site.

Zoom.js43

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)

447. 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-Study45“, a GitHub repository in which he shares case studies that are worth a read.

Awesome Case-Study46

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)

478. 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 SVG48

After a lot of tinkering, David came up with a solution that fits his needs: a simple pie chart that is scalable thanks to SVG49. 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)

509. 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 Workshops51

Workshops at SmashingConf San Francisco 2017

Our Public Workshops

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.com65 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!</p

6610. New On Smashing Job Board

Here are the recent job openings published on our Smashing Job Board67:

  • Digital Development & Design Specialist68 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 Engineer69 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 Designer70 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.”

7111. Smashing Highlights (From Our Archives)

  • Combining UX Design And Psychology To Change User Behavior72
    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 Service73
    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 Teams74
    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.

7512. Recent Articles On Smashing Magazine

Design Articles

Coding & Mobile Articles

Inspiration, Freebies, Misc.

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 https://twitter.com/smashingmag/status/823451946749136896
  3. 3 https://twitter.com/smashingmag/status/823451946749136896
  4. 4 https://gist.github.com/vitalyfriedman/a79d7b72860fbf8d3a12c3aa24af7891
  5. 5 #
  6. 6 https://www.smashingmagazine.com/smashing-usability-testing-panel/
  7. 7 #a1
  8. 8 #a2
  9. 9 #a3
  10. 10 #a4
  11. 11 #a5
  12. 12 #a6
  13. 13 #a7
  14. 14 #a8
  15. 15 #a9
  16. 16 #a10
  17. 17 #a12
  18. 18 #a12
  19. 19 #
  20. 20 http://searchsystem.co/
  21. 21 http://searchsystem.co/
  22. 22 #
  23. 23 https://twitter.com/malarkey
  24. 24 https://twitter.com/danmall
  25. 25 https://twitter.com/SaraSoueidan
  26. 26 https://twitter.com/markodugonjic
  27. 27 https://twitter.com/behindcadi
  28. 28 https://sarasoueidan.com/case-studies/smashing-magazine/
  29. 29 https://sarasoueidan.com/case-studies/smashing-magazine/
  30. 30 #
  31. 31 http://movieposteroftheday.tumblr.com/
  32. 32 http://movieposteroftheday.tumblr.com/
  33. 33 https://mubi.com/notebook/posts/the-best-movie-posters-of-2016
  34. 34 #
  35. 35 http://userdefenders.com/
  36. 36 http://userdefenders.com/
  37. 37 #
  38. 38 http://colorsupplyyy.com/app/
  39. 39 http://colorsupplyyy.com/app/
  40. 40 #
  41. 41 https://medium.com/designing-medium/image-zoom-on-medium-24d146fc0c20
  42. 42 https://github.com/nishanths/zoom.js?utm_source=javascriptweekly&utm_medium=email
  43. 43 https://github.com/nishanths/zoom.js?utm_source=javascriptweekly&utm_medium=email
  44. 44 #
  45. 45 https://github.com/luruke/awesome-casestudy
  46. 46 https://github.com/luruke/awesome-casestudy
  47. 47 #
  48. 48 https://hackernoon.com/a-simple-pie-chart-in-svg-dbdd653b6936#.azbfqcgxy
  49. 49 https://hackernoon.com/a-simple-pie-chart-in-svg-dbdd653b6936#.azbfqcgxy
  50. 50 #
  51. 51 https://www.smashingmagazine.com/smashing-workshops/#public-workshops
  52. 52 https://shop.smashingmagazine.com/products/workshop-nathan-curtis-SF-2017
  53. 53 https://shop.smashingmagazine.com/products/tim-kadlec-http2-performance
  54. 54 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-design-SF-2017
  55. 55 https://shop.smashingmagazine.com/products/workshop-chris-holst-SF-2017
  56. 56 https://shop.smashingmagazine.com/products/workshop-sarah-drasner-SF-2017
  57. 57 https://shop.smashingmagazine.com/products/workshop-rachel-andrew-sf-2017
  58. 58 https://shop.smashingmagazine.com/products/workshop-nadieh-bremer-sf-2017
  59. 59 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-rwd-SF-2017
  60. 60 https://2017.iceweb.is/workshop.html
  61. 61 http://fitc.ca/event/am17/workshops/
  62. 62 http://www.uxriga.lv/full-day-workshops/
  63. 63 http://fitc.ca/presentation/workshop-smart-responsive-design-patterns/
  64. 64 http://www.webdirections.org/respond/
  65. 65 mailto:vitaly@smashingconf.com
  66. 66 #
  67. 67 http://jobs.smashingmagazine.com/
  68. 68 http://jobs.smashingmagazine.com/j/Digital-Development-Design-Specialist/2464524
  69. 69 http://jobs.smashingmagazine.com/j/Senior-Frontend-Engineer/2464227
  70. 70 http://jobs.smashingmagazine.com/j/Senior-UX-Designer/2463250
  71. 71 #
  72. 72 https://www.smashingmagazine.com/2016/01/combining-ux-design-and-psychology-to-change-user-behavior/
  73. 73 https://www.smashingmagazine.com/2015/01/lessons-learned-building-a-productized-service/
  74. 74 https://www.smashingmagazine.com/2014/01/dealing-with-workaholism-on-web-teams/
  75. 75 #
  76. 76 https://www.smashingmagazine.com/2017/01/more-than-just-pretty-how-imagery-drives-user-experience/
  77. 77 https://www.smashingmagazine.com/2017/01/designing-better-app-icons/
  78. 78 https://www.smashingmagazine.com/2017/01/designing-responsive-music-player-sketch-part-2/
  79. 79 https://www.smashingmagazine.com/2017/01/case-study-app-indexing-google-worth-the-effort/
  80. 80 https://www.smashingmagazine.com/2017/01/internationalizing-react-apps/
  81. 81 https://www.smashingmagazine.com/2017/01/styled-components-enforcing-best-practices-component-based-systems/
  82. 82 https://www.smashingmagazine.com/2017/01/web-development-reading-list-166/
  83. 83 https://www.smashingmagazine.com/2017/01/web-development-reading-list-165/
  84. 84 https://www.smashingmagazine.com/2017/01/freebie-clothing-icons-9-styles-ai-eps-svg-png/

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' web with the latest tips and tricks for designers and web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

Comments are closed.

↑ Back to top