윈도우 앱개발을 향하여

Copyright

이 모든 내용은 Pluralsight에 Jason Roberts가 올린 'An Introduction to Design'라는 강의의 네번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/design-introduction/table-of-contents).

The Principle of Proximity

Things that are closer to each other seem related 

가까이 있는 것들을 묶어서 인식한다, 설령 모양이 다르더라도 뭉친것을 연관된 것으로 인식한다.

The Principle of Similarity

Things that have similarities seem related (모양, 크기, 색상에 따라 같은것들을 묶어 인식한다.)

The Principle of Figure-Ground

Things stand out from the background

오른쪽 이미지는 어떤 부분을 물체로 인식하느냐에 따라 다른 부분은 background가 된다.

The Principle of Symmetry

Two symmetrical halves appear as one

우리는 아래 사진을 6개의 괄호들로 인식하지 않고 3개의 괄호묶음으로 인식한다.

The Principle of Closure

Filling in the blanks

연속선상에 있다고 느껴지는 부분을 채워 전체를 인식하거나, 오타를 스스로 메우고 읽는다.

The Principle of Common Fate

Things moving in the same direction seem related

The Principle of Uniform Connectedness

Visually connected things seem related

줄로 잇거나 박스로 묶으면 연관되어보인다. (그 전에는 Similarity로 인해 네모와 세모가 더 연관되어 보였다.)

The Principle of Good Continuation

Copyright

이 모든 내용은 Pluralsight에 Jason Roberts가 올린 'An Introduction to Design'라는 강의의 세번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/design-introduction/table-of-contents).

Content

1. Typography

2. Color

3. The Fundamental Gestalt Principles

4. Layout and Organization Principles

Outline

Basic science

Color models

Meaning of colors

Color schemes

Inspiration

The Science of Light, Sight, and Color

The Electromagnetic Spectrum is a range that contains all the frequencies of electromagnetic radiation.

These frequencies ranges

Radio - Microwave - Infrared - Visible Light - Ultraviolet - X-ray - Gamma ray

(long wavelength radiation)                    (high frequency, short wavelength radiation)

Human Sight is a combination of the eye and brain working together. Electromagnetic radiation some of which is in the visible spectrum enters the eye. Within the eye there are different types of receptor cells each of which responds to different parts of the visible spectrum(Roughly these correspond to red, green, and blue light). The eye sends information to the brain that processes this information and results in the perception of color. Strictly speaking the visible spectrum of electromagnetic radiation doesn't contain colors. Color is our perception of those wavelengths. We perceive colors differently but we share the same basic mapping model.

Two systems of color

1. Subtractive color : Start with white light then subtract colors from it to give us the final color

eg. black text on a page reflects nothing from sunlight, it subtracts all the colors

2. Additive color : Start with black and adds different wavelengths of light to it to create colors

eg. The screen is in use each pixel emits light in different combinations of red, green, and blue

Color Models

Color models are ways of representing colors based on numeric values.

The RGB color model represents a given color using three values(Red, Green, Blue)

eg. 255, 255, 0 == Yellow, 0, 0, 0 == Black, 255, 255, 255 == Wight

The CMYK model is a subtractive color model used for color printing.

The four components are Cyan, Magenta, Yellow and the K(effectively means Black)

eg. Red=(Cyan 0,Magenta 100,Yellow 100,K 0), Blue=(100,100,0,0), Yellow=(0,0,100,0), Black=(0,0,0,100), White=(0,0,0,0)

Color and Meaning (Western point of view)

Red : a highly sensual color, tempting and suggestive, danger of blood. It attracts attention more than any other color

The family of reds includes both pale and bright pinks, the red of house bricks and deep reds

Brightest form red represent passionate, hot, sexy, exciting, strong, seductive, aggressive and dangerous

Green : color of nature, relaxing and calming

The green include the citrusy limes, the military olives, the protective turquoise, the sophisticated table 

Harmonious, natural, fresh, lush, agreeable, relaxing, calming

Blue : color of quiet coolness, stillness, tranquility, constancy, sadness, loyalty and dependability

The blues include the electrical bright blues, serious strong deep dart blue

The lighter and sky blues are spacious, peaceful, open, cool, pure, clean, faithful

Orange : enthusiasm and energy, sunset and fire, food and appetites, sharpen mental activity

