Smart home design feedback

Question

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.

Answer 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.