Business For Designers, CSS Experiments and Open-Source Illustrations

Looking back, we had a truly smashing time at the SmashingConf held in San Francisco. For those of you who were unable to attend, we have already published the SmashingConf SF speaker talks along with resources and photographs.Issue #228 • Tue, April 30, 2019 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Friend, Looking back, we had a truly smashing time at the SmashingConf held in San Francisco two weeks ago. For those of you who were unable to attend, we have already published the [SmashingConf SF speaker talks]( along with resources and photographs. If you were able to attend, perhaps you could add comments to the post and share your memories, the things you learned, and your photos? We’d love to hear about your experience! [SmashingConf attendees playing with colored balloons at the opening ceremony]( Starting SmashingConf with just the right amount of balloons. (Photo taken by [Marc Thiele]( There is a lot going on here at Smashing for everyone. We’ve just released Andy Clarke’s new book, [Art Direction For The Web]( and our ongoing Smashing TV schedule has [three upcoming webinars](#a10) featuring smart cookies from the web industry (one is taking place later on [today at 13:00 GMT]( — join in!). Please don’t forget: you can always tell us what would be most helpful for you and your career. If you have a great idea for a webinar topic or speaker, or perhaps you’d like us to cover a subject in the magazine or pitch an article that you would like to write, do [get in touch]( with us anytime! — Rachel Andrew (@rachelandrew) --------------------------------------------------------------- Table of Contents 1. [Design Your Team](#a1) 2. [Open-Source Illustrations With Personality](#a2) 3. [SmashingConf Toronto 2019](#a3) 4. [Mesmerizing CSS Experiments](#a4) 5. [Explore The Power Behind CSS Gradients](#a5) 6. [What Every Designer Should Know About Business](#a6) 7. [A Podcast About Maintainers](#a7) 8. [Create Sophisticated Animations Without Touching Any Code](#a8) 9. [Work From Home, But Not Alone](#a9) 10. [Upcoming In Smashing Membership](#a10) 11. [New On Smashing Job Board](#a11) 12. [Our Next Smashing Workshops](#a12) 13. [Our Most Popular Articles](#a13) --------------------------------------------------------------- #1. Design Your Team How do you and your team want to be at work and with each other? Coming up with group norms and sharing them openly can help fasten the bond inside a team and make it prosper. [Team Values Toolkit]( Inspired by many successful, collaborative teams with different backgrounds, the design team at Dropbox co-created a social contract to define a common foundation for how they want to communicate, make decisions, share information, and support each other. To help you and your team become value-first, too, they now introduced the [Team Values Toolkit](. The free kit comes with activities and instructions to define your very own set of shared values and norms. (cm) --------------------------------------------------------------- #2. Open-Source Illustrations With Personality If you need an illustration for your project, but commissioning an illustrator is beyond your budget, you might want to take a look at [unDraw](. The site features open-source illustrations on all-things tech and digital with a cool material design look. To make them match your design, you can use the on-the-fly color image generator to customize the main color, and thanks to SVG, the illustrations are scalable without quality loss, too. (cm) [unDraw]( --------------------------------------------------------------- #3. SmashingConf Toronto 2019 (June 25-26) The web is diverse and fascinating because it’s designed and built by people who are diverse and fascinating. For our second [SmashingConf Toronto]( we’ll explore the bright and dark sides of front-end and UX: Service Workers, Design Across Cultures, Design Systems, Performance, Vue.js, Animation, Designing for Touch, and much more to come! [SmashingConf Toronto, June 25-26, with Jenny Shen, Scott Jehl, and many others!]( SmashingConf Toronto is a friendly, inclusive event focused on real-world problems and solutions. [Convince Your Boss Letter]( (249 KB). A team that learns and grows together, stays together! Get a 15% discount for four or more conference tickets — [tickets are now available]( Also, don’t forget to take a peek at our [hands-on workshops]( that focus on all things design, front-end and UX. We look forward to seeing you there! --------------------------------------------------------------- #4. Mesmerizing CSS Experiments CSS is capable of bringing the most sophisticated layouts to life, and its power makes for some stunning CSS experiments, too. Two mesmerizing pieces of CSS magic that are bound to leave you in awe come from Yuan Chuan: the [Floating Heart]( and [Chasing]( animations. If you want to get creative, too, [CSS Doodle]( is for you. The web component which Yuan built helps you draw patterns with CSS. Have fun! (cm) [Floating Heart]( --------------------------------------------------------------- #5. Explore The Power Behind CSS Gradients Shapy. Hidden behind the cute name, is a powerful tool: a [gradient shape editor]( created by Victoria Bergquist. Shapy lets you discover and explore the power of CSS gradients, creating shapes and images by layering and moving around gradients on a single div tag. Just use the sliders to customize the canvas size, gradient type, color stops, and box details, and, once you’re satisfied with what you see in the preview, you can copy the CSS with a click. Handy! (cm) [Shapy]( --------------------------------------------------------------- From our sponsor Front-end, No Code: See How With “Mason + Core”, A Free Front-end Kit Build, design, and ship front-end UI without writing a single line of code with [Mason + Core]( the front-end feature kit full of essential building blocks for your next project. It’s the next evolution in UI kits and its available now! [Get Core for free ↬]( [Floating Heart]( --------------------------------------------------------------- #6. What Every Designer Should Know About Business More and more experienced designers are advocating for designers to acquire business knowledge. Their arguments are convincing: once you understand business, you can make better decisions that benefit not only the business itself but also your users, and it will make it easier to convince non-designers into user-centric ideas, too, [as Alen Faljic points out](. But what exactly should designers learn about business? [7 things every designer should know about business]( Based on his experience working as a business designer at IDEO and creating the d.MBA business course for designers, Alen distilled [the most important things every designer should know about business]( into one comprehensive article. A good primer. (cm) --------------------------------------------------------------- #7. A Podcast About Maintainers There’s a new podcast in town! [Maintainers Anonymous]( hosted by Henry Zhu is all about being an open-source maintainer. It dives deep into how we can work together to achieve a common goal, shows what’s going on behind the scenes in an open-source project, and shares struggles we all face — not only as developers but also as people. The episodes are between 45 minutes and one hour long. Worth tuning into. (cm) [Maintainers Anonymous]( --------------------------------------------------------------- From our sponsor Escape The Open Office Choose where you work; get the face time you need. Working in a Sococo [virtual office]( empowers you to be virtually present with your team and collaborate side-by-side, no matter where in the world you’re located. [Build your free trial virtual office today ↬]( [Virtual Office]( --------------------------------------------------------------- #8. Create Sophisticated Animations Without Touching Any Code A powerful design and animation tool that helps designers and developers create sophisticated interactions and animations, that’s [Flare](. Flare has a graphical interface which lets you place objects on the stage, animate their properties, and use the result directly in your final product — without the need to rebuild anything in code. You can also share your assets with fellow Flare users and browse and fork the creations of others. Promising! (cm) [Flare]( --------------------------------------------------------------- #9. Work From Home, But Not Alone Working from home has a lot of perks, but sometimes it can be hard to defeat distractions and stay focused when there are no colleagues around. The virtual coworking community [Focusmate]( wants to change that by connecting you to other professionals who want to stay on task, too. How does it work? You can choose a time when you want to work, and Focusmate will connect you to a partner for a live, webcam-based coworking session. The social pressure and accountability you feel when you tell someone what you plan to get done during that given timeframe and the need to report back can help you reach the flow state and forget about the distractions around you. An interesting concept. (cm) [Focusmate]( --------------------------------------------------------------- From our sponsor Data Can Be Crucial To Product Development, But Can It Also Have Emotional Impact? We can run A/B testings and optimizations, but how do we actually improve the user experience backed with the metrics that we collect? These and other questions will be part of [Tide Conference]( taking place on June 11 in Orlando, Florida. [↬ Check their speakers]( [Tide Conference]( --------------------------------------------------------------- #10. Upcoming In Smashing Membership Thank you for being smashing! Over the last months, we’ve been increasing the number of webinars (without increasing the price of membership — it still starts at just $5 a month!) and have also improved video quality since we’ve moved to Zoom. Also, the eBook version of Andy Clarke’s brand new book “[Art Direction for the Web]( is now available as a part of the Membership, too. Obviously. Coming up next: - 📺 Smashing TV on April 30 at 13:00 GMT “[The How And Why Of Semantic HTML]( with Mandy Michael - 📺 Smashing TV on May 7 at 17:00 GMT “[Deep Dive Into WebPage Test]( with Patrick Meenan - 📺 Smashing TV on May 14 at 16:00 GMT “[Developing And Designing For Privacy]( with Heather Burns We are very grateful for your support which allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. ([You could become a Member, too]( and join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉) --------------------------------------------------------------- #11. New On Smashing Job Board - [UX Designer]( at Zimmer Biomet (Delft) “As a UX Designer at Clinical Graphics you will be responsible for designing user-friendly software.” - [Sr. UX Front-End Dev Lead]( at Signify Health (Dallas, TX) “We are seeking a Sr. UX Front End Development Lead. This person will have ownership of the Enterprise Component Library, help application developers implement the library and be a key member of the UX team.” - [Senior Product Designer]( at Pepper Media Holding (Berlin, DE) “If you’re passionate about shipping elegant and thoughtful designs while balancing business objectives and designing for real users (our product is used by millions of people), we’d love to hear from you.” --------------------------------------------------------------- #12. Our Next Smashing Workshops In our workshops, we are looking into the current state of front-end and interface design, covering advanced challenges and actual real-life solutions to front-end problems. Coming up next: - 🇺🇸 [ImageCon SF]( (May 1–2) in San Francisco, USA. - 🇵🇱 [Infoshare]( (May 8–9) in Gdańsk, PL. - 🇷🇴 [A Day With]( (May 10–15) in Cluj-Napoca, Brasov, Bucharest, RO. - 🇩🇪 [BTConf]( (May 13–15) in Düsseldorf, DE. - 🇱🇹 [You Gotta Love Frontend Conference]( (May 16–17) in Vilnius, LT. (This event offers a [scholarship program]( - 🇳🇱 [Frontend United]( (May 16–18) in Utrecht, NL. - 🇷🇺 [HolyJS]( & [MobiusConf]( (May 22–27) in St. Petersburg, RU. - 🇸🇰 [Mastersgate]( (May 28–30) in Bratislava, SK. - 🇨🇦 [SmashingConf Toronto]( (Jun 24–27) in Toronto, CA. - 🇬🇧 [JAMstack_conf_london]( (Jul 9–10) in London, UK. [Smart Responsive UX Design Patterns]( --------------------------------------------------------------- #13. Our Most Popular Articles - [Privacy UX: Privacy-Aware Design Framework]( A series of articles written by Vitaly Friedman on how to approach privacy and data collection, and how to deal with the cookie consent prompts, push notifications, permission requests and third-party tracking. - [A Designer’s Guide To Better Decisions]( Design involves decisions, and those decisions are often flawed because our brains are wired for survival. Eric Olice explains four common decision traps that we often fall into and how to avoid them. - [Design At Scale: One Year With Figma]( In this article, Paul Hanaoka shares insights of how large teams can benefit from using more open, collaborative tooling, and how to make adoption and migration feasible and pleasant. --------------------------------------------------------------- This newsletter issue was written and researched by Cosima Mielke, Iris Lješnjanin, Vitaly Friedman, Rachel Andrew, 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]( --------------------------------------------------------------- With useful tips for web devs. Sent 2× a month. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](