Contents
Introduction
Hi, I’m a Rob, and I am proud to present my new website… it only took about 3 years of procrastinating, redesigning, and rebuilding.
You can learn more about me on my about page, but, this blog post I’ll be sharing my process for designing and building this website, and some of the tools I used along the way.
The Process
I went about this all wrong to start with. As I thought I had a clear idea of what I wanted my website to be… it wasn’t until I jumped straight into Adobe XD (later switched to Figma, but that is a separate post in itself) that I quickly realized I didn’t.
But that is the beauty of the design process, it is iterative. I went through a number of different designs and ideas before I settled on the one you see today. Here is a quick overview of the process I went through and recommend you follow if you are looking to build your own website:
-
Plan, plan plan: List out the key purpose of the site in question, organize all the key information into an IA (information architecture) diagram to help plan your user’s journeys. Also worth listing out your potential user demographics and thinking about how they might use your site. This will influence how you organize your content.
-
Rough out an initial wireframe, go back over that wireframe and annotate it trying to imagine how one of your user’s would use the site, hop into Figma to flesh out your wireframe. Now it is time to build…
-
First take a look at your design and figure out what you really need (more on this in a bit), for example, a database, a CMS (content management system), and consider how dynamic the content is. Also, are you building this for yourself or a client? Use this information to decide on your tech stack and hosting environment.
Let’s dive into each of these steps in a bit more detail.
Planning
Planning is a crucial step in the website design and development process. It helps you to define the purpose of your website, organize your content, and create a roadmap for the design and development process. Here are some tips for effective planning:
Define the purpose of your website
Before you start designing your website, it’s important to define its purpose. What do you want your website to achieve? Who is your target audience? What kind of content will you be publishing? Answering these questions will help you to create a website that meets the needs of your audience.
For example, in my case, I wanted to create a website that would allow me to share my knowledge and insights with others. I also wanted to create a website that would allow me to build a network and community around my work.
Organize your content
Once you’ve defined the purpose of your website, it’s time to organize your content. Create an information architecture (IA) diagram to help you plan your user’s journeys. This will help you to organize your content in a way that makes sense to your audience.
An IA diagram is a visual representation of the structure of your website. It shows how your content is organized and how users will navigate through your site. It also helps you to identify any gaps in your content and to plan for future growth.
For me this was quite simple, but if you were building a more complex site, you would want to consider the following:
- What are the main sections of your website?
- How will users navigate between these sections?
- What content will be included in each section?
- How will users navigate between pages within a section?
Organising your content in this way will help you during the wireframing process as you will have a clear idea of what content needs to be included on each page.
List out your potential user demographics
Think about who your target audience is and how they might use your site. This will influence how you organize your content. For example, if you’re building a website for a restaurant, you might want to organize your content by meal type (breakfast, lunch, dinner) or by cuisine (Italian, Mexican, Chinese).
For this site I knew my target audience would be other developers and designers. So I went for a simple design which allows people to get to my blog posts quickly and easily.
It is also a good idea to think about using analytics to track how your users are interacting with your site. This will help you to identify any issues with your design and to make improvements over time. Or even if you are reaching your target audience.
Create an initial wireframe
A wireframe is a visual representation of your website’s layout. It’s a simple sketch that outlines the basic structure of your website. Use your wireframe to plan the layout of your website and to ensure that your content is organized in a logical way.
Doing your IA diagram first will help a lot during this process.
I personally like to do my wireframes on a tablet with a stylus. I find this helps me to get my ideas down quickly and easily. I also find it easier to make changes to my wireframe and rearrange things as needed.
Annotate your wireframe
Once you’ve created your wireframe, go back over it and annotate it. Try to imagine how one of your user’s would use the site. This will help you to identify any potential issues with your design and to make improvements. You may even decide to start over with this new found knowledge.
This is where I find using a tablet and stylus really comes in handy. I can quickly and easily annotate my wireframe but also keep a copy of the original wireframe to refer back to. However, you can also do this on paper or in another piece of design software.
If you are doing this in a team, FigJam is a great tool for this. It allows you to collaborate with your team in real-time and to annotate your wireframe together.
I did this a number of times before I actually started fleshing out my wireframe in Figma.
Flesh out your design
Once you’ve created your wireframe and annotated it, it’s time to flesh out your design. This is where you’ll add color, typography, images, and other design elements to your wireframe.
For me I personally like to start by thinking about colours, typography and some small components such as buttons and cards. This helps me build a mental image of what I want my site to look like.
I like to follow the Atomic Design methodology when designing my websites. This helps me to break down my design into smaller components and to think about how these components will work together to create a cohesive design. However, rather than trying to design every “atom” at once I like to design sections of the website and then break these down into smaller components. This feels like a more natural way of designing for me.
Tech Stack
I considered many different stacks and frameworks for this website. Joke about JavaScript frameworks being born every minute. I looked into a number of different CMSs. I was getting decision paralysis. Ultimately I decided on NextJS 13 (with the new app router), Tailwind, NextUI (component Library).
I also decided completely against using a CMS at all. I hope to go into further detail in a future blog post about why I decided on this (and if your website really needs one), but the short version is I wanted to treat this like an MVP and knew from experience trying to set up a headless CMS and model all the different fields would take me too long and would also lock me into that CMS from the get-go. Instead of a CMS, I decided to use Contentlayer (another reason I chose NextJS), which works really well with NextJS and MDX, giving me enough flexibility with my content to start my blog.
I knew I wanted my site to be statically generated to save on costs and hosting and also for the performance benefits. I chose NextUI as a component library as it plays nicely with Tailwind (my go-to styling tool nowadays) and also has components with some subtle animation effects that work really nicely.
Conclusion
So here we are, finally built and live after around 2-3 years of procrastinating, redesigning, and rebuilding. Am I happy with it? Excuse my French but… f**k no. Will it do for now? Yes. Will I be iterating on it, definitely.
What would I do differently?
I would probably use Astro instead of NextJS and strip out the Next UI. Here is why:
-
Astro supports MDX out of the box (no need for Contentlayer) and would require a lot less set up to get going. It is a static site generator but has a lot less overhead to worry about than NextJS.
-
I would strip out NextUI and build my own components with Radix UI. For what I have used NextUI for, I could have easily built my own components with Radix UI and Tailwind. It is a bit heavy for what I am using it for currently.
I hope this helps anyone else soon to take on building their own personal website, and why not connect with me on the socials!