Web Design dan Typography

29 posts / 0 new
Last post
Rudiansyah
Rudiansyah's picture
Offline
Last seen: 5 years 4 months ago
Joined: 2 Mar 2013 - 11:54
Points: 417
Web Design dan Typography

Siang agan2 dan agan2wati. Ane sempet diminta ngejelasin tentang typography di web design dan kenapa begitu pentingnya hal ini dalam ngedesign suatu website. Sebelumnya buat yang belum paham arti typography, ini penjelasannya:

Typography, atau tipografi, adalah ilmu yang mempelajari tentang seni dan desain huruf dan simbol dengan tujuan menentukan cara aplikasinya di media komunikasi visual melalui penataan layout, bentuk, ukuran dan sifatnya. Ini adalah agar pesan yang akan disampaikan sesuai dengan yang diharapkan.

Secara modern, tipografi berkaitan dengan penataan huruf pada media elektronik, baik dari segi tampilan maupun outputnya ke berbagai media cetak.

Sebelumnya, tipografi adalah hal umum di media cetak seperti majalah sampai kaos2. Tapi di dunia yang cepat berkembang ini, internet sudah menjadi salah satu media paling terkenal untuk berbagi informasi dan berita karena kecepatannya dan luasnya cakupannya. Disini, orang web design harus sedikit banyak "meminjam" ilmu graphic designer.

Dalam sebuah design web, yang pertama kali dilihat adalah tentunya designnya. Pengunjung yang datang ke sebuah website ingin matanya dimanja dengan tampilan yang bagus, cerah, menarik, cepat loadingnya, dll. Tapi tujuan utama pengunjung itu mampir ke website adalah karena dia penasaran akan apa isinya. Apa itu isi sebuah website, kalau bukan multimedia dan gambar, pastinya adalah teks.

Dan teks erat kaitannya dengan typeface dan font.

Ada 2 macam komunikasi: verbal dan non-verbal (tulisan). Dalam bahasa verbal, untuk menyampaikan informasi tepat sasaran dan efektif, gak mungkin kita teriak2 dan bentak2 untuk merayu orang melakukan sesuatu kan? Begitu juga dengan non-verbal. Karena komunikasi tulisan itu bisu, harus ada sesuatu yang bisa menyampaikan "emosi" itu ke sasaran. Inilah peran tipografi.

Tujuan mempelajari tipografi dalam web design bukan cuma agar tampilan website jadi bagus, tapi informasi berupa teks itu enak dibaca, dan juga enak dilihat. "Tapi selera orang terhadap font kan beda2". Iya benar, tapi gak ada orang yang mau baca artikel yang teksnya susah dibaca bukan?

Tipografi memegang peranan penting dalam segala hal yang berkenaan dengan penyampaian bahasa non-verbal (tulisan) dalam segala bentuk publikasi. Oleh karena itu, web designer harus tahy berapa ukuran teks yang sesuai dengan websitenya, efek yang dapat ditimbulkan dari bentuknya, emosi apa yang dapat dibangkitkan olehnya, dan masih banyak lagi. Tujuan dari semua ini adalah satu: agar pesan yang ingin disampaikan tepat tujuan.

Disini ane mau share sedikit bagaimana cara belajar tipografi dengan efisien dan cepat, namun tetap efektif:

Yang harus pertama kali dilakuin untuk belajar tipografi adalah belajar anatomi huruf. Sebagai contoh, agan gak bisa bilang orang itu cantik atau jelek sebelum ngeliat wajahnya kan? Sifat dari huruf adalah hal pertama yang harus dipelajari. Dengan mengetahui hal tersebut, agan bisa tahu unsur2 yang membentuknya dan informasi apa yang bagus ditulis dengannya.

Yang kedua adalah formatnya. Format akan memberikan efek pada tulisan. Jarak antar huruf, jumlah baris, dll adalah hal yang terekspos ke pembaca. Agar informasi mudah dibaca dan mudah dicerna, agan harus tahu format apa yang terbaik untuk tulisan apa, dan format apa yang bagus untuk tujuan lainnya. Format juga termasuk besar kecil tulisan.

