Passive white space — applied to improve the aesthetics of the layout without guiding the user through a specific reading, flow, or content order. For example, the white space between font glyphs and paragraph lines functions in this way Boulton, The image above shows the difference between text with no white space applied, passive white space applied, as well as both passive and active white spaces applied:.
As we saw, micro white space is essential for making interface content legible. As a designer, you should consider white space when choosing the design typography specifications, such as font, size, color, style, leading, kerning, and tracking.
Remember the image from the previous page? Changing the white space layout affects reading performance and overall user experience. Happy readers are far more likely to stay on your page. White space contributes to the tone of the overall design. Websites with larger amounts of macro white space may reflect minimalism and luxury.
Websites with smaller amounts of macro white space may come across as informative, as is the case with news websites Kyrnin, Only they can tell you how they perceive your designs.
White space can help guide the user through interactive content. Part of the strategic planning for a website is giving priority to specific elements or content. You can use many visual methods to spotlight specific elements; one is to play with the amounts of white space around these focal points. The branding and print industries apply this theory to draw attention to brand messages. White space negative space is the area between design elements. It's another tool for designers to design for the user experience UX.
Use macro white space to organize content in the layout and direct the user through the blocks of content shown. Use micro white space inside the design element features as seen in the text, images and content blocks. We can also approach white space as being passive or active. Passive white space does not have a specific role in the design other than facilitating the user experience. It is all about being easier to read.
Active white space guides the focus and attention of users. It is more about standing out and making a statement. Many articles exist online about white space and its relevance in design.
The following is a list of articles where you can delve into the power and usage of negative space. Boag, P. Boag World. Boulton, M. A List Apart. Kollin, Z. What is it? Whitespace is one of the most overlooked and underutilized elements that make up a great web layout. Too often, whitespace is seen as empty space and, therefore, a waste of screen real estate.
However, the truth is that whitespace is one of the most valuable parts of your design. But why is it so important and how do we make sure it is maintained? Another great example is the Apple website. As you can see their hero image has plenty of space around the main product image. They also have very few visual elements on the page, which makes the elements that are there, that much more important. They do provide plenty of links in the footer, but overall their designs always tend to be fairly minimal with lots of negative space to help direct users to important pages.
Check out the infographic about the benefits of integrating whitespace into your designs. From Visually. Need to redesign or upgrade your website?
Let us know. We offer affordable small business website design services , run free website audits and help with search engine optimization. Schedule a Free Consultation. In other words, when people see things arranged closely together, they appear to be related; whereas, things that are arranged with distance between them are perceived to be different. With the amount of white space you use between elements, you can provide an organizational visual clue to your audience about the relationship between those elements.
The rule to use when organizing with white space is: less white space between elements will group them together, and more white space between elements will differentiate them.
One of the biggest benefits of white space as an organizational element is that it can replace divider lines. Divider lines certainly have their place in the organizational hierarchy, but, the big downside to using them is that they add visual weight to a page, making it appear clunkier. With white space, you can accomplish the same kind of organization without all of that added weight.
As you can see, there are a lot of practical reasons to utilize white space when designing your website, but, its usefulness goes far beyond the practical. In fact, one of the biggest reasons to use white space is the aesthetic one — nothing can add luxury to a web page as much effective white-space use can!
0コメント