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