Langsung ke konten utama

Postingan

Menampilkan postingan dengan label Desain dan Pemrograman Web

Evaluasi UI (Usability & User Experience)

Apa itu Usability? Jacob Nielson, usability didefinisikan sebagai kemampuan sistem untuk memenuhi kebutuhan pengguna dengan 5 atribut penilaian, yaitu learnability, efficiency, memorability, errors, dan satisfaction. Pressman, usability merupakan tingkatan kemampuan antarmuka aplikasi dapat digunakan untuk mempermudah hidup pengguna. Santoso, usability merupakan derajat kemampuan sebuah aplikasi untuk membantu pengguna menyelesaikan sebuah tugas. ISO 9241-11 (Bevan, 1995), mendefinisikan usability merupakan sejauh mana suatu produk dapat digunakan oleh pengguna tertentu untuk mencapai target yang ditetapkan dengan effectiveness, efficiency dan satisfaction. Kenapa sih Usability itu Penting? Memudahkan pengguna Aplikasi mudah dipelajari Aplikasi harus berjalan sesuai fungsinya Berdampak Pada Faktor Kesuksesan Menarik minat penggunanya Alat Uji Usability SUS (System Usability Scale) : SUS merupakan kuesioner yang sederhana dan paling dapat diandalkan. QUIS (Questionnaire for User Int...

Mengenal JavaScript, Bahasa Pemrograman untuk Website

Apa itu JavaScript ? Jika kamu ingin mendalami dunia website tentunya sudah tidak asing dengan bahasa JavaScript. Javascript merupakan bahasa pemrograman yang digunakan untuk membuat sebuah halaman web yang dinamis dan interaktif. Dibandingkan dengan bahasa pemograman yang lain, bahasa pemrograman yang satu ini termasuk bahasa pemrograman yang paling mudah dan sering digunakan.  Biasanya, diawal-awal orang-orang akan belajar HTML dan CSS terlebih dahulu. Kemudian, mereka akan berpindah ke JavaScript di mana ketiga elemen tersebut saling berkaitan satu sama lain. HTML: membuat kamu dapat menambahkan konten ke dalam web CSS: menentukan layout, style serta mengembangkan halaman website JavaScript: menyempurnakan tampilan serta sistem halaman web Di dalam website, bahasa pemrograman ini biasanya digunakan untuk menghubungkan antara skrip HTML dan CSS. Lalu apa perbedaan bahasa JavaScript dengan Bahasa Java? Java maupun JavaScript merupakan bahasa yang dikembangkan dari bahasa lainnya. ...

Implementasi HTML Bootstrap Design Web ke WordPress

Kemunculan WordPress lebih memudahkan proses perancangan blog. Sebelum adanya WordPress, banyak developer Website yang menggunakan HTML statis bagi merancang blog. Namun, kini para developer sudah mulai beralih menggunakan tampilan yang terdapat di WordPress. Meskipun saat ini tak masalah jika tetap menggunakan HTML statis, tetapi tak ada salahnya bukan jika mempertimbangkan pindah ke WordPress. Kenapa? Karena dengan WordPress, Kamu dapat merancang dan mengelola blog lebih gampang. WordPress menyediakan tema, plugin, widget, dan beragam fitur lainnya yang mempermudah Kamu mengelola blog tanpa berurusan dengan coding. Bagi kamu selaku pemilik blog yang masih menggunakan HTML statis telah seharusnya disarankan sebaiknya Kamu mulai mempertimbangkan untuk melakukan convert HTML ke WordPress. Selain mempermudah Kamu bagi mengelola, WordPress pun mempunyai banyak fitur yang lebih fleksibel ditambah maupun dikurangi diperbandingkan dengan HTML statis. Ada tiga macam cara convert HTML ke WordP...

Mengenal CSS untuk Website

Pada Artikel lalu sudah dibahas mengenai HTML  Mengenal Dasar HTML , Maka kali ini kita akan membahas mengenai CSS. Karena tahap selanjutnya setelah HTML yaitu membuat CSS agar tampilan website lebih bagus dan menarik. Apa itu CSS?, CSS merupakan bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs. CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman. Anda hanya perlu menulis markup untuk situs. HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan. CSS tidak hanya penting dari teknis saja, tetapi CSS juga berpengaruh pa...

Bootstrap Serta Kegunaannya

Apa itu Bootstrap? Bootstrap adalah sebuah library framework open source yang dibuat untuk mempermudah dan mempercepat pengembagan front end sebuah website. Bootstrap awalnya dibuat oleh Mark Otto dan Jacob Thornton. Bootstrap dikenal sebagai salah satu framework CSS, HTML, Javascript yang sangat populer dikalangan web developer dan para pengembang website. Bootstrap berfungsi untuk mengembangkan website agar bisa lebih responsif. Dengan adanya bootstrap membuat website kamu bisa menyesuaikan bisa menyesuaikan dengan ukuran monitor device. Baik itu jika diakses melalui smartphone, tablet maupun desktop.  Bootstrap memiliki semua jenis HTML dan template desain berbasis CSS untuk berbagai fungsi dan komponen seperti navigasi, sistem grid, carousel gambar, dan tombol/button. Sebagai pengguna, kamu hanya perlu memanggil setiap class yang digunakan, misalnya seperti navigasi, tabel, grind, tombol dan lain sebagainya. Fungsi Bootstrap? Mempercepat waktu untuk pengerjaan front end we...

Mengenal Dasar HTML

HTML (Hypertext Markup Language) HTML merupakan bahasa pemrograman untuk membuat sebuah halaman web. HTML berguna untuk menampilkan berbagai informasi di dalam sebuah penjelajahan web internet. HTML pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII.  Sejarah HTML HTML dibuat oleh seorang ahli fisika dengan timnya Berners Lee pada lembaga penelitian CERN yang berada di Swiss. Tim Bernes Lee mengeluarkan versi HTML pertama kali pada tahun 1991. Sejak tahun 1991, setiap HTML merilis versi terbarunya, selalu dilengkapi dengan attribute dan tag terbaru. Saat ini sudah ada 140 HTML tag berdasarkan HTML Element Reference yang dimiliki oleh Mozila Developer Network.  1. HTML 1.0 Versi ini merupakan pioneer yang masih terdapat banyak kelemahana sehingga tampilannya masih sederhana. HTML 1.0 memiliki kemampuan yaitu membuat paragraf, heading, list, hypertext dan cetak tebal atau miring pada teks. Versi ini juga mendukung peletakan gambar pada dokumen tanpa wrapping....

Software Untuk Membuat Mockup

Mockup merupakan visualisasi secara nyata dari produk atau website yang akan dibuat nantinya. Seperti yang sudah pernah dibahas sebelumnya mengenai mockup pada artikel  Perancangan Mockup Web pada Desktop , Mockup merupakan salah satu hal terpenting dalam pembuatan suatu web. Untuk membuat suatu mockup dengan cara modern, dibutuhkan software untuk pembuatan mockup tersebut.  Berikut beberapa Software/aplikasi untuk membuat Mockup : 1. Figma Figma merupakan salah satu software pembuat mockup yang bisa menjadi pilihan mu. Selain karna software ini gratis, melalui figma kamu juga bisa bekerja secara tim dalam membuat design mockup. Hanya dengan mengirimkan tautan, kamu sudah bisa berkolaborasi dengan tim mu untuk membuat design mockup. Software ini sangat cocok bagi web designer pemula yang baru pertama kali membuat mockup, Karena figma memiliki menu-menu yang sederhana sehingga membuat para designer tidak kesulitan. Figma juga memungkinkan kamu untuk mengexport mockup menjadi be...

Perancangan Mockup Web pada Desktop

Apa itu Mockop? Mockup merupakan gambaran atau visualisasi secara nyata dari website yang akan dibuat. Mockup bisa juga dikatakan sebagai preview sebuah ide yang terlihat seperti wujud aslinya. Mockup adalah hal penting dalam dalam tahap perancangan website. Karena dengan adanya mockup dapat memberikan gambaran dan meyakinkan kamu atau klien untuk website yang kamu buat sehingga bisa klien bisa memberikan masukkan dan saran dari UI website tersebut.  Biasanya mockup akan sangat dibutuhkan ketika ada sebuah perusahaan atau ada suatu pihak yang sedang membutuhkan website baru, karena pihak tersebut akan membutuhkan gambaran atau visualisasi nyata dari website tersebut terlebih dahulu sebelum website tersebut telah jadi. Pihak yang membutuhkan website tersebut bisa memberikan masukkan terkait rancangan desain web tersebut dan dengan demikian kedua belah pihak, desainer web dan pihak yang membutuhkan website dapat menemukan jalan tengah terhadap website yang akan dibuat. Mockup dapat d...

Desain Website untuk Mobile

Jika seseorang ingin membuat sebuah website, tentunya website tersebut tidak hanya bisa dioperasikan di web saja, melainkan juga dapat dioperasikan dan diakses pada perangkat mobile. Website yang baik ialah website yang responsif terhadap perangkat mobile.  Apa itu Web Responsif ? Web Responsif adalah sebuah website yang bisa menampilkan tampilan yang optimal untuk pengguna perangkat mobile. Desain website yang responsif terhadap perangkat mobile akan memudahkan pengguna dalam berbagi dan menghubungkan ke konten-konten yang ada pada website tersebut hanya dengan satu URL. Dengan adanya Desain Website yang responsif ini, akan membuat tampilan situs pada perangkat mobile mengikuti ukuran jendela browser dan menyesuaikan layar perangkat mobile secara otomatis,  Mengapa Desain Website yang Responsif penting? Saat ini, dengan kemudahannya internet, mendorong orang-orang yang lebih memilih mengakses internet melalui perangkat mobile, smartphone atau tablet karena lebih simpel dan pr...

Mengenal Website dan Jenis-Jenis Website

Apa itu Website ? Website bukanlah hal asing lagi bagi kebanyakan orang. Di era digital saat ini, tentu hampir semua orang tau apa itu website bahkan memilikinya, baik itu website pribadi, organisasi, perusahaan ataupun komunitas. Tapi, tentu tidak sedikit orang bertanya apa sebenarnya website itu. Untuk itu, artikel kali ini akan membahas apa itu website dan hal-hal lainnya seputar website. Website atau bisa disebut web, web page, situs ataupun site adalah halaman-halaman yang menampilkan banyak informasi berupa teks, gambar, animasi, suara, video atau bahkan bisa juga gabungan dari semuanya yang dapat dibaca dan dilihat oleh pengguna internet melalui sebuah mesin pencarian dan saling terkait dan dihubungkan dengan jaringan-jaringan halaman atau hyperlink . Singkatnya bisa disebut kumpulan informasi dalam sebuah halaman web dan tergabung dalam sebuah domain/URL. Komponen yang Pada Website Sebuah website harus memiliki beberapa elemen atau komponen berupa : 1. Tittle Tittle merupak...

Konsep Dasar Desain Web

Desain Untuk Sebuah Web Dalam membuat atau mendesain sebuah web, harus memerhatikan beberapa hal seperti :  A. Warna Warna merupakan hal yang sangat penting dalam mendesain sebuah web agar membuat web tersebut menjadi lebih menarik. Pemilihan warna harus sangat diperhatikan dan disesuaikan dengan konsep website kamu. Menurut teori Brewster, untuk menyederhanakan warna  yang ada di alam, warna dibagi menjadi 4 kelompok, yaitu :      1. Warna Primer     2. Warna Sekunder     3. Warna Tersier     4. Warna Netral 1). Warna Primer Warna Primer ada 3 warna yaitu Merah, Kuning, dan Biru.  2) Warna Sekunder Warna sekunder ada beberapa warna seperti ungu, orange , dan hijau. 3) Warna Tersier Berikut adalah warna yang tergolong dalam warna tersier : 4) Warna Netral Berikut adalah warna yang tergolong dalam warna netral : Psikologi Warna Psikologi warna dapat kita pahami salah satunya dengan mengetahui perlambangan warna. Warna memiliki p...

Pengantar Desain dan Pemrograman Web

Tahapan Rekayasa Perangkat Lunak 1. Analisa kebutuhan 2. Desain  3. Implementasi dengan berupa pemrograman 4. Evaluasi 5. Publikasi Desain dan Implementasi 1. Wireframe 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 Protype adalah versi konsep produk yang memungkinkan user untuk menjelajah ide-ide dan menunjukkan rencana fitur atau konsep desain keseluruhan kepada pengguna sebelum ke tahapan pengembangan atau implementasi.  Implementasi  Implementasi adalah menerapkan hasil rancangan website dari Wireframe, Wireflow, Mockup, Prototype ke dalam bentuk aplikasi nyata. Jenis platform yang memanfaatkan proses implementasi : 1. Implementasi Mobile     Implementasi ini se...