Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. 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. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #169

This newsletter issue was sent out to 196,178 newsletter subscribers on Tuesday, November 1st 2016. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Change is coming. Over the last months, we’ve been working on a redesign of our little magazine, spending a lot of time on a new creative direction and rethinking the way to feature articles on the site. Our adventures have led us through trenches and revamps — not to mention countless Slack discussions on the shades of navigation and buttons.

Well, the design will be quite different. Yes, we’ve reviewed our priorities. We’ve rediscovered a new typography and a new layout. And yes, we’ve brought focus from advertising to our our lovely Smashing projects, such as our printed books, eBooks, conferences, workshops, as well as the job board. Furthermore, our upcoming Smashing Membership will be packed with some useful, truly smashing, features. We’re very excited about the upcoming changes!

Pssst... Sneak Peek Of The Redesign2

We hope to roll out the new design in early 2017 (fingers crossed!), and as we’re getting close to the finish line, it’s time to open up the design for a new round of usability testing — just to iron out all those little things that often tend to be forgotten or misaligned. We’d love to hear your feedback, and if you have a minute to spare, please sign up for our usability panel3, so we can send you an email with a sneak preview (along with a few questions) later this week.

Thanks for staying smashing! We look forward to all your thoughts and feedback, and sincerely appreciate your every bit of your time and support.

— Vitaly (@smashingmag)

Table of Contents

  1. Speed Up Your Sketch Workflow4
  2. Free SVG Background Patterns5
  3. A Chrome Extension To Search For Previously Visited Sites6
  4. Pushing Performance For Critical Pages7
  5. Time For A Change: The Paris Metro Map Redesign8
  6. A Movie Poster A Day9
  7. Unique Designs For Parks10
  8. Upcoming Smashing Workshops11
  9. New On Smashing Job Board12
  10. Smashing Highlights (From Our Archives)13
  11. Recent Articles On Smashing Magazine14

151. Speed Up Your Sketch Workflow

Have you heard of Sketch Runner16 yet? If you’re designing with Sketch, then this little helper is sure to make your workflow a lot smoother. How? Well, it lets you run commands right from the keyboard — no more searching your way through the menu. Yes, it’s that simple.

Sketch Runner17

To speed up common tasks, just wake up Sketch Runner and start typing. You can run Sketch menu items and third-party plugin actions directly from the tool or use it to jump anywhere in your document — to any page, artboard, group or layer. It’s also possible to search and insert or replace symbols, create symbols or styles on the fly, and apply styles to layers. Sketch Runner is still in beta but already works with all Sketch versions of 3.7 and newer. A real-time saver! (cm)

182. Free SVG Background Patterns

Now let’s be honest. There can never be enough of background patterns, right? Well, here’s another cool collection of repeatable SVG background patterns for you to use on your digital projects: Hero Patterns19. Created by Steve Schoger, a UI designer and illustrator from Kitchener, Ontario, this collection is completely free and is frequently updated.

Hero Patterns20

You can browse through the patterns, and use CSS provided to apply the background pattern to your project. There are also appearance settings available which you can adjust as you like, such as the foreground color and opacity, as well as the background color. You can also check out Steve’s Zondicons21, a set of free premium SVG icons that were designed from a micro perspective and evaluated at a macro perspective. Cool set! (il)

223. A Chrome Extension To Search For Previously Visited Sites

Falcons are known for their extraordinary vision. They can spot their prey from miles away and dive at a speed of 200 miles per hour to snatch their prey. Given this impressive precision, it’s no wonder that Andrew Ilyas and Logan Engstrom chose the name “Falcon23” for their Chrome extension. With the precision of an eagle-eyed bird, Falcon finds text in websites you’ve browsed days, even weeks, ago.

Falcon24

To make it possible, every time you visit a site, Falcon indexes all the text on the page so that it can easily be found later. To search your previously visited sites, just press F, then Space or Tab in the omnibar and enter the keywords you’re looking for. You can also search in a specific time range if you wish. By the way, some domains are automatically blacklisted from indexing (the majority of banking websites, for example), but you can also manage which URLs you don’t want Falcon to index.

On top of that, all information is stored locally — the makers promise that no data will leave your computer. And if you still don’t feel comfortable installing a browser extension from the Chrome Web Store25 that can read and modify all data on the site you visit, Falcon also supports a transparent installation so you can read through the code and verify that there is nothing malicious. (cm)

264. Pushing Performance For Critical Pages

Not all pages are created equal. What if you were asked to push the performance of a fancy new landing page to the edges to the maximum? Obviously, you’ll do your homework and set up an HTTP/2 server while keeping the files as small as possible. But what if that’s not enough?

Pushing Performance For Critical Pages27

