Category Archives: Tips & Trik

Ada beragam jenis website dengan berbagai bentuk desain, ada yang sama persisi dengan CMS yang sedang digunakan tetapi tidak sedikit juga web desainer yang membuatnya tampil berbeda. Ini semua tinggal selera dan bagaimana tingkat kreatifitas anda, jika anda tipe orang yang tidak cepat puas dan selalu ingin menghasilkan sesuatu yang baru. Mendesain website tentu akan sangat menarik, tapi seperti apa desain web yang baik itu? Berikut ada beberapa tips untuk desain website yang baik.

Unik
Dalam membuat karya apapun seorang designer mempunyai kesadaran untuk tidak meniru atau menggunakan karya orang lain. Begitu pula dalam desain website seorang Web Designer harus mempunyai budaya malu untuk menggunakan icon, animasi, button, dll, yang telah digunakan atau dibuat oleh orang lain. Disinilah kita harus mengeluarkan segala kreatifitas yang kita miliki, untuk bisa tampil unik dan berbeda dari yang lain.

Komposisi
Seorang Web Designer selalu memperhatikan komposisi warna yang akan digunakan dalam mendesain website yang dibuatnya. Dalam mendesain website suatu perusahaan, Web Designer selalu menyesuaikan warna yang digunakan dengan Corporate Color perusahaan tersebut. Kemudian warna-warna yang menonjol dari perusahaan tersebut akan digunakan sebagai warna yang dominan dalam mendesain website perusahaan tadi.

Simple
Dalam mendesain website banyak web designer yang menggunakan prinsip “Keep it Simple”, hal ini ditujukan agar tampilan website tersebut terlihat rapi, bersih dan juga informatif.

Semiotik
Semiotika adalah ilmu yang mempelajari tentang tanda-tanda. Dalam hal ini diharapkan dengan melihat tanda atau gambar, visitor website dapat dengan mudah dan cepat mengerti. Sebagai contoh: Jangan membuat gambar yang berkesan seperti tombol, padahal itu bukan tombol/ link.

Ergonomis
Web Designer selalu memperhatikan aspek ergonomi. Ergonomi disini adalah dalam hal kenyamanan user dalam membaca dan kecepatan user dalam menelusuri website tersebut. Web Designer memilih ukuran Fonts yang tepat sehingga mudah dibaca, Web Designer menempatkan link sedemikian rupa sehingga mudah dan cepat untuk di akses dan lebih penting lagi adalah Informatif.

Fokus
Tentukan hirarki prioritas dari website yang akan didesain dan pesan yang akan disampaikan, misalnya: Judul harus besar, tetapi jangan sampai akhirnya akan konflik dengan subjudul yang berukuran hampir sama. Hal ini akan membingungkan user untuk menentukan pesan mana yang harus lebih dahulu dibaca/ dilihat.

Konsisten
Salah satunya yang penting dalam desain web yaitu menentukan font apa yang akan digunakan sebagai Body-text, Judul, Sub Judul dan sebagainya, sehingga website tersebut akan terlihat disiplin dan rapi. Sesuaikan jenis huruf yang digunakan dengan misi dan visi website tersebut, misalnya: hindari menggunakan font Comic dalam membangun website suatu perusahaan resmi.

Demikian beberapa tips yang digunakan Web Designer dalam mendesain website yang baik, selebihnya merupakan ekspresi dari pembuat website itu sendiri yang terwujud dalam penyusunan website.

Mengenal CSS

Apa itu CSS ? CSS (Cascading Style Sheet) adalah dokumen yang digunakan untuk mendukung kode HTML didalam mendesain website. CSS sendiri bukan bahasa pemrograman seperti Delphi, Javascript, atau C+ tetapi CSS sebuah desain yang berbasiskan scriptting yang nantinya bisa disisipkan pada kode HTML.

