Fundamentals of Web Design

Web Development Front-End
1

I’ve just completed the fundamentals of web design section which amongst other topics includes the use of white space using padding and margins.

I was wondering if there were standard / recommended units (PX, or em) for creating white space e.g. is there a standard margin-bottom of 20px between headers and text (just one example) or is this always down to the designer.

I know I haven’t articulated the question very well, but although I enjoyed to topic I’m no designer so struggle with the look and feel of my web sites.

Thanks

Mark

1 Like
2

Hi there, Mark!

Depending on the browser, initial styles will always be applied through the user agent styles unless overridden by the developer. I would say that’s the only real “standard” you will come across. But when it comes to the overall design, it’s really up to the designer. However, whitespace is important and it might be a good idea to look up “good white space” vs “bad white space” for reference.

As for recommended units, being mindful of responsive units such as rem, em, and % is good practice. Personally, I like to use em or % for the width of elements and rem for margin and padding. I only use px for styles that I know will not be affected no matter the screen size, like shadows, small rounded borders, etc.

3

Hi Mark,

It is down to personal choice for a lot of designers, but many designers follow the 8pt grid system when designing layouts - basically meaning the spacing is a multiple of the 8 times table. This number in pixels (eg 16px for a font, 16 being a multiple of 8) would be normally converted to an EM/REM unit by the coder to keep it responsive.

I design and code, and sometimes I use multiples of 8 for everything (converted to em/rem), but other times I just eye-ball it and choose spacing such as 1rem, 1.5em, 1.25em, 0.8em (or rem) - whichever looks best!

If you were working with a professional design team they would have a system in place for spacing and it would be clear from the design files what spacing you would use for a professional project. You can do what you think looks best for personal projects!

More about the 8pt system
https://uxplanet.org/everything-you-should-know-about-8-point-grid-system-in-ux-design-b69cb945b18d

4

That’s great advice, thanks for you input.

KR

Mark

1 Like
5

Thanks, both responses have clarified my understanding and is great advice. I’m not working professionally yet so no design team.

I currently work in cyber security and at 55 I’m looking at options to continue working after my ever changing retirement age.

KR

Mark

7

I’ve been in the same boat with web design—there’s really no set rule for margins and padding. It’s more about what looks good for your site. Some folks use a grid system, but I’ve found that just adjusting things until they feel right can work too.

1 Like
8

If you’re finding it tricky to get the look you want, I worked with Blue Collar Marketing, and they really helped me figure out what works best. It made a big difference for my site’s design and overall feel.

1 Like