10 Elemen Penting Desain Web

Disadari atau tidak, desain web adalah perjumpaan pertama antara pembaca dengan kita.
Semakin baik kesan yang didapat, maka konten  kita akan memiliki kesempatan yang lebih
tinggi untuk sampai kepada pembaca. Begitu juga dengan produk atau jasa yang sedang kita
jual. Bukan itu saja, tampilan situs web juga berpengaruh terhadap SEO. Semakin SEO friendly
tampilan situs web kita, maka semakin tinggilah peringkat yang akan kita dapat.

Anda tidak perlu jago mendesain web atau jago koding untuk membuat tampilan web yang
memikat sekaligus ramah SEO. Yang perlu Anda lakukan hanyalah memastikan bahwa web
Anda memiliki 10 elemen penting yang akan kami bahas setelah … oke, kami akan
membahasnya sekarang.

Elemen Penting Desain Web

Desain web, sama seperti fesyen, selalu berubah mengikuti perkembangan zaman. Ada trend
yang sama sekali baru, ada pula yang merupakan pengulangan dari trend beberapa tahun ke
belakang. Tapi, elemen-elemen esensial di dalamnya tidak banyak berubah.

Elemen desain web bukan hanya agar web elok dipandang, tapi juga agar memudahkan pembaca
dan Google Crawler ketika menjelajahi web kita. Dengan kata lain, meningkatkan user
experience (UX).

Elemen #1: Layout

Layout sebuah situs web hendaklah mempertimbangkan letak penyusunan elemen-elemen

desain yang memudahkan pembaca untuk mencerna aliran informasi. Perhatikan hierarki dan
keseimbangan layout secara keseluruhan. Susunan paling umum adalah atas-bawah-kiri-kanan.
 Tip:

 Buat susunan atau aliran informasi yang mudah diikuti oleh mata pembaca.
  Susun elemen berdasarkan skala prioritas dari paling penting → penting → kurang
penting.
 Sebagian besar orang terbiasa membaca dari kiri ke kanan, maka letakkan main post di
sebelah kiri sedangkan sidebar di sebelah kanan.
 Perhatikan pula keseimbangan susunan elemen desain.

Elemen #2: White Space

White space berguna untuk membantu mata manusia mengorganisasi data. Bagi Anda yang
belum begitu familiar dengan istilah desain, white space bisa diartikan sebagai ruang kosong
yang memisahkan antara satu elemen dengan elemen lainnya. Situs web adalah sebuah ruang
berisi berbagai informasi, agar informasi itu dapat diolah dengan baik oleh mata pembaca, maka
ruang kosong berfungsi sebagai jeda.

Fungsi ruang kosong (Lia Anggraini S. & Kirana Nathalia, 2014:82):

 Berfungsi sebagai separator untuk setiap elemen desain.

 Memberi fokus terhadap elemen yang ingin ditonjolkan.
 Memberi kesan desain yang lebih clean dan relaxing.
 Menciptakan layout yang lebih seimbang dan harmonis.
 Meningkatkan keterbacaan teks.
Tip:
  Gunakan ruang kosong dengan jarak yang sama antara satu elemen dengan elemen
lainnya.
 White space juga termasuk jarak antarbaris dan antarparagraf dalam body text.

Elemen #3: Jenis Huruf

Prinsip memilih huruf untuk web (web fonts) agak berbeda dengan ketika memilih huruf untuk
materi cetak seperti brosur, pamflet, buku, atau materi cetak lainnya. Sebab ketika membaca di
layar, mata manusia lebih cepat lelah daripada ketika membaca di atas kertas.

Berikut beberapa hal yang harus diperhatikan ketika memilih jenis huruf untuk web:

 Klasifikasi huruf. Kenali klasifikasi huruf dan karakternya masing-masing. Setidaknya

