Home Link

Home Link kasusnya adalah sebagai berikut : 

 Anda telah masuk ke halaman  artikel dan anda ingin kembali ke homepage ( halaman beranda ).
Penggunaan Input Feed

1. Gunakan ketika user sering masuk website melalui halaman lain  bukan dari halaman homepage. user harus dapat dengan mudah menemukan arah ke halaman depan website.

 2. Umumnya home link ke halaman depan website ada pada logo situs pada setiap halaman di website.

 3. Jika situs tidak memiliki logo, kemudian link ke halaman depan website dengan teks 'Home'

 Tujuan penggunaan Input Field

Hal ini telah menjadi standar dalam WebDesign, bahwa logo situs selalu dikaitkan dengan lokasi start yang aman bagi pengguna. Biasanya, ini adalah halaman depan situs, tetapi juga bisa menjadi halaman depan bagian dalam situs tersebut, atau beberapa lokasi start aman lainnya bagi pengguna.

Unknown

Desain Input Feedback


Input Feed kasusnya adalah sebagai berikut : 


Saat anda mendaftar atau register akun facebook  lalu saat anda meng-klik tombol daftar ternyata anda muncul peringatan agar anda mengisikan data email anda. peringatan yang muncul ini disebut "Input Feed".

Penggunaan Input Feed

 1.  Untuk memberikan Feedback kepada pengguna web saat ia  mengisi data atau 
     konten ke situs Anda.

 2.  Untuk memberitahu kepada pengguna web adanya kesalahan saat pengisian data. 

 3.  Untuk memberi tahu kepada pengguna web bahwa semua yang telah dilakukan 
     (pengisian data, informasi atau konten) adalah benar atau berhasil.


 Tujuan penggunaan Input Field

 Tujuan penggunaan "Input Feed" adalah untuk mengurangi kesalahan pengisian data atau konten di form yang disediakan. Teknisnya adalah  dengan mengkoreksi/memvalidasi data sesaat setelah user mengisi data.

 Jika data yang diisi oleh pengguna web tidak benar, maka "input feed" muncul menyampaikan pesan yang menjelaskan bagaimana memperbaiki data dan meminta pengguna web untuk mengisi kembali datanya. Adapun pesan tersebut harus menjelaskan bahwa:

 1.  Adanya kesalahan. tampilkan box berwarna terang misal merah dan letakan pada 
     posisi yang mudah dilihat mata pengguna web.

 2.  Di bagian mana kesalahan pengisian data terjadi. Hal ini dapat dilakukan dengan 
     menyoroti (meng-highlight) kolom informasi yang mengalami kesalahan  
     (dengan mengubah warna mereka).

 3.  Bagaimana kesalahan bisa diperbaiki. Memberikan informasi tentang apa yang 
     harus diisi agar data yang diisikan itu benar.


Desain visual dari input feedback harus sesuai dengan pesan yang ingin Anda berikan. Jika pengisian data benar, maka tampilkan box berwarna hijau agar si pengguna tahu. Jika pesan biasa saja, warna yang digunakan adalah kuning. dan Jika hal yang salah,maka gunakan warna merah.

Input Feedback

Unknown

Navigasi Top Horizontal

Navigasi Top horizontal merupakan Pattern desain navigasi yang paling populer dan banyak digunakan. biasanya terletak di bagian paling atas atau berada di bawah header situs dan terlihat di semua halaman web dari sebuah situs.


Ciri umum dari Navigasi Top Horizontal 

  • Item navigasi bisa berupa teks hyperlink, Button, atau tab.
  • Navigasi horizontal sering ditempatkan berbatasan langsung dengan logo situs.
  • Umumnya terletak di bagian atas dari sebuah web. 


Kapan menggununakan Navigasi Top Horizontal ?

Navigasi Top horizontal sangat cocok untuk situs yang hanya menampilkan 5-12 item (berupa teks link yang menghubungkan ke halaman web lainnya) di menu utama. Namun, jika dikombinasikan dengan dropdown sub-navigasi, Navigasi top horizontal dapat memuat lebih banyak item.


Challenge Menggunakan Top Horizontal Bar 

Kelemahan  navigasi top horizontal adalah tidak bisa memuat link terlalu banyak Anda harus menyertakan sub-navigasi agar bisa memuat lebih banyak link.

Contoh dan Design Pattern 



Template dan Tools

Unknown

Vertical Rhytm Basic

Definisi Vertical Rhythm 

