Monthly Web Development Update 10/2017: CSS Grid, CAA Pitfalls, And Image Optimization

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns. Editor’s Note: Welcome to this month’s web development update. Anselm will summarize the most important things that happened in the web community over the past few weeks in one handy list for you. Enjoy! As web developers, we’re working in a very diverse environment: We have countless options to specialize in, but it’s impossible to keep up with everything. This week I read an article1 from a developer who realized that even though he has been building stuff for the web for over seven years, sometimes he just doesn’t understand what’s going on: “I’m slamming my keyboard in frustration as another mysterious error appears in my build script,” he writes. For him, writing JavaScript isn’t fun anymore. The tool chain got too complex, the workflows are built mainly for developer convenience, and many things that exist in the languages itself are reinvented in external libraries. Now when I look at the articles I collected for you this month, I can relate to the kind of frustration he’s feeling. Soon we won’t be able to use .dev domains anymore, HTTPS CAA checks don’t work with...

Read More

Don’t Let Your Brain Deceive You: Avoiding Bias In Your UX Feedback

You know that user feedback is crucial — after all, your users will decide whether your app succeeds or not — but how do you know whether users are being fair and objective in their feedback? We can tell you: They won’t be. All of your users will be giving you biased feedback. They can’t help it. When soliciting and listening to user feedback, you will inevitably run into bias on both sides of the coin: Biases will influence the people providing feedback, and your own biases will influence the way you receive that feedback. It’s important to be aware of this, especially when reviewing comments about your user experience (UX). Accurate and unbiased feedback is essential to developing the best possible version of your app1. Although you can’t erase your own biases (or those of your users), you can take steps to overcome common biases once you know what they are and how they might appear. The next time you ask your users for input, keep bias in mind and evaluate how you respond to users’ comments. Is your action (or inaction) driven by bias? Collecting And Analyzing Data Link When determining qualitative sample sizes in user research, researchers must know how to make the most of the data they collect. Your sample size won’t matter if you haven’t asked good questions and done thorough analysis. Read more...

Read More

Building A Large-Scale Design System: How We Created A Design System For The U.S. Government (Case Study)

Editor’s Note: We’ve been closely working with Maya on this article, and we’re happy to see the final result now being published on 18F1. We highly encourage more teams to share the lessons they learned when building a design system or a pattern library, and we’re always happy to support them in writing, editing and shaping that article. This post is a re-post of Maya’s final article. Today, there are nearly 30,000 U.S. federal websites2 with almost no consistency between them. Between the hundreds of thousands of government employees working in technology, there’s nothing in common with how these websites are built or maintained. As a result, the government is spending considerable resources on services that aren’t meeting the needs of their users3. Federal websites are the front door to government services: it’s the first thing someone encounters when interacting with the government. According to research from the Federal Front Door4 initiative, as government interfaces erode, so does the public’s trust in those services. I was part of a team of designers and developers who unified a complex system with numerous rules to serve users from all corners of the country. I’ll shed some light on how we built tools to leverage industry-standard best practices and produce a design system with reusable components. You’ll also see how our system is helping agency teams in the federal government create simple,...

Read More

Designing A Realistic Chronograph Watch In Sketch

If you’re into wristwatches, like me1, and are also a fan of the Sketch app2 (or just want to get better at it), then this is the tutorial for you. In it, you will learn how to create a very realistic and detailed vector illustration of a watch using basic shapes, layer styles and cool Sketch functions such as “Rotate Copies” and “Make Grid.” You’ll learn how to apply multiple shadows and how to use gradients, and you will see how objects can be rotated and duplicated in special ways. No bitmap images will be used, which means you will be able to easily adapt the final image to different sizes and resolutions. While Sketch is undoubtedly an excellent UI design tool3, it can be used as a powerful illustration tool4 as well. So, in this tutorial, we’ll be walking through the process of creating the iconic Heuer Autavia5 wrist chronograph, all in vectors. Taking A Closer Look At Sketch Link What really sets Sketch apart from the rest? If you’re a UI designer, you’ll want to take a closer look at its well-rounded set of features that cater to your requirements. Read more →6 Heuer Autavia Link The name “Autavia” comes from a combination of the watch’s target markets (automotive and aviation), and it was unveiled way back in 1962. 7An old advertisement (1962) for the Heuer Autavia...

Read More

Minimal Design With Large Impact: Functional Minimalism For Web Design

As web design focuses more and more on good user experience, designers need to create the most usable and attractive websites possible. Carefully applied minimalist principles can help designers make attractive and effective websites with fewer elements, simplifying and improving users’ interactions. In this article, I will discuss some examples of minimalism in web design, things to consider when designing minimalist interfaces, and explain why sometimes “less is more”. If you’d like to get more creative with your own designs, you can download and test Adobe XD1, and get started right away. Selecting An Effective Color Scheme Link When designing a new app, it’s often difficult to decide on a color scheme that works well, as there are an infinite number of possible color combinations out there. Read more →2 A Short History Of Minimalist Design Link Some web designers mistakenly think of minimalism as a primarily aesthetic choice. To avoid the pitfall of focusing only on aesthetics, let’s be clear about the roots of minimalist design. While it might be a newer trend in web design, the underlying ideas have been around for much longer. When discussing minimalist design, a person might naturally think of traditional Japanese culture. Japanese culture values balance and simplicity. Japanese architecture, interior design, art, and graphic design have long employed minimalist aspects. 3“Fine Wind, Clear Morning4” by Katsushika Hokusai (1830). The emphasis is...

Read More