The oranges include the soft and intimate peaches, spicy fiery gingers

Its brighter more vibrant forms are energizing, dynamic, stimulating, juicy, fun, hot, happy, playful

Purple : mysterious and magical. Purple is a combination of reds and blues but it's more than the sum of its parts

it's a relatively rare color in nature

The Purple include the romantic and calming lavenders, royal opulent deep, deep purples

Spiritual, cerebral, mysterious, meditative, transcendental

Yellow : the color of light, friendly and enlightening

The yellow include the mellow ambers, golden yellows

The brighter yellows are hot, joyous, energetic, extroverted, youthful, vibrant, hopeful

Brown : wholesome and rustic, working the land ,nature past times(hiking and camping), appetite(coffees, chocolate, cigar)

The Browns include the tans, chocolate browns

Balanced, homely, secure, enduring, natural, solid

Black and White : true polar opposites, night and day, fianl simple truth, the simplicity, timeless combination

White is pure, simple, innocent, clean, untouched

Black is strong, sober, heavy, sophisticated, and classy

Cultural Color Differences

eg Red

USA : heat, passion

Mexico, Africa : death

Argentina : craftsmanship

Netherlands : nature

Armenia : communism

China : luck

Thailand : Buddhism

Green : Universally accepted as nature

Color Schemes

Monochromatic scheme : Uses different shades of the same color

Balanced and appealing, but not much color contrast

Analogous scheme : Uses colors that are close to each other on the color wheel

In the Analogous scheme usually stick to all cool or all warm colors

Complementary scheme : provides maximum contrast

In this scheme we can use the main color as the dominant color and its complimentary color for accents

Hard to balance but maximum attention

Triadic scheme : three colors equally spaced around the color wheel

Good color contrast and some harmonry

#색을 옅게해서 contrast를 줄일 수 있다.

Taking Inspiration form the Real World

Summary (생략)

출처

이 모든 내용은 Pluralsight에 Jason Roberts가 올린 'An Introduction to Design'라는 강의의 세번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/design-introduction/table-of-contents). 제가 정리한 것보다 더 많은 내용과 Demo를 포함하고 있으며 최종 Summary는 생략하겠습니다. Microsoft 지원을 통해 한달간 무료로 Pluralsight의 강의를 들으실 수도 있습니다.

Copyright

이 모든 내용은 Pluralsight에 Jason Roberts가 올린 'An Introduction to Design'라는 강의의 두번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/design-introduction/table-of-contents).

Content

1. Typography

2. Color

3. The Fundamental Gestalt Principles

4. Layout and Organization Principles

Outline

Brief History

Fonts, typefaces, and families

Basic anatomy and nomenclature of type

Categories of typefaces

Legibility and readability

Better typography

What is Typography?

The style and appearance of printed matter

The art or procedure of arranging type or processing data and printing from it   - Oxford Dictionary

eg. Arranging Type

Typeface(서채) choice : 상황에 맞는 서채의 선택

Size of the type : 가독성과 미적인 요소, 전반적인 디자인에 영향

Leading : how much space between lines of text

Tracking : the space between letters

Measure : the length of the lines of text

Hierarchy : visual Hierarchy helps to create a sense of order and helps separate sections of text

Context : 책 페이지의 텍스트 배열은 길가의 텍스트 배열과 다르다.

Aesthetics : arrangement에 따른 전반적인 미학도 고려되어야 한다.

A Brief History of Typography

1000-2000 BCE : 그리스에서 발견된 도기조각에 찍힌 문자들 (최초의 폰트)

c. 1450 CE : Johannes Gutenberg의 유럽 최초의 활자기 => the Gutenberg Bible 

c. 1870 CE : Hansen Writing Ball (1865, the Reverend Erasmus Mundus Hansen in Denmark) : 최초의 상업용 타자기

today : with personal computers access to thousands of fonts and high quality printers

everyone with basic device considered amateur typographers

Typeface or Font?

Typeface : something that's created by a type designer. Times New Roman, Sego UI, Heretica are a typeface.

The way it looks(Design thing, referring to how the letter look, the curves and the lines)

Font : the implementation or delivery mechanism of the typeface

Typeface Families

A typeface can exist on its own or it might exist as part of a family

All of the individual typefaces within the family are stylistically related to one another (Style)

