Designing a website, how do you start?

When you want to create a website, it is tempting to start programming right away. But if you want to build a solid, well-functioning website, it's important to create a good design and plan first. In this blog post, I'll take you through the first steps of the web design process, from UX/UI design to creating an ERD diagram and final programming of the site.

The importance of UX/UI design

The first step in creating a website is designing the site. This is also called UX (User Experience) or UI (User Interface) design. UX focuses on usability and user experience, while UI ensures consistent navigation and action flow. Together they form the basis of a user-friendly and attractive website.

Tools for Website Design

You have various options for designing your site. For example, you can work with:

• Adobe XD: Ideal for those who already have an Adobe package.
• Figma: Offers both free and paid versions and is a popular choice among designers.
• Canva: My personal favorite because of its user-friendliness and the many standard templates. Canva offers a free version, but also a Pro version that you can try for free for 30 days.

User stories and layout considerations

When designing your site, you should keep the so-called 'User Stories' in mind. These are short descriptions of what a user should be able to do on your site. Below you can see an example of the 'User Stories' that I created for my fourth study project. It's about thinking about what you want a user to be able to do on your site.

In addition, it is important to design for different screen sizes, such as mobile and tablet. This helps you see what you might be running into and ensures that your design is easy to read and attractive on all devices.

Database schemas and ERD diagrams

Once your design is ready, it is wise to create a database schema. In Python this is also called a Django diagram model or ERD (Entity Relationship Diagram). An ERD diagram explains what your intention is for your backend, or your database. This helps, for example, to efficiently manage user profiles, orders and delivery addresses, it indicates the mutual relationships. Below you can see an example of this. You can make this for free in LuchidChart.

From design to programming

Now that everything is thought out and designed, it's time to program your site. I personally use Visual Studio Code (VS Code), a free program from Microsoft that is also available for Mac iOS. Here you write the code in different programming languages. Before your site can go live, there are still a few steps, such as setting up a repository via GitHub and deploying via Vercel.

Let me help you!

These are the first steps to designing a website, but it's important to have some knowledge of programming languages. Don't you know? Then it is a good option to contact me, so that we can see together what I can do for you!