ada 4 klasifikasi dasar huruf: serif, sans serif, script, dan dekoratif.
1. Serif memberikan kesan klasik, resmi, dan elegan. Biasanya digunakan
pada buku, surat kabar, dan konten formal atau semi formal. Contoh: Times New
Roman (TNR), Garamond, Georgia, Cambria.
2. Sans Serif adalah huruf yang paling cocok untuk digunakan karena memiliki
tingkat readibility yang lebih tinggi di layar komputer jika dibandingkan dengan
huruf serif. Memberikan kesan formal sekaligus kasual. Contoh: Helvetica, Arial,
Trebuchet, Verdana, Josefin Sans.
3. Script memiliki banyak sekali variasi (brush, handwriting, kaligrafi, dll),
memberikan kesan klasik, santai, dan kasual. Karena karakternya yang seperti
huruf tegak bersambung (well, ini memang huruf tegak bersambung), jenis huruf
script lebih sulit dibaca di layar. Anda bisa menggunakan jenis huruf ini untuk
judul post, tapi hindari menggunakannya untuk body text.
4. Dekoratif, sama seperti script, huruf dekoratif juga memiliki banyak sekali
variasi dari mulai yang betul-betul alfabet, simbol, hingga ikon-ikon tertentu.
Huruf dekoratif tidak terlalu cocok digunakan untuk web fonts baik untuk judul
maupun body text. Tapi, Anda bisa menggunakan huruf jenis ini untuk tulisan di
image asalkan hanya untuk satu atau dua kata, bukan untuk kalimat panjang.
 

 Karakter. Huruf memiliki psikologinya sendiri-sendiri, pilih jenis huruf yang sesuai
dengan karakter situs web atau produk Anda.

 Legibility. Adalah tingkat kemudahan mata mengenali suatu karakter/huruf tanpa harus
bersusah payah (Lia Anggraini S. & Kirana Nathalia, 2014:64). Ada beberapa jenis huruf
yang sulit dibaca sehingga pesan yang ingin disampaikan pun sulit diolah oleh pembaca,
misalnya jenis-jenis huruf script atau dekoratif. Perhatikan contoh huruf di bawah,
keduanya memakai jenis huruf yang sama, tetapi memiliki legibility yang berbeda. Kata
 pertama menggunakan tittle case atau kombinasi huruf besar dan kecil, sedangkan yang
kedua memakai all caps atau kapital.

 Readibility. Readibility berkaitan dengan bentuk huruf dan hubungannya dengan huruf

lain. Jenis huruf yang memiliki tinggi bervariasi lebih mudah dibaca daripada huruf yang
memiliki tinggi sama. Readibility juga berhubungan dengan jarak antarhuruf dan jarak
antarkata.

 Warna. Apa pun warna favorit Anda, entah itu merah, ungu, biru, atau merah muda,
Anda tidak bisa begitu saja mengaplikasikannya ke dalam web fonts. Warna paling baik
untuk body text adalah hitam atau gradasi abu-abu tua. Warna lain di dalam body text
hanya dipergunakan untuk link atau subjudul. Judul? Boleh, Anda boleh memakai huruf
berwarna-warni untuk judul atau judul sidebar, tapi pastikan warna yang Anda gunakan
konsisten.
  Ukuran. Ukuran berpengaruh terhadap readibility. Dalam jarak dekat, mata manusia
tidak bisa membaca huruf yang terlalu kecil juga huruf yang terlalu besar. Ukuran paling
pas untuk body text biasanya antara 10-12px. Untuk judul, header, sidebar, dan elemen
lainnya bisa Anda sesuaikan dengan bidang layout.

Tip:

 Jenis huruf sans serif paling baik untuk digunakan di layar.

 Gunakan MAKSIMAL 2 jenis huruf di dalam satu situs web. Anda bisa
mengkombinasikan antara huruf serif dengan sans serif atau script dengan sans serif.
Misalnya, Georgia untuk judul dan Helvetica untuk body text.
 Gunakan variasi ukuran huruf untuk menandai skala prioritas aliran informasi. Misalnya,
12px untuk body text, 10 px untuk text snippet di sidebar, 8 atau 9px untuk footer.
 Anda bisa memilih kombinasi huruf yang paling cocok di Google Fonts.

Elemen #4: Pilihan Warna

Situs web bukan kanvas berisi lukisan abstrak, kita sedang menyampaikan informasi kepada
pembaca, bukan sedang mendistraksi mata mereka. Yang terpenting dari situs web adalah
konten, jangan sampai warna latar yang Anda gunakan lebih ramai dari konten itu sendiri.
Warna juga memengaruhi psikologi pembaca, menciptakan mood, bahkan menyelusup ke alam
bawah sadar. Warna, bisa menyampaikan simbol dirinya sendirinya bahkan tanpa disertai oleh
teks. Itu sebabnya mengapa pemilihan warna merupakan salah satu elemen penting dari desain
sebuah web.
Tip:

 Gunakan warna muda untuk latar dan warna tua untuk teks, bukan sebaliknya.
Misalnya, latar putih atau abu-abu muda untuk latar dan hitam atau abu-abu tua untuk
huruf body text.
 Jika Anda tidak yakin dengan pilihan warna yang sesuai, gunakan gradasi abu-abu
