8 Apr 2014 11 am eastern

A List Apart № 393: Inventing & Documenting Design Patterns

A LIST APART Issue №  393

A LIST APART Issue № 393 is about documenting design patterns with a style guide and creating new ones with the z-axis.

Creating Style Guides

by SUSAN ROBERTSON

A style guide, also referred to as a pattern library, is a living document that details the front-end code for all the elements and modules of a website or application. It also documents the site’s visual language, from header styles to color palettes. In short, a proper style guide is a one-stop guide that the entire team can reference when considering site changes and iterations. Susan Robertson shows us how to build and maintain a style guide that helps everyone from product owners and producers to designers and developers keep an ever-changing site on brand and on target.

The Z-Axis: Designing for the Future

by WREN LANIER

For years we’ve seen the web as a two-dimensional space filled with pages that sit side by side on a flat, infinite plane. But as the devices we design for take on an increasingly diverse array of shapes and sizes, we must embrace new ways of designing up and down. Designing on the z-axis means incorporating three-dimensional physics into our interface designs. Wren Lanier explains how, by using the z-axis to place interface elements above or below one another, we can create better design systems that are more flexible and intuitive to use—and create new patterns that point the way to future interactions.


Illustration by Kevin Cornell

Filed under: A List Apart, Design

Comments off.

13 Nov 2013 1 pm eastern

Why Sass? · An A List Apart Article

WE ARE PLEASED to present an excerpt from Sass For Web Designers by Dan Cederholm, available now from A Book Apart.

Why Sass? · An A List Apart Article.

Filed under: A List Apart, CSS, Sass

Comments off.

17 Oct 2013 8 pm eastern

ALA № 384: Unsuck Flat UI; Master Digital Project Momentum

A List Apart 384.

Flat UI and Forms

by JESSICA ENDERS

Though some decry flat user interfaces as pure fashion, or as the obvious response to skeuomorphic trends, many designers have embraced the flat approach because the reduction in visual styling (such as gradients, drop shadows, and borders) creates interfaces that feel simpler and cleaner. Trouble is, most flat UIs are built with a focus on the provision of content, with transactional components (i.e., forms) receiving very little attention. So what happens when flat UIs and forms collide? User experiences can, and often do, suffer. Keep your flat forms from failing by using controlled redundancy to communicate difference.

Mastering Digital Project Momentum

by PERRY HEWITT

Digital projects begin in high spirits and tip quickly into miscommunication and crisis. But it doesn’t have to be that way. Extend your early kickoff meeting harmony throughout the life of your projects. By understanding your client’s organizational drivers and key players before the sticky note sessions even begin, you can establish the momentum needed to keep the extended team focused on goals. And by managing stakeholder communications throughout the job, you can avoid land mines, save time and effort in the long run, and deliver a project that satisfies stakeholders, agency, and users alike.

Filed under: A List Apart

Comments off.

28 Aug 2013 11 am eastern

Research Engine Optimization

A List Apart No. 381

IN ISSUE No. 381 of A List Apart for people who make websites:

Connected UX

by AARRON WALTER

Your inbox overflows with customer emails suggesting features and improvements. Instead of benefiting, you feel overwhelmed by an unmanageable deluge. You conduct usability tests, user interviews, and competitive analyses, creating and sharing key insights. Yet within months, what you learned has been lost, forgotten, or ignored by someone in a different department. What if you could sift, store, and share all your customer learning in a way that breaks down silos, preserves and amplifies insights, and turns everyone in your organization into a researcher? MailChimp’s user experience director Aarron Walter tells how his team did it. You can, too.

Seeing the Elephant: Defragmenting User Research

by LOU ROSENFELD

Silos: good for grain, awful for understanding customer behavior. Just as we favor the research tools that we find familiar and comfortable, large organizations often use research methods that reflect their own internal selection biases. As a result, they miss out on detecting (and confirming) interesting patterns that emerge concurrently from different research silos. And they likely won’t learn something new and important. IA thought leader Lou Rosenfeld explains how balance, cadence, conversation, and perspective provide a framework enabling your research teams to think across silos and achieve powerful insights even senior leadership can understand.


Illustration by Kevin Cornell for ALA

Filed under: A List Apart

Comments off.

11 Jul 2013 8 am eastern

ALA Summer Reading

A List Apart Summer Reading

AS PUBLISHER of A List Apart for people who make websites, I’m delighted to present our second annual ALA Summer Reading Issue—a deep pool of editor’s picks from the recent archives of A List Apart, sprinkled with some of our favorite outside links.

If you’re designing, developing, strategizing, or creating content for today’s multi-device web, these are the articles you need to read.

Same as last year, this issue is also available as a Readlist, suitable for beach reading on Kindle, iPhone, iPad, Readmill, or other ebook reader. So what are you waiting for? Dive in!


Illustration by Kevin Cornell for A List Apart

Filed under: A List Apart

Comments off.

25 Jun 2013 6 pm eastern

Think Outside The Silo

IN TODAY’S A List Apart for people who make websites, we are pleased to present…

Designing for Services Beyond the Screen

by ANDY POLAINE

