test bullet and numbering

  1. Menghimpun serta menggerakan segenap potensi Mahasiswa Indonesia yang berjiwa Pancasila untuk aktif dalam pelaksanaan pembangunan Nasional.
  2. Mempertinggi ketahanan mental dengan senantiasa membimbing anggotanya untuk mengamalkan keyakinan agamanya masing-masing yang sesuai dengan falsafah Pancasila sebagaimana tercantum pada pembukaan Undang-Undang Dasar 1945.
  3. Mengadakan kegiatan untuk mengembangkan daya nalar, melatih kepemimpinan, meng upayakan peningkatan kesejahteraan mahasiswa dan mengembangkan seni dan budaya nasional serta kegiatan pada bidang social, ekonomi dan hokum.
  4. Kerjasama dengan segenap organisasi yang berjiwa Pancasila lainnya atas dasar persamaan hak dan derajat, gotongroyong dan saling hormat menghormati.
  5. Melakukan konsultasi dengan pemerintah dalam melakukan kegiatan yang menyangkut pembinaan dan pengembangan generasi muda.

7 Langkah Persiapan Mendesain Website

Untuk mengimbangi kepopuleran bidang desain website pada tahun 2010 ini, maka ada baiknya saya menulis tentang persiapan apa saja yang perlu kita lakukan sebelum mendesain website.

 

Mungkin banyak teman-teman pembaca setia Jurus Grafis yang belum familiar dengan cara kerja mendesain website, karena terbiasa dengan desain cetak (seperti saya dulu).

Dalam desain website, kita sebagai desainer tidak diharuskan bisa mem-program desain yang telah kita buat. Tapi tentu saja akan lebih baik jika kita bisa sekaligus mem-program desain kita sendiri, tapi kalau di rasa mem-program sebuah website itu merupakan pekerjaan berat, lebih baik kita berfokus pada interface dan konsep desain terlebih dulu.

Yang patut kita tahu adalah cara berpikir programmer, agar desain yang kita buat masuk akal untuk di wujudkan dalam code. Misalnya, salah satu cara programmer bekerja adalah dengan membuat bagian background terlebih dulu, karena itu desain yang kita buat harus tertata rapih di dalam folder (Photoshop) yang spesifik.

Baiklah, mari kita mulai saja langkah persiapan mendesain website.

1. Tujuan / Goal Website

 

Setiap desain harus mempunyai tujuan yang jelas dan goal apa yang ingin di raih melalui website tersebut. Jika itu website portfolio, tentukan tujuan nya, apakah untuk mendapatkan projek baru? , melakukan personal branding atau untuk menjadi semacam katalog online hasil kerja kita?

Dengan tujuan yang jelas maka kita akan dengan mudah menemukan konsep dan gaya desain yang pas. Hindari tujuan untuk ‘tampil keren’ di awal pemikiran, karena desain yang kita anggap keren itu mungkin hanya bertahan dalam waktu 1 bulan saja, sehingga dalam waktu singkat kita merasa harus mendesain kembali website kita. “Keren” itu hanya “kulit” nya, yang terpenting adalah fungsi dan tujuan website tersebut.

2. Sitemap

 

Sitemap merupakan bagian yang sangat vital,  karena akan menjadi gambaran alur informasi yang jelas mengenai website yang akan kita buat. Tentukan navigasi dan fitur yang di perlukan di tahap ini dan buang fitur yang tidak efektif.

Kalau tujuan website sudah jelas, maka kita bisa berfokus pada tujuan itu dan tidak memasukkan fitur yang kurang penting, seperti chat box atau ruang iklan banner misalnya (sungguh aneh kalau di web portfolio ada banner iklan).

3. Sketsa / Wireframe

 

Supaya tidak tersesat di kanvas kosong Photoshop, lebih baik kita merancang terlebih dulu di atas kertas. Langkah ini perlu untuk menghindari kerja dua kali di Photoshop. Bisa di bayangkan waktu yang terbuang ketika membuat background atau tombol terlihat bercahaya dan web 2.0 banget!, tapi ternyata letak dan ukurannya kurang tepat.

Tahap ini sangat perlu, terlebih jika kita berurusan dengan website yang mempunyai alur informasi yang kompleks. Dengan sketsa kita dapat menciptakan berbagai kemungkinan layout dengan cepat. Dan kalau kita bekerja dengan klien, mereka lebih senang kalau kita memulai projek dan memperlihatkan hasil sketsa kita sebelum melangkah ke tahap finishing di Photoshop. Ini bisa menjadi jalan untuk melibatkan klien secara aktif di dalam projek tanpa membuat kita kesal (karena untuk merubah hanya perlu menghapus sketsa saja).

