7 Tips Desain Web Untuk Kenyamanan Pengunjung (UX)

Ketika anda pertama kali mengunjungi sebuah situs, apa yang pertama kali anda lihat dan nilai?
Desain!. Yaa, desain memberikan kesan pertama pada pengunjung. Baik buruknya desain sebuah blog di mata pengunjung menjadi aspek penting yang harus anda perhatikan. Jika tidak, bisa jadi ketika pengunjung anda baru mengakses blog anda, sepersekian detik kemudian langsung mengklik icon x di pojok tab browser karena desain yang tidak menarik. Baik buruknya desain blog adalah cermin dari konten yang berkualitas.

Desain Ramah Pengguna (User-friendly)Desain Ramah Pengguna (User-friendly)

Oleh karena itu, Desain yang catchy harus anda terapkan di blog anda. Desain anda harus memikat dan memberi kenyamanan kepada pengunjung sehingga mereka ingin balik lagi nantinya. Namun, yang jadi masalah adalah bagaimana membuat desain blog yang membuat pengunjung nyaman. Ingat loh : Kenyamanan pengunjung. Karena desain blog yang keren juga belum tentu membuat pengunjung anda nyaman. Nah, untuk hal ini saya mempunyai beberapa tips yang semoga bermanfaat bagi anda.

Berikut ini adalah beberapa hal yang harus anda ingat dan jadikan acuan dalam mendesain blog anda :

1. Keserasian

Hal pertama sebelum mendesain blog adalah mengkaji desain yang bagaimana yang paling cocok untuk diterapkan di blog anda. Jangan sampai salah. Sebaiknya anda mencari referensi dulu desain yang seperti apa yang cocok dengan topik blog anda. Jika blog anda tentang travel, sebaiknya anda kunjungi dulu web/blog terkenal yang membahas travel. sekedar untuk referensi.

Poin ini sebaiknya diingat selama anda melakukan langkah-langkah desain blog. Setiap yang tampil di blog anda harus sesuai dengan topik blog anda, atau setidaknya tidak mengacau (OOT).

2. Kebergunaan

Dalam mendesain blog, anda harus memperhatikan widget-widget, Call to action, link dan apapun yang tertampil di blog anda. Kemudian, bayangkanlah anda menjadi seorang pengunjung blog yang sangat awam. Lalu, pikirkan apa yang akan pengunjung rasakan ketika melihat blog anda. Apakah mereka akan merasa risih atau merasa terbantu?

Pikirkanlah apakah widget ini diperlukan pengunjung anda? apakah link ini diperlukan oleh pengunjung blog anda? Jika anda ragu atas pertimbangan anda sendiri, tak ada salahnya melakukan survey & voting. Intinya, segala sesuatu yang tampil di blog anda harus memiliki nilai manfaat bagi pengunjung anda. Jadi, hilangkan hal-hal yang tidak penting.

3. Efektifitas & kesederhanaan

Setelah anda mengerti prinsip kebergunaan, maka anda tahu widget, link, dan apa saja yang harus ditampilkan di blog anda. Itu belum selesai. Sekarang, yang harus anda pikirkan adalah apa yang pengunjung rasakan ketika menggunakan/mengakses semua itu. Umumnya, orang suka blog yang tidak bertele-tele dan sederhana. Jadi, tampilkan fasilitas di blog anda dengan seefektif dan sesederhana mungkin. Misalkan mengoreksi anchor link atau kalimat call to action menjadi 3-5 kata saja, tapi tidak menghilangkan arti pokoknya. Semakin padat dan jelas, semakin enak dibaca. Selain itu, kefektifan dan kesederhanaan juga menghemat tenaga anda.

4. Navigasi

Navigasi adalah arahan, petunjuk atau jalan di sebuah blog. Begitulah mungkin singkatnya. Buatlah navigasi yang mudah di blog anda. Desain anda mungkin sudah disenangi karena 3 poin diatas. Tapi ketika pengunjung mengunjungi sebuah halaman di blog anda, belum tentu mereka tetap suka jika navigasi blog anda susah.

