Invisible Grid in a Wordpress Blog
Digital advice from analog origin (4)
When I started my graphic design company in 1986, the best deal I could close was an assignment for a magazine. Preferably a weekly magazine, but a monthly one was fine too. Comparable to a membership site that is one of the better business models today.
Where companies now have an intranet or an internal blog, back then they often had a periodical for their staff and/or a customer magazine.
At the beginning of the assignment I designed a cover and a number of possible pages, which at that stage were filled with Lorem ipsum text. After approval of the design, master sheets were printed with a grid in blue or yellow to aid in formatting.
Why is a grid a practical tool?
From the designer's point of view, having a grid was useful to create the layout, as this was done by hand. It also meant a great tool to save time in formatting.
The readers, even though they often had no conscious idea of the grid, could recognize the magazine instantly because of it.
Who is the publication for?
Gossip magazines were a phenomenon from the 50s in the States. In the Netherlands the first tabloids were made in the 70s, when computers were still not used in the magazine business. These magazines consciously made choices that went against the usual norm.
There was a grid, but it wasn't strictly followed to get a messy, almost homemade effect. The photos, even if they were provided by professional photographers, were often a bit out of focus or the composition was just off. This was done to be 'closer to the public'.
Unlike the art magazines that used a lot of empty space, did not clutter every square millimeter and hardly used large, fat 'chocolate letters'.
What is the resemblance with a web page?
A web page is not static like a magazine page. Especially nowadays, now that the emphasis is on mobile viewing, most Wordpress themes are responsive. This means that the pages adapt to the device on which they are viewed.
Still, you can make choices that evoke the same sense of familiarity among your visitors as a magazine layout does.
Taking my websites as an example, my photos are always square, unless there is a clear reason to deviate from them. For example with an infographic. I only use a few widths: column-wide, 300px, 200px or 150px. The photos are placed right-aligned, unless the column becomes too narrow, then they are centered.
It drives me mad that I can’t use a grid as I was used to in the magazines, but I have learned to live with that. :) In web pages it is mainly the viewer who decides on what he or she sees.
Choose consciously
Nowadays magazines still have a similar style conception to the ones of the last century. The tabloids are messy and noisy, the art magazines are spacious and serene. I hope you understand that I am not making a value judgment with these 4 terms. The appearance of the magazines serves a clear purpose.
You can weigh your web pages in the same way. Who is your target audience and what concept do they expect?
Using any kind of photo you come across, be it horizontal or vertical, or square, various proportions, centered, right-lined or left-lined. Even if you apply everything from this list at the same time. It's all fine if it's a conscious choice.
Not making a choice is also a choice.
Related
My other blogs on what we can learn from using traditional resources in contemporary design:https://my.wealthyaffiliate.com/hmommers/blog/what-does-above-the-fold-mean
https://my.wealthyaffiliate.com/hmommers/blog/fundamental-text-design-for-a-website
https://my.wealthyaffiliate.com/hmommers/blog/fascinating-facts-about-fonts-and-how-to-choose-the-right-one
Let me know if you have any questions about this topic. I’ll be happy to answer!
Recent Comments
19
I remember when on the journalism staff in college, where our copy was formed into columns, and laid out in a grid formation. We used the town's newspaper facilities, and every two weeks we would put the paper together.
The copy, in column form, was run through a machine to adhere a tacky substance to keep the columns and images in place...
Thanks for the memory revival..grin
Great, I expected it would, Rudy :)
Although I suspect that your memories are of a time a little bit later than mine? The first 10 years of my career in design I made everything by hand.
I am sure your experience is helping you with your webdesign!
Yeah, that may be true, we weren't setting type, grin.
The journalism class i attended was in the early 80s.
Our written copy was then converted into a column format where we individually laid that content onto the grid of the paper. Nothing worse than setting a perfect article, only to find you're missing a section, or skipped around in order...lol.
Yes, that experience has been helpful when selecting font, setting images, etc when creating my websites...
Oh right, or putting one of the pieces upside down, so you couldn't find it anymore because the white background didn't stand out to the white of the rest, ROFLOL.
So much easier nowadays :)
Interesting and it brought back a bunch of memories. I worked on a few industrial magazines back in the day in classified advertising department. I remember placing ads in the back of the magazines electronically. It was jump up from gluing print copy on to a template that could then be photographed and sent to the printer.
See more comments
Hi Hannie
Thanks for this thought-provoking article. Some time back I started paying more attention to how my posts look on a mobile device and in particular how images look. I quickly noticed that though what I thought was clever(ish) alternating of right-aligned images with text to the left, followed by left-aligned images with text to the right - looked fine on a desktop screen, but the formatting was lost on a mobile so I stopped doing that. I also felt that very tall portrait aspect ratio pictures don't work on a mobile and where I wanted to display an image without losing sight of the text relating to it, so the eye doesn't lose track of the text, I would keep images more in landscape format. But then I notice that more extreme landscape aspect ratios can also be problematic so have to be used with care. I also tend to centre images only as I prefer how that works on both desktop and mobile screens.
A great topic and as you say, it is about making conscious choices and understanding how they work with your target audience. And in my case hoping I get it at least somewhat right.
Have a great day!
Kind regards
Andy
Hi Andy, thanks for the compliment! Always appreciated. :)
And great that you are making conscious choices. Especially when the technique makes it hard on us.
Mobile for images is always a tricky business. As you may know I have my website images right-aligned in desktop view. On a mobile that looked horrible, so now I have a css-rule that on a mobile view they become centered. I don't like it 100%, but because viewing on desktop and a mobile asks for such different approaches it's the best I can get so far.
You have a great day too. :)
Thanks, Hannie. I should look into that - using a css-rule
Best regards
Andy