Smashing Newsletter: Issue #213

Editorial

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)

E-commerce UX Guidelines
Visual Cheatsheets For Grid And Flexbox
Google, But For Colors
Design System Lessons Learned
JavaScript Fundamentals For React
100 Days Of Motion
SmashingConf New York Is Coming
How To Create An Animated SVG Neon Light Effect
Upcoming In Smashing Membershp
Upcoming Workshops With Vitaly Friedman

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?

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)

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)

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)

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)

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)

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.

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)

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 how to set up a proper product roadmap with C. Todd Lombardo.

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

10. Upcoming Workshops With Vitaly Friedman