4. Resolusi 72 Dpi & Warna RGB

 

72 Dpi adalah resolusi standar untuk tampilan di monitor (jangan pernah membuat desain website di resolusi 100 dpi sekalipun, karena ukuran asli nya akan menjadi besar juga). Dan gunakan warna RGB yang memang di khususkan untuk monitor.

Well, langkah ini adalah langkah dasar yang tidak boleh di langgar, jadi jangan lupa teman :)

5. Lebar Konten Website Maksimal 960 Pixel

 

Seheboh apapun desain yang kamu buat, jaga area konten (teks, foto dll) agar jangan melebihi lebar 960 Pixel. Ini karena standar monitor orang awam masih berkisar di resolusi 1024 x 768. Untuk bagian background image mungkin perlu untuk melebihi lebar 960 pixel ini dengan tujuan supaya background terlihat rapih dan tidak terpotong jika di buka di monitor yang lebar seperti 1360 x 768 pixel atau lebih.

6. Gunakan Grid System

 

Grid bukanlah suatu pembatasan kreatifitas terhadap desain. Grid di ciptakan untuk mempermudah kita menjaga konsistensi layout dari halaman satu ke halaman yang lain. Selain itu gird juga membantu programmer yang akan menslicing desain kita di photoshop.

Saya biasa menggunakan 960 Grid System, karena sudah merupakan standar di jaman sekarang ini. Jika kamu tidak mau menggunakan grid yang sudah ada, silakan gunakan grid kamu sendiri. Yang terpenting lebar area konten tidak boleh melebihi 960 pixel.

7. Manajemen Folder & Layer di Photoshop

 

Biasakan untuk membuat folder di bagian-bagian penting sebuah website, misalnya, folder header, folder body, folder sidebar, folder footer. Sebenarnya nama folder nya bisa terserah kamu, yang penting di namakan dan masing-masing layer yang termasuk ke dalam satu bagian/section di satukan ke dalam satu folder.

Jangan lupa juga untuk menamakan setiap layer, sehingga akan mudah jika kita ingin mengedit desain kita nanti dan tentu saja ini sangat menolong programmer yang bekerjasama dengan kita.

Kesimpulan

7 langkah di atas adalah langkah awal supaya kita terbiasa mendesain dalam keadaan yang terorganisir (khususnya desain website). Karena kita tahu terkadang kita tidak bisa menyelesaikan suatu projek sendirian, dalam hal ini mungkin kita butuh teman programmer, jadi supaya code yang di hasilkan juga rapih, kita sebagai desainer juga harus memberikan “file mentah” yang rapih.

Sudah siap beralih menjadi web desainer? Atau mungkin ada langkah yang tertinggal? Ayo berbagi pendapat di kolom komentar! :D

Merancang Navigasi Website

Navigasi pada sebuah website yang tertampil pada menu dan links adalah petunjuk bagi pengunjung terhadap halaman – halaman yang terdapat dalam website. Pengunjung akan semakin mudah menemukan halaman – halaman dalam website Anda jika menu – menu dan link yang ada tampil secara terstruktur. Sudah pasti pengunjung akan kesal apabila tidak mendapatkan halaman website yang ia cari gara – gara navigasi yang ruwet.

Rencanakan dengan Baik
Hal yang mutlak dilakukan sebelum mulai membuat sebuah web tentunya adalah pembuatan konsep dari website itu sendiri. Konsep tersebut akan memuat navigasi dasar dalam bentuk “tree view” (bercabang dan beranting) dari mulai konten yang bersifat umum hingga konten yang bersifat mendetail. Inilah garis besar navigasi dari situs yang akan dibuat.

Dimana Navigasi diletakkan
Seperti telah dikemukakan di atas, bahwa navigasi akan membawa pengunjung dari hal – hal yang bersifat umum hingga hal – hal yang bersifat mendetail. Halaman utama (index) tentu saja akan memuat menu – menu pokok yang bersifat umum. Percabangan dari menu – menu inti tersebut dapat di letakkan pada halaman – halaman cabang dari index.
Alternatif lain, Anda dapat menggunakan javascript untuk menampilkan menu dan sub-menu sekaligus.

