Pengertian Desain web

Desain web adalah suatu desain tata kelola tampilan konten-konten pada website yang akan
ditampilkan kepada client atau penerima informasi melalui world wide web. Ini mencakup
proses perencanaan dan pembuatan elemen-elemen website, dari struktur tata letak, gambar,
warna, font, hingga grafik. Termasuk; desain grafis, user experience design, user interface design
, search engine optimization hingga pembuatan konten Desain web merupakan bagian penting
dalam pengembangan suatu website, karena suatu web akan dikatakan berkualitas ketika tidak
hanya menonjolkan sisi fungsionalitas melainkan juga sisi seni dan estetika serta user interface
dari website itu sendiri.
Hal ini karena membantu untuk memudahkan client atau pengguna mendapatkan informasi
yang diinginkan. Seiring berkembangnya teknologi mobile, kini desain web dituntut untuk dapat
menampilkan konten-kontennya secara user friendly. Maka dari itu desain web dituntut untuk
dapat menampilkan konten-kontennya secara responsive mengikuti ukuran perangkat yang
mengaksesnya.

Tujuan design web

Tujuan web design adalah sebagai salah satu media komunikasi, dimana memang bertujuan untuk
membuat atau menyampaikan informasi secara cepat dan realtime.
Seperti saat Anda mengunjungi sebuah website, maka akan ada desain pertama kali yang dilihat.
Baik dari komposisi, warna sampai tata letak yang sangat beragam. Untuk web designer yang baik,
mereka tentunya akan mengerti tentang esensi warna. Web designer juga akan memiliki perasaan supaya
dapat membuat pembaca dan pengunjung membayangkan apa yang ada di dalam website tersebut. Mulai
dari pemilihan design warna mana yang nyaman dipandang mata.
Menghindari warna yang sejenis dengan tulisan dan background juga sangat diperlukan dalam hal
ini. Tata letak dan gambar juga sangat diperhitungkan. Karena dapat mempengaruhi minat dari
pengunjung website. Pada gambar, ada baiknya untuk memilih gambar yang sangat kompleks. Menarik
dan mampu mendukung komposisi dari tema website itu sendiri.

Fungsi Desain web

1. Fungsi komunikasi
 Suatu web yang bersifat dinamis pasti harus memenuhi fungsi komunikasi. Suatu web
dinamis harus mampu untuk menjadi pelayan dari pengunjung website. Layaknya seorang
pelayan, maka web harus bisa memberikan komunikasi yang mudah dimengerti oleh
pengunjung.
Disinilah tugas dari desain web untuk menyuguhkan komunikasi yang mudah dimengerti.
Contohnya adalah bagaimana suatu desain web dapat menyampaikan kepada pengunjung
untuk mengisi suatu form dengan mudah.

2. Fungsi informasi
Informasi adalah hal utama dalam suatu web. Membuat desain web yang menekankan
pada informasi pada suatu web merupakan hal yang wajib dimiliki pada setiap website.
Memberikan grafik ataupun gambar-gambar yang mendukung informasi yang disajikan pun
perlu diberikan guna memberikan pertimbangan positif ke pengunjung website sehingga
pengunjung mendapat bayangan mengenai apa yang anda sajikan pada suatu web.
Fasilitas seperti Latest post, news, sitemap, archive, navigation, dan lain sebagainya dapat
membantu dalam memberikan informasi yang tepat kepada pengunjung.

3. Fungsi entertainment
Tampilan web yang monoton tentu akan membuat pengunjung bosan terhadap web anda.
Disinilah fungsi dari desain web. Dikarenakan desain web adalah seni grafis pada website,
maka desain suatu web harus memberikan rasa nyaman ketika mengunjungi web tersebut.
Salah satunya memberikan desain hiburan kepada pengunjung.
Hiburan yang dimaksud adalah hiburan yang masih dalam konteks web yang dibuat.
Seperti memberikan animasi-animasi yang terkait dengan website, memberi slider gambar
pada website, animasi saat loading web, background dinamis, dan lain sebagainya serta
apabila terdapat multimedia yang mendukung web anda juga dapat diberikan di dalam web
namun perlu diingat agar ukuran file multimedia tidak terlalu besar agar tidak lama saat
memuat web.
Hal ini bertujuan agar pengunjung tidak melihat tampilan web yang monoton secara terus
menerus sehingga pengunjung tidak merasa bosan.
4. Fungsi transaksi
Bagi website pelayanan jasa maupun penyedia barang pasti memerlukan fungsi transaksi
pada websitenya agar memudahkan pengunjung atau konsumen membeli produk atau jasa
yang ditawarkan. Desain web diharapkan dapat membantu mempermudah menjalankan
fungsional transaksi pada suatu web dari pemilihan barang, jenis pembayaran, bukti
pembayaran, hingga estimasi waktu sampainya barang atau jasa yang dibeli.
Sebagai contoh suatu web didesain sedemikian rupa untuk menampilkan halaman
pemrosesan order setelah pengunjung atau konsumen menyelesaikan proses checkout
barang. Atau menampilkan harga yang dicoret sebagai harga sebelum diskon dan harga
dengan font yang agak tebal sebagai harga sesudah di diskon pada halaman pembayaran