You redesign the website for an airline, but who is designing the check-in machines, the CRM systems used by call center staff, the print materials, or the policies the cabin crew must adhere to? Like it or not, these channels are part of the overall user experience. Your website or mobile app might be great on its own, but customers experience services in totality, and base their judgments on how well everything works together. Learn to design beyond the screen. By creating visual and tangible artifacts that can be experienced and tested, you can build a bridge between business and design.

Don’t Poke the Bear: Creating Content for Sensitive Situations

by KATE KIEFER LEE

Delivering bad news is hard, but it’s part of life and business. We notify customers when we’re out of a product they want to buy, and we send warnings when people violate our companies’ terms of service. God forbid we have to send a system alert because our database was hacked, affecting every one of our users. But these things happen to the best of us. Can you be the bearer of bad news in a way that respects your customers? Learn how to create empathetic content for tricky situations, and shape your internal culture to foster human values of support, respect, and empathy.


Illustration: Kevin Cornell

Filed under: A List Apart, business, Design, User Experience, UX

Comments off.

9 Apr 2013 9 am eastern

ALA 373: Hack Your Maps, Grow Your Design Business

ala373

WE INTRODUCE new web design skills and share design business growth strategies in Issue No. 373 of A List Apart for people who make websites:

Hack Your Maps

by YOUNG HAHN

Ever taken apart a digital map? Worked with a map as a critical part of your design? Developed tricks, hacks, workarounds, or progressive enhancements for maps? Walk through a design process to implement a modern-day web map. Let’s make maps part of the collective conversation we have as designers.

Growing Your Design Business

by JASON BLUMER

If you want to grow in a sustainable, satisfying way, then you need to pay attention to how you’re growing, not just how much. After all, a bigger company isn’t necessarily a better one. Let’s look at four common pitfalls of growth in the design industry, and how to avoid them.


Illustration by Kevin Cornell for A List Apart.

Filed under: A List Apart

Comments off.

29 Mar 2013 11 am eastern

Big Web Show: Monkey Do!

IN EPISODE No. 86 of The Big Web Show, I interview Monkey Do studio’s Michael Pick and Tim Murtaugh.

Mike, Tim, and I discuss the A List Apart redesign, responsive images and type, CSS Zen Garden, organic design processes, the future of CMS systems, designing a food truck app, and more.

TIM MURTAUGH has been building web sites since 1997 and specializes in delivering standards-based HTML5/CSS templates. His eye for design and serious affinity for clean code allow him to painlessly integrate his templates into larger systems without sacrificing user experience or aesthetics. Tim started in the non-profit world, moved on to start-ups, shifted to an agency, upgraded to publishing, and from thence: Monkey Do. Tim can be found on Twitter at @murtaugh.

MICHAEL PICK approaches web design from the perspective of both art director and front-end developer. He primarily creates clean and concise design systems for websites, but is also known to get his hands dirty with Flash, HTML/CSS, and JavaScript development. Over the years he has worked as a cog in a large agency, an in-house art director, and a humble freelancer, and has picked up a few awards along the way. He holds a BD in Communication Design from NSCAD in Halifax, Nova Scotia. Mike tweets as @mikepick.

This episode of The Big Web Show is sponsored by Shutterstock.com. Get 30% off any package with discount code “BIGWEBSHOW3.”

Filed under: A List Apart, Design, Designers, development, The Big Web Show

Comments off.

26 Mar 2013 8 am eastern

Third-party metadata, honest web aesthetics

IN ISSUE No. 72 of A List Apart for people who make websites:

“Like”-able Content: Spread Your Message with Third-Party Metadata

by CLINTON FORRY

Spread your content and control its appearance on Facebook and Twitter. Use third-party metadata tools (Facebook OG, Twitter Cards) without feeling dirty.

Material Honesty on the Web

by KEVIN GOLDMAN

Kevin Goldman forecasts increased longevity for our work and our careers if we apply the principles of material honesty to our digital world.


Illustration by Kevin Cornell for A List Apart

Filed under: A List Apart

Comments off.

12 Mar 2013 10 am eastern

ALA 371: Performance is All

IMPROVE UX through front-end performance, and front-end performance through symbol fonts, in Issue No. 371 of A List Apart:

Improving UX Through Front-End Performance

by LARA SWANSON

Adding half a second to a search results page can decrease traffic and ad revenues by 20 percent, says a Google study. For every additional 100 milliseconds of load time, sales decrease by 1 percent, Amazon finds. Users expect pages to load in two seconds—and after three seconds, up to 40 percent will simply leave. The message is clear: we must make performance optimization a fundamental part of how we design, build, and test every site we create—for every device. Design for performance; measure the results.

The Era of Symbol Fonts

by BRIAN SUDA

Welcome to the third epoch in web performance optimization: symbol fonts. Everything from bullets and arrows to feed and social media icons can now be bundled into a single, tiny font file that can be cached and rendered at various sizes without needing multiple images or colors. This has the same caching and file size benefits as a CSS sprite, plus additional benefits we’re only now realizing with high-resolution displays. Discover the advantages and explore the challenges you’ll encounter when using a symbol font.

More From A List Apart

As Always…

Illustration by Kevin Cornell

Filed under: A List Apart

Comments off.