Contoh cara membuat navigasi yang mudah misalnya dengan membuat menu utama, memasan, peta situs (site map), artikel terkait, dan lain-lain.

Manjakanlah pengunjung anda dengan navigasi yang mudah.

5. Ketertarikan dan Penyegar Mata

Image by mkhmarketingImage by mkhmarketing

Poin ini adalah inti dalam seni mendesain. Tujuan mendesain adalah membuat orang tertarik. Dan, dalam mendesain blog, pikatlah hati pengunjung dengan desain anda yang WOW. Nah, berikut ini adalah 4 elemen desain web yang paling berpengaruh :

a. Gambar & Ikon

Walaupun sudah ada kode CSS untuk manipulasi desain, jangan pernah remehkan gambar!.
Desain tanpa gambar itu bagaikan sayur tanpa garam. Gambar yang keren akan membuat pengunjung anda betah. Masalahnya mungkin ada pada pembuatan gambar itu. Saya tahu, tidak semua orang bisa menggambar apalagi pakai komputer. Tapi, selalu ada jalan keluar di setiap masalah. Sekarang sudah sudah banyak blog-blog yang membahas desain grafis misal : http://ilmugrafis.com.

Bagaimana dengan ikon ? Tulis saja keyword “Download Iconset for web” di google. Anda akan menemukan ratusan website penyedia icon yang mengratiskan ikonnya.

b. Warna

Kekuatan warna tidak diragukan lagi dalam desain. Penyeleksian dan penggabungan warna dapat menghasilkan desain yang bagus. Saran saya, pakailah warna-warna yang cerah untuk desain blog anda. Juga, Bedakan teks tertentu dalam sebuah artikel dengan warna. Mata pengunjung akan terhibur dengan ini. Tapi ingat, jangan pakai warna-warna yang terlihat “alay”.

Lakukan Riset pada kode heksadesimal atau perpaduan warna red green blue (RGB) untuk menemukan warna-warna yang keren.

c. Font

Font memiliki posisi penting dalam membuat pengunjung nyaman saat membaca sesuatu di blog anda. Gunakan font-font catchy terutama pada bagian teks Call to action, kepala konten, dan paragraf isi konten anda. Kunjungi layanan Google Font untuk menemukan font-font yang keren.

Hal-hal yang perlu diperhatikan dalam mendesain font dengan kode CSS adalah pada properties Line Height (tinggi baris), font-family, dan font-size. untuk line height, gunakan minimal ukuran 1,3 untuk konten (line-height:1.3;). Font family adalah jenis font yang anda gunakan. Dan untuk font-size, gunakan minimal ukuran 15px untuk konten (font-size:15px;).

Perhatikan juga warna font. Rekomendasi saya, gunakan kode warna #333 – #777 (Hitam keabu-abuan) untuk font konten. Font dengan warna hitam yang terlalu kuat menurut saya kurang catchy.

d. Margin dan Padding

Naah, ini yang kadang dilupakan oleh para blogger dalam mendesain blognya. Margin dan padding berfungsi untuk memberi jarak elemen satu dengan yang lainnya. Margin dan padding akan membuat web terlihat rapi dan tidak terlalu membingungkan, bejibun dan acak-acakan.

Gunakan minimal ukuran 3px untuk margin maupun padding di tiap elemen web.

6. Bahasa

Dalam setiap teks Call to Action atau teks apapun di blog anda, tulislah dengan gaya sendiri yang santai, luwes dan mudah dimengerti. Hindari pemakaian kata-kata yang tidak awam di mata pengunjung. Apalagi ketika sedang ada suatu event di blog anda yang mengharuskan pengunjung berpartisipasi dan mengikuti langkah-langkahnya.

Image credit by Rodney Martin

Ingatlah, bahwa tidak semua pengunjung sangat mengerti dengan web atau komputer. Kadang-kadang bahkan ada yang hampir tidak tahu bagaimana untuk kembali ke halaman sebelumnya.

7. Desain Responsive