Elemen desain web

1. Layout
Sebuah website yang baik tentu memperhatikan tampilan tata letak dari komponen-
komponen webnya. Tata letak atau layout yang baik akan mempermudah pengunjung untuk
membaca isi atau informasi dari website anda.
Keseimbangan pada layout atau tata letak juga penting. Memberikan tempat atau grid yang
lebih kecil pada informasi utama yang dirasa penting merupakan hal yang tidak tepat. Tata
letak biasanya disesuaikan sesuai dengan seberapa penting informasi yang ada.
Dalam susunan tata letak atau layout juga perlu diperhatikan alur bacaan dari
pengunjung. Di Indonesia tata cara penulisan adalah dari kiri ke kanan, sehingga alur
informasinya tentu dari atas – kiri – kanan – bawah. Biasanya informasi utama diletakan
pada kolom kiri paling atas dibawah header.
Tata letak seperti diatas dapat disesuaikan sesuai dengan informasi yang disajikan serta
target asal negara pengunjung.

2. White Space
White space yang dimaksud dalam desain web adalah penempatan ruang atau jarak
pemisah antara informasi yang satu dengan yang lainnya. White space berguna untuk
membuat mata pengunjung mampu mengorganisir informasi atau data-data yang dilihat dan
mengirimkannya ke otak agar mudah dimengerti. Karena sejatinya setiap orang akan lebih
 mudah mencerna informasi apabila diberikan jeda atau pembatas pada informasi-informasi
yang diterima.
White space juga penting guna menciptakan titik fokus pada mata pengunjung. Gambar,
grafik, video, maupun teks akan terlihat lebih besar dan membuat pengunjung berfikir
bahwa informasi yang diberikan white space lebih penting dibandingkan yang dijejalkan
pada satu tempat dengan white space yang lebih kecil.
Sebagai contoh ketika kita mengunjungi website jual beli suatu barang. Dimana pada
website tersebut white space pada bagian “detail produk” lebih besar dibandingkan white
space pada bagian “produk terkait”. Hal ini mempertegas dan mengirimkan sinyal ke otak
bahwa informasi pada detail produk lebih penting dibandingkan bagian produk terkait.
White space juga digunakan untuk memberikan ruang antara objek-objek pada website
sehingga mampu mempertegas keberadaan dari objek tersebut. Dalam memberikan white
space pun perlu diperhatikan keseimbangannya. Jangan sampai pemberian white space
tersebut malah merusak desain web yang ada.

3. Navigasi
Navigasi pada suatu website merupakan hal yang wajib ada. Navigasi berguna agar
pengunjung mudah mencari informasi yang ia inginkan. Navigasi tidak dibuat secara rumit.
Asal mudah digunakan serta dimengerti pengunjung saja sudah cukup. Namun tentu
navigasi harus memuat hal-hal penting yang ingin dilihat pengguna.
Menggunakan dropdown menu merupakan solusi untuk meringkas menu navigasi
sesuai dengan kategorinya agar tidak terlihat rumit dan merusak desain web. Dalam desain
web, menu navigasi dibuat seringkas mungkin.
Bagi website bertipe parallax, biasanya akan menggunakan tombol navigasi scroll up
guna memudahkan pengguna kembali ke bagian awal dari web anda. Hal ini juga
mengurangi waktu yang diperlukan oleh pengguna untuk scroll up yang tentu akan sedikit
menyusahkan pengunjung. Serta fungsi dari tombol scroll up ini pula dapat membuat
pengunjung betah menjelajahi website.
 Bagi website yang tidak bertipe parallax, biasanya navigasi website dibuat menjadi
sticky. Hal ini diperlukan agar pengunjung tidak perlu melakukan scroll up guna mencari
menu navigasi yang ada di website.

