Charity Website

[rapid mauve]

Hey! I'm working on a project for family, It's my first ever attempt at designing a real project. Any feedback would be well appreciated!!

Thank you in advance

[marble pike]

The orange blobs in the background a bit distracting - maybe make them transparent.
Don't include a form at the footer. Make it into its own section. It won't do well on mobile.

Btw, not seeing mobile responsive version here. In most cases, websites have more mobile visitors than desktop.

[rapid mauve]

thank you 🙏 appreciate it

by transparent, do you mean delete them? because the background is white so making them transparent will hide them

or should i decrease the opacity?

[marble pike]

Looks better.
For the text overlaying the images, please add an inner gradient from the bottom (opacity 0% -> 50%)
Since the text is white, the photo colors are now colliding with it.

[rapid mauve]

done 🙂

[tired gazelle]

Wow your project looks really great! I love the colors you are using and layout! One thing I was wondering is if theres anyway to rearrange the info or maybe reduce spacing in the footer section so that it isn’t so long.

[rapid mauve]

yep definetely, i can work on a few prototypes. how do you think i should arrange the sections?

[tired gazelle]

I don’t think you necessarily need to adjust the sections. Everything looks well places. I think maybe adjust the spacing between each item and i don’t believe you need to have so much space above and below in the footer.

[rapid mauve]

contact page feeling rly weak rn

which version do u guys think is best and how could i possibly improve it

the first is more consistent with all the other pages as I dont have images or orange as a color there

[marble pike]

The top one looks better organised. Just need to make the right panel the same height as the left.

[rapid mauve]

hmm thanks hows this

[marble pike]

You may experiment with the color palette more. You may include a lighter shade of orange on the footer and right panel.
Adjusting it will direct the user attention to the button on the right on your navigation bar.

The primary orange color here may be too much.

[young epoch]

I love this!

Now for the feedback ~ The bottom footer should be aligned** throughout all screenshots, that's what I'd would like you to add.

You'll need to create a colour palette to guide the user because, as "bruce.codes" noted, the colour "orange" might be somewhat overwhelming. Therefore, you may have a single colour button that moves the user forward.

I would advise constantly making sure the contrast is not too strong when adding more colours to a palette. Use the WCAG guidelines as a resource. If you need any help message me!!

Cheers

[eternal raven]

To what @marble pike said, the orange is too much for being the main color. Looking at that form, my eye is drawn to the contact info when the form is the actual focal point.

I like the orange color. I think it's great. But it should be used sparingly as a call-to-action color. Don't make the footer and sidebar orange. Make the button orange. Make the thing you want them to do orange. If it were me, I'd have the focus state of the form (the box they're currently typing in) have an orange. border, and the submit button as well.

The other issue you'll run into in places like the footer, is the white text on the orange background doesn't pass a contrast check on accessibility. That colors aren't going to pass ADA compliance. Focus on using the orange as an accent ONLY. Don't make it a primary color, and don't put white text on top of it if you want people to be able to read it.

[rapid mauve]

Wow guys appreciate your thoughtful feedback. I will attempt to implement them asap and send a few ss. thank you so much

[sharp dagger]

1.Donate :all text display in a row will be readability
2.what to do : text have much of repetition , hard to get sympathy. 3.there is no clear purpose for requesting the contact info.

[rapid mauve]

hey jimrune thanks for ur feedback i understand where ur coming from. this is the updated version and the text is just repeated because im designing then ill add the content so this is basically a hi res mock up 🙂 thanks

[rapid mauve]

hey sam, being honest here i thought contrasts were much easier to pass and were more focused on similar colors like grey on white. because of what youve let me know ive installed a contrast checker in figma and a lot of the text havent passed AA

this passed aa however i feel black on orange is much uglier

[sharp dagger]

I‘m sorry for missing the recent vision .
about contact info , I still have some advice. hope it useful to you

[rapid mauve]

hey guys! after taking all ur recomendations into consideration, i feel this is much better. lmk what u think!

[rapid mauve]

yep! here u go