DEV Community

Cover image for 4 Web Design Tips I used in my brand-new website;  The four tips you'll want to use.

4 Web Design Tips I used in my brand-new website; The four tips you'll want to use.

I'ver just remade my website once more and I'll show you how I made it, what tools I used, a bunch of design tips, and more. You can view the website here
Also, please don't fill out the Hire Me form unless you really want a website. It actually will email me and I don't want my inbox spammed πŸ˜‚.

Design Tips

I've learned lots of things through just simply developing my website and I want to share the knowledge with all of you devs. I'll show you tons of tips and tricks to make your websites look better.

1. Paragraph line spacing

Have you ever looked at a paragraph (<p> tag) in your website and just wondered why it wasn't working out the way you wanted? Here's one reason why.
Take a look at this picture right here:

Screen Shot 2021-09-03 at 6.04.19 PM

Doesn't look very convincing, right?
Now take a look at one of them in my website.

Screen Shot 2021-09-03 at 6.05.07 PM

Something I've figured out looks better is adding additional line height to your paragraphs. I prefer to keep text size at about 20px and keep a line height of 40px.
Most of you devs should know this already, but I'll show you how anyways.

p{
  font-size: 20px;
  line-height: 40px;
  text-align: justify;
}
Enter fullscreen mode Exit fullscreen mode

2. Use the &shy; tag between longer words

Take a look at this absolutely terrible-looking paragraph. When using text-align: justify;, your words just look crazy-spaced, right?

Screen Shot 2021-09-03 at 6.07.35 PM

What you can do is put the &shy; escaped HTML character between longer words. For example, <h1>Verymuch&shy;longword</h1>.
Take a look at this right here:

Screen Shot 2021-09-04 at 8.56.18 AM

Do you see how the word "visulizΒ­ations" is split? (I might've spelled that wrong). The &shy; character will do that automatically when the word is getting too "squished up".

I've made some code in javascript that you can use so that all words over eight characters will have that special character inserted into it. It will not do that for <strong> tags, <em> tags, and all other HTML tags within your paragraph.

let paragraphs = docyment.querySelectorAll("p");
paragraphs.forEach(par => {
  let cont = par.innerHTML.split(' ');
  let res = [];
  for (var i in cont) {
    if (cont[i].length >= 8 && (!cont[i].includes("<") && !cont[i].includes(">"))) {
      let t = cont[i];
      res.push(t.slice(0, Math.round(t.length / 2)) + "&shy;" + t.slice(Math.round(t.length / 2), t.length))
    } else {
      res.push(cont[i]);
    }
  }
  par.innerHTML = res.join` `;
})
Enter fullscreen mode Exit fullscreen mode

3. Curved Seperations

Not sure if you can see that gif down there but go ahead and give it a try. If not, go over to the website.

Screen Recording 2021-09-04 at 9.02.24 AM

So honestly I feel like curved seperations give a better feel to how smooth the website is. Curved lines kind of keep the user scrolling. I've found a totally amazing tool to draw those things with.

https://codepen.io/anthonydugois/full/mewdyZ

Users that use a macbook will have a little bit of a harder time using that tool up there than users with a PC honestly. It's hard to explain how to do it, but yeah you'll get used to it. You devs should be able to figure it out.

First, you'll want to draw an svg path like shown below:

Screen Shot 2021-09-04 at 9.09.19 AM

Then, simply pop it into an <svg> tag.

<svg viewbox="0 0 800 200">
  <path d="M 0 0 L 0 150 Q 200 150 400 100 Q 600 50 800 100 L 800 0 L 0 0 "/>
</svg>
Enter fullscreen mode Exit fullscreen mode

The path is automatically generated for you in the bottom-right corner. If you want to make your websites look much better, that is something I'd recommend you highly use.

4. Add more content/padding to your website

Sometimes when I go to a website that doesn't have a lot of content in it, I'm kind of "looking" for more. This is a little something I've noticed that is one of the harder elements to pick out.
If you don't have much to say on your site, increase the line-height of text, add additional padding on the y-axis, make everything thicker in the y-direction.
Even if your website has a lot of whitespace/empty space, it looks better like that than a website that is super compacted and isn't something you can scroll through much.

Take a look at the "About" page in my older website:

scrolling down my old website

Now take a look at how things are spaced out in my new one:

Screen Recording 2021-09-04 at 9.02.24 AM

The more there is to scroll in a website gives a user an urge to scroll and read more. Also, adding additional design will keep them going. Too much, and they won't want to read it all.
Keep a nice balance and that is what will help others to actually read content on a website.


Thanks for reading this post!
Happy Coding!

Discussion (6)

Collapse
leouofa profile image
Leonid Medovyy • Edited

I dig the svg trick, and the line spacing tips 😎

I like to multiply font size by 1.5 to get a good line height and adjust from there.

Also been writing HTML for over 20 years and have heard of the &shy. Super cool.

Collapse
robertmarquardt profile image
Robert Marquardt

Thanks, didnt know about &shy also.

Collapse
carlosds profile image
Karel De Smet

Nice article! Thanks for sharing that Codepen to create SVGs, it might prove useful in the future.

Collapse
rophilogene profile image
Romaric P.

Your website is hosted with Qovery?

Collapse
leviathanprogramming profile image
π‹π„π‘½πˆπ‘¨π“π‡π€π Programming Author

Sure is!!!

Collapse
cyebukayire profile image
Peace

Great content