Trentech.id
No Result
View All Result
  • Login
  • Register
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
  • Terbaru
  • Berita
  • Startup
  • Bisnis
  • Learn
  • Games
  • Blockchain
  • Gadget
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
Belajar Konsep Wireframe Pada Website
1.7k
VIEWS

Daftar Isi

  • Wireframe
  • Manfaat Wireframe
  • Elemen Wireframe
  • Perbedaan Wireframe dengan Mockup dan Prototype
  • Tips
5/5 - (2 votes)

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.

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.

Baca lagi

Gunakan Cara Ini! Agar Konten Website Anda Menciptakan Penjualan Luar Biasa

Panduan Menaikkan Traffic Website Web Secara Efektif

Kamu Sering Menggunakan Template Website? Mulai Sekarang Coba Pikir Ulang

[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]

Tags: websitewireframewireframe pada website
Previous Post

Ini Dia 6 Tips Main PUBG Mobile Paling Laki

Next Post

Ini Dia Library JavaScript Menarik Tahun 2018

Trentech.id

Trentech.id

Tren Teknologi Indonesia

Related Posts

cara jualan laris konten website

Gunakan Cara Ini! Agar Konten Website Anda Menciptakan Penjualan Luar Biasa

1 April 2022
1.4k

Anda yang saat ini sedang membangun website, pasti tidak terlepas dengan pengisian konten website. Ya, selain design, konten juga menjadi faktor...

Cara Menaikkan Traffic Website

Panduan Menaikkan Traffic Website Web Secara Efektif

26 March 2022
1.4k

Jalan menuju kesuksesan tidak bisa dilalui secara instan. Setiap orang pasti pernah memulai dari nol. Tidak punya nama, tidak punya...

template website

Kamu Sering Menggunakan Template Website? Mulai Sekarang Coba Pikir Ulang

24 March 2022
1.4k

Ada banyak cara yang bisa Anda lakukan sebagai pelaku bisnis untuk menampilkan citra profesional di internet. Memiliki website adalah salah satunya. Desain...

Login
Please login to comment
0 Comments
Inline Feedbacks
View all comments

Terpopuler

  • contoh pitch deck

    8 Contoh Pitch Deck Startup yang Bisa Kamu Pelajari

    1002 shares
    Share 400 Tweet 250
  • Upgrade XAMPP? Beginilah Caranya

    246 shares
    Share 98 Tweet 62
  • Kumpulan Materi Kuliah Jurusan Teknik Informatika dan Ilmu Komputer

    352 shares
    Share 141 Tweet 88
  • Ini Dia Cara Membuat Template WordPress Dengan Bootstrap Mudah

    132 shares
    Share 53 Tweet 33
  • Meningkatkan Produktivitas Microsoft Integrasikan AI Copilot ke Word, Excel, & PowerPoint

    108 shares
    Share 43 Tweet 27
  • Belajar Konsep Wireframe Pada Website

    132 shares
    Share 53 Tweet 33
  • Ini Dia 7 Perintah CMD Keren yang Wajib Kamu Coba

    146 shares
    Share 58 Tweet 37
  • Perbedaan Mic Condenser dan Dynamic Mic Serta Cara Merawatnya Agar Awet

    223 shares
    Share 89 Tweet 56
  • Apa Saja Kemudahan yang Ditawarkan Warung Pintar?

    143 shares
    Share 57 Tweet 36
  • NIOMIC Luncurkan Online Coding Bootcamp GRATIS Untuk 50 Peserta

    115 shares
    Share 46 Tweet 29

About . Contact . Partnership

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
  • Partnership
  • Panduan Penulis
  • Privacy Policy
  • Sitemap

Tools

  • Harga Crypto Terbaru
  • Cek Ongkir
  • Cek Resi
  • Cek Domain
  • Login
  • Sign Up
About . Contact . Partnership

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
wpDiscuz