CRIBID.
Yep, this is what I’m calling designing in the browser now. An overview of the process goes something like this:
- Research – Define design objectives, branding, audience, content architecture
- Style Guide – Create visual language using style tiles, moodboards, etc
- Get it into the browser – Create HTML/CSS layout using visuals defined in style guide
- Iterate like hell – Work with team on layout and design, going back to Photoshop to create graphic elements as needed
Here’s why this approach gets results:
Responsibly Responsive
A modern website should be responsive in a few different ways. Responsive has come to mean being able to display content no matter the device, and this is an excellent start. But in a modern web design workflow, responsive should also be extended to mean “the flexibility to handle different types of content throughout the product’s lifecycle.” In addition to careful planning at the onset of the project, this approach is made easier by getting the design into code as fast as possible.
Design and Development Cycles Overlap, Creating Efficiency.
The less time you spend creating something awesome, the faster that thing gets to exist in the world. Efficiency can’t be understated in web development since budgets and timelines are always a factor, no matter how large or small the project is. In this model, the design and development cycles overlap instead of existing in entirely different universes, so the timeline of the entire process is reduced.
Iterations are not the same thing as revisions.
Revisions can kill a timeline faster than you can say “I just have one or two small tweaks.” Iterations, however, aren’t big scary things that hide under your bed, they are a powerful part of a modern web design process and ultimately create better results. Imagine a project where there are 250 revisions. That’s a lot of revisions. In fact, you’d probably fire that client after the 200th (or 20th?) revision. But with this approach, iterations are GOOD – they solve problems and create solutions that work in the best possible way. Since we’re already in the browser and our design is relatively simplified, its less “expensive” to test out a different direction on a button, or apply a sweeping font size bump throughout the design, or whatever. Iterate like it’s going out of style (but don’t worry, it’s not).
Collaborations are easier
Ever try passing PSD files back and forth? Nope. But working on CSS as a team is much more reasonable and changes are seen instantly, allowing for faster feedback and iterations.
What About That PSD?
Sometimes, there is a case to be made for full mockups. I won’t go into when that is the best fit – you’ll know yourself when the client or project is going to call for a PSD. But I will say that Photoshop is a graphic design tool – for graphics – not a layout or web design tool for creating websites. Granted, we’ve hijacked it for for the past 15 years (?) to play the role of the magic web design layout tool, but that doesn’t mean it is the best tool for the job. My suggestion is to let the speed of writing modern CSS do the heavy building and let Photoshop do what it does best – work on images, branding, overall mood, and creating graphics.