(grayscale).
 Hindari menggunakan warna-warna primer untuk latar: merah, biru, kuning. Ada jutaan
gradasi warna di dunia ini, Anda bisa memilih satu di antaranya.
 Pilih hanya SATU warna yang akan di-highlight. Untuk variasi, Anda bisa menggunakan
warna lain tapi dengan tone yang sama atau gradasi dari warna utama.

 
Elemen #5: Navigasi

Navigasi ibarat denah atau petunjuk jalan yang memudahkan pembaca untuk mencari kategori
konten atau produk apa pun yang mereka inginkan. Letakkan navigasi di tempat yang mudah
ditemukan, juga pilih bentuk navigasi yang mudah digunakan agar pembaca betah berlama-lama
di situs Anda.

Navigasi juga bertujuan seperti sistem kearsipan: mudah menyimpan dan menemukan data.
Tip:

 Letakkan navigasi di bagian paling atas layout. Bisa di bawah atau di atas header.
 Kategorikan navigasi berdasarkan produk atau subtopik utama dari situs web Anda.
 Untuk pengalaman pengguna yang lebih baik, sebaiknya hanya gunakan SATU baris
navigasi.
 Gunakan menu dropdown untuk memisahkan antara subtopik dengan sub-subtopik.
 Anda bisa menggunakan navigasi linear atau navigasi hamburger.

Elemen #6: Tombol “Search”

Tidak ada yang lebih menyebalkan selain ketika berkunjung ke sebuah situs web dan tidak
menemukan tombol search. Kita tidak akan pernah tahu apa yang ingin ditemukan oleh pembaca
ketika datang ke situs web kita. Navigasi, kategori, dan label adalah opsi yang kita berikan,
sedangkan tombol search adalah kebebasan. Pembaca tidak memiliki waktu yang cukup untuk
mencari dari satu kategori ke kategori lain atau dari satu konten ke konten lain.
Tip:

 Letakkan tombol di tempat yang mudah dilihat. Biasanya di sebelah navigasi atau di bawah
header.
 Gunakan tombol berupa huruf atau simbol. Jika menggunakan simbol, HANYA gunakan simbol
lup yang merupakan simbol universal.
 Untuk pengalaman pengguna yang lebih baik, Anda bisa menggunakan fitur Google custom
search.

Elemen #7: Laman “About Me/Us”

Jika Anda bukan perusahaan besar, tidak memiliki jenis bisnis yang spesifik, bergerak di
bidang bisnis yang sama sekali baru, atau bukan pemilik situs web yang sangat terkenal, laman
“About Me/Us” memiliki beberapa fungsi:

 Memperkenalkan diri/perusahaan Anda.

 Memperkenalkan jasa/produk yang Anda miliki.
 Menjelaskan secara spesifik bidang yang Anda geluti.
 Membangun engagement dengan pembaca. Percaya atau tidak, pembaca lebih suka membaca
tulisan dari seseorang yang dia “kenal” daripada dari penulis misterius.
 Jika Anda adalah blogger, laman “About Me” akan memudahkan calon klien menemukan
informasi tentang siapa Anda.

Tip:

 Letakkan laman “About Me/Us” di navigasi agar mudah ditemukan.

 Laman “About Us” bisa dipergunakan untuk menceritakan visi dan misi perusahaan atau
organisasi.
 Berikan informasi yang jelas dan tidak bertele-tele. Anda bisa menceritakan tentang siapa diri
Anda, tapi hanya jika itu relevan atau berpengaruh terhadap citra diri yang ingin Anda tonjolkan.
Tidak, tidak usah terlalu panjang, ini profil, bukan cerpen.
 Anda juga bisa memasukkan informasi yang berguna seperti prestasi, testimoni, atau seluruh
akun media sosial. Kontak? Ya, Anda bisa memasukkan juga kontak di laman “About Me”.
 Foto? Well, ya, tentu saja boleh. Satu album? Tidak, gunakan satu saja dengan pose yang
sekiranya membentuk citra diri Anda.
 Sejarah Anda ngeblog? Kalau Anda bisa menceritakan itu dalam satu paragraf berisi tidak lebih
dari lima kalimat, silakan. Kalau cerita itu menghabiskan 500 kata, sebaiknya buat post tersendiri.
 Jika Anda adalah profesional, sertakan juga skill dan jasa yang Anda berikan. Ratecard? Nggg …
sebaiknya tidak.

 
 

