Spending too much time on "design rules"

Question

I'm a web developer however I've recently discovered my passion for design. I'm currently working on a landing page for a client of mine (model/actor).

I have all the content on the page and created what I thought was original.

I spend a lot much time on designing prototyping, but I lack confidence on when I know the it is complete.

I really need help at this point, don't know what to do next. Need feedback on contrast, color and white-space. I would appreciate all positive criticism.

Answer 1

Text tracking

The font tracking is established for its use in text, in case of headlines or oversized text should always be checked individually in each character.

Layout structure

Beyond the upper and lower unequal spaces (cyan lines), the absence of a structural relationship between the two headlines is notable, this is increased by changing the position to vertical and using a geometric typography. There is no any coinciding axis (pink lines), or at least one, but visually insignificant: r - l.

Color

The photographer, with a very good eye, chose as a pale blue background color to contrast and consequently enhance the model color skin, playing with the complementarity between the toasted colors and blue. Adding a gold/yellow frame totally destroy this contrast. In my opinion is the worst color you can choose for this frame. Using the color wheel, the valid options would be variables opposed to the model main color (dotted lines frame in the lower image).

Color test

• Black offers contrast but has too much presence
• White gives sobriety, removes the contrast but harmonizes with the shirt color.
• The same color as the picture background is somewhat redundant, but enhances the contrast by complementary.

Color alternatives

• Blue is always the black alternative
• Silver/gray is the alternative to yellow/gold or white
• Same color as the photo background over-saturated.

Conclusion

Beyond the general structuring, there are three elements in direct competition where you should establish a visual hierarchy:

1. Text
2. Photo
3. Frame

Try to create a harmonic relationship between them and see how to remove visual presence to one of them: knowing the photo should remain a main element, the text is second in importance; does the frame have to be at the same visual level?

Answer 2

Picasso goes to visit a kindergarten class. In the class he sees the children's artwork displayed. He's amazed at how great it all is. Just blown away at how such young children are doing such great art.

He asked the teacher, "How is it that all your student can create such fantastic artwork?"

The teacher responds, "I merely know when to take it away from them."

-- Half of good design is knowing when to stop. :)

---

My opinion....

Vertical type is a "no-no" and should never be used if it can be avoided. It's not "visually interesting" in my opinion and only serves to decrease readability, and often legibility. Much of "reading" is by shape. By using vertical type you eliminate that portion of perception forcing viewers to actually work to decipher the type - even if it's clear type.

Beyond that... the border under the type is acting essentially as a "strikethrough" on the type and is off-putting to me. If the type were horizontal, there probably would not be a desire or feeling that the strikethrough was acceptable.

Since I find this type placement and usage pretty bad I won't go further into the mix of sizes and spacing, which all could be addressed better in my opinion.

The slight grey page background tends to work best for me when there's also enough white on the page to show there's contrast, even just subtly, with it. There's not enough white in the photo or other elements to warrant the grey background. -- look at this site.. subtle grey backing with white in the "content" area. Without the white, the grey makes everything feel "muted" and "desaturated" even if it's not. One option could be to add white. Such as the inner matt of the photo frame. This "pushes" the photo off the background.

I think your border color is fine, it plays off of skin tones, but there needs to be more of it to work well. The border screams at the user because it's the only color element on the page except the photo. And shifting the border to match the blue background of the photo would help the border be far less prominent that it is. Or.. adding other color elements to the page which match the border color would also have the same effect.

Note the white matting added to the photo frame does a great deal to harmonize the border color with the photo in my opinion. The elements are seen as ONE item rather than a photo with a border offset from it. The white matting makes the border part of the photo, rather than a separated element, so the color works much better.

Text placement of the smaller blocks seems sporadic. Why are there different alignments, some left, some right? I would align everything left and move all text blocks to teh right of the photo. Or, align everything right and move it to the right side of the page where you have that bottom text block.

Or

Or even with a more prominent name (tight leading was intentional)...

I just fall back into "Form vs Function". What's the function of the page? I assume, to get model information. Why then is the information as difficult to read and find as it could be? Make it all clear, centrally located and easy to read. In my opinion, good design shouldn't force a user to work to get the function of the design.

Sidebar: I have no clue how this web page would break out for responsive design. But I'm having difficulty envisioning any responsive adjustments which would be suitable. Unless elements are hidden/displayed based upon responsiveness.