Prinsip kerja dari CSS adalah mengkelompokkan perintah yang terjadi secara berulang-ulang, CSS membuat blok perintah dengan kategori-kategori sesuai dengan kebutuhan dengan cara ini tentu proses mendesain website bisa menjadi lebih cepat. Dengan adanya kategori-kategori yang dibuat kita tidak perlu mengulang-ulang kode yang sama, karena sebelumnya sudah dikategorikan berdasarkan kelompok masing-masing.

Cara Penulisan CSS

Penulisan CSS diawali dengan tanda “{” dan diakhiri dengan tanda “}” dan setiap deklarasi di dalam suatu sub kategori harus diakhiri dengan tanda “;”. Setiap blok kategori tersebut diawali dengan tanda ‘#’ atau “.” (titik) kecuali kode-kode yang telah umum dalam HTML seperi “p”, “table”, “h1…h6″, “a”, dan lain-lain.

Penulisan kode CSS ada dua cara, yang pertama disisipkan langsung di dalam kode HTML dan yang kedua adalah dengan menulis kode CSS tersebut pada file yang terpisah yang nantinya file CSS tersebut dipanggil dalam HTML. Penulisan kode CSS pada file yang berbeda ini cara menyisipkan (memanggil) file CSS tersebut adalah seperti dua cara di bawah ini :

<link rel=”stylesheet” href=”style.css” type=”text/css” media=”all” />
<link rel=”stylesheet” href=”style.css” type=”text/css” />

Style.css adalah nama file CSS yang nantinya harus diupload bersama-sama dengan file index. Penulisan CSS pada file yang terpisah akan lebih sederhana dan lebih memudahkan pembuatan suatu website. Pada saat membuat kode-kode CSS. Setiap blok kategori CSS sebaiknya diberi nama yang sesuai dengan desain website untuk memudahkan pengeditan nantinya, contoh :

Blok kategori header diberi nama #header {……} atau .header {……}
Blok kategori logo diberi nama #logo {……} atau .logo {……}
Blok kategori artikel diberi nama #artikel{……} atau .artikel {……}
Blok kategori footer diberi nama #footer {……} atau .footer {……}
Blok kategori sidebar diberinama #sidebar {…….} atau .sidebar {……}
Dan seterusnya (terserah anda)

Tanda {…….} maksudnya ada beberapa kode di dalam tanda kurung tersebut yang disesuaikan dengan kebutuhan.

Penulisan kode CSS yang diawali dengan tanda pagar (#) nantinya akan disisipkan dalam kode HTML seperti di bawah:

<div id=”header”> ……..</div>,
<div id=”footer”>……</div>,
<div id=”sidebar”>……</div>, dan seterusnya,

Sedangakan kode CSS yang diawali dengan tanda titik(.) akan disisipkan seperti ini :

<div>……</div>,
<div>……</div>,
<div>……</div>, dan seterusnya.

Contoh Penulisan CSS yang disisipkan langsung dalam kode HTML:

Setiap paragraph akan menggunakan huruf arial, warna merah ukuran huruf 12px, align left
Setiap heading h1 akan menggunakan huruf bold, arial, warna biru, ukuran huruf 36px

Penulisan kodenya sebagai berikut :
<html>
<head>
<title>BELAJAR CSS DASAR</title>

<style>
h1 {
font-size: 36px;
font-family: Arial, Helvetica, sans-serif;
color: #0000ff;
font-weight: bold;
}

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ff0000;
}
</style>

</head>
<body>
<h1>Judul 1</h1>
<p>pargraph ke satu</p>
<p>paragraph kedua</p>
<p>pargraph ketiga</p>
<h1>Judul 2 </h1>
<p>pargraph A </p>
<p>paragraph B </p>
<p>pargraph C </p>
<p>&nbsp;</p>
</body>
</html>

Demikian sedikit ulasan mengenai mengenal dasar CSS, selamat mencoba. Dan semoga bermanfaat.

