Apa USER EXPEREINCE DESIGN?

  Sebelum kita masuk ke pembahasan Tentan UX DESIGN, yuuk kita baca satu Quotes dari Steve Jobs " Design is NOT Just What is Looks Like And Feels like.Design Is HOW IS WORK".

Yuuk Kita mulai dari pembahasan tetang User Experince atau UX, sebagai analogi kita lihat ilustrasi gambar diatas, orang tua tersebut melihat permainan lucu, ada 4 hewn yang berputar sambil mengeluarkan audio berupa musik.

 Nah dalam banyangan mereka, sia Anak pastilah senang, karena membayangkan yang di lihat, akan seperti yang mereka lihat. akan tetapi bagi si Anak terebut, yang dipandang hanyalah bagian bawah dari hewan hewan tersebut, tidak sama dengan yang dilihat oleh orang tua tersebut.

 Apa yang dilihat orang tuanya adalah tampilan antarmuka dari sisi mereka, tapi bukan dari sisi anak. Akibatnya adalah pengalaman yang didapatkan atau yang dirasakan oleh orang tua berbedan yang dirasakan oleh anak. Yang menjadi pengguna produk padakasus ini adalah anak.

dengan demikian berarti apa?

ini berarti yang diharapkan (pengalaman baik oleh pengguna produk) tidak tercapai.

Ilustrasi in sangatlah mirip dengan dengan kejadian yang mungkin pernah Kita alami. Kita membangun sebuah produk yang menurut Kita akan sangat baik dan dicintai User, memberi pengalaman yang yang baik pada User. Akan tetatpi Kita lupa (mencari tahu tetap tidak lengkap dan mendalam) untuk memastikan melihat dari sisi pengguna atau User.

Nah terus apa sih hubungannya ilustrasi tersebut dengan User Expereince atau UX?

Biar tidak bingung yuk dilanjut nyimaknya.

Kita tinjau dulu yuk teori ini:

DEFINISI UX (USER EXPEREINCE)

Jesse James Garrett mendefinisikan User Experience sebagai pengalaman yang diciptakan produk untuk orang-orang yang menggunakannya dalam dunia nyata. User Experience bukan tentang cara kerja suatu produk atau jasa. User Experience adalah tentang cara kerjanya di luar, di mana seseorang bersentuhan dengannya. Setiap hal (produk atau jasa) memiliki User Experience. Namun, tugas kita bukanlah menciptakan user experience, tetapi membuat sebuah User Experience yang baik. User Experience tidak bertujuan untuk membuat user menjadi happy, tetapi menjadikan kerjanya efektif.

Jadi Masih Kebanyakan orang yang memandang bahwa User Expereince hanyalah apa yang didapat dan dilihat saja. misalnya pada sebuah website. dan yang dapat dilihat adalah hanya  tampilan visual dan fungsi yang berjalan. Yuk kita melihat gambar yang ada  di bawah ini. Pengalaman yang dirasakan user adalah sebuah iceberg, puncak gunung es. Visual design hanyalah satu bagian dari gunung es User Experience. Terdapat Concept/ User Research, Requirement/ Content , Sitemap/ Screen Flow dan Wireframe yang justru menjadi dasar sebelum kita dapat membuat Visual Design.  Jadi UX tidak hanya berbicara tentang pengalaman yang dirasakan user, tetapi Juga MELAKUKAN proses User Experience Design.

The 5 Levels Of the Process Of User Experience Design

Yuk Kita lihat teori dibawah ini agar lebih paham.

Menurut usability.gov, User experience (UX) berfokus pada pemahaman secara mendalam terhadap user, apa yang mereka butuhkan, apa yang bernilai bagi mereka, kemampuan dan keterbatasan mereka. UX juga memperhitungkan tujuan dan sasaran bisnis dari kelompok yang mengelola proyek. Best practice dari UX dapat mempromosikan peningkatan kualitas interaksi dan persepsi user dengan produk Anda dan persepsi terhadap produk dan layanan terkait lainnya.

Rex Hartson & Pardha Pyla dalam bukunya yang berjudul The UX Book mengemukankan bahwa “User Experience adalah keseluruhan efek/dampak/akibat yang dirasakan oleh user sebagai hasil dari interaksi dengan dan konteks penggunaan sebuah sistem, perangkat atau produk, termasuk pengaruh usability, usefulness dan dampak emosional sepanjang interaksi dan rasa yang diingat memori setelah interaksi. “Interaksi dengan” bersifat luas dan mencakup melihat, menyentuh, dan berpikir tentang sistem atau produk, termasuk mengaguminya dan penyajiannya sebelum interaksi fisik apa pun.”

Donald Norman, pioneer dalam bidang User Experience mendefinisikan UX: “User Experience” mencakup semua aspek interaksi end-user dengan perusahaan, layanan, dan produknya.

Dilengkapi dengan penjelasan dari www.designlab.com, yang menyatakan bahwa “UX Design bukan tentang membuat sesuatu yang cantik, tetapi tentang menciptakan produk luar biasa yang diinginkan dan dibutuhkan orang. Cara terbaik untuk melakukannya adalah dengan memahami pengguna secara mendalam dan mengingatnya di setiap langkah proses desain.“

Jika dalam bahasa sederhana User Experience dapat disebut sebagai pengalaman yang dirasakan oleh user saat berinteraksi dengan sebuah produk dan rasa yang tinggal dalam memori setelah menggunakannya, maka apakah yang disebut dengan User Experience Design?

Read More

WIREFRAME ITU APA? YUK KENALI...

 

