Tuesday, August 28, 2018

Smashing Newsletter #213: Animated SVGs, JS Fundamentals and Visual Cheatsheets

Is anyone else wondering where the year has flown to? We're about to head into the last quarter of 2018, and anyone working on an e-commerce site will be starting to think about preparing for the holiday season.Issue #213 Tue, Aug 28, 2018 View in the browser ๐Ÿ’จ

Smashing Newsletter

Dear Friend,

Is anyone else wondering where the year has flown to? We're about to head into the last quarter of 2018, and anyone working on an e-commerce site will be starting to think about preparing for the holiday season. We'll have some content on Smashing Magazine to help with that in the next week.

This is also a very good time to consider any friction that visitors might have when interacting with your site, so in the last couple of weeks we've been thinking a lot about forms, and how to make them as easy as possible for visitors to interact with. Don't forget that we also have older but still relevant content on Smashing Magazine in our e-commerce category.

If you are returning from vacation, or just looking towards the final months of this year, I hope you have lots of interesting challenges to get working on!

Until next time,
Rachel Andrew (@rachelandrew)


Table of Contents

1. E-commerce UX Guidelines
2. Visual Cheatsheets For Grid And Flexbox
3. Google, But For Colors
4. Design System Lessons Learned
5. JavaScript Fundamentals For React
6. 100 Days Of Motion
7. SmashingConf New York Is Coming
8. How To Create An Animated SVG Neon Light Effect
9. Upcoming In Smashing Membership
10. Upcoming Workshops With Vitaly Friedman
11. New On Smashing Job Board
12. Popular Articles This Month

1. E-commerce UX Guidelines

In an e-commerce context, a flawed user experience can have a direct impact on sales, so providing a streamlined path that gives users clear information on all levels — from the homepage to product listing pages — is crucial. But what do you need to consider to create such a path?

UX Guidelines for E-commerce

The Nielsen Norman Group conducted research across 49 e-commerce sites and analyzed their homepages, category pages, and listing pages. Now they turned their findings into a handy set of e-commerce UX guidelines that you can follow along to help your users find their way to the product that best suits their needs. (cm)


2. Visual Cheatsheets For Grid And Flexbox

Grid and Flexbox can be confusing at times, but, luckily, there are cheatsheets that help you get back on track when you're stuck. The folks at interactive design and development shop Malven Co. created two very useful visual cheatsheets — one for Grid, one for Flexbox. They briefly summarize what each property does and show a preview of what it will look like when applied to your grid or columns. A nice bonus: click on the preview, and the CSS will be copied to your clipboard. (cm)

Grid Cheatsheet


From our sponsor

Explore And Test Complex And Innovative Data-Driven Apps

Qlik Playground is a free programming environment that lets you get hands-on with data — without all the hassle. Playground makes it easy to search, associate, filter, visualize and interact with data through the power of Qlik's Associative Engine. Backed by an open-source community, it works with any stack, architecture or platform so you can get ramped-up fast. Ready to skip the boring tasks like writing queries and creating tables and explore the data-driven projects of your dreams? Come play at playground.qlik.com!

Qlik Playground


3. Google, But For Colors

You enter a search term and are presented a list of links. That's how search engines usually work, right? Picular is different. Instead of searching for relevant sites, Picular presents you colors that match your search. "Summer", for example, will return different shades of blue, along with some sandy yellows and browns, and a tad of pink. Each color is labeled with its hex value, so if you want to use it in a project, just click on it, and it's copied to your clipboard. One for the bookmarks. (cm)

Picular


4. Design System Lessons Learned

Everybody's talking about design systems, and maybe you've also taken the step to create one for your company. To help you make your system truly useful for the entire team, empowering everyone to make better design decisions, Matt Bond now shares tips and insights from his experience building the design system at Atlassian. Lots of valuable lessons learned included. (cm)

Design Systems Lessons Learned


5. JavaScript Fundamentals For React

When learning React, a lot of JavaScript fundamentals will pop up. And even if you don't need to master them all, it can be useful, to have a fundamental JavaScript knowledge to harness when building with React. A good read on that matter now comes from Robin Wieruch: Covering everything from React and JavaScript classes to destructuring and spread operators, his article "JavaScript Fundamentals Before Learning React" walks you through the different JavaScript functionalities that complement your React application. (cm)