Catatan: Laman “About Me” di atas hanya contoh. Kami memang sengaja tidak menggunakan

foto asli untuk melindungi identitas staf kami dari serbuan para penggemar . Ketika
membuat laman “About Me”, tentu saja Anda harus menggunakan foto Anda sendiri. 

Elemen #8: Laman Kontak

Laman kontak berpengaruh terhadap autoritas. Pembaca dan klien tentu harus tahu apakah situs
yang mereka kunjungi benar-benar dikelola oleh perusahaan atau orang asli, bukan fiktif. Laman
kontak juga mempermudah mereka untuk menghubungi kita. Karena terus terang, seseorang
yang sulit dihubungi sering kali membuat frustrasi.

Anda bisa meletakkan laman kontak di beberapa tempat: navigasi, header, footer.
Apa saja yang harus ada di laman kontak:

 Perusahaan: Alamat lengkap, jam operasional, nomor telepon, surel.

 Personal: Alamat (lengkap atau hanya nama kota), nomor telepon (opsional), surel.
 Form (opsional).

Elemen #9: Footer yang Informatif

Footer bisa saja berisi pengulangan informasi dengan catatan informasi tersebut memang krusial.
Bisa juga berupa tambahan informasi berupa sitemaps, copyright, privacy policy, atau informasi
lain yang memudahkan pembaca.
Elemen #10: Kualitas Image

Walau bagaimanapun, kita harus tetap mempertimbangkan aspek-aspek visual untuk memikat
pembaca. Selain itu, ilustrasi dan foto memiliki fungsi untuk menjelaskan dan melengkapi
konten.

Tip:

 Gunakan foto atau ilustrasi dengan resolusi yang cukup agar tidak blur, minimal 150 PPI. Jika
Anda belum familiar dengan ini, Anda bisa melihatnya di properties. Klik kanan image →
properties → details.
 Gunakan file PNG agar meskipun ukurannya dikompres, resolusi dan ketajaman warnanya tidak
berubah.
  Akan lebih baik jika Anda menggunakan foto atau ilustrasi sendiri.
 Jika Anda menggunakan foto dari stock images, pastikan Anda memakai foto gratis, bukan yang
berlisensi seperti Shutterstock, Depositphotos, dll. Jika menggunakan dari penyedia images
berbayar, pastikan Anda memang MEMBELINYA, bukan hanya mencomot begitu saja dari
Internet lalu menggunakannya di blog Anda. Oh, dan tolong jangan coba-coba mengedit atau
menghilangkan watermark-nya.
 Gunakan foto yang relevan dengan konten.
 Jika menggunakan foto dari situs web lain, sebutkan sumbernya berupa direct link, bukan hanya
menyebutkan “Foto: Google”. Sebab Google adalah mesin pencari, bukan penyedia foto gratis.
 Jika Anda menggunakan foto sendiri dan ingin menggunakan watermark, gunakan watermark
sewajarnya. Iya, itu foto Anda dan Anda tidak ingin siapapun mencurinya, tapi jangan sampai
watermark mengganggu images secara keseluruhan.
 Anda yang menggunakan CMS WordPress bisa memanfaatkan plugin image editing untuk
mengatur tampilan images.

Template apa pun yang Anda gunakan, CMS apa pun yang terbiasa Anda pakai, tampilan web
tetap saja impresi pertama yang akan mengatakan siapa Anda, seberapa profesionalkah bisnis
Anda, atau sampai di mana pengetahuan Anda tentang teknologi. Apakah Anda harus jago
mendesain web untuk mempraktikkan poin-poin di atas? Tidak, tidak perlu. Elemen-elemen
tersebut biasanya sudah bawaan template, kok. Anda hanya perlu mengeditnya sedikit-sedikit.

Kami cukupkan sekian bahasan tentang elemen penting desain web ini, semoga bermanfaat dan
selamat praktik. Apabila ada saran tambahan atau pertanyaan, silakan tulis di kolom komentar
atau hubungi Ninja Support Online kami yang akan bersedia membantu Anda selama 24 jam
penuh.
 Panduan Membuat Desain Web
Desain web itu rumit. Kita harus mempertimbangkan banyak hal saat merancang sebuah situs
web, dari tampilan visual (bagaimana tampilan situs web) ke desain fungsional (bagaimana situs
web bekerja).

Saat ini, website sudah makin menjadi kompleks. Sama seperti fashion, desain website pun
selalu berubah-ubah mengikuti tren. Di tahun 2018 ini saja, sudah ada prediksi tren-tren website
design apa saja yang akan banyak Anda lihat di berbagai website.

