Re:How Stripe Designs Websites (2017)
by ratww on Tuesday May 05, 2020 @03:02PM
(#23083549)
Use space to separate sections:
Remove all the boxes and drop-shadows. They look very outdated. Use full-width for the hero and remove the whole box-shadow around the lower sections.
Now using space to separate the sections. For example, adding a vertical padding of 64px to the "We build apps" section automatically makes it look like a Stripe-like site. An example: https://onepagelove.com/smash-lite
Use bullet points:
On the "Are you still sending emails?" section just use bullet points. Remove the border and background color on that table with odd-even colors. And add actual bullets. You already used <ul> and <li>, now let people know that those are bullet points. Add some padding between each bullet point.
HTML bullet points already make it better to read. If you want to look cute, use bullet point images that catch the eye. Similar to how this template does: https://onepagelove.com/devbook
Use visual hierarchy:
For the section titles, use a larger font size, like 36px. Add some padding to the bottom to make it stand apart from the text. Users will use this to their advantage to scan your page.
You're already using bold for the bullet point titles, so you're aware that they're important. Make them pop more by putting the title in its own line and make it a bit bigger. I'd try to use less copy. Drop the effect that collapses the text when you click it.
Be consistent:
Designers are very consistent when it comes to spacing. Try to stick to multiples of 8px: 8px, 16px, 24px, 36px, 48px, 64px. Try to avoid using multiple fonts and colors for things that are in the same hierarchy.
I think you get the gist. Alternatively, just get a free template like the ones I linked, it's much easier than designing things from scratch.
Remove all the boxes and drop-shadows. They look very outdated. Use full-width for the hero and remove the whole box-shadow around the lower sections.
Now using space to separate the sections. For example, adding a vertical padding of 64px to the "We build apps" section automatically makes it look like a Stripe-like site. An example: https://onepagelove.com/smash-lite
Use bullet points:
On the "Are you still sending emails?" section just use bullet points. Remove the border and background color on that table with odd-even colors. And add actual bullets. You already used <ul> and <li>, now let people know that those are bullet points. Add some padding between each bullet point.
HTML bullet points already make it better to read. If you want to look cute, use bullet point images that catch the eye. Similar to how this template does: https://onepagelove.com/devbook
Use visual hierarchy:
For the section titles, use a larger font size, like 36px. Add some padding to the bottom to make it stand apart from the text. Users will use this to their advantage to scan your page.
You're already using bold for the bullet point titles, so you're aware that they're important. Make them pop more by putting the title in its own line and make it a bit bigger. I'd try to use less copy. Drop the effect that collapses the text when you click it.
Be consistent:
Designers are very consistent when it comes to spacing. Try to stick to multiples of 8px: 8px, 16px, 24px, 36px, 48px, 64px. Try to avoid using multiple fonts and colors for things that are in the same hierarchy.
I think you get the gist. Alternatively, just get a free template like the ones I linked, it's much easier than designing things from scratch.