The Secret to design attractive websites

Learn how to make websites that attract a viewer using simple ideas and tips.

Photo by Ferenc Almasi on Unsplash

What is the first thing you see when you visit a website - the images, the catchy taglines, the colours? Why do some websites seem to be more appealing to our eyes? Why do we tend to stay longer on them? These questions made me wonder, how can I make my website attractive? And that’s why I am here to share what I found in answer to my question.

There’s a point where we all start, so did I. After learning HTML, CSS, I started creating web pages for practice. But when I compared my creations with other good websites, I soon realized that I was doing something wrong. The web pages I created looked like the work of an unprofessional or a freshman web developer. Though I was one, I didn’t want my work to reflect that. So I did some research and my observations are stated below.

There are many elements we can identify in a website. But what makes us stay on a particular webpage is the visual communication that the webpage does with our brain. This visual communication can be improved by enhancing certain properties of some particular elements on our page. So let’s get started and target each crucial element that will increase our website’s beauty.

Fonts & Icons

Fonts and text are an important part of your website, as most of the times information that you want to share will be in the form of text. So our first element is fonts and icons.

• For paragraphs, use a font size between 15 & 25 pixels. It will ensure that your text is neither too small nor into the reader’s face.
• Although the heading should be big, I prefer it to be not more than 60 pixels. However, you can try to find what suits your page better. (Use Developer tools to see what looks the best)
• Icons can be added to make your website look cool. These can be used at places like CTA(Call-to-action) buttons, call and email information, etc. It can also be used to draw the user’s attention to particular information or a button where you want the user to click.
• Google fonts is the place to go for huge options of different font styles. Fontawesome is a great tool for icons.

Colours

Colours add a new look and define a particular theme for your website. Hence choosing an expressive colour palette and using it for your website is very important.

• Choose your primary and secondary colour palette. This colour can be a colour representing your brand (or may be inspired by the logo of the brand if you are making it for a company).
• Try to choose only one or two colours as your primary colours.
• Use different tones, tints, and shades of the primary and secondary colour throughout your web page. Using different forms of the same colour will keep your web page uniform, using different colours will make it look less professional.
• Use this image below to understand about tones, tints, and shades of a colour.

• Also, choose an accent colour. It should be bolder than the primary colour. If you are confused about which colour to pick as your accent colour, choose the colour on the opposite side of your primary colour on the colour wheel.
• Use the accent colour for elements where you want to draw the viewer’s attention like the Call-To-Action buttons, Navigation menus, etc.
• 60–30–10 rule- It applies that we use 60% primary colour, 30% of our secondary colour, and 10% of our accent colour on our web page. This rule ensures that we do not overuse a color resulting in our site to be monotonous.
• You can refer to these websites to get colour palette ideas- Colorpalette and icolorpalette and material.io.

Images

The majority of those who use a search engine, browse through pictures first, which makes them more likely to visit the website. So, not only do images add beauty but they also increase traffic.

• Always use relevant images.
• If you want to put text over an image, try to overlay the image. You can also try blurring it, darkening it, or overlaying it with colour gradients.
• The position of images should be in a way that attracts the user’s attention towards the important text.
• You can use Unsplash for images and Undraw for vector art.

Layout

Another property is the Layout of your web page. It decides the overall look of your site and the arrangement of all the different elements on our page.

• Choosing a good layout is very easy. It should fulfill your requirements and also be simple, neat, and tidy.
• Choosing a simple layout will not only make it easier to create but also improve the content’s readability.
• Always draw a rough layout of what you want to build on a paper and then start writing your code. It will give you an idea of what you are building and streamline your ideas. This is known as wireframing.
• A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. For these reasons, wireframes typically do not include any styling, color, or graphics.
• Whitespaces should be used appropriately. Whitespace here refers to the areas with no content; they need not be white coloured. They improve the legibility of your page.
• For layout ideas- Dribble.

I know the reason you clicked through this blog, THE SECRET, right?

So, the secret to making an attractive website is — KEEP IT SIMPLE!!

Yes, this is it. Please don’t take me wrong, simplicity is the key to designing the best websites, even software, and apps. Most websites are made simple in order to improve user experience, thus increasing user retention.

If you have read till here I hope you have learned something new. Try using these ideas and I believe these will help you improve your web design skills. Till then, keep developing!!