Tentu saja dengan semakin kompleks desain web di jaman sekarang, semakin sulit juga bagi
Anda para web developer untuk membangun sebuah website dari nol. Ide-ide klien sendiri pun
sudah semakin rumit dan bermacam-macam. Maka dari itu, Anda memerlukan cara perencanaan
dan langkah-langkah kerja yang bisa membantu Anda untuk mengerjakan proyek desain web
dengan lebih efisien.

8 Langkah Web Desain yang Efisien

Seperti yang sudah disebutkan sebelumnya, salah satu faktor paling penting di industri desain
saat ini adalah mengatur workflow atau alur kerja agar Anda bisa bekerja dengan efisien. Untuk
dapat melakukan pekerjaan yang efisien, Anda tentunya memerlukan waktu untuk menyusun
pekerjaan Anda. Dengan membagi-bagi pekerjaan dalam beberapa tahapan, Anda tetunya bisa
menjadi lebih produktif dalam pengerjaan dan penyelesaiannya.

Setiap orang dan desainer memang memiliki proses desain yang mereka rasa paling enak dan
paling produktif. Di artikel kali ini, kami akan membahas workflow atau alur kerja desain yang
efisien untuk membantu Anda para designer. Apalagi bagi kalian yang men-desain dan
mengembangkan website. Ada lima langkah yang akan dibahas di artikel ini yaitu,
mendengarkan kebutuhan client, melakukan riset, mengumpulkan ide, dan sketch desain
website, buat wireframe dan style tiles, kemudian buat prototype desain web sebelum
Anda membangun dan mengembangkan website itu sendiri. Kelima langkah ini diharapkan
dapat membantu Anda untuk mendesain dan mengembangkan sebuah website dengan sukses dan
efisien.

Kebutuhan client

Desainer web sering berpikir tentang proses desain web dengan fokus pada hal-hal teknis seperti
wireframes, kode, dan manajemen konten. Namun desain yang hebat bukan saja tentang cara
Anda mengintegrasikan tombol media sosial atau bahkan visual yang menarik. Desain hebat
sebenarnya adalah membuat situs web yang sesuai dengan strategi menyeluruh.

Oleh karena itu, penting sekali bagi Anda untuk mengetahui tujuan dari website ini. Apa yang
sebenarnya klien inginkan dari website ini? Sebelum memulai perencanaan desain Anda,
Anda harus mengumpulkan informasi sebanyak-banyaknya dari klien Anda. Semakin Anda tahu
banyak, semakin cepat Anda bisa mengerjakan desain web-nya.

Dengarkan ide mereka

Biasanya klien tidak akan langsung memberi tahu Anda apa yang mereka inginkan, Anda
biasanya harus menanyakannya kepada mereka. Mereka ingin Anda bisa memvisualisasikan apa
yang mereka inginkan dari brief yang sudah mereka berikan. Ada juga klien yang kesulitan
untuk menyampaikan dan mengkomunikasikan yang mereka mau. Oleh karena itu, penting bagi
Anda untuk menanyakan klien pertanyaan-pertanyaan mengenai bisnis mereka. Anda harus
memastikan mood seperti apa yang mereka inginkan, apa yang mereka suka, dan tidak suka.

Kuesioner Klien

Salah satu cara yang bisa Anda lakukan adalah meminta klien Anda untuk mengisi sebuah
kuesioner tentang desain website yang mereka inginkan. Anda bisa memulai dengan menuliskan
pertanyaan penting apa saja yang bisa membantu Anda untuk memulai sebuah proyek. Misalnya,
apa tujuan dari website ini? Siapa target audiencenya? Siapa saja competitor klien Anda? Apa
yang klien Anda harap pengunjung website lakukan saat berada di website mereka?

Pastikan Anda mengirimkan kuis ini sebelum Anda mulai membuat proposal. Jika Anda
ingin melihat contoh, Anda bisa melihat form kuesioner desain ini.

Agar lebih mudah, Anda juga bisa membuat kuesioner ini menggunakan Google Docs sehingga
bisa diakses dimana saja dengan mudah oleh Anda maupun klien Anda.

Setelah klien Anda mengisi kuis ini, Anda bisa mengirimkan proposal dan membahas budget,
project scope, timeline, dan kepemilikian. Setelah proposal disetujui, Anda sudah bisa mulai
mengerjakan proyek tersebut.

Riset, Ide, dan Sketch

