AGUS HAMDANIDESIGN WEB

Disampaikan Pada Pelatihan Web Design

Bagi UKM di Lingkungan STAIN Metro22 – 23 Nopember 2013

Pengertian

• Design web adalah seni dan proses dalam menciptakan halaman web tunggal atau keseluruhandan bisa melibatkan estetika dan seluk beluk mekanis dari suatu operasi situs web walaupun yangutama memusatkan pada tampilan dan cita rasa

• Definisi yang ditawarkan memisahkan desain web dari pemrograman web, karena lebih menekankan pada fitur fungsional dari sebuah situs web, serta desain posisi web sebagai semacam desain grafis

Tujuan

• membuat situs web atau dokumen elektronik dan aplikasi yang berada pada web server dan menampilkan konten dan fitur antarmuka interaktif kepada pengguna akhir dalam bentuk halaman Web. Seperti unsur-unsur teks, gambar (gif, jpeg) untuk ditempatkan pada halaman menggunakan HTML / XHTML / tag XML. Menampilkan media yang lebih kompleks (vektor grafis, animasi, video, suara) membutuhkan plug-in seperti Adobe Flash, QuickTime, Java run-time dan lain-lain. Plug-in juga dimasukkan ke dalam halaman web dengan menggunakan HTML / tag XHTML

Kemampuan Dasar

Hal yang harus dikuasai oleh seorang web designer :1. 1. Penguasaan cita rasa senia.

a. Mengeksplorasi Imajinasinya dan menggali cita rasa seninya yang dituangkankedalam halaman web.

b. Mampu memilih warna yang baik dan memadukannya dengan warna yang lain sehingga menciptakan pepaduan warna yang serasi.

c. Mampu membuat bentuk atau skeysa yang baik dari bentuk halaman web. d. Mampu menggabukan imajinasi atau ide original dan menggabungkannya dari

pihakclient.e. Mampu menempatkan komponen multimedia pada bagian-bagian tertentu

sehinggahalaman web lebih menarik.2. Penguasaan tool pendukung perancangan weba.

a. Program aplikasi pengatur layout web; Macromedia dreamweaver, Ms.Frontpage, edit plus, php dll.

b. Program aplikasi pembuat animasi- Macromedia Flash, Swishc. c. Program aplikasi pembuat design grafis-Photoshop, Corel ,Paint dll.

3. Penguasaan membuat Interface4. Penguasaan Bahasa pemrograman

Penyegar Mata

Keserasian

Kebergunaan

Efektifitas n’ Kesederhanaan

Navigasi

Bahasa

design Responsive

Ketika anda pertama kali mengunjungi sebuah situs, apa yang pertama kali anda lihat dan

nilai?. design…..!Baik buruknya design Website adalah cermin dari konten yang berkualitas.

design anda harus memikat dan memberi kenyamanan kepada pengunjung sehingga mereka ingin balik lagi nantinya. Inilah yang dinamakan design yang design Ramah Pengguna (User-friendly)

Masalah sekarang adalah bagaimana membuat design Website yang membuat pengunjung nyaman. Ingat loh : Kenyamanan pengunjung. Karena design Website yang keren juga belum tentu membuat pengunjung anda nyaman

7 TIP DESIGN WEB

Keserasian

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

Kebergunaan

Perhatikan widget-widget, Call to action, link dan apapun yang tertampil di Website anda. Kemudian, bayangkanlah anda menjadi seorang pengunjung Website yang sangat awam. Lalu, pikirkan apa yang akan pengunjung rasakan ketika melihat Website anda. Apakah mereka akan merasa risih atau merasa terbantu? INGAT apakah widget ini diperlukan pengunjung anda? apakah link ini diperlukan oleh pengunjung Website anda? Jika anda ragu atas pertimbangan anda sendiri, tak ada salahnya melakukan survey & voting. Intinya, segala sesuatu yang tampil di Website anda harus memiliki nilai manfaat bagi pengunjung anda. Jadi, hilangkan hal-hal yang tidak penting.

Efektifitas & Kesederhanaan

Setelah anda mengerti prinsip kebergunaan, maka anda tahu widget, link, dan apa saja yang harus ditampilkan di Website anda. Itu belum selesai. Sekarang, yang harus anda pikirkan adalah apa yang pengunjung rasakan ketika menggunakan/mengakses semua itu. Umumnya, orang suka Website yang tidak bertele-tele dan sederhana. Jadi, tampilkan fasilitas di Website 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.

Navigasi

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

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

Manjakanlah pengunjung anda dengan navigasi yang mudah.

Ketertarikan dan Penyegar Mata

Poin ini adalah inti dalam seni mendesign. Tujuan mendesign adalah membuat orang tertarik. Dan, dalam mendesign Website, pikatlah hati pengunjung dengan design anda yang WOWW. Nah, berikut ini adalah 4 elemen design web yang paling berpengaruh :a. Gambar & Ikon

Walaupun sudah ada kode CSS untuk manipulasi design, jangan pernah remehkan gambar!. design tanpa gambar itu bagaikan sayur tanpa garam. Gambar yang keren akan membuat pengunjung anda betah. Masalahnya mungkin ada pada pembuatan gambar itu. 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 design. Penyeleksian dan penggabungan warna dapat menghasilkan design yang bagus. Saran saya, pakailah warna-warna yang cerah untuk design Website 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 Website anda. Gunakan font-font catchy terutama pada bagian teks Call to action, kepala konten, dan paragraf isi konten anda.

Hal-hal yang perlu diperhatikan dalam mendesign 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 Websiteger dalam mendesign Websitenya. 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 Website 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 Website anda yang mengharuskan pengunjung berpartisipasi dan mengikuti langkah-langkahnya.

7. design Responsive

Secara singkat design Responsive adalah sifat design 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, design sebuah web yang responsive sangat diperlukan agar blog anda tetap menarik pada perangkat apapun yang pengunjung pakai