Design is the method of putting form and content together. Design, just as art, has multiple definitions; there is no single definition. Design can be art. Design can be aesthetics. Design is so simple, that’s why it is so complicated.

Paul Rand

The Relentless Rebel opening spread from Scoreboard Magazine Issue 03. You can see the magazine digitally formatted in full here.

Do not offer to handle aspects of a project in which you cannot control the quality and outcome.

This is often a lesson learned the hard way, but without a doubt an invaluable one. Essentially it means that if you take responsibility for the end result of a particular part of a project which you do not control, you could very easily find yourself in a compromising position. Not good.

The Grid

I was astonished when I learned that the designer of the aforementioned editorial team did not use a baseline grid. Their excuse was because they were uncomfortable with arranging elements within the grid— in other words, they lacked experience with the grid in general. I think this reflects a huge failure in design education: to not understand the grid is like being a mechanic thats afraid to get dirty.

The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.

— Josef Muller-Brockmann

I couldn’t imagine working with any design, especially an editorial design, without the use of a well thought out and clean grid structure. Its is essential to the process and provides a framework for which everything else relies on. With that being said, here is a breakdown of the grid structure I follow:

Baseline Grid

The measurement of your baseline grid depends entirely on the leading of your body copy font and its point size. Generally the larger the x-height, the larger the leading will need to be. Once the body copy font and its leading is decided, you can set the baseline grid to be the exact measurement as the leading. The baseline grid is important because not only does it allow for consistency with the alignment of typographic elements, but also serves as a guide for imagery. I even use this grid to determine heading sizes by adjusting the size of the heading until the cap height is aligned with one of the grid lines.

Margins, Columns, Rows and Gutters

After setting up a baseline grid, I make sure to set up the remaining template guides. I start by determining the number of columns I want to work with. This depends on the page size, but it’s always best practice to ensure whatever number of columns you decide upon, the copy stays in the range of 40-80 characters per line for readability. Also, I tend to always work with an odd number of columns— it has always proven to be more balanced and versatile when it comes to layout, and it follows the principle of the Rule of Thirds. Moving into rows: I don’t always set vertical row guides, but when I do, it generally is also an odd number and always aligns with the baseline grid.

Now, on to setting margins and gutters: as a general rule of thumb margins should be double the gutter width, and the gutter width is determined by the leading measurement. I usually double the leading measurement to determine what I want to set the gutters to.

Typography

Typography is perhaps the most important element of the design and should never be treated as an afterthought in the development process. I begin a project by reviewing the subject and immediately make connections to possible typefaces and type treatments. This means making notes and then playing with font combinations which make sense for the project on more than just a visual level; There should be a connection with the type and the subject of the project on a conceptual level.

Once the type is decided on, I always make sure to set up some paragraph/character styles in the design document (after the grid is created, of course), which I can begin to use right away while continuing to create these as the design progresses. I always make sure the leading is consistent by aligning the text to the baseline grid. I do make exceptions on elements such as cutlines, but the leading I choose for these elements always correlates to the original baseline grid measurement.

Just to give you an insight to where I am coming from on this one: while in art school, my design instructor would often hold up our projects to the light in order to examine whether or not the lines of type where consistent on both sides of the page! This taught me a valuable lesson; Working with images and type is a craft with which comes the responsibility of perfection, or as close to it as humanly possible.

The Document

Another practice that the aforementioned editorial team followed was breaking features/articles/etc. into separate documents in order for them to be reviewed individually by the rest of the team. This might be unavoidable for some teams— often the timeframe for a project is short, and therefore it is necessary to work modularly throughout the entire process.

What I have found works best is quite different though: design the project as a whole document which contains all pages and make minor revisions all at the end, while making major changes during the primary development. The advantages to this is the magazine/book/etc. will have a much more consistent feel, as it was designed as a whole. In addition to this, edits are made on a priority basis, leaving copy edits to take place at the end of the project instead of distracting the designer from the layout and artwork. It’s also great when you have a close relationship with the editor. This way, copy edits can be made in favor to the design as opposed to attempting to prevent rigid copy from breaking a layout.

Similar elements are grouped in the document on separate layers for easy editing and organization. For example: background elements go on the ‘background’ layer, headings go on the ‘headings’ layer, etc. This is provides for a smooth transition of the document from one designer to another: all elements are easy to find, and layers are locked when elements in them are not being edited.

Imagery/Artwork

When it comes to photography, the process is pretty straight-forward; Make sure images are big enough for what you intend to do with them, and always do a bit of post-processing. Even if the photo has been post-processed by the photographer, I always ensure it will print as intended. It is always a great idea to keep an eye on color levels (all print designers are aware of those dreaded color shifts, especially on colors like blue), as well as ensuring the image is in CMYK mode. It’s always nice to have the ‘okay’ from photographers or the art director to add those little touches to the photographs that will make ‘em shine.