Ketemu lagi teman teman  digital semuanya, untuk kali ini saya mau nulis tentang Wireframe untuk website. sudah Tahu apa itu wireframe. Owh iya sebelum kita lebih lanjut bicara wireframe. semoga teman teman semua sehat yaa. Seiring dengan PPKM yang masih diperpanjang yuk tetap produktif walaupun dalam kondisi dirumah. Dan mau tidak mau sekarang sudah the real digital. Welcome era digital yang sesungguhnya. Oke yuk kita lanjut.

Apa itu wireframe?

Wireframe merupkan slah satu tahapan yang penting dalam proses perancangan produk dgital. Tak terkecuali dalam prose pembuatan website. Sebelum masuk masuk ke tahap pengembangan atau develoment, web developer biasanya terlebih dahulu meminta bantuan UI/UX designer untuk membuat sebuah wireframe.

Lalu apa sih wireframe itu penjelasannya? yukk disimak

Wireframe adalah sebuah kerangka yang berfungsi sebagai atau untuk tata letak sebuah  website sedemikian rupa agar sesuai dengan keinginan dari klien sebelum masuk ke tahpan desain dan coding.

Lalu bagaimana proses pembuatan wireframe?

Pembuatan wireframe biasanya dilakukan dilakukan oleh seorang UI Designer dengan memanfaatkan software desain khusus untuk wireframe ataupun bisa dilakukan coretan khusus manual.

Apa saja Komponennya?

Adapun Komponen yang menjadi bahan untuk proses wireframe meliputi, bagian header bodycontent, footer, sidebar serta komponen tambahan yang lain nya jika ada.

Dan secara umum perbedaan mendasarnya antara wireframe dan mockup ada pada tingkatan fidelity, dimana wireframe termasuk dalam low fidelity, sementara mockup ada pada tingkatan atau level high fidelity.

KOMPONEN  WIREFRAME WEBSITE

Didalam website mempunyai komponen yang wajib ditampilkan agar pengunjung bisa semakin mudah mendapatkan dan menemukan informasi yang dibutuhkan. Yuk kita simak koponen dalam proses pembuatan wireframe.

1. LAYOUT

Pertama yang harus diprsiapkan dalam membuat wireframe website adalah antarmuka atau interface atau layout utama. Elemen yang termasuk dalam layout melipute bagian header (kepala), menu navigasi, body, pemilihan jenis dan ukuran font hingga pemilihan letak sidebar (mau ditaruh sebelah kiri atau kanan)

2. NAVIGASI

Apa itunavigasi?

Navigasi itu kalau diibaratkan dengan tempat wisata adalah bagian peta dan petunjuk arah yang biasa digunakan para pengguna untuk menjelajahi isi konten yang ada. Jadi Navigasi ini benar -benar dikonsep secara matang mulai dari proses wireframe agar kedepan lebih nyaman dan mudah digunakan oleh penngunjung.

3. ELEMEN TAMBAHAN

selain dari mebuat layout Antarmuka serta navigasi, komponen selanjutnya yang perlu disiapkan  saat membuat wireframe wibsite adalah element pendukung. Element atau bgian ini biasanya jumlahnya berbeda tiap website.

Misalnya untuk website toko online setidaknya memerlukan Fitur Form konfermasi pesanan, fiur cek resi, serta layanan chat untuk diskusi antara penjal dan pembeli. Contoh wireframe

MANFAAT DAN KEUNTUNGAN WIRE FRAME APA SAJA

Apa sih Manfaat dan keuntungannya?

salah satunya mempermudah tugas web developer adanya wireframe dalam proses pembuatan web memberiri keuntungan dari sisi klien.

apa saja manfaatnya yuk disimak:

1.Menghemat waktu untuk edit dan revisi pada saat project pembuatan website sudah selesai.

2. Membangun Kepercayaan Konsumen karena apa yang akan didapatkan sudah tergambar jelas didepan

3.Memberikan gabaran website diawal.

Oke teman teman demikian sekilas dan singka tentanng wireframe. Jangan Lupa juga untk baca artikel tentang UI dan UX

Read More

SKILL YANG DIBUTUHKAN UNTUK UI/UX DESIGNER

 

Teman-teman tahu enggak? Bahwa untuk menjadi UI/UX itu membutuhkan sebuah kemampuan atau skill tersendiri. Lalu apa saja sih skill yang dibutuhkan sebagai seorang UI designer itu? Nah skil yang harus dimiiki diantaranya :

• Skill desain grafis
• Skill desain Branding
• Creative Thinking
• Covergert thingking

Nah itu beberapa skill yang harus dimiliki oleh UI Designer didalam mendesain tampilan produk agar lebih menrik dan mudah untuk interaksi.

Sementara untuk UX designer bertanggung jawab membuat design project. Dengan cara pendekatan pengguna agar nanti produkt digunakan.Oleh sebab itu, mereka harus memiliki skill melakukan riset, analytical thinking, problem solving, critical thinking, dan creative thinking. 

Nah untuk mempermudahlagi perbedaanya yuuk kita simak dalam bentuk tabel

Sumber Tabel : Niagahoster

oke teman-teman ini dulu yaa sharingnya, semoga bermanfaat yaa.

Read More

Skill apa Saja Yang Harus diKuasai Backend Developer?

Apa saja sih sebetulnya kemampuan yang harus dimiliki oleh seorang backend developer. Tean-tean yuk kita lanjutin bhasan tentang backend developer, setelah sebeluny akita bahas tentang apa itu backend dan apa tugasnya. Kini kita lihat yuk apa saja sih skill atau kemampuan backend web developer ini.

Nah skill apa saja sih yang harus dipunyai oleh backend developer, setidaknya ada 2 kategori skill yaiyu Hardskill dan softskill:

