Trentech.id Logo
No Result
View All Result
  • Login
  • Register
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
Logo Trentech.id
No Result
View All Result
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget

Belajar Konsep Wireframe Pada Website

17 July 2018
in Learn

Sebelum tahap development suatu website dimulai, tentu kita harus terlebih dahulu memiliki perancangan yang baik dan benar agar sesuai dengan target yang ingin dicapai. Perancangan suatu website tentu tidak lepas dari desain User Interface (UI) yang bertujuan merancang tampilan website. Salah satu tahap awal dalam merancang user interface adalah Wireframing.

Daftar Isi

  • Wireframe
      • Merancang layout
  • Manfaat Wireframe
  • Elemen Wireframe
      • 1. Desain Informasi
      • 2. Navigasi
      • 3. Desain Interface
  • Perbedaan Wireframe dengan Mockup dan Prototype
  • Tips

Wireframe

Wireframe adalah kerangka atau coretan kasar untuk penataan item-item pada halaman website sebelum proses desain sesungguhnya dimulai. Contoh item-item yang bisa ditata diantaranya banner, header, content, footer, link, form input, dll. Biasanya proses ini ditugaskan kepada UI Designer. Untuk merancang wireframe sang UI Designer bisa menggunakan coretan tangan di kertas ataupun menggunakan tools desain khusus wireframing. Secara visual wireframe hanya berupa garis dan kotak yang mengatur tata letak elemen-elemen pada website.

[postingan number=3 tag=”belajar-koding”]

Contoh Ilustrasi : Perusahaan A akan membuat sebuah website. Mereka berdiskusi apa saja konten yang akan ditaruh di halaman awal. Setelah memutuskan apa saja kontennya, mereka mulai membuat gambaran dengan pena dan spidol kira kira konten utama yang berisi produk yang sedang diskon yang ingin dipasarkan diletakan di mana dan produk tanpa diskon diletakan dimana.
wireframe

Merancang layout

Tahap awal yang perlu dilakukan saat merancang layout untuk wireframing adalah penentuan jumlah kolom suatu website. Terdapat dua tipe layout dasar yaitu, dua kolom dan tiga kolom sesuai dengan kebutuhan konten apa saja yang ingin diberikan. Tetapi dengan perkembangan tren UI Design, layout yang dipakai tidak selalu terpaku pada dua tipe layout tersebut.

Dua kolom

Manfaat Wireframe

Dengan adanya wireframe, web developer sangatlah terbantu pada pekerjaan mereka agar dalam proses pengembangan dapat terstruktur dan terarah. bayangkan bila tidak menggunakan wireframe terlebih dahulu mungkin saja dalam proses pengembangan sering terajadi revisi/perbaikan yang sangat memperlambat pekerjaan.

[postingan number=3 tag=”programmer”]

Elemen Wireframe

1. Desain Informasi

Pada elemen ini biasanya bersumber dari hasil riset apa saja konten atau informasi yang ingin disampaikan, yang dapat diilustrasikan sebagaimana pada saat presentasi di sekolah atau kampus, haruslah memiliki informasi yang terpercaya. Contohnya form input, thumbnail, gambar, link, paragraf, dll.

2. Navigasi

User interface tentu haruslah memiliki tampilan yang mudah digunakan, salah satu hal penting dalam website adalah navigasi. Diibaratkan navigasi adalah kompas yang berguna untuk memberikan petunjuk bagi pengguna agar tidak membingungkan, jika hal itu terjadi kemungkinan besar pengguna akan meng-close halaman website yang telah dibangun. Manfaat dengan adanya navigasi terlihat profesional karena lebih rapih konten

3. Desain Interface

Pada bagian ini dimana proses diseleksi dan penempatan elemen misalnya tombol, link, judul, text-align, font-size, dll. Yang bertujuan sebagai media bagi pengguna dalam berinteraksi dengan tampilan.

Perbedaan Wireframe dengan Mockup dan Prototype

wireframe, mockup, prototype

Perbedaan yang mendasar dari Wireframe dan Mockup dapat dilihat dari tingkat fidelity, arti kata fidelity sendiri artinya presisi. Wireframe termasuk kedalam low fidelity sedangkan Mockup teramasuk high fidelity, keduanya masih bersifat statis. Untuk Prototype sudah bersifat dinamis sehingga dapat berinteraksi dengan user dengan cara mengklik pada interface.

[postingan number=3 tag=”programming”]

