Landing Page Hero Area - Daily UI 100 Challenge

I’m pretty sure everyone’s heard of negative space / white space, but how does one apply that principle into their web designs without making it look too empty? I’ve tried playing around with both of them into this day’s UI Challenge - Day003 Hero-Section area.

There are 2 types of negative space usages. The micro & the macro! I know, this gets too technical, but hear me out!
⚠️
.
• Micro-negative space usage refers to the space between elements, such as texts, text-blocks, call-to-action elements, etc.

• Macro-negative space usage refers to the space between a bigger group of elements, such as a whole paragraph, a whole div-block, or even a whole section on its own (such as a hero-section).
.
.
Although micro-negative space is usually overlooked by designers, it’s as important as macro. Think about it, if you properly space smaller elements, you can indicate a group of elements, hence better contrast and readability. Second to color-selection, micro-negative space usage can help viewers identify important elements from non-important ones! Don’t underestimate its power!

Do you consider yourself paying enough attention to micro-negative space usage?

♥ I’d love to hear your thoughts & feedback!

- - -

•⁣ Follow me on Instagram
•⁣ Would you like to say "hi"? Reach out to me at leopixels.design

More by Leo Kostandinis

View profile