Definisi dan istilah desain web yang perlu Anda ketahui

Desain web sekarang telah ada untuk sementara waktu, dan tidak membuang waktu untuk mengembangkan bahasa yang kompleks dan penuh dengan jargon. Segera setelah Anda mengambil langkah terkecil ke dalam dunia desain web, Anda mulai mendengar “CMS apa yang ingin Anda gunakan?”, “Apakah Anda menginginkannya di paro atas atau paro bawah?”, “Apakah Anda ingin tetap tata letak?”, “Hosting web apa yang ingin Anda gunakan?” dan Anda bertanya-tanya apa artinya semua itu. Kami tahu bahwa mencoba mencari tahu semua definisi dan istilah utama desain web bisa sangat melelahkan, terutama jika semuanya baru.

Desain web mencakup banyak pekerjaan mulai dari pengembang web yang menulis kode, hingga perancang UI dan UX yang mengerjakan antarmuka, hingga perancang web yang menjaga tampilan dan nuansa situs Anda. Ada banyak orang yang terlibat dalam desain web.

Mempelajari apa arti beberapa akronim dan jargon dalam desain web dapat membuat bekerja dengan desainer dan pengembang Anda jauh lebih mudah, dan juga dapat membantu Anda memahami cara kerja situs web Anda sendiri. Jadi apakah Anda menyewa bantuan atau melakukannya sendiri, mengetahui istilah yang paling umum digunakan, dan paling membingungkan, dalam desain dan pengembangan web dapat berguna:

• Definisi desain web
• Anatomi situs web ujung depan
• Anatomi situs web ujung belakang
• Web teknis dan istilah internet
• Terminologi pengembangan web

Definisi desain web

Aksesibilitas

Aksesibilitas adalah masalah besar dalam desain web saat ini. Artinya, pada dasarnya, seberapa mudah situs web Anda diakses oleh orang-orang, termasuk siapa saja yang memiliki gangguan pendengaran atau penglihatan. Penting untuk mengingat hal ini sebelum dan saat Anda membuat situs web. Lihatlah enam langkah ini untuk membuat desain web Anda mudah diakses jika Anda tidak yakin harus mulai dari mana.

Elastis (tata letak)

Tata letak elastis adalah pendekatan untuk mendesain halaman web yang menggambarkan hubungan antara elemen dan posisinya di halaman sebagai persentase, bukan jarak dan ukuran yang dirancang khusus. Ini berarti halaman web lebih mudah beradaptasi—baik untuk preferensi yang ditetapkan oleh pengunjung Anda dalam hal ukuran dan spasi font, tetapi juga untuk mengoptimalkan halaman agar dapat dilihat di smartphone atau tablet.

Saat ini, tata letak elastis adalah bagian penting dari pendekatan desain responsif, tetapi sebelum ide desain responsif muncul, tata letak elastis menyediakan cara sederhana untuk membuat situs web dapat beradaptasi.

Ex

Ex adalah unit pengukuran yang menggunakan huruf kecil “x” dalam font sebagai ukuran standar.

Lebar tetap (tata letak)

Tata letak lebar tetap adalah metode mendesain halaman web di mana seorang desainer akan menentukan seberapa besar halaman web dan di mana tepatnya elemen akan muncul di dalamnya. Ini memberi desainer lebih banyak kendali atas desain halaman web daripada tata letak elastis, tetapi membuat halaman kurang adaptif terhadap ukuran layar yang berbeda.

Heksadesimal

Heksadesimal, juga dikenal sebagai bilangan “hex”, adalah sistem bilangan berbasis 16, yang berarti mereka menggunakan 16 simbol untuk menentukan warna. Angka heksadesimal menggunakan angka dari 0 hingga 9 dan huruf dari A hingga F. Setiap warna didefinisikan dengan tiga pasang angka heksadesimal. Pasangan angka atau huruf pertama terkait dengan rona merah, pasangan kedua dengan rona hijau dan pasangan ketiga dengan rona biru.

Pengguliran tanpa batas

