Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I received this beautiful email from Skillshare and thought that their white space was done well. Below is the bottom of that email which has the copy. The top has an image, part of which is encased in this grey box of which the screen shot shows.

skillshare email looking for teachers



How can this be mathematically calculated, or could it just be trial and error?

share|improve this question
1  
I'm pretty sure white space is a principle of design.. I'm not sure that it can be broken down to contain a set of principles, but I could be wrong. Possibly relevant and useful: ux.stackexchange.com/questions/25072/… –  DumbNic Oct 16 '13 at 17:41
2  
@Dominic I'm not familiar with canons of web design, but canons of page construction are all about competing sets of principles for whitespace. I have no doubt there are similar competing canons for email, webpages, and so forth. –  BESW Oct 16 '13 at 17:51

1 Answer 1

The math seems clear to me.

50px between sections, 25px between paragraphs.

Then 75px above the unsubscribe notice. Although this looks a bit less than 75px. But definitely more than 50px. I'd set it at 50px if it were me, just to remain consistent.

So for a formula I guess it would be:
section margin bottom = 2x paragraph margin bottom
This is actually a good formula for a great deal of web design. It creates enough visual separation between sections and supports a good "rhythm" when reading.

Page design canons, as BESW points out, somewhat translate to the web. Good design is generally good design regardless of the medium.

share|improve this answer
1  
I suppose symmetry and consistency are some of the few principles that can be described for white space. –  DumbNic Oct 16 '13 at 19:13
    
Though I can understand the actual math in this case. I am wondering how the proportions were calculated and the reasoning behind it so that those principles can be applied to other projects. For example, I am working on a header and used the Golden Mean. But for whitespace I am wondering about some of the best practices. –  JGallardo Oct 16 '13 at 22:29
1  
Customarily I use multiples of a single value. For example: Assume type size is 16px, line-height 20px. Margin below paragraph 20px (one line), margin below section 40px (two lines). Everything is based on the line-height so vertical margins are also a multiple of the line height. Basically... it's a grid just like print materials. Text begin the most important factor, the grid is based on the text. –  Scott Oct 16 '13 at 23:06

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.