Artwork is my favorite part of the entire editorial process. I often do the artwork for publications I work on, so I like to begin working on them in the beginning. This way, I am extra enthusiastic going into the project, and it’s a break from the more technical craft of layout/design/typography. Often, however, the artwork can change or be modified during layout. To combat this, I always make sure to place layered Photoshop/Ai documents into the project document instead of flattened jpegs/tiffs/pdf’s. This way any element of the placed artwork can be modified on the fly, then the design document can just be updated to reflect the changed artwork without breaking the flow.

Wrapping up, all imagery/artwork must be 300 dpi at the size it will be in the document. This is a rule of thumb that should not be broken (you would be surprised at how many designers think it is ok to not follow this strictly). It’s the principle here; Once you allow for lower resolution images or artwork to be placed, you are compromising the quality of the final product. These elements should be top-notch quality. Leave the low-res stuff to the local newsletters, not your professionally designed magazine.

Conclusion

In conclusion, its important to make informed decisions about every aspect of your design in editorial projects— “winging it” just will not do. Documenting the decisions you make and why is equally important. This allows you to review the process upon completion of the project and decide where improvements can be made. The end result is a continually evolving process which is refined and modified after each project.

Just got the third edition of Dan Cedarholm’s Bulletproof Web Design and am currently devouring it a chapter at a time. I am a huge fan of Cedarholm’s books, especially Handcrafted CSS (which is essentially how I learned proper CSS implementation). With its focus on standard’s based strategies, I highly recommend this book for HTML/CSS noobs and pros alike.

Visit the site at http://pashhra.org/

Structural

My previous website was build on a great CMS platform and worked alongside a Tumblr blog page I had styled exactly like my website, which was then hard-coded into the the navigation. This enabled users to visit the blog page while creating the illusion that they were still on the site. The combination worked well, but I began to see the need to consolidate these two elements. Also, there was an increasing need throughout 2011 to work with a CMS that could be handed over to clients after project completion, and the WordPress platform has been my go-to solution for this.

So, I finally decided to dive into full-on theme development and develop a dynamic WordPress theme using a starter theme by Randy Hoyt and Randy Jensen called Handcrafted WP Starter Theme as a foundation for the WordPress setup. Then, I heavily modified this by adapting it with a vanilla HTML theme of my own, which comprised primarily of the great work done by Paul Irish and team with HTML5 Boilerplate and the Normalize CSS, in addition to some frequent code conventions I like to use.

Responsiveness

Perhaps the most important objective with this project was to make the site fully responsive. I was so excited after reading Ethan Marcotte’s Responsive Web Design that I began to implement the responsive approach right away on client work and after adapting to this approach and refining its implementation, I was ready to apply what I had learned on my own site. To achieve this, I used a flexible adaptation of the famous 960 Grid System called the Fluid 960 Grid System by Stephan Bau. I like this grid system because there is much less markup needed— but, like everything I modified it to fit my needs after putting it through several projects first. The result was a custom grid system more focused on the principle of the Rule of Thirds in addition to media queries to adapt content for specified breakpoints. The standard max-width: 100% was applied to images for modern browsers, along with its IE counterpart. And finally, to fix the image quality for older versions of IE I used Ethan Marcotte’s Img Sizer script which is based on Microsoft’s infamous AlphaImageLoader fix.

Falling under the theme of responsiveness would be two additional elements which aided in this: Dave Rupert’s Fittext.js awesome  plugin and Tyler Smith’s Flexslider responsive image slider plugin. Fittext was crucial because I realized early on that the headings, primarily those of the titles below the project thumbs, would break the layout when being bumped down at smaller resolutions. The fix: Fittext, which allowed for these titles  to expand / contract with the available space. And you can never go wrong with a nice, big image slider for those featured projects: the problem is, how do you adapt an image slider into a responsive layout? The fix for this was Flexslider, which not only specifically for those fluid layouts but also ready nicely coded, easily modified and cross-browser!

HTML5 / CSS3

It was important for me to incorporate the newest technologies into the site, of among them would without-a-doubt be HTML5 and CSS3— not only for a more semantic approach, but also for the faster loading times afforded by using CSS3 for styling, as opposed to images. An indispensable tool in this process was Modernizr by Faruk Ates, Paul Irish and Alex Sexton, which served to not only enable these new technologies cross-browser and enable featured detection for sensible fall-backs,  but also serve up polyfills for things like media queries to older browsers.

Some of the CSS3 I am using is somewhat crucial to the overall UI of the site: primary box-shadows used throughout the site to make elements stand out against the background.  That which didn’t affect the UI was gracefully-degraded to a fallback, but for the CSS that was crucial to this I enabled them by targeting IE with CSS3 PIE.

Also worth mentioning in this category would be the use of Dan Cedarholm’s Bulletproof Clearfix Method, which works cross-browser and used the more semantically named “.group” markup to help with the good ole’ floated box model. Floats is something I have become quite comfortable with, but eventually the site layout will be retrofitted with the newer flex-box model.

Conclusion

This project is without-a-doubt an ongoing one (like any portfolio site should be), and I plan to continually refine and improve on its moving parts. The great thing is it is now dynamically powered on a sustainable platform which I can modify and learn from, and then implement on new web projects that require the dynamic functionality available with WordPress.