Spinning jenny.

A few thoughts on the task, and the tool.


This content originally appeared on Ethan Marcotte’s website and was authored by Ethan Marcotte

Here’s a video I watched some months back:

I can’t stop thinking about it.

The article gives more context, if you’re interested. But in short, the video shows a designer sketching a rough outline onto a piece of paper, which is then placed under a camera. Once that’s done, a computer analyzes the sketch, and instantly renders a finished prototype in a browser. It created a “real” design, simply by looking at the sketch.

I’ve always dreamed of something like this, of a time we’d be able to remove the gap between concept and execution. And now, a designer can take their idea from sketch to code, in the span of a second or two.

And now that the technology’s arrived, I’ll be honest: I’m a little scared of it.


Please don’t misunderstand me: I’m someone who does a fair amount of work on, and with, design systems. And the video shows something that—well, it’s remarkable. Several of my clients have invested in tooling and automation, to make it easier for their teams to contribute to their design systems. And a prototyping tool like the one in the video would make their work considerably easier.

But I keep thinking about a design product from a few years back, one that’d been getting a lot of buzz. It promised an artificial intelligence-guided approach to page layouts, one that would “revolutionize” the web by automating the design process. After it was first announced, I noticed I was getting a lot of questions about it, in client meetings and in workshops. They’d ask, “Should I be worried about my job?”

That particular product never really gained any traction, as far as I know. But the questions it prompted were running through my mind as I watched that demonstration. In the article accompanying the video, the team behind the technology has rallied around this mission statement:

The time required to test an idea should be zero.

There’s a lot that’s appealing about this statement. But it’s also worth remembering that people live and work amidst the hours, minutes, and seconds we’re trying to streamline out of our product cycles. In other words, are we spending enough time asking ourselves about the second-order effects of these technical decisions? For example: if we could instantly create designs in a browser, what happens next? What jobs would be changed as a result?

Or perhaps more pressingly: what jobs would be lost? And can we protect them?


During the Industrial Revolution, as new machines were invented to increase output, business owners often dreamed of an entirely automated workforce—of a factory without workers. I assume their workers had different dreams.


I was thinking about the video last week, as I was finishing up my little portfolio page. Specifically, I was working on the section that outlines the reasons you might hire me, which is laid out like this:

Four reasons to hire me, appearing next to a list of some clients

Nothing especially fancy, mind; there’s a 2×2 grid of blurbs, with a list of clients that spans both rows from the rightmost column. And the code that powers the layout looks something like this:

.list-reasons {
    display: grid;
    grid-column-gap: 2%;
    grid-template-columns: repeat( 3, 1fr );
    grid-template-rows: repeat( 2, minmax( 20vw, min-content ) );
}
.list-clients {
    grid-column: 3;
    grid-row: 1 / -1;
}

If this looks a bit foreign to you—heck, it’s relatively new to me—this is a new method of creating web layouts, using a technique called CSS Grid. But putting the technical details aside, here’s the thing I was thinking about: a few short years ago, I’d need to write a considerable amount of code to create that simple little grid. And now, in ten short lines, I’ve got a finished layout.

In other words, I was marveling at how much easier this is. I think it’s safe to say CSS grid is one of the finest things to happen to page layout. It’s definitely changing my design practice, and for the better.

But I was also thinking how machine-friendly this syntax feels. I’d bet we’re not far off from WYSIWYG-style design applications that can produce quality, production-ready layout code. That’s something our industry’s never had before.

And when we do, what happens next?


You might’ve guessed that this post isn’t just about CSS grid, or just about that sketch-to-code video. Just to be clear: I think it’s wonderful to try to refine the way that we work. But as we do, it’s critical we ask ourselves what might happen to the people inside the workflows we’re optimizing.

After all, I work in an industry that’s historically had…iffy relationships with regulation, with oversight, and with protections for its workers. And maybe that’s just how things are going to be for the foreseeable future. I don’t know. But the next time we’re asked to solve a design problem with an automated solution, we should remember Ursula Franklin would likely urge us to ask, “Who reaps the benefits? Who assumes the risks?”

Because frankly, I can’t stop thinking about how much automation has changed our industry already. And I know the rate of automation is only going to accelerate from here.

At the very least, maybe it’s worth asking ourselves what might happen next.


Many thanks to Elizabeth Galle, who provided invaluable feedback on this post.


Reply via email


This content originally appeared on Ethan Marcotte’s website and was authored by Ethan Marcotte


Print Share Comment Cite Upload Translate Updates
APA

Ethan Marcotte | Sciencx (2018-04-22T04:00:00+00:00) Spinning jenny.. Retrieved from https://www.scien.cx/2018/04/22/spinning-jenny/

MLA
" » Spinning jenny.." Ethan Marcotte | Sciencx - Sunday April 22, 2018, https://www.scien.cx/2018/04/22/spinning-jenny/
HARVARD
Ethan Marcotte | Sciencx Sunday April 22, 2018 » Spinning jenny.., viewed ,<https://www.scien.cx/2018/04/22/spinning-jenny/>
VANCOUVER
Ethan Marcotte | Sciencx - » Spinning jenny.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2018/04/22/spinning-jenny/
CHICAGO
" » Spinning jenny.." Ethan Marcotte | Sciencx - Accessed . https://www.scien.cx/2018/04/22/spinning-jenny/
IEEE
" » Spinning jenny.." Ethan Marcotte | Sciencx [Online]. Available: https://www.scien.cx/2018/04/22/spinning-jenny/. [Accessed: ]
rf:citation
» Spinning jenny. | Ethan Marcotte | Sciencx | https://www.scien.cx/2018/04/22/spinning-jenny/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.