Frameworks and tools have pitfalls

Possible solution:

Analogy for Atomic Design:

Pattern Lab

https://patternlab.io/

Dave Olsen

  • A design system builder
  • your comprehensive interface design kit

static site generator

At its core, Pattern Lab is a custom static site generator that constructs an interface by stitching atoms, molecules, and organisms together to form templates and pages.

component library

Pattern Lab serves as your project’s pattern library and frontend style guide, but you’re simultaneously able to see components abstractly and in context.

pattern starter kit

Pattern Lab provides a whole slew of patterns just to get you started. Don’t use them all. You should use Pattern Lab to create your own atoms, molecules, organisms, templates, and pages.

viewport resizer

It’s our job to make sure our designs look and function beautifully across a whole slew of Web-enabled devices. Pattern Lab provides a robust viewport resizing tool to help you create great designs across all screens.

annotation tool

Pattern Lab provides a way to annotate your interface to better communicate design and development decisions to clients and team members.

auto refresh tool

Pattern Lab can reload your browser automatically whenever you save changes to patterns, images, CSS or anything in your project. Make a change and see the results instantly.

page follow tool

Testing across multiple browsers and devices is tedious. Page Follow streamlines the development process by syncing navigation from one browser with any other browser connected to the same Pattern Lab site.

Set expectations

Abandon the waterfall process

IA Design and Dev should be working together from the start

Interface Inventory

collect unique interface design patterns

  • Document your interface
  • highlight inconsitencies
  • establish scope

 


Bruno Amaral

I am a Digital Strategist, divided between tech and creativity, working for the Lisbon Collective and teaching in the Masters Course of …

Select one of the pages in this story UXLx - User Experience Lisbon 2015

Stephen Wendel
communication 3 strategies for behavior change

Stephen Wendel 3 strategies for behavior change Intro supporting conscious choices fitbit opower hellowallet as well as other companies and agencies who …

Bruno Amaral
Bruno Amaral
Posted on 7 June, 2015
Lisa Welchman
communication Are we architecting the information age?

book: managing chaos …

Bruno Amaral
Bruno Amaral
Posted on 7 June, 2015
Brad Frost
communication Atomic Design

Frameworks and tools have pitfalls Possible solution: Atomic Design with @brad_frost at #uxlx pic.twitter.com/gz4XOe3Gc8 — Rafa Torres (@RafaTorres) …

Bruno Amaral
Bruno Amaral
Posted on 7 June, 2015
Josh Seiden
communication Building innovation in real time

hashtags show up in 2007 but twitter only added support in 2009 Weight watchers example. “I’m a coach, i’m real.” the system is not …

Bruno Amaral
Bruno Amaral
Posted on 7 June, 2015
Mike Atherton
communication Designing with linked data

Tim Berners Lee Defined a system of decentralised information that could be connected together. And We built … websites with ugly gifs. For us, it is …

Bruno Amaral
Bruno Amaral
Posted on 7 June, 2015
Abby Covert
communication Information architecture for everybody

Our world is full of messed up stuff that causes a lot of questions as to what we do as designers, marketing, etc. A large part of this mess is …

Bruno Amaral
Bruno Amaral
Posted on 7 June, 2015
Josh Clark
communication Magical Ux and the Internet of things

Interaction is moving off the screen and into the environment around us. Cut the steps between thinking and doing — steven ____ ? We tend to think about …

Bruno Amaral
Bruno Amaral
Posted on 7 June, 2015
Marissa Phillips
communication Separation Anxiety: Messenger from Feature to Standalone App

About a year ago, most people didn’t know that Facebook had a separate app for messaging, and Messenger didn’t offer much that you couldn’t already get …

Bruno Amaral
Bruno Amaral
Posted on 7 June, 2015
Stephen Hay
communication The art of deception

uxlx.zerointerface.nl people who stand to gain something from you have motive to deceive you I <3 Deception Deception can be found in a number of places …

Bruno Amaral
Bruno Amaral
Posted on 7 June, 2015
communication Wayfindr

Wayfindr jumalis_: Now @the_uMe speaking about #wayfindr at #uxlx. Service that enables vision impaired people getting around London. @teachmeuxsensei: …

Bruno Amaral
Bruno Amaral
Posted on 7 June, 2015
Nicole Fenton
Web Words as material

Nicole Fenton Words as material What’s the number one thing that sabotages projects for you? silos miss communication client not communicating needs …

Bruno Amaral
Bruno Amaral
Posted on 7 June, 2015
Subscribe

Enter your email to get a weekly digest of new posts.