Grafis, warna, typeface
-
Upload
weni-handayani -
Category
Education
-
view
86 -
download
4
Transcript of Grafis, warna, typeface
(感性)
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