Design Icon

Design

90 Stories
All Topics

freeCodeCamp Icon freeCodeCamp

Fundamental design principles for non-designers

Front-end developers are often in a position of trying to interpolate between a (static) design and the (dynamic) needs of a product. When something comes up that isn’t quite covered by the design, what should you do? In an ideal world we could have a conversation with the designer, but the world is rarely ideal, so it’s useful to have at least a sense of good practices to apply. This article is great because it keeps it simple - just four straightforward principles. As author Anna 4erepawko Mészáros says: Will this help you create shiny beautiful designs? No. Will this help you create great, clear and comprehensible designs that everyone can easily understand and interact with? Absolutely.

read more

CSS betterwebtype.com

The state of fluid web typography

Matej Latin takes us through the current state of fluid typography on the web: Fluid typography gives us so many opportunities to better design the reading experiences on the web but, at the same time, it introduces problems of font sizes scaling uncontrollably and potential accessibility issues. Is fluid web typography ready to be used? TLDR: No, it’s not ready. But you should still read the article, which has a great breakdown of pros and cons of fluid typography and other typography approaches.

read more

Mozilla Icon Mozilla

Mozilla has published their 2019 Internet Health Report

The report focuses on 5 questions about the internet. Is it safe? How open is it? Who is welcome? Who can succeed? Who controls it? The answer is complicated, and the report doesn’t make any particular conclusions so much as share a series of research & stories about each topic. Includes some fascinating looks at what’s going on in AI, inclusive design, open source, decentralization and more.

read more

CSS github.com

A just-add-css collection of styles to make simple websites just a little nicer

I commonly make quick demo pages or websites with simple content. For these, I don’t want to spend time styling them but don’t like the uglyness of the default styles. Water.css is a css framework that doesn’t require any classes. You just include it in your and forget about it, while it silently makes everything nicer. Includes a light theme and a dark theme. Demo here.

read more

Arun Venkatesan arun.is

The design of Apple's credit card

Definitely one of my favorite announcements from Apple at their special event this week — the physical version of Apple’s new credit card, Apple Card. As is expected from Apple, the card is unlike any other. At a close glance, the minutest details set it apart from the rest. Of course, the physical card hasn’t been released yet, but we can learn a lot from what Apple has shown in promotional material. If you haven’t yet, tune in to Backstage #3 for our hottest of hot takes right after Apple’s special event.

read more

Nikita Prokopov tonsky.me

Redesigning GitHub's repository page

A thoughtful, step-by-step redesign of the repo page we all know so well. I didn’t realize how many problems the current design has! Perhaps I’ve been inoculated to them by sheer volume of use. His redesign takes a few left turns on me (I’ve always loved how code-centric the design is, for example), but overall there are many good ideas inside. I hope GitHub’s design teams read this and “steal” a few of the goodies.

read more

The Changelog The Changelog #333

Tactical design advice for developers

Adam talks with Erik Kennedy about tactical design advice for developers. Erik is a self-taught UI designer and brings a wealth of practical advice for those seeking to advance their design skills and learn more about user interface design. We cover his seven rules for creating gorgeous UI, the fundamentals of user interface design — color, typography, layout, and process. We also talk about his course Learn UI Design and how it’s the ultimate on-ramp for upcoming UI designers.

read more

Rachel Andrew rachelandrew.co.uk

HTML, CSS and our vanishing industry entry points

As chronicled in the latest JS Party we continue to track the conversations and insights being shared about the great divide on the front-end. Even DHH shared his thoughts. This post from HTML & CSS expert and advocate Rachel Andrew shares her perspective drawn from the 20 years she’s been working on the front and backend of the web. When we talk about HTML and CSS these discussions impact the entry point into this profession. Whether front or backend, many of us without a computer science background are here because of the ease of starting to write HTML and CSS. The magic of seeing our code do stuff on a real live webpage! We have already lost many of the entry points that we had. We don’t have the forums of parents teaching each other HTML and CSS, in order to make a family album. Those people now use Facebook, or perhaps run a blog on wordpress.com…