Selain dari segi desain yang memang harus terlihat menarik, Tentu kecepatan akses suatu website juga harus dipertimbangkan. Anda tidak ingin bukan penggunjung website anda kecewa gara-gara menunggu loadingnya halaman website anda terlalu lama. Lalu apa penyebabnya kok suatu halaman website bisa loading terlalu lama? Terus bagaimana cara mengatasinya, Berikut ada tips agar website cepat diakses.

Salah satu contoh website yang diakses cukup lama yaitu website galeri. File gambar biasanya identik dengan resolusi yang tinggi dan sangat berat proses loadingnya. Hal ini bisa memperlambat akses halaman website. Untuk mengurangi beban loading tersebut, Salah satu solusinya yaitu cukup tampilkan saja thumbnail dari gambar. Ketika user mengklik thumbnail tersebut, dengan sedikit sentuhan AJAX, kita bisa menampilkan ukuran asli dari gambar tersebut. Teknik ini lumayan ampuh untuk mengurangi proses loading tersebut.

Jika anda menggunakan CMS WordPress, salah satu keunggulan wordpress yaitu memiliki fitur plugin cache, contoh plugin untuk cache pada wordpress adalah : WP-SuperCache, yang bisa mengubah halaman dinamis menjadi file HTML statis untuk mengurangi penggunaan resource server. Tentu ini akan mempercepat akses halaman website anda.

Karena yang biasanya memperlambat akses website adalah gambar, maka sebelum di upload lebih baik di kecilkan dulu resolusinya. Gunakan software pengolah gambar. Gunakan juga format file yang tepat, dengan format file yang tepat untuk gambar anda, anda bisa mengoptimasi ukurannya tanpa harus menurunkan kualitas gambar. Contohnya, gunakan format JPG untuk gambar fotografi, dan format PNG untuk grafik, diagram, dengan efek transparan untuk menghemat size gambar.

Tentu dengan banyaknya gambar yang anda masukkan ke website anda tidak menutup kemungkinan website anda akan terasa sedikit berat untuk diakses. Tetapi dengan beberapa tips agar website cepat diakses diatas mungkin bisa sedikit memberi solusi bagi anda untuk mengatasi masalah tersebut. Tidak ada salahnya untuk mencoba bukan.

Anda pernah berkunjung ke website yang mempunyai tampilan menarik dengan adanya gambar-gambar yang dijadikan slider image, Bahkan kita tidak perlu mengklik gambar tersebut untuk melihat slide selanjutnya. Semuanya berjalan secara otomatis. Sebenarnya bagaimana cara kerja slider tersebut, Berikut jawabannya.

Membuat Slider Sendiri Di WordPress
Jika anda pengguna CMS wordpress.org maka bersyukurlah, Karena begitu banyak dukungan plugin yang tersedia untuk CMS wordpress ini. Dan bila anda tertarik untuk mencoba menampilkan gambar atau slider di website anda tidak ada salahnya anda mencoba plugin slider yang satu ini. Namanya vSlider, Dengan plugin ini semua urusan pembuatan slide akan lebih mudah.

Dengan vSlider anda bisa membuat multi slider dengan berbagai kebutuhan, misal slide pertama memuat tentang promosi anda dengan gambar, Kemudian slide kedua bisa untuk hal lainnya. Menggunakan plugin slider ini juga cukup mudah dengan hanya memasukkan short code pada page atau post yang diinginkan. Contohnya :

[vslider name=”abc”]

Dimana “abc” merupakan nama slider yang anda buat. Atau jika anda ingin memasukkannya pada template anda bisa menggunakan kode php:

<?php if(function_exists(‘vslider’)){ vslider(‘abc’); } ?>

Dan “abc” juga di ganti dengan nama slider anda.

Demikian cara bagaimana membuat slider image di halaman website anda, Tentu dengan menggunakan plugin vSlider akan lebih mudah lagi. Anda bisa menampilkan slider yang menarik sesuai keinginan anda.