Pengguliran tak terbatas adalah saat konten baru dimuat saat Anda terus menggulir. Ini menciptakan gulungan “tak terbatas”, tidak pernah berakhir. Beberapa contoh populernya adalah garis waktu Facebook, Pinterest, atau umpan Twitter.

Pengguliran paralaks

Metode pengguliran ini menciptakan kesan kedalaman dalam desain situs. Saat pengguna menggulir, elemen di situs web akan tampak berada pada jarak yang berbeda dan bergerak dengan kecepatan berbeda saat pengguna menggulir. Ini menciptakan ilusi kedalaman dan jarak pada situs web datar.

Resolusi

Resolusi adalah jumlah piksel yang ditampilkan pada layar. Ini adalah metode standar yang digunakan dalam desain web untuk menentukan ukuran gambar. Kualitas gambar biasanya dijelaskan dalam satuan piksel per inci, dengan jumlah piksel yang lebih tinggi menghasilkan gambar berkualitas lebih tinggi.

Responsif / ramah seluler / dioptimalkan untuk seluler

Pada tahun 2020, lebih dari setengah lalu lintas web terjadi di ponsel cerdas. Ini berarti semakin penting bagi situs web untuk tampil terbaik di seluler, serta desktop. Untuk membuat situs web responsif / ramah seluler / dioptimalkan untuk seluler berarti merancang dan mengembangkan situs web yang akan beradaptasi dengan perangkat atau layar tempat mereka dilihat.

Kegunaan

Kebergunaan adalah konsep dalam desain web yang menjelaskan seberapa berguna situs Anda bagi pengunjung yang dirancang untuknya. Idealnya, pengunjung akan dapat menggunakan situs Anda dengan mudah saat pertama kali bertemu, dengan hambatan minimal, frustrasi, dan kebutuhan untuk meminta bantuan. Memahami prinsip kegunaan adalah langkah kunci dalam membangun situs web yang hebat.

UX (riset pengguna) / UI (antarmuka pengguna)

Desain UX dan UI adalah pekerjaan yang meningkatkan pengalaman bagi pengguna. Penting untuk mengetahui perbedaan UX dan UI untuk mengetahui bagaimana mereka bekerja sama.

UX, riset pengguna, melibatkan semua aspek interaksi pengguna dengan situs web, dari awal hingga akhir. Tujuannya adalah untuk meningkatkan kualitas interaksi antara pengguna dan situs web.

UI, antarmuka pengguna, berfokus pada elemen visual dan interaktif situs web, seperti tombol, ikon, tipografi. Tujuannya adalah untuk meningkatkan tampilan dan fungsi situs web.

Anatomi situs web frontend

Remah roti

Saat halaman web menunjukkan kepada pengguna cara mereka menavigasi melalui halaman web, dan cara kembali ke halaman utama, sering kali dilakukan melalui remah roti. Ini umumnya ditampilkan sebagai rangkaian kategori bersarang, seperti Beranda > Kategori > Tahun > Bulan > Pos.

Favicon

Favicon adalah ikon kecil yang ditampilkan di bilah tab browser Anda. Mereka umumnya berukuran 16×16 piksel (yang sangat kecil), dan disimpan sebagai gambar .ico, .gif, atau .png. Anda dapat menggunakan hampir semua gambar yang Anda suka sebagai favicon, selama ukurannya tepat dan disimpan dalam format yang benar.

Titik fokus

Titik fokus pada halaman web adalah bagian dari halaman yang menarik perhatian Anda. Desainer akan menghabiskan banyak waktu untuk memastikan bahwa mereka mendesain titik fokus yang benar-benar menarik perhatian pemirsa, dan kemudian akan menempatkan hal terpenting pada halaman di titik fokus tersebut. Ini memastikan bahwa itu dilihat oleh sebanyak mungkin orang.

Frontend

Ini semua adalah elemen seperti gambar, teks, halaman yang akan dilihat orang saat pertama kali mengunjungi situs Anda. Ini pada dasarnya adalah apa yang orang akan berinteraksi dan terlibat di situs web.

Halaman arahan

