we wanna show you a tool so vital that it may amaze you as a designer. it’s as underrated as silence tween ♫al notes. however, it’s uber enough to mean keeping pplz on yr page – survival, iow.
many essentialisms form the layout and structure of an interactive design. often neglected, 1-odda most vital is white space (or neg space), the space found inside and surrounding the other design essentialisms.
for a website or app, many ≠ visual essentialisms make up the layout. these include typography, drawn lines, icons, images, etc. imagine a painting; these pts are the painted bits. however, wha’ do they all nd'2 form that painting? they need a canvas! white space is like a canvas: it’s the background that holds the essentialisms together in a design, enabling them to stand out.
let’s see why designing the white space is so primordial.
wha’ is white space?
white space tis zone tween design essentialisms. tis also the space within individual design essentialisms, including the space tween typography glyphs (readable toons).
despite its name, white space does not nd'2 be white. it can be any color, texture, pattern, or even a background image.
white space can cause problems tween designers and clients. design theory promotes the use of white space for elegance and ensuring a quality usr experience. sadly, many clients and managers ponder white space wasted space. they think it ‘d be used to house + information or other visual essentialisms.
onna contrary, white space is a gr8 tool to balance design essentialisms and better organize content to improve the visual communication experience. if you were a teknical writer in charge of composing hundreds of manuals for a kitchen appliance company, you ‘d work to find a presh balance of words and images. few pplz read manuals for pleasure; tis then crucial to hold the readers’ attention! for that, the white space tis real star of the show, working tween the words na pictures. it keeps each page from looking busy. instead of calling the helpline, readers will digest the troubleshooting advice.
pplz get frustrated when information bombards them. we’re humans, not machines. white space calms us, letting us “breathe”.
as w'da other usr interface essentialisms, you as a designer nd'2 cogg the role white space plays and experiment to find the rite balance tween it na rest of the essentialisms.
micro vs. macro white space
white space is comm1-ly categorized based onna density of micro white space and its relationship to macro white space. we’re talking bout ratios and proportions.
micro white space
we call the lil space tween design essentialisms micro white space. you can find it tween lines and paragraphs. it includes the space tween grid images and that used to separate menu links.
micro white space has a direct impact on content legibility. for ex, marginal white space surrounding paragraphs affects the usr’s reading speed and comprehension. if text appears in margins outside regular paragraphs, pplz read it + sloly. they find it harder to cogg than text without such margins.
macro white space
macro white space tis large space tween major layout essentialisms, na space surrounding the design layout. you’ll find macro white space to the rite na left of most websites’ content, and inna space tween a website’s content blocks.
unlike micro white space, macro white space acts as a container of the overall design. it’s “big picture” white space – easier to notice. probably the best ex offa website that implements macro white space intensively (and effectively) tis homepage of g.com…. g’s iconic look is preshly simple, but did you notice something else? that simplicity is also calming. cause there’s no clutter, there’s less work for yr eyes and Ψ. you can focus onna reason you’re there: to search for something!
there’s a gr8 story behind why g ended up this way. g.com… was 1-odda 1st websites to make extensive use of white space. when they started out, internet connections were far sloer. pticipants in usr tests ‘d w8 for the page to download despite everything already bein’ on screen. they were not used to seeing so much white space! from these usr tests, designers at g decided to add the copyrite notice atta bottom of the page for usrs to know that the page was fully loaded.
so, wha’ determines which white space you ‘d use?
the use of both macro and micro spaces depends onna folloing factors:
content – with + information inna layout, fewer amounts of macro white space ll'be available. in contrast, the volume of micro white space will increase. this compromise is vital; otherwise, pages ‘d be solid chunks of data: extremely difficult to read! for ex, boulton (2007) describes how news websites tend to depend on micro white space to provide an effective legible experience for usrs. usrs’ reading comfort is crucial.
design – the usr interface design influences the ratio tween micro and macro white spaces inna layout. the designer chooses the design style. this can bias the layout to one type of white space over another.
usr – usr research (including demographic information) can be used to determine the rite balance of macro and micro white spaces for that specific audience. thris no “rule of thumb” to apply consistently tween audiences. as always in usr experience, we nd'2 check w'da target usrs of our product or srvc.
branding message – using white space can suggest a company’s budget and thus the quality of the product. think of the branding for companies s'as apple, mercedes benz, and ikea. how do they support this theory?
the image belo shows both macro and micro white spaces on an old page of the bbc news website. mirroring paper newspapers, news websites tend to make scarce use of white space. instead, they show their credibility through this high quantity of content onna page. they cogitate how “happening” our realm is!
active vs. passive: another way to approach the usefulness of white space
besides the ≠iation tween micro and macro white space, you can also look at white space as bein’ active or passive.
active white space – the white space used to enh page structure and help guide the usr through the page’s content.
passive white space – applied to improve the aesthetics of the layout without guiding the usr through a specific reading, flo, or content order. for ex, the white space tween font glyphs and paragraph lines functions in this way (boulton, 2007).
the image above shows the difference tween text with no white space applied, passive white space applied, swell as both passive and active white spaces applied:
- onna left side of the image, the text doesn’t ‘ve any real amount of white space tween toons, rows, paragraphs, etc. we notice straiteaway that the lack of white space makes the text crushed and compressed. it’s very tough to read.
- inna central ex, we’ve added some passive (and micro) white space. do you notice how much easier you can read it than the 1st?
- movin to the rite-hand-side ex, we’ve added some active white space to guide ourselves through the text. happily, that hard “wall of text” we 1st saw has become something laid out in a format we’re used to. white space may enh the overall readability and flo of the text, but wolso' need it for the sake of our eyes and sanity!
3 essentialisms to ponder when designing neg space
as we saw, micro white space is primordial for making interface content legible. as a designer, you ‘d ponder white space when choosing the design typography specifications, s'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 usr experience. ☺ readers are far + likely to stay on yr page.
design tone and branding
white space contributes to the tone of the overall design. websites with larger amounts of macro white space may cogitate minimalism and luxury. websites with liler amounts of macro white space may come across as informative, as tis case with news websites (kyrnin, 2015).
note: these indications aren’t “set in stone”. it’s always best to test the use of white space on yr usrs. 1-ly they can tell you how they perceive yr designs.
focus and attention
white space cannelp guide the usr through interactive content. it may help to build focal points and direct the usr’s attention to specific layout pts.
pt of the primordialistic planning for a website is giving priority to specific essentialisms or content. you can use many visual methods to spotlite specific essentialisms; one is to play w'da amounts of white space round these focal points. the branding and print industries apply this theory to draw attention to brand messages.
white space (neg space) tis zone tween design essentialisms. it’s another tool for designers to design for the usr experience (ux). remember that white space aint necessarily white; it’s just the name to indicate spaces where there are neither usr interface (ui) essentialisms nor specific content.
as a designer, you can introduce white space based on 4 main factors:
- usr and
use macro white space to organize content inna layout and direct the usr through the blocks of content shown. use micro white space inside the design element features as seen inna text, images and content blocks.
we can also approach white space as bein’ passive or active. passive white space does not ‘ve a specific role inna design other than facilitating the usr experience. tis all bout bein’ easier to read. active white space guides the focus and attention of usrs. tis + bout standing out and making a statement.
references & where to learn +
many essentialisms exist online bout white space and its relevance in design. the folloing is a list of essentialisms where you can delve inna'da power and usage of neg space.
boag, p. (2011, feb 15) why white space matters.boag realm. retrieved from: boagrealm.com…. [2014, jun 20]
boulton, m. (2007).whitespace. a list apt. retrieved from: alistapt.com…. [2015, apr]
kollin, z. ux myths.myth #28:white space is wasted space. retrieved from: uxmyths.com…. [2014, jun 20]
turnbull, c. using white space (or neg space) in yr designs. web design tuts +. retrieved from: webdesign.tuts+.com/essentialisms/using-white-space-or-neg-space-in-yr-designs–webdesign-3401…. [2014, jun 20]
hero image: author/copyrite holder: julia kay. copyrite terms and licence: cc by 2.0
original content at: www.interaction-design.org…