3 ms·
Hi. I'm a designer, and thought I'd spend 10 mins on this to show the little tweaks I'd reach to first. I didn't do any thinking about the content, and I haven'
by JusticeJuice 4y ago
Hi. I'm a designer, and thought I'd spend 10 mins on this to show the little tweaks I'd reach to first. I didn't do any thinking about the content, and I haven't tried to push away from the brutalist visual style you're going for.
https://www.figma.com/file/pUBqrZ0zUjXfVAc6nR13ZU/Gnod?node-id=0%3A1 https://www.figma.com/file/pUBqrZ0zUjXfVAc6nR13ZU/Gnod?node-...
Type. Everything about good typography is optimising for legibility. First off, you absolutely nailed the line length. I did increase the line-height to 150%, and swapped roboto for inter. I think Inter UI is a bit easier to read at small sizes, I find roboto comes out kinda excessively bolded on most screens.
Grid / padding. I increased the padding around the card quite a bit, from like 10px to 24px. A good way to find the correct padding is putting in way too much, then pulling it down until it's starting to feel cramped, tip from refactoring ui actually. Everything is in 8px units where possible. Notice the "Welcome to" and "Hello" text are both vertically aligned.
Sizing / visual prominence. Visual prominence is just about telling people where to look first, when you first open up the page, where is the eye drawn. Considering the size of the 'Welcome to Gnod' text, I assume that's what you're trying to highlight. I've reduced the size to just 18px - only 2px bigger than the 16px body font. But, cause it's got it's own padded background colour, it's still right where the eye goes. There's lots of ways to draw attention without size, and you don't need to use more than needed. Same with the dots, I don't really get what they're for honestly, but I made them a bit smaller.
Icons, swapped them out for font-awesome icons, felt a bit more premium idk.
Colour, I changed the pure black to off-black, slightly blue. It might seem like designers just hate contrast, and that might be true. But, there's lots of arguments for using 'rich' blacks, but I won't get into it haha. My subjective choice.
Anyway, that's my 10 cents, ignore as needed haha.
- bavila 4y agoSo much better. Well done.
- mg 4y agoWow, very cool, thank you! I just woke up and saw this now. Your changes definitely make it look more professional. I especially like the larger paddings and that the headline is aligned with the rest of the text. I will get back to working on the page later in the day and then incorporate some of your changes.
- austhrow743 4y agoCan you comment on why you introduced underlines for the links?
- JusticeJuice 4y agoNo big reason beyond I liked the look, and underlining is a good affordance to let the user know it's a clickable link (beyond the heavier weight and colour change). There isn't visually a huge amount going on with the page so maybe adds a touch more flavour.