Photoshop is the weapon of choice for ZURBians when it comes to visual design, but there's a love/hate relationship between Adobe's flagship product and the web design community. We've all spent too much time using the bells and whistles that come with the program, and wasted time in the beginning of a project. Working with Photoshop can be tedious because there are so many different ways to skin the cat. It's key to have a workflow that you go to every time.
By the time the designers at ZURB fire up Photoshop to lay down the details, the content and layout have already been nailed in sketches and wireframes. We each take slightly different approaches when we begin working in Photoshop, but all end up at the same final goal. The key we've found for being quick and consistent in the first hour of a visual design is having a consistent plan of action:
The Grid is in Our Brains
All of us have the grid in mind when we start because our wireframes follow the same grid. The content has been blocked out based on the grid, so we can focus on the details of the visual design. We tend to stick to a 960px grid that can be split into 16 columns. This gives us a killer starting point when we're trying to quickly block out the main content areas.
We use a PSD with our grid already in place. I like mine set as light blue dashes.
Inspired by Color
Connor, Dave and I spark ideas for quick design directions by coming up with different backgrounds for each layout. We go through nine or ten iterations and move forward with the most promising ideas. We're not over-thinking the decisions made during the this first hour because the goal here is pinning down the visual look and feel we want to convey for our layouts. The fine details are added once the strongest directions are found. After our backgrounds are nailed down we start adding containers and blocking in the content.
By creating the background and container first I'm setting the visual style of the rest of the design. — Dave
Version one of a background idea.
Version two of a background idea.
Focus on Content First
Before any colors or visual directions are plotted out, Jon and Anthony get the content in the file. They aren't thinking too much about what mood or feeling the layouts will convey just yet. Having this solid starting point will enable them to quickly change design direction without needing to block in the content again. Getting the content down is quick, the next steps in their process are exploring color and font ideas. From there the container and more detailed visual layers are added.
I start with only content so that when I apply styles I can multi-select similar headings and change the font size, color, etc. simultaneously
— Anthony
Jon focuses on content placement to save time when the visuals come into play.
Find the Middle Ground
Tanya takes a varied approach where she sees benefits of both worlds. Her first hour starts by blocking out a main background and font color, along with the site or navigation container. This helps her focus her decisions and make sure the layout fits within the visual style that is unfolding. This approach lets Tanya try different ideas quickly without fully committing to a final layout of the content. Once she decides on the designs to move forward with, Tanya adds more detail to the layout by using gradients, shadows, textures, or patterns.
Having a goal in mind for the visual style keeps me moving and everything looking cohesive. Getting the content in there at the same time helps tell me if it's working or not, sort of like trial and error.
— Tanya
Tanya uses color and content to build layout ideas.
Working Towards a Goal
Each ZURB designer comes into Photoshop with a slightly different approach in mind. We use our separate processes to reach the same ultimate goal; designing kick-ass layouts that solve specific problems for our clients and products. As always, quantity is key when we explore ideas in Photoshop. Don't worry if you use tons of unorganized layers, throw them into groups to quickly organize as you go. The quicker we work during the first hour of a project, the more value we can put into the details of the best directions.
We're always looking for new tricks to speed up our process. We'd love to hear how everyone else uses their first hour in Photoshop when starting a new visual design for a project.