Gabriele Ferro Home

Web Design

Creating beautiful websites is not just about writing code.

Of course, by writing the code directly we could have a perfectly working site but it will never look professional without the appropriate proportions and the correct positioning of the individual elements.

And this is where Web Design comes into play.

Day 60: 12 October 2020

**Today’s Progress:**

I have studied in depth the methods suggested by these two articles:

What is a Wireframe? This UX Design Tutorial Will Show You.

How to Design a Website Prototype from a Wireframe

In the second article the author writes:

In this example, I will be using a 12-column design with a regular width of 1140px, which is traditionally used and seen in Bootstrap designs. This gives us a 15-30px margin between grid units.

This sentence is worth GOLD to me.

( The same measurement is proposed in this article on Recommended Screen Resolution for Web Design )

He uses figma during the explanation but I always look for free and open source solutions and I found Lunacy.

Lunacy Welcome Screen

I've been looking for a Windows alternative to the infamous Sketch for a long time. On Linux I use Pencil but the windows version because of a bug doesn't allow me to insert images... too bad.

Lunacy welcomed me with a very well done mini tutorial on the useful commands to know to use the program. It will definitely enter the list of programs I use. Super recommended.

The website is also interesting and allows you to know the exact size of the current viewport.

Speaking of layouts, I looked for snippets for the popular ones and found Ten modern layouts in one line of CSS

1140 x 728 seems to be a good compromise for the size of each section.

Now I must remember that for bootstrap the default size is 16 pixels but I would like 1 rem to correspond to 10 pixels. So that each section is 114 x 72.8 rem, but maybe since there are 12 columns I have no interest in scaling the base font...


Using bootstrap should I still reduce the font-size to 62.5% to have the conversions in rem easy to calculate?!


The answer is NO.

I found the solution I was looking for thanks to the OpenClassRooms lesson on how to turn a draft into a website (in French).

Basically, using the container class, Bootstrap 4 automatically manages the size of our grids for every breakpoint.

So, we do not need to change the font-size to 62.5% if we use Bootstrap 4.

Plus, the maximum width for a large viewport is the magical number 1140px!

Now the question I ask myself is:

To set the height of each section to 728px, and make it responsive I must set it to 728 / 16 = 45.5 rem ?!

Re-EDIT: No. The typical height for a container is the content + 100px of vertical padding.

**Link to tweet:**

[twitter-follow screen_name='20Gabriele20']

July 2024


Gabriele Ferro Home
Copyright © Ferro Gabriele. All rights reserved.