Vertical rhythm, dalam bahasa Indonesia berarti “Ritme vertikal“,  bisa juga saya sebut sebagai “penyusunan unsur halaman sehingga setiap baris teks menempati suatu tinggi yang sama, atau kelipatannya.”
Teknik pembuatannya sangat sederhana, kita hanya membuat sebuah Artikel sederhana terdiri dari Judul dan isi artikel, lalu mengatur standar ukuran font,  lebar margin, ukuran line-height dan menentukan ukuran font dan line height khusus untuk elemen judul dan elemen isi artikel.

Markup HTML

Buatlah sebuah artikel sederhana terdiri dari judul dan isi artikel. judul artikel dituliskan pada tag <h2> dan <h2> sedangkan tag isi artikel dituliskan pada tag <p>. Seperti berikut :

<h1>Heading 1</h1>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

<h2>Heading 2</h2>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

CSS

Pertama, kita akan menulis setingan awal yang mengatur tampilan page yang kita buat.

html {
  font-size: 62.5%;
}

body {
  width: 45em;
  margin: 0 auto;
  font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
  font-size: 2em;
  font-weight: 200;
  line-height: 1.5em;
}

 width: 45em;  fungsinya untuk mengatur lebar background yang diisi text.  margin:0 auto; membuat teks tetap berada ditengah meskipun lebar browser atau screen berubah. font-family: 'helvetica Neue', helvetica, arial,sans-serif;font-size:2em; font-weight:200;  kita menetapkan setingan default font yang dipakai adalah Helvetica dengan ukuran 2em dan ketebalan normal.  line-height:1.5em; artinya jarak antar baris tulisan  adalah 1.5 em.

Tugas selanjutnya adalah menentukan ukuran font, margin dan line height khusus untuk elemen judul dan elemen oleh tag <p>, <h1> dan <h2>.

p {
  margin: 1.5em 0;
}

h1 {
  font-size: 1.6em;
  line-height: 1.25em;
}

h2 {
  font-size: 1.3em;
  line-height: 1.15384em;
}

Dari style di atas, p {margin: 1.5em 0;} ini artinya margin atas dan margin bawah tag <p> memiliki spasi 1.5 em. Pemberian style font size dan line-height pada tag <h1> dan <h2>  adalah agar judul teks menjadi menjadi lebih besar dan kontras dibandingkan teks paragraf. 

 Berikut ini demo dari kode yang telah kita tulis :


See the Pen Vertical Rhythm by Derek Wheelden (@frxnz) on CodePen

Unknown

Membuat Logo

Mendesign  sebuah  logo  merupakan  salah-satu  keunggulan  dari  program  berbasis vector. Dengan membuat logo dalam bentuk vector, maka seorang klien tidak perlu khawatir akan hilangnya resolusi gambar bila ukuran [size] logo tersebut diperbesar, bahkan  hingga  100x  lipat  pun  dari  ukuran  semula.  Pada tutorial  ini  berikut  akan diperlihatkan beberapa trik dan teori dasar dalam pembuatan sebuah logo perusahaan. 

 <image>

 1. Penggambaran konsep logo yang akan dibuat 
Hal pertama yang harus dilakukan adalah membuat konsep logo dalam bentuk gambar pada sehelai kertas. Kemudian  sesuaikan konsep dasar penggambaran logo dengan bidang usaha atau organisasiyang akan dibuatkan logonya. 
Hal  ini  sangat  penting  sebagai  pembentukan  awal  corporate  image  sebuah perusahaan  atau  institusi yang  terkait.  Pada  tutorial  ini,  perusahaan  yang  akan dibuatkan  logonya  adalah  produsen  penghasil madu murni,  dan  sebagai pembentukan  branding-nya,  maka  digunakan  lah  “lebah  madu” sebagai Logo Shapenya,  dan  text  “Honey  Farm” sebagai  nama  perusahaan,  sekaligus Logo Type-nya.

 <image> 

 Setelah  gambar  logo  yang  disesuaikan  dengan  konsep  selesai  digambar.  Langkah berikutnya  adalah men-scan  gambar  tersebut,  lalu  merubahnya  kedalam  format jpeg/JPG didalam komputer. 

 2. Mentracing gambar logo dengan Illustrator 
Kemudian lakukan teknik  drag and drophasil scan sketsa gambar logo kedalam area workspace adobe illustrator  [atau  bisa  juga  dengan  perintah  seperti file>import>nama_gambar.JPG] untuk memulai proses tracing image.

 <image> 

 Lalu gunakan pen tool untuk untuk membuat path. Path yang harus dibuat antara lain sekeliling kepala, tubuh, dan kedua sayap gambar sketsa logo (sesuai dengan sketsa awal gambar diatas). 
<image>

 Untuk bagian antena bisa mengunakan kombinasi pen tools dengan stroke yang lebih tebal dan rectangel tool. 

 <image><image>
