Kerangka Website

-

 Kerangka Website


Apa Kerangka Website?

Kerangka web, atau dalam bahasa Inggris dikenal sebagai "wireframe," adalah kerangka dasar dari halaman website. Di dalam wireframe terdapat berbagai komponen seperti banner, header, content, footer, link, form, dan lain-lain. Wireframe biasa ditugaskan kepada ahlinya, yang biasa dikenal sebagai UI/UX Designer. Untuk melakukannya, seorang UI/UX Designer menggunakan kertas coretan atau software khusus untuk wireframing. Wireframe hanya menampilkan lembaran yang terdiri dari kotak-kotak dan garis-garis untuk mengatur tata letak berbagai elemen pada website atau aplikasi.

Struktur Kerangka Website

1. Header



Bagian atas halaman yang biasanya berisi logo, judul situs, dan menu navigasi. Header adalah salah satu elemen terpenting dari situs web Anda, karena rasio antara ruang yang dibutuhkan dan manfaat yang diberikannya tak tertandingi. Header memberikan gambaran umum tentang seluruh situs web dan navigasi yang mudah melalui tautan, menu yang dirancang dengan baik, dan bilah pencarian. Mereka juga merupakan tempat yang tepat untuk mempromosikan merek Anda dengan logo perusahaan dan tipografi serta skema warna yang tepat.

2. Menu Navigasi



Daftar tautan yang membantu pengunjung menemukan halaman-halaman penting di situs. Adanya navigasi akan memudahkan pengunjung masuk ke halaman yang mereka butuhkan dengan lebih cepat. Navigasi website umumnya berupa menu yang berisi link ke halaman lain sesuai dengan nama halaman tersebut.

3. Konten Utama



Bagian di tengah yang berisi informasi utama, seperti teks, gambar, dan video. Konten sendiri memiliki pengertian elemen kreatif. Menyajikan konten berkualitas adalah salah satu strategi marketing yang efektif untuk meningkatkan brand awareness, menghasilkan lebih banyak leads, dan menyediakan pengalaman yang baik bagi pengguna.

4. Sidebar



Sidebar adalah bagian dari tata letak sebuah halaman website yang berada di sisi kiri atau kanan halaman utama. Bagian ini umumnya berisi informasi tambahan, navigasi, atau elemen lain yang tidak termasuk dalam konten utama halaman. Sidebar website memiliki ukuran yang lebih kecil dibandingkan dengan area konten utama.

5. Footer



Bagian bawah halaman yang biasanya mencakup informasi kontak, tautan kebijakan privasi, dan hak cipta. Umumnya, dalam satu desain footer website berisi beberapa informasi tambahan website yang tidak bisa pengguna temukan melalui navigasi utama. Dengan menyediakan link ke beberapa halaman web penting seperti privacy policy dan form kontak, kamu bisa mencegah pengunjung untuk tidak segera meninggalkan website.

Jenis Jenis Aplikasi Untuk Membuat Kerangka Website

1. Adobe XD: Aplikasi desain yang mendukung pembuatan wireframe serta prototipe interaktif dengan fitur kolaborasi. Adobe XD adalah software desain yang dirancang khusus untuk memenuhi kebutuhan desain UI/UX suatu website, mobile app, dan berbagai platform digital lainnya. Sebagai bagian dari suite Adobe Creative Cloud, Adobe XD menyediakan platform intuitif dan efisien untuk menciptakan desain wireframe, prototipe interaktif, dan aplikasi atau website yang responsif.



2. Wireframe.cc: Wireframe.cc adalah salah satu opsi terbaik kalau Anda memerlukan tool sederhana namun efisien untuk membuat mockup website atau aplikasi seluler. Tool wireframing berbasis web ini memiliki antarmuka yang rapi dan mudah digunakan. Alat online sederhana yang memungkinkan pengguna membuat wireframe tanpa banyak gangguan.

3. Lucidchart: LucidChart merupakan salah satu tools populer untuk membuat diagram online. Melalui tools ini, para pengguna dapat memvisualisasikan berbagai informasi kompleks dengan mudah melalui flowchart atau diagram alir. Selain untuk diagram, alat ini juga memungkinkan pembuatan wireframe dengan berbagai template.

Manfaat Membuat Kerangka Website

1. Menghemat Waktu