Ini adalah halaman pertama yang akan dilihat pengunjung situs Anda. Di banyak situs web, halaman arahan khusus digunakan untuk mendapatkan sesuatu dari pengunjung (berbagi alamat email mereka, atau halaman khusus untuk suatu produk misalnya). Halaman arahan Anda adalah salah satu halaman terpenting di situs web Anda, dan Anda harus menghabiskan banyak waktu untuk mengoptimalkannya.

Navigasi

Navigasi adalah sistem yang digunakan untuk berpindah antar elemen halaman web Anda, dan merupakan salah satu elemen terpenting dari halaman web mana pun. Itulah mengapa penting untuk mengetahui prinsip utama navigasi situs web. Contoh navigasi paling jelas adalah menu yang muncul di sebagian besar halaman web. Tetapi juga perhatikan baik-baik bagaimana halaman diatur dan tautan di antara mereka. Ini juga dapat membuat navigasi di sekitar halaman web menjadi lebih mudah bagi pengunjung.

Anatomi situs web backend

Backend

Ini adalah bagian dari sistem Anda yang menjalankan situs web Anda secara efektif, tetapi tersembunyi dari pengunjung. Ada banyak backend berbeda yang tersedia, tetapi semuanya umumnya berisi hal yang sama—aplikasi, struktur informasi, dan CMS Anda.

CMS

Sistem Manajemen Konten—ini adalah alat ujung belakang untuk menjalankan konten situs Anda, menambahkan pengguna, mengelola komentar, dan berpotensi lebih banyak lagi. Jika Anda pernah menggunakan WordPress untuk membangun situs web, Anda telah menggunakan CMS. CMS membuat perancangan dan pembuatan halaman web jauh lebih mudah karena menyembunyikan banyak kode mentah yang dijalankan situs web.

Perdagangan elektronik

E-niaga adalah singkatan dari “perdagangan elektronik”. dengan cara yang sama bahwa “email” adalah singkatan dari “surat elektronik”. Anda biasanya akan menambahkan toko e-niaga ke situs web Anda yang akan menangani deskripsi produk, jual beli, dan juga data pelanggan.

HTTP / HTTPS

Ini adalah sistem yang menangani pertukaran data antara browser, server, dan aplikasi web. Ini mendefinisikan bagaimana data harus dikemas dan dikirim.

HTTPS adalah perpanjangan dari HTTP yang mampu membuat koneksi melalui SSL (Secure Socket Layer). Ini adalah cara yang jauh lebih aman untuk bertukar data secara online. Banyak browser web modern akan memperingatkan Anda jika situs web menggunakan HTTP standar daripada HTTPS.

Sebagai pemilik situs web, Anda dapat membeli sertifikat SSL—diperlukan untuk menggunakan HTTPS—dari berbagai penyedia. Setelah ditambahkan, ini akan membuat situs Anda lebih aman dan membangun kepercayaan dengan pelanggan Anda.

Pengaya

Sepotong kecil perangkat lunak yang berada di atas situs dasar Anda untuk menyediakan fungsionalitas keamanan tambahan. Plug-in tersedia untuk sebagian besar platform CMS populer dan dapat digunakan untuk berbagai macam fungsi, mulai dari mengotomatiskan postingan blog hingga mengelola prospek pelanggan.

Template

Templat digunakan dalam desain web dengan cara yang sama seperti yang digunakan untuk dokumen dan gambar—untuk memberikan konsistensi desain di banyak halaman berbeda. Sebagian besar platform CMS akan memberi Anda satu set templat untuk situs web Anda yang akan membantu menjaga halaman dan desain Anda konsisten di seluruh situs.

Web teknis dan istilah internet

Teks jangkar

Anchor teks adalah frase, atau beberapa kata, yang berisi hyperlink. Seperti ini: Penjelasan Teks Jangkar. Menggunakan teks jangkar yang tepat dapat membuat perbedaan besar pada seberapa baik halaman Anda dalam peringkat mesin pencari.

Tautan balik