For web fonts, the best we can do is to subset the font to just the Regular glyphs you need on the landing page. You might need bold and italic though. In that case, you could first render the entire page in a subset Regular weight28 with that small subset font base64 encoded in the header of the page, and then once the page is displayed, load full Regular, Bold and Italic in the second stage.

For JavaScript, load only what’s absolutely critical and everything else asynchronously. For CSS, use resource hints like preload29, use progressive loading30 or loadCSS31.

What about images? That product image should be appearing fast after all. Well, use JPEG compressor32 or PNG Optimizer33, but that goes without saying. Look into improving perceived performance with multiple background images34 and provide a gradient fallback35 for an image that loosely resembles the original.

That should be enough to keep you going. So, what SpeedIndex score can you hit for your landing page? (vf)

365. Time For A Change: The Paris Metro Map Redesign

A public transportation map is probably one of the most challenging things a designer could possibly design. It means making sense of an abstract maze of lines, stops, and nodes to enable the visitors and residents of a city to find their routes as quickly and pain-free as possible. While all transportation maps look essentially the same at first glance, it’s the small details here that set a good map apart from a brilliant one.

Redesigning The Paris Metro Map37

Graphic designer Constantine Konovalov recently presented his redesign of the Paris Metro Map38 to the public. Two and a half years of work went into developing the fundamentally new design that covers the metro system of the French capital as well as regional trains and trams. While the colors and graphic symbols have stayed the same compared to the map that is currently in use, the real innovation lies in the circular line pattern on which the layout is based. It simplifies the perception of the map as the circles provide visual anchors and divide the map into segments.

To make route finding even faster, Constantine also straightened the lines as much as possible. In fact, his design gets by with two times less line bends as the classical map thanks to a new 30-degree grid that allows to increase the number of converging lines compared to the 45-degree grid which transportation maps typically employ. UX design at its best. (cm)

396. A Movie Poster A Day

Some movie posters are so memorable that you can’t forget them even if you wanted to. Just think of the The Godfather poster with the puppeteer’s hand, Titanic with the ship’s bow and the portrait of the two lovers, or Bill Murray sitting on the edge of a hotel bed wearing a bathrobe for Lost In Translation. Designer Pete Majarich decided to breathe new life into the posters we all know, and embarked on an ambitious 365 days project at the beginning of this year. The aim: To design an alternative movie poster for every day in 201640.

A Movie Poster A Day41

Pete’s take on the posters is a lot more simplistic than the originals. The colors are calm and muted, the plot of the movies boiled down to the core and illustrated with only a few elements. A challenge that certainly isn’t easy to master, yet Pete manages to provide strong alternatives that don’t imitate but rethink their bigger brothers. And with the project already having passed day 300, things are looking quite good that Pete may even reach the 365 landmark. Something to keep an eye on! (cm)

427. Unique Designs For Parks

Ever feel like we should all show more appreciation to the nature around us? Well, Type Hike43 is a collaborative design project that does just that. Sixty designers and typographers have come together and have promised to create a unique design for a national park within the USA which they’re fond of. A brilliant idea, isn’t it?

Type Hike44

The project is organized by David Rygiol and James Louis Walker, and is a wonderful typographic exploration of America’s National Parks. 52 out of 60 posters have already been submitted, so it’s worth coming back to the site and checking out more designs as they are added until the full set of 60 is complete. Simply inspiring. (il)

458. 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 Workshops46

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.com53 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!

549. New On Smashing Job Board

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

  • Digital Design Teacher56 at Skillshare (Anywhere)
    “As a Skillshare teacher, you’ll upload project-based video lessons and connect with students around the globe. You’ll earn money every time a student takes your class without any additional work.”
  • Full-Stack Developer57 at FINE (Portland, OR)
    “We’re looking for an experienced full-stack developer to join our crew of eccentric geniuses in Portland. This is a mid- to senior-level position using Ruby on Rails, SCSS and Javascript to build new websites for our clients.”
  • Lead Designer58 at Hello Design (Los Angeles, CA)
    “We are looking for an experienced Lead Designer who is passionate about quality design and has a drive for innovation.”

5910. Smashing Highlights (From Our Archives)

  • Why Performance Matters, Part 2: Perception Management60
    Time can be analyzed from two different points: objective and psychological. When we talk about time that can be measured with a stopwatch, we’re talking about objective time, or clock time. Objective time, though, is usually different from how users perceive time while waiting for or interacting with a website or app.
  • How To Get Started With Sketchnotes61
    Have you ever seen someone make creative notes at a conference and wished that your own notebook was more presentable? It’s probably much easier to do than you think. You don’t have to be an aspiring lettering artist, and you don’t need to develop top-notch drawing skills.
  • Building A Successful Product: Start Small And Listen62
    If you are launching a bootstrapped product, then your aim should be to ship something that people are happy to give you money for as quickly as possible. This means launching with the minimum that will make your product something that people would be happy to buy. You can then begin to develop additional features based on what customers actually want and need, rather than on what you think they want and need.

