website design

html html html

Building satisfying websites.

Design is one of the more questionable things, while some say there is so much design, and thought that is required, once the product is delivered, all decisions seems very obvious and simple to the point that you may even give the illusion that design is an easy process. Perhaps it is rightly said, good design is invisible and hence unappreciated.

In this blog, I want to share how I created my personal website, or rather my nth iteration of it (I have stopped keeping cont now.)

How :

Developers often wanna rush to their editor, code out components, put em together & call it a day. But before that, the design have to be finalised, and it can be a tiring process if you are not a designer.

Like all things in life, the solutoin is to go about it one step at a time.

Step 1 : Create a preiliminary vision board

I often like to start by creating with a vision board, which basically anything I find on the internet that I like and put them together sorta like a collage, be it a website I liked or a journal style or color that drew my attention on pinterst. Once you have everything in place, observe what you like, discard what you dont, try to group items on your vision board by their design, style or utility, as you try to think some patterns will emerge. The idea is to eliminate multiple component/design for the same concept/component and end with one.

Once you are settled with this based idea, the next step is to let sleep over it. We often over analze in rush, if there is doubt, pin it for later.

Step 2 : Decide number/type of pages that the website requires.

As developers we often think about building components, but thinking about components is like thining about what the interior design would be for a house before we have put the columns or the walls.

Hence, create a layout based on your requirements :

  • [] how many pages are to be made.
  • [] home page.
  • [] nav bar.
  • [] other pages in the nav bar.

Day 2

You can sit for weeks seeking inspiration and move in circles, and never get started, we often delay decision thinking we will be able to comeup with better solutions but that doesnt happen, come up with the best you can today, stick to it.

Step 3 : Create named layout of the website

Once we have the number of pages, create named spaces for each of the pages. This is similar to creating rooms for a house, where you may not know what furniture exactly you will put in what room, but a good enough idea so that kitchen and your bedroom are built differently.

Step 4 : Settle with a visual design i.e color, font & art style.

While this may not be super easy, there are website with curated color & fonts that you can steal. Dont give too much time here, as this can be easily changed just settle w9ith something.

Icons : https://lucide.dev/icons/ Fonts : https://fontsource.org/?variable=true Font pairing : https://www.monotype.com/font-pairing#/playground

Day 4

Step 5 : Make functional ~ good enough components for each page.

  • Once we have an idea of the visual design of the website.
  • We should code out necessary componenets page by page.
  • After this stage, the website should have all components laid out with some styling.
  • The website should be functional and ready to be live.

Day 7

Step 6 : Prep to make the project live.

  • add favicon.
  • do seo optimisation.

This is pre-work so we get good load speed on the very first iteration cycle.

Step 7 : Use github for project management

  • create issues for your own repo for feature requests.
  • while this seems silly, it onlt makes sense to use issues page to track feature requests & issues if any.
  • this helps manage the project very well.

Day 10

Step 8 : Add features.

  • once the initial website is live, we can look & test the website.
  • And add features & squash bugs whereever needed.

Step 9 : Thow it at the wall & see what sticks.

Put the product to test. Give it time. Add issues/FR & work on them.

Day 15

Step 10 : Refactor.

once we are done adding additional features, and squashing bugs, we would have gained a lot of experience and insights going through the process, and hence if time allows, we should take some time and refactor the entirety of project.

This is more house keeping work to make the project more maintainable.

Day 30

Thats all. And you should have a website. The time line will vary based on the complexity of the project and your skills, but I have added my estimate of time for each of the steps as well.