Ini adalah tautan ke situs web Anda dari situs web lain. Ketika situs lain menautkan ke situs Anda untuk mengarahkan pembaca mereka ke sumber daya, misalnya, Anda telah menerima tautan balik. Tautan balik sangat penting untuk meningkatkan peringkat pencarian Anda, karena beberapa tautan balik dari situs tepercaya akan meningkatkan visibilitas situs Anda.

Bandwidth

Bandwidth adalah istilah yang digunakan dalam berbagai konteks, tetapi pada dasarnya berarti jumlah data yang dikirim atau diterima selama periode tertentu. Ini dapat digunakan untuk menggambarkan kecepatan internet Anda, misalnya, yang biasanya dikutip dalam kilobit per detik (kbs). Namun terkadang, ini digunakan untuk menjelaskan berapa banyak data yang dapat Anda gunakan per bulan sebagai bagian dari paket hosting web Anda.

Cache

Cache adalah kumpulan data yang disimpan oleh browser web. Ini berarti bahwa lain kali pengguna mengunjungi situs, halaman akan memuat lebih cepat karena dimuat dari memori lokal.

DNS

DNS adalah singkatan dari “Layanan Nama Domain”. Ini adalah sistem yang digunakan browser web Anda untuk mencari di mana halaman web berada. Saat Anda mengetik 99designs.com, browser Anda akan melihat “tabel DNS”, yang mengubah alamat ramah-manusia ini menjadi alamat ramah-komputer (yaitu terbuat dari angka). Sistem DNS melacak di mana semua halaman web di dunia berada, sehingga browser Anda dapat menemukannya.

Domain

Ini adalah nama situs web Anda. Anda dapat membeli domain dari banyak perusahaan. Panjangnya paling banyak 63 karakter. Misalnya, 99designs.com adalah nama domain kami.

FTP

FTP adalah singkatan dari “protokol transfer file”, dan merupakan sistem untuk mentransfer file dan data dari penyimpanan lokal (di, katakanlah, komputer Anda) ke server web Anda. Untuk menggunakan FTP, Anda perlu mengunduh perangkat lunak kecil yang disebut klien FTP.

Permalink

Tautan permanen yang memungkinkan Anda menentukan alamat yang akan selalu mengarah ke posting atau halaman blog tertentu, tidak peduli bagaimana Anda mengubah struktur situs Anda di sekitarnya. Ini sangat berguna jika Anda menggunakan posting blog untuk meningkatkan lalu lintas ke situs Anda karena Anda tidak perlu mengubah lusinan (atau ratusan) tautan secara manual jika Anda memutuskan untuk mendesain ulang situs Anda atau mengubah nama domain Anda.

URL

Alamat yang menentukan di mana halaman tertentu atau sumber daya lainnya dapat ditemukan.

Hosting web

Host web adalah perusahaan yang menjalankan server tempat situs web Anda disimpan. Seperti yang kami jelaskan di artikel kami tentang apa itu hosting web, host web dapat sangat bervariasi dalam tingkat layanan yang mereka tawarkan. Host web yang baik akan dapat meyakinkan Anda bahwa situs Anda akan dapat diakses 99,9% setiap saat, dan juga akan memberi Anda alat untuk menjaganya agar tetap aman dan efektif.

Server web

Server web adalah komputer tempat halaman web Anda sebenarnya disimpan. Kemungkinan terletak di instalasi server yang dimiliki oleh host web Anda, meskipun juga memungkinkan untuk menjalankan server Anda sendiri.

Terminologi pengembangan web

CSS

CSS adalah singkatan dari Cascading Style Sheets, dan di samping HTML, sheet ini adalah bagian paling mendasar dari halaman web mana pun. Satu dekade yang lalu, pemformatan yang digunakan pada halaman web, untuk sesuatu seperti seberapa besar judul atau apakah gambar memiliki batas, ditentukan dalam kode HTML itu sendiri. Ini berarti bahwa mengubah pemformatan adalah proses yang melelahkan untuk menelusuri setiap elemen halaman dan mengubah kodenya.