read more

David Heinemeier Hansson Signal v. Noise

Designing for the web ought to mean making HTML and CSS

DHH shared his thoughts on The Great Divide. After all, the web IS just…HTML, CSS, and JavaScript… …as The Great Divide points out, regression is lurking, because the industry is making it too hard to work directly with the web. The towering demands inherent in certain ways of working with JavaScript are rightfully scaring some designers off from implementing their ideas at all. That’s a travesty. At Basecamp, web designers all do HTML, CSS, and frequently the first-pass implementations of the necessary JavaScript and Rails code as well! It means they get to iterate on their design ideas with full independence. In the real app!

read more

Chris Coyier css-tricks.com

The Great Divide

Next week’s episode of JS Party digs into this subject, so make sure you subscribe or check it out! Two front-end developers are sitting at a bar. They have nothing to talk about. The divide between front-enders can be summarized by those whose “interests, responsibilities, and skill sets are heavily revolved around JavaScript,” and those whose “interests, responsibilities, and skill sets are focused on other areas of the front end, like HTML, CSS, design, interaction, patterns, accessibility, etc.”

read more

HTML github.com

A community fork of the popular Semantic UI framework

I’ve been using Semantic UI for years. Still do to this day. Unfortunately, the project hasn’t been sustainable with a BDFL despite Jack Lukic’s efforts (you can read a lot more on that history right here). These things happen. And when they do, it’s awesome to see the community rally around the project and keep it alive and thriving. That’s exactly the case with Fomantic UI. Let’s be clear: this is no hostile takeover. From the README: NOTE: Fomantic was created to continue active development of Semantic-UI and has the intent to be merged back into the master repository once active development can restart. Let’s hope the two can become one flesh at some point in the future. In the meantime, Fomantic is where the action’s at.

read more

Cryptocurrency itsnicethat.com

Jon Marshall wants to get kids into cryptocurrency

Another beautifully designed tech product with Pentagram steering the visual design (see my post from last week) – this time aimed at introducing kids to the world of Cryptocurrency. For some reason this feels Black Mirror-esque, but what doesn’t these days? A collaboration with fintech start-up company Pigzbe, the new work wants to help “children and their families learn the principles of 21st century finance through cryptocurrency savings and hands-on play.” Sure beats settling down to all 704 pages of Thomas Piketty’s economic tome Capital. The project is currently on Kickstarter. If you have kids, maybe consider backing it? (Just don’t put all of their college savings into it and expect that to pan out.)

read more

Data visualization learnui.design

A color palette generator for the design 'impaired'

This “Data Color Picker” looks like a spectacular tool for any developer out there (like myself) who appreciates the value of a good color palette, but lacks the ability to put one together. You’re not alone! (This tool is for generating equidistant palettes for data visualizations, but it can most certainly be used generically.) Creating visually equidistant palettes is basically impossible to do by hand, yet hugely important for data visualizations. Why? When colors are not visually equidistant, it’s harder to (a) tell them apart in the chart, and (b) compare the chart to the key. I’m sure we’ve all looked at charts where you can hardly use the key since the data colors are so similar. You pick the “endpoint” colors and it generates all of the colors in-between. Very cool.

read more

Arun Venkatesan arun.is

Why are tech companies making custom typefaces?

The most obvious reason is cost. Developing a custom typeface can eliminate the recurring licensing fees that must be paid to foundries. IBM and Netflix claim to save millions of dollars per year by switching from Helvetica to IBM Plex and Gotham to Netflix Sans, respectively. I hadn’t considered the on going costs of licensing as a factor, but it totally make sense. Although, that’s not where Arun ends this. He goes into the much finer details of the typefaces, the medium, how screen types have changed, and more. Companies like Apple and Samsung, with their wide portfolio of digital and physical products and services, have united their brands and products under a singular typeface. Apple went further and didn’t just work within the numerous constraints posed by both the digital and physical world. In creating San Francisco, it reinvented how type is rendered altogether. I dig the question Arun ends with, “Should custom typefaces exist?”

read more

0:00 / 0:00