Designing in the browser has all sorts of benefits, like producing more accurate, comprehensive results and removing the extra step of converting from image file to markup and CSS. But even sites designed in a browser still require pasting in content, faking interactions with the server, and creating placeholder JavaScript that isn’t usable on the live site. Wouldn’t it be nice if we could go from just designing layouts and interactions to designing the whole client side of the application during the same process? We can, says Garann Means in the first of two articles explaining how Node.js can streamline your design process.
Node at Work: A Walkthrough
In “Even Better In-Browser Mockups with Node.js,” Garann Means explained why Node.js makes designing applications easier and more efficient, and how to get started. Now it’s time to see your new design process in action. In this walkthrough, we’ll build a feature for a mock art store, complete with live demo and GitHub repository. Follow along at home (or in your cubicle) and you’ll have a mockup that mimics the interactions it will have with its production server precisely on the client—without the need for hard-coded data or temporary workarounds.
More from A List Apart
To Ignite a Personalization Practice, Run this Prepersonalization Workshop
Looking to tailor your UX to your individual users’ needs? Colin Eagan and Jeffrey MacIntyre have a workshop framework for you!
The Wax and the Wane of the Web
Ste Grainer takes a brief look at the history of the web, where we are now, and how we can shape its future.
Opportunities for AI in Accessibility
In this article, Aaron Gustafson muses on some of the many ways we can—and should—harness the capabilities of AI to create a more accessible world.
I am a creative.
A List Apart founder and web design OG Zeldman ponders the moments of inspiration, the hours of plodding, and the ultimate mystery at the heart of a creative career.
Humility: An Essential Value
In this excerpt from In Fulfillment: The Designer’s Journey, Justin Dauer ruminates on the past and the importance of keeping an open mind.
Personalization Pyramid: A Framework for Designing with User Data
Colin Eagan and Jeffrey MacIntyre offer a “ground-up” approach to implementing personalized digital experiences that are intentional, ethical, and technologically sound.
Mobile-First CSS: Is It Time for a Rethink?
Is mobile-first CSS always the best option? Patrick Clancey explores the pros and cons and lays out an alternative.
Designers, (Re)define Success First
Learn how to engage stakeholders, focus on impactful objectives, and measure the results in this template for ethical design.
Breaking Out of the Box
What can we do with thirty pixels? Windows Controls Overlay frees us from 40 years of history telling us how apps should look.
How to Sell UX Research with Two Simple Questions
Seriously, do not ever design screens again without first answering these questions: what are the objects and how do they relate?
A Content Model Is Not a Design System
Why do so many content models still look more like design systems rather than reflecting structured data? Mike Wills takes us on a personal journey as he examines his own past experiences and invites us to conceive content models that articulate meaning and group related content together for use on any channel.
Design for Safety, An Excerpt
In this excerpt from Design for Safety, Eva PenzeyMoog discusses concrete ways you can incorporate safety awareness into your design processes.