UI & UX BRIEF PROJECT

Bired project biasanya diberikan oleh client kepada designer dan developer, sehingga nantinya akan memiliki gambaran yang dapat membantu dalam mengerjakan aplikasi yang akan dibuat

 

Information Architecture

Didalam information architecture terdapat informasi  dan component, nantinya fornt-end dan back-end developer memiliki suatu gambaran khusus yang dapat disiapkan  sembari melakukan UI & UX

Disni kita menggunakan Main map,  flowchart dan wirefram dari aplikasi Whimsical  dalam membuat  information architecture.

Didalam aplikasi ini kita akan membuat flowchar  wireframe dan main map.

Main map

User Flow / flow chart

Untuk  memastikan hasil design yang kita buat bisa berjalan dengan semestinya dari brief project yang telah diberikan client kepada kita maka kita memerlukan userflow, userflow ini memberikan gambaran bagaimana aplikasi tesebut bisa berjalan mulai dari membuka aplikasi sampai aplikasi tersebut selesai digunakan, dan userflow ini sangat dibutuhkan ketika membuat project dan ketika berkarbolasi dengan developer.

User flow menjelaskan bagaimana aplikasi tersebut bekerja mulai dari membuka aplikasi sampai sampai berhasil memesan tiket secara online 

dengan adanya userflow ini memudahkan para developer untuk mengetahui bagaimana proses aplikasi tersbut berjalan.

 

How it’s work

Setelah membuaka aplikasi netstart maka  akan dicheck aplah user sudah login / tidak , jika sudah login maka akan diarahkan ke halaman home movie, jika belum makan akan diarahkan ke halaman login,

di halaman movie  kita bisa memilih film dari now playing ( film sedang tayang pada hari tersebut)

setelah memilih now playing si pengguna bisa membaca details dari movie yang di tonton, 

jika pengguna tertarik maka bisa dilanjutkan ke halaman pilih jadwal dan tempat, disini kita perlu integrasikan  dengan button continue, jika tombol button diclick di dia akan menuju ke movie yang tayang pada saat waktu berlangsung

 

setelah pilih jadwal maka akan diarahkan ke halaman pikih bangku pengguna,  jadi dihalaman pilih bangku ini kita bisa berikan informasi apakah bangku tersebut tersedia / masih kosong

setelah pilih bangku maka akan masuk ke halaman checkout / order information, yang menjelaskan apa yang kita booking,

setelah itu akan check  untuk pembayaran apakah saldo cukup / tidak, jika saldo mencukupi maka success, jika tidak maka akan kita tawarkan  untuk ke button top up

WireFrame

Setelah berdiskusi bersama developer  maka kita akan membuat gambaran dari userflow yang telah dibuat agar bisa memberikan gambaran bagi para developer untuk bisa mengerjakan aplikasi tersebut.

Connector dari halaman 1 kehalaman yang lain sehingga developer bisa mempersiapkan apa saja yang dibutuhkan

Transormasi ke Visual Design

Transformasi dari wireframe ke visual design dimana yang tadinya hanya berupa gambaran kasar kini kita akan memberikan warna, typography, animasi, prototype dan icon. Dari yang tadinya biasa menjadi tampilan yang menarik, tentunya UX deisgn ini tidak bisa berdiri sendiri tanpa adanya UI untuk itulah mengapa kita perlu melakukan visual design

1.      Moodboard

Didalam moadboard ini berisikan design inspirasi yang bisa kita gunakan ke dalam  project yang akan dibuat

Untuk membangun subuah moodboard kita membutuhkan website drible.com, karna drible.com ini adalah salahsatu website yang digunakan para designer untuk mencari inspirasi design yang bisa digunakan di project yang terkait, dimana kita nantinya akan melakukan teknik ATM (amati, tiru, modifikasi)

Setelah memilih beberapa contoh design maka saatnya membuka situs invision, di invidion.app ini kita akan membuat sketsa dan membangun moodboard

jadi kita akan mengambil beberapa design dari drible dan akan kita letakkan di invisionapp.

 

https://projects.invisionapp.com/boards/UC3YZR3KDSH

        1.1 Tipografi

          1.2 Color Palatern

     1.3 Icons Illustration

      1.4   Layout & Color

  UI & UX Design

    Usability Testing

            Disini kita akan melakukan metode usability testing dengan mengunakan maze.design untuk memastikan hasil design yang kita buat tersebut mulai dari segi UI dan UX apakah design tersebut mudah dipahami, digunakan dan bisa menyelesaikan suatu masalah

Read More

Medusa Mitologi Yunani Kuno