4. Font
Font yang tepat akan memberikan penyampaian informasi yang lebih baik kepada
pengunjung. Dalam mendesain suatu web, memilih font untuk web berbeda dengan memilih
font untuk media cetak atau brosur. Pada web, mata pengunjung akan menatap layar
komputer atau gadgetnya sehingga akan membuat mata lebih cepat lelah. Maka dari itu
pemilihan font yang baik dan mudah dibaca akan mempercepat penyampaian informasi yang
disuguhkan ke pengunjung.
Karakter pada setiap font juga perlu diperhatikan. Pemilihan karakter biasanya
disesuaikan dengan tema suatu website. Apakah itu santai, maskulin, feminin, maupun
casual.
Readability atau kemudahan pembacaan suatu font juga berpengaruh pada penyampaian
informasi yang disuguhkan. Semakin mudah suatu font dibaca, maka semakin mudah pula
informasi dapat dimengerti oleh pengunjung.
Maka dari itu perlu diperhatikan penggunaan klasifikasi font pada web yaitu Serif, Sans
Serif, Script, dan Decorative. Font bertipe Sans Serif biasanya digunakan untuk informasi-
informasi utama pada web anda agar lebih mudah dibaca. Tidak disarankan untuk
menggunakan font bertipe decorative maupun script sebagai font utama dalam
menyampaikan informasi yang disuguhkan.
Ukuran dari font yang digunakan pun perlu disesuaikan. Ukuran font yang lebih besar
biasanya memuat informasi yang lebih dipertegas. Sebagai contoh font untuk judul
informasi pasti lebih besar dari ukuran font deskripsi. Begitu pula dengan bagian-bagian
informasi yang perlu dipertegas semisal harga barang atau jumlah barang.

5. Warna
Sebuah fashion tidak akan menarik tanpa adanya warna yang melekat pada fashion
tersebut. Begitu juga dengan desain web suatu website. Pemilihan warna yang tepat sesuai
 dengan tema website akan lebih menarik minat dari para konsumen untuk menggunakan jasa
maupun membeli barang yang dijual pada suatu website.
Penentuan warna juga tidak boleh sembarangan. Tiap warna memiliki kesannya masing-
masing. Jika website yang Anda buat merupakan website yang bergerak di bidang
pengolahan data atau konsultan, warna biru adalah pilihan yang tepat karena secara
psikologis dapat mempengaruhi konsumen sehingga konsumen merasa diberikan rasa aman
dan kepercayaan.
Namun apabila penggunaannya diterapkan pada website yang bergerak di bidang kuliner,
maka hal itu akan kelihatan kurang cocok. Ini dikarenakan warna biru juga memberikan
kesan dingin dan juga identik dengan racun pada makanan. Serta bahan-bahan alam yang
digunakan pada industri kuliner biasanya jarang ada yang berwarna biru.
Penyesuaian kombinasi warna-warna yang diterapkan pada suatu website pun harus tepat.
Sebagai contoh, apabila website yang didesain memiliki warna dominan abu-abu terang,
maka gunakanlah warna yang lebih gelap untuk font atau komponen web yang berguna
untuk menyampaikan informasi. Gunakanlah warna gelap seperti dim gray, abu-abu, atau
warna gelap lainnya yang sesuai dengan warna dominan website.
Warna dominan pada website haruslah sesuai dengan tema web serta kombinasi warna
yang ingin dipadukan. Jangan memaksakan mencampurkan warna yang tidak cocok, contoh
ketika sebuah website menggunakan warna latar biru muda lalu artikel anda berwarna
merah. Hal itu akan menimbulkan kesan tidak rapi dan asal-asalan pada website tersebut.
Dalam membuat desain suatu web, perlu dihindari menggunakan warna primer sebagai
latar belakang web. Dalam mendesain web biasanya untuk latar belakang digunakan gradasi
dari warna-warna primer. Ada ribuan gradasi warna yang dapat dipilih sebagai latar
belakang.

6. Search Bar
Ketika pengunjung kesulitan menemukan informasi yang ingin dicarinya, maka search
bar akan menjadi pilihan untuk digunakan. Dengan search bar, maka kata kunci dari
informasi yang ingin dicari dapat ditemukan dengan mudah.
 Setiap website yang baik pasti memiliki search bar guna membantu pengunjung website
mencari informasi yang diinginkannya. Dalam peletakannya biasanya diletakan dekat
dengan menu navigasi.
Mengapa demikian? Karena pengunjung suatu website akan selalu melihat navigasi web
ketika mereka ingin mencari informasi yang mereka inginkan. Barulah ketika dengan menu
navigasi mereka masih kesulitan dalam mencari informasi yang diinginkannya, mereka
memilih menggunakan search bar.
Dalam tata letaknya, search bar harus mudah ditemukan. Kotak pada search bar pun
harus memiliki ukuran agak besar agar dapat dengan mudah mengetik kata kunci yang ingin
dicari. Tombol search pada search bar untuk memulai pencarian pun turut diberikan untuk
menginstruksikan dimulainya pencarian berdasarkan kata kunci yang diberikan.

