Smashing Newsletter #265: Interfaces, Design Systems and Cityscapes

On SmashingConf Freiburg, interface design, design systems, job offers comparison and fancy blobs. Issue #265 • Tue, Sept. 8, 2020 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Friend, As I’m writing these words, we are running our annual [SmashingConf Freiburg]( — one of the Smashing Conferences that we’ve moved online this year. We’ve spent quite a bit of time thinking about what a truly smashing online experience could be, and it was quite clear that we didn’t wait to replicate an in-person experience, but instead design an online experience from scratch. The very personal [SmashingConf Freiburg badge]( we've designed more than 100 of these cat characters. Try to find all of 'em! After all, there are things we can do online which we can’t really do in an in-person event. And that’s the convenience of the personal workspace. So we run challenges in which attendees can participate remotely with the comfort of their personal setup, and we have a Smashing Cat Scavenger hunt to facilitate friendly networking, and we share photos of workspaces and cats and views from the windows, and run discussion zones with casual, friendly chats. Plus, the conference is split into manageable time segments, so everyone has enough time to get a cup of coffee, connect with other people, learn, and also run errands at home. Yes, online, everybody is just a blurry rectangle, but everybody — attendees, speakers, organizers and sponsors alike — is in the same boat, with magnets on a fridge and pets passing by in just the right moments. It even feels almost more intimate to get a glimpse of personal workspaces, and everyone is just as friendly and approachable. We’ll be running [more Smashing Conferences]( this year, and we also have a few [front-end & UX online workshops]( which we run in the very same smashing spirit: - [Web Performance Masterclass]( with Harry Roberts, - [SVG Animation Masterclass]( with Cassie Evans, - [CSS Layout]( with Rachel Andrew, - [Designing for Emotion]( with Aarron Walter, - [Smart Interface Design Patterns]( with your truly. We’d love you to join us, and we'd love to hear your stories and meet you — albeit online. Yes, we all are far away from each other, but it doesn't mean we can't stay close and connected. So let's do just that! Stay smashing! — Vitaly (@smashingmag) --------------------------------------------------------------- Table of Contents 1. [The Past, Present, And Future of Interfaces](#a1) 2. [Cityscapes Based On Antique Books](#a2) 3. [Generate Blobs With Ease](#a3) 4. [Comparing Job Offers In Detail](#a4) 5. [Design Systems From All Over The Globe](#a5) 6. [From Our Friends](#a6) 7. [Coming Up Next on Smashing](#a7) 8. [New On Smashing Job Board](#a8) 9. [Our Current Most Popular Articles](#a9) --------------------------------------------------------------- #1. The Past, Present, And Future of Interfaces Why do we interface? Back in 2018, product designer Ehsan Noursalehi presented a talk on the topic at a meetup. This summer, after several months of strict quarantine gave him a new perspective on our relationship with technology, he decided to convert his obervations and questions into an online micro book. [Why Do We Interface?]( [Why Do We Interface]( takes a historical look at interfaces to build an understanding of how they allow us to utilize information in such powerful ways that they can fundamentally change what it means to be human. A thought-provoking journey from the failed Apple Newton of 1993 to the voice-first interfaces of today and the challenges the future might bring, as well as a precious reminder about the true purpose of a designer’s job. (cm) --------------------------------------------------------------- #2. Cityscapes Based On Antique Books Antiquarian books are known for having lengthy titles and rather unassuming title pages, despite the wealth of knowledge they treasure inside their covers. To illustrate the unique knowledge readers would find in them, Nicholas Rougeux started a very special project: [Title Cities](. [Title Cities]( Title Cities reimagines the title pages of antique scientific books as colorful cityscapes, based solely on the words on the title page. Whether it’s Charles Darwin’s On the Origin of Species or Isaac Newton’s Opticks, for each book Nicholas drew boxes around the words on the title page and color-coded them by their first letter. Maintaining their original sizes relative to one another, he then arranged the boxes into abstract cityscapes. A beautiful example that inspiration can be found everywhere. (cm) --------------------------------------------------------------- From our sponsor 5 Steps to Designing Apps with Keyboard Accessibility in Mind Learn about keyboard accessibility guidelines as well as 5 steps to keep in mind when designing apps to make sure that they are keyboard accessible [Learn about keyboard accessibility guidelines]( as well as 5 steps to keep in mind when designing apps to make sure that they are keyboard accessible. --------------------------------------------------------------- #3. Generate Blobs With Ease A blob is a blob is a blob? Not at all! Lokesh Rajendran built a cool, minimalist tool that lets you generate beautiful blob shapes for web and Flutter apps with ease. [Blobs]( [Blobs]( as the blob generator is called, creates random or fixed blobs for you, all you need to do is adjust the level of randomness and complexity. You can also customize the blobs’ color, of course, and, if you like, define a gradient for the filling or outline. To use the blob right away in a project or customize it further by animating or clipping it, the generator provides you with the SVG and Flutter code. Perfect for a nice little UI animation, as a background for an icon, a frame, or whatever else you can think of. Happy blobbing! (cm) --------------------------------------------------------------- #4. Comparing Job Offers In Detail Let’s say you are fortunate enough to have multiple job offers, how do you decide which job you take on? Do you trust your gut feeling or do you prefer a more analytic approach? If you need a little help with your decision, Umar Hansa made a [reusable spreadsheet]( that lets you tally the jobs up against a set of predefined criteria. [A spreadsheet to compare job offers]( Which company’s culture appeals more to you? What’s the atmosphere like? What about the peers who work there? Is the team diverse? Are the projects interesting? What technology do they use? And are there opportunities to progress your career? These are just some of the questions the spreadsheet takes into account. To ease your decision process, you give one point to the job that stands out for you in each category and calculate the winner in the end. If you want to get started right away, Umar created a [Google Sheet]( with the template. (cm) --------------------------------------------------------------- From our sponsor Discover Magnolia, the most flexible open source headless CMS for Frontend Devs [Discover Magnolia, the most flexible open source headless CMS for Frontend Devs]( Whether you want to work with React, Angular or Vue as a SPA, with a static jamstack site or any other delivery system: with Magnolia Headless CMS you develop with the languages and frameworks of your choice. [Discover Magnolia]( the first headless CMS for frontend developers online. --------------------------------------------------------------- #5. Design Systems From All Over The Globe An effective design system helps you reuse UI components to create coherent user experiences across all aspects of a product. If you need some inspiration for what your design system could look like, Josh Cusick started the project [Design Systems For Figma]( a collection of design systems from all over the globe. [Design Systems For Figma]( Atlassian, Audi, Uber, the City of Chicago, Apple, Goldman Sachs, Slack — these are only some of the 45 companies featured in the collection. All of the design systems were created in Figma, so if you are a Figma user yourself, you can duplicate or download a file to inspect how the design system was made. A precious look into how other design teams work. (cm) --------------------------------------------------------------- #6. From Our Friends We love supporting wonderful community efforts, and we are happy to share articles and resources from useful resources in the web community. This week, a huge shout out to Webdesign Toolbox, CSS Weekly, and Mobile UX London. Community matters. ❤️ - [Webdesign Toolbox]( The ever-changing landscape of the web means that new challenges are constantly arising. Webdesign Toolbox is a human-curated collection of handy apps, tools, and resources that are perfect for progressive web designers, developers, and web strategists. - [CSS Weekly]( To keep you up-to-date on the latest developments in CSS, Zoran Jambor curates the CSS Weekly newsletter. Sent out once a week, it’s jam-packed with CSS-related articles, tutorials, experiments, and tools. - [Mobile UX London]( From September 9th to 11th, Mobile UX London will bring people from different backgrounds together for the Festival of UX & Design, featuring 18+ expert speakers and 6+ workshops. A fantastic opportunity to discuss and present new and innovative ideas. --------------------------------------------------------------- From our sponsor Build in-demand skills in Northwestern’s online MS in Info. Design & Strategy [Northwestern: Online Master’s in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- #7. Coming Up Next on Smashing With [Smashing Membership]( you get access to goodies, eBooks, discounts and live sessions with experts — all around front-end & UX, for just one coffee a month. Coming up next: - “[The Good, The Bad And Ugly Of Prototyping]( with Adekunle Oduye— October 1 at 19:00 London time - “[All About Icons]( with Marc Edwards— October 20 at 11:00 London time [SmashingConf Workshops]( Meet [Smashing Online Workshops]( on front-end & UX, with Natalia Tepluhina, Christian Nwamba, Aarron Walter, and many others. We also have [online workshops on front-end & UX]( — designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk. - [The CSS Layout Masterclass]( (Sep 10–11) - [Vue.js: The Practical Guide]( (Sep 17 – Oct 2) - [Smart Interface Design Patterns]( (Sep 22 – Oct 6) - [The SVG Animation Masterclass]( (Oct 8-22) - [Web Performance Masterclass]( (Oct 13-27) - [Designing for Emotion Masterclass]( (Oct 28-29) - [Build, Ship and Extend GraphQL APIs]( (Nov 12-27) Or, if you’d like to run an online workshop with your team, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf) --------------------------------------------------------------- #8. New On Smashing Job Board - [Senior Product Designer (UX)]( at GoodHabitz Netherlands BV (Eindhoven) - [Freelance Web Designer]( at Adnet Media (Remote) - [Fullstack Java Developer]( at Digital Charging Solutions GmbH (Berlin) --------------------------------------------------------------- #9. Our Current Most Popular Articles - [Building A Component Library With React And Emotion]( - [4 Ways To Creatively Use Icons In Your Mobile Apps]( - [Everything Developers Need To Know About Figma]( - [How To Do More With Vue Router]( --------------------------------------------------------------- This newsletter issue was researched and written by Cosima Mielke, Iris Lješnjanin, Rachel Andrew and Vitaly Friedman Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( --------------------------------------------------------------- Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](