Yang ketiga adalah publikasi. Ada benyak keluarga tulisan (typeface), dan setiap keluarga punya karakter unik. Dengan mengetahui "keluarga" mana yang cocok untuk tugas apa, citra yang disampaikan oleh tulisan akan jauh lebih efektif. Memperlajari poin ini memakan waktu yang lama karena banyaknya typeface dan "anak"nya yang butuh di riset.

Ini ada psychology behind typography dari http://makeuseof.com
http://cdn.makeuseof.com/wp-content/uploads/2014/08/psychology-of-typography-small.jpg[/embed]

5
Your rating: None Average: 5 (2 votes)
Rudiansyah
Rudiansyah's picture
Offline
Last seen: 5 years 4 months ago
Joined: 2 Mar 2013 - 11:54
Points: 417
Sumber: Web Development
5
Your rating: None Average: 5 (3 votes)
Elisa
Elisa's picture
Offline
Last seen: 4 years 6 days ago
Joined: 30 Apr 2013 - 12:54
Points: 244
bedanya font sama typeface

bedanya font sama typeface apa ya? sebagai bahasa non verbal, text memang pengaruh, tapi di web design gak cuma layout sama warna doang ya? tulisan di web mirip2 deh :/

0
No votes yet
Banuarto
Banuarto's picture
Offline
Last seen: 5 years 7 months ago
Joined: 4 Sep 2013 - 13:30
Points: 238
nice post... tp mungkin lebih

nice post... tp mungkin lebih banyak pengaruhnya di logo deh...

kebanyakan di web itu serif apa sans serif ya? pernah baca katanya judul sama teks artikel bagusan dibedain typeface/fontnya. dan maksimal 3 dlm 1 website. bener gak?

0
No votes yet
Junaidi
Junaidi's picture
Offline
Last seen: 4 years 6 months ago
Joined: 14 Mar 2013 - 09:01
Points: 520
teks artikel enakan tipe sans

http://alexpoole.info/wp-content/uploads/2010/02/serif_sansserif.gif[/embed]

teks artikel enakan tipe sans serif jd lebih enak bacanya.

Junaidi

0
No votes yet
Rudiansyah
Rudiansyah's picture
Offline
Last seen: 5 years 4 months ago
Joined: 2 Mar 2013 - 11:54
Points: 417
iya sans serif lebih cocok

iya sans serif lebih cocok buat isi artikel. tapi buat judul, pake serif juga bisa buat lebih menarik. pemakaian di logo memang paling banyak perannya kalo ngomongin typography, tapi karena logo itu pendek, saya kasih gambaran secara besar aja, yaitu bagaimana typography ini bisa berefek ke pembaca.

0
No votes yet
Banuarto
Banuarto's picture
Offline
Last seen: 5 years 7 months ago
Joined: 4 Sep 2013 - 13:30
Points: 238
kalo modern gimana? diliat

kalo modern gimana? diliat sekilas rada mirip sama sans serif.

0
No votes yet
Himawan
Himawan's picture
Offline
Last seen: 6 years 5 months ago
Joined: 9 Jul 2013 - 12:14
Points: 205
beda serif dan slab serif apa

beda serif dan slab serif apa ya? yang ane tahu serif itu kan pake ornamen dekorasi di ujung2 huruf. slab serif juga punya. sans serif dan modern juga mirip

0
No votes yet
Harianto
Harianto's picture
Offline
Last seen: 6 years 6 months ago
Joined: 5 Mar 2014 - 11:21
Points: 92
nice post pak... bintang 5

nice post pak... bintang 5

0
No votes yet
Elisa
Elisa's picture
Offline
Last seen: 4 years 6 days ago
Joined: 30 Apr 2013 - 12:54
Points: 244
mirip2 jadi bingung yang

mirip2 jadi bingung yang ngebedainnya apa :/

0
No votes yet
Junaidi
Junaidi's picture
Offline
Last seen: 4 years 6 months ago
Joined: 14 Mar 2013 - 09:01
Points: 520
tambahan dekorasi di

tambahan dekorasi di ujung2nya mbak. sama variasi ketebelannya aja. paling gak yang paling keliatan itu

Junaidi

0
No votes yet
Doni
Doni's picture
Offline
Last seen: 7 years 10 months ago
Joined: 11 Feb 2013 - 13:14
Points: 27
info yang bagus pak. saya

