The Mario Blog
Gulf News: The design style guide as iPad app

TAKEAWAY: Now that Gulf News has switched formats to become a Berliner, the next step was to create a style guide that would describe every aspect of the design, to insure sustainability and continuity. Here is Gulf News’ style guide, plus valuable tips for those considering the creation of style guide as an app

TAKEAWAY: Now that Gulf News has switched formats to become a Berliner, the next step was to create a style guide that would describe every aspect of the design, to insure sustainability and continuity. Here is Gulf News’ style guide, plus valuable tips for those considering the creation of style guide as an app

blog post image

blog post image

blog post image

blog post image

In what may constitute a first, our style guide for Gulf News is also an app.

Now that Gulf News has made its successful switch from broadsheet to Berliner format, and that we have carried out the first of what becomes a constant evolution of change and tweaking, the next necessary step is the creation of the style guide that explains the philosophy behind every step of the design, offers stylistic details, explains the grid, the typography and color palette.

Beyond that, a good style guide presents editorial philosophy for each section so that anyone reading the manual can, indeed, produce the section and do it in such a way as the editors originally conceived it.

Working closely with Miguel Gomez, design director of Gulf News, our Garcia Media art director/project manager,Reed Reibstein, has had the main responsibility to write and to design the style guide that is now ready for distribution to members of Gulf News’ team.

One advantage of a style guide in the form of an app is that it allows for the ever present corrections and alterations.

We now have produced version 1.0, which is a solid, detailed manual to the new look and editorial philosophy.

Style guide sections

The style guide is divided into such sections as: 

Design philosophy—The Gulf News’ design strives to be described as smart, simple, clean, consistent and organized.

General guidelines—Key information and strategies for the entire Gulf News design: grid, color, type and layout philosophies.

Story structures—These are the building blocks of the design, starting on the front page and adapting to each section.

Front Page—The most prominent page in each day’s issue, the front page features several unique elements as well as its signature variable color scheme.

Then a section by section description and detailed visual presentation of key pages and how to execute them properly.

An example section description reads like this:

“The Views” aims to explain and to review the complexity of the news and topics of the day, to interact with the readers and to allow for various voices and opinions, and to help the reader plan his day.

The value of a style guide

A newspaper’s style manual is as effective as how it is consulted by those in the newsroom responsible for its content.

Over the years, I have been involved in the creation of hundreds of these style guides, some more useful than others.

Key to a useful style guide is the table of contents or navigator.  For the editor seeking an urgent answer to a question—such as, What’s the style for pull quotes?—the manual should provide easy access to the answer.  I have insisted every time that we make the table of contents as specific and detailed as possible.

Then comes the fact that people in the newsroom will take whatever is in the style manual as a perfect example of how to do it, which is why the examples of pages and concepts shown should be the best there is.

One wonderful bonus of Gulf News’ style guide as an app is that it allows the editors to constantly update examples. I have urged the team to be on the lookout for pages that apply a style guide concept well, then include it.

The best style guides evolve with the design itself.  That is our hope for Gulf News’ style guide.

Distribution of the app

While style manuals usually become proprietary and not circulated outside the newsroom, the good ones usually attract attention from academics who want to use it as teaching tools in the classroom.  If all agree to this, it can become a useful textbook to introduce journalism and design students to the importance of detail to provide consistency.

Gulf News will have two stationary iPads in the newsroom so that everyone can access the style guide.  In addition, it will be provided as PDFs and there will always be a few printed copies for quick access.

Reed Reibstein’s tips

As Reed was the editor and designer of the style guide, I have asked him to relate his impressions:

Given Mario’s emphasis on the iPad in recent years (and my collaboration with him on his forthcoming book, iPad Design Lab: Storytelling in the Age of the Tablet,), I started thinking about an iPad version of the Gulf News style guide shortly after arriving in Dubai. The potential advantages of the tablet platform for a style guide are significant: easily updatable in part or whole; free to contain more examples without the limitations of a specific printed length; and the ability to add zoomable images, links, videos, and galleries. Starting in March, I developed an InDesign template for the landscape orientation of a Retina-resolution iPad (before I had one for testing). Using InDesign CS5.5 gave me tremendous flexibility with the style guide’s delivery mechanism, since it was easy to create PDFs for print, computer screen, and the iPad alike. I eventually decided that packaging the PDFs into an app with Adobe’s Digital Publishing Suite was a worthwhile extra step, providing three great navigation tools and permitting easier updates to the style guide. The style guide will now be available privately for the Gulf News through Adobe’s Content Viewer app.

Here are some tips I learned about designing a style guide for the iPad:

—The iPad screen is a small canvas compared to a printed page. The design needs to be economical and flexible to allow examples to take the space they need.

