Design + UX

  1. Hospitality

    People have chosen to spend their precious time looking at a thing you made, isn’t that cool? Making a webpage has a lot in common with hospitality — when someone makes the effort to come to you, it’s good to make them feel comfortable and welcome.

  2. Keep it simple

    There’s nothing wrong with simple and easy. If you find yourself needing crazy code or fancy features to make a page work, often it’s better to start over and look for a simpler solution.

  3. Prioritize!

    Pick the most important thing your audience needs to do on your page — once you decide, put that thing big and bold at the top of the page. Sometimes this means making hard choices about what’s important! It’s not easy, but your audience will thank you for it. After all, if you can’t decide what’s important on your page, don’t expect your audience to be able to either.

  4. Plan to be scanned

    People don’t read webpages, they scan. If there’s important information that your audience needs to see, make it big and visual! Don’t trust that people will read all (or even most) of the words you put on the page, especially if those words are in big blocks of text.

  5. Be a ruthless editor

    Always be looking for ways to make text shorter and clearer. People appreciate it when you’re mindful of their time and their attention (see #1). Also, it gives you more space to make text bigger and more visual.

  6. Pick good visuals!

    Exciting and engaging photos and visuals are a huge part of making a successful webpage — it’s no accident that every single blog post and news article has an image at the top. People are visual creatures! Here are some resources:

Specific Superpage Design Tips

  1. Check out some general 350 graphic design guides
  2. Lead with a big photo and big text

    If you look at existing superpages, almost all of them have a big photo and a big headline in the first section.

  3. Use lots of white space

    Superpages are intended to be visual and encourage people to scroll down — don’t feel like you need to cram everything in. Using sections set to “narrow” width and “medium” (or larger) margins is a good way to keep a page feeling light and easily scannable.

  4. Be judicious with background images and colors

    It’s good to find a balance of background images/colors. You want enough colors/photos to keep things lively, but not so many that it becomes too intense. Some tips:

    • Don’t put sections with two background images next to each other (especially when using parallax).
    • Don’t go too crazy with color — start with white and light gray as the background colors for most sections. Then use more intense colors to call attention to your most important sections.
    • Be careful using too many background images. Images (along with videos and embeds) are the main thing that will make your pages slow to load.