Questions tagged [white-space]

any single character or series of characters that represents horizontal or vertical space in typography

Filter by
Sorted by
Tagged with
4 votes
2 answers
2k views

How do I handle white space in cards with varying amounts of information?

I'm creating this page to display books I've read/reviewed, but I'm not sure how to handle the different amounts of information that each card has. Most cards will not have a review so there ends up ...
Jacob's user avatar
  • 43
2 votes
1 answer
412 views

Why has extreme padding become so common in web/UI design since 2019?

From 2014-2019, Windows/Windows apps, macOS/macOS apps, and most websites have used modest levels of padding in their user interfaces. From what I understand, the padding is there to make it easier to ...
AcinonX's user avatar
  • 141
0 votes
1 answer
77 views

Can a 2-column grid of info be acceptable if it mitigates an awkwardly large amount of white space?

I'm in the middle of a psuedo-overhaul of my company's platform, with an emphasis on "object-level" pages (ie the page for an individual task, or individual appointment). A problem I'm ...
Conor's user avatar
  • 533
0 votes
1 answer
523 views

Too much whitespace? [closed]

I do know that whitespaces play a crucial role in design. But while doing my design, specially for larger screens (like Desktop), I feel like there is too much whitespace in my design. Is it just me ...
Rahul Dahal's user avatar
0 votes
2 answers
333 views

Should vertical spacing make every list point a paragraph?

Quite often lists in continuous texts are typeset in such a way that the vertical spacing between points is greater than the regular line spacing in the same text. Well, like lists here, at SE: just ...
homocomputeris's user avatar
5 votes
2 answers
2k views

How to deal with extra spacing with line-height when spacing between elements should be consistent

We want to design our website so that all elements are spaced 24px apart (paragraphs, form groups, header & content, etc.) and "related" elements (label & form field) are spaced 8px apart. We ...
Chris Smith's user avatar
1 vote
3 answers
255 views

Dealing with too much white space

I am working on some wireframes for an app. The app has a lot of short flows that usually require filling two inputs fields or have a small FAQ as seen in the examples below. I tried looking the ...
Chris's user avatar
  • 4,548
0 votes
4 answers
717 views

How to utilise empty space in card list design?

My website's main page displays summaries of users' profiles. Each profile summary is encapsulated in a "card". Take a look at an example here (using dummy data). For reference, the card width is ...
turnip's user avatar
  • 103
-1 votes
2 answers
145 views

Is this too much white space fine as I have put radio buttons vertically for readability

Hi All, As per the usability standard I have kept radio buttons vertically aligned so the task cane be completed. However due to this there is a lot of white space on right hand section - see ...
RUX's user avatar
  • 3
1 vote
2 answers
141 views

Whitespace versus content

Given a larger amount of content (e.g. a table of data or a list of fields and options in a form) that absolutely need to be on a website, would it be better to space it out so that scrolling is ...
Dakkaron's user avatar
  • 161
0 votes
2 answers
572 views

How to deal with a surplus of space in a filter dropdown?

I'm redesigning a filter feature for my company, and I'm running into a problem where I have a surplus of space relative to the small amount of UI elements (see image). I initially thought about just ...
Conor's user avatar
  • 533
3 votes
2 answers
213 views

How to make mobile "list" design does not look crowded?

In order to create a list, usually I think like a developer and tried to cram everything as much as possible in a single screen so that user can see everything (or as much as possible) all at once. ...
Chen Li Yong's user avatar
1 vote
3 answers
320 views

How to make a screen with tons of whitespace not look awkward

In my settings page (above), I am currently using tabs to navigate between sections (Rake + tip, Hand rankings, Tiers...). For the insights section of the settings page, the only objective is to allow ...
Adam Zerner's user avatar
3 votes
2 answers
72 views

Ad placement - In its own column or content wrapped around it?

I'm having to deal with placing ads on a website I'm working on for a client. Is it best practice to always have a dedicated column for the ads and potentially blank space below the ads as you ...
MojoRisin's user avatar
0 votes
1 answer
61 views

Whitespace viewport dependency (should CTAs be visible or not)

We've read few Q&A on this topic, also done the research but most of the articles says what whitespace is, not how to calculate it. When designing for smaller screens, should the whitespace ...
psoiree's user avatar
  • 105
8 votes
2 answers
7k views

Is there a valid reason to allow leading or trailing spaces in user input?

I want to propose a new guideline in our company to disallow leading or trailing spaces in any user input (web forms). Is there any valid scenario where you want to allow leading or trailing spaces ...
Jonathan's user avatar
  • 334
11 votes
5 answers
26k views

