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:

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
2. Cityscapes Based On Antique Books
3. Generate Blobs With Ease
4. Comparing Job Offers In Detail
5. Design Systems From All Over The Globe
6. From Our Friends
7. Coming Up Next on Smashing
8. New On Smashing Job Board
9. Our Current Most Popular Articles

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.

Blob generator

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.

Spreadsheet comparing 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

The Headless CMS for Frontend Developer
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

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern 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:

Practicing skills matters. Meow!
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.

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


9. Our Current Most Popular Articles


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


unsubscribe update preferences view in your browser


Older messages

Smashing Newsletter #264: Front-End Accessibility Edition

Friday, September 4, 2020

With tips on accessibility, screen readers, inclusive design and accessibility tooling. Issue #264 • Tue, Sept. 1, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, Our second themed

Smashing Newsletter #263: Japanese and Cyrillic Sites, CSS, Free Illustrations

Tuesday, August 25, 2020

With Cyrillic and Japanese websites, web font showcase, CSS tools, and free vector illustrations and animations. Issue #263 • Tue, Aug. 25, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend,

Smashing Newsletter #262: CSS Edition

Tuesday, August 18, 2020

On styling checkboxes, CSS filters, avoiding layout shifts and and ten CSS layout snippets.Issue #262 • Tue, Aug 18, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, Welcome to the first

Smashing Newsletter #261: Performance, CSS Techniques and Fun Forms

Tuesday, August 11, 2020

With CSS techniques, rendering performance, fun forms and improving your workflow. Issue #261 • Tue, Aug 11, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, We're running an

Smart Interface Design Patterns Checklists (PDF)

Tuesday, August 4, 2020

100 checklists with practical examples and questions to ask when designing and building any UI component. Jam-packed! Interface Design Patterns Checklists PDF • View in the browser 💨 Brand new:

You Might Also Like

Conviction in a copycat league

Sunday, January 12, 2025

Issue 228: Holding beliefs in a world of emulation ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

🐺If they can get press, so can you.

Friday, January 10, 2025

Calling all product businesses and designers. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

🐺Are you overwhelmed when it comes to PR?

Friday, January 10, 2025

do this. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#489: Web Performance

Tuesday, January 7, 2025

Instant navigation, Web Almanac 2024, INP debugging, font-face fallbacks and compression dictionaries. Issue #489 • Jan 7, 2025 • View in the browser Smashing Newsletter Hello Smashing Friends, Web

The Beautiful House That Made Mayer Rus Anxious—At First

Tuesday, January 7, 2025

View in your browser | Update your preferences ADPro Concrete Box Supreme I confess, I was a bit intimidated by the prospect of writing about the work of architect Tadao Ando for the first time in my

New Updates and a Sneak Peek into 2025

Tuesday, January 7, 2025

Both our email builder and website builder are getting significant upgrades to enhance your experience.͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌

🐺Get ready to get press in 2025!

Tuesday, January 7, 2025

Since you asked, we extended the sale! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Accessibility Weekly #430: FTC Orders AccessiBe to Pay $1M

Monday, January 6, 2025

January 6, 2025 • Issue #430 View this issue online or browse the full issue archive. Featured: FTC orders AI accessibility startup AccessiBe to pay $1M for misleading advertising "The US Federal

Getting ready for 2025

Sunday, January 5, 2025

Issue 227: Key focuses in the new year ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Want to Scale Your Firm in 2025? Start Here

Thursday, January 2, 2025

View in your browser | Update your preferences ADPro Build Your Best Team Yet A new calendar year presents an opportunity to wipe the slate clean, and your approach, whether slapdash or carefully