7. Call to Action
Halaman utama suatu web merupakan gerbang utama untuk menuju ke informasi-
informasi yang terkandung pada web tersebut. Maka dari itu suatu web memerlukan adanya
call to action. Dalam penggunaannya, call to action harus memiliki maksud yang jelas
kemana pengunjung web akan diarahkan.
Hindari menghadirkan pop up pada komponen dengan elemen call to action kecuali
tindakan tersebut membutuhkan persetujuan dari pengunjung. Dengan adanya pop up akan
mengurangi kenyamanan dalam desain web yang dibawa. Perintah call to action yang baik
pun akan langsung merujuk ke halaman atau website yang dituju melalui tab yang sedang
dibuka maupun membuka tab baru, tidak dengan membuka jendela baru dari aplikasi
browser.

8. Halaman About Me/Us dan Halaman Contact Us

Halaman ini merupakan halaman yang sangat penting dan wajib ada pada suatu website.
Jika pengunjung website ingin menanyakan sesuatu yang tidak tertera pada website atau
menanyakan hal-hal diluar kendali pada website maka pengunjung pasti akan membuka
halaman ini.
Pada halaman About me/us berisi informasi mengenai perusahaan/orang yang memiliki
website tersebut. Biasanya berisi alamat, nomor telepon, serta email yang dapat dihubungi.
 Pada halaman ini pula terdapat deskripsi dari perusahaan/perseorangan yang memiliki
website tersebut. Halaman inilah yang merupakan penggambaran dari
perusahaan/perseorangan yang memiliki website.
Sedangkan halaman Contact Us merupakan halaman yang digunakan untuk
mempermudah pengunjung untuk mengontak pemilik website. Halaman ini biasanya berisi
form-form yang digunakan untuk mengajukan hal-hal yang ingin ditanyakan seperti form
nama, email, pesan, dan sebagainya. Serta berisi alamat, nomor telepon, email, dan lain-lain
yang berhubungan dengan pemilik website.

9. Footer yang informatif

Footer yang informatif adalah footer yang menampilkan informasi-informasi penunjang
secara ringkas tanpa mengganggu desain yang ada. Karena footer terletak di dasar suatu
website sehingga tidak akan menghalangi desain suatu web.
Pada footer yang informative biasanya memuat sitemap, deskripsi singkat pemilik web,
maupun kontak pemilik web. Dengan begitu akan membuat pengunjung mudah
mendapatkan informasi-informasi tersebut setelah membaca informasi yang ia inginkan.

10. Kualitas Media

Untuk menunjang informasi yang terdapat pada web, tentu membutuhkan media yang
dapat memperagakan informasi tersebut. Namun ada hal yang perlu diperhatikan saat
memasukan media yang diinginkan ke dalam website.
Suatu media dikatakan dapat menunjang informasi pada suatu website ketika memiliki
kualitas yang baik. Namun semakin baik kualitas suatu media, maka semakin besar pula
ukuran dari media tersebut. Ini tentu akan mempengaruhi waktu muat dari website yang
mana apabila terlalu lama, akan membuat pengunjung jenuh dan meninggalkan website
tersebut.
Langkah Mendesain Web

1. Planing : Designer akan menentukan tujuan website dengan klien, fitur-fitur yang
dibutuhkan untuk menjalankan website, konten SEO untuk menaikan peringkat Website di
search engine, dan menentukan elemen visual lainnya.
2. Sitemap and wireframe creation : sitemap garis besar struktur halaman yang akan
membentuk website dan Wireframing adalah dasar dari website yang dirancang dengan baik.
3. Design : Pada tahap ini, Designer akan membuat design mockup, layout, prototype website.
4. Development & Testing : Pada tahap ini, Web Designer akan melakukan pengkodean
menerjemahkan mockup design ke halaman web yang sebenarnya. Ini seharusnya menjadi
langkah yang paling panjang karena anda akan melakukan uji coba setelah website selesai
dan sebelum website di publis, proses uji coba ini dinamakan beta tester.
5. Lunch : Pada tahap ini Website sudah selesai melewati proses Development & Testing,
sehingga website akan dipublikasikan ke internet.
6. Maintenance : Tahap maintenance adalah tahap akhir dari pembuatan website, ditahap ini
website akan dilakukan pengecekan mingguan seperti : backup file & database, improve
backlink, improve visitors, bug checker, health checker, improve SEO, Domain & Hosting.

