Post on 22-Jun-2015
(感性)
Peaceful
Easy to use
Premium
Gorgeous
Feminim
Sophiscated
Friendly
Cheerful
Professional
Colorful
Relax
Effective
Western
Cool
Warm
Passionate
Strong
Weak
Professional
Simple
Classic
Fun
Youth
Modern
Elegant
Old-school
Retro
Traditional
Appetizing
Fresh
Bright
…
“Emosi yang dirasakan seseorang saat berinteraksi dengan produk” (Lee et al. 2002)
• Melambangkan objek, ide, atau
aksi.
• Familiar, Simpel, Konsisten, Efisien.
• Gunakan ikon yang satu keluarga.
• Sepaket ikon yang satu
keluarga.
• Salah satu situs tempat
mencari iconpack: www.smashingmagazine.com
• Search: iconpack
• Hindari hal-hal berikut: • Resolusi gambar terlalu kecil
• Gambar direnggangkan
• Gambar dengan watermark
• Gambar yang diletakkan sembarang
• Gambar yang pixelate
• Clip art
• Gambar yang tidak berhubungan
dengan konteks aplikasi
• Background yang membuat teks sulit
dibaca
http://www.presentationzen.com/presentationzen/2009/08
/10-ways-to-use-images-poorly.html
Bacalah Teks Ini
Bacalah Teks Ini
• Pilih warna sesuai dengan kansei
words yang telah Anda pilih.
• Dapat dilihat di buku Tasteful Color
Combination oleh Naomi Kuno
(dibawakan oleh asisten)
• Browse Pallete
• Lakukan pencarian
berdasarkan kata kunci
yang diinginkan.
• Catat kode heksa atau
RGB dari pallete yang
dipilih.
• Minimum number of fonts
• Sans serif for content
• Proper text and text size
• Use of mixed capitalization
• Use standard fonts web
• Limit the use of different
colors for fonts
• Don’t minimized character
spacing
• Do not use blue for content
• Avoid coloring text in red or
green
• Contrast between text and
background
• Do not use moving or blinking
text
usabilitygeek.com/colour-user-experience-psychology
1 REM = 10 piksel Weight = ketebalan
• Preset Styles yang digunakan dalam merancang antarmuka
• Tentukanlah icon pack, palet warna, dan typeface yang
akan digunakan berdasarkan kansei word yang telah
Anda pilih.
• Buatlah guidelines untuk penggunaan typeface dan warna
• Contoh:
• http://www.mozilla.org/en-
US/styleguide/products/firefox-os/typeface/
• http://www.smashingmagazine.com/typography-
guidelines-and-references/
Gambar dan Ikon
• http://www.flickr.com/creativecommons/by-2.0/
• http://www.smashingmagazine.com/
Palet
• http://www.colourlovers.com/
Typeface
• https://www.adobe.com/misc/pdfs/sssheep_chptr3.pdf
• Lee S, Harada A, Stappers PJ. 2002. Pleasure with products: Design based on Kansei. Pleasure with products: Beyond usability. 219-229.
• Build a Color Scheme: The Fundamentals http://tympanus.net/codrops/2012/09/17/build-a-color-scheme-the-fundamentals
• Color Combination Tools http://spyrestudios.com/color-combination-tools/
• The Psychology of Fonts http://www.onextrapixel.com/2011/12/13/the-psychology-of-fonts/
• The Psychology of Fonts: Infographic http://visual.ly/psychology-fonts