Website Designing with Notion

Website Designing with Notion

While I continue to build my technical expertise around website creation through Notion, I realized that I was lacking in the structure of web designing. So, I spent some time learning about the process and this is my research on how you could build a website more effectively.

  1. Before getting into the implementation, start with a plan. Determine the site's purpose. Ask:
    => Who is it for?
    => What's the purpose?
    => How would the visitor benefit?
    => How would you benefit from what the visitor sees?
    Start with high level and work it down to the specifics

  2. Define the audience.
    Find out who would be the ideal site visitor. What device would they be using it on, the browser, OS, etc. Go through similar websites to get an idea of the requirement, if unsure.

  3. Put the content together.
    You need not go into the exact detail just yet, but the overall structure like Home Page, Subpages or additional pages is important. Enlist the title of each page. Create a wireframe and a site map for clarity.

  4. Decide the dev tools and techniques that you'd need.
    When building a Notion Website, compare and choose the site generators / custom framework, or any integration tools / extensions that you may need to sign up to. This might be helpful here

  5. Get a domain and hosting plan.
    Decide on the name and extension of your website. Compare the hosting plans based on customer service, uptime, space, data transfer rate, etc. Set a placeholder page on the domain. Congrats, you're live, but there's a lot ahead.

  6. Decide the look and feel.
    Based on the target audience, decide on the layout and design, colour, font, industry standards if any, navigation scheme, etc.

  7. Come up with a mock design
    Based on the above, create a mock design based on the site map created earlier. The visual representation will help in easy communication. Decide the design for above the fold and rollovers.

  8. If you're going to have images and graphics that you're going to design, then work on the graphic optimization

  9. Adhere to the latest Web Standards.
    In Notion, this may be taken care of, but we aware of any red flags

  10. Search Engine Optimization.
    Know what to do and what not to. Add robots, site maps, descriptive body text, title, etc. In Notion, this may be handled by the Site generators. So, make sure to double check that it's being handled

  11. Building the pages.
    This is when you start the actual implementation on Notion and the other tools of your choice

  12. Add styling to your pages.
    Notion will make it easy for you as you can do that on the go. But, if you need additional styling, implement it on the Site generator using drag and drop or custom styling.

  13. Navigation System.
    This should be based on the principle of usability, audience and expandability. Overall, it should be easy and intuitive. At any point of time, the visitor shouldn't feel lost on the website.

  14. Make it Interactive
    As an example - you may need web forms, polls or modal pop-ups. Make it more interactive to the audience

  15. Testing
    It's equally important to try the site on multiple devices, browsers and OS to see if it looks good.

I hope you found this useful. Let me know what process do you follow during website designing.