Finished Gym Website
Hey guys, I'd like to take a look at my website, I found a GYMin my area that doesn't have a website I decided to create one to practice and how do I think it has potential I'll send to them to see if they're interested, any tips to succeed?
Website Link: https://fitness-website-7d52a2.webflow.io/
🙂
25 Replies
@santosz_, in my opinion i'd make the navbar in line with the rest of your content
hmmm i like but i dont know if is the best option
consistent alignment is key in ui/ux, it's part of the fundamentals
you thinks better this way _
check the link please
yeah in my opinion that seems better, i guess it's personal preference too but considering that alignment is a fundamental it seems more semantic, if that's the right word 😅. It also keeps the eye in one section rather than having the user look across the screen for certain things, it's more appealing when aligned.
Thanks for the tip i guess you are rigth
no worries, perhaps get some others opinions on it too, that could help you figure out the best design.
Thnaks
The contrast of the white text against the yellow button makes it less readable
You generally want a contrast of 4.5 if not closer to 7-8 in contrast
Another possible thing you can improve is the small body text that is center aligned.
Center aligning text can make it more difficult to read because people finish reading a line
and then they need to find the beginning of the next line.
So what I would do is I would either:
1. left align everything, including the header, to the edge of the logo's left side (consistent padding to the edge of the screen), or
2. make all the text + button left aligned, but positioned centered,
3. find a way to have fewer characters in the body text below the heading so that it's
easier to read while it being centered
Also it doesn't hurt to make text have a size of 18 to 24 points, especially on desktop.
Just gotta make sure you maintain visual hierarchy (size, decreasing boldness as you read down etc)
One thing you can do to make your design more user-friendly is round the corners of the buttons ever so slightly. Something like 2, 4, or 8 points is just great
For the size of the buttons I'd go with 40, 44, 48, or even 60 for desktop.
You'll also notice that I'm using multiples of 8 and that's because you want to stick to some kind of grid system. 8 point grid is the easiest and most versatile based on having been taught by an expert designer
I recommend if you want to, to look up Michal Malewicz's courses, he goes over a lot of UI fundamentals that you will benefit from knowing
This amount of text center aligned will not create difficulties for the reader.
What it’s actually need is the proper line length: 45-80 characters.
Both title and subtitle.
I agree you should constrain the character length. I just think it's worth considering that when the amount of text reaches a certain point, that center alignment may be less preferable to left-alignment
It may be a personal preference on my part, but I just find that left-alignment for larger quantities of text copy tends to be more pleasing and easy to read
Center alignment for less text copy is perfectly fine though and I have no problems with it
Yep. Sure. And totaly agree)) It's a differnt conversation of the typography topic)) Just wanted our friend here not to be confused))
BTW, it seems like you need to make a third type of buttons. RN your CTA and header button have the same visual weight and different actions to call, which can be confusing))
You are a guru!!!
Ay thank you man, I’m not that experienced though haha
How many months/years in web dev?
around 5 months
I started around 2nd week of June. I’m still trying to do a lot of landing page practice
This above was my first project.
See that’s a pretty good start for sure
Thanks bro. What stage are you now?
No worries, i would say I’m intermediate, I’m not the worst and I’m not the best but I’ve got some decent knowledge.
I love this. We all have a long way to go
For sure, web development has many aspects to learn
Nice webpage bro good luck
your website looks amazing but you should use scroll-margin-top as jump links are not working as good as they should be this could help"https://css-tricks.com/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top/
Chris Coyier
CSS-Tricks
Fixed Headers and Jump Links? The Solution is scroll-margin-top | C...
The problem: you click a jump link like Jump which links to something like Header.