Archive | Design

RSS feed for this section

Here’s how I recreated theory11’s login form — how would you do it?

I ran across a super cool design for a login form over on the website theory11.com. Actually, the whole site and the products they make are incredibly well designed, there’s just something about the clean and classy form that really got me. Plus, it just so happened that the CodePen Challenge that coming week was based on forms, so I took a few minutes and tried slapping it together.

Fadeout vector pattern

One of the things I thought …

The post Here’s how I recreated theory11’s login form — how would you do it? appeared first on CSS-Tricks.

Your Brain on Front-End Development

Part of the job of being a front-end developer is applying different techniques and technologies to pull off the desired UI and UX. Perhaps you work with a design team and implement their designs. I know when I look at a design (heck, even if I know I’m not going to be building it), my front-end brain starts triggering all sorts of things I know will be related to the task.

Let’s take a look at what I mean.…

The post Your Brain on Front-End Development appeared first on CSS-Tricks.

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