Atomic Design and Pattern Lab Part II: Design

I wanted to write a quick update on my latest website design project. I’ve been working on a redesign of my wife’s website on and off for a bit now and have found that I keep bouncing back and forth between designer and developer, designing static element collages in Photoshop and coding out components in Pattern Lab. This seems to be the optimal workflow.

The thing I’m having the most difficulty with right now is that I’m using a lot of the Sass files that come with Pattern Lab, rewriting as needed. This may or may not be the best approach. The pros include getting to see a well-designed and maintained example of BEM notation as well as a look at a wonderfully organized Sass include structure. Lots to learn from there.

What I get hung up on is that it’s somebody else’s code, and no matter how beautifully well-done it is, it’s hard to wrap my head around what’s going on when I’m not producing at the same level of code. I know this will get easier in the long run, but for now, it’s a bit slow-going. I may just download another instance of Pattern Lab, start from scratch in my current build, and just refer to Brad’s files for Sass organizational inspiration. The beauty in having no deadline and an understanding client make it easy to experiment with these sorts of things.

Coming from a print world, I’m certainly much more comfortable in Photoshop. I’m using PS as a way to demo looks and feels rather than comping an entire website. I’m more interested in animations and transitions from different browser and device widths. Photoshop allows me to just build the look I need quickly, and speed is what I’m more interested in at this point. But only after tons and tons of hand drawn sketches.

So that’s it for now. I may or may not start to post some images of my sketches. I’ll have to check with the client.

References:

Teaching is Learning

I just had a fun experience teaching HTML email design to a wonderful bunch of people. It was great speaking experience, but, more than that, I learned a ton about HTML email.

Did you know that you can style an image’s ALT text with inline CSS? Yeah, you probably did, but I didn’t. And I wouldn’t have learned that had I not stepped out of my comfort zone to teach this workshop.

Next time you want to learn something, find some people who want to learn about it as well and teach them. You’ll be surprised how much you’ll learn.

Have you taught a workshop recently? Let me know how it went.

Designing with Atomic Design and Pattern Lab

For the past few weeks, I’ve been redesigning my wife’s website using a process called Atomic Design.

Atomic Design is the web design philosophy that sees individual elements of a website, e.g. an input (<input>) or paragraph (<p>) element, as atoms that can combine to form molecules (e.g. a search or contact form), which then combine to form more complicated organisms (e.g. a site header or footer), which then combine to form a page. Brad Frost, a super-smart front-end developer whose blog I frequent and work I frequent, coined the term.

Pattern Lab is a tool created by Brad and the (also) super-smart developer Dave Olsen to help streamline the process of showing the design to clients. You can learn more about it from several sources across the world wide web.

I mention all of this because I’m curious to see how different people are using Pattern Lab in their workflow. And with that in mind, I want to publish some posts about my experience with Pattern Lab. I hope they can be informative, and with a little luck, maybe I can learn more about it as well.

Do you use Pattern Lab? Leave a comment and let me know how you use it or any thoughts you have about it. I’m all ears, figuratively speaking, of course.

Do you want to use Pattern Lab? You can start by downloading the files on Pattern Lab’s site and reading the docs. Enjoy.