Secara singkat Desain Responsive adalah sifat desain sebuah situs dimana ketika diakses di perangkat apapun (PC/NoteBook/IPad/SmartPhone/HP), akan menyesuaikan dengan ukuran layar pada perangkat. Di era tablet dan SmartPhone ini, desain sebuah web yang responsive sangat diperlukan agar blog anda tetap menarik pada perangkat apapun yang pengunjung pakai.

Untuk Blog jenis blogspot, Desain responsive itu sudah ada fiturnya. Walaupun dengan tampilan yang sangat sederhana. Sedangkan, untuk wordpress ataupun web yang tidak memakai CMS, harus mengatur sendiri.

 

Sumber : http://www.tutorial-webdesign.com/7-tips-desain-web-untuk-kenyamanan-pengunjung-ux/

Leave a Comment

Javascript

Nah, sekarang tiba saatnya kita belajar tentang bahasa pemrograman web yang sebenarnya, yaitu javascript.

Sejarah
Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa yang sekarang disebut JavaScript ini dulunya dinamai “LiveScript” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2 yang sangat populer pada saat itu. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java”) pada masa itu, maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser milik mereka yaitu Internet Explorer 3. JavaScript sendiri merupakan modifikasi dari bahasa pemrograman C++ dengan pola penulisan yang lebih sederhana dari bahasa pemrograman C++.

Pengertian
JavaScript adalah bahasa pemrograman yang khusus untuk halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.

Misalnya, jam ditampilkan pada halaman yang update sendiri untuk menunjukkan waktu saat ini pada komputer pengguna. Desain JavaScript dipengaruhi oleh banyak bahasa pemrograman, termasuk C, tetapi dimaksudkan untuk lebih digunakan oleh non-programmer. JavaScript tidak didasarkan pada atau terkait ke Java, ini adalah kesalahpahaman umum. JavaScript seringkali disertakan dalam file HTML atau link dari file HTML dan dijalankan secara lokal oleh web browser. Ini berarti bahwa server bebas untuk mengerjakan sesuatu yang lain daripada pemrosesan instruksi untuk setiap klien. Hal ini telah membuat JavaScript pilihan yang lebih populer daripada bahasa yang memerlukan server untuk melakukan pengolahan.

Penggunaan Javascript

1. Penulisan Javascript
Javascript biasanya di tulis dalam bentuk fungsi yang di taruh pada tag<head> yang di awalin dengan tag  <script type=”text/javasscript”>………..</script>.
2. Javascript pada bagian head

               biasanya cript yang diletakan pada bagian head akan selalu di jalankan terlebih dahulu.
 contohnya:
    <html>
    <head>
         <script type=”text/jacascript”>
         ………………..
        </script>
    </head>
    </html>
  3.Javascript pada tag body
          biasanya javascript akan di load/dijalankan ketika sudah mencapai halaman body,jadi harus melewati halaman head terlebih dahulu.
contohnya:
  <html>
    <head>
       <body>
         <script type=”text/jacascript”>
         ………………..
        </script>
        </body>
    </head>
    </html>
Catatan: dalam penulisan javascript haruslah di perhatikan karena javascript sangatlah sensitif seperti  bahasa pemrograman yaitu C++.Jadi huruf besar dan huruf kecil sangatlah berpengaruh terhadap javascript.

 

Sumber : http://upyes.wordpress.com/2013/02/01/pengertian-javascript/

http://javascriptsyell.blogspot.com/2009/01/javascript.html

http://myartikelupdate.blogspot.com/2012/10/penggunaan-javascript.html

Leave a Comment

CSS (Cascading Style Sheets)

Setelah mengenal HTML. Sekarang kita akan lanjutkan ke CSS.

Cascading Style Sheet atau CSS adalah sebuah pemrogamaran atau boleh dibilang script yang mengendalikan beberapa komponen (tag html) dalam sebuah website sehingga tampilan akan menjadi lebih terstruktur dan seragam. Ada tiga jenis cara dalam penggunaan CSS ini, yaitu:

  1. External Style Sheet
  2. Internal Style Sheet
  3. Inline Style Sheet