Yang Perlu Diperhatikan Saat Mendesain Web

1. Penggunaan warna yang tepat
Warna sangat berpengaruh dalam sebuah desain. Seperti yang telah kita ketahui, masing
masing warna memiliki karakter tersendiri, dan mecerminkan suasana tertentu. Skema warna
(kombinasi warna) dalam desain harus bisa mewakili karakter yang diinginkan. Tetapi perlu
diingat, kombinasi warna yang berlebihan akan mengalihkan pengunjung dari konten
website.

2. Teks yang mudah dibaca

Teks harus mudah dibaca, hal ini bisa dicapai dengan mengatur kontras warna teks
dengan background. Selain itu penggunaan font yang tepat juga perlu diperhatikan, jenis
font, ukuran font, style dan konsistensinya dalam desain. Selain itu pengaturan paragraf dan
 jarak antara teks dengan elemen lain juga perlu diperhatikan. Whitespace atau ruang kosong
antar elemen harus harmonis. Semua hal tersebut bertujuan supaya Teks mudah dibaca.

3. Desain visual yang harmonis

Image atau gambar secara visual merupakan unsur atau elemen utama dalam desain.
Image bisa digunakan sebai pemanis, atau penyeimbang atau point of interest. Sebaiknya
pemilihan image sesuai dengan keseluruhan tema dan karakter desain website. Komposisi
image dengan elemen lain juga harus sesuai, adakalanya sebuah website membutuhkan
image yang besar (hampir fullscreen) untuk memberi kesan tertentu, dan dikombinasi
dengan teks yang lebih kecil porsinya, ada pula website dengan komposisi teks yang lebih
banyak dan image hanya sebagai unsur tambahan. Komposisi antara image dengan teks
tergantung dari tema dan karakter yang ingin dibangun.
Yang penting harus bijaksana dalam memilih, menempatkan, dan mengkomposisi image,
dan yang tidak kalah penting adalah kualitas image itu sendiri. Hal lain yang harus menjadi
pertimbangan adalah besarnya file. Kecepatan load sebuah halaman website sebagian besar
ditentukan oleh besarnya ukuran file, terutama image, apalagi bagi kita di Indonesia yang
kecepatan akses internetnya sebagian besar dibawah rata-rata.

4. Layout yang Simpel

Layout atau tataletak desain diusahakan sesederhana mungkin, minimalisir elemen-
elemen yang tidak penting, maksimalkan whitespace (jarak antar elemen). Website dengan
layout yang baik, mudah untuk dijelajahi, pengunjung mudah untuk menemukan sesuatu,
dan dengan cepat menemukan apa yang dicarinya.
Layout yang berantakan membuat pengunjung kesulitan dan membutuhkan waktu lebih
lama untuk menemukan sesuatu. Penempatan yang tidak sesuai, point of interest yang
menyesatkan, dan urutan tata letak yang acak, sangat tidak menguntungkan.

5. Alur yang mudah dimengerti

Layout desain website harus bisa menuntun pengunjung dan mengarahkan mereka ke
sesuatu yang kita inginkan, jadi kitalah yang menuntun alur perhatian pengunjung dari titik
a, ke titik b, ke titik C, dan seterusnya, sehingga tujuan kita dan misi dari website bisa
 dicerna dengan baik oleh pengunjung. Hal ini tidaklah mudah, berbeda dengan media lain
seperti televisi, dan koran, audience dalam kendali pemberi informasi, mereka menerima apa
adanya dan pasif, dan tidak melakukan tindakan aktif untuk memilah. Sedangkan pada
website, pengunjung memiliki kendali penuh, mereka aktif, dan oleh karena itu alur dari
desain website harus jelas dan mudah dipahami agar pengunjung tidak frustasi menemukan
apa yang mereka inginkan.

6. Menu Navigasi yang jelas

Salah satu elemen penting yang juga wajib diperhatikan adalah navigasi atau menu.
Menu navigasi adalah satu-satunya cara pengunjung berinteraksi dengan website. Ada
banyak cara dan banyak desain menu navigasi, tetapi yang tidak boleh dilupakan adalah
fungsi utamanya, sebagai alat interaksi pengunjung dengan website.
Website bisa saja mempunyai beberapa menu/navigasi, bisa diatas pada header, atau pada
sidebar, maupun dibawah pada footer. Tidak ada rumus yang mengharuskan dimana kita
menempatkan menu, yang penting harus menyatu dengan alur dan layout desain sebuah
website.