Mengenai Pengantar Desain Dan Pemrograman Web

 Mengenai Pengantar Desain Dan Pemrograman Web

1.      Wirefame

Wireframe adalah sketsa antarmuka pengguna atau user interface (UI).

2.      Wireflow

Wireflow adalah representasi dari aliran layar, dengan mengumpulkan satu set wireframes terkait mengikuti urutan mereka muncul dalam aliran.

3.      Mockup

Mockup adalah desain statis menyerupai hasil akhir untuk mewakili suatu produk.

4.      Prototype

Prototipe adalah versi konsep produk yang memungkinkan Anda menjelajahi ide-ide Anda dan menunjukkan rencana fitur atau konsep desain keseluruhan kepada pengguna sebelum ke tahapan pengembangan atau implementasi.

 

Implementasi

Implementasi adalah menerapkan hasil rancangan dari Wirefame, Wireflow, Mockup, Prototipe ke dalam bentuk aplikasi nyata.

·         Jenis Platform

o   Aplikasi Mobile

o   Aplikasi Desktop

o   Website

 

·         Implementasi Mobile

o   Android Studio

·         Implementasi Desktop

o   Visual basic (VB) & Visual basic Net (VB Net)

·         Implementasi Website

o   Programming Native

§  HTML (Hypertext Markup Language)

§  CSS (Cascading Style Sheets)

§  PHP (Hypertext Preprocessor)

§  Framework

§  CSS (Bootstrap + PHP)

§  PHP (CodeIgniter,Yii, Laravel)

§  CMS (Content Management System)

§  WordPress

§  Joomla

§  Drupal

 

Website

Website merupakan halaman yang menampilkan informasi dapat berupa text, gambar dan video.

·         Website Statis merupakan suatu web yang konten atau isinya tidak dapat berubah-ubah & tidak memiliki database (HTML, CSS, JS)

·         Website Dinamis merupakan suatu web yang konten atau isinya dapat berubah-ubah berdasarkan database atau memiliki database (HTML, CSS, JS + PHP, SQL)

 

Jenis Web

1.      Web Personal

2.      Web E-Commerce

3.      Web Company Profile (Perusahaan

4.      Web Sekolah/Kampus

5.      Web Organisasi atau Pemerintah

6.      Web E-Learning

7.      Web Forum

8.      Web Berita

 

Desain Web

·         Harus Responsif bisa di desktop dan mobile

·         Tampilan harus simpel dan mudah digunakan

·         Page speed harus bagus (cepat)

 

Metode Pembuatan Desain UI Website

Ada 3 prinsip dalam mendesain sebuah website menurut Veen’s design principles, yaitu bisa menjawab pertanyaan:

1.      Di mana saya?

2.      Kemana saya bisa pergi?

3.      Ada apa di sini?

 

Veen’s Design Principles

1.      Menggambarkan website harus memiliki header yang menjelaskan website apa (Di mana saya?)

2.      Menggambarkan adanya navigasi yang diposisikan di sidebar (Kemana saya bisa pergi?)

3.      Menggambarkan konten dari website (Ada apa di sini?)

 

Salah satu website yang memiki prinsip veen’s design adalah website medium.com (berdasarkan kawan saya)

1.      Dimana Saya? Sebagai user kita dapat mudah mengetahui dimana kita berada, karena website medium ini hanya terdiri dari 2 halaman utama yang paling sering dibukan yaitu, halaman blog, halaman depan(homepage). Dan desain dari dua halaman ini sangat berbeda, sehingga kita mudah untuk mengenalinya.

 

2.      Kemana saya bisa pergi? Sebagai user kita dapat mudah mengetahui kemana kita akan pergi, karena kita dapat mudah menemukan menu navigasi, baik itu diheader dan sidebar.

 

3.      Ada apa disini? User dapat langsung tahu apa isi konten pada website medium, karena website medium ini konsisten, maksudny adalah desain untuk blog selalu sama, begitupun dengan homepagenya. Lalu fonts, colors, menus, button nya juga sama.