Layout & Grid in Design Systems
Simply saying the word “grid” conjures up strong and confusing feelings. Kinda like puberty! With so much history and so many different (and sometimes competing) paradigms, it’s no wonder conversations around layout and grid are so fraught, confusing, and contentious. I’m long overdue to share how we tend to think about and execute layout/grid in design systems, so let’s dig into it. Boxes to put
Design Systems are for user interfaces
We often talk about design systems as singular entities. “The design system saves time and increases quality.” “Oh, the design system provides that.” “Update to the latest version of the design system.” The reality is that a design system is a multi-faceted layer cake, and also operates as part of other layered systems within an organization. Design systems are systems of systems, but not all syst
Extending Atomic Design
Atomic design is now over 6 years old (which is nuts!). I’m thrilled that all these years later the methodology continues to help teams think of their user interfaces as a hierarchical, interconnected set of components that build real product screens. I thought I’d be sick of talking about this by now, but I’m still passionate about atomic design after hearing so many success stories, as well as w
Interface Inventory
Many are familiar with the concept of a content inventory. Content audits are usually performed in the early stages of a website redesign process to take stock of all a site’s content. It’s a tedious process involving spreadsheets and caffeine, but the hard work pays off. You end up all your content laid out on the table, which gives you a new perspective on what your content is and how to tackle
Self-Publishing a Book for Fun and Profit
I wrote and self-published a book called Atomic Design, and I’m really pleased with how the whole thing turned out. I want to share my experience largely because I think the process has a lot to offer other authors who are thinking about self-publishing their own books. Background I’ll start off by explaining why I went about creating the book the way I did. Why not go through a publisher? I’ve ne
Anatomy of a Reference Site Component Detail Page
Technically a pattern library is a simple collection of UI components, but in order for design system users do their best work, a pattern library should also present other important info. Let’s take a look at what information can be displayed alongside each pattern Title The name of the pattern should be prominent and easy to understand by everyone who visits the pattern library. Naming things is
Frontend Design
Somewhere between design – a world of personas, pixels, and polish – and engineering – a world of logic, loops, and linux – lies frontend design. Frontend design involves creating the HTML, CSS, and presentational JavaScript code that makes up a user interface. A frontend designer (who may also go by UI developer, client-side developer, UI engineer, design engineer, frontend architect, designer/d
7 Habits of Highly Effective Media Queries
As we all know, media queries are responsive design’s secret sauce. Here are some considerations for crafting high-quality media queries: Let content determine breakpoints Treat layout as an enhancement Use major and minor breakpoints Use relative units Go beyond width Use media queries for conditional loading Don’t go overboard Let content determine breakpoints Every time you see 320px, 480px, 76
Responsive Images
There’s three topics I avoid discussing: religion, politics, and responsive images. But now that the responsive images dust is settling, I figured it’s time to face the music and actually learn this stuff. So here’s how I’m going to write the majority of my responsive images: <img src="small.jpg" srcset="small.jpg [smallwidth]w, large.jpg [largewidth]w" sizes="100vw" alt="Alt Text" /> That’s it. S
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Email Responses #3: UX Designer or Front-End Developer?
Style Guides are the New Photoshop - Stephen Hay at Smashing Conference