Archive | Design

RSS feed for this section

Museum of Websites

The team at Kapwing has collected a lot of images from the Internet Archive’s Wayback Machine and presented a history of how the homepage of popular websites like Google and the New York Times have changed over time. It’s super interesting.

I particularly love how Amazon has evolved from a super high information dense webpage that sort of looks like a blog to basically a giant carousel that takes over the whole screen.

Direct Link to ArticlePermalink

The post Museum of Websites appeared first on CSS-Tricks.

A DevTools for Designers

There has long been an unfortunate disconnect between visual design for the web and web design and development. We’re over here designing pictures of websites, not websites – so the sentiment goes.

A.J. Kandy puts a point on all this. We’re seeing a proliferation of design tools these days, all with their own leaps forward. Yet…

But, critically, the majority of them aren’t web-centric. None really integrate with a modern web development workflow, not without converters or plugins anyway; and …

The post A DevTools for Designers appeared first on CSS-Tricks.

Designer-Oriented Styles

James Kyle:

Components are a designer’s bread and butter. Designers have been building design systems with some model of “component” for a really long time. As the web has matured, from Atomic Design to Sketch Symbols, “components” (in some form or another) have asserted themselves as a best practice for web designers …

Designers don’t care about selectors or #TheCascade. They might make use of it since it’s available, but #TheCascade never comes up in the design thought process.

(Okay …


Designer-Oriented Styles is a post from CSS-Tricks

Designer-Oriented Styles

James Kyle:

Components are a designer’s bread and butter. Designers have been building design systems with some model of “component” for a really long time. As the web has matured, from Atomic Design to Sketch Symbols, “components” (in some form or another) have asserted themselves as a best practice for web designers …

Designers don’t care about selectors or #TheCascade. They might make use of it since it’s available, but #TheCascade never comes up in the design thought process.

(Okay …


Designer-Oriented Styles is a post from CSS-Tricks

Five Design Fears to Vanquish With CSS Grid

CSS grid, along with a handful of other new CSS properties, are revolutionizing web design. Unfortunately, the industry hasn’t embraced that revolution yet and a lot of it is centered around fear that we can trace back to problems with the current state of CSS grid tutorials.

The majority of them fall into one of two categories:

  1. Re-creating classic web design patterns. Grid is great at replicating classic web design patterns like card grids and “holy grail” pages.


Five Design Fears to Vanquish With CSS Grid is a post from CSS-Tricks

Five Design Fears to Vanquish With CSS Grid

CSS grid, along with a handful of other new CSS properties, are revolutionizing web design. Unfortunately, the industry hasn’t embraced that revolution yet and a lot of it is centered around fear that we can trace back to problems with the current state of CSS grid tutorials.

The majority of them fall into one of two categories:

  1. Re-creating classic web design patterns. Grid is great at replicating classic web design patterns like card grids and “holy grail” pages.


Five Design Fears to Vanquish With CSS Grid is a post from CSS-Tricks

Design Tooling is Still Figuring Itself Out

It probably always will be, to be fair.

At the moment, there are all kinds of things that design software is struggling to address. The term “screen design” is common, referring to the fact that many of us are designing very specifically for screens, not print or any other application and screens have challenges unique to them. We have different workflows these days than in the past. We have different collaboration needs. We have different technological and economic needs.

Let’s …


Design Tooling is Still Figuring Itself Out is a post from CSS-Tricks

Using DevTools to Tweak Designs in the Browser

Let’s look at some ways we can use the browsers DevTools to do design work. There are a few somewhat hidden tricks you mind find handy!

Toggling Classes With Checkboxes

This is useful when trying to pick a design from different options or to toggle the active state of an element without adding the class manually in DevTools.

To achieve this, we could use different classes and scope styles inside them. So if we want to see different options for …


Using DevTools to Tweak Designs in the Browser is a post from CSS-Tricks

If Your Company Were a Couch…

Without even realizing it, our perceptions are cross-referenced with our memories. Our brains conjure up an emotional reaction when our eyes see familiar shapes, colors, and textures. This fun exercise uses various styles of couches to help you make decisions about the emotional response that best represents the personality of your company (or how you would like your company to be perceived).

So, which couch feels most like your company? Parallel your choice with your company’s brand personality attributes. Insights …


If Your Company Were a Couch… is a post from CSS-Tricks