info yang bagus pak. saya setuju banget kalau tulisan itu berefek besar ke pembaca, terutama di artikel2 panjang. kalau digabungin sama ruang kosong yang digunakan dengan baik, saya yakin pembaca bisa tertarik walaupun tulisan itu biasa aja.

contohnya ya seperti baca majalah atau koran. atau mungkin lebih tepatnya novel. kalau pernah baca novel jaman dulu, tulisannya padet2 dan bukunya kecil. kalau dibandingin sama sekarang, novel banyak yang tulisannya lebih besar terus lebih banyak ruang kosongnya. ini bikin baca lebih enak.

gak sumpek, sakit mata dan pusing.

ini sepertinya berlaku juga buat website. sudah banyak contoh2nya kalo diperhatiin.

5
Your rating: None Average: 5 (1 vote)
Banuarto
Banuarto's picture
Offline
Last seen: 5 years 7 months ago
Joined: 4 Sep 2013 - 13:30
Points: 238
gak semua browser bisa

gak semua browser bisa nampilin font beda2. contohnya opera mini. #fyi

0
No votes yet
Rian
Rian's picture
Offline
Last seen: 4 years 7 months ago
Joined: 28 Feb 2013 - 10:12
Points: 324
karena memang khusus buat

karena memang khusus buat handphone. dan juga opera mini bisa di handphone2 lama juga jadi gak terlalu bagusin tampilan desain.

0
No votes yet
Banuarto
Banuarto's picture
Offline
Last seen: 5 years 7 months ago
Joined: 4 Sep 2013 - 13:30
Points: 238
tujuannya kan irit pulsa sama

tujuannya kan irit pulsa sama kenceng. buat browsing2 biasa opera mini lebih bagus dibanding browser bawaan.

0
No votes yet
Elisa
Elisa's picture
Offline
Last seen: 4 years 6 days ago
Joined: 30 Apr 2013 - 12:54
Points: 244
iya bener... opera mini

iya bener... opera mini nampilinnya 1 tipe font aja. paling italic atau bold. ukuran gak bisa beda2. itu gimana ya?

3
Your rating: None Average: 3 (1 vote)
Rudiansyah
Rudiansyah's picture
Offline
Last seen: 5 years 4 months ago
Joined: 2 Mar 2013 - 11:54
Points: 417
maksudnya begini, typography

maksudnya begini, typography di web design itu sangat berpengaruh ke bagaimana si pembaca bakal mandang itu artikel. sebagai contoh, coba nulis artikel di word pake font times new roman. terus ganti fontnya semua pake arial. apa ada perbedaan "feeling" ngebacanya? pasti ada.

spasi dan paragraf juga termasuk disini.

apapun yang diubah dari text, baik itu font, spasi, white space, dll, akan berefek ke gimana reaksi pengunjung website. dan terlebih lagi, bisa mendukung, atau merusak web design itu sendiri.

target setiap font itu berbeda2... misalnya, font modern lebih bagus buat website yang designnya lebih simpel dan artikelnya yang berbau hal2 "modern". sementara itu font helvetica misalnya, berkesan lebih otoriter dan lebih cocok buat pemerintahan.

font gak bisa tampil di setiap browser. seperti tadi di opera mini. ini karena tujuan dari browser itu adalah speed dan mobile. supaya kedua hal ini berhasil, mau gak mau, opera harus ngurangin beberapa aspek design... termasuk javascript, flash, plugins2 dan ajax.

5
Your rating: None Average: 5 (2 votes)
Agung
Agung's picture
Offline
Last seen: 4 years 7 months ago
Joined: 29 Apr 2014 - 14:28
Points: 384
nice!! rated.

nice!! rated.

font bagusnya yang enak buat dibaca, dalam arti gak bikin pegel mata kalo baca lama2. tapi kalo ngaruh ke psikologis si pembaca banyak juga ya ternyata... mungkin bisa ditambahin sama bro rudy kalo font bagusnya kontras sama background, dan buat artikel dan judul dibedain. judul bisa pake serif tapi artikel mending yang polos2 seperti sans serif atau modern juga oke sepertinya...

