The Process behind building a website

1. Define the Project

👉 Define WHO the website is for. Is it for yourself? For a client of your agency or your freelancing business?

👉 Define WHAT the website is for. In other words, define the business and user goals of your website project. A website or application exists for a reason: a user has a goal for visiting it, and a business has a goal for creating it.

Business goal example: Selling premium dog food.

User goal example: Finding high-quality dog food for a good price.

👉 Define a target audience. Be specific if possible and if it makes sense for your website (this can come from your client but if you build your website you have to decide it by yourself). e.g.,

Example: "Women, 20 to 40 years old, living in Europe, earning over $4000/month, with a passion for dogs"

2. Plan the Project

👉 Plan and gather website content: copy(text), images, videos etc.

👉 Content is usually provided by the client, but you also can help them produce and find some content (simply finding free images is easiest, but if they want a copy, charge them extra).

👉 For bigger sites, plan out the sitemap: What pages the site needs, and how they are related to one another (content hierarchy).

Content hierarchy: It refers to organizing and prioritizing information on a webpage or document through headings and formatting techniques to create a clear and logical flow of information. It helps users quickly find the information they need, improving the overall user experience.

👉 Based on the content, plan what sections each page needs to convey the content's message, and in which order.

👉 Define the website personality. There are mainly seven website personalities. Here is an overview of website personalities but we will discuss deeply those later in another blog.

1. Serious/Elegant: For luxury and elegance, based on thin serif typefaces, golden or pastel colours, and big high-quality images.

2. Minimalist/Simple: Focuses on the essential text content, using small or medium-sized sans-serif black text, lines, and a few images and icons.

3. Plain/Neutral: Design that gets out of the way by using neutral and small typefaces, and a very structural layout. Common in big corporations.

4. Bold/Confident: Makes an impact, by featuring big and bold typography paired with confident use of big and bright coloured blocks.

5. Calm/Peaceful: For products and services that care, transmitted by calming pastel colours, soft serif headings, and matching images/illustrations.

6. Startup/Upbeat: Widely used in startups, featuring medium-sized sans-serif typefaces, light-grey text and backgrounds, and rounded elements.

7. Playful/Fun: Colourful and round designs, fueled by creative elements like hand-drawn icons or illustrations, animations, and fun language.

3. Sketch Layout and Component Ideas

👉 Think about what components you need, and how you can use them in layout patterns. (🙋‍♂️ Get inspiration from these popular tools: Behance, Dribble, Pinterest, Awwards, Onepagelove, etc).

👉 Get ideas out of your head: sketch them with pen and paper or with some design software(e.g. Figma, AdobeXD).

👉 This is an iterative process: experiment with different components and layouts until you arrive at a first good solution.

The more you practice drawing, the better you will get.

👉 You don't need to sketch everything and don't make it perfect. At some point, you're ready to jump into code.

👀 If you want to see a practical guide to the above steps, you can check out this video.

4. Design and Build website

👉 Use decisions, content, and sketches from Steps 1, 2, and 3 to design and build the website with HTML and CSS ("designing in the browser").

👉 You already have the layout and components or the first good solution in Step 3. In this step, you need to code those visual styles in the browser.

👉 Create the design based on the selected website personality, the design guidelines, and inspiration from the above-mentioned tools.

👉 Use the client's branding (if it exists already) for design decisions whenever possible: Colors, typography, icons, etc.

5. Test and Optimize

👉 Make sure the website works well in all major browsers (Chrome, Firefox, Safari, Bing, and maybe even old Internet Explorer😱).

👉 Test the website on actual mobile devices, not just in DevTools.

👉 Optimize all images, in terms of dimensions and file size so that images can load on the webpage quickly.

👉 Fix simple accessibility problems (e.g. colour contrast issues, font weights issues).

👉 Run the Lighthouse performance test in Chrome DevTools and try to fix the reported issues.

👉 Think about Search Engine Optimization (SEO).

You can make your website source code Open by making a GitHub repository so that other developers can test and optimize your source code and collaborate.

6. Launche the Masterpiece 🚀

👉 Once all work is done, everything is perfect, and you got approval from your client (or yourself 😄), it's time to share your masterpiece with the world!

👉 Upload your website files to the hosting platform. There are countless platforms, some are paid and some are free (my favorite free platform is Netflify😜).

👉 Choose and buy a great domain name, one that represents the brand well, is memorable, and easy to write.

I know it's been too long, but it's ok, just one more last step. 😜

7. Maintain and Keep Updating Website

👉 Launching is not the end...

👉 Keep the website content update over time. If you're working with a client, you can create a monthly maintenance contract. (recurring revenue 🤑).

👉 Install analytics software (e.g. Google Analytics or Fortom) to get statistics about website users. This may inform future changes in the site structure and content.

👉 A blog that is updated regularly is a good way to keep users coming back and is also good for SEO.