—Make sure your text is easily readable. The Retina display requires you to let go of your preconceptions about type size: because of the high resolution, the style guide’s body text is 36 pt.

—Factor in time for dealing with technical issues, from internet connectivity to InDesign troubleshooting. This is still a new enough process that there is some trial and error involved in getting things right.

—With the current Digital Publishing Suite, deciding whether to export the app’s screens as PDF of JPG is crucial. The biggest boon of PDF is that it allows for pinch and zoom. This allowed me to feature newspaper pages at a relatively small size given the iPad’s constrained screen, as users can choose to zoom in to see the page without losing any clarity. PDF also kept the file size down. But JPG has the advantage of rendering faster than PDF, which occasionally takes several seconds to appear at full resolution. Ultimately, I made all chapters PDF except for the cover chapter, which is JPG so it appears immediately.

For the future versions of the Gulf News style guide, aside from the requisite edits and additions, I’ll hope to add some more iPad-specific features to make for a richer tablet experience. Links to Gulf News stories or helpful design websites, an intro video from the editors, and more design examples in photo galleries are three elements I’d like to add. Perhaps even  a version optimized for the iPhone would be in the cards.

View the video

Here is a short video I have made directly from my iPad to show you how easy it is to navigate Gulf News’ style guide.

Our previous Gulf News switch to Berliner blog posts

Here is your new Gulf News: Berliner format, new look

Creating the design concept for the new Berliner Gulf News

Gulf News new Berliner Weekend Edition

The iPad Design Lab: Storytelling in the Age of the Tablet

blog post image

Video walkthrough of the iPad prototype of iPad Design Lab

blog post image

TheMarioBlog post #1045
Blog Post11.21.2017—1am
So 2017 was really NOT the year of video……
Blog Post11.20.2017—1am
The New York Times: the Spanish weekly
Blog Post11.17.2017—5am
Paywalls, storytelling highlight Latin American conference
Blog Post11.15.2017—5am
In Argentina: the hot topic is “paywalls”
Blog Post11.14.2017—1am
The NY Times’ Jobs Classified: Really?
Blog Post11.13.2017—1am
At The New York Times: a kids section on Sunday
Blog Post11.10.2017—12am
“I read it on Facebook.”
Blog Post11.09.2017—12am
The flow of a breaking new story in the mobile era
Blog Post11.08.2017—12am
When content hits the spot
Blog Post11.07.2017—12am
When hierarchy makes a statement
Blog Post11.06.2017—12am
When the advertising wraps around
Blog Post11.03.2017—1am
New Hebrew fonts from Typotheque
Blog Post11.02.2017—1am
Favorite branding logos? No surprises
Blog Post11.01.2017—7am
A New York terrorist attack on the front pages
Blog Post—1am
White (space) is the new trend for print
Blog Post10.31.2017—1am
Turkey: the jailing of an art director
Blog Post10.30.2017—1am
Need a job?
Blog Post10.27.2017—2am
The Economist & Snapchat Discover: Respecting young audiences
Blog Post10.26.2017—2am
The Wall: Get ready for the prototypes
Blog Post10.25.2017—5am
The New York Times’ website redesign: less is best and, please, sign in
Blog Post10.24.2017—5am
At The Washington Post, The Lily hits its own chords
Blog Post—5am
The Lily: new Washington Post product hits its own chords
Blog Post10.23.2017—1am
Coloring opinions
Blog Post10.20.2017—1am
Digital Media Conference: First Day highlights
Blog Post10.19.2017—6am
Speaking today at the North America Digital Media Conference
Blog Post10.18.2017—1am
Long narratives still have a coveted place
Blog Post10.17.2017—1am
Some good print-related news
Blog Post10.16.2017—1am
Digital Transformation: no newsroom is too small to attempt it
Blog Post10.13.2017—12am
WAN IFRA: the best of digital awards
Blog Post10.12.2017—12am
Taking your brand to where the young audience is: Instagram
Blog Post10.11.2017—1am
Multitaskers consume more media
Blog Post10.10.2017—12am
Germany’s Sūdkurier: workshops for digital transformation
Blog Post10.09.2017—1am
In Spain’s El Mundo: native ads
Blog Post09.29.2017—1am
For newspaper publishers, not much to sing about?
Blog Post09.28.2017—1am
Interesting reference about new digital story formats
Blog Post09.27.2017—1am
It’s a new mobile-focused redesign for
Blog Post09.26.2017—1am
Three things that caught our eye
Blog Post09.25.2017—1am
Paywalls & newspapers: from leaky to hard ones, and in between
Blog Post09.22.2017—4am
Mexican earthquake: front pages tell the story
Blog Post09.21.2017—1am
Saying adios to The Village Voice in print
Contact us with speaking requests, questions or to discuss a project.