Ask HN Designers: Tips on negative space & visual spacing in general
6 comments
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...
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.
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...
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.
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.
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.
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.
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.
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.
I don't use them anymore, but I have used them as training wheels to get myself to where I am today.
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.
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.
Are there any tips/hacks or methodology to go about that? Any good books?