If a friend or client came and showed you their website and said “What would you do differently?” how would you begin? Would you open up photoshop or sketch? Would you start installing a new loca. WordPress instance? Why not just toggle dev tools open and begin manipulating their site live?
In music, a jam session is one or more musicians playing together to discover sounds, exchange ideas and just enjoy the craft. It’s purely creative and not focused on production. While graphic design has some similarities, this process hasn’t really made it into our day-to-day web design workflow. Using the browser’s dev tools, you can manipulate anything you want on any webpage and even save those changes to your local filesystem. Unfortunately your average webpage is a complex “shared space” of overlapping styles and scripts and working in it can be unwieldy and cumbersome. My goal with this session is to explore some ways to make the kinds of things you might want to do on-the-fly faster and easier to express so that we can ultimately get to a point where we’re comfortable jamming out with our team or a client watching and participating.
Topics include:
– How do I bring ideas and work I’ve done in previous projects into a jam session?
– How can I reduce the complexity of adding, removing and restyling elements so I’m not slowing down the conversation?
– How do we take a snapshot of our work and come back to it later?
– How do I leave the session with a list of actions I can move forward with?
While this session isn’t devoted to any particular CSS or JS technologies, demos will very likely include examples of:
– CSS Grid layout & display:contents
– Tagged template literals in javascript
– CSS shapes (clip-path, shape-outside) and filters
– CSS custom properties
Our canvas is not a design program or a specific framework, it’s the browser. That’s where we work and that’s what we need to know deeply and I’m convinced that learning how to “jam” in the browser will make us all better, more confident web designers.