HARD SKILL

1. Menguasai Bahasa Pemrograman Backend

 Sebetulnya banyak sekali bahasa pemrograman yang dgunakan para backend enginer di dunia, namun yang masih banyak adalah bahasa pemrograman PHP sebagai bsa pemrograan secara umum.

Masih banyak bahasa pemrograman yang bisa digunakan seperti : Ruby, python, Node js, dan lain sebagainya. Tidak perlu dikuasai semuanya tapi cukup yang kita butuhkan sesuai dengan produk yang aan kita buat.

2. Mempelajari Pembuatan basis Data

seperti yang kita ketahui bahwa basis data atau database terbagai atas 2 yaitu relational database dan non-relational.Untuk membuat database pada web server, masih banyak yang menggunakan, MSQL, Oracle, Postgre. 

Untuk Non SQL adalah datalain yang seperti Redis, Mongo DB, Casandra dan lain-lain. Disini intinyamengerti dan paham struktur database. Jikabelum makan akan kesulitan nantinya.

3. Mahir Menggunaka API

Apa sih API itu, API atau Apliction Programing Interface.yaitu antar muka yang menghubungkan antra client dan server. yaitu data dapat ditampilkan kepada user yang berasal dari server. Format yang sering digunakan untuk menampilkan API adalah XML, dan JSON. Banyak sekali dokumentasi dan Tutorial yang dapat membantu dalam mempelajari menggunakan  API dengan baik dan benar.

4.Pelajari Penggunaan Framework

Penggunaan Frame work penting untuk proses pengembangan perangkat lunak . Framework PHP merupakan framework yang banyak digunakan saat ini untuk membuat website dinamis engan metode MVC

seperti Framework PHP yaitu Laravel, CodeIgniter,Simfoni, dan lainya. Kalau PHP juga banyak digunakan untuk sistem database yang dapat disingkronkan dengan MSQL.

5. Paham Berbagi Jenis Server

Dikarenakan Backend berhubungan langsung dengan server, maka harus mengena terlebih dahulu apa itu server , serta jenisnya. Dan juga harus belajar mengenai penggunaan HTTP untuk pengembangan web server lebih lanjut.

Nah itu teman-teman skill yang hars dimiliki oleh backend developer, semoga bermanfaat yaa. 

Read More

Apa itu Backend Dan Apa Tugas nya?

Hai teman-teman waktunya nulis lagi nih, namun barangkali yang akan saya tulis ini sudah ditulis juga oleh blog atau web lain, tapi ga ada salahnya ya kalau saya  menulis lagi seputar Back end. Apa sih Back end, sebetulnya nya istilah ini seetulnya tidak asing lagi apalagi buat teman-teman yang bergelut dibidang web development. Tapi buat teman teman yang baru nih dibidang web harus tahu yaa apa itu back end.

Selain Back end sebenarnya ada juga istilah Front end, tapi kita bahas backend dulu yaa. Apa sih back end itu? ada yang sudah tahu? Nah teman teman sering kan menjelajahi sebuah landing page, marketplace, aau jenis e commerce lainya. Nah teman-teman sering dong masukin semacam data semacam alamat email, nama, dan seterusnya untuk mebuat akun tertentu. Nah data tersebut akan masuk ke dalam web yang kita kunjungi tersebut. Nah tugas dari back end tersebut adalah mengelola data tersebut. Dan itu hanya sebagian dari tugas Back end. yang masih banyak lagi.

Dengan demikina Backend adalah merancang perangkat lunak,membuat sistem yang tidak terlihat yang berhubungan dengan pengelolaaan data dari sisi server yang berhubungan dengan logika dan data base, menggunkan bahasa pemrograman seperti PHP, phyton, NodeJs, Ruby atau yang lainnya.

Lalu tugasnya Backend developer apa saja ?

Tugas dari backend developer adalah :

1. MerancangSrruktur Model Data
2. Membuat code program untuk apalikasi lebih aman
3. Mengatasi Setiap Permasalahan Yang muncul di sisi Sistem
4. Mengembngkan Code Progam dan Melakukan Testing
5. Membuat Ide Dan Konsep untuk ditambahkan pada produk aplikasi
6. Meningkatkan struktur data yang sudah ada 
7. Melakukan riset dan evaluasi pada tampilan desain website

Nah itu teman teman tentang backend developer beserta tugasnya ya, semoga bermanfaat ya.

Read More

LARAVEL FRAMEWORK

 

Membangun website diera sekarang rasanya sudah begtu mudahnya, dengan munculnya banyak frame work, tentu ini memudahkan  bagi para pemula untuk mempelajarai dan membangun web dengan cara mudah dan tidak terlalu banyak ngoding.

Dengan banyak nya Frame work baru yang bermunculan, tentu semakin banyak pilihan untukkita unuk membangun website. Adapaun Frame work yang saat ini popular sekali adalah LARAVEL. 

Pengembangan web akan terasa lebih mudah jika kita menggunakan tools yang tepat dan sesuai.Framework yang baik adalah framework yang sesuai dengan kebutuhan aplikasi web yang akan Anda bangun. Tidak hanya itu, framework juga harus bisa menyederhanakan proses pembuatan dan menghasilkan performa yang aplikasi web yang lebih maksimal. Dengan demikian kita mesti menggunakan Framework yang tepat.

Laravel adalah salah satu framework yang sederhana namun power full, laravel juga bisa menyerderhanakan proses pembuatan, dn menghasilkan aplikasi web yang maksimal.

Lalu apa itu laravel sesungguhnya?

