Select Page

Category: Design

Design Microsites

Google, Airbnb, Slack, MailChimp, Facebook, Etsy, IBM, Dropbox… everybody has a design site these days. Direct Link to Article — Permalink The post Design Microsites appeared first on CSS-Tricks....

Read More

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 okay… most designers. You’re special. But we both knew that already.) I think James makes strong points here. I’m, predictably, in the camp in which I like CSS. I don’t find it particularly hard or troublesome. Yet, I don’t think in CSS when designing. Much easier to think (and work) in components, nesting them as needed. If the developer flow matched that, that’s cool. I also agree with Sarah Federman who chimed in on Twitter: It seems a bit premature to look at the current landscape of component CSS tooling at say that it’s designer-friendly. The whole conversation is worth reading, ending with: Tooling that treats component design as an interface with the code is where it’s at/going to be. Hopefully, designers will be more empowered to create component styles when we can meet them closer to their comfort zone. Direct Link to Article — Permalink Designer-Oriented Styles is...

Read More

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: Re-creating classic web design patterns. Grid is great at replicating classic web design patterns like card grids and “holy grail” pages. Playing around. Grid is also great for creating fun things like Monopoly boards or video game interfaces. These types of tutorials are important for new technology. They’re a starting point. Now is the time, as Jen Simmons says, to get out of our ruts. To do that, we must cast off our design fears. Fear 1: Asymmetry We’ve been trained in the era of frameworks that symmetric and orderly designs are better. It’s true that for many applications a symmetric design or an orderly grid of items is preferred. Yet, asymmetry has the ability to capture the eye and mind in a way that symmetry never will. Asymmetry is interesting in its disorder. If you’re nervous, you can always start small. See the Pen Asymmetric Promo Grid by Bryan Robinson (@brob) on CodePen. In this example, we have a simple promotional space. By using an asymmetric vertical and horizontal layout, we...

Read More

Confessions Of An Impostor

Five years ago, when, for the first time ever, I was invited to speak at one of the best front-end conferences in Europe, I had quite a mixture of feelings. Obviously, I was incredibly proud and happy: I had never had a chance to do this before for a diverse audience of people with different skillsets. But the other feelings I had were quite destructive. I sincerely could not understand how I could be interesting to anyone: Even though I had been working in front-end for many years by then, I was very silent in the community....

Read More

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 take a peak at all this weirdness. Design tooling is still figuring out Responsive Design It’s almost taken for...

Read More