Yang telah disinggung sebelumnya bahwa low fidelity adalah Design yang tingkat presisi nya masih rendah. Sering disebut sebagai wireframe dan memang bertujuan untuk menentukan tata letak. sedangkan high fidelity adalah Design yang tingkat presisinya tinggi. Sudah memiliki warna, ukuran , jarak dan bentuk elemennya juga sudah dibuat dengan tingkat presisi dan akurasi yang detail.

fielity

Tips

Bukan hanya pensil saja dalam pengerjaan wireframe, agar lebih indah gunakanlah stabilo dan spidol yang bertujuan memberikan tanda khsusus kepada elemen yang dirasa penting. misalnya tombol submit, tombol download, tombol login, dll.

[postingan number=3 tag=”hacker”]

Cukup sekian, semoga proyek website anda menjadi website yang bukan hanya baik pada sistem tetapi baikpula pada tampilan agar pengguna betah dan menjadi pelanggan setia. Jika dirasa bermanfaat bisa dibagikan kepada teman-teman agar merasakan manfaatnya. [cp/ap]

5/5 - (2 votes)

Follow Trentech.id di Google News, Klik DI SINI

Tags: websitewireframewireframe pada website
2k
VIEWS
Previous Post

Ini Dia 6 Tips Main PUBG Mobile Paling Laki

Next Post

Ini Dia Library JavaScript Menarik Tahun 2018

Related Posts

Pentingnya Kemampuan Komunikasi Bagi Seorang Programmer

24 December 2024
2k

Seorang programmer adalah orang yang terjun dan menyelami bidang TI. Berbicara tentang bidang keilmuan. TI adalah bidang keilmuan yang sangat...

Hacker Paling Berbahaya

Ini Dia 10 Hacker Paling Berbahaya Didunia

15 July 2024
2k

Pada awalnya, hacker pertama kalinya muncul dengan arti positif yaitu untuk menyebut seorang yang memiliki keahlian dalam bidang komputer dan...

Manfaat Belajar Bahasa Pemrograman untuk Kehidupan

7 Keterampilan Wajib Programmer Untuk 5-10 Tahun Ke Depan

21 March 2024
2k

Waktu terus berjalan, begitulah kehidupan. Kita sebagai programmer selalu dituntut untuk mengembangkan keterampilan di saat perkembangan industri TI terus berkembang...

Terpopuler

  • contoh pitch deck

    8 Contoh Pitch Deck Startup yang Bisa Kamu Pelajari

    2392 shares
    Share 956 Tweet 598
  • 3 Cara Memutus Koneksi Orang Lain dari Jaringan Wi-Fi Anda

    942 shares
    Share 377 Tweet 236
  • Harga Saham GoTo Terjun Bebas (Lagi)

    123 shares
    Share 49 Tweet 31
  • Qlapa Gulung Tikar

    316 shares
    Share 126 Tweet 79
  • 16 Jenis Saham: Panduan Lengkap Memahami Dunia Investasi

    571 shares
    Share 228 Tweet 143
  • Daftar Gaji di Startup Indonesia

    240 shares
    Share 96 Tweet 60
  • Ini Dia 7 Perintah CMD Keren yang Wajib Kamu Coba

    357 shares
    Share 143 Tweet 89
  • HP Nokia Edge 2022 Mirip Iphone 13, Cek Harga dan Spesifikasi

    295 shares
    Share 118 Tweet 74
  • Inilah Ratusan Perintah CMD (Command Prompt) yang Wajib Kamu Coba

    213 shares
    Share 85 Tweet 53
  • TikTok Resmi Pegang Kendali 75% Saham Tokopedia

    116 shares
    Share 46 Tweet 29

About . Contact . Partnership . Google News . Telegram

Trentech.id adalah situs yang menyajikan konten tentang startup, bisnis, game, event, hingga informasi pekerjaan. Trentech berusaha memberikan konten yang berkualitas untuk para pembacanya agar dapat menjadi rujukan utama mengenai dunia teknologi pada khususnya. Tim trentech terdiri dari orang – orang yang berkompeten dibidangnya, dan akan selalu mendukung karya – karya terbaik anak bangsa dengan memberikan kesempatan seluas-luasnya untuk para startup agar dapat publish karyanya di trentech.

Trentech ID

  • About
  • Contact
  • Advertising
  • Privacy Policy
  • Sitemap

Tools

  • Harga Crypto Terbaru
  • Cek Ongkir
  • Cek Resi
  • Cek Domain

Welcome Back!

Sign In with Facebook
Sign In with Google
OR

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Sign Up with Facebook
Sign Up with Google
OR

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
  • Login
  • Sign Up
About . Contact . Partnership . Google News