<image><image>
<image><image>

 Setelah mengikuti langkah-langkah pembuatan logo shape diatas, tahapan selanjutnya adalah membuat logotype (tulisan dari nama perusahaan) 

 3. Membuat logotype dengan pemilihan huruf (Tipografi)
Banyaknya jumlah font pada komputer kadang membuat seorang designer kewalahan dalam menentukan pilihan jenis huruf. Salah-satu cara untuk memahami karekteristik huruf  yang  tepat  pada  sebuah  publikasi  adalah  dengan  mempelajari  tipografi.  
Logo type ”Honey Farm” pada tutorial ini akan berkarakteristik ”ceria”, maka digunakanlah font yang menggambarkan keceriaan. Seperti dibawah ini: 

 <image>

 Kembali kepada tutorial pembuatan logo.................... 
<image>

 Setelah menentukan  logotypehuruf (dengan sedikit penerapan tipografi), gunakanperintah “expand” pada text agar tidak terjadi kesalahan “missing font”. Lalu berikan warna yang sesuai dengan image perusahaan. Berikut hasil pembuatan logo:

 <image>

 Selesailah  sudah  pembuatan  logo  perusahaan  “Honey  Farm”  yang  sesuai  dengan konsep  awal,  untuk  memberikan  sebuah  image  tertentu  yang  tepat  bagi  sebuah perusahaan. Selamat mencoba (alfa) 

Unknown

TIPOGRAFI


Definisi Tipografi

 Pengertian tipografi menurut buku ManualeTypographicum adalah :

 “Typography can defined a art of selected right type printing in accordance with specific purpose ; of so arranging the letter, distributing the space and controlling the type as to aid maximum the reader's”
Dari pengertian diatas, memberikan penjelasan bahwa Tipografi merupakan seni memilih dan menata huruf dengan pengaturan penyebarannya pada ruang-ruang yang tersedia, untuk menciptakan kesan khusus, sehingga akan menolong pembaca untuk mendapatkan kenyamanan membaca semaksimal mungkin.

 Sejarah Tipografi
Sebagai bagian dari kebudayaan manusia, huruf tak pernah lepas dari kehidupan keseharian. Hampir setiap bangsa di dunia menggunakannya sebagai sarana komunikasi. Sejarah perkembangan tipografi dimulai dari
penggunaan Pictograph. Bentuk bahasa ini antara lain dipergunakan oleh bangsa Viking Norwegia dan Indian Sioux.

 Di Mesir berkembang jenis huruf Hieratia, yang terkenal dengan nama Hieroglyphe pada sekitar abad 1300 SM. Bentuk tipografi ini merupakan akar dari bentuk Demotia, yang mulai ditulis dengan menggunakan pena 
khusus. Bentuk tipografi tersebut akhirnya berkembang sampai di Kreta, lalu menjalar ke Yunani dan akhirnya menyebar keseluruh Eropa.

 Puncak perkembangan tipografi, terjadi kurang lebih pada abad ke-8 SM di Roma saat orang Romawi mulai membentuk kekuasaannya. Karena bangsa Romawi tidak memiliki sistem tulisan sendiri, mereka mempelajari 
sistem tulisan Etruska yang merupakan penduduk asli Italia serta menyempurnakannya sehingga terbentuk huruf-huruf Romawi. 

 Perkembangan tipgrafi saat ini mengalami perkembangan dari fase penciptaan dengan tangan (hand drawn) hingga mengalami komputerisasi. Fase komputerisasi membuat penggunaan tipografi menjadi lebih mudah 
dan dalam waktu yang lebih cepat dengan jenis pilihan huruf yang ratusan jumlahnya.

 Beberapa jenis huruf berdasarkan klasifikasi yang dilakukan oleh James Craig : 

 1. Roman
Ciri dari huruf ini adalah memiliki sirip/kaki/serifyang berbentuk lancip pada ujungnya. Huruf 
Roman memiliki ketebalan dan ketipisan yang kontras pada garis-garis hurufnya. Kesan yang 
ditimbulkan adalah klasik, anggun, lemah gemulai dan feminin.

 2. Egyptian
Adalah jenis huruf yang memiliki ciri kaki/sirip/serif yang berbentuk persegi seperti papan dengan ketebalan yang sama atau hampir sama. Kesan yang ditimbulakn adalah kokh, kuat, kekar dan stabil.

 3. Sans Serif
Pengertian San Serif adalah tanpa sirip/serif, jadi huruf jenis ini tidak memiliki sirip pada ujung 
hurufnya dan memiliki ketebalan huruf yang sama atau hampir sama. Kesan yang ditimbulkan 
oleh huruf jenis ini adalah modern, kontemporer dan efisien.

 4. Script
