Last week I had the opportunity to interview Chris Coyier from css-tricks.com and he gave us his approach on css-coding. In that interview he describes how his coding process can be resumed in five steps which I wanted to review again for you in this post.
Chris: The coding process is just one step in the larger design process, which goes a little something like this:
- Look at and read as much of the content you will be designing for. Look at and read content of related subjects. Think about who the content is for. Think about how the content will be used. Mix all that together in your mind and sleep on it.
- Sketch and mockup ideas. Starting on paper is ideal because it frees you from thinking about tools and lets you focus on concept.
- Convert the best of your mockups into a working site. This is the technical part I write about the most, which I really love but is only one of the steps in the design process.
- Test the design as throughly as possible. Not only technical does-it-look-right-in-all-browsers testing, but have your friends tell you what they think. Watch your mom try to use the site. You will absolutely find things you can improve doing this.
- Release the design upon the world and see how it goes. Ask for user feedback. Make changes. Tighten things up. In print design, once your design hit’s the press it’s all over. Web design isn’t like that. It’s fluid. Things can (and should) be constantly changing for the better.
Do you agree with Chris? How is your coding process?
I like Chris’s approach, it’s very similar to mine. I espeically love watching my mom or my wife (or anyone else who isn’t very “technical”) try to use a site, super valuable insight!
yes but… what about css coding? I think the content of this article is very trivial, or its title is wrong…
Agreed with 2Boy. The title of this post is very misleading.
#1 is incredibly important, and it sometimes requires skills that are not related to coding. But these skills are not out-of-reach. How does someone’s skill and experience in coding influence these first steps of their process? What kind of notes do you make?
Yeah these aren’t specific tips for coding CSS, but rather the process for design in general for which the coding process is only a part.
I think the most important part is the early steps. “Open Photoshop” is not step one =), that will only limit you.
Is it just me, or is the interview link broken? There appears to be an extra https://www.snap2objects.com/20 at the start of it…
@Andy the link is fixed now sorry for the inconvenience.
@Boy & Niall: guys there is no intention of misleading, is a review of an css centered interview with a professional, and those steps are the ones he uses when he codes, and he always does it in css. They might be rather general but as Chris said the coding process is just a part of the whole design process 🙂