ui design-day3
TRANSCRIPT
![Page 1: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/1.jpg)
Utility | Meaning | Engagement
UI Design Basics
![Page 2: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/2.jpg)
My model:Design can be evaluated from three broad categories.When these three categories combine appropriately to meet the needs of the user, the design can be said to be ‘good’.
![Page 3: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/3.jpg)
Engagement
MeaningUtility
My model:Design can be evaluated from three broad categories.When these three categories combine appropriately to meet the needs of the user, the design can be said to be ‘good’.
![Page 4: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/4.jpg)
Engagement
UI Design Basics
Engagement: Engaging the emotionswhen we design for emotion we intentionally trigger emotional responses in our users, with a goal of keeping them motivated and helping them perceive a personality.
Go over some examples and then we will explore some ways to design for engagement.
comfortablefriendlycuriousempoweredfun
![Page 5: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/5.jpg)
“Emotion is one of the strongest differentiators in user experience namely because it triggers unconscious responses to a product, website, environment or interface. Our feelings strongly influence our perceptions and often frame how we think about or refer to our experiences at a later date.”
-Frank Spillers
http://experiencedynamics.blogs.com/site_search_usability/2004/08/design_and_emot.html
Frank Spillers is usability expert, founder of Experience Dynamics.
It is through emotion that we screen the world around us while making decisions.
Appealing to emotion can help:establish trustinfluence motivationestablish a personality that users can identify with
![Page 6: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/6.jpg)
5
What is the most frequently cited factor in evaluating the credibility of a website?
![Page 7: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/7.jpg)
6
What is the most frequently cited factor in evaluating the credibility of a website?
Trust is extremely important: It’s often the limiting factor that determines whether a user will engage with your product or service. Purchasing from an e-commerce website, hiring someone based on their portfolio or even accepting the advice or opinion of a blog post all require trust beforehand.
![Page 8: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/8.jpg)
##### Color Palette by Color Scheme Designer ##### Palette URL: http://colorschemedesigner.com/#3w31TnfsHuDDt ##### Color Space: RGB;
*** Primary Color:
var. 1 = #2F6993 = rgb(47,105,147) var. 2 = #365870 = rgb(54,88,112) var. 3 = #104062 = rgb(16,64,98) var. 4 = #73AED7 = rgb(115,174,215) var. 5 = #98BDD7 = rgb(152,189,215)
*** Secondary Color A:
var. 1 = #E5BA3F = rgb(229,186,63) var. 2 = #AE954E = rgb(174,149,78) var. 3 = #987716 = rgb(152,119,22) var. 4 = #F5D67B = rgb(245,214,123) var. 5 = #F5E2A9 = rgb(245,226,169)
*** Secondary Color B:
var. 1 = #E56C3F = rgb(229,108,63) var. 2 = #AE684E = rgb(174,104,78) var. 3 = #983916 = rgb(152,57,22) var. 4 = #F59C7B = rgb(245,156,123) var. 5 = #F5BDA9 = rgb(245,189,169) Trust?
![Page 9: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/9.jpg)
##### Color Palette by Color Scheme Designer ##### Palette URL: http://colorschemedesigner.com/#3w31TnfsHuDDt ##### Color Space: RGB;
*** Primary Color:
var. 1 = #2F6993 = rgb(47,105,147) var. 2 = #365870 = rgb(54,88,112) var. 3 = #104062 = rgb(16,64,98) var. 4 = #73AED7 = rgb(115,174,215) var. 5 = #98BDD7 = rgb(152,189,215)
*** Secondary Color A:
var. 1 = #E5BA3F = rgb(229,186,63) var. 2 = #AE954E = rgb(174,149,78) var. 3 = #987716 = rgb(152,119,22) var. 4 = #F5D67B = rgb(245,214,123) var. 5 = #F5E2A9 = rgb(245,226,169)
*** Secondary Color B:
var. 1 = #E56C3F = rgb(229,108,63) var. 2 = #AE684E = rgb(174,104,78) var. 3 = #983916 = rgb(152,57,22) var. 4 = #F59C7B = rgb(245,156,123) var. 5 = #F5BDA9 = rgb(245,189,169) How about now?
![Page 10: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/10.jpg)
Users can make judgements in as few as 50ms about websites and
their trustworthiness based on aesthetics.
Aesthetics are not just a nice to have; they are critical to establishing trust.
![Page 11: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/11.jpg)
Motivation
Emotion makes information memorable, resonant and possibly, actionable. If we trigger the right emotion, we can increase the chance that our users will perform the desired action or complete a task.
Let’s look at some examples of engaging emotions to motivate
![Page 12: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/12.jpg)
11
Example of Mozilla motivating users to take a survey“Share your vision”Self efficacy
![Page 13: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/13.jpg)
Appeal to strong emotions - outrage (pic not shown)
![Page 14: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/14.jpg)
Group identification - ~2.5 million likes (probably not all of them donated)
![Page 15: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/15.jpg)
14
Stack overflow’s reputation encourages engagement by appealing to social approval.
![Page 16: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/16.jpg)
Create Personality
Choice of design elements - line, shape, color, texture, typography, can communicate a personality or character that users can identify with.
![Page 17: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/17.jpg)
Vintage
![Page 18: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/18.jpg)
MasculineGrunge in logoBurlap backgroundBlack
![Page 19: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/19.jpg)
Tight grid like an excel spreadsheetCorporate
![Page 20: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/20.jpg)
FunLight
![Page 21: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/21.jpg)
“Emotion is one of the strongest differentiators in user experience namely because it triggers unconscious responses to a product, website, environment or interface. Our feelings strongly influence our perceptions and often frame how we think about or refer to our experiences at a later date.”
-Frank Spillers
http://experiencedynamics.blogs.com/site_search_usability/2004/08/design_and_emot.html
Recap - UI design can appeal to emotions through largely unconscious responses.
Several ways we can tap into these unconscious responses.The three I will address are:CompositionColorTypography
![Page 22: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/22.jpg)
Composition
When an interface is designed with an intentional structure, then that feeling of structure comes through to the user in their first impression.
It implies that thought has been given to how the website is to deliver its information to the user and therefore gives the user confidence, trust, in the website.
Tools for confidence:Visual HierarchyGridsVertical Rhythm
![Page 23: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/23.jpg)
Visual Hierarchy
A Visual hierarchy determines how we visually separate and prioritize what users will see.
Think back to class 2 - the gestalt principles - similarity and it’s inverse anomalyproximity will come in to play when determining a visual hierarchy
![Page 24: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/24.jpg)
Some Random Kant: The noumena are just as necessary as our a posteriori concepts. In natural theology, the Categories should only be used as a canon for metaphysics, as any dedicated reader can clearly see. By means of analytic unity, it must not be supposed that the paralogisms of pure reason are a representation of the Transcendental Deduction; in view of these considerations, the manifold teaches us nothing whatsoever regarding the content of the phenomena.
I assert, in the study of the transcendental aesthetic, that the things in themselves should only be used as a canon for the discipline of practical reason. Because of our necessary ignorance of the conditions, the Categories have nothing to do with natural causes. The Ideal (and there can be no doubt that this is true) is a representation of space, because of the relation between the discipline of practical reason and our sense perceptions.
Consider this typographic example.
![Page 25: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/25.jpg)
Some Random KantThe noumena are just as necessary as our a posteriori concepts. In natural theology, the Categories should only be used as a canon for metaphysics, as any dedicated reader can clearly see. By means of analytic unity, it must not be supposed that the paralogisms of pure reason are a representation of the Transcendental Deduction; in view of these considerations, the manifold teaches us nothing whatsoever regarding the content of the phenomena.
I assert in the study of the transcendental aesthetic, that the things in themselves should only be used as a canon for the discipline of practical reason. Because of our necessary ignorance of the conditions, the Categories have nothing to do with natural causes. The Ideal (and there can be no doubt that this is true) is a representation of space, because of the relation between the discipline of practical reason and our sense perceptions.
The information is the same but adding the headings prioritizesorganizesthe content.
![Page 26: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/26.jpg)
25
Size - objects that are bigger demand more attentionLizard brain sees them as being “closer”
![Page 27: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/27.jpg)
26
Size - objects that are bigger demand more attentionforecast.io focuses on the short term, specific forecast rather than broad general % of viewing area.
“predict when it will rain or snow — down to the minute — at your exact location, and presents it to you alongside the most beautiful weather visualizations you’ve ever seen.”
![Page 28: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/28.jpg)
27
1 2
34
Size - objects that are bigger demand more attention
1: Radar map2: Big bold text3: Short term forecast4: Long term forecast
![Page 29: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/29.jpg)
28
Contrast
Contrast shows relative importance. Dramatic shifts in text-size, color,information densitywill indicate that something is different and requires attention.
![Page 30: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/30.jpg)
29
Contrast
Region of highest contrast
![Page 31: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/31.jpg)
Subtitle Text
30
Interesting Example from survey monkey.
![Page 32: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/32.jpg)
Subtitle Text
31
1 2
3
Area 2 has the highest contrast between the dark navy blue on white.
Area 1 has the highest information density.
Area 3 contains the largest single element.
![Page 33: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/33.jpg)
32
Grids
Grids are another part of composition that we can use to convey an intentional structure.The de-facto standard web grid is arranged in 12 vertical columnsModular - can be combined and composed for different layouts
![Page 34: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/34.jpg)
32
Grids
Grids are another part of composition that we can use to convey an intentional structure.The de-facto standard web grid is arranged in 12 vertical columnsModular - can be combined and composed for different layouts
![Page 35: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/35.jpg)
33
![Page 36: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/36.jpg)
34
Wired: 10 column grid
![Page 37: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/37.jpg)
35
6 4
4 3 3
Primary content is obviousF like pattern
![Page 38: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/38.jpg)
36
![Page 39: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/39.jpg)
37
10 column grid
![Page 40: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/40.jpg)
38
42 4
10 column grid
![Page 41: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/41.jpg)
Fluid, percentage based, grids allow us to adapt our layouts.
![Page 42: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/42.jpg)
This grid is very clearly 33.333%
![Page 43: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/43.jpg)
41
Adapted to be 50%
![Page 44: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/44.jpg)
42
Adapted to be 100%Grids from bootstrap and foundation
![Page 45: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/45.jpg)
43
Grids don’t necessarily mean everything is aligned uniformly - sometimes you want to “break the grid”to add visual interest.
![Page 46: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/46.jpg)
44
Grids don’t necessarily mean everything is aligned uniformly - sometimes you want to “break the grid”to add visual interest.
![Page 47: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/47.jpg)
Vertical Rhythm
Closely related to the column based grid is vertical rhythm
guides readers’ eyes between elements, creating appropriate and predictable white space for visual rest stops, and conferring a sense of order and elegance to the layout.
creates a pattern
A book with every line on a left hand page aligning with their counterparts on the right simply feels trustworthy; a book where the lines don’t match up at all somewhat less so.
http://webdesign.tutsplus.com/articles/setting-web-type-to-a-baseline-grid--webdesign-3414
![Page 48: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/48.jpg)
46
Vertical RhythmVertical rhythm offers a consistent, predictable measures as the user scrolls down the content.You can establish a vertical rhythm with what is called a baseline grid.
lobortis nulla. Nulla a diam orci. Sed id sodales elit. Mauris vel euismod odio, vitae egestas mi. Donec a sagittis mauris. Aenean orci mauris, venenatis sed neq. Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetur.
Vertical rhythm relies on 3 things:
1. Font size 2. Line height 3. Any margin or padding
Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetu. Adipiscing elit. Praesent scelerisque quam erat, in adipiscing odio facilisis a. Donec dignissim est quam, ut consequat orci tincidunt ac. Vestibulum euismod accumsan tellus, ac condimentum felis rutrum id.
Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetu. Adipiscing elit. Praesent scelerisque quam erat, in adipiscing odio facilisis a. Donec dignissim est
Closely related to the grid is vertical rhythm
guides readers’ eyes between elements, creating appropriate and predictable white space for visual rest stops, and conferring a sense of order and elegance to the layout.
![Page 49: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/49.jpg)
47
Vertical RhythmVertical rhythm offers a consistent, predictable measures as the user scrolls down the content.You can establish a vertical rhythm with what is called a baseline grid.
lobortis nulla. Nulla a diam orci. Sed id sodales elit. Mauris vel euismod odio, vitae egestas mi. Donec a sagittis mauris. Aenean orci mauris, venenatis sed neq. Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetur.
Vertical rhythm relies on 3 things:
1. Font size 2. Line height 3. Any margin or padding
Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetu. Adipiscing elit. Praesent scelerisque quam erat, in adipiscing odio facilisis a. Donec dignissim est quam, ut consequat orci tincidunt ac. Vestibulum euismod accumsan tellus, ac condimentum felis rutrum id.
Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetu. Adipiscing elit. Praesent scelerisque quam erat, in adipiscing odio facilisis a. Donec dignissim est
The whitespace between elements creates a predictable pattern.
![Page 50: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/50.jpg)
48
Vertical Rhythm
Without baseline gridA book with every line on a left hand page aligning with their counterparts on the right simply feels trustworthy; a book where the lines don’t match up at all somewhat less so.
http://webdesign.tutsplus.com/articles/setting-web-type-to-a-baseline-grid--webdesign-3414The whitespace between elements creates a predictable pattern.
![Page 51: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/51.jpg)
49
Vertical Rhythm
Without baseline grid.A book with every line on a left hand page aligning with their counterparts on the right simply feels trustworthy; a book where the lines don’t match up at all somewhat less so.
![Page 52: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/52.jpg)
50
With baseline grid
![Page 53: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/53.jpg)
51
With baseline grid
![Page 54: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/54.jpg)
52
Base font size = 16pxBase line height = 1.5 * Base font size = 24pxMargin bottom = 48px
H1 font size = 50pxH1 line height = 1.2 * H1 font size = 60pxMargin bottom = 96px- 60px = 36px
![Page 55: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/55.jpg)
Baseline Gridoffering a consistent, predictable measures as the user scrolls down the content.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget mauris vitae lorem hendreritlobortis nulla. Nulla a diam orci. Sed id sodales elit. Mauris vel euismod odio, vitae egestas mi. Donec a sagittis mauris. Aenean orci mauris, venenatis sed neq. Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetur.
Adipiscing elit. Praesent scelerisque quam erat, in adipiscing odio facilisis a. Donec dignissim est quam, ut consequat orci tincidunt ac. Vestibulum euismod accumsan tellus, ac condimentum felis rutrum id. Vestibulum erat dui, suscipit vel congue sed, scelerisque at eros. Proin non urna id neque tempus cursus. Ut ut neque sagittis, dictum erat id, ultrices sapien. Quisque rhoncus, dolor sit amet mattis elementum, lorem velit ultricies diam, in faucibus tortor lacus eu orci.
Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetu.
16px font size
24px line height
48px bottom margin
![Page 56: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/56.jpg)
Baseline Gridoffering a consistent, predictable measures as the user scrolls down the content.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget mauris vitae lorem hendreritlobortis nulla. Nulla a diam orci. Sed id sodales elit. Mauris vel euismod odio, vitae egestas mi. Donec a sagittis mauris. Aenean orci mauris, venenatis sed neq. Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetur.
Adipiscing elit. Praesent scelerisque quam erat, in adipiscing odio facilisis a. Donec dignissim est quam, ut consequat orci tincidunt ac. Vestibulum euismod accumsan tellus, ac condimentum felis rutrum id. Vestibulum erat dui, suscipit vel congue sed, scelerisque at eros. Proin non urna id neque tempus cursus. Ut ut neque sagittis, dictum erat id, ultrices sapien. Quisque rhoncus, dolor sit amet mattis elementum, lorem velit ultricies diam, in faucibus tortor lacus eu orci.
Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetu.
50px font size
60px line height
36px bottom margin
96px}
H1 font size = 50pxH1 line height = 1.2 * H1 font size = 60pxMargin bottom = 96 - 60px = 36px
![Page 57: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/57.jpg)
55
Baseline Gridoffering a consistent, predictable measures as the user scrolls down the content.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget mauris vitae lorem hendreritlobortis nulla. Nulla a diam orci. Sed id sodales elit. Mauris vel euismod odio, vitae egestas mi. Donec a sagittis mauris. Aenean orci mauris, venenatis sed neq. Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetur.
Adipiscing elit. Praesent scelerisque quam erat, in adipiscing odio facilisis a. Donec dignissim est quam, ut consequat orci tincidunt ac. Vestibulum euismod accumsan tellus, ac condimentum felis rutrum id. Vestibulum erat dui, suscipit vel congue sed, scelerisque at eros. Proin non urna id neque tempus cursus. Ut ut neque sagittis, dictum erat id, ultrices sapien. Quisque rhoncus, dolor sit amet mattis elementum, lorem velit ultricies diam, in faucibus tortor lacus eu orci.
Nulla fermentum aliquam enim, non scelerisque nisl. Vestibulum ante ipsum, aliquam non posuere in, sagittis in turpis. Nam consequat pretium erat, id rhoncus nunc lacinia sit amet. Lorem ipsum dolor sit amet, consectetu.
Technique of aligning all type to a baseline grid is called “typesetting”.
![Page 58: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/58.jpg)
56
Most of our apps will not involve typesetting, but the same principles apply.
Closely related to grid is baseline grid
It creates a vertical rhythm that guides readers’ eyes between elements, creating appropriate and predictable white space for visual rest stops, and conferring a sense of order and elegance to the layout.
creates a pattern
A book with every line on a left hand page aligning with their counterparts on the right simply feels trustworthy; a book where the lines don’t match up at all somewhat less so.
http://webdesign.tutsplus.com/articles/setting-web-type-to-a-baseline-grid--webdesign-3414
![Page 59: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/59.jpg)
57
Vertical rhythm in the form areas
![Page 60: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/60.jpg)
Color
1 Emotions of different colors2 Color relationships
![Page 61: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/61.jpg)
Color wheel
![Page 62: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/62.jpg)
Primary Colors
![Page 63: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/63.jpg)
Secondary colorscreated by mixing primary colors
![Page 64: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/64.jpg)
Tertiary colorscreated by mixing one primary and one secondary color
![Page 65: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/65.jpg)
Warm colorsenergizing
![Page 66: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/66.jpg)
Cool colorscalming
![Page 67: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/67.jpg)
65
Physically: acts as an appetite stimulant, used in restaurants
Emotional associations:enthusiasmhappinessspontaneityautumn (fall) and harvestcreativitycitrushealthy food
![Page 68: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/68.jpg)
66
Physically: acts as an appetite stimulant, used in restaurantscontradictions: creativity vs decayEmotional associations:enthusiasmhappinessspontaneityautumn (fall) and harvestcreativitycitrushealthy food
![Page 69: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/69.jpg)
67
A conservative color, it is often used well in designs that represent cleanliness and an air of responsibility. corporate
contradiction: trust vs detachment
Some associations of the color blue include:trusthonestyloyaltysinceritypeacetranquilityintelligencecold or uncaring
Popular corporate color
![Page 70: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/70.jpg)
A conservative color, it is often used well in designs that represent cleanliness and an air of responsibility. corporate
contradiction: trust vs detachment
Some associations of the color blue include:trusthonestyloyaltysinceritypeacetranquilityintelligencecold or uncaring
Popular corporate color
![Page 71: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/71.jpg)
Emotionally charged
Physically: enhance the metabolic rate, increase respiration rates and blood pressure
contradictions: love and war
Emotional associations:urgencyenergyactionwardangerstrengthlovepassion
China: good luckIndia: purity
Best used as an accent color most of the time
![Page 72: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/72.jpg)
70
Emotionally charged
Physically: enhance the metabolic rate, increase respiration rates and blood pressure
contradictions: love and war
Emotional associations:urgencyenergyactionwardangerstrengthlovepassion
China: good luckIndia: purity
Best used as an accent color most of the time
![Page 73: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/73.jpg)
71
Emotionally charged
Physically: enhance the metabolic rate, increase respiration rates and blood pressure
contradictions: love and war
Emotional associations:urgencyenergyactionwardangerstrengthlovepassion
China: good luckIndia: purity
Best used as an accent color most of the time
![Page 74: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/74.jpg)
72
Known for its ability to promote clear thinking and quick decision making, yellow is probably most associated with happiness, positive energy and sunshine.
contradiction: happiness vs warning/caution
Emotional associations:creativitysunshinehappinessenergyclarity
cowardicewarningsinstability
yellow appears to induce quicker decision making and therefore having yellow buttons in e-commerce designs may work extremely well - as long as it is in fitting with the rest of your design.
![Page 75: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/75.jpg)
73
Known for its ability to promote clear thinking and quick decision making, yellow is probably most associated with happiness, positive energy and sunshine.
contradiction: happiness vs warning/caution
Emotional associations:creativitysunshinehappinessenergyclarity
cowardicewarningsinstability
yellow appears to induce quicker decision making and therefore having yellow buttons in e-commerce designs may work extremely well - as long as it is in fitting with the rest of your design.
![Page 76: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/76.jpg)
74
Known for its ability to promote clear thinking and quick decision making, yellow is probably most associated with happiness, positive energy and sunshine.
contradiction: happiness vs warning/caution
Emotional associations:creativitysunshinehappinessenergyclarity
cowardicewarningsinstability
yellow appears to induce quicker decision making and therefore having yellow buttons in e-commerce designs may work extremely well - as long as it is in fitting with the rest of your design.
![Page 77: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/77.jpg)
75
Known for its ability to promote clear thinking and quick decision making, yellow is probably most associated with happiness, positive energy and sunshine.
contradiction: happiness vs warning/caution
Emotional associations:creativitysunshinehappinessenergyclarity
cowardicewarningsinstability
yellow appears to induce quicker decision making and therefore having yellow buttons in e-commerce designs may work extremely well - as long as it is in fitting with the rest of your design.
![Page 78: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/78.jpg)
76
google image search for nature
![Page 79: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/79.jpg)
77
contradiction: growth vs mold/infection
Some associations of the color green include:springgrowthnaturebalancejealousysafetymoneyeco/organic/recycling
![Page 80: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/80.jpg)
Typography
http://untilsundaypost.wordpress.com/classification/1. Classification2. Personality
![Page 81: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/81.jpg)
79
Classification
![Page 82: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/82.jpg)
Sans Serif
![Page 83: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/83.jpg)
Serif
![Page 84: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/84.jpg)
Slab Serif
![Page 85: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/85.jpg)
Didone
![Page 86: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/86.jpg)
Script
![Page 87: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/87.jpg)
Blackletter
based on early manuscript lettering
![Page 88: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/88.jpg)
Monospace
a font whose letters and characters each occupy the same amount of horizontal space
![Page 89: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/89.jpg)
87
Personality
http://joogpot.eu/knowledge/16-webdesign/57-evoke-emotion-through-typography
![Page 90: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/90.jpg)
Nine out of ten doctors agree.
88
Credibility
http://joogpot.eu/knowledge/16-webdesign/57-evoke-emotion-through-typography
Limited colorsFamiliar typefaceClear hierarchy
![Page 91: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/91.jpg)
http://joogpot.eu/knowledge/16-webdesign/57-evoke-emotion-through-typography
Limited colorsFamiliar typefaceClear hierarchy
![Page 92: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/92.jpg)
![Page 93: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/93.jpg)
Informal: Internet Spaceships
Pew Pew Pew
http://joogpot.eu/knowledge/16-webdesign/57-evoke-emotion-through-typography
Irregular sans-serif
![Page 94: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/94.jpg)
Section Title Text
![Page 95: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/95.jpg)
I am human and I need to be loved, just like everybody else does -Comic Sans
Irregular sans-serif
![Page 96: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/96.jpg)
![Page 97: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/97.jpg)
You are
formally invited
to something
fancy.
http://joogpot.eu/knowledge/16-webdesign/57-evoke-emotion-through-typography
Script
![Page 98: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/98.jpg)
![Page 99: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/99.jpg)
97
![Page 100: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/100.jpg)
![Page 101: Ui design-day3](https://reader034.vdocuments.us/reader034/viewer/2022042504/58e7e8841a28abbc0b8b51d5/html5/thumbnails/101.jpg)
?