Redesign a website tips
hey people I am trying to redesign a website, it is a medical clinica and physiotherapy, just a landing page, I would like to know your opinion in these two hero-sections, which is the first time I am using figma
41 Replies
I'm not a huge design buff, but I kinda like the left one more. I think it's the fact that the EXCELENCIA text isn't centered vertically
the main thing I noticed though is that the contrast on the "our services" button is very low. I have pretty good eyesight and I had to really look what was going on,
thanks a lot i go work on that
What you think?
Much better contrast!
you think that background in the cards are good or its a lot
I like the background, though it would have to fit with the rest of the site too. I'm terrible at design, if I'm honest. I just noticed the contrast and wanted to point it out
it's an accessibility issue for people with limited vision. There's a checker for it in Firefox's dev tools (probably in chrome's as well, though I don't really use those):
Thanks i gonna check it out
@vince can you give me you opinion
xD
I'm sure he'll be around if and when he has a chance, but please don't just @ people to draw them into your thread just because they're active in this channel
Can you send me the figma file?
warning that I do not know how to move in the figma and did not do something highly detailed, I started now and this is just helping me to understand how the website will look, but I would like to know your opinion and if what it costs to be your design process, if we apply a lot of time only to take prints to templates from the net, why I feel that I have very little ideas.
@santosz_ Can you send me that image?
The hero image
Nevermind I'm stupid haha
xD, thanks for the help btw
No worries, I'm changing it up quite a bit so not sure if you'll like it or not 🤷 Also not great at design so take anything I give you with a grain of salt
https://www.figma.com/file/EVgdXt37jSIEK9zXZEFHVm/https%3A%2F%2Fdiscord.com%2Fchannels%2F436251713830125568%2F1143564912782745781?type=design&node-id=0%3A1&mode=design&t=12pL5QK6sy4vaHtt-1
I couldn't think of a good way of incorporating images here. You'd probably have to change the layout of the cards I have towards the bottom of the section. I think the full screen image is kind of boring tbh I feel like you could spice it up in some way
Here's something I did a little while ago, an idea of what you can maybe do layout wise
Don't ask me how to make that responsive it would probably be a headache but a good chance to up your skills 😂
I love the position of the 3 cards and the colors of the hero section, I will probably apply in my design, thank you!
I don't know if you have any council, as to the part of services, I think that putting too many cards gets boring, too thinking of putting four and a boot to see more?, what do you think?
very dynamic liked, yes no doubt it must be a break heads
btw can you give premisions?
Ya having a lot of cards can get boring but there's ways to make them more fun, like hover animations (see my website's service section: https://www.vincewebdesigns.com/)
Having a view more button could be a good idea. You could also do a carousel (though carousel engagement is really low, so bare that in mind)
Or you could do both, where you have your main services you want to showcase in the front of the carousel, and have it auto slide (see one of my client's websites: https://sweet-creponne-9e8302.netlify.app#media-hub)
Up to you, service section cards are pretty standard. I'm sure there's a nice way to break out of the card system though; you'll have to do some research with that as I always do cards honestly 😂 definitely an area of improvement for me as well
Yea
DM me your email
yheee i like the animation looks pretty interactive
some ideias for a about us page
section *
but i dont thinks its necessary a section page "about us"
whats your opinion
I believe it's a generally good idea not to mix round borders with non rounded borders
I say that because I've seen similar advice, but honestly I was just on a website that mixes it, and both that website and your example looks fine to me honestly so disregard what I said
you thinks thats good ideia limit the content to 1440px or let him expand
@vince hey i start building the website, when you can take a look
https://your-clinic.webflow.io/
xD
Yea limit your content, otherwise it'll look weird on larger screen sizes
Hm, not sure if it works
https://getcssscan.com/css-box-shadow-examples
Use this website for your box-shadows
Beautiful CSS box-shadow examples - CSS Scan
🎨 Curated collection of 93 free beautiful CSS box-shadow, ready-to-use for your next projects. Click to copy.
But these cards that I made don't really work with your design I don't think
Don't make your link hover states scale like that, looks cheesey
Hello, regarding the carousel on your client's website, may I ask why you chose the scrolling direction / flow you did? Because as I was scrolling down I was expecting it to either change direction automatically to bring up the next cards / slides or give me an option to scroll horizontally; but maybe that's an outdated expectation?
It scrolls automatically and you have an option to scroll horizontally
Was it because you were hovered on it? I have it pause its automatic scroll on hover
Is that non-intuitive? I can change it. I'd love to hear your feedback
Hey, so first up I'm on laptop using my touchpad, don't know if that might make me an outlier. When scrolling down I'd personally expect the cards to scroll left to right when I continue scrolling down. I then noticed they actually moved automatically which I didn't expect and I found it somewhat irritating that I'm not given an option to pause / unpause that movement (between the left and right arrow buttons). Not to sound too nitpicky it's just a quirk I noticed and was wondering how you settled on this solution; because again: I might be totally off with what's the most common / established way to handle this . 🙂
I know what you mean and from what I can tell you can't (easily) replicate the smooth horizontal scroll that browsers do when you shift + scroll; the simple horizontal scroll solution (without shift) in JS causes an instant snap effect (example scrolling on the maps list on the bottom)[https://bapharia.com/map].
Anyways, back on topic, I really like the color choice @santosz_!
This button shifts down a bit when you hover, you should add a border with color
transparent on it to prevent that (and also match the border width with the one next to it!).
also need some padding on the main content column!
thank you very much for the tips
@.zakum Thanks for pointing that out.
@santosz_ Apologies for derailing the thread.