Memahami dasar-dasar desain web dapat membantu meningkatkan reputasi merek atau bisnis  dengan membangun kredibilitas dan membangun kepercayaan dengan pengunjung. Meskipun ada banyak aspek desain web yang perlu dipertimbangkan, akan dibahas beberapa dasar desain web yang diperlukan untuk memulai di situs web .

Tentukan tujuannya

Tahap pertama membuat situs web adalah menentukan tujuan situs web. Apakah membuat portofolio digital, menampilkan layanan bisnis kepada calon pelanggan, atau menjual produk secara online? Apa tujuan situs web ? Kejelasan adalah kuncinya: jika pengguna tidak memahami situs web, mereka akan pergi. Tujuan situs web harus jelas dan langsung.

Setelah menetapkan maksud situs web, langkah selanjutnya adalah menentukan audiens target. Untuk siapa situs web ? Merancang untuk pengguna yang dituju adalah salah satu dasar desain web yang klasik. Jika seorang desainer produk yang mencari pekerjaan baru, audiens target untuk situs portofolio adalah manajer perekrutan dan perekrut. Hal ini akan membantu membentuk apa yang menjadi prioritas di situs web dan bagaimana mengarahkan pengguna ke tempat yang tepat.

Untuk mengidentifikasi audiens target, lakukan riset pengguna tentang demografi, lokasi, dan sasaran pengguna. Pertimbangkan untuk melihat situs web pesaing dan halaman media sosial mereka untuk menganalisis siapa audiens target mereka dan membandingkannya dengan kebutuhan situs web. Coba juga untuk meneliti audiens target dan menyesuaikan konten situs web dan menyalinnya sesuai kebutuhan mereka. Hal ini meningkatkan peluang mereka untuk mengingat situs.

Membuat rencana

Sekarang setelah mengetahui tujuan dan audiens situs web, sekarang saatnya membuat rencana. Apakah membuat situs web dengan menyewa pengembang atau mencoba memahami HTML, CSS, dan Javascript? Jika tidak, jangan berkecil hati. Ada layanan seperti Squarespace, Wix, dan WordPress yang menawarkan cara tanpa kode untuk membangun situs web yang mendukung platform desktop dan seluler.

Setelah diputuskan, cari tahu anggaran untuk hosting web dan domain. Dan putuskan kapan akan meluncurkan situs. Jika menginginkan informasi lebih lanjut tentang cara membuat situs web, memilih domain, dan hosting web.

Cari inspirasi

Hasilkan ide untuk situs web dengan mencari inspirasi dari situs lain! Jika merasa buntu, bingung harus mulai dari mana, atau tidak yakin dengan tampilan situs web yang inginkan, ada banyak sekali situs web yang dapat memuaskan palet. Mulai dengan melihat Awwwards, sumber inspirasi untuk berbagai jenis desainer. Mereka menampilkan lusinan situs web pemenang penghargaan dan mempesona.

Desain dan penampilan tata letak

Salah satu dasar-dasar desain web melibatkan perancangan dengan kisi-kisi. Sistem grid adalah tata letak berdasarkan pengukuran dan pedoman. Kisi terdiri dari kolom (ruang yang ditentukan untuk penempatan konten) dan talang (ruang kosong di antara kolom). Panduan ini memecah halaman menjadi beberapa bagian untuk mengatur konten dan hierarki.

Saat memikirkan kisi dan tata letak, penting untuk memikirkan bagaimana hal itu akan memengaruhi desain responsif. Hal ini berarti bagaimana desain web akan beradaptasi dengan ukuran layar yang berbeda. Tata letak tetap bersifat statis dan wadah situs web tidak bergerak. Ukuran ditentukan dalam piksel. Hal ini tidak ideal karena jika layar menjadi cukup kecil, pengguna harus menggulir secara horizontal. Tata letak yang lancar menggunakan persentase, bukan piksel untuk ukuran. Hal ini memungkinkan tata letak fleksibel yang menyesuaikan saat membuat jendela lebih kecil dan lebih besar.

Tata letak adaptif adalah kisi yang memiliki titik henti sementara yang berbeda. Hal ini berarti situs web akan tetap sama hingga jendela menjadi kecil atau cukup besar sehingga dapat masuk ke ukuran desain tata letak berikutnya.

Tata letak responsif adalah campuran tata letak yang lancar dan adaptif. Tata letak ini terasa seperti tata letak yang lancar karena layar menyesuaikan saat pengguna membuat layar lebih besar dan lebih kecil, tetapi tata letak tidak didasarkan pada persentase. Melainkan memiliki desain untuk setiap breakpoint, biasanya untuk setiap ukuran layar yang tersedia. Hal ini berarti situs web akan terlihat bagus di setiap ukuran layar yang tersedia.

Hirarki visual

Situs web harus menggabungkan penggunaan arsitektur informasi yang ekstensif dan hierarki visual yang kuat untuk menciptakan pengalaman yang mulus bagi pengguna. Jika informasi situs web mudah dicerna dan terstruktur dengan baik secara estetika, ini akan membantu pengunjung menyelesaikan tugas pengguna mereka lebih cepat.

Ada banyak cara untuk meningkatkan hierarki visual situs. Beberapa cara untuk meningkatkan hierarki visual adalah dengan menggunakan warna dan kontras untuk menarik perhatian ke teks dan tombol tertentu, menambahkan lebih banyak ruang negatif di sekitar elemen yang ingin agar pengguna fokuskan dan memiliki keseimbangan dan simetri dalam tata letak dapat membuat segalanya tetap sederhana dan mudah digunakan.

