

Ask HN Designers: Tips on negative space & visual spacing in general - wushupork

As a hack designer w/ no formal design training, one of the things I've often struggled with was spacing of things. I can navigate my way w/ determining WHAT to display and where, but I have never been happy w/ how I space things and organize them.<p>Are there any tips/hacks or methodology to go about that? Any good books?
======
kadavy
I like to work with elements so that there is geometric rationalization
between the sizes of them, and the spaces between them.

I usually work with set "unit" sizes. Any time I have to make a decision about
the size of something, or a piece of negative space I go to one of these
sizes: 3, 5, 7, 9, 12, 16, 21, 28, 37, and on up by the factor of .75. Here is
a video of my method in action: <http://www.youtube.com/watch?v=7i8gGqbNIHg>

The pioneers of typography only had a few sizes with which to work, and in
many ways, that restriction was a blessing. You have to create your own
restrictions in digital design.

It doesn't directly translate to web design, but typographer Jan Tschichold
made some solid recommendations about determining the margins of books. I
outlined those recommendations here:
[http://www.kadavy.net/blog/posts/determining-proper-book-
mar...](http://www.kadavy.net/blog/posts/determining-proper-book-margins/)

For understanding the subtle geometries of design, I recommend _The Geometry
of Design_ by Kim Elam. I'll also have a few chapters about it in my upcoming
book, _Design for Hackers._

------
faramarz
Think of it this way. Negative space is essential in providing spatial
relationships between items. You need to guide your readers eyes, with
purpose, and one way to do that is by being smart in use of negative space.

A lot of designers starting out focus on what to put in, where in fact, a good
design is essentially what you leave out. It takes discipline and experience,
but most of all, it's derived from a deep understanding of the project
requirements at hand. A good designer is 70% researcher, 30% designer.

Are you trying to build emphasis on a feature or message? What is the goal
behind this web/app page design? etc.

All are question that need to be answered and understood before the sketching
period, way before a first mockup rendition.

One method or guide you with alignment is to use a grid layout. Grab a guided
PSD file <http://960.gs/> and when you position your elements, try to build
relationships between your elements by the way you align them on the grid.

Hope that helps.

------
gallerytungsten
Work initially in black and white. If it doesn't work BW, it won't work in
color either. Squint when you look at the page. Does the contrast still pop?
If not, change the design.

Think about the content. What's most important? What do you want to emphasize?

Minimize the number of styles, fonts, and sizes. Group elements together.

Print it out and read it. Does it flow? Is there an eye-pleasing sequence of
elements? Or is it a jumble. Look at designs that are very good. What makes
them good? Try to apply the same principles.

------
kmlymi
Have you tried using CSS Grid systems (960.gs, blueprint CSS)? It is a great
way to start learning how to space things around. Try experimenting with
simple boxes first, then replace them with actual design content.

I don't use them anymore, but I have used them as training wheels to get
myself to where I am today.

------
pjy04
ui-patterns.com <http://developer.yahoo.com/ypatterns/>

When you design buttons think of them as empty boxes and ask people what they
think that button does. It'll surprise you what people come up with other than
your own opinion.

