Core Project

Design And Build A Website

This project was focused on how to design and build a website. In this article I will take you through the five 8 stages you need to complete and outline my own experiences and challenges in the hope you can learn form my many mistakes.

Key Summary

Think about what you want from your website and who will be reading it before you start
Make sure the platform you use can support the features you want on the budget you're prepared to pay
Get a domain name that's easy to remember and where possible no special characters, numbers, or difficult phrases
Websites are easy to overcomplicate, you can get a one-pager (Caard) for $19, use the templates available
Make it short and sweet, keep words to a minimum and make it easy to skim read
You can always improve, publish it scrappy and go from there. Set yourself a hard deadline and stick to it (this is something I really wish I had done)
Google analytics, Google Tag Manager and Light House reports are a great way to see how people are using your website and how it's performing.

At the bottom of the article you can find:

A list of recommend free/ budget-friendly tools and resources
A step-by-step guide to how I would approach the project knowing what I do now.

**********

Introduction

Creating a website is something I've actually tried a few times before to varying levels of success.

I knew from experience that it nearly always takes longer than you expect and often it's the small details / micro-decisions that slow you down and don't matter half as much as you expect them to.

That said, I'd really encourage anyone who is thinking about it to give it a go.

It's super empowering to understand the basics of web design and have the knowledge that you could build something half-decent reasonably quickly if needed! It opens up so many opportunities,

There are so many tools and templates now readily available, building one is so much easier than you'd expect.

With 71% of businesses having an online presence* it's a massively transferable skill and surprisingly super creative.

This project is ever evolving. It's really been the backbone of Project 50 and helped me decipher what Project 50 was all about.

What do I want to get out of my website?

This was one of the first big questions I encountered, at this point I had no idea where Project 50 would take me so I had a clean slate to work from.

I debated if I should start building an online shop or a personal website so I could link this skill with one of many future projects but none of these seemed to fit.

Briefly, I had wondered if I really needed a website. Being very tight for cash and with no obvious purpose I considered leaving this project to a later date and focusing on doing something more tangible.

The light bulb moment came as I was just about to go to sleep, why don't I make a website that could document each stage of my projects and act as a mini landing page for each. I had already planned on documenting my learnings and getting better at writing was on my list.

Thereby creating a digital record both for myself and others instead of just having the notes in my notepad seemed like a brilliant idea!

Where should I build it?

This was a big one, I had previous experience with WordPress, Wix and Square-space but hadn't gotten one with them.

For this, I actually asked my brother, who works in product design. He suggested Framer as a fairly affordable option, which allowed you to learn basic design elements.

At first I tried following a youtube video which took me through the basics of building a website, this 3hr video probably took me about 3 days to master as since recording framer had undergone a few updates.

I did learn a lot of transferable skills, most notably the ability to make buttons, the existence of 3D animation (which caused its own rabbit hole + had to be separated into a new project) and how to customise the header.

However, this presented its own problem, the site I first came up with was focused on a tech product and didn't have the right brand feel for what I was looking for.

Given that I had designed it to the specifications on the video it was tricky to adapt new features especially as I had essentially jumped from 1-100. This was an excellent learning experience but very frustrating.

Time to scrap the website and start again. Ultimately this wasted a lot of time. If I were to start again I would have approached it differently, using the basic design features to get something up quickly and using the framer tutorials which were much shorter to digest.

It's important to note here that when I started out I had no intention of putting any personal pictures or even stories online.

It was only after a random call with a coach from LinkedIn (Luke Harlan) that I was persuaded to put myself out there a little more. I'll always be thankful for that conversation.

Finding your audience

After multiple attempts I realised I had to go back to basics and really map out what I was trying to achieve with the website.

I filled out this form, which helped to decipher everything from the colour scheme to the tone of voice. I really liked the dark purple colour but having the whole site in that colour became overwhelming.

I've always liked sites that aren't filled with too much copy (text) and feel clean. I realised that for me limiting the colour scheme to just 3 colours, white, light purple and dark purple allowed me to keep images looking sharp and it was easier to keep it consistent across the site.

I still don't really know who I'm writing for, anyone who lands on my site will probably know me in some capacity or have a curious mind.