Teman teman pasti tahu bahasa pemrograman PHP?  Nah Laravel adalah satu-satunya framework yang membantu Kita untuk memaksimalkan penggunaan PHP di dalam proses pengembangan website. 

PHP merupkan  pemrograman yang sangat dinamis, Namun  semenjak adanya Laravel, dia menjadi lebih powerful, cepat, aman, dan simpel. Setiap rilis versi terbaru, Laravel  selalu memunculkan teknologi baru di antara framework PHP lainnya.

Perlu diketahui Laravel itu diluncurkan sejak tahun 2011 dan mengalami pertumbuhan yang cukup eksponensial. Di tahun 2015, Laravel adalah framework yang paling banyak mendapatkan bintang di Github. Sekarang framework ini menjadi salah satu yang populer di dunia, tidak terkecuali di Indonesia. Tentu saja bagi teman teman yang sering menggunakan bahasa pemrograman PHP tentu semakin terbantu denga adanya Laravel.

Laravel lebih fokus pada end user, yang berarti fokus pada kejelasan dan kesederhanaan, baik penulisan maupun tampilan, serta menghasilkan fungsionalitas aplikasi web yang bekerja sebagaimana mestinya. Hal ini membuat developer maupun perusahaan menggunakan framework ini untuk membangun apa pun, mulai dari proyek kecil hingga skala perusahaan kelas atas.

LARAVEL UNTUK PROSES PENGEMBANGAN WEBSITE

Dengan Laravel memberikan beberapa keuntungan, antara lain yaitu

• Website menjadi lebih scalable (mudah dikembangkan).
• Terdapat namespace dan tampilan yang membantu Kita untuk mengorganisir dan mengatur sumber daya website. 
• Dalam proses pengembangan menjadi lebih cepat sehingga menghemat waktu karena Laravel dapat dikombinasikan dengan beberapa komponen dari framework lain untuk mengembangkan website.

Ada 2 tools andalan Laravel yang jarang dimiliki oleh frmework lainya yaitu COMPOSER dan ARTISAN.

Apa sih Composer dan Artisan itu?

COMPOSER

Composer adalah  merupakan tool yang di dalamnya terdapat dependencies dan kumpulan library. Seluruh dependencies disimpan menggunakan format file composer.json sehingga dapat ditempatkan di dalam folder utama website. Inilah mengapa composer terkadang dikenal dengan dependencies management.

Pertanyaannya lain, apa itu dependencies management?

Misal Kita mempunyai sebuah website yang membutuhkan sebuah library. Kita ambil contoh library untuk mengimplementasikan validasi dan proteksi untuk spamming, yaitu Google reCaptcha.

Tentu saja untuk menyediakan Google reCaptcha tidak bisa menggunakan satu library saja, tapi membutuhkan beberapa library. Anda tidak mungkin menginstall satu per satu library.

Nah... Composer membantu Kita untuk menginstall library yang dibutuhkan oleh library Google reCaptcha. Jadi jika menggunakan composer Kita tinggal menginstall library Google reCaptcha dan secara otomatis library lain akan terinstall.

ARTISAN

Apakah Sudah pernah tahu  ini sebelumnya ? Artisan adalah merupakan command line interface yang dimiliki oleh Laravel. Artisan mencakup sekumpulan perintah yang membantu Anda untuk membangun sebuah website atau aplikasi web.

Kumpulan perintah Artisan juga termasuk penggabungan dengan framework Symphony yang menghasilkan fitur add-on di Laravel 5.1 (sekarang sudah masuk ke versi Laravel 5.8). Dengan adanya fitur add-on, Kita bisa menambahkan berbagai macam fitur baru ke Laravel.

Nah itu teman teman sedikit ulasan tentang Laravel jangan lupa baca postingan yang lain juga ya seputar website.

Read More

MEMBUAT WEB TANPA CODING DENGAN ADOBE MUSE

Membuat website bagi sebagian orang masih pusing di urusan coding, karena membuat website atau membangun desain website memang dibutuhkan kemampuan coding yang memadahi.  Namun seiring kemajuan teknologi, sofware dan aplikasi, tentu membuat atau membngun sebuah web semakin dimudahkan dengan adanya Frame work amupun software yang mampu merancang dan membangun desain web tanpa harus bersusah payah meng coding.

Salah satu software yang bisa membuat desain atau tampilan web adalah "Adobe Muse" Muse adalah adalah besutan Adobe yang diantara kita sudah tidak asing lagi. Dan produk adobe yng sangat populer adalah Photoshop. Nah tentunya jika kita sudah mahr dan menguasai Photoshop, seharusnya sudah tidak kesulitan untuk membuat web, setidaknya bisa mempercepat. 

Adobe Muse adalah merupakan software tool untuk  membuat dan mempublikasikan website dinamis pada desktop dan perangkat mobile (mobile devices : Ipad, smartphone, dll.) yang memenuhi standar web terbaru – tanpa kita harus menuliskan kode(coding). Hal ini membuat Kita  sangat bebas dalam men-desain dan menggunakan beberapa tools yang sudah familiar kita gunakan serta ratusan web font. Dalam Adobe Muse CC ini kita mudah sekali untuk membuat konten interaktif, termasuk tampilan slide, form interaktif, dan masih banyak lagi yang lainnya.

Llu fitur firur apa saja sih yang bisa kit dapatkan dari Adobe Muse, yuk baiknya simak dan baca postingan ini sampai selesai yaa.

