Emotion in web
-
Upload
suleiman-leadbitter -
Category
Design
-
view
74 -
download
0
description
Transcript of Emotion in web
![Page 1: Emotion in web](https://reader033.fdocuments.in/reader033/viewer/2022052621/5585435ad8b42a5e018b4fa9/html5/thumbnails/1.jpg)
Emotion in Web Design
Suleiman Leadbitter - @Sulcalibur
![Page 2: Emotion in web](https://reader033.fdocuments.in/reader033/viewer/2022052621/5585435ad8b42a5e018b4fa9/html5/thumbnails/2.jpg)
:)Don’t worry, it gets better…
![Page 3: Emotion in web](https://reader033.fdocuments.in/reader033/viewer/2022052621/5585435ad8b42a5e018b4fa9/html5/thumbnails/3.jpg)
:oDon’t worry, it gets better…
![Page 4: Emotion in web](https://reader033.fdocuments.in/reader033/viewer/2022052621/5585435ad8b42a5e018b4fa9/html5/thumbnails/4.jpg)
Emotional[ih-moh-shuh-nl]
adjective
1. Pertaining to or involving emotion or the emotions 2. Subject to or easily affected by emotion:
We are an emotional family, given to demonstrations of affection. 3. Appealing to the emotions
An emotional request for contributions 4. Showing or revealing very strong emotions
An emotional scene in a play
5. Actuated, effected, or determined by emotion rather than reasonAn emotional decision is often a wrong decision
6. Governed by emotion He is in a highly emotional state of mind
![Page 5: Emotion in web](https://reader033.fdocuments.in/reader033/viewer/2022052621/5585435ad8b42a5e018b4fa9/html5/thumbnails/5.jpg)
Emotional[ih-moh-shuh-nl]
adjective
1. Pertaining to or involving emotion or the emotions 2. Subject to or easily affected by emotion:
We are an emotional family, given to demonstrations of affection. 3. Appealing to the emotions
An emotional request for contributions 4. Showing or revealing very strong emotions
An emotional scene in a play
5. Actuated, effected, or determined by emotion rather than reasonAn emotional decision is often a wrong decision
6. Governed by emotion He is in a highly emotional state of mind
![Page 6: Emotion in web](https://reader033.fdocuments.in/reader033/viewer/2022052621/5585435ad8b42a5e018b4fa9/html5/thumbnails/6.jpg)
Emotion is for Art, not Design
Right?
Especially not Web Design
![Page 7: Emotion in web](https://reader033.fdocuments.in/reader033/viewer/2022052621/5585435ad8b42a5e018b4fa9/html5/thumbnails/7.jpg)
Positive Emotions• Happy • Delighted • Elated • Hopeful • Thrilled • Excited • Content • Confident • Joyful
![Page 8: Emotion in web](https://reader033.fdocuments.in/reader033/viewer/2022052621/5585435ad8b42a5e018b4fa9/html5/thumbnails/8.jpg)
Negative Emotions• Sad • Anxious • Scared • Angry • Nervous • Annoyed • Jealous • Discontent • Grieved
![Page 9: Emotion in web](https://reader033.fdocuments.in/reader033/viewer/2022052621/5585435ad8b42a5e018b4fa9/html5/thumbnails/9.jpg)
Colours• Blue • Red • Green • Yellow • Orange • Purple • Black • White
![Page 10: Emotion in web](https://reader033.fdocuments.in/reader033/viewer/2022052621/5585435ad8b42a5e018b4fa9/html5/thumbnails/10.jpg)
TypographyFonts that we use can impact the experience
A Grand Visual approach…when used well
![Page 11: Emotion in web](https://reader033.fdocuments.in/reader033/viewer/2022052621/5585435ad8b42a5e018b4fa9/html5/thumbnails/11.jpg)
IconographyIcons that we use can change the feel of the text.
![Page 12: Emotion in web](https://reader033.fdocuments.in/reader033/viewer/2022052621/5585435ad8b42a5e018b4fa9/html5/thumbnails/12.jpg)
PhotographyA picture tells a thousand words apparently.
![Page 13: Emotion in web](https://reader033.fdocuments.in/reader033/viewer/2022052621/5585435ad8b42a5e018b4fa9/html5/thumbnails/13.jpg)
UnderstandingSome emotions fall flat.
![Page 14: Emotion in web](https://reader033.fdocuments.in/reader033/viewer/2022052621/5585435ad8b42a5e018b4fa9/html5/thumbnails/14.jpg)
Embracing WebUsing Web Technology to take full advantage.
![Page 15: Emotion in web](https://reader033.fdocuments.in/reader033/viewer/2022052621/5585435ad8b42a5e018b4fa9/html5/thumbnails/15.jpg)
So then…General round up of what we just went over.
• Relative Emotion • Typography • Layout • Icons • Photography • Understanding what works • Web technology (SVG, Javascript, etc)