Dalam artikel kali ini akan dibahas satu-persatu.

External Style Sheet

Adalah CSS yang dibuat dalam file terpisah dengan ekstensi file .css. Untuk memanggilnya menggunakan script html yang disisipkan antara tag head sebagai berikut:

<link rel="stylesheet" type="text/css" href="ditektori/filecss.css" />

Pada bagian href tersebut tinggal diisi mengarah ke direktori dimana Anda menempatkan file cssnya. Penggunaan sistem embeding css ini sangat disarankan karena memang banyak kelebihan yaitu mudah untuk melakukan pengeditan, mengatur semantik dan praktis terkumpul dari satu file.

Internal Style Sheet

Adalah cara embeding css dengan menulis langsung di dalam file html yang ingin kita atus tampilannya. Penulisan ini disisipkan diantara tag head juga dengan diapit oleh tag style. Berikut ini contohnya:

<style type="text/css">
body{
background:#cccccc;
font-family:Arial;
}
</style>

Inline Style Sheet

Adalah penulisan script css langsung pada tag html dengan menambahkan style di dalamnya. Contoh:

<p style="font-size:20px;">Tulisan yang di atur </p>

Dua cara terakhir ini tidak disarankan digunakan karena ribet dan memperbesar file setiap html anda sekaligus harus menulis di beberapa tempat sekaligus, kecuali memang sangat darurat. Darurat disini berarti memang tampilan segera dibutuhkan oleh pengguna saat itu sedangkan anda sedang membuka fie itu dan tidak sempat membuka file css karena keterbatasan koneksi misalnya.
Namun penggunaan external css akan memudahkan Anda di waktu kedepan dalam hal update dan editing.

Sumber : http://bptik.unnes.ac.id/artikel/perkenalan-dasar-tentang-css/

Leave a Comment

Tag pada HTML

Setelah di postingan sebelumnya kita membahas tentang pengertian HTML, sekarang kita akan membahas tentang tag-tag yang ada di HTML. Tag HTML adalah sebuah kode perintah yang digunakan untuk membuat sebuah website.

Langsung saja ini adalah tag-tag dalam HTML.

Tag Utama
Tag 
Atribut 
Deskripsi 
<html></html>
Baris paling atas dari setiap file HTML
<head></head>
Informasi umum dari sebuah halaman web
<title></title>
Judul halaman. Terdapat pada head
<body></body>
Background, bgcolor, bgsound, font, link, alink, vlink, topmargin, leftmargin, marginheight, marginwidth
Settingan atribut untuk seluruh dokumen
Modifikasi Teks
Tag 
Deskripsi 
Contoh 
<b></b>
Teks tebal
Teks tebal
<i> </i>
Teks miring
Teks miring
<u> </u>
Teks garis bawah
Teks garis bawah
<h1></h1>
Header 1
Header 1
<h2></h2>
Header 2
Header 2
<h3> </h3>
Header 3
Header 3
<h4></h4>
Header 4
Header 4
<h5></h5>
Header 5
Header 5
<h6></h6>
Header 6
Header 6
<sub></sub>
Subscript
Subscript
<sup></sup>
Superscript
Superscript
Font 
Tag 
Atribut 
Deskripsi 
<font></font>
Color, size, name
Mengubah gaya suatu huruf
Links
Tag 
Atribut 
Deskripsi 
<a> </a>
Href, target, style, class, name, id
Membuat link ke dokumen atau situs lainnya
Gambar
Tag
Atribut
Deskripsi
<img>
Src, alt, name, border, height, width
Menampilkan sebuah gambar
Formatting
Tag 
Deskripsi 
Contoh 
<blockquote></blockquote>
Digunakan untuk mengatur text dan gambar dalam suatu tag
Contoh text in a block quote format ( “ “ )
<ol></ol>
Ordered List (digunakan dengan <li>)
1. Item 1
<ul></ul>
Unordered List (digunakan dengan <li>)
• Item 1
<li>
Elemen List
<dd></dd>
Definition List
<dt>
Definition Term
<dd>
Definition Description
<p></p>
Paragraf
<br>
Ganti baris
<hr>
Garis horizonta
<center></center>
Menengahkan elemen
Tabel
Tag 
Deskripsi 
Contoh 
<table></table>
Border, cellpadding, cellspacing, width, height, name, id, title, bgcolor, background, align, valign
Mengatur semua elemen table
<tr></tr>
Height, bgcolor, background, align, valign, title
Membuat baris baru
<td></td>
Height, width, bgcolor, background, align, valign, title, colspan, rowspan
Membuat kolom
<th></th>
Height, width, bgcolor, background, align, valign, title, colspan, rowspan
Header(kepala tabel). Otomatis ke tengah dan tebal
<tbody></tbody>
Height, width, align, valign, bgcolor, background
Format yang berlaku bagi cell yang diapit tag
<colgroup></colgroup>
Height, width, align, valign, bgcolor, background, colspan
Format yang berlaku bagi kolom
Form
Tag 
Deskripsi 
Contoh 
<form></form>
Method, action, name, enctype
Mengatur elemen dari form
<input type=>
Text, password, hidden, radio, checkbox, submit, image, reset
Variasi dari tipe elemen input dalam form
<select></select>
Name, size
Membuat combo-box. Digunakan bersama dengan option
<option>
Selected, name, value
<textarea></textarea>
Name, rows, cols, wrap
Membuat Text Area untuk input text dengan length yang lebih besar dari input text.
 