0
No votes yet
Rudiansyah
Rudiansyah's picture
Offline
Last seen: 5 years 4 months ago
Joined: 2 Mar 2013 - 11:54
Points: 417
thanks :) buat article body

thanks :) buat article body memang bagusan yang polos. banyak ornamen memang bikin bagus, tapi kalo numpuk adanya bisa ngerusak.

0
No votes yet
Kurniawan
Kurniawan's picture
Offline
Last seen: 4 years 8 months ago
Joined: 31 Jul 2013 - 11:49
Points: 317
font tipe sans serif bagus

font tipe sans serif bagus kayaknya. lebih enak diliat mata gak bikin pegel. kedua, yang modern. tapi yang ini agak bikin pegel soalnya biasanya lebih tipis. pernah ngeliat artikel pake font jenis ini, belum sampe bawah udh capek mata ngeliatnya.

0
No votes yet
Andriani
Andriani's picture
Offline
Last seen: 10 years 1 month ago
Joined: 19 Sep 2014 - 09:37
Points: 9
kalo font-nya di bold, italic

kalo font-nya di bold, italic atau underline itu ada bedanya gak disini?

0
No votes yet
Kurniawan
Kurniawan's picture
Offline
Last seen: 4 years 8 months ago
Joined: 31 Jul 2013 - 11:49
Points: 317
bold, italic dan underline,

bold, italic dan underline, dan juga strikethrough, subscript atau superscript bedanya cuma di styling dan posisinya aja. jenis font dan typefacenya tetep sama. biasanya tulisan dikasih style begini biar beda arti. misalnya bold buat penegasan, italic buat referensi bahasa asing, dll.

0
No votes yet
Junaidi
Junaidi's picture
Offline
Last seen: 4 years 6 months ago
Joined: 14 Mar 2013 - 09:01
Points: 520
banyak ornamen atau dekorasi

banyak ornamen atau dekorasi memang bikin pegel. makanya kalo diperhatiin, sekarang2 ini banyak design yang balik lagi ke basic, gaya minimalis. tapi ngutamain pewarnaan yang lebih kontras dibanding sebelum2nya...

Junaidi

0
No votes yet
Himawan
Himawan's picture
Offline
Last seen: 6 years 5 months ago
Joined: 9 Jul 2013 - 12:14
Points: 205
ada faktor hardware juga.

ada faktor hardware juga. skrg layar dan pendukungnya bisa nampilin warna yang bagus. desain mau gak mau harus bisa nonjol disana :)

0
No votes yet
Agung
Agung's picture
Offline
Last seen: 4 years 7 months ago
Joined: 29 Apr 2014 - 14:28
Points: 384
back to basic :)

back to basic :)

0
No votes yet
Junaidi
Junaidi's picture
Offline
Last seen: 4 years 6 months ago
Joined: 14 Mar 2013 - 09:01
Points: 520
lebih dari sisi marketing.

lebih dari sisi marketing. hardware bagus layar ok orang ngarepin performa bagus animasi banyak warna bagus.

jadi ambil sisi yang ngejual. trend banyak dateng dari andil pinter2nya mulut tukang sales.

Junaidi

0
No votes yet
Elisa
Elisa's picture
Offline
Last seen: 4 years 6 days ago
Joined: 30 Apr 2013 - 12:54
Points: 244
numpang nanya, kalo link2

numpang nanya, kalo link2 gitu boleh pake font beda gak sama font di artikel misalnya... terus kadang link ada yang dicoret gitu maksudnya apa ya?

0
No votes yet
Agung
Agung's picture
Offline
Last seen: 4 years 7 months ago
Joined: 29 Apr 2014 - 14:28
Points: 384
tergantung websitenya. kadang

tergantung websitenya. kadang link atau text yang dicoret artinya revisi. kadang bisa juga artinya bercandaan seperti "oops salah ngomong". kadang kalo link artinya link mati (broken link) atau website tujuan di link itu bukan website aman.

0
No votes yet
Herianto
Herianto's picture
Offline
Last seen: 6 years 5 months ago
Joined: 15 Apr 2014 - 13:21
Points: 126
trit bagus. 5 stars. thanks

trit bagus. 5 stars. thanks

0
No votes yet