Streaming live at 10am (PST)

Simplistic Design Looking Amateur

This is my website: https://autopot.webflow.io/
(I have not scaled the website to accommodate all screen sizes yet).

This is the first website that I am making for a business and I really want to do a good job on it.

I am beginning on the home page of a new project and I am struggling to develop a theme. I am going for a simplistic design to make it look more modern but I am finding it difficult to make it look professional at the same time. I am trying to use a lot of Lottie animations because I see them a lot in a lot of modern websites that include animations. Does it look too cartoony? Please let me know what I can do to make it more professional looking and not just an amateur website. Also if you think that it looks good how it is and just needs some tweaking then I encourage that too!

I would say it definitely looks “cartoony” but that’s not necessarily a bad thing. If that works for the market your going after, then lean into it and make it feel intentional. Cartoonish illustrations are very popular right now for all types of products.

In terms of Lottie animations, I think these can definitely work when used correctly but be careful not to overuse or rely on them. The animations should benefit UX and provide something that images/text don’t. In your example I feel like the animations could be a bit more relevant to the product, maybe focusing on the features/benefits of the system to better illustrate the four blocks of information, but overall a good start.

As far as ways to improve the design, I’d focus on three aspects; typography, color usage, and simplicity.

Type - Nunito Sans is not a bad typeface per se—it’s got a variety of weights for use in headlines/paragraphs and it feels modern without being over-the-top—but you’re line spacing and hierarchy need a bit of work. Right now I find it hard to digest the necessary information while scanning the page.

Color - I think green and orange could be great colors to work with—the colors used in the hero animation are pleasant, so you could always build the palette around these—but they are definitely conflicting with that grey background. Either make it an off-white (possibly with the addition of some warmer tones to make a cream sort of color) or go with pure white for these areas. I’d also reduce the amount of colors your using, making sure they are flexible to use in a number of situations (dark/light backgrounds) and that they all work together.

Simplicity - You have the right idea here with the flat colors and simple illustrations, however I’d suggest removing the borders and dashes as they don’t really add much to the overall design. Don’t be afraid of using white space around your elements or explore asymmetrical layouts (like removing the duplicate animation in your hero)—with the right organization, hierarchy, and color usage you’ll find that it actually becomes easier to scan the page and digest various bits of information.

I took a few minutes in DevTools to adjust some things in your hero section (along with the addition of some extra copy from you lower blocks of text) and came up with the revised layout below. This is by no means the “perfect” answer here, but I think it moves you in the right direction:

Hopefully all of that helps, and feel free to reach out if you have any questions! :v:

Thank you for the feedback! Your version looks much better than mine. I am thinking of just ditching the whole cartoony vibe design and starting from scratch though. I feel that the audience of my website would enjoy images and texts rather than cartoons. Thanks anyways though!

An important thing to note when designing minimalist sites is that when there is so little, the devil is in the details. Things like whitespace and typography matters most. Visual hierarchy is of the greatest importance. Grab viewers’ attention with elements such as color, illustrations, movement and size.

One immediate solution to make your site look “better” or more professional would be to increase the contrast between your headers and text, with text size and line-height.



For the 2 images above, if you’d just reduce the text size, you’ll see the immediate effect of what I’m trying to explain above. I also feel that the line-height of the sub-text of your hero section is too large. You could also space your blocks further from each other (i.e. Header, text, button).

For text, I can recommend Type Scale as a reference point with regard to the sizes for text.