1. SIMPLE SET PLANING : Membuat Layout halaman website kita sangat mudah dan simple. Kita hanya perlu menambahkan nama, mengatur halaman, dan kita juga bisa menerapkan pengaturan format halaman pada Master Page layaknya kita bekerja dengan Adobe InDesign. Ini memudahkan kita untuk membuat layout dan sitemap website kita.
2. INTUITIVE DESIGN FEATURE  : iniadalah fitur terbaru yaitu dengan adanya panel layer. Kita bisa menggunakan panel Layers baru untuk mengontrol elemen desain kita, semudah kita melakukannya pada Adobe Photoshop atau beberapa software adobe yang lain. Beberapa tools yang sering kita jumpai seperti, Eyedropper, Smart Guide, Paste in Place, Edit Original, dan masih banyak lagi.
3. HUNDREDS OF FONTS : Dengan Fitur ini Kita bisa memilih dan menggunakan dari ratusan bentuk dan type tipografi, dan beberapa web-safe font, serta system fonts. Menu tools ini sangat familiar sekali seperti kita sedang memilih jenis font pada software adobe lainnya.  Ini adalah layanan yang bisa kita gunakan yang didukung oleh Adobe TypeKit Services.
4. ENGAGING AKTIVITY : Nah yang fitur ini Kita tinggal melakukan drag and drop untuk menambahkan navigasi yang bisa anda customize, beberapa model slide show yang bisa anda gunakana, contact form yang sudah disediakan, dan masih banyak lagi widget-widget yang sudah disediakan untuk website kita. Semua widget dalam Adobe Muse CC ini sudah mendukung Touch Enabled yang diperuntukkan  pada perangkat mobile devices.
5. EMBEDED HTML: Dengan Fitur ini kita  bisa menambahkan Google Maps, video YouTube, Facebook feed, file animasi HTML5, dan yang lainnya ke situs kita. Cukup copy dan paste kodenya ke dalam konten yang sudah kita buat dalam Adobe Muse CC dan Adobe Muse CC akan secara otomatis generate. mudah bukan ?
6. NEW SCROLL MOTION EFFECTS : Fitur ini  sangat mudah untuk kita bisa  membuat elemen scroll motion baik itu hirozontal maupun vertical dan pengaturan kecepatan yang berbeda dengan scroll mouse, atau sentuhan jari, pada desktop atau perangkat mobile, termasuk iPhone dan iPad.
7. SITE PREVIEW DAN TESTING : Dengan fitur ini Kita bisa melakukan preview tampilan baik pada versi desktop, smartphone, atau tablet. Ini memungkinkan anda untuk melakukan modifikasi atau beberapa revisi sebelum kita mempublish-nya ke dalam hosting kita. Bagaimana fiturnya legkap yaa gaes?
8. IN BROWSER EDITING  : Dengna fitur ini memungkinkan kita untuk melakukan edit, modifikasi atau revisi pada website kita, dengan feature ini, membuat website yang sempurna menjadi lebih mudah dan simple.
9. LATEST WEB STANDART : Dengan  Membangun website profesional yang muncul dengan cepat dan bagus di beberapa platform browser dan perangkat mobile. Adobe Muse kode CC memang dirilis agar  kita bisa mengambil keuntungan dari kemajuan terbaru dalam dunia standar web dan kemampuan search engine mendeteksi website kita agar lebih mudah dan gampang diakses oleh user kita. Apalagi sekarang banyak netijen yang memang ingin tampilan web yang enak dilihat, responsif, dan mudah diakses tentunya.

   
   

Read More

3 Tools UI DESIGN yang Bisa di AKses Gratis

 

Kalau bicara tentang UI design tools tentu banyak sekali ada sekitar 10 tools, tapi tentu saja semua itu gratis alias berbayar, namun teman -teman bisa akses 3 tools secara gratis. Tampilan Antarmuka atau interface website dan aplikasi mobile adalah merupankan elemen yang sangat penting yangharus diperhatikan oleh seorang developer . untuk mendapatkan visual yang bagus, tentu membutuhkan tool yang bisa mempermudah, sebetulnya ada banyak tools yang bisa digunakan . untuk kali ini ada tools yang bisa kamu akses secara gratis atau free. yuuk langsung disimak yaa..

1. Adobe XB : Pilihan tools wajib yang pertama harus dimiliki adalah Adobe XB, ini adalah aplikasi besutan dari adobe yang sudah terkenal dan tidak diragukan lagi. Adobe XB diluncurkan Tahun 2016, dan ini merupakan respon dari Adobe memenuhi permintaan dari para UI designer yang membutuhkan aplikasi untuk merancang User interface atau UI. Llu fitur fturnya apa saja ?Fitur dari Adobe XD: 1. Repead Grit Repeat grid: Berfungsi untuk membuat grid untuk item yang berulang seperti lists dan galeri foto. 
• Prototype and animation: Membuat prototipe animasi lewat linking artboards. 
• Interoperability: Dengan fitur ini, Kita dapat mengakses files dari aplikasi Adobe lainnya, seperti Illustrator, Photoshop, dan AfterEffects.
• Voice design:  Berguna untuk membuat aplikasi agar dapat beroperasi dengan perintah suara.
• Symbols: Pengguna bisa membuat simbol untuk menggambarkan logo dan buttons. 
• Responsive resize: Menyesuaikan ukuran gambar dan objek lainnya pada artboards secara otomatis. 

2. InVisionApp Aplikasi yang Kedua adalah platform yang bisa kita  manfaatkan untuk mendukung proses desain dan prototyping melalui kolaborasi dengan sesama desainer sampai ke tahapan presentasi ke klien. 

   Kita dapat membuat rancangan mockup interaktif untuk wireframes dan desain dalam satu program. Jadi sekarang Kita bisa langsung melakukan uji coba UI design website dan aplikasi ponsel hasil rancangannya  tanpa perlu repot-repot menggunakan tools tambahan lainnya. Lalu apa saja fitur yang da dalam INVision app, berikut fitur-fiturnya

   Fitur-Fitur: 

   • Prototipe desain 
   • Design sharing and presentation
   • User testing and research
   • Real-time design meetings and whiteboard
   • Project management for designer
   • Design feedback and commenting
