Designing with Code
Chris Lee
Lesson 30
Some designers are terrified of touching code and others simply prefer other tools. Many of those who try it out, though, discover that web technologies are not only for implementing production-quality applications: they are immensely powerful in the design stages, whether for building something from the ground up or for prototyping an existing vision!
As a self-proclaimed hacker, perhaps you'll start with a leg up on this. Put a solid understanding of design and code together and you may well find that each skill amplifies the other.
-
A Practical Guide to HTML & CSS
Take a few moments to refresh your HTML and CSS knowledge, or, if you don't have a web development background, pick up some basic skills. Knowing web technologies is incredibly useful for design and prototyping, even if your final platform if not the web. Make sure you know at least the skills discussed in lessons 1-7 of the beginner's guide.
-
Emmet
Make sure to download the Emmet plugin (previously known as Zen Coding) for your favorite text editor (if you don't have one, try Sublime Text), which will allow you to write HTML and CSS at lightning speeds. Read the documentation and figure out the Emmet shortcuts for creating an HTML document template, HTML elements, and CSS rules.
Then try creating a new design project from scratch using code. Maybe it's time for a new portfolio! Create the HTML structure first and fill it in with some content. Style it with some basic CSS, and then repeat! Building a design in code makes it incredibly easy to iterate by just tweaking values. As you add more content, your containers will expand to fit. Can't do that with Photoshop! -
Discover DevTools
Any good craftsman knows the tools at his disposal. The various popular browsers offer their own version of developer tools, which are immensely useful for designing with code. I'm just a bit biased, but prefer Chrome, and it happens to have a great set of dev tools. Try out this quick video course to learn how to inspect DOM elements (the webpage items that your HTML generates) and manipulate CSS with the dev tools. If you haven't tried something like them out before, wait until you see what these tools can do and you'll be amazed.
-
CSS3 Animation Cheat Sheet
UI design is not just about how something looks, but also how it feels. Animations can be a great aid for a creating a certain feeling with a UI. With CSS transforms animations, we are better enabled than ever before to easily design and prototype with motion in mind. You can learn about transforms and animations at the advanced half of link #1, and then visit this link to get yourself thinking about creative applications of them. With great power comes great responsibility: double-check yourself before using animations.
-
AngularJS
Once you have a good handling of HTML and CSS, a natural next step is to learn some JavaScript to add real data and interactivity into your UI prototypes. You may already have an understanding of JavaScript; if not, try out one of the many fine tutorials out there. Afterwards, give AngularJS a shot! It's a JavaScript library built for production-grade web apps, but features like two-way binding between HTML and data make it a wonderful tool for prototyping. The more functional a prototype is, the better it can relay a design vision to a teammate; better yet, good enough prototype code can set a foundation for a real implementation! Try designing a nice to-do application UI in code and using a few lines of Angular code to actually implement the ability to create new to-dos.
Chris Lee
Interaction Designer, Google
I'm an interaction designer working on Google Chrome. I think technology should help regular people do meaningful things. I craft things mostly with code, sometimes with paper, and with Photoshop only when necessary. You can find me on the web here or in real life in San Francisco.
