Designing for the web isn’t easy—especially across designers and teams. At Rev-D we tap into tools and techniques that help keep us organized and efficient.
Here at Rev-D our process for creative development is adjusted to fit the type of project we’re working on at any given time. Though that process holds some standard methodologies, we’re always looking to improve upon our workflow to help projects go more smoothly, save ourselves time, and ultimately to keep ourselves sane when projects and resources overlap. When developing creative for anything from social conversation calendars to full-scale web designs, we try to keep consistencies across the board so that our flow remains logical and easily understood by all members of the creative team.
Though there are certainly many ways to go about creative development for digital products, we have stayed rather loyal to our integration of Adobe® products in our working process. Though there are applications like Sketch® and methods like in-browser design/development, we find that Photoshop® and its siblings work best across all designers and departments as it allows us to share a common language across the agency.
In recent years/months, Adobe has introduced and improved upon both Smart Objects and their integration with Cloud Libraries to help creative teams share assets and keep a solid hierarchical logic to the way we construct and share our designs. Though we’ve been carefully calculated in the way we integrate these new technologies, we’ve found that they help improve our workflow, communication between designers, and even more importantly—our communication with both internal and external developers who usually appreciate the extra attention to detail.
I’m a nut for organization and anyone in the creative department will likely tell you the same. I find that the up-front work of meticulous organization benefits me and the entire team as a project progresses. The one method that we’ve integrated is the use of Smart Objects with nested Layer Comps. By using this method to design modules that reuse structure, size, and layout throughout a design (i.e. product listings, thumbnail images, slider graphics, etc.) we are able to standardize designs with easily modified content and view states.
In Figure 1, you can see the content structure of an example product listing page. Each one of those products is a single universal smart object that is duplicated throughout our PSD. The content’s view state is then being controlled through the use of Layer Comps in the element properties inspector (Figure 2). Again, this allows us to structure out content in a very clean, universal way that shares all dimensions and layout in a single place — avoiding inconsistencies and the painful process of fixing 40 iterations of a stray pixel miscalculation when you realize the error 99% of the way through a project.
The additional beauty of these Smart Objects—reasonable file weight permitting—is that we can share and reuse them across separate PSDs through Cloud Libraries. This allows us to break our individual page designs apart into separate files, allowing for better efficiencies in collaborative projects, without the fear of consistency issues or redundant work. We’ve particularly found them useful across global headers, navigation, and footer designs for websites—particularly when we build in consistent design treatments and menu states using nested Layer Comps.
Though this is just one small part of my obsessive, compulsive, and beautiful file structure methodologies, hopefully it gives a bit of insight into our working process and some useful information for new ways to work in your Photoshop files.
973.539.2727 | 20 Headquarters Plaza, Morristown, NJ 07960
©2020 Revolution Digital