3. MAZE  Dalam proses pembuatan desain user interface yang oke, Kita  mesti melalui tahapan uji coba untuk memastikan rancangan yang kita buat dapat berjalan dan berfungsi sesuai dengan baik.Aplikasi ini hadir sebagai salah opsi platform yang dapat Kita gunakan untuk tujuan tersebut.

   Maze adalah merupakan sebuah user testing platform yang bisa digunakan untuk menguji prototipe aplikasi dalam bentuk tampilan autentik dari sudut pandang pengalaman pengguna (user experience). Jadi simpulanya  hasil rancangan UI design yangkita buat bisa langsung dites lewat platform ini.

   Kita dapat membuat sendiri susunan tes yang cocok untuk berbagai prototipe aplikasi lewat platform Maze yang berbasis web. Maze dapat mencatat user path dari perangkat desktop maupun mobile tanpa bantuan aplikasi pihak ketiga.  lalu fitur fiturnya apa saja : 

   Fitur-Fitur:

   • Direct success
   • Indirect success
   • Bounce rate
   • Average duration 
   • Mis-click rate
   • Heat Map & Click Trail
• Individual User Session Data 

Oke teman teman semoga bermanfaat yaa, jangan lupa baca artikel lainya tentang website.

Read More

Django Framework

 

Teknologi web saat ini terus makin maju dan pesat, terutama didunia pemrograman web terus mengalami perembangan yang sangat pesat, makin banyak frame work yang bisa kita gunakan dan kita nikmati untuk merancang dan membangun website. Django adalah salah satu Framework python merupakan frame work terbaik untuk membangun aplikasi web. Dan kabar baiknya lagi Django itu gratis dan open source. Django menawarkan stabilitas, paket dokumentasi terbaik dan memiliki dukungan komunitas yang baik.

Selain itu Django jug banyak digunakan di CRM, CMC, Booking Engines dan semua jenis web. Ini mendukung pengembangan cepat API backend dengan code yang minimal.

Ada yang lain lagi diantaranya adalah Django sangat bagus untuk solusi Analisis data, perhitungna yang rumit, dan machine learning. Ini adalah salah satu pilihan teratas untuk para developers saat ini.

Dalam penggunaanya harus mempertimbangkan kapan akan menggunakanya :

1. Untuk membangun aplikasi berskala besar
2. Aplikasi berbasis API
3. Tidak memperdulikan arsitektur Monolit 
4. Solusi analitik data dan Machine

Buat teman-teman yang penasaran dan ingin mencoba silakan bisa mengunjungi web resminya djangoproject.com. semoga informasinya bermanfaat.

Read More

Go "Golang" Bahasa Pemrograman Milik Google

Sudah tahu belum kalau google itu mempunyai bahasa pemrograman namanya GO atau sering dikenal Golang. Go bahasa pemrograman milik google bersifat open source, sangat memudahkan kita jika ingin membuat perangkat lunak yang sederhana, andal dan efisien. Alasanya karena Go mempunyai sintaks yang clean sehingga mudah dipelajari bagi pendatang baru atau newbie.

Selain itu keindahan dari Go yaitu, adalah dukungan kelas satu untuk concurrancy, Go juga mendukung multi threading.

Jika teman-teman ingin sesuatu yang ringan, pengembangan dan eksekusi ringan Go dalah bisa menjadi salah satu pilihan terbaik.

Menurut Alfin maulana Malik seorang Web developer ada 4 hal yang perlu teman-teman ketahui juga.

Yang jelas teman-teman harus mempertimbangkan kapan menggunakan :

1. Membangun aplikasi kecil dan ringan
2. Membangun platform countainer berbasis microservice
3. Pengembangan cepat, mudah sekali dibangun, dan kurvanya pun lebih pendek
4. Membangun layanan async dan multithreated

Silakan teman-teman yang tertarik ingin membangun aplikasi menggunakan Go bisa langsungmengunjungiweb resminya di www.golang.org .semoga bermanfaat, dan silakan bisa dishare kembali ke teman-teman yang lain semoga bermanfaat.

Read More

Roadmap Menjadi web Developer

Belajar pemrograman web, membutuhkan pembelajaran yang kontinyu, dan membutuhkan belajar yang terstruktur. Tentu  banyak yang harus dipelajari dalam  pemrograman web. Selain itu jika teman-teman ingin menjadi Web developer tentu harus tahu alur atau roadmap. sehingga teman teman bisa belajar secara teratur dan terurut, mulai dari dasar kemudian menengah hingga tingkat lanjut. Jadi teman -teman harus tahu dasarnya apa saja yang harus dipelajari dalam belajar pemrograman web. Nah bagi teman teman yang igin sekali jadi web developer  ataupun ingin sekali belajar pemograman bagaimana sih road map.

Intinya begini jadi nanti teman teman bisa pilih roadmapnya, agar dalam pembelajran nanti lebih fokus dan terarah, apakah hanya jadi front end saja, tau mau jadi back end, atau memang mau total jadi web developer.

Nah untuk mengetahui semua roadmap nya tersebut teman-teman bisa kunjungi  Roadmap Developer di situs resminya : Developer roadmap nama situsnya atau webnya adalah roadmap.sh. 