Medusa, dalam mitologi Yunani, sosok monster paling terkenal yang dikenal sebagai Gorgon. Dia biasanya digambarkan sebagai makhluk betina bersayap yang memiliki kepala rambut yang terdiri dari ular; tidak seperti Gorgon, terkadang dia digambarkan sangat cantik. Medusa adalah satu-satunya Gorgon yang fana; maka pembunuhnya, Perseus, mampu membunuhnya dengan memenggal kepalanya. Dari darah yang menyembur dari lehernya muncul Chrysaor dan Pegasus, kedua putranya oleh Poseidon. Kepala terpenggal, yang memiliki kekuatan untuk berubah menjadi batu semua yang melihatnya, diberikan kepada Athena, yang meletakkannya di perisainya; Menurut akun lain, Perseus menguburnya di pasar Argos.

Mengapa Medusa Dikutuk?

Meskipun Hesiod memberikan penjelasan tentang asal-usul Medusa dan kematian Medusa di tangan Perseus, dia tidak mengatakan lebih banyak tentangnya.  Sebaliknya,  Perseus dan Medusa yang lebih komprehensif dapat ditemukan di Metamorphoses Ovid.  Dalam karya ini, Ovid mendeskripsikan Medusa sebagai gadis cantik aslinya.  Kecantikannya menarik perhatian Poseidon, yang menginginkannya dan mulai  membuat kerusuhan bahkan menghancurkannya di kuil Athena.  Ketika Athena menemukan dewa laut telah menghancurkan Medusa di kuilnya, dia membalaskan dendam dengan mengubah rambut Medusa menjadi ular, sehingga siapa pun yang menatapnya secara langsung akan berubah menjadi batu.

Legenda Medusa dan Perseus

Mitos lengkap Perseus dan Medusa dimulai bertahun-tahun sebelum mereka bertempur.  Perseus adalah putra Danae, putri Acrisius, Raja Argos, dan Zeus.  Dewa telah menghamili sang putri setelah ayahnya menguncinya karena mengetahui dari seorang peramal bahwa dia akan dibunuh oleh cucunya.  Acrisius takut pada anak itu, tetapi ingin menghindari murka Zeus, jadi alih-alih membunuh Perseus, dia mengirim bayi dan Danae ke laut dengan peti kayu.

Dictys dari pulau Seriphus menyelamatkan keduanya dan dia membesarkan Perseus seperti seorang putra.  Namun, ada orang lain di dekatnya yang tidak begitu baik pada anak tersebut.  Dalam mitos Perseus, pahlawan tersebut dikirim oleh Polydectes, saudara Dictys dan raja Seriphus, dalam upaya untuk membawakannya kepala Medusa.  Ini adalah tipuan karena Polydectes menginginkan ibu Perseus dan ingin menyingkirkan putranya, yang tidak mendukung hubungan tersebut.  Misi seperti itu akan sama dengan bunuh diri karena Perseus dan Polydectes tidak mengharapkan dia untuk kembali ke Seriphus.

Karena Perseus adalah putra Zeus, dia dibantu oleh para dewa.  Perseus menerima Topi Gaib dari Hades, sepasang sandal bersayap dari Hermes, perisai perunggu reflektif dari Athena, dan pedang dari Hephaestus.  Dengan hadiah ilahi ini, Perseus mencari Medusa dan memenggalnya dengan perisai perunggu saat dia tidur.

Setelah Gorgon dipenggal, kuda bersayap Pegasus muncul dari lehernya.  Dalam Theogony, Hesiod juga menyebutkan bahwa raksasa emas Chrysaor, yang lahir dengan pedang emas di tangannya, muncul dari leher Medusa yang terputus.  Saudara perempuan Medusa juga tiba di tempat kejadian sekitar waktu yang sama dan mengejar Perseus.  Namun sang pahlawan lolos dengan menggunakan Cap of Invisibility.  Beberapa versi mitos mengatakan dia membawa Pegasus bersamanya juga

Setelah ini, Perseus terbang melalui sandal Hermes atau Pegasus, menuju Seriphus.  Tetapi dia memiliki beberapa acara menarik lainnya sebelum kembali ke pulau itu.  Meskipun Perseus mungkin menjadi pusat dari cerita-cerita ini, dapat dikatakan bahwa kekuatan transformatif dari kepala terpenggal Medusa yang memainkan peran penting dalam petualangan pahlawan berikutnya.

Kekuatan Kepala Medusa

Saat darah menetes dari kepala Medusa ke dataran Libya, setiap tetes darah berubah menjadi ular berbisa.  Kekuatan kepala Medusa terlihat kembali saat Perseus menemukan Titan Atlas.  Ketika Perseus meminta Atlas tempat istirahat sebentar, permintaannya ditolak.  Mengetahui bahwa dia tidak akan mampu mengalahkan Titan dengan kekuatan kasar sendirian, dia mengeluarkan kepala Medusa dan Atlas berubah menjadi gunung.

