Archive for the 'Pattern Libraries' topic

Nathan Curtis – Building Scalable Design Systems and Style Guides

The expansion of the web past a desktop-based world into more of a multi-device ecosystem has caused organizations to re-evaluate almost everything they do. Style guides have had to grow to accommodate this new reality of multiple screens sizes and resolutions. When you start incorporating the multitude of products across devices and all the people working on them, organizations are forced to think more “systematically.”

Jenn Lukas – Developing a Living Style Guide with CSS

The notion of being a “designer who can code” has been a prevalent topic in recent years. Delivering static PDFs and working in photoshop is seen as inefficient in some circles. Being able to create a clickable or even responsive mockup to present to developers and stakeholders can be a better way to show your intent. It’s also much easier to iterate by changing a few lines of code.

Brad Frost – Building Responsive Interfaces From Atomic Elements

A website can be made up of relatively complex pieces. You have multiple pages, images, maybe some JavaScript, and it all needs to come together to create this larger experience. But as with things in nature, it can be broken down even further than that into more “atomic” elements.

UIETips: Rethinking Mobile Tutorials: Which Patterns Really Work?

In this week’s UIEtips, we offer an article from Theresa Neil and Rich Malley. In it they look at what mobile tutorial patterns work the best. Here’s an excerpt from the article: So, why don’t these patterns work? I turned to the field of game design for answers. Game designers have always known that you […]

Brad Frost – Building Design Systems from Atomic Elements Live!

Have you seen style tiles, element collages, or pattern libraries? These are just a few examples of how designers are reacting to the explosion of devices and interface sizes. After all, thinking about the parts of a “page”—not just the sum of those parts—helps us create smart, scalable, maintainable designs for all those newfangled technologies.

Brad Frost – Creating Responsive Interfaces

Frameworks and design patterns are no strangers in the world of web design. As responsive web design becomes common practice, making sure these templates work across every imaginable screen and device is trickier. There have been attempts to break down page elements in separate modules, but you often never see it fully assembled.

UIEtips: Atomic Design

It’s quite common for designers to develop design systems and libraries of patterns. A designer can save a considerable amount of time if they develop a reliable design system. One that goes beyond colors, fonts, grid etc but rather focuses more on how the various elements and parts become a whole. In today’s UIEtips, we […]

Adopting Pre-Made Design Patterns Doesn’t Help With The Toughest Parts

A well-built design pattern library is an extremely valuable tool for highly productive design teams. It ensures the designs they create feel like they were built by the same folks. It helps everyone on the team understand how things get put together. When combined with a component library, it can shorten development time by using […]

Nathan Curtis – Start Full Screen: Organize, Communicate, and Annotate HTML Prototypes

Nathan discusses how the team at EightShapes brought their modular philosophy to creating rich interactive prototypes using HTML, CSS, and JavaScript. He explains how, through modular thinking, they were able to write scripts that chunked aspects of their designs to repurpose and reuse across multiple pages.

UIEtips: How to Create a UX Design Library

During a podcast recording, back in 2010, Nathan Curtis of EightShapes set me on the right path regarding UX design libraries. As we were talking, I had suggested that a UX Design Library was a snapshot of what the team felt the future of the design would be like. “Oh, no!” Nathan exclaimed. “I strongly […]