How to make your new website design so engaging that people keep scrolling?

When I started thinking on how my website should look like, I used to explore different sites.

But it never worked. I used to spend hours hoping I'd find the design that instantly resonates with me. And occasionally when it did, there was no template to recreate it.

But during my search, I noticed a pattern.

The designs that kept I coming back to had a similar vibe. I wasn't able to put that feeling into words but there was something about those designs that, although they were different, but they still felt familiar. "What is it?", I used to ask myself. That's what got me into studying UI/UX design.

And turns out, design wasn't once a time happening creative output by some design genius that occurred to her at 9AM while she was sipping her hot beaten coffee on her aesthetic feeling work seat.

Rather, design was science.

A simple set of rules that when followed creates harmonious design. Consistently. It's like music. Although there are just 7 notes but musicians have been using only them since ages to create enchanting music. Design is the same. And in this article, I'll share 7 design principles to make designs so alluring and so engaging that make people want to keep scrolling your site instead of hitting back button.

But before we dive into those, here are some design elements you must absolutely avoid.

Design mistakes to avoid

1. Centered text

For long paragraph (more than 4 lines) avoid center text.

When each line gets a different margin on the left side, it creates strain on the eye on where to focus when jumping to next sentence. The more the eye strain, the more load brain experiences making people forget what makes your offer good.

So avoid centered text.

2. Change in margin

Our brain sees an imaginary margin line when reading text. When the margin becomes off, it creates inconsistent design.

People might not be able to put it in words but the brains unconsciously registers it as lack of detail by the brand which hurts brand perception.

So make sure alignment is consistent throughout the page in your website.

3. Horizontal sliders

Horizontal sliders look cool and are often part of many templates but question is do they help our business in any way?

Research shows most people don't scroll horizontally to see the 2nd image.

This means you might be hoping that people are seeing all the great photos you've put in the slider when in fact they actually aren't. So stop using sliders. Put everything on the main page.

Besides, if the information is important why would hide it behind a scroll instead of proudly presenting it upfront?

4. Too much animation

Animation looks cool but how much?

Most websites overuse animation. This results in strain on the eyes:

...and people hitting back button.

People are in a hurry in 2026. Every extra second it takes for information to load, they loose patience. And once they get annoyed what do you think is your probability to win them as your next client?

So ditch animation. Present information upfront. Because people on the internet are skimming for information relevant to them. The quicker their eyes get to it, the more is your chance of winning them over.

5. Colour overload

Most colour palette generators on the internet spin 3 colours and call it brand colour palette:

Unless you want your designs to look like this:

...you need more than 3 colours to create engaging designs.

Such a ranges gives a variety of colours to play with and helps create aesthetic design that looks like this:

So don't just select 3 brand colours for your brand and call it a day. Rather, spend time to create a harmonious colour palette for your site (more on this down on the page).

Now that you've seen major design flaws that work against you (and which unfortunately often make their way into our website), let's see the 7 design principles that will guide you to create design that makes your site engaging and nice to look at.

1. Create scannable structures: Z, F and T

People have built habits on the way of absorbing information from websites.

These habits are formed by human psychology evolved through years of time spent on the internet between good websites and the ugly ones. Researchers have studied this behavior and have found 3 patterns of human eye moment:

1. Z structure

This is the most common way our eyes scan a webpage:

You can notice this in action with how your eye moves to see Brevo's page:

This means, your design elements on the website shouldn't be randomly placed but rather strategically be put up in the region where eyes actually land their attention on.

For example, I've arranged my own website in a Z layout:

So arrange your website layout in a Z shape because that's how eyes scan the page.

2. F structure

This is another common way for the eyes to scan a webpage.

For example, notice how I arranged the layout for one of my client's site in an F shape structure to highlight the happy members of their association and their high Google ratings:

So, if putting information in Z is becoming challenging, go with a F shape layout.

3. T shape

This is another way to organise information where eyes initially scan a wide region and then focus narrowly towards the vertical depth.

This is layout is primarily used by SaaS companies because it unconsciously increases scroll desire to explore the feature highlights of their product. Notice how Surfer SEO uses T shape layout on their homepage:

And this is how made the best use of this layout for one of my clients to highlight the big company boards they have advised:

So, once you're clear with your messaging of the hero section, arrange them in one of Z, F or T shape pattern.

2. Break design (intentionally)

When presenting information your benefits, you will primarily come with a section layout that looks something like this:

This is a typical low fidelity layout to think about the design arrangement.