Memahami pola membaca juga dapat membantu menentukan di mana harus menyimpan informasi. Penelitian telah menunjukkan banyak pengunjung memindai situs web dalam pola F atau Z. Biasanya, pengguna akan memindai halaman teks-berat dalam pola F.

Itulah mengapa informasi yang paling penting dan relevan diletakkan di kiri atas dan di bagian atas halaman. Halaman arahan sederhana yang tidak terlalu banyak teks sering dipindai dalam pola Z. Namun seiring waktu, ini dapat berubah seiring dengan perubahan ukuran layar, atau jika penggunaan seluler menjadi perangkat utama. Untuk menghindari hal ini, selalu ingat pengguna dan lakukan penelitian tentang pengguna dan bagaimana mereka menggunakan situs web.

Navigasi

Dasar-dasar membuat navigasi situs web yang baik adalah hierarki logis, kesederhanaan, dan keserbagunaan. Navigasi yang baik adalah kunci untuk membantu pengguna menemukan apa yang mereka butuhkan dan pergi ke tempat yang mereka butuhkan.

Ada beberapa jenis navigasi yang mungkin temui di situs web mana pun. Beberapa aplikasi dan situs seluler akan menggunakan kombinasi keduanya. Navigasi atas adalah jenis navigasi yang paling umum, ditampilkan di atau di dekat bagian atas situs web. Jika memiliki banyak halaman, dapat menggunakan navigasi tarik-turun yang memperluas lebih banyak opsi saat pengguna mengarahkan kursor ke item menu.

Navigasi Hamburger adalah tiga bilah horizontal yang biasanya terletak di sudut kanan atas atau kiri. Ketika pengguna mengklik ikon hamburger, menu akan muncul. Hal ini adalah cara yang bagus untuk meminimalkan kekacauan di situs web. Hal ini adalah fitur umum di situs web seluler atau jika menginginkan tampilan yang bersih atau sederhana untuk situs web.

Navigasi footer ada di bagian bawah situs web dan memiliki banyak informasi penting. Hal ini mungkin bukan hal utama yang ingin pengguna akses segera, tetapi itu penting dalam memberikan dukungan dan informasi penting lainnya bagi pengguna saat mereka membutuhkannya. Seringkali informasi itu termasuk ikon media sosial, syarat dan ketentuan, FAQ dan blog, untuk beberapa nama.

Navigasi bawah sama dengan navigasi atas, tetapi hanya di bagian bawah. Dengan meningkatnya popularitas penggunaan seluler, ada opsi untuk navigasi bawah untuk memudahkan pengguna mengklik dengan ibu jari mereka. Beberapa situs web menggunakan kombinasi keduanya.

Warna dan font

Pencitraan merek merupakan bagian integral dari cara pengguna mengidentifikasi situs web. Gambar seperti apa yang diinginkan untuk ditampilkan oleh situs web ? Apa yang ingin pengunjung katakan tentangnya? Branding menentukan jawaban atas pertanyaan-pertanyaan itu. Pastikan untuk memperhatikan skema warna dan tipografi. Skema warna dan pilihan font situs web harus konsisten dengan merek. Membiasakan diri dengan dasar-dasar teori warna akan sangat membantu dalam membangun merek dan situs web.

Tipografi merangkum merek tanpa mengorbankan keterbacaan. Dan memilih font yang tepat menambah gaya keseluruhan situs web dan merek.  Pastikan untuk memeriksa apakah font aman untuk web. Hal ini berarti memastikan browser mendukung font. Jika font tidak aman untuk web, hal itu dapat menyebabkan teks situs web tidak ditampilkan dengan benar di browser tersebut.

Font serif adalah untuk headline: biasanya font serif digunakan untuk headline karena lebih sulit dibaca pada ukuran yang lebih kecil. Sans serif adalah pilihan yang lebih baik untuk teks isi.

Pertahankan font minimal: Pilih beberapa font untuk situs web. Semakin banyak font yang gunakan di situs web, semakin berantakan tampilan situs web. Ditambah memiliki terlalu banyak font dapat membuat bentrokan gaya.

Isi / Konten

Konten situs web, yang terdiri dari salinan, gambar, video, dan elemen interaktif lainnya, adalah inti dari situs. Hal ini menarik orang dan membuat mereka tetap terlibat. Hal ini memberi situs tujuan dan mengilhami pengguna untuk mengambil tindakan, apakah itu untuk menghubungi atau membeli produk.

Alat lain yang kuat dari dasar-dasar desain web adalah penggunaan citra. Hal ini dapat memikat audiens dan membimbing mereka menuju konten situs web. Citra adalah cara yang bagus untuk memikat pemirsa, jadi gunakan alat ini untuk keuntungan. Poin bonus jika menyertakan demonstrasi, video, atau konfigurator produk. Pastikan ukuran file gambar kecil untuk waktu pemuatan halaman yang lebih baik. Gambar harus memiliki resolusi 72 PPI, yang merupakan standar untuk web. Jika harus menggunakan gambar beresolusi tinggi, pertimbangkan untuk menggunakan gambar mini yang menautkan ke gambar asli.

Gambar Ilustrasi : freepik.com Normal 0 false false false IN X-NONE AR-SA /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin-top:0cm; mso-para-margin-right:0cm; mso-para-margin-bottom:8.0pt; mso-para-margin-left:0cm; line-height:107%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri",sans-serif; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:Arial; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;}