RANDOM
Visual
We want to hear from you! Edit entries by logging in (top right) or create your own!

Scale

Revision for “Scale” created on April 16, 2015 @ 16:45:39

Title
Scale
Content
Scale is the size of something(s) in relation to other things. (Also "<em>size</em>") <strong><img class="alignnone" src="http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2013/10/rodchenko_books.jpg" alt="" width="535" height="300" />Examples:</strong> <ul> <li>The first level of hierarchy in text (heading 1) is usually larger in size to mark the beginning and its importance in describing all the other elements.</li> <li>A button that takes up more space compared to the others might be considered to be more important or the interface's call-to-action. Likewise, you might make something like a caption or less important photo smaller so it doesn't distract a viewer.</li> <li>Mac dock icons scale on roll over to mimic magnification, indicate roll-over, and make it easier to click <img class="alignnone size-medium wp-image-284" src="http://ixtranslation.com/wp-content/uploads/2014/12/Screen-Shot-2015-03-02-at-9.00.43-PM-300x105.png" alt="Screen Shot 2015-03-02 at 9.00.43 PM" width="300" height="105" /></li> </ul> [caption id="attachment_641" align="alignnone" width="225"]<a href="http://ixtranslation.com/wp-content/uploads/2015/03/2014-10-04-16.34.38.jpg"><img class="size-medium wp-image-641" src="http://ixtranslation.com/wp-content/uploads/2015/03/2014-10-04-16.34.38-225x300.jpg" alt="'Boy' by Ron Mueck. Photo realistic statue that is 4.5 metres in height and weighing in at 500 kg (Denmark)" width="225" height="300" /></a> 'Boy' by Ron Mueck. Photo realistic statue that is 4.5 metres in height and weighing in at 500 kg (Denmark)[/caption] <strong>Informative:</strong> <ul> <li>Scale can be measured in weight, height, volume, and a ratio.</li> </ul> <strong>Orientational:</strong> [caption id="" align="alignright" width="150"]<a href="http://a1.dspnimg.com/data/l/1177456790622_yWhh5pxz_l.jpg"><img class="" src="http://a1.dspnimg.com/data/l/1177456790622_yWhh5pxz_l.jpg" alt="" width="150" /></a> My Neighbor Totoro poster showing visual hierarchy the scale of the and weight of the text[/caption] <ul> <li>Increasing the amount of space is one to to show importance or to draw attention to otherwise distinguish it. Usually the large something is, relative to the things around it, the more important it is (aka in creating visual hierarchy).</li> <li>In information design, a larger size can indicate a greater number of something. [caption id="" align="alignnone" width="400"]<a href="http://disqus.vincelane.com/blog/nyt-2.png"><img class="" src="http://disqus.vincelane.com/blog/nyt-2.png" alt="" width="400" /></a> Scale in this infographic represents a larger quantity.[/caption]</li> <li>This is typically used with weight, order, and <a title="Color" href="http://ixtranslation.com/wiki/color/">color</a>.</li> <li>Scale could be used to indicate where a user is meant to click/go next. Rather than having the largest mean the most important, you could also use a "goldilocks" method where a pathway needed to be just the right size to allow an action, as a sort of matching system (like matching the right size screwdriver to the right sized screw). Scale could also be used to draw the eye up and through something by making something progressively larger.</li> </ul> <strong>Feedback:</strong> <ul> <li>Digitally, buttons or options can scale up briefly to indicate that they have been clicked or hovered over. For example, when you select a pin on <a href="http://pinterest.com" target="_blank">Pinterest</a>, it becomes larger while the other pins remain the same size in the background.</li> <li> [caption id="" align="alignright" width="100"]<a href="https://apartmentgyan.files.wordpress.com/2010/02/milk-boiling.jpg"><img class="" src="https://apartmentgyan.files.wordpress.com/2010/02/milk-boiling.jpg" alt="" width="100" /></a> Milk boiling over[/caption] Size also indicates quantity so the quantity of something can alert us to something. For example, the fact that the milk is rising (increasing in size) tell us that there is danger that it might spill over (assuming you are boiling it).</li> </ul> <strong>Metaphorical</strong> <ul> <li>As mentioned before, scale/size can relate to literal size or quantity as well. Size is also used in accordance with the word "measure." Like <em>trying on something for size</em> is an idiom to see if that measurement (not literally) fits you. [caption id="" align="alignnone" width="259"]<img class="" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSvtt5DssmDYp3KWuDQ-3KTRDS-zRCt2XqvnFwVZpj_9IftFeFM7g" alt="" width="259" height="194" /> Scale of the Starbucks coffee sizes in relation to their in hand protectors[/caption]</li> </ul> <strong>Symbolic:</strong> <ul> <li>When scale is meant to show importance or high quantity, it'd be more universal. However, when scale is used like a zoom in, this may not be readily apparent to <a href="http://continuuminnovation.com/literacy-a-hidden-hurdle-to-financial-inclusion/#.VTAQ2RPF_sd" target="_blank">someone not familiar with this pattern of communication</a>.</li> <li>The relational part of scale might also be difficult if it's meant to be displayed in a certain order. For example, in countries where the language is read from right to left, the people tend to read everything that way. However, most western languages read left to right. So a circle that gets progressively smaller in a series of images from left to right would actually be perceived as growing to those who read right to left.</li> <li>Scale can also be used stylistically. For instance, when a text is blown up into a large size it can become a more graphic, visual element rather than a purely functional one.</li> <li><em>"So this might be a little inappropriate but in America, many men associate size with their genitals. Like that's what I think of culturally. In India, the word size brings up tailoring outfits and making sure something "sizes" correctly on someone's body. Size is a pretty universal word overall but it does have certain connotations." </em>[anecdote]</li> </ul> <strong>Performative:</strong> <ul> <li>When dealing with a physical space, imagine the scale of the building. The furniture inside would affect how one moves about it. In cathedrals, people's eyes are naturally drawn up to the ceiling in part because of the massive scale of them. This then tends to slow down the speed of people walking because they're not directly looking at where they're going. In larger spaces, compared to the human body, people are more free to gesture and move about freely. In smaller spaces, one is almost required to move slowly and keep everything close to the body. [caption id="" align="alignnone" width="600"]<a href="http://commons.wikimedia.org/wiki/File:Duomo_di_milano_keski.jpg"><img class="" src="http://upload.wikimedia.org/wikipedia/commons/7/71/Duomo_di_milano_keski.jpg" alt="" width="600" /></a> Inside the Doumo di Milano cathedral.[/caption]</li> <li>Size in almost any context (whether it's smell or taste or vibration)<a href="https://www.youtube.com/watch?v=xGgk1sYY3GI" target="_blank"> can get overwhelming </a>when there is too much of it. This relates to it's definition as a quantity.</li> </ul> <h5>Speculations</h5> "<em>I think here it would be interesting to use the screen as a lens (which is what you've shown) to show if something is large or small to say someone who isn't able to see that clearly. For example if you had haptic sensors on a phone that would rise that the blind person could feel that would tell them if they're approaching a large object.</em>" <hr /> <span style="color: #808080;"><em>3 contributors</em></span> &nbsp;
Excerpt


OldNewDate CreatedAuthorActions
April 16, 2015 @ 16:45:39 Jack
April 16, 2015 @ 16:44:32 [Autosave] Jack
April 16, 2015 @ 15:59:57 Jack
March 27, 2015 @ 22:59:05 Jack
Tell the community:
User Rating
Rate Here
Useful
Well-defined
Creative
User Rating
You have rated this
To leave more detailed comments, visit the discussion tab above.
Fonts by Google Fonts. Icons by Fontello. Full Credits here »