Dengan menggunakan wireframe, pembuatan website akan lebih menghemat waktu. Karena perubahan pada desain website jauh lebih mudah dan cepat jika dilakukan pada saat masih berupa konsep.

2. Memberikan Gambaran Website Sejak Awal

Tak perlu menunggu website jadi untuk tahu konsep desainnya. Dengan wireframe, semua orang yang terlibat dalam proses pengembangan website bisa mengetahui gambaran website sejak awal.

3. Pengembangan Lebih Terstruktur

Dengan adanya wireframe, pengembangan website jauh lebih terstruktur. Tidak hanya karena konsep dasar sudah diketahui tapi juga karena masing-masing komponen sudah tertata dengan baik.

Comments

Post a Comment

Popular posts from this blog

Perangkat Keras dan Perangkat Lunak

-
Image
Pengertian Perangkat keras dan perangkat lunak saling melengkapi karena keduanya bekerja sama untuk menciptakan sistem komputer yang efisien dan fungsional.  Perangkat Keras  Perangkat keras;h ardware adalah semua bagian fisik komputer, dan ini dibedakan dengan data yang berada di dalamnya atau yang beroperasi di dalamnya seperti peranti lunak (software) yang menyediakan instruksi untuk perangkat keras dalam menyelesaikan tugasnya (secara otomatis). Perangkat keras komputer memiliki berbagai fungsi seperti untuk memproses dan menyimpan data, menyediakan tempat penyimpanan, menghubungkan perangkat lain, memberikan input, memberikan output, memproses dan menyimpan audio dan video,dan memungkinkan konektivitas internet.  CPU ( Central Processing Unit ) Central Processing Unit adalah hardware yang berfungsi untuk mengolah data dari setiap instruksi yang diberikan. Dengan adanya CPU maka semua perintah yang diberikan ke dalam komputer bisa langsung dijalankan secara cepat dan ...
Read more

HTML dan CSS

-
Image
 HTML dan CSS Pengertian HTML dan CSS HTML adalah kependekan dari Hypertext Markup Language yang merupakan sebuah bahasa markup. HTML adalah kode untuk membuat struktur halaman suatu website yang menarik, saling terhubung satu dengan yang lainnya, dan yang pasti dapat diakses melalui internet.  Awalnya html ditemukan oleh Tim Berners-Lee pada tahun 1991. HTML adalah solusi untuk membantu ilmuwan dalam mengakses dokumen, namun kini html semakin berkembang pesat di dunia pemrograman web. CSS adalah singkatan dari cascading style sheets, yaitu bahasa yang digunakan untuk menentukan tampilan dan format halaman website. Dengan CSS, Anda bisa mengatur jenis font, warna tulisan, dan latar belakang halaman.  CSS digunakan bersama dengan bahasa markup, seperti HTML dan XML untuk membangun sebuah website yang menarik dan memiliki fungsi yang berjalan baik. CSS juga berguna untuk mengatasi keterbatasan HTML dalam mengatur format halaman website. Fungsi HTML  1. Berfungsi untu...
Read more

TEKS LAPORAN HASIL OBSERVASI

-
Image
 KEJU Sejarah Keju Keju pertama kali dibuat 800SM yang lalu. Penemu keju adalah aristaeus. Homerus menyatakan bahwa cyclops yang menginisiasikan pembuatan keju dengan susu domba dan susu kambing pertama kalinya. Keju adalah sebuah makanan yang dihasilkan dengan memisahkan zat-zat padat dalam susu melalui proses pengentalan atau koagulasi. Keju terbuat dari susu yang digumpalkan. Proses penggumpalan ini bisa dilakukan dengan menambahkan asam atau menggunakan enzim rennet yang dibantu oleh bakteri baik. Bahan dan Jenis Keju Pembuatan keju sangatlah mudah, hanya butuh 4 bahan saja. Yaitu susu kambing, pengental keju, garam dan asam cuka. Selain cara buatnya, bagian yang menarik pada keju adalah jumlahnya yang sangat beragam. Ada keju mozarella yang sangat populer untuk pizza, keju pamesan yang biasa orang pakai untuk pasta, keju cheddar yang biasa untuk sandwich, keju gouda yang mudah meleleh biasa digunakan dalam makaroni, dan blue cheese biasanya untuk penutup makanan. Langkah ...
Read more