Tags: workflow

45

sparkline

Painting with Code : Airbnb Design

Very clever stuff here from Jon in the tradition of Bret Victor—alter Sketch files by directly manipulating code (React, in this case).

I’m not sure the particular use-case outlined here is going to apply much outside of AirBnB (just because the direction of code-to-Sketch feels inverted from most processes) but the underlying idea of treating visual design assets and code as two manifestations of the same process …that’s very powerful.

CodePen Projects Is Here! - CodePen Blog

Incredibly impressive work from the CodePen team—you can now edit entire projects in your web browser …and then deploy them to a live site!

Should you learn [insert shiny new tool]? | Zell Liew

This ties in nicely with the new talk I’m doing on evaluating technology. Zell proposes a five-step process:

  1. Figure out what [insert tool] does.
  2. Figure out what sucks right now
  3. Determine if it’s worth the investment
  4. Learn it (if it’s worth it)
  5. Differentiate opinions from facts

Most of the examples he gives are tools used before deployment—I have a feeling that different criteria should apply when weighing up technologies written directly in user-facing code (HTML, CSS, and JavaScript).

Mood boards in a content-first design process — Thomas Byttebier

How style tiles can work great in combination with content prototypes:

Surprisingly, it helps clients understand the HTML content prototype better. They now clearly see the difference and the relationship between content and design. In general it helps me explain the content-first process better and it helps them make more sense of it.

Resilient Web and Tools — David Larlet

David picks up on one of the closing themes of Resilient Web Design—how we choose our tools. This has been on my mind a lot; it’s what I’ll be talking about at conferences this year.

That’s part of my job to ease processes and reduce frictions. That’s part of my job to take into account from the early beginning of a product its lasting qualities.

There’s a very good point here about when and how we decide to remove the things we’ve added to our projects:

We spend our time adding features without considering at the same pace the removal of useless ones. And still the true resilience (or is it perfection Antoine?) is when there is nothing more to take away. What are you removing on Monday to make our Web more resilient?

Chasing Tools - TimKadlec.com

I’ve been thinking a lot lately about how we evaluate technologies (it will be the subject of my next talk). Tim is thinking along the same lines. I like his list of four questions to ask when weighing up the pros and cons of any web tool:

  1. Who benefits from the use of this tool and how?
  2. Who suffers and how?
  3. How does it fail?
  4. Does the abstraction feed the core?

Web development as a hack of hacks - QuirksBlog

PPK reads a Hacker News thread so you don’t have to.

On Building Component Libraries | Clearleft

Mark has dumped his brains!

Seriously, there is a lot of thought that has gone into this, and it’s just the beginning: Mark recounts the experience that Clearleft has had with delivering pattern libraries, laying the groundwork for releasing the library-generating tool that he has been building.

Watch this space.

How to lint your Sass/CSS properly with Stylelint — Creative Nightly

Linting CSS seems like a very good idea, especially if you’re not the only one writing the CSS. This guide is going to come in very handy when I give it a try.

» The Power of Responsive Design Sprints

Really interesting to see how Jason, Lyza, and co. are handling the process side of responsive design by using Agile sprints. This is how we’re doing it at Clearleft too.

There’s a really good point in here about starting with small-screen sketching:

For most of the sprint, we focus on small screens. We’re often asked how things will work on wider screens early in a sprint, but we try to resist thinking about that yet.

If you’ve managed to organize your life to fit inside a New York City apartment, you’re not going to have any trouble adjusting to a big house in the suburbs. The same is true of responsive designs.

If you nail the small screen design, the larger sizes will be easy by comparison.

CarbonGraffiti | When agile’s not creative

Jon writes about the difficulty of maintaining an overall design vision when you’re working to an agile methodology, slicing up work into sprints.

This pairs nicely with Mark’s recent podcast episode: On Agile.

Where visual design fits in a process – Occasional writing from @rivalee

I think the distinction between ‘how it works’ and ‘how it looks’ is blurrier than we think.

Share podcast episodes from iOS podcatchers directly to Huffduffer by Jan Beck

A walkthrough on using the iOS app Workflow to huffduff audio files from just about any app.

Some thoughts on “designing in the browser” | The Haystack

An important clarification from Stephen:

You don’t actually design in the browser

When I speak of designing in the browser, I mean creating browser-based design mockups/comps (I use the terms interchangeably), as opposed to static comps (like the PSDs we’re all used to). So it’s not the design. It’s the visualization of the design—the one you present to stakeholders.

Exactly!

Personally, I think it’s as crazy to start in the browser as it is to start with Photoshop—both have worldviews and constraints that will affect your thinking. Start with paper.

Using Photoshop in Responsive Workflows - Web Standards Sherpa

A nice summation by Dan of when it makes sense to use a graphic design tool like Photoshop and when it makes sense to use a web browser.

Robin Rendle › A Visual Lexicon

Some great thoughts in here about web development workflow and communication between designers and developers.

I believe that the solution is made up of a variety of tools that encourage conversation and improve our shared lexicon. Tools such as styleguides, pattern libraries, elemental and modular systems that encourage access not only by developers, but by designers, shareholders and editors as well.

Notes on a responsive Guardian redesign – Lozworld™

A great write-up of the design process behind The Guardian’s responsive site. It’s really gratifying to see UX designers talking about performance.

There are no small changes | Inside Intercom

Des is right, y’know.

Scope grows in minutes, not months. Look after the minutes, and the months take care of themselves.

Reorganization by Trent Walton

Trent hammers home the point that the kind of compartmentalisation that’s traditionally been part and parcel of the web dev workflow just won’t cut it anymore.

A Responsive Day Out, Brighton by Hydrant

A nice write-up of the Responsive Day Out with all the right take-aways.