What's the recommended max width for the main container and for the main column, for large screens?

Based on this question, "Why do many sites leave half of each webpage empty?" and its comments and answers, I did some research, but I didn't find a complete answer. For me it is obvious that it is ...
Madalina Taina's user avatar
216 votes
13 answers
47k views

Why do many sites leave half of each webpage empty?

Why do many sites leave half of each webpage empty? Isn't this a waste of screen space? One nice example of this is the Stack Exchange Network sites: As you can see, there is a ton of whitespace ...
Tot Zam's user avatar
  • 5,885
1 vote
1 answer
137 views

iPad walkthrough screens have too much whitespace

I am designing a walkthrough right now for a iPad app, but I ran into the issue that the page has too much whitespace. The page will have a large header text, an icon/illustration and a button. There ...
Jacob V.'s user avatar
3 votes
3 answers
193 views

Start Screen Issue *To much White Space*

I am designing a start screen for a tablet application and I don't understand what info I should put into this page. I got my inspiration from 'Envoy', example: But when I showed this off to other, ...
asdf's user avatar
  • 33
0 votes
1 answer
128 views

Some advice to reduce whitespaces when there a small amount of datas

Ahoy! me herties! I am developing a small Desktop Application. So, I need some advice; I want to decrease white space when it comes to presenting a relatively small amount of data. I know that when ...
M.Nemo's user avatar
  • 3
1 vote
7 answers
204 views

Design suggestion for a page with two links [closed]

I'm trying to figure out the best way to present just two links on a page. This page appears after login and redirects users to the selected page. Do you have any suggestion for this type of page?
zahra saffar's user avatar
2 votes
1 answer
443 views

Are there any guiding principles for using the Gutter space in web products (websites, mobile sites, mobile apps)?

What % of page can be taken up by the gutter space? Can the gutter space vary when the website/mobile-site are seen in different resolutions? Is it okay to have gutter space in an App?
Saurabh Kautilya Gupta's user avatar
2 votes
2 answers
639 views

Trimming Trailing Whitespace from user input

I have a form with user input fields for a manufacturer name and a product name that become a part of the URL www.foo.bar/manufacturer_name/product_name/ Browsers will trim the trailing whitespace ...
Nick's user avatar
  • 123
1 vote
2 answers
244 views

Should I use border or not for our help images? [closed]

We are developing an E-Commerce website, and our content team are writing user guide or help of the website. there are some screen-shots of the website in each help pages. Some of our team members ...
Mohammad Kermani's user avatar
0 votes
2 answers
384 views

Should whitespace next to forms be avoided?

The problem: On desktop view form inputs (with labels) take less that half of width of the website and we gets big whitespace next to form which is bad for websites SEO. In the other hand forms ...
jazzgot's user avatar
  • 223
4 votes
4 answers
900 views

What is it about Instagram's layout that makes it so popular?

When I ask clients, colleagues, and friends why they much prefer using Instagram to some of their brand in-house photo sharing apps(in fashion), they respond that it's mostly the cleanliness and their ...
blurgoon's user avatar
  • 157
5 votes
3 answers
372 views

Should I use a single or double space after a period?

In a paragraph of multiple sentences, should there be one or two spaces after each sentence's period for readability? The paragraph is typed in Arial font. It is size 11 font. The monitor it is being ...
Evorlor's user avatar
  • 387
160 votes
9 answers
66k views

What's the purpose of "This page is intentionally left blank" we see in books?

What's the purpose of "This page is intentionally left blank" we see in books? Why not just leave the page blank and write nothing on it?
talles's user avatar
  • 1,593
1 vote
2 answers
127 views

How to deal with whitespace left by fixed field width?

I am creating an infopath 2010 form, which will be accessed through a browser. Unfortunately, the browser based infopath field widths don't change based on the width of their contents. So, if you ...
Matt's user avatar
  • 115
0 votes
1 answer
119 views

Maximising content vs. white space

I have read many existing questions covering the use of white space, but most are comparing white space with 'useless' frills, or simply cramming items in. My question is in reference to google docs ...
SpoonerNZ's user avatar
  • 103
2 votes
1 answer
183 views

White space and its use in production single page apps

The modern web design world is screaming "white space" more than ever, and for good reason. There are countless articles detailing how and why white space should be used. I specialize in ...
dthree's user avatar
  • 305
5 votes
5 answers
990 views

Ideas on what to do with the white space available when hiding sections of a long form

I'm currently working on a new user registration page containing two sections - personal details and account details. The account details section must remain hidden until the personal details section ...
user47821's user avatar
  • 999
1 vote
2 answers
2k views