Di roadmap.sh teman -teman bisa pilih roadmap pembelajaranya, ada front end, ada backend, DevOps. Anroid dan yang lainya.

Ini contoh tampilan roadmap dari frontend ini saya capture hanya setengahnya saja tapi sebetulnya roadmapnya masih panjang.

Jika teman-teman masih pensaran dengan roadmapnya secara utuh dan ingin dipelajari lebih lanjut silakan lansung dikunjungi di roadmap.sh .

Oke teman-teman sekian dulu informasi dari saya semoga bermanfaatnya. jangan lupa share juga informasinya ke teman- teman Anda

Read More

5 Backend Frame work Recomended

 Kalau kita bicara wesite banyak sekali yang bisa dibahas dari mulai, user interface, plugin, design, dan cms atau content management system. Hingga komponen yang ada di belakang layar atau Backend. Seperti backennd frame work yang akan membantu para web development dalam mengembangkan sistemnya maupun aplikasinya.

Untuk para developer web, istilah Frame work sudah tidak asing lagi, dalam pekerjaaan perancangan web pasti selalu berhungan dengan frame work karena, frame work itu merupakan kerangka dari sebuah perangkat lunak yang bisa membantu untuk merancang sebuah website.

Bahasa pemrograman yang digunakan untuk backend pun sama saja seperti yang digunakan dalam front end. Jadi seorang backend harus mempelajari dan memperdalam PHP, Node, Python, fire base sebagai dasar.

Sekarang sudah banyak sekali frame work yang bisa kita dapatkan, karena semakin lama kebutuhan untuk frame makin meningkat karena era digital yang semakin mengglobal. Ada beberapa Frame work yang popular di tahun 2019 dan 2020, terutama frame work backend.

Frame work tersebut diantaranya :

1. LARAVEL : laravel saat ini sangat popular sekali, dengan bahas pemrograman php saat ini laravel banyak digunakan. laravel membuat para dedeveloper web menjadi lebih mudah dalam menuliskan code.Laravel juga menggunakan metode MVC (model view controler) yang memisahkan aplikasi dengan kompone-komponen aplikasi jadi yang cukup popuerr dalam penggunaan. Silakan kunjungi web resminya Laravel.com
2. Net Core , merupakan frame work yang bersifat open source.  yang bisa digunakan untuk sistm operasi sistem operasi windows, linux, macOs. Frame work ini di kembangkan oleh Microsoft dan ini boleh dibilang paketan yang complet. Bahasa pemrograman net core juga tidk terbatas pada C#, F# atau visual basic. Frame ini memenuhi hampir pada seluruh kebutuhan developer. mulai dari we, web aplikasi, gaming hinggaa IoT. Silakan kunjungi Netcore.com
3. Django, Salah satu Keunggulan dari Django adalah less Code, yang secara jelas ditampilkan di website resminya.Backend frame work ini dibawah naungan Django Software Fondation. Django secara khusus fokus pada bahasa pemrograman Python. Silakan kunjungi web resminya Django
4. Rubby On Rails, Ruby merupakan salah satu pemrograman menggunakan pemrogram C. Sama dengan Django Ruby on Rails fokus pada bahasa pemrograman Ruby. Ruby on Rails dikembngkan Tahun 2003 tapi masi populer sampe saat ini.Dan bisa menjadi rekomendasi.Silakan dikunjungi Web Resminya Ruby On Rails.org
5. EXPRESS, satu lagi Backend frame work yaitu Express, projek dari Node Js Foundation. Expess jugamembantu banyak sekali developer dalam pembuatan aplikasi muapun web. Express tidak terbatas hanya  pembuatan web tapi  mengeksplorasi Express untuk server file statik, sosial media, layanan web yang bisa diakses melalui REST API atau aplikasi hybrid lain. Silakan Kunjungi web resminya : expressjs.com 

Semogan menjadi khasanah ilmu dan pengetahuan.

Read More

Frame Work "Boostrap"

Website adalah teknologi yang tidak bisa dipisahkan dari dunia internet. membuat atau membangun  website walaupun hanya front end, tentu saja membutuhkan desain ilmu, dan yang jelas setidaknya mempunyai dasar untuk "Ngoding". Walau sebagian orang kalau dengar ngoding rasanya Pusing :) .

Saat ini teknologi semakin maju membuat web atau mengembngkanya semakin di permudah dengan adanya frame work yang sudah banyak. Karena dengan frame work tentu kita tidak usah repot untuk ngoding atau membuat syntak yang lebih sulit. Dan ini sangat membantu para pemula.

Boostrap, Tahukah teman-teman dengan Bootstrap, Boostrap saat ini sangat popular bagi para developer web tentu ini sudah tidak asing lagi dengan Frame work yang satu ini. Bootstrap adalah salah satu dari sekian frame work yang bisa membantu para front end web development. untuk mempermudah pengerjaan front end webnya. Bootstrap dulu dikembangkan oleh oleh Jacob Thornton dan Mark Otto.

Banyak fungsi yang bisa didapatkan salah satunya bisa mempercepat pembuatan front end sebuah website. Untuk tampilan juga sudah responsive sehingga sehingga mendukung segala jenis resolusi. baik itu di tablet, laptop maupun di handpone atau mobile.

Ada beberapa keunggulanya dari boostrap antara lain :

1. Lebih efisien waktu
2. Lebih fleksibel
3. Desain yang oriented
4. Responsive
5. Kompatibel dengan Java script

Boostrap ini open source teman-teman bisa langsung download di web resminya, download disini getBoostrap.com . untuk proses download dan instalasi tidak terlalu rumit. Silakan teman-teman bisa instalasi sendiri. semoga bermanfaat ya.