But overusing this layout dulls the whole experience. This happens because our mind craves for novelty and when we see a design pattern repeat 3 times or more, the pattern tarts to feel predictable and our mind looses the desire to scroll further. So make the design unpredictable by breaking it intentionally.

After every 3 sections, create a distinction so that design prediction in the mind fails and novelty gets added back.

For example, when designing site of one of my clients, I created sections highlighting the benefits that their approach to kickboxing adds in their client's lives:

And after showing the above 3 sections, I broke the design with the following section:

This not only looks different from the sections so far but it also reinforces the energetic vibe with the client's brand colours.

Clay also does this where after 3 predictable sections, they add in a new design layout to add back that novelty once again:

So keep your design and fresh and novel by breaking it intentionally.

3. Group related information together

When presenting about your offer, you will have information segments that are too little content to become a dedicated sections on their own.

In such cases you can club related benefits together in a grid layout.

For example, one of my client created a course on communication skills which is perfect for people who feel under confident initiating conversations, loose opportunities in workplace and are tired of generic advice found on internet. So I clubbed the challenges she help solves together in a grid based layout:

Similarly, one of my client runs a LinkedIn ghostwriting agency where they help create organic content for their clients to get them inbound leads. So I grouped together the amazing benefits they bring in a clean and easy to visualise grid:

This also works when we want to add interest in our designs.

For example, NextJS adds interest on their homepage by covering the core features and benefits of their tech in a grid layout:

And, if we think about it, this grid layout also helps achieve point #2 of breaking design intentionally.

So you can actually combine point 2 and 3 together to break design with a grid!

4. Choose between stock photos or illustrations: which will be right for you?

Our mind processes images faster than words.

No wonder why human communication began with images rather than words:

Recent study by MIT neuroscientists have found that our mind can identify images within 13 milliseconds!

This explains why our brain likes sites with visuals and breathing room more than sites with just text:

But what kind of images should you put on the website?

Most websites go with generic stock photos:

As we can see, these images clearly look fake, don't match the vibe and create a cold feeling towards the website.

That's why it's important to select right type of visuals for the site. Because a mismatch of visuals with the messaging can make your future prospects cold and distant rather than bringing them close towards your offer.

Here's how you can choose which visual style to select for your website:

1. Real images

If you have real images of you working with your clients or your clients experiencing the thing that you offer, use them.

Nothing beats showing off images of your real clients. So check your gallery and gather all your photos of your clients interacting with you. Highlight your happy clients.

For example, for my client who teaches kickboxing to people in Salerno, he had images of people practising in his association. So I selected the best shots and highlighted them on his website:

And notice how I didn't placed images randomly.

Rather each image conveys the message visually. That's the secret. Most people on the internet don't read every single line. They just see the image and then read the headline. So it makes sense to ensure that the image and the headline go hand in hand. Let the image evoke feeling of the words.

2. Illustrations

If you don't have real images, don't stress out.

Most online businesses don't have client interaction images. In this case, illustrations work super well.

Take my own website for example. When I work with service based business owners, I often create illustrations for their website. But how do I present this info on my own website? I used an illustration:

Similarly, one of my client helps coach mid level managers in Game and SaaS companies to find clarity. One of his key highlight is that he himself has been a manager in the past so he understand the technical jargon that goes inside tech industry. This means he is able to provide the level of support and the kind of attention that is hard to find for managers to find within their organisation. And I covey all this visually with this illustration:

Research shows that using illustrations help people understand what they read and most importantly remember it as well. This means, using illustrations will actually ensure that people remember you and your offer.

And unlike stock photos, they don't evoke cold and distant feeling because our mind understands that the visual is there for representative purposes. And when done right, it actually makes the viewer visualise themselves in place of the illustrated character feeling the emotion as that of the character.

That's why Illustrations are powerful tool to bridge the gap between stock photos and real photos.

Look how Notion uses illustrations very well to make us feel the joy of writing:

So think about how you can take benefit of illustrations to make your site visitor your next client.

3. Stock images

When you don't have real client images to highlight and you feel that illustrations aren't going well with the brand image you're trying to create, then the only option left is of stock images.

If that's you, don't worry. You don't need to settle with random images. You can still make deliberate choices to express your brand vibe even with stock images. There are 2 ways to achieve this:

1. Abstract images

You don't necessarily need to have people inside the images.

Remember, the goal is to covey the message of the words visually + to evoke the feeling of the message. So, begin by presenting the information through abstract images.

For example, one of client coaches executives in Fortune 1000 companies and he helps forecast the market conditions to ensure the business keeps growing. So I presented the value he brings on the table with this abstract image:

