The box model areas
Content area: This is the area naturally consumed by the content that constitutes an element
Padding area: Every box can optionally have padding that surrounds the content area.
Border area: The size of the outline/border that surrounds the box.
Margin area: This is the transparent white space outside the box that distances the box from its neighboring elements.
Display
Block: An element with a display value of block begins on a new line and takes up all the available width of that line.
Inline: The element appears on the same line as its surrounding elements, and only takes up as much space as its content, padding, and border areas need.
Inline-block: Same as above, but the element now has the ability to be given arbitrarily defined box area values, which is not possible with the plain inline display property.
None: The element is not visible and takes up no space on the page
I’m not sure people would have taken it as seriously. Which brings us to three key concepts in typography: tone, readability, and legibility.
Tone is the mood or feeling that your typography conveys visually, which is distinct from the tone of the content itself. Tone ranges across a spectrum from informal to formal, and you’ll want to make sure your typography sets the right tone for the message and brand. The typesetting above illustrates this beautifully. The young, playful feel of the font just can't support the gravitas of the quote.
Legibility defines how easy it is to distinguish between individual letterforms (the shapes of the letters), and is a vital consideration for setting type in user interfaces. For instance, some fonts make it difficult to distinguish between an uppercase I and a lowercase l. (See what I mean?) This is usually a function of the font’s design, though certain design choices, such as setting letter-spacing too high or low, or setting text in all caps, can impact legibility.
Readability defines how easy it is to read paragraph content. It’s determined by the font's design and your own design choices, including sizing, spacing, and color.I’ll cover all of these aspects in more detail, but let’s start with one of the most important decisions: the fonts themselves.
Typography matters.
In his classic The Elements of Typographic Style, Robert Bringhurst defines typography as “the craft of endowing human language with a durable visual form.” In most cases, that visual form needs to be legible and readable, and it must set the right tone. If your typography makes a text difficult or downright impossible to read, then it’s useless — no matter how amazing it looks.Just imagine how different history might be if the Bible, for example, had been typeset in green Indie Flower on a blue background:
The 4 kinds of color schemes
1. Monochrome
A monochrome color scheme consists of various tints, shades, and saturations of a single base color. They’re very cohesive, but run the risk of becoming monotonous.
2. Complementary
Complementary schemes are based on two colors from opposite sides of the color wheel. Because the two hues will be wildly different, such schemes can very impactful and noticeable.
3. Analogous
Analogous schemes feature three colors that sit next to each other on the color wheel. Because of the tonal similarities, these schemes can create a very cohesive, unified feel, without the monotony of a monochrome scheme.
4. Triadic
To make a triadic color scheme, draw an equilateral triangle (a triangle where all three sides are the same length) on the color wheel, and select the three colors at the points of the triangle. This creates a diverse, yet balanced, scheme.
Hot and cold
Colors also have a “warmth” and can be classified as either a warm or cool.Warm colors contain higher amounts of reds and yellows. They can invoke a sense of warmth and passion in a design. They can also feel very aggressive and bold, reminding us of the international stop sign. That’s why red is often used in error messages.Cool colors contain higher amounts of blue, evoking chilly climates, ice, winter, water, nighttime, death, and sadness. They can carry connotations of loneliness, coldness, and fear. Cool colors also less aggressive and much more soothing. Think of a blue sky, or crystal clear blue waters on a beach. Relaxed yet?
Temperature
Increasing an image’s temperature means increasing its orange levels. It generally makes an image look warmer and happier, similar to how the world looks happier when the sun casts its orange glow upon it. In contrast, reducing an image’s temperature makes it look colder and less inviting, like an overcast day.Tints and shadesA tint results from adding white to a color — a shade when you add black.
RGB and hex
On the web, we use RGB (red-green-blue) and hex values to represent colors.
The RGB color system defines all colors as a combination of three different values: a particular shade of red, another of green, and another of blue. So:
rgb(59, 89, 145) equals Facebook blue
rgb(0, 0, 0) equals black
rgb(255, 255, 255) equals white
The hex color system converts each value to a hexadecimal (base 16) representation, like
so:
#3b599b equals Facebook blue
#000000 equals black
#ffffff equals white
Every two characters represents a color value, so for Facebook blue, the red hue is 3b, the green is 59, and 9b is blue.
Why you should care about color?
If someone handed you the keys to your dream car, for free, your head would explode with excitement, right? Of course!
But what if the car was painted in your most-hated hue? Or each panel was a different color entirely? Or if the interior mixed lime green and construction yellow?You might be a little less excited, right?Colors have meaning. They impart a tone and emotional impact just like fonts do, and that makes them a powerful design tool.
The vocabulary of color
Before we dive into theory, you’ll need to know the following terms:
Primary colors
Primary colors form the basis for all other shades. Humans perceive three base colors: magenta, cyan, and yellow. Every other color we see consists of a combination of these three colors in varying amounts, brightnesses, tints, and shades (see below).Traditionally, we considered red, blue, and yellow to be the primary colors, but research has shown that magenta, cyan, and yellow better describe our experience of color.
You've got a practically infinite palette to work with when it comes to color. Find out how to do it right.
You have a whopping 16.8 million colors to choose from when designing a website. And when you start combining them to form a palette? Your array of choices are endless.
3. Multistability
This one gets a little late-night-in-your-dorm-room, but here we go: Multistability explains why you can see just the faces, or just the vases in that famous optical illusion, but never both at the same time.
The human mind doesn’t dig uncertainty, you see, so it fixates on one way of seeing something to the exclusion of possible alternatives. Fascinating, right? Kinda makes you think about politics. But let’s move on.
4. Invariance
The principle of invariance states that we’re really good at recognizing similarities and differences. That means that it’s really easy to make something stand out of a crowd of similar objects.Remember the lady in the red dress in The Matrix? How about the little girl in the red jacket in Schindler’s List? Those two stand out so much — and remain so memorable — because their bright color practically screams out of the homogenous black-and-white backgrounds we see them moving against. It marks them as meaningful and worthy of our attention.
1. Emergence
The principle of emergence states that we attempt to make sense of the whole before we start identifying its parts.When we see an object, we first try to take in its outline, then we compare the outline against other things we’ve seen before. If we find a match, we assume we know what it is, and we might then start to analyze its components. If we don’t find a match, we might then start to analyze the parts in pursuit of a whole.
2. Reification
The principle of reification states that our minds fill in gaps in visual information in order to identify objects. That means that you don’t have to see the entirety of something to understand what it is, though the simpler or more widely recognized the whole object is, the easier it’ll be to recognize it by a part.Which means you should have no trouble recognizing the meaning of this symbol:
Every design seeks to either create a sense of unity among disparate elements, or creatively break that unity to encourage a particular action. The principles covered here will help you do both.
A structure, configuration, or pattern of physical, biological, or psychological phenomena so integrated as to constitute a functional unit with properties not derivable by summation of its parts