Read More

Menambahkan Icon Pada Website Dengan Font Awesome

 Bagi Front End web developer, mempecantik tampilan website adalah sebuah hal harus dilakukan agar visitor dari sebuah web lebih mudah dalam menjelajahi sebuah web dan juga menjadikan web lebih indah dan enak dilihat.

Salah satu dari cara memperindah web adalah dengan menambahkan sebuah Icon atau font tertentu yang menggambarkan obyek tertentu. Namun membuat icon itu bukan pekerjaan mudah apalagi nantinya untuk tampil di web, karena yang dipasang kedalam webnya bukan gambar iconnya namun code/sintak dari icon tersebut.

Bagi teman-teman yang masih baru di bidang front end, atau web design tentu sedikit bingung untuk menambahkan, apalagi memang sekarang trend nya web lebih banyak menggunakan simbol atau icon untuk mempermudah para peselancar web.

Nah Buat teman-teman yang belum tahu harus bagaimana membuatnya atau kalau mau download dimana.

Font Awesome adalah tempatnya dimana di font awesome adalah berisi icon icon yang telah dimuat menjadi frame work css. yang bisa digunakan untuk menampilkan icon icon standart dalam front end development.

Teman teman bisa mendapatkan nya secara free. Font Awesome dibuat oleh DAVE GANDY dan kita bisa cari dan dowload, kita bisa mendapatkan juga yang versi free, silakan kunjungi Font Awesome . Dan cara mendapatkan syntax frame workny sangat mudah sekali, jadi mungkin saya tak perlu memberikan caranya.

Sudah ada sekitar 439 lebih font di versi terbarunya yang bisa digunakan. Sebenarnya font awesme dibuat untuk Bootstrap. Tapi untuk frame work lainya juga tidak masalah sih. Karena jenis font awesome itu Vektor, jadi jika file besar atau kecil jika rusak file tak terlalu kelihatan.

Read More

Mengenal VS Code

 Visual Studio Code mungkin ni sebagian sudah familiar, apalagi yang senang koding. Visual Studio atau VS Code yang orang sering sebut  ini adalah teks editor open source berbasis electron. VS code ini besutan dari Microsoft.

Buat teman- teman yang baru belajar koding atau yang belum familiar boleh ini untuk kegiatan kodingnya. Sebelu menggunakan teman teman bisa langsung mengunjungi web resminya dan bisa langsung download code.visualstudio.com

Untuk dowload teman-teman pilih sesuai dengan sistem operasi dari laptop atau kompunternya ya. Menggunakan Windows, Linux atau dengan sistem operasi mac.

Untuk instalasi tentunya tidak terlalu sulit bisa mengikuti tutorial.

Untuk  visual code ini mendukung untuk bahasa pemrograman antara lain : C, C++, C#, HTML,Javascript, JSON, PHP, Pyton, T-SQL, dan masih banyak yang lain. Kalau bahasa pemrogramanmu belum ada silakan teman-temn bisa kesini https://marketplace.visualstudio.com/vscode/Languages  . Di web ini teman-tean bisa cari bahasa pemrograman yang diinginkan.

Read More

Mengenal Text Editor Sublime Text

 Kalau pada postingan sebelumnya tentang Text editor yaitu VS code, sekarang kita bahas satu lagi tentang aplikasi text editor yaitu Sublime Text, mungkin kalau teman-teman web developer aplikasi ini sudah tidak asing lagi. Buat teman-teman yng baru belajar program. atau yang selama ini menggunakan text editor yang lain, Sublime Text ini bisa dicoba.

Sublime text sangat atraktif dan menarik dan Kita bisa mengubah-ubah warnanya, sehingga kita tidak bosan saat ngoding. Banyak juga para developer web yang menggunakan Sublime text ini untuk mengelola webnya.

Sublime text ini juga mendukung untuk bahasa perograman seperti : C++ ,C, C#, CSS, ASP, HTML, PHP dan lain sebagainya.

Sublime Text , text editor ini open source teman teman bisa langsung download aplikasi di web resminya Sublimetext.com. Download dan sesuaikan dengan sistem operasi yang kita miliki. Kalau yang saya gunakan adalah windows.

Ada beberapa keunggulan Sublime text antara lain :

1. Memindahkan baris syntax secara cepat, di sublime text saat kita ingin memindahkan syntak bisa cepat dan teman teman hanya tinggal drag and drop saja.
2. Membuat komen lebih cepat, Keunggulan kedua yaitu bisa komen lebih cepat sehingga mempercepat pekerjaan kita, dengan CTRL+/
3. Membuat struktur dan element HTML/PHP lebih aman
4. Dapat mengubah text dalam jumlah banyak : caranya dengan menyeleksi text yang akan diubah lalu tekan CTRl+D
5. Menggandakan baris syntax, caranya yaitu dengan mengklik baris yang ingin digandakan lalu tekan CTRL+SHIFT+D

Read More

Dasar HTML

 Untuk kali ini setelah sekian lama tidak posting, untuk kali ini saya mau posting tentang Dasar HTML dalam membuat HTML. Untuk kali ini bahasan kita yaitu tentang dasar dasar HTML.

Mendesain html berarti melakukan suatu tindakan pemrograman. Namun html bukanlah sebuah bahasa pemrograman. Namun html hanyalah berisi perintah‐perintah yang telah terstruktur berupa tag‐tag penyusun. Menuliskan tag‐tag html tidaklah sebatas hanya memasukkan perintah‐perintah tertentu agar html kita dapat di akses oleh browser. Mendesain html adalah adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari html adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang dan bermanfaat.

Read More