Notice, this is a stock image but it doesn't feel cold rather helps visualise the value and makes the message believable.

2. Avoid people with wide smiles (and looking into into camera)

For sections, where abstract images aren't making sense or is difficult to find, go with images having people but try to look for images where people have normal smiles (without teeth) and ideally not looking into the camera.

Big wide smiles with teeth often look to real to be true. Unless you are a dentist where you want to highlight how you help people get shiny white teeth, avoid such images. Try to go with realistic normal facial expressions with normal smiles.

For example, for the same client, one of the other ways he helps businesses is by reducing inter team conflicts and bringing everyone together. This idea was difficult to capture through an abstract image, so I used the following stock image to highlight it:

When you keep the end goal in mind: to make the message easy to visualise, then deciding between real photographs, illustrations and stock images becomes super clear to you. So begin by thinking the vibe of your brand and choosing between the 3 approaches. Then let the goal of "easy to visualise + easy to feel" guide you in selecting the right visual for your message.

5. Use skeleton loading (for speed + satisfaction)

After you've selected your visuals, it's time to make sure they load fast on your website.

You can't always control the internet speed of your website visitors, but you can make sure they have a satisfying experience regardless of the their internet speed.

You might have noticed this grayed UI on YouTube:

This gives a feeling that content is loading and makes the wait bearable.

This is called as skeleton loading (sometimes as shimmer UI). Skeleton because we can see the skeleton structure of the site as loaded and get the feel that the content that goes in it, will load too.

So add this effect in your website to let user's know the visual will load soon:

This creates a satisfying feel in your design and shows how much care you've put into providing a smooth user experience.

6. Add 3 dimensionality (without straining eyes)

Earlier, I mentioned to avoid animations. (bad design element #4)

Not only do they hinder user patience, when done improperly they also strain the eye. But why do people prefer animations in the first place? It's because they add in a lively feeling (and a feeling of 3d effect):

But the same lively (and 3d) effect feeling can be added with simple 2D elements as well.

Notice, in this blog page design I created for one of my client, the image in the center feels like it's sitting on top of the page:

But when we look closely we can see though the illusion behind it.

Actually, the image is sitting between 2 rectangles: the upper one with brownish background and the lower one with white background. This creates the feeling of image sitting on top of their intersection.

Likewise, notice how the navigation bar of my website comes back up the moment page is scrolled upwards and disappears when scrolling downwards:

Such small elements create a lively feeling without having to add in cost heavy animations.

7. Harmonious colour palette

Back design mistakes #5, I mentioned how we should avoid colour overload and use harmonious colour palette.

When done right, harmonious colour palette makes the site's design nice to look at and helps instil brand vibe. But how do we actually create such a colour palette? The secret is to use LCH colour codes.

Most brand palettes use the hex colour codes. But often it's difficult to get the same feeling from the colours. Notice how the green feels lighter than the blue:

Our mind actually looks for how light or dark a colour is and how dull or vibrant it is to match similarity with another colour. And creating this similarity on purpose is difficult with hex codes alone.

That's where LCH comes into picture.

LCH colours breaks down each colour into 3 components: Lightness (how light or dark the colour is), Chroma (how vibrant or dull the colour is), and Hue (actual colour like green, pink, red, yellow etc.).

And when we see the LCH values of the green and blue variants we saw above, we realise that green felt lighter because more amount of lightness in it:

And when we make the lightness same, we get colours that feel harmoniously similar:

So, when you create your colour palette, select your secondary colours by adjusting the hue value while keep lightness same. This way, the colours on your site will appear to be harmonious rather than feeling random.

(Of course, if you are building a brand for kids, teens or gaming industry then you will be going with punchy colours: with different Lightness and Chroma levels, but other than that, you are primarily good to go by choosing colours that are closely related in lightness and chroma.)

Once you have your secondary colours, the next step is to create multiple variants so that you have a whole range of colours to play with, instead of getting stuck with just 3 colours. I breakdown the exact step by step of process of creating such a palette in my guide to creating harmonious colour palette.

Once you bring together these 7 principles, you will be able to create web design for your new website that will be on brand, lovely to look at and one that makes people keep scrolling.

Start with the messaging first, then assemble it into design using the 7 principles. Don't forget to share your designs with me on LinkedIn or Twitter. I look forward to seeing your awesome designs!

Until next time,

Pratyush Goel

P.S. - If your site's messaging and design are in place and want to know which platform and technology you should use to make it live on the internet, read through my breakdown of what makes website tech reliable.