Perseus juga bertemu dengan Andromeda, putri raja Aethiopia Cepheus dan istrinya Cassiopeia.  Menggunakan kepala Medusa, Perseus berhasil menyelamatkan sang putri, yang dikorbankan untuk Cetus, monster laut yang dikirim oleh Poseidon untuk menghukum Cassiopeia karena membual bahwa putrinya lebih cantik daripada Nereid.  Kekuatan membatu Medusa juga digunakan pada Phineus, paman Andromeda yang ditunangkan dengannya, Proetus, perampas takhta Argos, dan akhirnya Polydectes sendiri.  Teman Perseus, Dictys, naik takhta dan, sekarang selesai dengan relik tersebut, Perseus memberikan kepala Medusa kepada Athena, yang memakainya di punggungnya setiap kali dia pergi ke medan perang.

Menjaga Mitos Medusa Tetap Hidup

Meskipun Medusa umumnya dianggap sebagai monster, kepalanya sering dilihat sebagai jimat pelindung yang akan menjauhkan kejahatan.  Faktanya, nama Medusa berasal dari kata kerja Yunani kuno yang berarti "menjaga atau melindungi".

Gambar kepala Medusa dapat dilihat di banyak artefak Yunani dan Romawi berikutnya seperti perisai, pelindung dada, dan mosaik.  Salah satu contoh liontin kepala Medusa pelindung muncul dalam bentuk akhir abad ke-2 hingga ke-4 M. Artefak Romawi yang baru-baru ini ditemukan di pedesaan Cambridgeshire.  Kepala marmer Medusa berusia 2.000 tahun ditemukan belum lama ini di bekas pusat perdagangan Romawi di Turki juga.  Ada juga banyak koin yang tidak hanya memiliki citra Perseus memegang kepala Medusa, tetapi juga kepalanya sendiri. 

Saat ini, gambar kepala Medusa yang paling terkenal mungkin adalah logo perusahaan mode Italia, Versace.  Dan jangan lupa bahwa Medusa juga menjadi berita utama tentang game di masa lalu sebagai pertarungan bos yang sulit untuk pemain di game terbaru dari franchise Assassin's Creed yang populer.  Faktor-faktor ini mengingatkan kita bahwa mitos dunia kuno masih hidup dan bersama kita di dunia modern.

Reference

Atsma, A. J., 2011. Medousa & Gorgones. [Online] 

Available at: http://www.theoi.com/Pontios/Gorgones.html

Goldsborough, R., 2013. Deeper Meanings, Medusa. [Online] 

Available at: http://rg.ancients.info/medusa/article.html

Hesiod, Theogony 

[West, M. L. (trans.), 1988. Hesiod’s Theogony and Works and Days, Oxford: Oxford University Press.]

Ovid, Metamorphoses [Online] 

[Garthm S., Dryden, J., et al (trans.), 1717. Ovid’s Metamorphoses.] 

Available at: http://classics.mit.edu/Ovid/metam.html

www.ancientcoinage.org, 2015. Perseus - Medusa Coin Series. [Online] 

Available at: http://www.ancientcoinage.org/perseus-and-medusa.html 

Read More

Mengatasi 'Target class controller does not exist' di Laravel 8

Ada pembaharuan di laravel 8 dalam kita mendefinisikan rute, Laravel 8 dirilis kemarin dengan banyak fitur dan perubahan baru. Salah satu perubahan tersebut adalah penghapusan spasi nama rute, seperti yang tertulis di dokumentasi rilis laravel 8 mengenai Routing Namespace Update. Bahwa pada versi ini cara penulisan menggunakan sintaks callable PHP

Error tersebut terjadi karena tidak ditemukannya lokasi atau path dari Controller yang kita defisinikan pada route.

Masalahnya bukan karena kodenya rusak, tetapi 99,9%  dari versi sebelumnya  kita bisa mendefisinikan route seperti yang kita lakukan di versi sebelumnya namun tidak di laravel 8 tidak mendefinisikan namespace route ke kontroller secara otomatis. itu sebabnya kita mendapati problem atau error seperti Target class [xxxcontroller] does not exist.

Cara Mengatasi

Jika cara diatas terlalu rumit dan  jika  memiliki route banyak kita bisa memilih untuk menggunakan cara lainnya, yaitu dengan menambahkan namespace route.

 Diaravel 8 namespace route tidak disediakan secara otomatis, kita perlu menambahkannnya jika ingin seperti versi sebelumnya.  Buka RouteServiceProvider.php dan tambahkan properti $namespace seperti gambar dibawah

 $namespace di tambahkan setelah properti, bisa membuat route dengan format seperti sebelumnya. Contohnya seperti gambar dibawah 