JavaScript Fundamentals For React


From our sponsor

Online Masters in Information Design and Strategy

Ad

Earn your master's degree online.

6. 100 Days Of Motion

100-day projects are a creative outlet, an opportunity to challenge yourself to learn a new craft and improve your skills. For 100 Days of Motion Design, Tiantian Xu taught herself animation and created 50 stunning pieces of vector-animation in 100 days. Now, she shares insights into her creative process and the tools she used. Inspiring! (cm)

100 Days of Motion


7. SmashingConf New York, Oct 23-24.

Sara Soueidan, Dan Mall, Debbie Millman, Jason Grigsby, Michael Flarup and many others! Check speakers and topics.

SmashingConf is a friendly, inclusive event which is focused on real-world problems and solutions. It's focused on front-end and UX, but it covers everything web, be it interface design or machine learning. That means a packed bundle of diverse, actionable insights for your work.

New York October 23-24 with Debbie Millman and Tim Kadlec, and many others!
Oh, still need to convince your boss? We've got your back (PDF)!

What's the atmosphere like? Well, take a look at the conference showreel, videos from previous events, and photos. 2 days, 1 track, 13 speakers, 300 attendees and a bunch of hands-on workshops.

Get your tickets to SmashingConf New York 2018.

Single track, two days, approachable speakers and live interactive sessions with a focus on real work and real pain points. Not convinced yet? Check speakers and topics. Or just head straight to the tickets ↬. (cr)


8. How To Create An Animated SVG Neon Light Effect

If you're up for some SVG magic, then Nils Binder's tutorial on creating an animated SVG neon light effect is for you. In it, he takes you step by step through the process of turning an Illustrator into a Sketch file, exporting it as an SVG, and, finally, optimizing and animating it to recreate the flickering neon effect. A great little project to sharpen your SVG skills. By the way, for developers who want to skip the design steps and dive directly into the SVG animation part, there's a demo file which they can download and use. (cm)

Animated SVG Neon Light Effect


9. Upcoming In Smashing Membership

Smashing Membership helps us to keep the site alive and go ad-free. Each member makes a difference, and gets valuable content from it, too!

Coming up next:

  • ๐ŸŽช We'll be releasing the SmashingConf Toronto videos, with live interactive sessions on everything from designing live to auditing third-party scripts live.
  • ๐Ÿ“บ Smashing TV: Webinar on variable fonts with Jason Pamental.

We are very grateful for the kind and generous support of 1,056 members! You can become one of us, too! ;-)


10. Upcoming Workshops With Vitaly Friedman

๐Ÿ‡ฉ๐Ÿ‡ช Freiburg, SmashingConf, Sept. 10 – 11, 2018
๐Ÿ‡บ๐Ÿ‡ธ New York, SmashingConf NY, Oct. 23 – 24, 2018

A Workshop with Vitaly Friedman with some happy attendees

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!


11. New On Smashing Job Board

  • Front-End Software Developer at Canopy Labs Software Inc. (Toronto)
    "We are looking for a skilled and energetic front-end software engineer who loves to build clean & clear user experiences that help customers understand and work with data. Our customer journey platform ingests behavioural and demographic data from many different sources, puts it in one place and lets our users query that combined data set - often for the first time."
  • Back-End Developer at Grow (Norfolk, VA)
    "Our developers create industry-leading digital work for some of the most recognized brands on the planet. A successful candidate will bring a track record of constantly innovating and maintaining a broad knowledge of development principles, industry trends, and emerging technologies."
  • UX/UI Design Mentor or Tutor at CareerFoundry (Anywhere)
    "We are looking for new or experienced, and most of all, passionate UX designers all over the world to join our tutor and mentor body and help define the next generation of design talent by educating and empowering students across the globe."

12. Popular Articles This Month

This newsletter issue was written and researched by Cosima Mielke, Iris Ljeลกnjanin, Vitaly Friedman, Markus Seyfferth and Christiane Rosenberger.


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.
Follow us on Twitter Join us on Facebook



No comments:

Post a Comment