Member Avatar for Siberian

I'm in a bit of a tangle on my new design. I decided to ask you, if there are any takers ? I'll post what I have done up to this point before continuing, I know what direction to take the design in, I want a little feedback.

  • 5 Contributors
  • 8 Replies
  • 127 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Siberian

Dani AI

Generated

This thread is about a work‑in‑progress page where asked for color and composition feedback. The points from (keep the palette small) and (pull section fills from the banner so the page reads as one system) are correct and complementary. Below are concise, actionable ways to turn that high‑level advice into a repeatable result.

Treat colors as roles, not decorations. Pick one dominant hue (the banner’s strongest voice) and assign it the “primary” role; derive 2–3 tints/shades from it for large surfaces. Use a single, restrained accent for CTAs and micro‑interactions. Reserve neutral greys for body copy, cards, and large backgrounds so chromatic hues don’t compete. For big background planes, reduce saturation and raise lightness so the eye rests; keep saturation for small elements only.

Verify hierarchy and accessibility early. Aim for contrast ratios of at least 4.5:1 for normal text and 3:1 for large text/components (WCAG 2.1). Run every text/background pair through a checker such as the WebAIM Contrast Checker and consult the WCAG 2.1 contrast guidance. Also view the design in grayscale and with a color‑blindness simulator to ensure hierarchy does not rely on hue alone.

A short, practical workflow: extract the banner’s dominant tone with a palette tool, generate tints/shades, and lock them into a tiny style guide of tokens. Example token structure:

:root {
  --color-primary: /* banner dominant */;
  --color-accent:  /* CTA */;
  --neutral-100:   /* page bg */;
  --neutral-900:   /* body text */;
}

Test the system at scale: full‑page screenshots on small and large screens, grayscale checks, and contrast checks. Consistent spacing and typographic hierarchy will make a reduced palette feel richer; used together, these steps should resolve the “too many competing colors” problem noted earlier and produce a calmer, more unified design.

Recommended Answers

All 8 Replies

Member Avatar for JorgeM

If you are having an issue or need some feedback, you would have to post revealing code or a link to where it is being hosted.

Member Avatar for <M/>

What are we supposed to be looking at?

Member Avatar for Siberian

No code rather a design. Let me update with an image.

Member Avatar for Siberian

The Design is design is incomplete

I want to know what you think of the colors, and if you want, what you think of the design at this point ?

Edited by Siberian
Member Avatar for zobadof

The color choice is a little odd, I've always tried to keep a site to a few colours, two or three maybe four so it does not get confusing. Though, those colours (three) don't really go well together.

Member Avatar for Siberian

They are split-complementary.
Hex Values.

8E5844
448E7D
44558E
Member Avatar for Troy III

That may be the exact reason of why they are offending the eye...

Everything should [at least in this case] be a continuation of colors you are introducing on the banner.

The color of the "sheep field" background should aesthetically match the fill of "Christopher", whereas the "about me" background fill should be from "the Creat" hue (lightened) and finally the feedback section should be picked off of the banner mains: light-gray, gray and dark-gray present range values.

p.s.: please don't learn this by hart -its not a law. Provinding that it migh even fail this particular case also.

Member Avatar for Siberian

I'll see if there are more suggestions, then I'll do a change and post.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.