Atau cara lain  dengan menambahkan path atau namespace pada action route seperti gambar dibawah

Read More

Convert Html Ke React

Berikut ini adalah Tutorial yang akan mengonversi/Convert halaman web HTML ke React js,  Jika Kalian sedang membangun aplikasi / satu halaman web baru dan membutuhkan cara tersrbut, tutorial ini cocok untuk kalian dalam mempelajari React.js.

Karena untuk membangun situs web tidak cukup dengan hanya mengetahui HTML, CSS, dan Javascript, perlu disebutkan bahwa  beberapa perusahaan telah memutuskan untuk beralih ke situs web dan mengkususkan  bagi para developer untuk bisa menggunakan beberapa library dan framework.

Di tutorial kali ini kita hanya membahas pada bagian navbar,  kita akan merubah bagian dari navbar tersebut Menjadi Part / bagian ok sebelum kita melakukan perubahan pertama-tama kita instal react router seperti gambar yang dibawah.

Dan di file index.js tambahkan import dari router 

Jadi disini kita akan membungkus app  kedalam browser router, setelah itu buat file header.js di folder parts

Di file header.js kita akan mengisikan fungsional component dan kita akan menerima sebuah props dan isikan script header html yang inggin diconvert

Karna kita menggunakan react maka kita harus merubah semua class pada script yang kita convert sebelumnya.

Untuk memanggil images kalian bisa tambahkan seperti dibawah 

Untuk menambahkan link dari navbar kita akan menggunakan router yang telah kita install sebelumnya, jadi komponen linknya kita pakai dari  react-router-dom. Untuk menerapkannya kita panggil link tersebut.

Dan masukkan img ke dalam link dan hrefnya diganti dengan to 

Untuk menampilkan header tersebut kita bisa tampilkan dengan cara seperti gambar dibawah.

maka hasilnya akan terlihat seperti gambar dibawah

Read More

Membuat Project Dengan Vue UI

VUE.JS

Pada tutorial kali ini kita akan membahas bagaimana cara  membuat project dengan menggunakan Vue UI, pertama buka command line dan ketikan VUE UI seperti gambar yang dibawah.

Setelah mengetikan comman Vue ui seperti gambar diatas maka akan muncul tampilan seperti dibawah, setelah muncul tampilan seperti dibawah maka selanjutnya isi nama project vue yang ingin dibuat.

Isi nama project , pilih package manager yang ingin digunakan, disini saya mengunakan npm dan isi bagian recommended git repository tapi bisa diabaikan.  lalu untuk preset kita akan pilih secara default dari bawaan VUE. UI  

Biasanya akan memerlukan waktu lama untuk membuat sebuah projeact Vue, setelah selesai maka akan keluar tampilan seperti gambar dibawah.

Selanjutnya kita  perlu menambahkan vue.router, vue router ini berfungsi untuk membuat halaman menjadi lebih dari satu karna untuk saat pertama kali kita membuat sebuah project baru divue maka hanya terdapat satu halaman, untuk mentesting atau menampilkan project yang kita buat maka bisa mengclick tombol.

Setelah menjalankan Run task maka tunggu serve untuk membuild setelah berhasil membuild maka click open App seperti gambar dibawah

Maka akan muncul tampilan seperti dibawah, tapi disini hanya ada single page.

Untuk menambahkan beberapa halaman kita perlu untuk menginstall vue router, untuk menambahkan rouver kalian bisa pergi ke pulgins dan click serach dan pilih  @vue/cli pulgin-router seperti gambar dibawah.

Tunggu beberapa saat dan setelah berhasil di install maka akan ada pemberitahuan seperti gambar dibawah, jadi kalian bisa langsung click finish.

Maka secara otomatis vue akan mengenerate halaman baru dan menambahkan beberapa component, ketika kita mendapatkan perubahan dibeberapa document maka akan langsung otomatis terupload kepada github maka akan ada beberapa pemberitahuan seperti apa saja yang telah dihapus, ditambahkan, diubah maka kita bisa melakukan perubahan terhadap github 

Setelah kembali pada VSC ( visual studio code ) kalian bisa melihat difile yang telah kalian buat sebelumnya terdapat perubahan ke versi terbaru atau perubahan di bagian router, nah untuk melihat perubahan yang telah dilakukan maka kalian bisa check halaman UI dibrowser maka akan tampil hasi seperti gambar maka kalian akan menemukan  dua halaman dari perubahan router yang kalian install sebelumnya.

Read More