Tips Desain Website Friendly – Web Design adalah salah satu istilah tentang desain secara visual yang diterapkan kepada media digital yaitu website. Dimana hal ini juga berkaitan dengan apa itu web development, Karena pengembangan sebuah website tidak hanya menuntut fungsionalitas website tersebut, melainkan kita juga membutuhkan sebuah esensi seni yang disebut design https://www.dumetschool.com/.
pada artikel sebelumnya yaitu pada Cara merancangan kerangka website kita telah membahas mengenai pembuatan kerangka website secara native, sekarang mimin akan membagikan Tips Desain Website Friendly untuk sebuah website native. Dengan native kalian dapat dengan bebas bekarya dan membuat code dan desain sesuai kemauan kalian, kalian tidak harus mengikuti aturan baku seperti menggunakan framework.
atikel Tips Desain Website Friendly ini, merupakan tugas kuliahan yang pernah mimin kerjakan, di sini mimin akan membagikan kepada kalian mengenai tugas tersebut. Kalian dapat mengambilnya sebagai bahanreferensi dan belajar.
berikut Tips Desain Website Friendly ala mimin.
Tips dan Trik Desain Website Friendly
⦁ Tampilan desain web pada komputer
Berikut merupakan tampilan desain web pada komputer
Untuk ukuran desain tersebut panjang 960px dan lebar 1100px. Tema yang diambil ialah informasi kartun yang tentunya website tersebut berisikan mengenai kartun yang ada diberbagai negara. Terdapat beberapa bagian pada website tersebut diantarnya ialah sebagai berikut:
⦁ Header
Pada tampilan header ini terdapat icon media social dari pembuat website tersebut seperti email, no telpon, facebook, instragram, twiterr, line, dan whatapps. Selain itu juga pada tampilan header ini terdapat garis yang memisahkan bagian header dengan bagian body website ini. Pada header ini jenis font yang dipakai utuk email dan no telpon adalah jenis font DFPOP1-W9. Untuk icon email dan telpon tersebut menggunakan warna dengan nama sky blue dengan CMYK = 100, 20, 0, 0). Selain itu juga di header ini terdapat beberapa icon untuk beberapa media social yang digunakan oleh pemilik website tersebut
⦁ Body
Body merupakan isi dari website dibuat. Maka dalam bagian body terdiri dari beberapa bagian untuk kombinasi dan menarik tampilan dari website. Diantaranya ialah sebagai berikut:
⦁ Judul website
Pada judul website ini merupakan judul dari website yang akan dibuat oleh pembuatan website ini. Pada judul ini menggunakan jenis font yang berbeda dengan pada bagian header yaitu pada judul ini menggunakan jenis font cooper bleck.
⦁ Menu
Pada bagian menu ini terdapat 5 buah menu yang akan digunakan pada saat website tersebut akan dijalan kan yang akan menampilkan dari isi website tersebut. Menu yang akan digunakan didalam website ini adalah beranda, kartun, Negara, profil dan tentang. Pada bagian menu ini menggunakan jenis font yang digunakan sama dengan jenis font yang ada di header yang digunakan pada email dan no telpon. Jadi pada bagian ini menggunakan jenis font DFPOP1-W9.
⦁ Banner dan slide show
pada bagian benner ini terdapat garis penghalat dan terdapat angka yang digunakan untuk mengganti setiap benner tersebut berganti pada angka ini menggunakan jenis font arial, selain itu juga terdapat benner yang menampilkan gambar untuk kartun yang sesuai dengan tema dari website tersebut. Selain itu juga terdapat keterangan dari kartun tersebut
Pada bagian penjelasan gambar ialah berupa informasi secara umum mengenai kartun yang ditampilkan. Namun jika diklik gambar tersebut maka akan menampilkan informasi secara rinci mengenai kartun tersebut. Untuk font yang dipakai ialah Buxton Sketch dengan warna putih agar memperjelas pengguna membaca informasi tersebut. Tujuan menggunakan font tersebut ialah agar sesuai denga tema ialah mengenai kartun maka penyusun menggunakan font yang tidak terlalu formal namun dapat jelas dibaca.
⦁ Rekomendasi kartun
Pada bagian menu ini terdapat 5 buah menu yang akan digunakan pada saat website tersebut akan dijalan kan yang akan menampilkan dari isi website tersebut. Menu yang akan digunakan didalam website ini adalah beranda, kartun, Negara, profil dan tentang. Pada bagian menu ini menggunakan jenis font yang digunakan sama dengan jenis font yang ada di header yang digunakan pada email dan no telpon. Jadi pada bagian ini menggunakan jenis font DFPOP1-W9.
⦁ Banner dan slide show
pada bagian benner ini terdapat garis penghalat dan terdapat angka yang digunakan untuk mengganti setiap benner tersebut berganti pada angka ini menggunakan jenis font arial, selain itu juga terdapat benner yang menampilkan gambar untuk kartun yang sesuai dengan tema dari website tersebut. Selain itu juga terdapat keterangan dari kartun tersebut
Pada bagian penjelasan gambar ialah berupa informasi secara umum mengenai kartun yang ditampilkan. Namun jika diklik gambar tersebut maka akan menampilkan informasi secara rinci mengenai kartun tersebut. Untuk font yang dipakai ialah Buxton Sketch dengan warna putih agar memperjelas pengguna membaca informasi tersebut. Tujuan menggunakan font tersebut ialah agar sesuai denga tema ialah mengenai kartun maka penyusun menggunakan font yang tidak terlalu formal namun dapat jelas dibaca.
⦁ Rekomendasi kartun
Pada bagian rekomendasi kartun background yang digunakan ialah warna putih dikarenakan menyesuaikan kartun rekomendasi yang tampilannya cerah. Serta untuk tulisan “Episode Terbaru Kartun Terfavorit” font yang digunakan ialah Buxton Sketch. Sama halnya dengan informasi dari kartun tadi tujuannya ialah menyesuaikan tema dari website agar pengguna tidak bosan ketika mengunjungi website tersebut. Selanjutnya untuk bagian tulisan dari gambar font yang digunakan ialah MV Boli. Warna tulisan pada bagian rekomendasi menggunakan warna sky blue (C,M,Y,K : 100,20,0,0).
⦁ Footer
Pada bagian footer menggunakan background warna sky blue (C,M,Y,K : 100,20,0,0). Makna dari warna sky blue ialah melambangkan ketenangan. Sesuai dengan temanya ialah mengenai kartun. Maka dengan membuka website ini diharapkan pengguna dapat mendapatkan ketenangan dan jiwanya lebih kokoh lagi karena diliputi perasaan bahagia. Footer berisikan copyright dari kartunis.
⦁ Backgrond website
Pada bagian background didominasi menggunakan gambar dari salah satu kartun. Alasan dipilih menggunakan background tersebut ialah menyesuaikan tema wabsite.
⦁ DESAIN WEBSITE MOBILE-FRIENDLY
⦁ Mock-Up
Membuat Mock-Up adalah langkah pertama yang harus dilakukan pada saat mengerjakan sebuah proyek desain halaman web. Tujuan Mock-Up ini ialah untuk memberikan kesempatan untuk mempraktekkan proses perancangan tata letak web dan membuat Mock-Up yang sebenarnya yang menggambarkan gagasan desain.
⦁ Desain
Desain biasa diterjemahkan sebagai seni terapan, arsitektur dan berbagai pencapaian kreatif lainnya. Desain juga dapat diartikan sebagai rancangan yang merupakan susunan dari garis, bentuk, ukuran, warna serta value. Desain merupakan bentuk rumusan dari proses pemikiran, pertimbangan dan perhitungan dari desainer yang dituangkan dalam wujud gambar.
⦁ Website
Website adalah suatu halamn web yang saling berhubungan yang umumnya berada pada paladin yang sama yang berisikan kumpulan informasi yang disediakan secara perorangan, kelompok, atau organisasi. Sebuah situs web biasanya ditempatkan setidaknya pada sebuah server web yang dapat diakses melalui jaringan seperti internet, ataupun jaringan wilayah local (LAN) melauli alamat internet yang dikenali sebagai URL. Gabungan atas semua situs yang dapat diakses public diinternet disebut pula sebagai World Wide Web ata lebih dikenal dengan singkatan WWW. Sebuah halaman web merupakan berkas yang ditulis seagai berkas teks biasa (plain text) yang diatur dan dikombinasikan sedemikian rupa dengan instruksi-instruksi berbasis HTML atau XHMTL, kadang-kadang pula disisipi dengan bahas skrip. Berkas tersebut kemudian diterjemahkan oleh peramban web dan ditampilka seperti layaknya sebuah halaman pada monitor computer. Halaman-halaman web tersebut diakses oleh pengguna melalui protocol komunikasi jarigan yang disebut sebagai HTTP, sebagai tambahan untuk meningkatkan aspek keaman dan aspek privasi yang lebih baik, situs web dapat pula mengimplementasikan mekanisme pengaksesan melalui protocol HTTP.
⦁ Mobile-Friendly
Websiste Mobile-Friendly adalah website yang dirancang untuk bisa ditampilkan dengan baik pada perangkat atau layar yang lebih kecil, sperti pada smartphone Android atai iPhone dan tablet berukuran sedang. Menurut hasil riset Google sendiri, 77% pencarian menggunakan ponsel dilakukan oleh pengguna dirumah, sementara 17% sisanya disaat sedang berpergian. Ini artinya, meskipun pengguna sedang berada dirumah pengguna tetap cendernng menggunakan ponsel untuk melakukan pencarian diinternet. Karena menurut pengguna pencarian menggunakan mobile cenderung lebih cepat dan nyaman, disbanding menggunakan PC atau Notebook. Pada umumnya, website dapat dikatakan Mobile-Friendly ketika website tersebut mampu tampil dengan baik dan menyesuaikan dengan pengguna layar yang lebih kecil. Desain website yang Mobile-Friendly berarti informasi yang tampil pada website mulai dari gambar, teks video dan link, dapat diakses dengan mudah pada setiap platform yang berbeda, terutama pada layar yang lebih kecil.
Standar pembuatan website pada desktop tidak berlaku untuk perangkat ponsel, dimana website harus disesuaikan dengan ukuran layar yang lebih kecil dan format konten yang mobile-friedly, termasuk:
⦁ Teks yang lebih besar dan mudah dibaca
⦁ Navigasi yang Mobile-Friendly
⦁ Elemen halaman dan tombol yang ramah digunakan
⦁ Proses download yng lebih cepat
Ketika merancang website untuk penggunaan dilaar yang lebih kecil, maka perlu mengenali tiga perbedaan dasar anatra perangkat ponsel dan desktop
⦁ Ruang yang terbatas
⦁ Perhatian atau focus pengguna
⦁ Pengguna perangkat ponsel biasanya sudah memiliki tujuan yang pasti, pengguna akan langsung mencari kata kunci dari informasi yang diinginkan. Oleh karena itu, pedoman utama bagi desain website pada perangkat ponsel adalah kesederhanaan dan spesialisasi. Setiap website harus disederhanakan dengan informasi yang cukup dan fungsi yang lebih sedikit. Ukuran tombol, link teks dan gambar harus diubah menjadi lebih fungsional dan dapat dibaca
