by Noemi Stauffer

If you’re looking for a useful free font with a bit of an edge, look no further than this collection of modern typefaces. These sleek and versatile fonts are perfect for all sorts of designs, from websites to printed material, and they are all completely free for both personal and commercial use.

To facilitate your font picking and pairing process, I’ve included examples of how these typefaces have been put to use recently, and a few pairing ideas. …


by Vitaly Friedman

Many conversations in our industry tend to circle around strong opinions and universal answers. Choosing a shiny new technical stack or sticking to an old-school paradigm; betting on a trendy framework or building a custom light framework of your own; using an attention-grabbing pop-up or sticking to calmer, less annoying solutions. We tend to have strong opinions about design and development, and so we agree and disagree, and argue endlessly, trying to protect and explain our views. …


Whether you’re fairly new to CSS or an experienced developer from elsewhere in the stack who wants to make sure your understanding of layout today is up to date, this guide covers everything you need to know about CSS Layout today

Image for post
Image for post
Photo: Lee Campbell

By Rachel Andrew

Over the past couple of years, CSS Layout has dramatically changed as well as the way we develop the front end of our sites. We now have a real choice in terms of the layout methods we use in CSS to develop our sites, which means we often need to make a choice as to which approach to take. In this article, I will run through the various layout methods that you have available to you by explaining the basics of how they are used and what they are used for.

This guide is for you if you are fairly new to CSS and wondering what the best way to approach layout is, but also if you are an experienced developer from elsewhere in the stack who wants to make sure your understanding of layout today is up to date. I have not tried to fully document each layout method here, as that would have created a book and not an article. Instead, I am giving an overview of what is available to you, with plenty of links to find out more. …


Have you ever faced challenges when trying to sell Design Discovery to a potential client? In this article, Kyle Cassidy takes a deep dive into the importance of research as part of the UX design process and the core purpose of Design Discovery

Image for post
Image for post
Photo: Alvaro Reyes

By Kyle Cassidy

As designers, we know that research should play a pivotal role in any design process. Sadly, however, there are still a lot of organizations that do not see the value of research and would rather jump straight into the visual design stage of the design process.

The excuses given here tend to be:

“We already know what our customers want.”

“We don’t have the time/budget/people.”

“We’ll figure out the flaws in BETA.”

As designers, it is important that we are equipped to be able to have conversations with senior stakeholders to be able to sell and justify the importance of the so-called “Design Discovery” within the design process. …


This article is for people who are part of a design team (or any team) that makes crucial business decisions with stakeholders and how they might go about building a diverse team through the use of the Competing Values Framework evaluation

Image for post
Image for post
Photo: You X Ventures

By Riri Nagao

There has been a surge of conversations about the tech industry lacking diversity. Companies are therefore encountering barriers in innovation. The current state of technology faces inequality and privilege, a consequence of having limited voices represented in the design and product development process. In addition, we live in a challenged political and socio-economic state where it’s easier to be divided than come together despite differences.

Design’s role in companies is becoming less about visual appeal and more about hitting business goals and creating value for users. Therefore, the need to build teams with diverse perspectives is becoming imperative. …


Involving other people early on — especially people from other disciplines — can feel scary. By taking inspiration from code reviews, we can improve collaboration both within our own fields as well as across disciplines, be it design, UX, content or development.

Image for post
Image for post
Photo: Headway

By Ida Aalen

Smooth collaboration between developers and designers is something everyone aspires to, but it’s notoriously difficult. But with today’s advanced web, it’s difficult — if not impossible — to build a truly great product without collaborating across disciplines. Because of the range of technologies required to build a product, the product can only truly succeed when all disciplines — developers and designers, content creators, and user experience strategists — are deeply involved from the early stages of the project. …


There are folks all over the globe who are unable to easily complete everyday tasks for themselves. Luckily, developers and designers can help by experimenting with voice technology that empowers them to complete tasks that others may take for granted.

Image for post
Image for post
Photo: Andres Urena

By William Merrill

The current iteration of voice-controlled digital assistants are still struggling to integrate as seamlessly as the big three voice players of Amazon, Google and Apple would hope. A 2017 report by Voicelabs states there’s only a 3 percent chance a user will be active in the second week after downloading a voice application and 62 percent of Alexa’s skills are still to get any kind of rating on its store (as of September 2017).

As designers, we have a real opportunity to provide valuable meaning to these assistants but we’re still trying to work out where the technology can add real benefits to the user. For many, embarking on a voice UI (VUI) project can be a bit like entering the Unknown. There are few success stories for designers or engineers to be inspired by, especially within contexts that illustrate how this nascent technology could help people thrive in new ways. …


Learning to code can be tough. In this article, Murat shares his advice on how writing code differently and poetically has helped him overcome his initial struggles and insecurities.

Image for post
Image for post
Photo: Clément H

By Murat Kemaldar

Back in 2008, I started studying design and clearly remember how the sheer sight of code just intimidated me. I had some coding classes, and without any prior coding experience, I had a tough time understanding the code I first got in touch with. Suddenly, the words that I was used to in the English language (such as “new,” “return” and “throw/catch”) took on a whole new meaning; the cryptic syntax, semicolons, brackets and completely new rules didn’t make things any easier for me.

If you are new to JavaScript and/or have struggles adding it to your skillset, I may have an approach for you to overcome those barriers. You are definitely not alone, and you have every right to think that learning to code is a tough nut to crack. …


Search engines have evolved in leaps and bounds these past few years. This year, there are a number of things that need to be kept in mind with regard to SEO. This article aims to provide all the information you need to know.

Image for post
Image for post
Photo: NESA by Makers

By Myriam Jessier

Design has a large impact on content visibility — so does SEO. However, there are some key SEO concepts that experts in the field struggle to communicate clearly to designers. This can create friction and the impression that most well-designed websites are very poorly optimized for SEO.

Here is an overview of what we will be covering in this article:

  • Design mobile first for Google,
  • Structure content for organic visibility,
  • Focus on user intent (not keywords),
  • Send the right signals with internal linking,
  • A crash course on image SEO,
  • Penalties for pop-ups,
  • Say it like you mean it: voice search and assistants. …


The Beacon API is a lightweight and efficient way to log information from a web page back to a server. Find out how that can be used and what makes it so different from traditional Ajax techniques.

Image for post
Image for post

By Drew McLellan

The Beacon API is a JavaScript-based Web API for sending small amounts of data from the browser to the web server without waiting for a response. In this article, we’ll look at what that can be useful for, what makes it different from familiar techniques like XMLHTTPRequest (‘Ajax’), and how you can get started using it.

If you know why you want to use Beacon already, feel free to jump directly to the Getting Started section.

What Is The Beacon API For?

The Beacon API is used for sending small amounts of data to a server without waiting for a response. That last part is critical and is the key to why Beacon is so useful — our code never even gets to see a response, even if the server sends one. Beacons are specifically for sending data and then forgetting about it. …

About

Smashing Magazine

Founded in September 2006, Smashing Magazine delivers useful and innovative information to web designers and developers.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store