Bagian ini adalah salah satu bagian tersulit dalam suatu proyek. Ada banyak desainer di luar sana
yang langsung menggunakan Photoshop atau Illustrator dan memulai proses desain. Padahal, ada
baiknya Anda menggambarkan dulu desain web seperti apa yang Anda ingin buat di atas kertas.

Mulai Sketching

Menulis – atau mungkin dalam kasus ini menggambar – ide Anda di sebuah kertas adalah cara
yang efisien dalam proses brainstorming. Ambil waktu yang Anda butuhkan untuk berpikir dan
mulai sketching ide apapun yang muncul di kepala Anda. Anda juga tidak perlu langsung
menggambar layout desain web dengan detail. Anda bisa membuat bentuk-bentuk seperti
lingkaran dan kotak. Nantinya, ide-ide Anda bisa saja mulai bermunculan dengan natural. Jangan
lupa untuk menuliskan atau menggambar ide apapun yang muncul di kepala Anda di mana saja.
Kompilasikan inspirasi Anda

Inspirasi juga penting dan bisa sangat membantu dalam proses desain web. Anda bisa memulai
dengan menyiapkan sebuah folder bookmark di browser Anda. Mulai research dan kemudian
simpan berbagai halaman web yang Anda kira relevan. Jangan sampai Anda menjiplak elemen
atau ide dari website ini karena itu akan dianggap sebagai plagiasi. Cari website yang memiliki
desain paling menarik dan cocok dengan kebutuhan klien Anda. Kemudian tulis apa yang
Anda suka dan tidak suka dari desain web tersebut, baik layout, warna, bentuk, animasi, dan
sebagainya. Dengan begini, Anda bisa mendapatkan inspirasi bentuk layout dan tampilan untuk
website klien Anda.

Kenali competitor bisnis klien Anda

Ada baiknya Anda juga melihat desain website competitor bisnis klien Anda. Anda bisa
mempelajari desain web dari competitor local maupun international dan pelajari isi-isinya.
Elemen apa saja yang mereka semua miliki? Ini tentunya hal-hal yang harus Anda masukkan ke
website Anda. Apa yang Anda rasa harusnya mereka miliki tetapi tidak ada? Ini adalah hal-hal
yang bisa Anda masukkan ke website klien Anda. Selain itu, Anda juga bisa membaca artikel
kami tentang 10 elemen penting desain website.

Wireframe

Wireframe adalah blueprint website Anda. Ini adalah hal yang membantu memberikan website
Anda struktur visual. Beberapa desainer memiliki kecenderungan untuk memasukkan elemen
desain ke wireframe. Ini sebaiknya tidak dilakukan karena wireframe sebenarnya dimaksudkan
untuk memberi tahu Anda dimana elemen diletakkan, bukan bagaiman desain website ini akan
kelihatan nantinya. Wireframe juga sebaiknya ada di mode grayscale agar Anda focus 100 persen
ke layout desain web tersebut.

Untuk memulai, Anda memang membutuhkan pen dan kertas. Tulis dulu semua elemen yang
akan Anda masukkan ke halaman web. Setelah itu susun mereka di halaman webnya. Anda bisa
melakukan penyusunan ini dengan menggambar di kertas atau menggunakan tools wireframe
seperti Proto.io, wireframe.cc, dan bahkan Photoshop.

Di bawah ini adalah salah satu contoh wireframe yang lengkap:

Untuk melihat proyek lengkapnya, Anda bisa mengunjungi halaman Behance ini.

Wireframe sendiri harus memiliki hal-hal di bawah ini:

Letak Elemen

Anda tentunya tidak bisa memulai website Anda tanpa tahu dimana Anda ingin meletakkan
berbagai eleman yang sudah Anda rencanakan. Oleh karena itu, Anda harus tahu dimana Anda
ingin meletakkan berbagai elemen.

Hirarki Informasi

Sitemap yang memiliki banyak link bisa jadi membingunkan untuk seorang klien dan bahkan
untuk desainer. Dengan meletakkan sitemap, Anda akan dapat melihat bagaimana halaman-
halaman itu terlihat di website Anda. Dengan begini, Anda bisa melakukan penyesuaian sebelum
Anda sudah bergerak terlalu jauh ke depan.

Interaktif

Ketika Anda membuat sebuah wireframe, Anda juga harus bertanya: bagaimana elemen ini akan
berinteraksi satu sama lain? Apakah pengunjung website akan mau menghabiskan waktu lebih
banyak di website Anda? Apakah pengunjung website dapat dengan mudah menavigasi
websitenya? Di sinilah user experience akan sangat berperan.

