I am preparing some web CSS styles.

I have this layout:

enter image description here

For all thoose with a print design background, we can consider that we have some margins on the section (Red) and some internal colums with a small space arround it.

I can play with this layout a bit, I have a blue overlay marking the original blue column:

The first question is Which of this 3 ways of arranging a photo would you most likely use?

For example a=30% b=30% c=40%

enter image description here

And one aditional question is if This next layout sounds logical to you?, which is diferent from (2) but more suitable to fit the option (C)

enter image description here

migrated from meta.graphicdesign.stackexchange.com Jun 16 '16 at 16:36

This question came from our discussion, support, and feature requests site for Graphic Design professionals, students, and enthusiasts.

  • 1
    I think either formatting this into a Critique Question on the Q&A or asking in Chat will be better. I don't know of any precedent for asking questions like this on Meta and neither did the other moderator I asked. – Ryan Jun 16 '16 at 16:28
  • Look for what the discussion tag says: "The question you're asking is designed to solicit opinions or best-practices on a particular topic, with the goal of reaching community consensus." So it is a best practice question. – Rafael Jun 16 '16 at 16:32
  • Or can you move it to the Q&A? Thanks. – Rafael Jun 16 '16 at 16:35
  • This depends on the purposes, style of the rest of the site, and personal preferences. As such I'm voting to close this question – Zach Saucier Jun 16 '16 at 17:18
  • Are the coloumn background colors on 2 and 3 actually going to be used or are they just to indicate were the columns are to us? – Cai Jun 16 '16 at 19:54

I found this question unanswered and after seeing some errors and no answer, here I dare with mine.

The editorial design consists of several parts, I will refer in this answer only to the two basic elements of the question: the page structure and the layout

Page Structure

In this case it's very simple: typographical frame and its partition.

  • When creating a typographic frame we are defining its position on the page, and consequently the distance to its edges: the margins.

Very important point: al margins and blanc spaces are also compositional elements at the same level as the text and pictures. I use to refer to them like virtual compositional elements.

  • Once the frame is defined comes the inside partition, and here comes the first mistake that has caused all the rest as in domino effect. The frame partition must consider its own internal margins.

    This partition generates other internal frameworks where the elements will be located in the future layout. Knowing that in principle the text columns between themselves and with images should not contact, a division can not be considered without their respective spaces between them.

frame partition

As the internal partition is wrong, all your page examples are unbalanced. I describe them in the next point, but following your example.


At the example layout, the text column is centered on each partition, which causes four unequal margins (a, b, c, d) across the page and a general breakdown. If instead of using the partition joined by the extremes, we follow the margins generated (blue lines), we obtain a balanced composition and only two margins sizes (a, b, b, a):


The same situation in the examples with the bleeding images, where the third option visually gains by eliminating one of the margins:

bleeding images

In publishing design the blank spaces are compositional elements too. Make the typographic form and its partitions thinking ALWAYS in the blank spaces.

There is a visual and compositional trick that allows designers to break the structurality imposed by the margins and is the use of silhouetted images. Using the question examples, see how the image breaks the margin effect with the text making it practically disappear. With this we gain in visual power and we eliminate one of the partitions.

silhouetted images

Answering your question and after fixing the structural problems, the decision of which of all the possibilities is the best is based on opinions, since we don't know the conceptual content of the page. After the fixing, any one is valid. At graphic level, my decision would be between these two:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.