Need some Design Input!
Not really a code problem but Im working on a UI for my webpage and I'm not really great with design. Was hoping to get some design input on one of my pages. Here is what I have now and would like help mainly with the card on the side. I was trying to go off a little bit of the style of AirBnB but am failing at it a bit. Any help appreciated, thanks!
32 Replies
I like it personally, super minimal, which I always tend to think is good
Only issues I see are typographical. Should be
Rating: 4.3, or Rating is 4.3, not Rating 4.3Any feed back on the layout or font?
I like both, they’re nice and simple. Although your sections could be improved
You need better visual heirarchy in each subsection, and the spacing is odd
I’d wrap stuff like
Project Overview: in an <h2> or something
basically what vince said
Also you’re listing out a bunch of sentences one after another as seperate points, probably best to put those in a list@vince That section would be controled by the user depending on what info the enter so Im going to leave that
Same mango Man, the large details on the left are all controled by the user
+1, always wrap subsection headings in an appropriate heading tag especially because it helps google parse your content
So a post could even look like this
Be prepared to have your pages ranked worse than other pages that do it right though
It's more dev work but better payoff
hmm okay, ill definitely take that into consideration then
I didnt know that before
how about for the little card on the right
any feedback for that?
Heirarchy is weird still
Yeah I agree
how would you do it?
They're all the same font weight/size
1 sec
I was trying to get inspo from airbnb
Although its a little difficult because our functionalities completely differ
The icon I picked isn't great but hopefully you get the gist
That looks alot better than what I have, thank you for this!
so each line has the same font weight
except for client info
No problem 🙂 All I really did was use the 8 point rule and some font weights/sizes
So the buttons are 16px away from each other
The distance from the buttons to the client information is 32px
The distance from the client information heading to the rating is 16px and each rating/payrate/jobs headings/paragraphs are 8px apart
Spacing is really important in establishing grouping
Ah i see
so most things should be in increments of 8?
Nah they don't have to be, the rule is to be consistent
You can have increments of 3px
8px is just kind of a common thing people go for
so if I use 8 for spacing between things, but if i decide 8 isnt enough i should use 16 rather than 10 or 12?
Probably because 1rem generally equals 16px
or if i use 3 then i should use 6, 9 etc.
I do 4px which I find works really well.
It's not about if 8 is enough, you can do 8x2 = 16 and space things out 16px away from each other, same with 8x6 = 48px spacing, it's just about playing with the increments.
Things that are farther spaced away = separate groups,
things closer together = 1 group
okay, thank you vince this was very helpful
No problem, there's a lot of articles out there about the 8 point rule feel free to read up a bit
I will for sure
It'll make your designs look amateur to professional because so many people don't follow it