Perencanaan Konten

Setelah kerangka situs web Anda tersedia, Anda dapat mulai dengan aspek yang paling penting
dari situs yaitu konten tertulis.

Konten sendiri memiliki dua tujuan penting:

Mendorong keterlibatan dan tindakan

Pertama, konten melibatkan pembaca dan mendorong mereka untuk mengambil tindakan yang
diperlukan untuk memenuhi tujuan sebuah situs. Ini dipengaruhi oleh konten itu sendiri (tulisan),
dan bagaimana materi itu disajikan (tipografi dan elemen struktural).

Konten yang singkat, tajam, dan menarik menarik perhatian mereka dan membuat mereka
mengklik ke halaman lain. Bahkan jika halaman Anda membutuhkan banyak konten, Anda perlu
dengan benar “memotong” konten tersebut dengan memecahnya menjadi paragraf pendek yang
dilengkapi dengan visual. Dengan begitu artikel Anda dapat tetap terasa ringan dan menarik.

Search Engine Optimisation

Konten juga meningkatkan keterlihatan situs untuk mesin telusur. Praktik pembuatan dan
peningkatan konten agar mendapat peringkat yang baik dalam pencarian dikenal sebagai search
engine optimization, atau SEO.

Mendapatkan kata kunci dan frasa kunci Anda sangat penting untuk kesuksesan situs web
manapun. Salah satu tools yang dapat Anda gunakan adalah Google Keyword Planner. Alat ini
menunjukkan volume pencarian untuk kata kunci dan frasa target potensial, sehingga Anda dapat
mengasah apa yang sebenarnya manusia cari di web. Karena mesin pencari menjadi semakin
canggih, konten Anda juga harus bisa mengikuti kecanggihan mesin pencari. Google Trends juga
berguna untuk mengidentifikasi istilah yang benar-benar digunakan ketika mereka mencari.
Untuk tahu lebih banyak tentang kedua tools Google ini, Anda bisa membaca Panduan Google
Keyword Planner dan Google Trends kami.

Proses desain pun juga harus focus pada perancangan situs web seputar SEO. Kata kunci yang
Anda ingin peringkat perlu ditempatkan di tag judul – semakin dekat ke awal, semakin baik.
Kata kunci juga harus muncul di tag H1, meta description, dan konten isi.

Konten yang ditulis dengan baik, informatif, dan kaya kata kunci lebih mudah diambil oleh
mesin telusur, yang semuanya membantu membuat situs lebih mudah ditemukan.

Biasanya, klien Anda akan menghasilkan sebagian besar konten, tetapi penting bagi Anda
untuk memberi mereka panduan tentang kata kunci dan frasa apa yang harus mereka
sertakan dalam teks.

Untuk tahu lebih banyak tentang kinerja halaman pada mesin pencari, Anda bisa membaca
artikel kami tentang Search Engine Optimisation atau SEO.

Style Tiles

Style tiles atau yang lebih dikenal dengan nama style guides atau panduan style adalah kumpulan
desain untuk visual branding sebuah web yang biasa berisi font, warna, dan element interface
yang akan membantu menyampaikan identitas website ini kepada pengunjung website. Style tiles
juga biasa sesuai dengan diskusi client. Elemennya biasa terdiri dari logo, typography, warna,
dan voice brand itu sendiri. Berikut ini adalah contoh Style Tiles.
Kenapa Anda harus menggunakan style tiles?

Visualisasi Konsep

Membuat sebuah style tiles akan membantu menerjemahkan mood, feeling, dan nada website
yang akan Anda buat. Ini juga akan mempermudah Anda untuk melihat apakah website ini sudah
sesuai dengan permintaan klien Anda. Selain itu, ini juga akan membantu Anda melihat dengan
lebih jelas bagaimana sebaiknya Anda menggunakan elemen desain agar klien bisa mengerti
desain Anda.

Menjaga konsistensi

Style tiles dapat membantu Anda menjaga konsistensi dalam tampilan website Anda. Misalnya
dengan warna, Anda tahu colour scheme apa yang ingin Anda gunakan agar website Anda
memiliki warna yang senada dan cocok. Dengan begini, Anda bisa bekerja dengan lebih mudah
dan konsisten.
Efisiensi waktu

Mendesain style tiles akan memudahkan Anda untuk menunjukkan kulit dari desain website
tersebut. Dengan begitu, jika klien merasa ada yang kurang atau ingin melakukan perubahan,
Anda tidak perlu mengulang proses desain website-nya. Anda tinggal mengupdate style tiles
Anda dan kemudian menunjukkannya lagi kepada klien.

