4

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.

enter image description here

  • 2
    Hi. Welcome to GDSE. If you only want "positive criticism", then I'm sorry I can't really answer this question. Also, I think this is a question that will generate opinions rather than factual answers, and these kind of questions aren't a good fit for GDSE. If you could perhaps narrow it down to a particular aspect of the design, such as the typography, then it might be answerable. – Billy Kerr Jan 9 at 16:19
  • I can understand your concern @BillyKerr. I hate to be the cause of redundancy in the forum, however my inexperience has led me to a roadblock, so I'm a bit desperate for all suggestions, opinions, and criticism (good or bad). The feedback so far is great. – Myles Allen Jan 10 at 5:57
  • 2
    Asking for feedback is fine, just don't ask for suggestions and opinions - that will just bring a bunch small generic advice from good to terrible. Check How to Ask on what constitutes a good question here. – Luciano Jan 10 at 10:12
4

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.

tracking

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.

axis

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 wheel

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.

First color test

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.

Color alternatives

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?

  • 2
    @MylesA Keep in mind that the suggestions in Anders like this are suggestions, not rules – Zach Saucier Jan 9 at 13:40
  • I’m regards to the frame, are you suggesting that I make the frame smaller than the photo itself? – Myles Allen Jan 9 at 15:18
  • It's up to you the size, I didn't modify your design. I'm just talking about the color. – Danielillo Jan 9 at 15:33
  • I will add a quick layout thought: I tend to avoid relationships between design elements which seem entirely accidental to the viewer. This doesn't mean that the given mentioned relationship is somehow "against a design rule" but both in graphic design and in the broader design world of product design and architecture, there's an often-unstated guideline: make it all look carefully thought out. So I would avoid allowing both the co-incidence of the photo frame and the terminal line of the C's opening, and its aligning with the centreline of the crossbar of the E. – GerardFalla Jan 9 at 16:38
1

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.

enter image description here

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.

enter image description here

Or

enter image description here

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

enter image description here

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.

  • I like the vertical text in his example – Zach Saucier Jan 9 at 21:26
  • And you're allowed to :) It merely not a design choice which I feel is ever good if the text is imperative, such as the name of a model on a site designed to get the model work. – Scott Jan 9 at 21:30
  • responsiveness doesn't seem a problem in your examples, elements could just shift above / below the photo for mobile screens for example – Luciano Jan 10 at 9:55
  • I was referring to responsiveness regarding the original example. – Scott Jan 10 at 16:40

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.