How to design a website template — the process

Published Date
January 7, 2022
Tags
Web Design
image

Up until January 7, I have created 7 website templates and themes for Notion workspaces powered by Super. View my designs @ super.yusuf.is.

I used to design custom websites in HTML, CSS, and JS, but after discovering Super, I realized I had more fun designing Notion workspaces. A big part of it is because I personally use Notion a lot.

Now, here is my own design process that I've adopted when creating website templates.

Decide on a theme

  • Personal site
  • Blog
  • Portfolio
  • Online store
  • Landing page
  • Business site

It doesn't matter if you unknowingly created a different theme altogether halfway through the process, but what matters most is that you need to start with an idea. Having decided on a theme will help you take the first step.

Laying out the basic blocks

Once you have decided on a theme, create a quick first draft of your site.

For example, if it's a personal site theme:

  • Upload a profile photo and see where you'd like to place it
  • Create a couple of dummy navigation links on your navigation bar or panel and decide where you'd like it to be
  • Upload a couple of photos on a page
  • Copy and paste lorem ipsum text blocks and see how the text fit the overall design

This should take you less than an hour to do. Remember, this is just a draft. It's okay for it to be messy and disorganized. The point here is to start with something, and let your imagination run wild.

Hunt for inspirations

image

Next, it's time to look for websites with a similar theme. This step serves as an imagination booster for your first web design iteration.

Here are 2 of my favorite sites to hunt for inspirations:

I also use Google search. Simple keywords like beautiful personal sites, or the best website designs works. Sometimes, when I encounter great-looking sites, I bookmark them for future reference.

Once you shortlisted 3 or 4 sites that resonate with your design, visit each of them and pick out your favorite design features. Your best friend when visiting the sites will be the 'inspect element' tool. Right click on anything on the site, and select inspect element to see the element's CSS attributes. Copy them, and experiment it on your own site. From here on out, it's a matter of finding which design you like the most, add your own spice to it, and repeat.

As you re-iterate, keep looking for inspirations and see which parts from a website fit your overall theme.

Creating a user-friendly site

image

As you are designing your website, there are a couple of things that you need to keep in mind.

Firstly, and the most importantly, it needs to be user-friendly. Make sure your site accommodates both desktop and mobile views, and better, tablet view, too. Being accommodating means that the elements on your site resize accordingly depending on the device, they are not overlapping, and are placed suitably where it's easy for visitors to see and reach.

Next, consider the text's font and site's color theme. These two attributes should be easy on the eyes of your visitors. Text should be legible on all types of devices, and color themes should be consistent throughout. It's praiseworthy to be bold with your choice of font and colors, but if you're thinking of selling your template, it's always better to stick to what works for the masses. Anything extras, your customers can tinker on their own.

Finally, your design should be aesthetically pleasing. This is very subjective, but the general rule is that after you followed all the design fundamentals, using the website should make you and at least 10 other random people feel like your design is of high quality.

Conclusion

The whole process may take you as fast as just 1 day, or as long as 1 week — depending on your priorities. You shouldn't be spending too long on a single design, but spend a long time to create many designs. This way, you'll learn more about the intricacies of web design.

I hope you have found this post useful. I'm on Twitter if you'd like to reach out.

— End

Posts

Why use Notion and Super to create and host websites
January 8, 2022
Web Design
💡

Yusuf

Links

Hidden blocks