Today I started the Aesthetic Foundations course. We went over things like contrast, harmony, saturation, shape, lines, etc.
I learned about additive and subtractive color. I also went over hsl (hue, saturation, lightness). We went over the red, blue, and green primary colors, and how, if their paint is mixed, you get a dark brown, but if red, blue, and green light is mixed, you get white light. Hue means the color at full saturation and without any tint or shade applied. Saturation describes the colorfulness of a color. When a color is at full saturation, it looks very vivid and intense, if it is slightly desaturated, it looks pale and subdued. If completely desaturated, it reduces to a gray value. Lightness is the last part of hsl. Increasing lightness moves a color closer and closer to white. A color at full lightness appears as white. When a color decreases to zero lightness, a full black is achieved.
This model can be represented by a cylinder. The height of the cylinder represents lightness, with the the top being completely white and the bottom being completely black. The circle/degrees/angular dimension of the cylinder represents the hues. Red is at 0 degrees, green is at 120 degrees, and blues is at 240 degrees. The cylinder then wraps back around to red at 360 degrees. Saturation can be represented by the radius of the cylinder, with the outer edges being fully saturated colors, and the center being black, white, and gray tones.
HSI (hue, saturation, intensity), HSV (hue, saturation, value), HSB (hue, saturation, brightness), and HSL (hue, saturation, lightness) are similar representations of the rgb (red, green, blue) color model.
We went over warm (red, yellow, orange, brown, tan) and cool (blue, green, purple, grey) colors. We went over how the concept of warm and cool colors is primarily psychological and might not be grounded in science. The concept is controversial.
Complementary colors are red and green, orange and blue, and yellow and purple. The hues of complimentary colors cancel each other out.
A monochromatic color scheme is a set of colors derived from the same hue.
Analogous color schemes are comprised of colors that are next to one another on the color wheel (like yellow, green, and orange). An analogous color scheme features a variety of hues (unlike a monochromatic color scheme). However, analogous color schemes can lack contrast, so if we use an analogous color scheme, we want to make sure we include contrast.
Generally, monochromatic schemes can be more appropriate for serious/professional corporate sites, while analogous schemes can work well for restaurants and other more relaxed websites that are trying to create an experience that draws the user in.
I completed the Aesthetic Foundations course today!
Design Foundations
Today, I started the Design Foundations course. Design is defined as the creation or construction of an object or a system. We went over the difference between art and design. We went over the three principles of architecture, as defined by Vitruvius, a Roman engineer/architect. He stated that a structure should have:
Durability - it should last.
Usability - it should have a purpose.
Beauty - it should appear delightful.
I learned about an American husband and wife team, Charles and Ray Eames, which feature prominently in the history of American design. The instructor discussed the Eames house, a house designed specifically to fulfill a purpose as a both a dwelling and an office. The powers of ten concept was an Eames project which zoomed in from the universe to a microscopic level. The Eames lounge chair was part of the Eames' foray into furniture design. According to the Eames couple, design is a plan for arranging elements in sucha way as to accomplish a specific purpose.
Next we went into the work of Herb Lubalin, and American designer whose typography changed the way typography was viewed. We also went into the work of Paul Rand, an American designer. He coined the term "jewel," better known today as "mark," which is the iconic stand-alone symbol which encompasses a brand. His design theories were very simple and straight to the point. Some quotes of his:
"Design is the method of putting form and content together."
"Don't try to be original, just try to be good."
"Simplicity is not the goal, it's the byproduct of a good idea and modest expectations."
The next designer we went over was Saul Bass, an American as well. Saul Bass's work can be seen in the opening sequences of movies like Psycho, Casino, and Goodfellas (the typography). A quote from Saul Bass:
"Design is thinking made visual."
Saul Bass worked on movie poster design, among other things, creating striking images though the use of seemingly simple design. We then went over the work of Erik Spiekermann and Dieter Rams, both German-based designers. Dieter Rams was an industrial designer who made a list of Ten Principles of Good Design, principles which still influence design today. Steve Jobs, from Apple Computer, sites Dieter Rams as his biggest influence.
The format a design will appear within is something we should keep in mind as we design something. The picture plane is the space where the design takes place. The frame is the outer edge of the picture plane, the point at which the design ends. A line is a connection between two points. The thickness of a line is called the line weight. The distance from start to stop is the length of the line. Lines can be organic, symmetrical, rough, jagged, or variations/combinations of these. Lines and points are the building blocks of shapes. A shape is an external form or appearance of something. Shapes can be geometric or organic.
Size is a quality of the primary visual elements line and shape. All elements have a definitive size, which is its measurable form. Scale is the difference between two objects, or, in comparison to a standard. Texture is the quality of feel, appearance, or consistency of an object or objects. One form of texture is pattern, which is a repeated, decorated design. Texture can be implied or visual. Implied texture is like a drawing of a lego. Visual texture is like a pattern design. Implied = touch. Patterns are broken up into motifs. When we repeat a motif, we've constructed a pattern. Every shape and line has texture. Proportion is the harmony of two objects in comparison. Line and shape are primary visual elements.
Color is by far the most powerful visual element. Color is the way light reflects off an object. Color can define a shape, portray emotion, or emphasize an object. Color is measured by hue, saturation, and value. Naming a color by description is its hue, for example, red, blue, or green. Color sensations are used to categorize hues, such as hot, warm, or cold colors. A tint is a mixture of color with white. A shade is a mixture of color with black. Tine is a mixture of color with grey, in other words, tinting and shading at the same time.
The primary colors are red, yellow, and green. Colors opposite each other on the color wheel are complementary colors. Triad colors are three colors equidistant from each other on the color wheel, such as green, pink, and light blue. As color increases in saturation, it takes the appearance of gray. Monochromatic simply means "of the same color." Chromatic colors are colors that are high in saturation, such as the colors on the color wheel. Neutral colors (warm and cool colors) have minimal saturation. Achromatic colors are colors with no saturation (white, black, and grey). Value refers to the lightness and darkness of a color, and can also be measured by scale from white to black.
Tonal keys. A high-key refers to a light value design. An intermediate-key refers to a mid-range design, and a low-key refers to a dark range value. Low scale is known as low range or low contrast. High scale is known as high range or high contrast. The entire value scale is referred to as the total range of the design. Colors interact with neighboring colors, and this is known as simultaneous contrast. Optical mixing is done when contrasting two colors to give the effect of one color.
In design, composition is the placement or arrangement of visual elements or ingredients in a layout. The way the composition is organized is its structure, which can be rigid/geometric or loose/organic. When we add elements to our composition, we are adding positive shapes, these positive shapes are known as the foreground. The empty space is commonly known as the background. We must consider both as equals. The dependencies (where they meet) of the foreground and background are very important to one another, and are referred to as the figure-ground. The two should be treated as two separate, whole objects. When the two become so similar, like a complex, repeating pattern, it is then referred to as the reversible figure-ground, or an equal-inverse.
We went over compositional techniques. The rule of thirds is a way to cut the composition into 9 different sections and use the sections to balance one another or to focus on a specific section. The rule of odds simply states that an odd number of objects is more pleasing to the eye than an even number. The rule of space is geared towards creating movement. To create movement, we can leave negative/white space in front of an object. As the eye goes to the object, to the white-space, and back, this creates the illusion of movement.
Ambiguous space is when there are two or more possible meanings to a space. Impossible space is when shapes just don't make sense. Atmospheric perspective is when we create depth through space by blurring the smaller/furthest object or making it darker. Linear perspective is when we add two vanishing points to a horizon line, then connect the lines issuing from the vanishing points. This creates what seems like a three dimensional object, and creates point of view compositions. Mass can also be used to achieve a 3rd dimension, for example a circle can be turned into a three dimensional sphere by shading the circle a certain way. Whitespace refers to the comparison of elements in the composition. Grouping means the unity or connection of two or more objects. Grouping can be done by touching, overlapping, transparency, union, intersecting (called subtraction, and the piece cancelled out is known as the intersection). Objects that appear closer than others appear grouped. Objects can be grouped by similarity, or continuity in size, shape, color, or space. Another way to group objects is through common fate (objects moving in the same direction belong together). Familiarity is the principle that objects can themselves create another object. The Gestalt Principle of grouping objects refers to overlapping objects.
Contrast and balance. Contrast is when we compare two or more objects, through shape, quantity, position, direction, and space. The higher the contrast, the more importance you can apply to the specific element or elements. White space around an object can be used to create contrast around an object to make it stand out. Balance is the equal distribution of weight within a composition. Shape, size, color, and texture can be used to achieve overall balance. Symmetrical balance can be achieved when a layout appears mirrored. Radial balance can be achieved when there are organized repeating patterns within a composition.
Emphasis, movement, and unity. Emphasis means to apply intentional focus on one or more objects through size, color, shape, or isolation. We can also emphasize through animation or movement. Implied movement is when we use sequential repeating images/blurring/motion indicator/dashed lines/smoke trail to simulate movement. Shape can also be used to imply movement. Unity in design means two or more elements being joined as a whole. This can be applied to branding.
A critique means a method to analyze something. The critiquing checklist can be broken down into four sections: description, analysis, interpretation, and judgment.
Description: Who created the composition and who is it for?
Analysis: Use the design elements and principles to apply them to the critique.
Interpretation: State the intention of the composition and how we feel they were influenced in creating the design and tell why it is I feel that way.
Judgment: This is where you state your assessment of whether the design meets design standards.
SUMMARY OF CODING SKILLS
Total Treehouse Points: 2,586
Treehouse Points by Subject Matter: HTML 663, CSS 1,599, Design 294, and Miscellaneous
Treehouse Ranking (%): "You have more total points than 80% of all students."
Badge(s) Earned Today:
Elements
Principles
Color Theory
Introduction to Design
Understanding Aesthetics
Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques
Aesthetic Foundations
Books Read or in Progress:"Head First HTML and CSS," by E. Robson & E. Freeman (In progress, I've read the 37 pg. preface and the first 255 pgs. of actual content, which is the HTML section of the book)
Hours Spent Coding Today: 6
Total Hours Coding: 152.5
