What Our First Hour in Photoshop Looks Like by ZURB

What Our First Hour in Photoshop Looks Like

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.

12 comments

Ivan says

Great article. Good for profiling oneself even more in design process :) Thanks a bunch.

Sugarenia says

I found out that what works best for me is to beat the blank page phobia by just keep doing stuff.

So I don't think of details too much at first - I just throw the content in, create grey boxes and keep my mind and mouse hand occupied and off the deaded "OK, what now?".

After a while, the design starts taking form almost on its own.

I'm also notorious of being highly sentimental in this phase, questioning myself and my skills in every step. They key there is to start visualize the final design, and then just reverse-engineer it to existence :)

Ricardo says

Great article! I also start with navigation and main containers, but what gives me more headaches is designing big forms, any tips for this? :)

Geof Harries says

I always start with content first, which for applications is mostly CRUD forms, reports or data grids, then work outwards. I learned about this technique eons ago (2004) from 37signals' epicenter design article and have used it consistently ever since. I find that if I ever "retreat" to chrome (i.e. navigation) first, the design process suffers and I end up spinning my wheels.

Chris (ZURB) says

@Ivan- Your welcome, glad you liked the article!

@Sugarenia- Your right man, when the design inspiration isn't coming it's best to just keep going and saving different iterations. Each idea can lead to new ideas. It definitely helps to have some of the core decisions made through wireframes before moving into the visual design. It's okay to question yourself during a design, this helps you grow as a designer.

Chris (ZURB) says

@Ricardo- Hmm, designing big forms... The first thought that comes to mind is to make the forms shorter if at all possible. If you absolutely can't shorten the form, just stick to a style that isn't too overpowering. We tend to slightly tweak the default style and add a small inner shadow to give the inputs depth.

Another key to designing a nice form is making each input area the appropriate size for the content that will be entered. Forms where each input area is the same size can seem daunting and hard for the eye to scan. Also remember that most people read from top left to bottom right, so be careful about staggering inputs across the page. Let them flow naturally down the page so the eye doesn't have to jump around.

Hopefully this answers your question. Any other specific questions about forms?

Chris (ZURB) says

@Geof- Good article, I would agree with you if there were no wireframes done before visual design. When the wireframes have been nailed down, the visual design process in Photoshop can be a little more flexible. The key is getting into a groove that you can repeat for each project- this makes things go quicker in the beginning of visual designs.

Geof Harries says

I typically skip wireframes altogether and get right to the high-fidelity concepts, so that's why "epicenter" is my chosen approach. There's still some minor whiteboard or paper sketching to flush out the basics, but I've just found that wireframes, no matter how well thought out or designed, often cause more harm than good.

Greg says

I definitely start by adding in the colors that I want to give the site the feel that I am looking for. I spend the first hour somewhere in between Chris, Connor and Dave's backgrounds and Tanya's color and font.

Whatever the strategy to get things going, I continue to use the "timeboxing" concept that I learned at ZURB last year. Its a great way to keep you and your team focused on the goal and avoid getting lost in minor details.

Chris (ZURB) says

@Geof- We go through two phases of wireframes. The low-fi ones are pretty loose and quick, meant to block out types of content on the page and hint at layout choices. After that we go into something similar to your high-fidelity concepts, called Hi-fi wireframes. These wireframes aren't quite as detailed as the hi-fi concepts you do, but they tend to match pretty closely to the final layout of the visual design.

It's awesome to hear different approaches to the design process. There are many ways to skin a cat and its great to find a path that works best for you.

@Greg- Heck yeah man, timeboxing FTW! It helps get you going and lights that fire under your butt to get things done.

ZURBapps

ZURBevents

ZURBexpo

ZURBjobs

ZURBlog is where we discuss product design, business and strategy.