Konsisten
Sebisa mungkin jangan merubah letak menu pada setiap halaman web sehingga pengunjung lebih mudah menemukan menu – menu tersebut. Misalnya menu utama berada di atas, setelah itu pada halaman – halaman yang terdapat dalam menu utama dapat ditampilkan sub-menu di sebelah kiri atau kanan halaman.

Spotty!
Buatlah menu dengan menonjol sehingga pengunjung mudah mengenalinya. Hal ini tentu saja harus di gabungkan dengan unsur estetika sehingga menu – menu tersebut dapat sejalan dengan konsep desain web yang dibuat.

Singkat & Deskriptif
Kata – kata yang terdapat dalam menu harus mampu memberikan petunjuk yang jelas dan singkat tentang halaman website di bawah menu tersebut. Gunakan istilah – istilah yang lazim, singkat, dan mudah dipahami.

Berikan Petunjuk pada Pengunjung
Akan lebih baik jika pada halaman website memuat strukur singkat halaman web yang sedang di tampilkan. Misal : Tentang Kami >> Visi & Misi >>

Berikan Link ke Halaman Utama
Jangan lupa untuk memberikan link ke halaman utama atau link ke halaman dalam “parent topic”. Ini akan memudahkan pengunjung jika situs Anda di bangun dalam struktur menu dan submenu yang cukup kompleks.

Sitemap
Buatlah sitemap yang linknya berada di setiap halaman web. Ini akan semakin memudahkan dan mempersingkat proses pencarian halaman – halaman website oleh pengunjung.

Jika pengujung merasa nyaman dalam mengunjungi website Anda, maka akan semakin baik pula content website dapat diterima oleh pengunjung.

Sumber: http://www.rumahweb.com/journal/merancang-navigasi-website.htm

Desain Web Minimalis

Konsep Desain web minimalis dapat diartikan sebagai desain web sederhana, tidak terlalu banyak warna, dan mudah dinavigasi / ditelusuri melalui fitur yg tersedia. Sebuah website ataupun blog yg mengusung Desain Web Minimalis cenderung disukai karena web seperti ini biasanya mudah dipahami dan diakses.

Desain Web Minimalis biasanya hanya mengandung unsur-unsur yg dianggap penting, widget dan link yg tidak penting dan tidak berfungsi lebih baik jika ditinggalkan. Namun dalam penghapusan beberapa fitur yg telah ada sebelumnya juga harus berhati-hati, jangan biarkan tampilan website atau blog anda menjadi ‘pincang’ karena pentingnya fitur yg hilang. Jadi selektif dalam memilah fitur yg berguna akan sangat menentukan sekali.

Dibawah Ini Tips Menerapkan Konsep Desain Web Minimalis :

  1. Gunakan kombinasi warna putih – abu-abu – hitam untuk benda yg tidak ingin terlihat menonjol. Warna abu-abu dapat dipecah menjadi banyak lagi, dari cahaya abu-abu ke abu-abu gelap. Kombinasi  warna cahaya ‘gelap dan terang ‘ ini akan membuat kesan minimalis dan netral karena pergerakan warna putih-abu-abu tidak benar-benar hitam, dan akan lebih bernilai simple dan elegan.
  2. Gunakan satu atau dua warna yg kuat pada beberapa objek sebagai fokus. Warna-warna yg kuat dapat biru tua, hitam, merah hati, ataupun warna hijau (seragam tentara) dapat digunakan. Hal ini dapat diterapkan pada Font, Header, Sidebar ataupun sisi Footer.
  3. Menggunakan font yg unik untuk beberapa elemen situs, seperti link yg dikunjungi, judul sidebar, dan lain-lain sesuai niche web atau blog anda.
  4. Menggunakan flash atau javascript sehingga unsur-unsur tertentu dapat bergerak. Hal ini juga penting agar tampilan website tidak terkesan ‘mati’ ataupun kaku. Penggunaan sedikit variasi flash seperlunya akan dapat membuat tampilan lebih “fresh”.
  5. Gunakan layout atau pengaturan dari gambar-gambar yg berbeda untuk setiap halaman website / konten atau posting (pada blog). Ini agak sulit dan sedikit memakan waktu anda, tetapi hal ini bisa membuat sebuah web minimalis tersebut tidak terlihat membosankan.

Melalui 5 poin diatas akan sedikit membantu kita mengelola web desain pada situs / blog kita agar lebih menarik.

Sumber: http://promosinet.com/teknologi/komputer/3068-konsep-desain-web-minimalis.html

Desain Web Dengan CSS

