Pengenalan Desain Web
Jenis-jenis peruntukan website seperti : website untuk pemberitaan, website e-commerce, website sistem informasi pendidikan, website LMS, website profil perusahaan, Blog dan lain sebagainya dibangun dengan tampilan atau desain web yang berbeda-beda.
Apa itu Desain Web ?
Desain web adalah proses pengembangan Web untuk membuat situs web yang berfokus pada faktor estetika seperti tata letak (layout), antarmuka pengguna (user interface), dan citra visual lainnya agar website tersebut menjadi lebih menarik dan tentunya mudah dipahami oleh visitor.Elemen Desain Web ?
Dalam merancang suatu halaman website melibatkan berbagai jenis elemen visual seperti :- Layout
Untuk memahami seperti apa maksud layout dalam sebuah halaman web, silahkan perhatikan gambar di bawah ini :
- Pemilihan warna
Teknik pemilihan warna yang tepat merupakan salah satu hal yang seharunya diperhatikan oleh seorang seorang desainer web. Warna memiliki makna dan representasi dari suatu informasi.
Pemilihan warna pada sebuah halaman website dapat menarik perhatian, mengekspresikan makna, mmendorong konversi, dan bahkan mendapatkan loyalitas pelanggan. Pilihan warna yang baik membutuhkan perencanaan yang matang dan bila dilakukan dengan benar dapat mempengaruhi bagaimana pengunjung menafsirkan apa yang mereka lihat pada layout dan copywriting.
Berikut ini represntasi umum dari suatu warna :
Sumber :studio1design.com/ - Grafis (Image)
Maksud penggunaan grafis/image pada sebuah halaman website adalah penggunaan seperti : logo, foto, clipart, atau ikon, yang semuanya menyempurnakan desain web. Penggunaanya juga perlu diperhatikan agar tidak membebani kecepatan loading sebuah halaman web. - Pemilihan Font
Apa anda pernah mendengar istilah "Web-safe fonts" ?
Web-safe fonts adalah jenis-jenis font yang dapat beradaptasi dengan browser apa pun dan di perangkat apa pun. Dengan menggunakan jenis font tersebut, web designer dan developer memastikan bahwa font yang dimaksud akan selalu ditampilkan dengan baik pada suatu halaman web, meskipun font tersebut tidak terpasang di komputer pengguna. Namun pada dasarnya web-safe font ini sudah terinstala pada semua jenis operasi seperti windows, mac os, linux dan sistem-sistem operasi pada smartphone.
Berikut ini adalah 15 jenis font yang relatif aman digunakan :
No Nama Font Tampilan 1 Arial Contoh Text 2 Helvetica Contoh Text 3 Times New Roman Contoh Text 4 Times Contoh Text 5 Courier New Contoh Text 6 Courier Contoh Text 7 Verdana Contoh Text 8 Georgia Contoh Text 9 Palatino Contoh Text 10 Garamond Contoh Text 11 Bookman Contoh Text 12 Comic Sans MS Contoh Text 13 Trebuchet MS Contoh Text 14 Arial Black Contoh Text 15 Impact Contoh Text
- Navigasi
Desain situs web harus mudah dinavigasi dan item menu harus mudah diakses dari halaman mana pun. Visitor harus selalu tahu persis di mana mereka berada di situs web dan memiliki akses mudah ke tempat yang mereka inginkan. Peta situs adalah ide bagus dan akan digunakan jika tersedia.
User Experience (Pengalaman pengguna) mengacu pada cara pengunjung merasakan kegunaan dan estetika situs web Anda. Anda ingin semua orang yang mengunjungi situs Anda mendapatkan pengalaman pengguna yang baik. Salah satunya dari kehadiran navigasi yang mudah dipahami oleh visitor.
- Konten
Konten merukan isi dari sebuah halaman website yang meliputi penggunaan image,grafik(chart), multimedia, sekumpulan paragraf kalimat, tabel dsb yang fungsinya menjelaskan informasi dari sebuah dokumen web.
- Web Design, [online](https://www.techopedia.com/definition/10009/web-design)
- What is Web Design?, [online] (https://www.treefrog.ca/what-is-web-design/)
- Psychology of Colours in Web Design – How Colour Affects Perception [online] (https://inkbotdesign.com/psychology-of-colours-in-web-design/)
- How Important is Color in Website Design ?, [online](https://studio1design.com/how-important-is-color-in-website-design/)
- Mengenal Web Safe Fonts, [online](https://www.warungbelajar.com/tutorial-belajar-css-web-safe-fonts.html)
- Site Structure, [online](https://webstyleguide.com/wsg3/3-information-architecture/3-site-structure.html)