Itulah beberapa tag HTML yang biasa digunakan sehari-hari. Semoga bermanfaat.

Leave a Comment

Mari Belajar HTML (Intro)

Apa itu HTML ?

HTML adalah kependekan dari Hypertext Markup Language , Menurut Bahasa bisa dikategorikan sebagai berikut :

  • Hypertext berarti kata atau frase tertulis non- sekuensial yang memiliki percabangan dengan bermacam pilihan yang akan menjadikan bacaan yang lebih menarik pada layar interaktif.
  • Markup Language adalah bahasa yang mengkombinasikan antara teks (Hypertext) dengan informasi yang hendak ditampilkan.

Sedangkan Pengertian HTML  menurut istilah  merupakan bahasa yang bersifat statis yang digunakan sebagai standart pembangun halaman web, berfungsi untuk menampilkan tampilan wujud yang terintegrasi dan ditulis didalam format ASCII, bahasa ini bermula dari SGML (Standard Generalized Markup Language) yang biasa digunakan di dunia penerbitan dan percetakan. bahasa ini pertama kali dibuat oleh Caillau TIM dengan Berners-lee rober.

Bahasa HTML biasanya diintruksikan dengan kode yang diberi nama TAGS, berawalan (<) dan diakhiri dengan (>), misalnya paragraf, tanda <p> berarti pembuka bahwa perintah paragraf aktif, sedangkan</p> adalah penutup dari perintah paragraf yang diaktifkan tadi.

Fungsi HTML sendiri bisa digunakan untuk mengintegrasikan sebuah gambar dengan tulisan, membuat link, integrasi berkas suara dan rekaman video, bahasa HTML juga memungkinkan kita untuk mengedit tampilan atau berkas yang hendak kita kirimkan melalui media online, seperti menentukan besar kecilnya kelompok kata yang hendak digunakan sebagai judul,Heading dll, membuat tulisan miring, cetak tebal hingga menentukan karakter-karakter tertentu.

Sumber : https://atcontent.com/Publication/879094867699999fz.text/-/PENGERTIAN-HTML-DAN-FUNGSINYA

Leave a Comment

Hello world!

Selamat datang di blog.ugm.ac.id. Ngebloglah dan curahkan pikiran anda disini. Silahkan menggunakan fasilitas ini dengan penuh tanggung jawab.

Admin blog akan melakukan peringatan apabila ada abusement/pelanggaran dalam penggunaan fasilitas ini.

selamat berkarya 🙂

Comments (1)