Berikut ini saya akan memberikan sedikit trik mendesain web dengan Css :
1. Buat file cssnya dengan nama desain.css :

#ats {

    width: auto;
height: 150px;
-moz-box-shadow: gray 3px 3px 4px;
-webkit-box-shadow:gray 5px 5px 5px;
font-family: “Comic Sans MS”;
font-size: 9mm;
color: #CCCCCC;
font-weight: bold;
text-shadow:5px 5px 5px #666;
background-color: #000000;
text-decoration: blink;
text-align: center;
letter-spacing: 1em;
}
#ats:hover{
background-color: #00FF00;
height: 150px;
width: auto;
-moz-box-shadow: 5px 5px 5px;
-webkit-box-shadow:5px 5px 5px;
font-family: “Comic Sans MS”;
font-size: 9mm;
font-weight: bold;
text-decoration: blink;
letter-spacing: 1em;
color:#000000;
}
#tgh {
background-color:#FFFFFF;
margin-top: 10px;
height: 700px;
width: 700px;
margin-right: 150px;
margin-left: 150px;
-moz-box-shadow: 5px 5px 5px;
-webkit-box-shadow:5px 5px 5px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
#bwh {
background-color: #999999;
height: 70px;
width: auto;
margin-top: 10px;
-moz-box-shadow: 5px 5px 5px;
-webkit-box-shadow:5px 5px 5px;
font-family: tahoma;
font-size: 10px;
font-weight: bold;
color: #000000;
}
#bwh:hover{
background-color:#000000;
height: 70px;
width: auto;
margin-top: 10px;
-moz-box-shadow: 5px 5px 5px gray;
-webkit-box-shadow:5px 5px 5px gray;
font-family: tahoma;
font-size: 10px;
font-weight: bold;
color:#FFFFFF;
}
#tgh #menu {
width: 150px;
margin-top: 10px;
margin-left: 5px;
height: 200px;
margin-right: 5px;
margin-bottom: 5px;
-moz-box-shadow: 5px 5px 5px;
-webkit-box-shadow:5px 5px 5px;
float: left;
}
#tgh #main {
background-color:#EEEEEE;
height: 600px;
width: 360px;
float: right;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-top-style: inset;
border-bottom-style: inset;
border-right-style: inset;
border-left-style: inset;
}
#tgh #kanan {
float: right;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
height: 200px;
width: 150px;
-moz-box-shadow: 5px 5px 5px;
-webkit-box-shadow:5px 5px 5px;
}
#tgh #menu2 {
float: left;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
width: 150px;
background-color: #000000;
-moz-box-shadow: 5px 5px 5px;
-webkit-box-shadow:5px 5px 5px;
}
.menu3{
background-color: #000000;
color:#FFFFFF;
font-family:tahoma; font-size:12px;
text-decoration:none;
display:block;
width:150px;
height:27px;
border-bottom-style:dotted;
border-bottom-color: #CCCCCC;
}
.menu3:hover{
background-color: #00FF00;
font-weight:bold;
color:#000000;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
2. Buat file Html dengan nama Coba.html :
<html>
<head>
<link rel=”stylesheet” href=”desain.css” type=”text/css”>
</head>
<body bgcolor=”#EEEEEE”>
<div id=”ats”>MY-WEB<p>

</div>
<div id=”tgh”>
<div id=”menu”><img src=”gambar/_UnEm0_.jpg” alt=”Gbr1″ width=”150″ height=”200″></div>
<div id=”kanan”>
<form name=”form1″ method=”post” action=””>
<table width=”100%” border=”0″ cellspacing=”2″ cellpadding=”2″ style=”font-family:tahoma; font-size:12px;”>
<tr>
<td colspan=”3″ align=”center” bgcolor=”#F2F2FF”>Login User </td>
</tr>
<tr>
<td width=”41%”>&nbsp;</td>
<td width=”7%”>&nbsp;</td>
<td width=”52%”>&nbsp;</td>
</tr>
<tr>
<td>Username</td>
<td>:</td>
<td><input name=”username” type=”text” id=”username” size=”7″></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name=”password” type=”password” id=”password” size=”7″></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type=”submit” name=”Submit” value=”Login” style=”background-color:#EEEEEE; color:#000000; border:dotted;”></td>
</tr>
</table>
</form>
</div>
<div id=”main”></div>
<div id=”menu2″>
<div style=”background-color:#CA0000; font-family:tahoma; font-size:14px; color:#FFFFFF; width:150px; height:30px; display:block” align=”center”>MENU UTAMA</div>
<a href=””>Home</a>
<a href=””>Profil</a>
<a href=””>Link</a>
<a href=””>Guest Book</a>
</div>
</div>
<div id=”bwh” align=”center”>&copy;Copyright 2010 <br>
Desain by : adhye alor
</div>
</body>
</html>

Konsep Dasar Desain WEB

Sebuah lukisan yang indah selalu dimulai dari sebuah coretan sederhana di atas kanvas, tetapi ingat … sebelumnya pelukis pasti sudah mempunyai ide atau paling tidak dasar style yang akan dipakai untuk melukis. Tanpa ide dasar, berapa kalipun mencoretkan kuasnya pelukis tidak akan bisa menghasilkan lukisan yang indah (setidaknya lukisan yang indah bagi orang awam seperti saya dan Anda). Jadi mulailah dengan KONSEP.

Desain website harus mempunyai fungsi.
Hal ini berarti semua bagiannya harus memainkan peran dalam menyediakan informasi kepada pengunjung tentang siapa Anda, produk Anda atau layanan Anda.
Jangan membuat website hanya untuk “sekedar” ikut-ikutan, tentukan fungsinya terlebih dahulu baik untuk (perusahaan) Anda sendiri maupun bagi calon pengunjung website Anda.

Website harus mudah dibaca dan dikunjungi
Tidak semua yang Anda tulis akan dibaca oleh pengunjung dan tidak semua pengunjung akan membaca semuanya. Pada kenyataannya pengunjung hanya membaca sesuatu yang menarik untuk mereka. Untuk menarik pembaca/pengunjung, Anda bisa mulai dengan beberapa aturan dasar berikut:

  • Tentukan “tema besar” website Anda.
  • Jika Anda pemilik website, tentukan nama yang catchy, mudah diingat dan yang pasti merujuk pada tema besar Anda. Ingat…memikirkan “makanan” akan mudah jika Anda mengingat “tempe” atau bahkan yang sedikit lebih jauh dengan mengingat “piring”, tapi Anda tidak akan pernah memikirkan “makanan” jika Anda mengingat “semen” atau “pasir”.
  • Kembangkan struktur artikel atau navigasi yang tertata dengan baik, selalu umpamakan website merupakan urutan ruang-ruang, jangan sampai pengunjung “tersesat” ketika mengunjungi website Anda.
  • Kelompokkan teks, gambar dan isi website lain sesuai dengan peruntukan (halaman).
  • Penggunaan header atau sub judul untuk memisahkan topik/ ide yang berbeda-beda untuk memberikan kemudahan bagi pembaca dalam menemukan yang mereka inginkan.
  • Selalu menitik beratkan pada kesinambungan & konsistensi.
  • Jangan menggunakan kalimat yang terlalu panjang, warna, gambar atau jenis font yang berlebihan. Kompleksitas hanya akan menghilangkan esensi dari artikel atau isi website Anda. Cobalah untuk mengungkapkan ide-ide Anda dengan kata-kata yang singkat tapi mudah dimengerti. Gunakan pembedaan warna antara 1-2 warna saja atau font style (bold, italic dan underline). Tentunya untuk poin ini sangat bersifat subjektif; artinya sesuaikan dengan kebutuhan & fungsi website Anda.
  • Sebelum merencanakan menggunakan beberapa jenis font sekaligus, usahakan Anda sudah benar-benar menguasai dasar-dasar tipografi. Jika belum, gunakan cara aman; batasi pembedaan jenis font hingga maksimal 3 jenis font.
    Pastikan font yang Anda pilih merupakan jenis font standard dan mudah dibaca.

Setelah Anda selesai dengan tahap ke-2 diatas, kembalilah ke tahap 1, cek apakah struktur, konsep desain, font, warna dll sudah sesuai dengan fungsi website yang Anda rencanakan.

 

Sumber: http://log35.com/2007/09/17/aturan-dasar-desain-website-bagian-1-konsep/

Daftar Pustaka

  • http://ciethiashifa.blogspot.com
  • http://blog.re.or.id/asp-active-server-pages-server-side-scripting.htm
  • http://moe-adz.blogspot.cpm/2008/05/mengenal-active-server-pages-asp.html
  • http://dhitajuniarti.blogspot.com/2008/12/pengertian-pemograman-asp.html
  • http://sisteminfosi.wordpress.com/2011/04/30/pengertian-asp/
  • http://cois.is.uad.ac.id/forum/showthread.php?tid=33