Huruf Script menyerupai goresan tangan yang dikerjakan dengan pena, kuas atau pensil tajam 
dan biasanya miring ke kanan. Kesan yang ditimbulkannya adalah sifast pribadi dan akrab.

 5. Miscellaneous
Huruf jenis ini merupakan pengembangan dari bentuk-bentuk yang sudah ada. Ditambah hiasan dan ornamen, atau garis-garis dekoratif. Kesan yang dimiliki adalah dekoratif dan ornamental.

Unknown

Bentuk

Definisi Bentuk

 Pengertian bentuk menurut Leksikon Grafika adalah macam rupa atau wujud sesuatu, seperti bundar elips, bulat segi empat dan lain sebagainya. Dari definisi tersebut dapat diuraikan bahwa bentuk merupakan wujud rupa sesuatu, biasa berupa segi empat, segi tiga, bundar, elip dsb. 

 Pada proses perancangan logo, bentuk menempati posisi yang tidak kalah penting dibanding elemen-elemen lainnya, mengingat bentuk-bentuk geometris biasa merupakan simbol yang membawa nilai emosional tertentu. Hal tersebut biasa dipahami, karena pada bentuk atau rupa mempunyai muatan kesan yang kasat mata. 

 Seperti yang diungkapkan Plato, bahwa rupa atau bentuk merupakan bahasa dunia yang tidak dirintangi oleh perbedaan-perbedaan seperti terdapat dalam bahasa kata-kata. Namun teori Plato tersebut tidaklah mesti berlaku semestinya. 

 Ada aspek lain yang mengakibatkan bahasa bentuk tidak selalu efektif. Seperti penerapan bentuk-bentuk internasional dengan target sasaran tradisional atau sebaliknya. Dengan kata lain, bila target sasaran tidak terbiasa dengan bahasa kasat mata tradisional, pergunakan bahasa kasat mata internasional demikian 
pula sebaliknya. 

 Sebagai contoh adalah bila kita merancang logo armada angkatan bersenjata Republik Dominika, kurang lazim bila kita memilih bentuk keris atau mandau sebagai elemen penunjang dalam logo tersebut, karena bentuk keris dan mandau kurang atau bahkan tidak dikenal oleh rakyat Dominika.

 TEORI frame of reference dan field of reference
Teori tentang frame of reference (kerangka referensi) dan field of reference (lapangan pengalaman) yang menjelaskan bahwa penerimaaan suatu bentuk Logo, dipengaruhi oleh beberapa aspek yakni, panca indra, pikiran serta ingatan. 

 Jadi seperti logo bentuk Keris (misalnya) akan lebih efektif dan komunikatif bila ditujukan pada angkatan bersenjata Republik Indonesia, dan tidak dengan Republik Dominika karena mereka tidak memiliki frame of reference dan field of reference tentang keris atau mandau dalam ingatan mereka.

 2 contoh bentuk dasar dan asosiasi yang ditimbulkan Logo berdasarkan buku Handbook of Design & Devices tulisan Clarence P. Hornung. 

 1. Segitiga, merupakan lambang dari konsep Trinitas. Sebuah konsep religius yang mendasarkan pada tiga unsur alam semesta, yaitu Tuhan, manusia dan alam. 
Selain itu segitiga merupakan perwujudan dari konsep keluarga yakni ayah, ibu dan anak. Dalam dunia metafisika segitiga merupakan lambang dari raga, pikran dan jiwa. 
Sedangkan pada kebudayaan Mesir, segitiga digunakan sebagai simbol feminitas dan dalam huruf Hieroglyps segitiga menggambarkan bulan. 

 2. Yin Yang, merupakan bentuk yang termasuk dalam jenis Monad, yakni bentuk yang terdiri dari figure geometris bulat yang terbagi oleh dua bentuk bersinggungan dengan masing-masing titik pusat yang berhadapan. 
Di China bentuk seperti ini disebut Yin Yang, di Jeapang disebut Futatsu Tomoe sedangkan orang Korea menyebutnya Tah Gook. 
Yin Yang merupakan gambaran dua prinsip alam, Yang melambangkan kecerahan,Yin melambangkan kegelapan, Yang melambangkan nirwana, Yin melambangkan dunia, Yang sebagai matahari, Yin sebagai bulan, Yang memiliki posisi aktif, maskulin, Yin pasif, feminin. Kesemuanya itu melambangkan prinsip dasar kehidupan, yakni keseimbangan

Unknown

Langganan: Postingan (Atom)