Best approach for displaying content across a full screen UI design?

While I've become pretty accustomed to designing within responsive grids I wanted to take a stab at creating a full screen interface. One of the more challenging aspects in doing so is dealing with ...
Carl Edwards's user avatar
14 votes
3 answers
3k views

Is a middle dot (·) the best way to signify a space?

In our web application we try to give explicit instructions of what to do or to type if the user desires so. One of our tips looks like Click or type /r to respond. If /r followed by a space is typed ...
Michael's user avatar
  • 761
10 votes
3 answers
3k views

Should forms be aligned left or center, if less than full page width?

Our web application has a small header and nav menu at the very top, and below, there is simply a large area of open space. We have no need for an always-present sidebar, so there is just one column. ...
JohnDubya's user avatar
  • 547
4 votes
2 answers
19k views

What is a good way to fill in too much white space? [duplicate]

I have little design experience. Here is what my site looks like. Favicons and user images are added dynamically but the site looks sparse otherwise. How can I add content. I don't want to grab ...
pure_code's user avatar
  • 151
20 votes
6 answers
2k views

Does reducing white space improve or degrade the user experience?

As a web designer, I work on a lot of ecommerce websites. One piece of feedback that comes in time and time again, is to make vertical spacing smaller, not only to get more products above the fold, ...
Rich's user avatar
  • 3,542
32 votes
3 answers
5k views

What to do when a page's content doesn't fill up enough of a fixed area?

An application has a fixed size, i.e 800x600 px. However, a problem I often run in to is that the page's content isn't enough. It's simply too little content on a big area. Consider the mockup below, ...
Zar's user avatar
  • 919
2 votes
3 answers
353 views

Should I leave white space inside accordion?

I'm building some web editor for charts and decided to group various independent chart options inside accordion. A question poped up about whitespace inside contents of some accordion panes. Basically ...
miensol's user avatar
  • 123
3 votes
3 answers
4k views

Spacing of items inside a panel (WrapPanel)

Many sites and applications using WrapPanel to display your items. Items are queued from left to right and when there is no more space tend to skip to the next line. For Example: What is the best ...
J. Lennon's user avatar
  • 131
6 votes
2 answers
1k views

master/detail view blank state/detail view when nothing is selected

I have a following view/form: download bmml source – Wireframes created with Balsamiq Mockups Basically it is a form where I can fill out some information for a new record. When the user ...
timeu's user avatar
  • 261
7 votes
2 answers
616 views

Is there a theory on white spaces alone, or is it a consequence of other psychological aspects?

I'm doing a presentation on User Experience to my fellow colleagues (IT consultants) and have a section on white spaces / white spacing. Seems like searching for relevant content is not possible when ...
Benny Skogberg's user avatar
7 votes
3 answers
2k views

Why aren't iPhone text messages at full width?

Why aren't text messages viewed on the iPhone iOS displayed at full width? I can think of several reasons why it would make sense: Short messages won't have unnecessary line breaks, long text ...
Ambo100's user avatar
  • 201
4 votes
2 answers
833 views

How little is too little padding between button text and its button border?

jQuery has a default amount of padding within their buttons, as seen here: jQuery UI - Button Demo. I think it looks nice, but my boss keeps telling me to kill the padding. Specifically, he said to ...
jedmao's user avatar
  • 143
3 votes
2 answers
333 views

White space vs. Information [duplicate]

Possible Duplicate: How can I defend and/or encourage white space as an effective design element? At the company where I work, every day, there are discussions about "how to fill the screen" in ...
caarlos0's user avatar
  • 323
14 votes
2 answers
355 views

"Clutter" equation

When trying to find the optimal size and placement for an element, I can model the utility using Fitt's law. Of course, using this law by itself will just tell me that everything should be massive and ...
Xodarap's user avatar
  • 281
11 votes
4 answers
821 views

How can I defend and/or encourage white space as an effective design element?

I am a big proponent of clean designs and effective utilization of white space but it seems every client, developer, seemingly everyone, tries to fill all the available space with "something". I can ...
Pixelist's user avatar
  • 119
10 votes
4 answers
443 views

Does "ink is expensive" apply in a user interface context?

Edward Tufte in the book The Visual Display of Quantitative Information states, more or less, that ink is expensive. Any ink which is not used to actually convey information is chartjunk and it will ...
cwallenpoole's user avatar
26 votes
7 answers
62k views

What are the rules of thumb for margins in web design?

My web designer tells me that in a web page, the empty margins or padding should always be multiples of a standard. For example 6 px, 12px, 18px. This should produce nicely balanced lay-outs. I would ...
Tintels's user avatar
  • 261