6311. Recent Articles On Smashing Magazine

Design Articles

Coding Articles

Inspiration, Freebies, Misc.

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 https://www.smashingmagazine.com/smashing-usability-testing-panel/?mc_cid=a2f92af018&mc_eid=%5BUNIQID%5D
  3. 3 https://www.smashingmagazine.com/smashing-usability-testing-panel/
  4. 4 #a1
  5. 5 #a2
  6. 6 #a3
  7. 7 #a4
  8. 8 #a5
  9. 9 #a6
  10. 10 #a7
  11. 11 #a8
  12. 12 #a9
  13. 13 #a10
  14. 14 #a11
  15. 15 #
  16. 16 http://sketchrunner.com/
  17. 17 http://sketchrunner.com/
  18. 18 #
  19. 19 http://www.heropatterns.com/
  20. 20 http://www.heropatterns.com/
  21. 21 http://www.zondicons.com/
  22. 22 #
  23. 23 https://github.com/lengstrom/falcon/
  24. 24 https://github.com/lengstrom/falcon/
  25. 25 https://chrome.google.com/webstore/detail/falcon/mmifbbohghecjloeklpbinkjpbplfalb
  26. 26 #
  27. 27 http://www.heropatterns.com/
  28. 28 https://www.zachleat.com/web/comprehensive-webfonts/#critical-foft-data-uri
  29. 29 https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/
  30. 30 https://jakearchibald.com/2016/link-in-body/
  31. 31 https://github.com/filamentgroup/loadCSS
  32. 32 https://github.com/mozilla/mozjpeg
  33. 33 https://tinypng.com/
  34. 34 http://csswizardry.com/2016/10/improving-perceived-performance-with-multiple-background-images/
  35. 35 https://github.com/ben-eb/postcss-resemble-image
  36. 36 #
  37. 37 http://metromap.fr/en
  38. 38 http://metromap.fr/en
  39. 39 #
  40. 40 http://amovieposteraday.tumblr.com/
  41. 41 http://amovieposteraday.tumblr.com/
  42. 42 #
  43. 43 http://typehike.com/
  44. 44 http://typehike.com/
  45. 45 #
  46. 46 https://www.smashingmagazine.com/smashing-workshops/#public-workshops
  47. 47 http://mobileera.rocks/workshops/
  48. 48 http://www.designencountersconf.com/
  49. 49 https://buildstuff2016workshops.sched.org/event/8Xo2/vitaly-friedman-responsive-design-clever-tricks-and-techniques
  50. 50 http://whiteoctoberevents.co.uk/training
  51. 51 https://shop.smashingmagazine.com/products/smashing-workshop-ux-design-vitaly-munich-nov-2016
  52. 52 http://www.uxsalon.com/responsive-design-workshop/
  53. 53 mailto:vitaly@smashingconf.com
  54. 54 #
  55. 55 http://jobs.smashingmagazine.com/
  56. 56 http://jobs.smashingmagazine.com/j/Digital-Design-Teacher/2435009
  57. 57 http://jobs.smashingmagazine.com/j/Full-Stack-Developer/2430224
  58. 58 http://jobs.smashingmagazine.com/j/Lead-Designer/2423605
  59. 59 #
  60. 60 https://www.smashingmagazine.com/2015/11/why-performance-matters-part-2-perception-management/
  61. 61 https://www.smashingmagazine.com/2014/11/how-to-get-started-with-sketchnotes/
  62. 62 https://www.smashingmagazine.com/2013/11/building-a-successful-product-start-small-and-listen/
  63. 63 #
  64. 64 https://www.smashingmagazine.com/2016/10/giving-your-product-a-soul/
  65. 65 https://www.smashingmagazine.com/2016/10/how-to-poison-the-mobile-user/
  66. 66 https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/
  67. 67 https://www.smashingmagazine.com/2016/10/desktop-wallpaper-calendars-november-2016/
  68. 68 https://www.smashingmagazine.com/2016/11/building-shaders-with-babylon-js/
  69. 69 https://www.smashingmagazine.com/be-afraid-of-public-key-pinning/
  70. 70 https://www.smashingmagazine.com/how-to-issue-a-new-ssl-certificate-with-an-old-ssl-key/
  71. 71 https://www.smashingmagazine.com/2016/10/how-to-transform-your-next-conference-takeaways-into-real-life-results/
  72. 72 https://www.smashingmagazine.com/2016/10/web-development-reading-list-155/
  73. 73 https://www.smashingmagazine.com/2016/10/web-development-reading-list-156/

↑ 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