Prototype

Membangun sebuah website sebenarnya hampir sama seperti membangun rumah; wireframe
berperan seperti floor plan dan interior desainnya berupa style tiles. Setelah Anda  membuat
wireframe dan style tiles, Anda hanya tinggal menggabungkan keduanya. Dengan
menggabungkan keduanya, Anda akan melihat tampilan website Anda.

Prototyping adalah proses dimana Anda membangun model website Anda sebelum Anda
membangun websitenya. Beberapa desainer suka mendesain prototype desain website mereka
dengan Photoshop. Jika Anda tidak terlalu suka Photoshop, Anda juga bisa menggunakan
framework web seperti inVision dan UXpin.

Prototype sendiri terdiri dari tiga langkah, yaitu:

Prototype

Mengimplementasikan style tiles ke layout sambil mengadaptasi tampilan dan fungsionaitas

dengan user experience. Ini dilakukan untuk memastikan bahwa desain web Anda tetap terlihat
menarik tetapi mudah dinavigasi dan digunakan.

Test

Step ini adalah langkah yang sangat penting. Di langkah ini, Anda akan mengevaluasi apakah
website Anda sesuai dengan kebutuhan dan ekspetasi klien. Anda bahkan bisa membagikan
prototype dengan pengguna Anda untuk mengetes interaktifitas dan user experiencenya.

Fine Tune

Di langkah ini, Anda bisa melakukan perubahan dan peningkatan kinerja website tersebut. Proses
ini mungkin membutuhkan waktu lebih lama, semuanya tergantung dengan berapa kali Anda
bertemu dengan client untuk mem-finalkan permintaan desainnya.

Testing Website

Setelah visual dan konten situs siap, website Anda siap untuk diuji.

Uji secara menyeluruh setiap halaman untuk memastikan semua tautan berfungsi dan situs web
dimuat dengan benar di semua perangkat dan browser. Kesalahan mungkin disebabkan oleh
kesalahan pengkodean yang kecil, dan meskipun seringkali sulit untuk menemukan dan
memperbaikinya, lebih baik lakukan sekarang daripada menyajikan situs yang rusak kepada
publik.

Jangan lupa juga untuk memeriksa halaman meta judul dan deskripsi. Bahkan urutan kata-kata
dalam judul meta dapat mempengaruhi kinerja halaman pada mesin pencari.

Launch website Anda

Jika semua sudah siap, sekarang saatnya untuk bagian favorit semua orang dari proses desain
web: Ketika semuanya telah benar-benar diuji, dan Anda senang dengan tampilan websitenya,
Anda tinggal meluncurkan website Anda.

Jangan berharap ini akan langsung berjalan dengan sempurna. Mungkin masih ada beberapa
elemen yang perlu diperbaiki. Desain web adalah proses yang berkelanjutan dan  membutuhkan
management yang konstan.

Desain web – dan benar-benar, desain secara umum – adalah tentang menemukan keseimbangan
yang tepat antara bentuk dan fungsi. Anda perlu menggunakan font, warna, dan motif desain
yang tepat. Tetapi cara orang bernavigasi dan mengalami situs Anda sama pentingnya.

Perancang yang terampil harus berpengalaman dalam konsep ini dan mampu membuat situs yang
berjalan di antara bentrokan yang rumit antara keduanya.

Hal penting yang perlu diingat tentang tahap peluncuran bukan berarti Anda sudah selesai
dengan projek ini. Proyek desain web sendiri bisa dibilang tidak pernah selesai. Setelah situs
dirilis, Anda dapat terus menjalankan pengujian pengguna pada konten dan fitur baru, memantau
analisis, dan memperbaiki pesan branding Anda.

Simpulan

Di artikel ini, kami telah membahas proses desain website yang efisien. Dengan mengikuti alur
kerja ini, Anda diharapkan dapat merencanakan project desain web Anda di depan, mencegah
berbagai hal yang dapat menghalangi alur kerja Anda, dan yang terpenting mengerjakan proyek
dengan lebih efisien. Langkah selanjutnya adalah bagian pengembangan. Jika Anda memiliki
keterampilan untuk mengembangkan situs web Anda maka prosesnya harus Anda ketahui. Jika
tidak, maka Anda memerlukan seorang pengembang web atau web developer untuk
mengaplikasikan web desain Anda ke website klien Anda. Semoga artikel ini membantu!