Although some of my projects include things I will sell the main purpose of the site is to inform and hopefully meet like-minded people, so there was no real call to action (CTA's).

I decided I wanted that for this to happen the site had to look clean, inviting but most of all fun!

Domain names

This was also a tough one.

Originally I had wanted Project50.com but my new nemesis had taken all of the good domain names (type in project 50.com and you'll see what I mean).

Project 50 actually isn't the best title, it's going to take a while to have dominant SEO, as there is another company already called Project 50.

Although memorable it lends itself to new challenges such as do you spell out fifty or just have it written as a number. will there be a hyphen between the two words, and if so will people remember to put it in. With the majority of project50 web domains taken I could only find 'theproject50.com ' at a reasonable price but even then it wasn't intuitive as it also required the person to remember to add the 'the', that said it would set it up as its own entity.

Having also found and secured clairemoss.com I spent a lot of time deliberating which one to choose.

In the end, I decided to use my name, it made sense given that most people who would likely be seeing Project 50 would likely know me personally, hopefully, it would give it a chance to rank higher in SEO, and it'd also save me some hassle in the long run if I ever created my own website, I'd likely be linking to this anyway so saved me some time.

Design

The biggest tip I can give is draw a very rough outline of where you want different elements to sit snd then start writing the website 'copy' that you want to include.

Think about the messages you want to get across. Do you want your website to convey trust, fun, expertise or a strong brand.

One thing I am certain of is your website will never feel finished. It grows with you and as you evolve it will evolve with you.

Conclusion

Overall there were a lot of thoughts and questions which in hindsight was a blessing in disguise.

It forced me to reevaluate my why behind Project 50 [Potential blog] and what brand I wanted to create.

It was through this process that I realised a personal website where I could host a blog made the most sense, I could document what I was doing for future me and others whilst also learning the fundamentals of web design.

Step one, complete!!

**********

Blueprint: knowing what I do now

Step 1: The thought exercise
Define the goal of your website
Create a persona of someone who might read your blog- what would they want?
Decide if you need a multipage website, sometimes a blog, online profile or one pager is enough
Think about what call to action/ next steps you'd like your user to take
Set yourself a deadline, I'd recommend a week to get a scrappy 1st draft published, if you're ambitious then 1 day!

Step 2: Foundations
Start thinking of a memorable domain name (this can be delayed if using Framer)
Decide on a basic and consistent colour scheme that fits your brand
Create a document with what you want your website to say - remember to keep it concise - it'll be tempting at this stage to try and build the website, don't do this, it just adds another element which will feel overwhelming/ confusing.
Get a folder together with the images you'd like to include
Create a wireframe (this is basically a rough map of what you'd like your website to look like) If you're tech-savvy miro is a good tool to use, if not the good old pen and paper is also great! (see below)

Step 3: Putting it all together
Decide on the website builder you'd like to use
Buy your domain name and connect it with the builder
Use their template to get close to your desired wireframe and add in the text/ images.
Link any pages you might have added to the header/ menu bar
Make sure your landing page (home) has one clear call to action that you can see when you land
Keep your text styles consistent, and consider the use of capitalisation and grammar. Even the colour, size and type of font

Step 4: Optimisation
Connect your site to Google Analytics + Google Tag Manager

Share it with close friends and family to proofread/ get initial thoughts
Direct people to your site, link to it on your profile and share it

Optional
Read up on SEO optimisation
Get an email capture, ie newsletter, waitlist, book a call so you can follow up with the next steps

Step 5: Celebrate!
A huge congratulations!! I know how much work building a website can be so a huge well done for making it. I'd love to see what you came up with so please do share it, I'd love to see it :)

Tools and resources

Free and low-cost tools and resources that helped me in this project

Free:
Hex: colour code for website
Pexels and Unsplash: imagery
Google Analytics: all data
Kittl or Canva: Logo design

Low Budget:
Framer: website builder
Spline:3D interactive web imagery
Google Domain: cheapest long-term for domains (this has since been acquired Squarespace)

Resources
Define your audience:
What website builder is best for you:
Compare domain name sites:
Youtube Video: for 3D products (useful for an overview)
Buttons, headers and carousel creation on framer:
Text template for all your website copy + CTA's:

**********

Special thanks to:

In all of my projects there were absolute superstars who helped me along the way, weather that be pushing me to be braver, suggesting resources or even offering their time to help, these are just a few who helped me in this project:

- Luke Harlan, for encouraging me to use my personal story/ photos even when I was doing everything I could to hide it
- Mark Moss, for introducing me to framer/ components and listening to my frustrations
- Sophie Vyse - for ongoing support and morel
- Becky Turner - for all the help with my offering page

Sources:
*https://www.forbes.com/advisor/business/software/website-statistics/#sources_section