The Internet, as we know it today, has come a long way. When the first web pages were created in 1991, they were nothing more than text on a bare background with a few links.
The design of web pages simply consisted of writing some text. A lot has changed since then. This interesting project allows you to travel back in time and see how web pages have evolved up to the present day.
Nowadays there are programs, called web creators, with ready-made templates that you can adapt to your design needs (e.g. responsive). These tools (like Wix, Weebly or Webnode) are perfect for beginners.
It’s amazing what you can do these days! Although you might think, “yeah, okay, but where do I start? Let’s see it.
Where do I start to design a website?
Our goal is to show you the easiest way to design a website. We understand that you are not a professional designer, as in that case you probably wouldn’t be reading this article. You have two possibilities: start from scratch or adapt a ready-made template.
Believe us, starting from scratch requires a lot of knowledge and experience. To design a website that looks good, it takes more than just choosing a few colors and fonts. It may not be obvious, but modern web pages need a lot of specific technology.
Gone are the days when you only had to worry about single screen resolution and designing beautiful buttons in Photoshop. Mobile phones, tablets and internet TVs have conquered the planet. The Internet is everywhere, and that means that the design, performance, and usability of websites have become more complex than ever. You’ll need a responsive design, or one that fits any screen.
The difficult way to design web pages: Starting from scratch
It’s not easy to do everything right! So if you decide to go for this option, you’ll want to take a look at tools like Sketch, Figma or Adobe XD, which are great for interactive prototyping. With programs like Photoshop, or using your old pen and paper, you won’t be able to add any kind of interactivity between pages, nor will you be able to add animations such as page scrolling, image resizing or pop ups.
Also, none of the design programs mentioned allow you to edit code, so once you have finished defining the basic design, you will still have to program everything.
The easy way to web design: Using a template
If your project is not super-complicated, you will find it much easier if you start from a template. There are templates for practically all common types of websites, such as blogs, portfolios, company websites, online shops, etc. And even for specific niches such as dog handlers, dentists or real estate.
Web designers always have their own templates. And open source solutions like WordPress also have a huge ecosystem of modern templates made by professionals in the industry.
In the table below you can see the differences between a web developer and an open source solution/programmed by you. Both options have their advantages and disadvantages.
Where to find ideas for the design of your website
Surely there are already projects similar to yours on the Internet. Whether it’s a travel blog, an online shop for sunglasses or a personal portfolio, do a little Google search to see what’s out there. Have you found any websites yet? Then think now: what makes those websites special, what’s good and what’s bad about them? It’s not about copying them pixel by pixel, nor is it about reinventing the wheel. Just get inspired!
Or maybe you’ve found some old-fashioned websites with outdated content. Even better! This is your chance to do better, nobody likes old-fashioned websites!
I get a lot of ideas from websites like Dribbble, Behance or Domestika. They have very talented people showing their work; you can see the latest trends, interesting concepts and good practices.
If you already know which web developer you want to use, you should check the templates they offer. Wix and Squarespace have some excellent ones that you can edit in less than a minute. As you can imagine, for the world’s most popular content management system, WordPress, there are also lots of free and paid-for templates available.
Structure your idea
A typical beginner’s mistake is to choose a template (or worse, buy one) without knowing anything about its limitations. Let’s see, would you start building a house without a blueprint? Probably not. We recommend that you stop and think seriously about what you will need for your website. Start with the basics and add details step by step. It will help you to ask yourself these questions:
What pages do I need?
These are some common examples: home page, about me, contact, blog, product pages, FAQ, landing page, etc. Another possibility is that you create a single-page website. In this type of website, what would normally be different pages are combined to form sections on a single page.
The users’ experience with these webs can be very good, since they need to make fewer clicks, but we only advise it if you do not have much information, so that you do not have to move much with the mouse.
What do I want to show in these pages?
Think about what the main objective of your website is and what elements you need (call to action buttons, form, newsletter subscription, ratings, testimonials, image galleries, search bar, etc.).
What do I want to appear in the navigation?
Structure your navigation well. Although you can add sub-levels, do not exceed 3 levels, as browsing your website would be too complex.
Once you have all the structure, it will be much easier to choose the right platform and template. Most template shops have simulations on their websites of how each template would work. Compare the designs with the requirements on your list – do they have all the elements you need? If not, contact the developer or play with the trial version of the template. Sometimes, it is also possible to add new functionality by entering lines of code.
Avoid these common design errors! The 4 Cs
Okay, I admit it. I thought it would look better if all four points started with the same letter. But it’s also a trick that helps to remember things, so in a way it’s a good design decision, right? These are the 4 Cs of design errors:
Make it easy! Believe me, this sounds easier than it is. Good design is not about getting a nice website. It’s about solving a problem. Be honest with you: Is the web easy to navigate or do you have to click on too many links, are there too many required fields in the subscription form?
Listening to the users’ opinion is an excellent way to improve. Also use the information on your website that you have available. There are tools, such as Google Analytics, that can help you know how users behave, and thus improve your content.
Make sure you use the same color range, font structure and style throughout the website. If you start mixing, your website will look like a badly made patchwork quilt. In other words, it will not look professional. A style guide can help you a lot, especially if several people are working on the project.
One thing I often see, especially in personal projects, is that there is too much text on the home page. This is not the place to write in detail about your motivation or experience. The goal is for the user to quickly see what the web is about and what they can achieve with it. Use keywords in the titles that will capture the attention of the people who pass by your website. Remember, if they don’t find the information they want quickly, they’ll look elsewhere.
This point is closely related to complexity: less is more, at least most of the time. By “complexity” we mean mainly difficulty, while by “clarity” we mean mainly design. The content should not be stacked, leaving enough blank space for it to “breathe”. This will make it easier to navigate your website.