4 ms·

Just when I make a break from fumbling with html and css to create a landing page! I am 45 minutes in and it looks like this: https://www.gnod.com/guest https

by mg 4y ago

Just when I make a break from fumbling with html and css to create a landing page! I am 45 minutes in and it looks like this: https://www.gnod.com/guest https://www.gnod.com/guest Feedback is welcome.

saint_angels 4y ago
I think it's a nice start for a unique style. I would suggest highlighting the main action button with some color.
- mg 4y ago
  Thanks. The style is already more or less defined by the home page, which I designed a while ago. So I mostly stitched together bits and pieces from the home page for this landing page.
Princetobi 4y ago
thestepafter 4y ago
Would recommend the same green / yellow as the circle for the primary button.
- mg 4y ago
  Yes, maybe. I am not totally sure the green/yellow circle makes any sense though. I consider removing it.
spookybones 4y ago
I’m on my phone, but the text feels too compact. The paragraphs would look better with bigger margins. Also, the top feels like a logo, navbar, and a hero all in one. I would work on it more as a logo and lose the “Welcome to” since the next sentence also functions as a greeting. The green dot is an interesting touch, but presently looks like a status indicator/green light, that, on a black background, attracts the eye more than the content and the sign-up button.
joemi 4y ago
Looks good to me. I quite like its simplicity.
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 ago
  So much better. Well done.
- mg 4y ago
  Wow, 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.
livinginfear 4y ago
The nav circles are a bit misleading. I'm clicking on them, and nothing happens. Otherwise, the design is very nice!
nmfisher 4y ago
Design discussion aside, your site looks really cool. Interested to see where you take it. Suggestion - I tend to forget these kind of things once a couple of weeks have passed (or at least, forget the name and can never find it again). It's good to have something prominent that I can subscribe to that reminds me what it is you do - a mailing list, Twitter/RSS feed/etc. I know you have your Patreon, but being honest, I'm unlikely to subscribe straight away the first time I play with something for 30 seconds or so. I need that mental bookmark so I can come back to something a few weeks later. After coming back three or four times, I'm much more open to subscribing.
- mg 4y ago
  Glad you like it! Good point about letting people subscribe to something. I will probably explore some options in this direction.

by mg 4y ago

saint_angels 4y ago

I think it's a nice start for a unique style. I would suggest highlighting the main action button with some color.

mg 4y ago
Thanks. The style is already more or less defined by the home page, which I designed a while ago. So I mostly stitched together bits and pieces from the home page for this landing page.

Princetobi 4y ago

thestepafter 4y ago

Would recommend the same green / yellow as the circle for the primary button.

mg 4y ago
Yes, maybe. I am not totally sure the green/yellow circle makes any sense though. I consider removing it.

spookybones 4y ago

I’m on my phone, but the text feels too compact. The paragraphs would look better with bigger margins. Also, the top feels like a logo, navbar, and a hero all in one. I would work on it more as a logo and lose the “Welcome to” since the next sentence also functions as a greeting. The green dot is an interesting touch, but presently looks like a status indicator/green light, that, on a black background, attracts the eye more than the content and the sign-up button.

joemi 4y ago

Looks good to me. I quite like its simplicity.

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 ago
So much better. Well done.
mg 4y ago
Wow, 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.

livinginfear 4y ago

The nav circles are a bit misleading. I'm clicking on them, and nothing happens. Otherwise, the design is very nice!

nmfisher 4y ago

Design discussion aside, your site looks really cool. Interested to see where you take it. Suggestion - I tend to forget these kind of things once a couple of weeks have passed (or at least, forget the name and can never find it again). It's good to have something prominent that I can subscribe to that reminds me what it is you do - a mailing list, Twitter/RSS feed/etc. I know you have your Patreon, but being honest, I'm unlikely to subscribe straight away the first time I play with something for 30 seconds or so. I need that mental bookmark so I can come back to something a few weeks later. After coming back three or four times, I'm much more open to subscribing.

mg 4y ago
Glad you like it! Good point about letting people subscribe to something. I will probably explore some options in this direction.