Using Layout Software for Designing for Web

Untitled Posted in Best Practices for Web Design, Custom Application Services, Mobile Web Development, User Interface Development
Written by .

Thirdwave is a development-oriented office and in such we staff very few assets with designer backgrounds.  Rather than think of this a weakness Thirdwave embraces our focus on high quality and knowledgeable application development and the ability to coordinate effectively with third party design assets. Due to this dynamic – we often find ourselves working in partnership with a third-party designer along with the end client.  As any experienced developer or designer can tell you – this relationship can be fraught with challenges as the coordinated deliveries between design and development can make or break the timely delivery of a final product for client review.  A major factor in the delivery of design assets is the format of the design files.  These deliveries can range from industry standard Adobe Illustrator (.eps/.ai) and Photoshop (.psd) files to PDFs, Jpegs or even PowerPoint decks.  One file type that we are seeing more and more from designers is a preference for delivering files with Adobe InDesign (.idd)

In Thirdwave’s history we have been fortunate to work with some of the very top design studios in Chicago – a city known for a great history of marketing and design.  One such partner who Thirdwave has worked with on a handful of enterprise-level engagements is Crosby Associates.

I sat down with Gosia Sobus – a Senior Designer with Crosby Associates with over 13 years experience – to talk about her experience in doing website layouts and comps using a variety of tools and why she prefers using InDesign.   What follows were some of the insights I gathered from her feedback.

Layout software was used first in the context of designing for print.

For Gosia, and many designers with broad industry experience, the use of layout software began in a traditional context of creating design assets for print.  In this context tools like Quark Express (which Gosia used through 2006) are the best tool for the job and an obvious choice over Illustrator and Photoshop.  Experience with Quark and then InDesign has certainly contributed to her comfort with the software in the context of designing layouts for web.

Master Pages Concept is a Key

With InDesign repeated elements can be defined once in an asset called a Master Page.  By using a Master page to build new page layouts a designer can maintain common elements such as header and footer treatments along with common fonts and paragraph styles.  The significance of this organization cannot be overstated.  Not only can common site elements as well as fonts be adjusted globally but spacing between these elements can also be dynamically adjusted from a central repository.  Need to adjust the H1 font to be slightly smaller or to have a different line-height?  No problem – once these font styles are defined they can be adjusting in one location and these changes will DYNAMICALLY play out throughout the document wherever these styles are in place.  Crucially – the effects of these adjustments would affect all site elements around these elements as well.  Which brings us to…

Master Pages = Templatized Design

Most web projects (and content management systems) utilize the concept of page templates.  A page template is a common structure that operates as a framework for the repeated elements of a page (header, footer, navigation) as well as for the unique elements (typically the body content).  By utilizing a Master page to mock up subsequent pages a designer and developer can be confidant that all pages are in line with the overall page templates.

Master Pages = Rapid Revisions

Just as master pages create efficiencies in maintaining the integrity from page to page they also give the designer a tool for rapid prototyping of pages with a high confidence of stability from page to page.  Case in point – a client wants to see 3 different treatments of a content feature.  By using a stripped down master page it is easy for the designer to just swap out the elements that are unique between the three pages while ensuring that margins, fonts and other common elements are stable between the three treatments.  Need to make a small adjustment to one element that affects the spacing – adjusting spacing or paragraph styles will also affect elements around the adjustment.  In addition to these efficiencies InDesign has the distinct advantage of being able to render a multipage document for client review (typically PDF) with no additional work.  Just export to PDF and you’ve got a mockup of any length as needed.  The same process with Photoshop and illustrator means rendering each page and then combining them to a pdf file.

Pixel Accuracy for Content Block Dimensions

In working with web assets content blocks are often explicitly placed and explicitly sized.  InDesign supports this workflow by allowing the designer to place assets via the use of text fields for exact locating of images or other design elements.  By utilizing these fields a designer can easily adjust content according to a broader content alignment vision.

InDesign Styles = Global CSS?

Not exactly…  BUT, the concepts are so close in reality that styles defined by a designer in an InDesign file can and should inform CSS definitions in UI implementation.  By aligning these disciplines through the global application of font and paragraph styles we see a dialog between design and development that is more and more speaking the same language.

The Right Tool in the Right Hands

Here at Thirdwave we embrace tools that add to the efficiency and accuracy of our projects.  Increasingly, on projects of larger scale, we find the efficiencies gained with designers using a layout tool to be quite significant.  Even if the implementation of design into code is unchanged, by optimizing the mock up and client review phases and allowing for rapid revisions we see better results in overall project health.  The stability of these files that are finally delivered is a definite perk on our side as we do not need to clarify discrepancies that are more prevalent with software that is less centrally structured.  We here at Thirdwave look forward to more tools that help streamline design and client review documents into finished web applications.

  • Graphic Geek

    Now that’s how web design should be implemented