0

I would like some feedback for my design. It is in german because we are situated in a german speaking part of the world.

Back story, it's a website which will guide a customer with smart home elements to a new build or existing house. The key element is the configurator.

The header element will be a video

Could you give me feedback on: - Visual Hierarchy - Composition - Colour use - any other UX or design optimisations.

enter image description here

  • Is this the wrong place to ask for feedback, why am I getting -1 votes? or is it just a bad design? – Boris G Jun 20 '18 at 8:20
  • 1
    Hi Boris. Please have a look at our requirements for critique questions. We are not a feedback forum, indeed, and we only accept critique questions that focus on one single, well-defined aspect you struggle with. Sorry about the rude welcome this way! – Vincent Jun 20 '18 at 10:17
  • And the right way: Hi Boris, welcome to GD.SE and thanks for your question. Please have a look at both the tour and the help center to get yourself up to speed about both the Stack Exchange model and what is on and off topic on this site specifically. We can be a bit precise and annoying about what goes where and what is allowed be asked and what isn't, but we are trying hard to be a friendly mob nonetheless. If you have any questions left, feel free to ask them in Graphic Design Chat once your reputation allows you to go there (20). Do stick around and have fun! – Vincent Jun 20 '18 at 10:20
1

I wrote this in a hurry so blame that if some of this is unintelligible or laking a proper explanation. I can revise this if some things need more explaining

I realize some things may still be unfinished in this design, but I'm going to say it like I see it.

Starting from the top:

  1. In general it kinda looks like there are some scale issues.

    • I viewed the layout at 1400px width the idea that it would be close to the real max-width of the content area. Just so I could keep my thoughts grounded. I didn't want to believe it would use liquid layout, which I thought could be a possibility given some design decisions and the text sizes.
    • Some elements are huge and others are super small.
    • Pretty much all body text (not a heading) looks way too small, simple because it's getting hard to read.
    • In general, I tend to start designing a site straight to the max-width, that I pick somewhat arbitrarily. Sometimes the content defines the max width.
  2. Main menu as a whole (logo included) could be more visible. I feel it kinda disappears. I think people would find it because a menu at the top is so common that people expect it to be right there.

    • It could be a combination of things the blue color, font weight, font size.
    • Easy fix might be to add a background color behind the menu. Perhaps a translucent white.
    • Either way I think the text could be bigger.
  3. Hero image button text could be bigger. I feel it suffers from the same thing as the menu. You can barely read the text, it's so small.

  4. column boxes below hero image

    • These look like they are unfinished or placeholders.
      • Maybe they would look better if there was an image in each box or like an icon or something.
      • I'm kind of on the fence about having any background color there. Maybe a border with a white background would look better or no border at all.
    • I guess Jetzt Starten is something like "Start now" in English.
      • If it's supposed to be a link, it would make more sense if it looked more like a button. Right now the placement of that text doesn't seem very justified. Why is it there? A quick glance might give the impression that something is broken because that random piece of text, that looks exactly like the paragraph in that box, is all of a sudden aligned to the right.
    • If it had an image, the image could cover the whole box and the text could be on top. That's also worth exploring.
    • Some examples with an icon.
  5. Konfigurator block - The one with the form and the image on the right

    • It looks a bit offset, wouldn't you say?
    • There's like ~280px empty space on the left side of the form by the image is touching the right side. Looks pretty unbalanced to me.
    • I was scrolling down the layout as I was writing these comments before and only later realized you were going for a layout where every second box is aligned to a different side.
    • It's not a bad idea and can work, but I feel like it may be a challenge to code, first of all... and even if it's not a challenge for you, I don't think it works here. Especially the blocks with white backgrounds sort of break the look and this block with the form just looks mega weird.
    • The easy route would be to extend the background color all the way to the sides and align everything to the center.
  6. Bereiche block - I feel the way the background color doesn't reach the right side makes it look a bit broken. Rather than looking like it's hugging the left side, it just looks broken to me. Again I would say that there doesn't seem to be anything justifying this. It's not a total disaster. Something could be done to sort of justify that, without stretching it to the full width of the viewport.

    • I think the text below the icons should be centered. That change might require the body text and heading above the icons to be centered as well.
    • The icon blend into the background. It could look better if each icon was surrounded by a circle with a white background like a circle with a white background. Something like this. I realize your icons may require the white circles to be quite large if you don't want to make them smaller. A different color for the icons could also suffice.
    • Here's an idea for the look of it (sort of a grid layout).
  7. I don't really have anything to say about the Smart Videos block

  8. Das Bietet Ihnen... block - This could use some graphix. It sort of looks like a Table Of Contents or something. Point is, it looks boring. Perhaps each bullet point could be a small icon. Perhaps there could be an icon for each group (heading+list), sort of like this.
    • I'm also not so sure about the color combinations. If the background was white it would already look fresher, but perhaps it's not a good idea.
  9. Footer - What is that empty space in the middle? I think the contents should fill the whole max-width of the site. Or at least it should be more balanced.
  • Well that's awesome feedback. I can certainly use that. Thanks. – Boris G Jun 21 '18 at 14:28
  • @BorisG I had some time on my hands so I decided to sort of remake this design the way I would perhaps make it for reals and record it. There's no audio. Video in YouTube 3mins —— Video in YouTube full 1h 16min ← It may take some hours before higher resolutions are available. — I also figured it would showcase Webflow.com pretty well. These days It's my primary tool for the layout design (I don't use the code it produces). I should say it works the best if you know how to code websites. – Joonas Jun 27 '18 at 10:58
  • @Zoe, just in case you're interested, check the video(s) in the comment above. – Joonas Jun 27 '18 at 19:38
  • There is some excellent feedback in there. I'm on around version 20 of the homepage and have started the rest of the page. I've added some of your feedback and then some extra flavour. I'll add a prototype link before my next feedback round so you can get an idea what's been going on. – Boris G Jun 29 '18 at 12:48
  • @BorisG, that's great. – Joonas Jun 29 '18 at 12:54

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.