1,379 articles from Smashing Magazine.
These days, product companies seem more interested in refining interfaces and simplifying user experiences. In this ninth issue of Inspired Design Decisions, Andy Clarke will explain how studying the work of Max Huber — one of the less well known but most distinguished Swiss designers — will teach you how to turn mundane subjects into exciting visual communication.
In this article, Kelvin Omereshone introduces you to machines, an open standard for JavaScript functions. At the end of this article, you should be familiar with what machines are and how to implement them. There is no special prerequisite for this article. If you can write a JavaScript function, then you’ll be able to follow along. With all that said, let’s dive in.
Performance is a competitive advantage that can bring and retain customers. We can’t afford regularly spending time optimizing apps all over again. It’s costly, and complex. As a first step in coming up with a solution for any problem, we need to make the problem visible. In this article, Anton Nemtsev will help you with exactly that It’s not enough to optimize an application. You need to prevent
Since more and more web traffic comes from mobile users, our websites need to be in the best position to serve them. The easiest thing to do would be to remove unnecessary content from the site. However, it may not always be the best solution. In this article, Suzanne Scacca proposes some ways to turn essential content into graphics to conserve space, create a more engaging UI and preserve the ove
In this episode of the Smashing Podcast, we’re talking about shaping our physical spaces when working from home. What can you do to take a step up from working at your kitchen table? Drew McLellan talks to workspace geek Ben Frain to find out.
The social media company released React Native, and it quickly became the most popular framework for building mobile apps with JavaScript. In this article, based on his experience with creating a GPS and navigation application, Chafik Gharbi will show you how to create a mobile app using Expo and Firebase services such as Firestore, Firebase functions and Expo push notifications.
A month is a long time to stay on top of things. In today’s monthly post, Iris Lješnjanin brings you an overview of everything we’ve been working on and have also enjoyed reading over the past month. Here at Smashing, we believe that is is now more important than ever to stay in touch and support each other. Behind the scenes, the team is working tirelessly on ways to keep the community connected,
Creating accessible images seems like a simple topic at first glance — you just need to add alt text to an image, right? But the topic is much more nuanced than some people think. In this article, Carie Fisher will review the different types of images, dive into some real-world examples of inaccessible public service announcements (PSAs), and discuss which elements matter most when critical messag
Smashing Meets is a friendly, inclusive, online meetup for people who work on the web. We focus on front-end and UX, but cover all sorts of topics from performance to accessibility. We organize Smashing Meets together with some amazing communities from around the world. Join us for Smashing Meets — two free online meetups with speakers, activities, and plenty of chances to make new friends. Just l
React is a fantastic JavaScript library for building rich user interfaces. It provides a great component abstraction for organizing your interfaces into well-functioning code, but what about the look and feel of the app? There are various ways of styling React components from using stylesheets to using external styling libraries. In this article, Shedrack Akintayo will explain the cons and pros of
Arguing that dark patterns are unethical is not enough on its own. We will also need to make the case to clients and colleagues that they are damaging to business. That’s what Paul Boag has also written in his new Smashing book, “[Click](https://www.smashingmagazine.com/2020/05/encouraging-clicks-book-pre-release)”. In this post, he will put together a compelling argument you can present to stakeh
How, then, do we encourage users to act? By establishing trust with small commitments, at the right time, and in the right order. Click! explains how to do just that. Meet our new practical guide on how to build trust, increase conversion and boost business KPIs effectively — without alienating people along the way. Written by Paul Boag. Coming up in June. Jump to table of contents and get the boo
For hundreds of years, we have been using white space in typography. Today, in 2020, how do we add spacing to punctuation marks and other symbols, and how do we adjust the space on the left and right side in an easy and consistent way? It is actually not as easy and quick as it should be.
In this article, Blessing Krofegha introduces Typescript, a superscript of JavaScript that presents the static type feature for spotting common errors as developers codes, which enhances performance, hence results in robust enterprise applications. You’ll also learn how to efficiently set up TypeScript in a React Project as we build a Money Heist Episode Picker App, exploring TypeScript, React hoo
This tutorial would take you on a step by step guide to build a functional survey app using Vue.js and Firebase. From validating the user’s data through Vuelidate, to authentication, storing the user’s data, route protection and sending data to Firebase servers. All the steps used in the tutorial are practical, and can be reproduced in any real-life project, even with a custom backend.
The pressure to rush market and usability research carries risk. In this article, Eric Olive will offer four practical techniques to mitigate this risk and create designs that better serve customers and the company: context over convenience, compromise, better design decisions, design reduction.
How much thought have you put into your primary input device? Ever considered how much better your interface with your computer might be? For decades, keyboards have been the primary mechanisms by which we interact with our computers. In this article, Ben Frain is going to dive into the possibilities of mechanical keyboards. The different layouts, switch types and even keycap material. Strap yours
The cat is out of the bag! Meet SmashingConf Live (Aug 20–21), our very first online conference. For SmashingConf Live, our new online conference, we don’t want to replicate in-person experiences online. Instead, we’ve designed an entirely new conference experience, focusing around interactive live sessions and discussion zones where you actively shape what happens next, and learn along the way.
In this episode of the Smashing Podcast, we’re talking about building apps on a tight timeline. How can you quickly turn around a project to respond to an emerging situation like COVID-19? Drew McLellan talks to Phil Smith to find out.
Mobile app development using hybrid frameworks has come a long way since initial release in 2008. With the improvements being made to the JavaScript engine and improved processing power available to mobile phones, the major concern people had when they considered developing their apps using the hybrid approach — namely, performance — has all but been eliminated, and cross-platform frameworks have
In recent years a slew of ‘readability’ programs have appeared to help us tidy up the things we write. Used everywhere from newsrooms to browser plugins, these systems offer automated feedback on how writing can be clearer, neater, and less contrived. Sounds good right? Well, up to a point. Readability programs may seem like a godsend, but the worst thing writers can do is write to please them abo
As we have now formalized our workshop process, we thought we’d share a little more about how these events run. Unlike in-person workshops where we keep you in a room for an eight hour day, we realized than many of you have a lot of other commitments right now. Our initial online workshops went so well, we have scheduled many more. Find out how what we learned from those first workshops and what w
Mirage JS borrowed some terms and concepts which are very much familiar to back-end developers, however, since the library would be used mostly by front-end teams, it’s appropriate to learn what these terms and concepts are. In this first part of the Mirage JS Deep Dive series, Kelvin Omereshone will be looking at Mirage JS models and associations. He’ll take a closer look at what they are and the
As designers, we usually turn to different sources of inspiration, and, well, as a matter of fact, we’ve discovered the best one: wallpapers that are a little more distinctive than the usual crowd. In this collection, Cosima Mielke brings you wallpapers for May 2020. They come in versions with and without a calendar and can be downloaded for free. As a bonus goodie, we also added some favorites fr
Today, as designers, we are lucky as never before because there are dozens of tools available for us to design wireframes and also smoothly integrate this activity in our general design process. In this article, Anton Suprunenko will take a deeper look at one of the most simple yet quite often underrated activities in web development: the design of wireframes. You’ll learn what wireframes are, why
Light mode is a convention in most web and mobile apps. However, in modern development, we have seen how dark mode, which displays light text and interface elements on a dark background, is quickly becoming a user preference. In this article, Blessing Krofegha will show you how to efficiently implement dark mode in a React app on a simple web page, using the styled-components library and leveragin
Developers often worry about the SEO of their SPAs (Single Page Applications) and how well they would do on Google searches (blogs, portfolio websites, product websites, and so on). Sometimes, they also worry about how complex building a server-side rendered application might be. In this tutorial, we’re going to learn how to create server-side rendered applications by using Nuxt.js, how to configu
Whatever stage you’re at in your career, coding collaboratively is one of the best uses of your time. With remote working on the rise, there’s never been a better time to practice pair programming and embrace Agile development.
Node.js is an interesting tool for web developers. With its high level of concurrency, it has become a leading candidate for people choosing tools to use in web development. In this article, we will learn about what makes up Node.js, give it a meaningful definition, understand how the internals of Node.js interact with one another, and explore the project repository for Node.js on GitHub.
Flutter has already made quite a splash on the mobile development scene. Now it’s taking on bigger devices as well. In this article, Carmine Zaccagnino will show you what you need to know to be ready to take on the task of developing web and desktop apps using this wonderful cross-platform framework. Flutter is a lovely framework, very easy to use, and its extreme cross-platform support only makes
A landing page is a standalone webpage created to support a specific marketing campaign or targeting a particular search term. They are where users “land” when they click a link in search results, email or an ad. In this article, Paul Boag will show you how to create a compelling landing page, which involves a combination of clear focus, persuasive copy, considered design and relentless testing. W
In this episode of the Smashing Podcast, we’re talking about running online workshops. How can a traditional event adapt when participants can’t attend in person? Drew McLellan talks to Rachel Andrew to find out.
Skeleton screens offer a better user experience by reducing loading-time frustration. By focusing on progress instead of wait times, it create the illusion for users that information will be incrementally displayed on the screen. In this tutorial, Blessing Krofegha will show you what a skeleton screen UI is and some types of skeleton screen libraries, along with their pros and cons. We’ll build a
A month is a long time to stay on top of things. Here you’ll find an overview of everything we’ve been working on and have also enjoyed reading over the past month. Of course, you can always find us on Twitter, Facebook and LinkedIn, and also stay updated with our RSS feed as well as our Smashing Newsletter (sent out every second week with all sorts of goodies!).
The admin panel is one of the most powerful, flexible features that the Django web framework provides, combining instant off-the-shelf functionality with infinite customization. Using an example project based on a library inventory system, we’ll use the admin panel to learn about creating models and interacting with relational databases in Django.
React provides a few built-in Hooks like useState. You can also create your own Hooks to reuse stateful behavior between different components. The example below shows a counter whose state is managed using the useState() hook. Each time you click on the button, we make use of setCount() to update the value of count by 1. In this article, Adeneye David Abiodun covers the rules of React Hooks and ho
If you are thinking about distracting visitors of your website with a fancy, glittering particle animation for a few moments, while some data is loaded in the background, all you need is some basic knowledge of CSS and JavaScript and a lightweight animation library such as anime.js. In the end, we should have the following result: Particle animations belong to the most impressive animations that e
In this eighth issue of Inspired Design Decisions, Andy Clarke will explain how learning about American graphic designer and typographer Herb Lubalin has transformed his approach to typography on the web. How can we combine elements to develop powerful headers and calls to action? How do we use pre-formatted HTML text, and the text element in SVG for precise control over type? How can we optimise
In this tutorial, you are going to learn and understand what React hooks are, the basic React Hooks that are available and also examples of how to write them for your React applications. In the process, you will also get to know about some additional hooks that were shipped with React 16.8 and also how to write your own custom React Hooks.
All search engines share the same purpose: to organize the web’s content and deliver the most relevant, useful results possible to search queries. How they achieve this has changed enormously since the days of Lycos and Ask Jeeves. Google alone uses more than 200 ranking factors, and those are just the ones we know about. Retrofitting search engine optimization only gets you so far. As metadata ge
In this article, Chidi Orji will create a set of API endpoints using [Express](https://expressjs.com/) from scratch in ES6 syntax, and cover some development best practices. Find out how all the pieces work together as you create a small project using Continuous Integration and Test-Driven Development before deploying to Heroku.
In this episode of the Smashing Podcast we’re talking about online privacy. What should web developers be doing to make sure the privacy of our users is maintained? Drew McLellan talks to an expert on the subject, Laura Kalbag, to find out.
Writing is a crucial skill every software developer should cultivate. And writing on your own technical blog can have immense benefits to your career as a software developer and help you cultivate your skills and expertise. Creating and hosting a technical blog provides an opportunity to do just that. In this article, Zara Cooper will take a look at how to deploy a blog for free and with minimal e
Early this month, [The Ethical Design Handbook](https://www.smashingmagazine.com/printed-books/ethical-design-handbook/) joined the Smashing Library of essential books for designers and developers. Changes around the world have meant changes in the book release, but readers love it so far! Ethical Design principles are timeless and we are seeing the results of that during an unprecedented time of
Creating front-end code in Django with templating and server-side rendering combines the fine-grained control of handwritten HTML with the clean code and powerful features of generated pages. We explore breaking down a complex webpage into multiple templates, composing those components, and applying tags and filters to refactor a plain HTML page.
In this article, Blessing Krofegha introduces the concept of the headless CMS, a backend-only content management system that allows developers to create, store, manage and publish the content over an API. It gives developers the power to quickly build excellent user experiences, free from the worry of its impact on the back-end business logic.
By now, you’re probably used to seeing design trends come and go. But have you ever given any thought to what passing trends do to a website when left there for too long? As a web designer, you have a few choices. You can ignore popular design trends altogether; you can adopt them, but pull them out of rotation the second they go stale, or you can put your own unique spin on them. This guide will
Let’s welcome the new month with some fresh wallpapers. Designed with love by artists and designers from across the globe, they are available with and without a calendar for April 2020.
We use language as a tool for communication with other people. Writers use words to communicate with their readers, while designers use visual language to communicate with their users. Fonts, colors, shapes, visual elements such as icons — those are elements of design language. Effective design language streamlines communication. A robust visual design language is the cornerstone of good design. I
A set of checklists to help you create smart interface design patterns. Totally free if you sign up for our friendly newsletter. These checklists are based on the work Vitaly has been doing for many years, exploring and examining examples of desktop and mobile interfaces. Learning what works and what doesn’t in usability tests and user interviews.
You don’t need to know your trees from your dangling blobs. If you use Git every day and feel like it’s a juggling act, then here are some tricks and tips to help make your life a bit easier. There’s been a lot written about getting started with git, understanding how git works under the hood or techniques for better branching strategies. In this article, Shane Hudson will specifically target the
Recent research has found that e-commerce category pages have higher click-through rates in search than individual category pages. So, if your e-commerce site is struggling to attract shoppers and convert them, your category pages (specifically, those on mobile) might be in need of a redesign. Based on the following data, Suzanne Scacca will show you how category pages have a role to play — as the
In [Part 1](https://www.smashingmagazine.com/2020/03/designers-code-terminal-text-editors-part-1/), Paul explained the basics of the terminal, shared a few productivity hacks to get you started, and how to choose a code editor. In this part, he’ll continue with the topics of version control (Git), HTML and CSS, semantic code, and a brief introduction to some key engineering principles.
In this episode of the Smashing Podcast, we’re talking about the user experience around converting site visitors into customers. Can our selling techniques leave customers feeling cheated? And how can that be avoided? Drew McLellan talks to conversion optimization specialist Paul Boag to find out.
With so many people — including our workshop leaders — working from home, we thought we would bring our Smashing workshops from our home offices to yours. We hope we can help you continue to learn and interact with the speakers and each other, and also help out our workshop leaders who are losing income by being unable to run their workshops in person right now.
In this seventh instalment of Inspired Design Decisions, Andy Clarke will explore how American art director and graphic designer Otto Storch inspires his designs for the web. How do we use CSS Shapes to go beyond basic shapes to add energy to our designs? How do we use rotations on text for extra impact? How can we use mirroring and reflections to add interest to a design? In this article, we’ll e
Making your tables sortable in React might sound like a daunting task, but it doesn’t have to be too difficult. In this article, Kristofer Giltvedt Selbbekk is going to show you how to implement all you need to sort out all of your table sorting needs. By the end of this tutorial, you will have found a way to model your state, wrote a generic sorting function, and wrote a way to update what our so
Houdini, an umbrella term for the collection of browser APIs, aims to bring significant improvements to the web development process and the development of CSS standards in general. Frontend developers will be able to extend the CSS with new features using JavaScript, hook into CSS rendering engine and tell the browser how to apply CSS during a render process. Houdini’s browser support is improving
For the purpose of this two-part series of articles, we’re going to assume the answer for “Should designers code?” is “It depends.” If you’ve started and never finished courses in some online coding school — or if you’ve finished the courses but found it difficult to apply this style of learning in your day-to-day work, these two articles will provide a few different learning methods and will high
There isn’t a ton of mystery when it comes to what makes for an attractive and modern-looking design these days. What’s not always clear, however, is the usability aspect of it. In other words, have the pathways you’ve designed for users intuitive enough? The truth is, it’s all really just a guessing game unless you start getting user feedback early on. Thankfully, Indigo.Design has a usability te