Dengan CSS, semuanya menjadi lebih mudah. Gaya halaman dimuat dalam satu (atau lebih) file CSS, yang menentukan tampilan judul, tampilan gambar, dan banyak elemen lainnya. Ini memberi tahu browser cara merender situs web. Dengan cara ini, format seluruh situs web dapat disesuaikan hanya dengan mengganti satu kode.

DHTML

DHTML adalah singkatan dari Dynamic HyperText Markup Language. Ini adalah istilah untuk bahasa yang memadukan sejumlah bahasa desain web—HTML, JavaScript, dan CSS—menjadi satu bahasa super untuk pengembangan web. Ini umumnya yang akan digunakan oleh pengembang web modern untuk membuat situs web untuk Anda.

Doctype

Dalam HTML, doctype adalah deskripsi HTML jenis apa dan versi mana yang digunakan oleh halaman web. Ini digunakan oleh browser untuk memeriksa integritas halaman dan dapat menimbulkan kesalahan keamanan jika salah.

EM

Em digunakan untuk menggambarkan ukuran font dalam kaitannya dengan font “induk” yang digunakan pada halaman. 1Em berarti font (atau terkadang elemen lain) memiliki ukuran yang sama dengan elemen induknya, 2em berarti ukurannya dua kali lipat, dan seterusnya.

Font family / gaya / berat

Desainer dan pengembang web sering tidak bekerja dengan font tertentu, karena browser yang berbeda tidak selalu menggunakan font yang persis sama. Itu sebabnya dalam dokumen CSS Anda akan melihat bahwa font yang akan digunakan didefinisikan sebagai font family—sekelompok font yang dapat digunakan, bukan satu secara khusus. Bersamaan dengan definisi ini, dokumen CSS juga akan menentukan gaya font (miring, bergaris bawah, dll.) dan bobot (tebal, ringan, dll.).

HTML

Hypertext Markup Language—ini adalah dasar dari internet. Semua halaman web ditulis, setidaknya sampai batas tertentu, dalam HTML, yang dikembangkan agar semudah mungkin untuk ditulis. Ini bisa sangat bermanfaat, bahkan, Anda dapat menemukan tutorial pengkodean HTML secara online—Anda akan terkejut dengan apa yang dapat Anda capai dalam beberapa jam!

MetaData

MetaData adalah data yang terdapat di header halaman web. Data ini tersedia untuk browser Anda, tetapi tidak ditampilkan sebagai bagian dari halaman web yang Anda lihat—Anda harus melihat kode sumber untuk mengaksesnya.

Open source

Perangkat lunak open source dikelola oleh pengguna, dan bebas untuk digunakan dan dimodifikasi. Ini kontras dengan perangkat lunak berpemilik, yang dimiliki dan dikelola oleh perusahaan tertentu. Sebagian besar pengembang web akan menggunakan perangkat lunak sumber terbuka, setidaknya untuk beberapa waktu, karena tidak hanya lebih murah, tetapi juga lebih aman. Saat ini, sebagian besar pengembang web akan meminimalkan pelanggaran keamanan dengan menggunakan wadah yang dikodekan dalam bahasa sumber terbuka.

XML

XML adalah singkatan dari Extensible Markup Language. XML adalah bagian mendasar dari desain web, karena berfungsi sebagai “bahasa meta” yang menerjemahkan elemen dari satu bahasa ke bahasa lain. Ini berarti halaman web dapat dibangun menggunakan banyak bahasa berbeda, masing-masing berkomunikasi melalui XML.

Kesimpulan

Tentu saja, tidak perlu mengetahui semua definisi dan istilah desain web ini untuk mulai mendesain situs web — baik sendiri atau dengan bantuan. Pada akhirnya, desain web adalah proses pembelajaran, dan desain terbaik adalah karya seni berulang yang terus ditingkatkan saat Anda mempelajari hal baru.

Yang mengatakan, akan sangat membantu untuk memiliki panduan ke dunia desain web yang terkadang rumit, terutama saat Anda pertama kali memulai. Desainer web profesional kami dapat membantu Anda memulai dunia desain web yang menarik.