eg. Segoe UI Family consists of a number of typefaces(Segoe UI, Segoe UI - Light, Semilight, Semibold -)

There's plenty more alternative styles of typeface that may often form part of a family such as additional variations on weight/boldness/italic/letter width/condensed styles with narrower letters/combination

Basic Anatomy of Type

Baseline : an imaginary line on top of which the characters sit.

x-height : the distance from the baseline to the top of the lowercase letters

The x-height is typically the height of the lowercase letter x

Kerning : the space between two letters. fix the spaces between certain pairs of letters

Fonts can come with kerning information imbedded in them

Ascender : the vertical stems of letters that raise in an upward direction

The ascend arises above the x-height of the typeface

Descender : the downward vertical stem that sits below the baseline

Leading : the distance between lines of text. It's measured from baseline to baseline (line spacing)

Tracking : the space between all the letters in a block of text. The adjustment of space between all the letters.

Serifs : small extra shapes that exist at the ends of some line strokes in a letter

The shape of Serifs can be roughly categorized into three groups

Hariline, Slab(square), Wedge

If the Serif features a curved transition from the main stroke line into the Serif, it's known as a bracketed Serif

Typefaces with no Serifs are called Sans Serif typefaces

Categories of Typeface

Humanist : also known as Venetian. sloping crossbar on the letter e, short bracketed Serifs (15th century)

Old Style : wedge shaped Serifs, horizontal cross bar of the letter e (late 15 century)

Transitional : more horizontal ascender Serifs and an increased difference between the thin and thick line strokes, vertical letter o

(18th century)

Modern : high contrast between thick and thin line strokes, unbracketed hairline Serifs and upright letters with no slanting

Moderns are also known as Dedon typefaces (late 18th century)

Slab Serifs : also known as Egyptian typefaces. Little variation in line stroke width and heavy traditionally unbracketed Slab Serifs

The Slab Serif family consists of a number of sub classifications such as the fat faces and the Clarendon (19th century)

San Serif : little or no variation in light stroke thickness and no Serifs (19th century)

One of the most famous Sans Serifs is Helvetica

The Difference between Legibility and Readability

Legibility

Micro-level

Individual letter recognition

Differentiation between letters

Inherent in fonts

Readability

Macro-level

Words, pharases, paragraphs

Overall ease of comprehension

Reading comfort

Combination of font & layout

Readability in context (생략)

Better Typography : Measure

Measure is the length of a line of text

Number for the perfect measure is 65 characters per line including spaces, aim 40 ~ (65) ~ 80

Better Typography : Leading

Leading is the spacing between lines of text (also line height)

특별히 정해진 규칙은 없으나, One rule of thumb is to set the leading to 120% of the text size

Better Typography : Scale

역활에 맞는 크기를 주어주는 것이 좋다.

피보나치 수열(1,2,3,4,8,13,21,34...)이나 제곱수열(1,2,4,8,16,32....) 등을 사용할 수 있으나 중요한 점은, 문자의 크기가 결정된 뒤에는 일관되게 사용되어야 한다는 것이다.

Better Typography : Vertical Rhythm

18 points in size, 21 leading == 18/21

글의 leading인 21을 기준으로 Main Heading의 leading과 아래여백을 정한다... 

Sub Heading의 위아래 여백을 10, 11로 잡아주었다. (10 + 11 = 21)

여기서 알 수 있는 Vertical Rhythm의 가장 중요한 점은 21에 맞춰 2번째 문장이 다시 base line에 돌아왔다는 것이다.

Better Typography : Kerning

the spacing of individual pairs of letters

보통 소프트웨어나 font에서 제공되는 kerning을 그대로 이용하지만, 간혹 Manual kerning을 해야할 때도 있다. 주로 title과 같은 large letters를 다룰때이다. 어색해보이는 간격을 줄이거나 늘림으로써 미적인 아름다움을 확보할 수 있다.

Summary (생략)

출처

이 모든 내용은 Pluralsight에 Jason Roberts가 올린 'An Introduction to Design'라는 강의의 두번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/design-introduction/table-of-contents). 제가 정리한 것보다 더 많은 내용과 Demo를 포함하고 있으며 최종 Summary는 생략하겠습니다. Microsoft 지원을 통해 한달간 무료로 Pluralsight의 강의를 들으실 수도 있습니다.