Tips All

Pada tahun 2024 ini semakin banyak perusahaan dan startup yang transformasi dari offline menjadi online untuk menjangkau lebih banyak calon customer mereka dalam mempromosikan bisnis atau jasa yang ditawarkan oleh perusahaan dan startup tersebut. Apabila kita riset kembali maka kita dapat menemukan bahwa banyak lowongan pekerjaan untuk UI atau UX designer di luar dan dalam Indonesia. Peran UI UX designer ini sebenarnya sangat penting dimiliki oleh sebuah perusahaan dalam memberikan experience terbaik kepada customer mereka sehingga customer semakin betah dalam menggunakan produk dan jasanya. Saya akan membagikan arahan belajar terbaru apabila kamu ingin berkarir sebagai UI UX designer di tahun 2024 dan seterusnya, kamu juga bisa mengikuti beberapa kelas online gratis buatan BuildWithAngga untuk memperkuat fundamental skills sebagai seorang professional UI UX designer. Roadmap berkarir sebagai UI UX designer UI dan UX adalah bidang yang berbeda namun masih saling melengkapi, apabila kamu lebih suka dalam mengamati data dan perilaku pengguna ketika menggunakan aplikasi maka UX designer adalah karir yang cocok buat kamu tekuni. Apabila kamu lebih menyukai bermain warna dan tampilan visual dalam membuat sesuatu menjadi lebih menarik maka kamu bisa coba memperdalam bidang UI design menggunakan software Figma atau Adobe XD. 1) Memilih salah satu bidang (UI atau UX) Seperti yang telah saya sampaikan sebelumnya bahwa kita wajib memilih salah satu bidang terlebih dahulu agar kita tidak begitu kewalahan, berikut penjelasan details dari UI dan UX: Kamu dapat memilih sebagai UX designer apabila: Memiliki rasa penasaran tinggi dalam mengamati perilaku orang lainMenyukai data-data yang dapat digunakan untuk meningkatkan UXMemiliki sifat extrovert dalam berkomunikasi dengan orang asing Dan kamu dapat memilih sebagai UI designer apabila: Menyukai permainan kombinasi warna dalam menciptakan design yang menarikMemiliki pengetahuan dasar tentang UX designMemiliki keahlian kuat pada bidang graphic design 2) Pelajari kelas gratis untuk perkuat fundamental Kamu wajib mempelajari ilmu terbaru dari mentor yang sudah terbukti professional dan memiliki pengalaman kerja sebagai UI UX designer yang baik agar proses pembelajaran menjadi lebih efektif untuk berkarir di tahun 2024. Saya akan bagikan beberapa kelas gratis rekomendasi sehingga dapat menghemat waktu dan biaya belajar: Belajar UX research untuk kebutuhan projek Kita perlu mengumpulkan banyak data dan insight lainnya yang dapat membuat projek website dan aplikasi buatan kita lebih mudah digunakan oleh pengguna dan sekaligus meningkatkan perfomance bisnis pada perusahaan tempat kita bekerja nantinya. Pada kelas UX research ini kita akan belajar bersama mentor Angga untuk memperkuat skills UX design dan menciptakan produk yang dicintai oleh pengguna. Belajar membuat User Persona Aplikasi yang kita bangun harus sesuai dengan kebutuhan pengguna, kita perlu membuat aplikasi travel untuk mereka yang suka jalan-jalan dan mengunjungi tempat baru. Pada kelas User Persona kita akan latihan membuat persona yang baik dan sesuai kebutuhan projek dalam meningkatkan UI dan UX design dari aplikasi tersebut. Latihan Membuat User Flow User flow di dalam projek website dan aplikasi yang baik dapat membuat pengguna semakin mudah dan happy dalam menggunakan aplikasi kita. Maka dari itu kita perlu mendesain sebuah flow dengan hati-hati dan penuh pertimbangan, tujuan utama kita adalah jangan sampai membuat pengguna merasa frustasi dan kesulitan dalam menggunakan produk kita. Pada kelas User Flow UX Design kali ini kita akan belajar teori secara mendetails sekaligus berlatih dalam membuat user flow pertama kita untuk memperkuat logika di dalam UX design. Mempelajari software UI designer yaitu Figma Figma telah menjadi software favorite para UI dan UX designer dalam berkolaborasi menciptakan sebuah produk yang menarik namun tetap memberikan experience baik kepada penggunannya. Figma dapat kita gunakan secara gratis untuk beberapa projek pertama kita sebagai seorang pemula UI UX designer. Pada kelas Figma for Beginner maka kita akan pelajari seluruh tools dasar dan membuat portfolio pertama kita yaitu Mobile App travel design. Mempelajari proses pembuatan UI Styleguide Apabila aplikasi sudah berhasil kita design maka kita perlu membuat sebuah style guide yang dapat dipahami oleh tim lainnya seperti marketing, developer, sales, dan bahkan designer lainnya. UI styleguide akan menjadi petunjuk utama apabila kita ingin mendesain tampilan halaman baru lainnya dan menjaga konsistensi di dalam sebuah design website/aplikasi. Pada kelas UI styleguide ini kita akan belajar menggunakan Figma dalam membangun style guide sesuai dengan standard perusahaan-perusahaan besar lainnya. Meningkatkan keahlian UI UX design Pada kelas Mastering Figma maka kita akan mengulang kembali materi UX dan UI design menggunakan software Figma dalam menciptakan sebuah dashboard yang easy to use sekaligus memiliki tampilan yang menarik untuk dilihat oleh pengguna. 3) Menemukan komunitas yang tepat Ketika kita sudah memilih karir yang tepat dan mempelajari skills dasarnya sekaligus membangun portfolio pertama maka selanjutnya kita bisa menemukan komunitas yang tepat misalnya BuildWithAngga. Pada komunitas tersebut kita bisa memperkenalkan diri beserta portfolio kita untuk memulai membangun personal branding dan networking dengan designer lainnya. Biasanya, designer lainnya yang telah melihat skills dan portfolio kita dapat membantu memperkenalkan diri kita kepada perusahaan lain yang mungkin sedang membutuhkan designer untuk membantu menyelesaikan sebuah projek design website atau aplikasi. Di BuildWithAngga, banyak sekali private group yang bisa kita ikuti dan kebanyakan member dari grup tersebut juga sering memposting lowongan magang atau pekerjaan yang bisa kita manfaatkan dalam menumbuhkan karir kita sebagai UI UX designer. Kesimpulan dan saran Jadilah seorang UI UX designer yang outstanding dengan cara membangun portfolio yang dapat memberikan manfaat untuk banyak orang, bukan cuma sekedar hasil karya bohongan saja tapi juga bisa digunakan secara langsung oleh orang-orang. Pilih beberapa mentor yang professional di website BuildWithAngga untuk meminta arahan terbaru sekaligus menjalin hubungan baik kepada mereka, karena banyak sekali student di BuildWithAngga yang juga mendapatkan tawaran pekerjaan dari setiap mentor kelas. Sampai jumpa pada tips terbaru lainnya.

Pada artikel kali ini kita akan menerapkan studi kasus dengan membuat elemen card sederhana setelah Berkenalan Dengan SCSS dan SASS dan bagaimana Menggunakan SCSS/SASS pada file HTML. Persiapan Kita akan membuat project ini dengan menggunakan Vs Code. Apabila kamu belum menginstallnya maka bisa men-download disini. Lalu untuk referensi design akan menggunakan dari link figma community disini. Let’s Code 1. Untuk menyamakan project yang akan dibangun, silakan kamu ikuti pembuatan struktur folder dan file berikut: Untuk file image bisa kamu ganti dengan sesuai yang kamu inginkan. Apabila ingin sama persis silakan download image tersebut pada link figma community sebelumnya. 2. Kemudian pastikan sudah menginstall extension Live Sass Compiler pada Vs Code kamu karena kita akan melakukan kompilasi/perubahan dari file SCSS ke format CSS dengan menggunakan extension ini. 3. Lalu pada file index.html, silakan buat struktur HTML berikut: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Belajar Elemen Card Dengan SCSS</title> <!-- Font Inter --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" /> <!-- CSS hasil kompilasi --> <link rel="stylesheet" href="./scss/style.css" /> </head> <body> <div class="card"> <div class="card-image"> <img src="./image/image.png" alt="Card Image" /> </div> <div class="card-body"> <div class="card-body-title">Headline</div> <p> Write an amazing description in this dedicated card section. Each word counts. </p> </div> <div class="card-footer"> <button>See More</button> </div> </div> </body> </html> Apabila kita buka file tersebut ke browser akan didapatkan: Masih belum nyaman dilihat bukan, maka pada langkah selanjutnya mari kita proses styling elemen tersebut🖌 Styling It Setelah membuat struktur HTML, silakan kamu buka file style.scss nya dan ikuti langkah di bawah. 1. Buka file style.scss kamu, dan klik tanda Watch SASS, pada bagian bawah bar Vs Code Jika sudah maka akan muncul 2 buah file sebagai berikut: Maka sampai sini kamu sudah berhasil melakukan proses kompilasi dari file SCSS ke file CSS. 2. Persiapkan Variabel Color dan Font Weight Pada langkah ini kita mempersiapkan variabel yang akan digunakan pada elemen card tersebut: // Color Variabel $background-color: #e5e5e5; $gray: #425466; $purple: #4c6fff; // Font Weight $regular: 400; $semi-bold: 600; 3. Lakukan persiapan styling pada background dan semua elemen // Global * { box-sizing: border-box; } // Styling Body body { background-color: $background-color; } Pada kode tersebut terdapat selector universal yaitu *, selector tersebut akan memengaruhi semua elemen di dalam halaman file HTML dan didalamnya terdapat aturan yaitu penggunaan box-sizing: border-box; untuk memastikan bahwa lebar dan tinggi elemen mencakup padding dan border, bukan hanya content di dalamnya. 4. Styling Elemen Card .card { width: 350px; height: 400px; padding: 8px; border-radius: 16px; background-color: white; font-family: "Inter", sans-serif; ... } Kode tersebut merupakan aturan standar pada CSS yang dapat digunakan untuk menerapkan styling pada elemen card. Maka apabila kita buka file HTML tersebut kedalam browser didapatkan: Sudah mulai terlihat design nya bukan? Lalu coba kamu perhatikan kode HTML card sebelumnya: <div class="card"> <div class="card-image"> <img src="./image/image.png" alt="Card Image" /> </div> <div class="card-body"> <div class="card-body-title">Headline</div> <p> Write an amazing description in this dedicated card section. Each word counts. </p> </div> <div class="card-footer"> <button>See More</button> </div> </div> Terlihat pada elemen card tersebut memiliki children/items di dalamnya, maka dengan ini bisa kita manfaatkan fitur ajaib dari SCSS yaitu Nesting. 5. Proses styling dengan fitur Nesting Untuk melakukan styling pada class .card-image maka dengan menggunakan SCSS dapat dilakukan sebagai berikut: .card { width: 350px; height: 400px; padding: 8px; border-radius: 16px; background-color: white; font-family: "Inter", sans-serif; // Manfaatkan fitur nesting pada SCSS // &-image = card-image , karena berada dalam satu elemen dengan parent yang sama &-image { width: 100%; } ... } Tanda & dalam kode SCSS digunakan untuk merujuk pada "parent selector". Hal ini memungkinkan kamu untuk menyatukan selector parent dengan selector children untuk modifikasi di dalam file SCSS. Jadi ketika file SCSS di compile, maka tanda &-image akan menjadi .card-image. Mulai paham kan? Mari kita manfaatkan fitur ini untuk bagian .card-body dan .card-footer maka implementasinya: // Styling Card .card { ... &-body { margin: 24px; &-title { font-weight: $semi-bold; } p { color: $gray; font-size: 14px; } } &-footer { margin: 24px; button { width: 95px; height: 36px; border-radius: 10px; background-color: $purple; border: none; color: white; } } } Hingga didapatkan kode lengkap style.scss sebagai berikut: // Color Variabel $background-color: #e5e5e5; $gray: #425466; $purple: #4c6fff; // Font Weight $regular: 400; $semi-bold: 600; // Global * { box-sizing: border-box; } // Styling Body body { background-color: $background-color; } // Styling Card .card { width: 350px; height: 400px; padding: 8px; border-radius: 16px; background-color: white; font-family: "Inter", sans-serif; // Manfaatkan fitur nesting pada SCSS &-image { width: 100%; } &-body { margin: 24px; &-title { font-weight: $semi-bold; } p { color: $gray; font-size: 14px; } } &-footer { margin: 24px; button { width: 95px; height: 36px; border-radius: 10px; background-color: $purple; border: none; color: white; } } } Lalu apabila kamu cek file style.css hasil kompilasi file SCSS tersebut, didapatkan: * { -webkit-box-sizing: border-box; box-sizing: border-box; } body { background-color: #e5e5e5; } .card { width: 350px; height: 400px; padding: 8px; border-radius: 16px; background-color: white; font-family: "Inter", sans-serif; } .card-image { width: 100%; } .card-body { margin: 24px; } .card-body-title { font-weight: 600; } .card-body p { color: #425466; font-size: 14px; } .card-footer { margin: 24px; } .card-footer button { width: 95px; height: 36px; border-radius: 10px; background-color: #4c6fff; border: none; color: white; }/*# sourceMappingURL=style.css.map */ Terlihat extension tersebut sudah berhasil melakukan proses kompilasi dan apabila kita buka file HTML pada browser didapatkan hasil berikut: Taraa✨, selamat kamu sudah berhasil membuat elemen card sederhana menggunakan SCSS. Kesimpulan Sampai sini mulai seru bukan menggunakan SCSS? Maka saran saya kamu harus lebih banyak melakukan studi kasus berbeda agar lebih terbiasa dalam menggunakan fitur-fitur yang disediakan oleh SCSS ini. Oiya saya juga menyarankan apabila kamu ingin lebih expert dalam bidang web development, bisa bergabung pada kelas-kelas yang disediakan oleh BuildWithAngga. Kamu bisa mengakses nya secara gratis disini dan apabila ingin memperdalam lebih lanjut silakan bergabung pada kelas pro yang sudah disediakan. Tunggu apalagi dan saya tunggu kamu dikelas yaa😍

Secara default browser yang kita gunakan hanya mensupport proses styling menggunakan CSS saja. Maka dari itu setelah kita belajar Berkenalan Dengan SCSS/SASS, langkah selanjutnya ialah kita akan melakukan kompilasi atau merubah file SCSS tersebut menjadi file CSS agar bisa digunakan oleh browser. 1. Menggunakan Extension Jika kamu menggunakan VS Code, maka kamu bisa langsung melakukan proses kompilasi dengan menginstal extension yang sudah disediakan yaitu: Live Sass Compiler Kemudian buka file SCSS/SASS kamu, lalu perhatikan pada pojok bawah kanan pada tampilan VS Code akan terlihat button bernama Watch SASS. Tinggal kamu klik button tersebut maka secara otomatis extension ini akan melakukan proses kompilasi file SCSS/SASS menjadi file CSS. Setelah berhasil akan dihasilkan file berikut: Kamu perlu menggunakan file bernama style.css saja karena file lainnya hanya berfungsi untuk melakukan proses kompilasi ulang ketika terjadi perubahan pada file SCSS kamu. 2. Menggunakan Compiler Online Cara kedua yaitu kamu bisa menggunakan compiler online untuk merubah file SCSS menjadi CSS dengan cara mengunjungi website berikut: https://sass-lang.com/playground/ Maka kode SCSS kita sudah di kompilasi oleh website tersebut dan bisa langsung copy paste lalu kita gunakan pada file CSS kita. 3. Menggunakan Command Line Cara terakhir yaitu kita bisa menggunakan command line untuk melakukan proses kompilasi dengan instalasi library: sass npm install -g sass Kemudian lakukan proses watching yaitu agar proses compile file akan terus berjalan walau terjadi perubahan pada file SCSS tersebut. sass style.scss style.css Maka didapatkan file seperti ini: Dan apabila kita perhatikan, hasilnya sama seperti langkah nomor satu bukan? Karena behind the scene apa yang dilakukan pada langkah pertama dan ketiga adalah mereka melakukan proses kompilasi yang sama. Maka dari hasil kompilasi tersebut, kamu bisa menggunakan style.css sebagai file utama CSS yang akan digunakan pada HTML. Namun perlu diperhatikan ketika menggunakan command line pastikan pada device kamu sudah terpasang aplikasi NodeJS, dan jika belum kamu bisa mendownload nya disini: https://nodejs.org/en Kesimpulan Selamat, sampai disini kamu telah berhasil menggunakan file SCSS/SASS kedalam file HTML. Langkah selanjutnya ialah kamu tetap perlu mengembangkan skill styling web development agar dapat menghasilkan website yang eye catching dan nyaman digunakan oleh pengguna. Berbicara tentang website, pada BuildWithAngga terdapat kelas yang dapat digunakan untuk membantu dan mendukung perkembangan skill web development. Kamu bisa akses kelas tersebut secara gratis disini atau jika ingin memperdalam lebih lanjut kamu bisa bergabung pada kelas premium yang disediakan BuildWithAngga. Tunggu apalagi ayo bergabung dan sampai jumpa dikelas!

SCSS atau SASS merupakan singkatan dari Syntactically Awesome Stylesheets yang merupakan preprocessor dari CSS. Ketika menggunakan preprocessor kita dapat memiliki keleluasaan lebih dalam melakukan proses styling seperti pembuatan variabel, nesting, partials, mixins dan lain-lain yang tentu tidak bisa dilakukan oleh CSS biasa. Perbedaan antara SCSS dan SASS Terdapat dua cara dalam apabila ingin menggunakan SCSS atau SASS, yaitu: 1. SCSS Apabila ingin menggunakan SCSS, maka kita perlu membuat sebuah file dengan berekstensikan .scss. Dan untuk penulisan sintaks-nya sama seperti CSS native pada umumnya. .container { max-width: 576px; margin: auto; } .button { padding: 10px; border-radius: 2px; border: 1px solid black; } 2. SASS Kemudian apabila ingin menggunakan SASS, kita perlu membuat file tersebut dengan berekstensikan .sass. Perbedaan antara SCSS dan SASS terletak pada penulisannya. Untuk SCSS menggunakan kurung kurawal seperti CSS pada umumnya, sedangkan untuk SASS menggunakan identasi seperti python dalam penulisannya. .container max-width: 576px; margin: auto; .button padding: 10px; border-radius: 2px; border: 1px solid black; Fitur Yang Dimiliki Berikut ini beberapa fitur dari SCSS/SASS yang dapat kita manfaatkan: 1. Variabel Apabila ingin membuat variabel dalam SCSS dapat dilakukan dengan cara seperti ini: $red-100: #fee2e2; $red-200: #fecaca; $red-300: #fca5a5; $red-400: #f87171; Kemudian penggunaannya: button{ background-color: $red-300; } Dan perlu diingat dalam membuat variabel, kamu harus membuatnya dengan menggunakan tanda $ kemudian diikuti dengan nama variabel nya lalu ditutup dengan titik koma. 2. Nesting Kemudian terdapat fitur Nesting, yaitu memungkinkan kita melakukan grouping dalam proses styling. Berikut contoh penggunaan nesting untuk membuat navbar sederhana: index.html <nav> <ul> <li> <a href="">Dashboard</a> </li> <li> <a href="">Profile</a> </li> </ul> </nav> Maka apabila menggunakan SCSS didapatkan: SCSS nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } CSS nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } Terlihat pada file CSS tersebut, kita melakukan proses pemanggilan berulang pada kata kunci nav, sedangkan ketika menggunakan SCSS dapat dengan melakukan proses grouping sehingga tidak perlu memanggil kata kunci tersebut. Tentu saja hal ini menghasilkan kode yang nyaman dibaca. Perlu diingat ketika menggunakan fitur nesting pastikan elemen children di bawahnya masih dalam satu lingkup yang sama. 3. Partials / Modules Menganut prinsip Separate of Concern, kita dapat membuat sebuah module atau file SCSS terpisah untuk setiap bagian elemen HTML. Untuk membuat module pada SCSS, perlu menambahkan tanda underscore lalu diikuti dengan nama file tersebut. Sebagai contoh: _navbar.scss // _navbar.scss nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } style.scss // style.scss @use "navbar"; .container { max-width: 576px; margin: auto; } Terlihat pada kode di atas apabila ingin menggunakan module, maka dapat memanggilnya dengan kata kunci @use, dan pastikan file tersebut masih berada dalam satu folder yang sama. Apabila terdapat perbedaan hierarki pada file tersebut, maka relative path berlaku seperti CSS pada umumnya. 4. Mixins Mixin memungkinkan kita membuat sebuah block styling yang dapat digunakan secara berulang pada satu elemen dan elemen lainnya. Berikut ini contohnya: SCSS @mixin button($theme:red) { background-color: ($theme); padding: 2px 10px 2px 10px; border-radius: 3px; text-align: center; font-weight: bold; border: 1px solid black; } .button-info { @include button('blue'); } .button-danger{ @include button('red'); } CSS .button-info { background-color: "blue"; padding: 2px 10px 2px 10px; border-radius: 3px; text-align: center; font-weight: bold; border: 1px solid black; } .button-danger { background-color: "red"; padding: 2px 10px 2px 10px; border-radius: 3px; text-align: center; font-weight: bold; border: 1px solid black; } Pada kode di atas hanya perlu membuat satu block khusus yang memuat segala proses styling yang akan digunakan, lalu memanggil block tersebut dengan kata kunci @include pada elemen yang ingin diterapkan. Dengan menggunakan mixin memungkinkan kita menyisipkan sebuah parameter, sehingga membuatnya unik satu sama yang lain. Hal ini mirip seperti function dalam bahasa pemrograman pada umumnya. 5. Extended / Inheritance Sama seperti mixin, kita dapat membuat sebuah block khusus yang menyimpan property dan value css yang dapat digunakan secara berulang. Namun terdapat perbedaannya dalam penggunaannya, perhatikan kode berikut: // Membuat parent yang berisikan property dan value CSS %button { padding: 2px 10px 2px 10px; border-radius: 3px; text-align: center; font-weight: bold; border: 1px solid black; } // Digunakan dalam variant button .button-danger { @extend %button; background-color: red; } .button-success { @extend %button; background-color: green; } Perbedaan antara mixin dan sifat pewarisan yaitu, apabila menggunakan mixin maka kita perlu membuat sebuah parameter di dalamnya agar menjadikan elemen tersebut dinamis. Sedangkan untuk pewarisan sifat hanya menurunkan property dan value dari block styling tersebut terhadap elemen lainnya tanpa dapat menyisipkan parameter di dalamnya. 6. Operator Apabila ingin menggunakan operator seperti +, -, , math.div(), dan %, maka kita perlu menyisipkan kode seperti di bawah ini: SCSS **@use "sass:math";** .container { display: flex; } article[role="main"] { width: math.div(600px, 960px) * 100%; } aside[role="complementary"] { width: math.div(300px, 960px) * 100%; margin-left: auto; } SCSS .container { display: flex; } article[role=main] { width: 62.5%; } aside[role=complementary] { width: 31.25%; margin-left: auto; } Terlihat pada kode SCSS di atas, kita memanggil salah satu module bawaan dari SCSS yaitu use:math, maka dengan ini bisa menerapkan fungsi matematika dalam proses styling yang akan diterapkan. Kesimpulan Mulai tertarik menggunakan preprocessor CSS ini? Tentu saja untuk dapat menggunakannya kita hanya perlu memahami dasar-dasar CSS agar bisa diterapkan pada project yang akan dibangun. Dan kamu perlu memperbanyak latihan agar lebih terbiasa dengan fitur-fitur yang disediakan oleh preprocessor ini. Apabila kamu tertarik dan ingin belajar lebih lanjut tentang web development, saya merekomendasikan untuk bergabung pada kelas gratis di BuildWithAngga, karena di dalamnya terdapat mentor-mentor berkualitas yang mendukung proses belajar hingga menjadikan kita sebagai developer yang dapat bersaing dalam dunia industri. Semoga beruntung dan sampai jumpa di kelas!

Tailwind merupakan framework css yang berbasis utility yang di desain untuk mempermudah dan mempercepat pembuatan aplikasi dengan menggunakan desain yang customizable. Karena berbasis utility maka kita harus melakukan proses slicing komponen yang akan dibentuk dengan memasukkan class nya satu persatu hingga membentuk suatu kesatuan elemen. Mungkin terdengar rumit ya? Tenang saja tidak se-rumit itu kok, bahkan hampir seluruh proyek besar industri semuanya menggunakan Tailwind sebagai base styling mereka. Mari kita bahas utility apa saja yang akan sering kita temui ketika menggunakan framework satu ini. 1. Container Container dalam Tailwind CSS merupakan sebuah pembungkus atau wrapper semua item di dalamnya, sehingga terlihat lebih rapi dan ter kelompok. Apabila kita ingin menggunakan container pada Tailwind, kita bisa menggunakan utility bernama container. Berikut implementasinya: <div class="container"> <div>1</div> <div>2</div> <div>3</div> </div> Dan apabila kamu ingin membuat sebuah container berada persis dalam tengah halaman, kita bisa menambahkan salah satu utility lagi yaitu mx-auto. Maka implementasinya: <div class="container mx-auto flex"> <div class="w-1/2 h-52 bg-red-100">Left Side</div> <div class="w-1/2 h-52 bg-orange-100">Right Side</div> </div> Didapatkan hasil: Untuk lebih jelasnya silakan kamu baca dokumentasinya di sini: Tailwind CSS - Container 2. Padding Padding merupakan ruang antar content dan border pada suatu elemen. Ketika menggunakan Tailwind kita dapat dengan mudah menerapkan padding dengan memanggil utility nya yaitu p-[value]. Berikut implementasinya: <button class="p-10">Some Button<button> Semakin besar nilai yang kita berikan maka semakin luas pula padding yang dihasilkan. Untuk nilai yang bisa kita gunakan ke dalam padding tersebut bisa kamu cek di sini: Tailwind CSS - Padding 3. Margin Berbeda dengan padding yang merupakan ruang antara content dan border, margin adalah kebalikannya. Margin merupakan jarak antara satu elemen terhadap elemen HTML lainnya. Ketika kita menggunakan Tailwind, kita dapat menerapkan jarak antar elemen dengan memanggil utility yaitu m-[value]. Berikut implementasinya: <div class="m-10">Some Content</div> Nilai yang bisa kita berikan kepada margin hampir sama seperti padding; semakin besar nilai yang kita berikan, maka semakin lebar pula jarak antar elemen tersebut. Untuk lebih jelasnya silakan kamu cek dokumentasi berikut: Tailwind CSS - Margin 4. Grid Grid merupakan salah satu property pada CSS yang bertujuan untuk mempermudah melakukan proses layouting. Tailwind memiliki utility bernama grid untuk memberikan sifat grid terhadap elemen yang ingin kita terapkan. Berikut implementasinya: <div class="grid"> <div class="w-52 h-52 bg-red-100 mb-3">Kotak 1</div> <div class="w-52 h-52 bg-violet-100">Kotak 2</div> </div> Perlu diingat apabila kamu ingin menggunakan grid untuk proses layout nya, maka kamu juga harus paham seperti bagaimana membuat kolom dan baris pada grid system. Tailwind sendiri memiliki utility untuk mengatur baris pada elemen yang menggunakan grid layout yang bernama grid-rows-[value]. <div class="grid grid-rows-2"> <div class="w-52 h-52 bg-red-100 mb-3">Kotak 1</div> <div class="w-52 h-52 bg-violet-100">Kotak 2</div> </div> Kemudian apabila kamu ingin mengatur kolom pada elemen yang menggunakan grid layout kita bisa menggunakan utility grid-cols-[value]. <div class="grid grid-rows-2 grid-cols-2"> <div class="w-52 h-52 bg-red-100 mb-3">Kotak 1</div> <div class="w-52 h-52 bg-violet-100">Kotak 2</div> </div> Dan untuk mengatur jarak antar items di dalam container, kita bisa menggunakan utility bernama gap. Hingga di dapatkan hasil akhir seperti ini: <div class="grid grid-rows-2 grid-cols-2 gap-5"> <div class="w-52 h-52 bg-red-100 mb-3">Kotak 1</div> <div class="w-52 h-52 bg-violet-100">Kotak 2</div> </div> Untuk lebih jelasnya mari kita lihat dokumentasi resmi nya di sini: Tailwind CSS - Grid Columns. , Tailwind CSS - Grid Rows. dan Tailwind CSS - Gap. 5. Flexbox Sama seperti grid, Flex atau Flexbox merupakan salah satu property CSS yang bertujuan untuk mempermudah proses layouting. Kita bisa menerapkan sifat flex terhadap elemen yang ingin kita terapkan dengan menggunakan utility flex. <div class="flex"> <div class="w-52 h-52 bg-red-100 mb-3">Kotak 1</div> <div class="w-52 h-52 bg-violet-100">Kotak 2</div> </div> Kita juga bisa terapkan gap pada flex container. Maka didapatkan hasil seperti ini: <div class="flex gap-5"> <div class="w-52 h-52 bg-red-100 mb-3">Kotak 1</div> <div class="w-52 h-52 bg-violet-100">Kotak 2</div> </div> Maka kita sudah berhasil menerapkan sifat flex pada elemen div di atas. 6. Justify Content Justify Content merupakan property pada CSS yang berfungsi untuk mengatur tata letak item di dalam container flex atau grid secara horizontal. Kita bisa mengatur posisi item tersebut menggunakan utility Tailwind yang bernama justify-[value]. <div class="flex justify-center/evenly/between/end/start"> <div class="w-52 h-52 bg-red-100 mb-3">Kotak 1</div> <div class="w-52 h-52 bg-violet-100">Kotak 2</div> </div> Untuk tahu detil nilai apa saja yang bisa kita terapkan, silakan kamu lihat dokumentasi: Tailwind CSS - Justify Content 7. Align Items Berbeda dengan Justify Content yang mengatur item secara horizontal, Align Items mengatur item secara vertikal baik itu di dalam container flex atau pun grid. Kita bisa menggunakan align items pada Tailwind dengan cara sebagai berikut: <div class="flex items-start/end/center/baseline/stretch"> <div class="w-52 h-52 bg-red-100 mb-3">Kotak 1</div> <div class="w-52 h-52 bg-violet-100">Kotak 2</div> </div> Untuk lebih jelasnya silakan kamu lihat dokumentasi di sini: Tailwind CSS - Align Items 8. Border Radius Border radius merupakan property CSS yang mengatur sudut lengkung pada suatu elemen. Tailwind menyediakan utility bernama rounded agar kita bisa mengatur seberapa besar lengkungan sudut yang akan diberikan pada elemen tersebut. Contoh implementasinya sebagai berikut: <button class="py-2 px-10 rounded-lg border border-2 border-green-400 bg-green-100 text-green-700 shadow-md">Success</button> 9. Color Berterimakasihlah kita kepada developer Tailwind CSS, karena mereka sudah menyediakan banyak color palette yang bisa kita gunakan secara gratis dan mudah digunakan. Lalu bagaimana cara menggunakan color palette tersebut terhadap elemen kita? Berikut implementasi penggunaannya: Background Color Apabila kita ingin memberikan warna terhadap background, maka kita bisa mengimplementasikan seperti ini: <div class="py-2 px-6 rounded-md bg-purple-100">Some Case</div> Text Color Apabila ingin memberikan warna terhadap text maka: <div class="py-2 px-6 rounded-md bg-purple-100 text-purple-600">Some Case</div> Border Color Kemudian apabila kita ingin memberikan warna pada border, kita bisa melakukannya seperti ini: <div class="py-2 px-6 rounded-md bg-purple-100 text-purple-600 border border-purple-600">Some Case</div> Maka di dapatkan hasil seperti ini: 10. Responsive Utility Last but not least, responsive utility bertanggung jawab untuk menjadikan elemen yang kita miliki mempunyai sifat responsive, yaitu dapat diposisikan nya elemen sesuai dengan lebar layar device yang digunakan. Hal ini juga sangat penting karena pada saat kita menggunakan Tailwind CSS secara tidak langsung kita harus mengikuti prinsip mobile-first design, yaitu di mana kita harus melakukan proses slicing design untuk ukuran mobile terlebih dahulu kemudian ukuran tablet dan seterusnya. Berikut responsive utility yang disediakan: Breakpoints PrefixMinimum WidthCSSsm640px@media (min-width: 640px) { ... }md768px@media (min-width: 768px) { ... }lg1024px@media (min-width: 1024px) { ... }xl1280px@media (min-width: 1280px) { ... }2xl1536px@media (min-width: 1536px) { ... } Sekarang perhatikan kode di bawah ini: <div class="bg-red-100 p-3 rounded-xl sm:bg-purple-100 md:bg-orange-100 lg:bg-violet-100"> <div class="text-center"> <h1 class="block sm:hidden font-bold">Teks ini muncul hanya pada ukuran mobile</h1> <h1 class="hidden sm:block md:hidden font-bold">Teks ini muncul hanya pada ukuran tablet</h1> <h1 class="hidden md:block lg:hidden font-bold">Teks ini muncul hanya pada ukuran laptop</h1> <h1 class="hidden lg:block font-bold">Teks ini muncul hanya pada ukuran desktop</h1> </div> <div class="py-4 px-10 border rounded-md flex justify-evenly items-start gap-x-4 bg-gray-50 shadow-md"> <img src="<https://api.dicebear.com/7.x/adventurer-neutral/svg?seed=Cookie>" alt="avatar" class="w-10 rounded-full mb-3" /> <div class=""> <h1 class="font-bold">John Doe</h1> <p class="text-gray-500 font-mono">Front End Developer</p> </div> </div> </div> Mari kita analisis: Pada layar mobile elemen tersebut memiliki background berwarna merah dan text yang muncul yaitu ukuran mobile.Kemudian saat layar memiliki lebar minimal sebesar 640px maka background berganti berwarna purple dan text yang muncul yaitu ukuran tablet.Saat layar memiliki lebar minimal 768px maka background berganti berwarna orange dan text yang muncul yaitu ukuran laptop.Lalu demikian juga saat layar memiliki minimal lebar 1024px maka background berganti berwarna violet dan text yang muncul yaitu ukuran desktop. Kesimpulan Well, setelah mengetahui utility-utility apa saja yang akan sering digunakan ketika menggunakan Tailwind CSS, maka dapat kita ambil kesimpulan: Tailwind merupakan framework CSS yang menyediakan utility-utility yang berguna untuk memproses styling pada elemen HTML dengan mudah dan easy to customize.Untuk membuat sebuah wrapper dan membuatnya rata kanan kiri, kamu bisa menggunakan container sebagai pembungkusnya.Ingin melakukan proses layouting? Kamu bisa menggunakan utility flex atau grid untuk mencapai hal tersebut.Bingung dengan responsive design? Tenang Tailwind menyediakan responsive utility yang dapat kita gunakan untuk menyesuaikan posisi elemen HTML kita sesuai dengan lebar layar yang digunakan. Tentunya dengan mempelajari Tailwind CSS kamu akan mendapatkan flexibility dan kemudahan melakukan customization dalam proyek yang akan dibangun. Dan apabila kamu ingin mempelajari lebih lanjut Tailwind CSS, kamu bisa mengunjungi kelas gratis yang disediakan BuldWithAngga. Sekian artikel kali ini dan sampai jumpa dalam artikel selanjutnya.

Dalam dunia desain UI/UX yang terus berkembang ini, kreativitas dan efisiensi menjadi kunci utama bagi para desainer lhoo! Salah satu tool yang muncul sebagai cheatsheet bagi para UI/UX designer adalah ChatGPT, sebuah model bahasa buatan OpenAI yang membawa perubahan dalam cara kita berinteraksi dengan teknologi. Kali ini, kita akan membahas bagaimana penggunaan ChatGPT dapat meningkatkan produktivitas dan kreativitas para desainer, serta memberikan beberapa contoh prompts yang dapat diimplementasikan. Sekarang, mari kita bahas dulu keunggulan menggunakan ChatpGPT dalam proses pembuatan UI/UX design ;) Proses Menemukan Ide atau Ideation yang Cepat: Dengan menggunakan ChatGPT, para desainer dapat dengan cepat menghasilkan ide-ide baru untuk project mereka. Contoh prompt seperti "Berikan saya ide untuk layout halaman utama aplikasi e-commerce yang inovatif" dapat membuka kerativitas gagasan-gagasan segar dan unik.Feedback Instan: Mendapatkan feedback segera merupakan bagian “krusial” dalam pembuatan desain. Dengan ChatGPT, kamu dapat meminta pendapat tentang desainmu atau bahkan memeriksa potensi masalah dalam interface dengan cepat. Misalnya, "Berikan feedback tentang navigasi pada halaman produk" dapat menghasilkan pemikiran instant dari perspektif pengguna juga 😊Penanganan Pertanyaan User: Desainer dapat menggunakan ChatGPT untuk ‘menebak” pertanyaan yang mungkin ditanyakan oleh user terkait dengan interface yang kamu desain. Contoh prompt seperti "Bagaimana cara menjelaskan fitur pencarian yang efektif kepada pengguna?" dapat membantu desainer mempersiapkan jawaban yang intuitif dan informatif.User Persona: Mengetahui audiens target adalah kunci dalam desain yang berhasil. ChatGPT dapat membantu desainer dalam merinci karakteristik dan preferensi pengguna yang potensial dengan menggunakan prompt seperti "Buatlah profil pengguna untuk aplikasi mobile untuk penggemar musik." Nah mari kita simak bagaimana ChatGPT membantu proses para UI/UX designer! Membuat UserFlow Mengandalkan ChatGPT untuk membuat userflow UI/UX dengan cepat. Desainer dapat membayangkan ide-ide seketika, menguji konsep dengan mendapatkan feedback instan, dan merancang userflow yang responsif terhadap berbagai skenario user. Dengan kemampuan generatif ChatGPT, proses perancangan userflow menjadi lebih efisien dan kreatif. Checklist untuk UI Design Menggunakan ChatGPT saat membuat checklist UI elements, kamu akan merasakan keuntungan signifikan dalam efisiensi dan kecepatan dalam proses perancangan. Dengan ChatGPT dan pertanyaan atau instruksi yang tepat, desainer dapat dengan cepat mendapatkan panduan yang relevan dan menyeluruh untuk melengkapi checklist. Menentukan Warna yang Tepat Saat kamu menggunakan ChatGPT untuk meminta saran warna dalam desain, cara ini merupakan jalur yang cepat dan inspiratif. Dengan menggunakan ChatGPT dengan pertanyaan seperti "Sarankan kombinasi warna yang cocok untuk UI Travel app," kamu sebagai desainer akan mendapatkan rekomendasi secara instan. Design System Dengan memanfaatkan ChatGPT, desainer dapat meminta panduan dan rekomendasi terkait berbagai elemen desain dalam aplikasi travel tersebut lhoo. Berikut adalah deskripsi singkat penggunaan ChatGPT dalam pembuatan design system: Ideation yang Cepat ChatGPT memungkinkan desainer untuk dengan cepat menemukan ide-ide baru terkait warna, tipografi, ikon, dan elemen desain lainnya untuk aplikasi travel-mu. Pertanyaan seperti "Sarankan tema warna yang sesuai untuk aplikasi travel" dapat memberikan inspirasi untuk warna yang akan digunakan loh!Design yang Konsisten Dengan ChatGPT, kamu dapat meminta panduan tentang pemilihan warna, gaya tipografi, dan layout yang konsisten di seluruh aplikasi.Penggunaan Design Tokens Lalu ChatGPT dapat membantu dalam merinci Design Tokens, seperti pemilihan font, warna, dan ukuran, untuk setiap elemen desain. Hal ini memudahkan dokumentasi dan implementasi konsisten di seluruh aplikasi. Membuat User Persona ChatGPT memberikan kemampuan untuk merinci faktor-faktor seperti usia, pekerjaan, minat, dan tantangan pengguna potensial. Dengan memanfaatkan ChatGPT, kamu dapat memperoleh wawasan yang mendalam, mempercepat proses pengembangan User Persona, dan mendapatkan perspektif yang beragam! Pertanyaan-pertanyaan UX Interview Memakai ChatGPT dengan prompt seperti "Bantu saya merancang pertanyaan UX interview untuk sebuah aplikasi travel," desainer dapat menerima pertanyaan yang fokus pada pengalaman pengguna dan kebutuhan pengguna potensial. Keuntungannya antara lain seperti menghemat waktu dalam proses perencanaan wawancara, variasi pertanyaan yang lebih kreatif, dan kemampuan untuk menangkap berbagai aspek pengalaman pengguna. Dengan menggunakan ChatGPT, kamu dapat mendapatkan pandangan yang lebih luas dan mendalam terkait aspek UX dari aplikasi travel 😊 Kesimpulan Dengan memanfaatkan ChatGPT, UI/UX designer dapat meningkatkan inovasi dan produktivitas mereka! Keunggulan dalam ideation yang cepat, feedback instan, penanganan pertanyaan user, dan pembuatan user persona membuat ChatGPT menjadi alat yang tak tergantikan dan dapat diandalkan dalam membantu desainer menuju interface yang lebih baik dan lebih memuaskan secara user experience! Tertarik menjadi UI/UX designer profesional? Kamu bisa mengikuti kelas-kelas gratis UI/UX di BuildWithAngga lho! Tunggu apalagi? Yuk kita asah design skill bersama ;)

Sebagai seorang Product Designers, Product Manager, maupun UI/UX Designer. Kekuatan UX sangatlah berdampak pada pertumbuhan bisnis dan users pada produk yang sedang kita kembangkan, tentunya kita tidak dapat mengetahui dampak dari UX yang sedang kita kerjakan tanpa adanya UX metriks. UX metriks sendiri merupakan sebuah metode pengukuran untuk menilai interaksi di antara users dan produk. UX metriks memiliki banyak metode pengukuran dalam bentuk kuantitatif yang bisa kamu pakai sesuai dengan kebutuhan dan kondisi produk kamu. Dengan data-data tersebut, kamu bisa mengambil keputusan berdasarkan fakta dan bukan berdasarkan opini. Pada artikel ini, saya akan menjelaskan beberapa UX Metriks yang perlu kamu kuasai untuk meningkatkan produk yang kamu kerjakan berdampak secara efektif & efisien. System Usability Scale (SUS) System Usability Scale merupakan metode pengukuran kuantitatif dengan memberikan beberapa pertanyaan survey, lalu pertanyaan tersebut berisikan 5 opsi jawaban untuk responden menjawab; dari “Sangat setuju” ke “Sangat tidak setuju”. Berikut beberapa steps sederhana untuk kamu memulai SUS: Membuat pertanyaan kuisioner minimal 10 pertanyaan di Google Form ataupun Form lainnya.Distribusikan survey tersebut kepada users yang memakai produk kamu (minimal 10 users yang diluar tim) untuk mendapatkan jawaban yang objektif.Kalkukasikan hasil dari survey tersebut dengan cara mencari rata-rata dari 10 pertanyaan tersebut. Jika hasil dari rata-rata mendapatkan angka diatas 68, maka kamu berhasil membuat produk yang aksesibel terhadap users. Time on Task Metriks ini mengukur seberapa lama users mengerjakan suatu task di dalam produk kita. Mengukur waktu ini sangatlah penting untuk kita mengetahui apakah seberapa efisien users dalam mengerjakan flow yang kita buat, terlalu lama users mengerjakan sebuah task, maka akan berdampak pada users frustation dan probabilitas mereka meninggalkan produk kita akan semakin besar. Untuk melakukan Time on Task, kamu dapat menggunakan tools analytics seperti Google Analytics, maupun Maze. Jika kita telah mengetahui waktu saat users mengerjakan sesuatu dan ada harapan untuk mempersingkat waktu tersebut, maka bisnis di dalam produk kita akan berjalan lebih baik lagi, dan memberikan kepuasan terhadap users itu sendiri. Namun perlu diingat, singkat atau lamanya waktu sangat bergantung pada Task yang kita berikan, tidak ada waktu yang ideal di dalam mengerjakan task itu sendiri. Completion Rates Hampir mirip dengan Time on Task, namun metode pengukuran ini mengukur users dengan hasil yang binary seperti “berhasil” atau “tidak berhasil. Pengukuran ini biasanya diperlukan dalam aksi yang memiliki beberapa tahap, seperti checkout barang, create account, menambah credit card, dan masih banyak lagi. Untuk melakukan UX metriks seperti completion rates, kamu dapat menggunakan tools analytics seperti Google Analytics, atau kamu juga dapat menggunakan Maze. Hasil dari pengukuran ini biasanya digunakan untuk mengetahui beberapa bottleneck dari produk yang kita kembangkan, seperti mengetahui dimana users meninggalkan produk kita, bahkan system errors sendiri. Net Promotion Scores (NPS) Net Promotion Scores merupakan metriks yang mengukur loyalitas users untuk produk kita. Berdasarkan data, NPS Ratings yang buruk biasanya banyak ditemukan dalam kasus yang berhubungan dengan UX yang buruk dan banyak bugs. Oleh karena itu, penting untuk mengetahui NPS dengan cara bertanya kepada users dalam beberapa pertanyaan simple seperti: “Pada skala 0 hingga 10, seberapa mungkin Anda merekomendasikan produk kami kepada teman atau rekan kerja?”“Pada skala 0 hingga 10, seberapa puas Anda dengan pengalaman menggunakan produk kami?”“Apa yang membuat Anda memberikan skor tersebut?” Feature Usage Rate Untuk mengetahui fitur yang sangat dibutuhkan oleh users, kamu dapat menggunakan UX metriks Feature Usage Rate. Feature Usage Rate merupakan metode pengukuran kualitatif yang dimana memberikan insights berupaka user behavior untuk kamu mengetahui lebih dalam fitur produk yang paling dibutuhkan oleh users. UX Metriks ini sangat berguna untuk kamu dalam akuisisi users, dimana kamu dapat dibantu untuk menemukan customers baru dengan fitur yang relevan dengan kebutuhan mereka. Kesimpulan Well, berikut adalah beberapa UX Metriks sederhana yang wajib kamu kuasai agar dapat meningkatkan produk yang sedang kamu kembangkan lebih memberikan services yang efektif & efisien lagi. Memutuskan UX Metriks yang tepat dapat memberikan kamu fokus kepada hal yang penting, memberikan objektif yang jelas untuk dicapai dan mengarahkan keputusan kepada yang lebih efektif: System Usability Scale (SOS) metode pengukuran survey aksesibilitas terhadap produk kamu.Time on Task mengukur durasi users dalam mengerjakan task yang diberikan di dalam produk.Completion Rates mengetahui apakah users dalam menyelesaikan task yang kita berikan di dalam produk.Net Promotion Scores (NPS) mengukur loyalitas users dalam mempromosikan produk.Feature Usage Rate mengetahui fitur dari sebuah produk yang sangat dibutuhkan oleh users. Bagi kamu yang yang ingin mempelajari UI/UX Design dengan lebih baik lagi, kamu dapat mempelajari beberapa kelas yang tersedia di website BuildWithAngga.com dalam mempersiapkan karir high-demand skill dan dapat survive dengan kompetitor lainnya. Sampai jumpa di artikel & tips selanjutnya. Goodluck!

Dengan dunia yang serba cepat seperti ini, seorang freelancers sangatlah membutuhkan produktivitas & efisiensi yang tinggi untuk terus kompetitif dan memberikan output terbaik bagi client. Dengan produktivitas yang tinggi, seorang freelancer tentunya akan mendapatkan banyak benefit seperti kepuasaan client yang tinggi, on-time delivery, dan masih banyak lagi. Dengan tuntuntan tersebut, kamu sebagai client tentunya sangat membutuhkan platform yang dapat dengan baik menjalankan perintah repetitif ataupun kebutuhan kreatifitas saat sedang creative block. AI bisa jadi salah satu tool untuk kamu terus dapat berkembang secara efisien, dan tentunya tingkat produktivitas yang tinggi. Berikut ini saya merangkum 5 AI tools canggih untuk kamu sebagai freelancers: ChatGPT Tentunya AI Tools yang satu ini akan selalu dapat diandalkan. ChatGPT merupakan AI dari OpenAI untuk memproses bahasa alami manusia melalui algoritma machine learning. AI Tools satu ini merupakan AI yang sangat fleksibel dan dapat diandalkan untuk kasus apa saja. Semua freelancers dapat menggunakan tools seperti: Membuat email atau respon dari clientBrainstorming IdeaMembuat kontenDan masih banyak lagi! Kamu cukup dengan memberikan sebuah prompt sesuai dengan apa yang kamu butuhkan, ChatGPT akan berusaha membantu apapun itu. ChatGPT untuk saat ini tersedia versi gratis secara unlimited. Namun, apabila kamu ingin membuat AI menerima input seperti image atau video, kamu harus upgrade versi ChatGPT kamu, ya! RescueTime Sebagai freelancers, kamu pasti mempunyai banyak tasks untuk dikerjakan, RescueTime dapat menjadi tools andalan untuk membantu kamu meningkatkan produktivitas dengan memberikan kamu value dan insights agar kamu dapat optimasi workflow lebih efektif lagi. Berikut beberapa kelebihan fitur RescueTime yang dapat kamu gunakan: Automatic Time-TrackingDistraction BlockingData Analysis Dengan begitu, RescueTime akan memberikan kamu beberapa statistik untuk kamu pelajari apa saja yang menjadi distraksi kamu. Setelah itu, kamu dapat mengetahui dan menghindari pekerjaan yang dapat mengganggu kamu. Grammarly Dunia freelancers tentunya tidak jauh dari dunia komunikasi, baik itu komunikasi dengan client ataupun kolega. Dengan itu, Grammarly sangat cocok untuk membantu kamu dalam hal komunikasi agar yang disampaikan jelas dan tidak bertele-tele. Grammarly juga tidak hanya dapat membantu kamu dalam hal komunikasi, namun dapat memberikan ide dan mempersingkat proses kamu dalam membuat artikel atau email. Berikut beberapa fitur unggulan Grammarly: Kustomisasi bahasaSecara real-time memberikan improvement terhadap tulisan kamuNotifikasi untuk improvementPenjelasan real-time dari yang kamu baca Grammarly gratis untuk kamu coba dan gunakan untuk keseharian kamu menulis baik itu email secara profesional maupun membuat proposal. Namun, apabila kamu ingin mendapatkan lebih banyak fitur, saya sarankan untuk meng-upgrade plan kamu, ya! ClickUp ClickUp merupakan all-in-one AI Tools untuk membantu kamu dalam keseharian menjadi freelancer. Tools seperti membantu kamu komunikasi, membuat konten, hingga summarize brief dari client. Berikut beberapa fitur terbaik yang ClickUp sediakan untuk kamu: AI tools yang dapat digunakan dari berbagai profesi seperti marketing, sales, product design, engineering, writer, dan masih banyak lagi.Membantu menulis untuk artikel, email, dan lainnya hanya dalam beberapa klik.Membantu summarize berbagai dokumen seperti brief dari client. Dengan begitu, untuk kamu yang memiliki lebih dari 1 pekerjaan. ClickUp mungkin sangat cocok untuk kamu, cukup dengan beberapa klik dan adjustment, kamu dapat memberikan output yang terbaik untuk meningkatkan produktivitas kamu. Durable Freelancers tidak hanya dituntut baik untuk melakukan pekerjaan. Namun, freelancers juga harus baik dalam melakukan personal branding agar kamu dapat meningkatkan client lebih banyak lagi. Durable sangat cocok untuk membantu kamu membuat website secara simple dan tidak membutuhkan waktu yang banyak. Beberapa fitur terbaik dari Durable: Menyediakan banyak library untuk dipakaiMembuat Website secara simple dan cepatKustomisasi font dan warna yang luas Dengan kamu mempunyai website pribadi, Client dapat sangat mudah menemukan kamu dan melihat pekerjaan kamu. Kesimpulan Well, berikut adalah beberapa AI Tools untuk membantu kamu meningkatkan produktivitas dan efisiensi waktu sebagai freelancers. Kamu dapat menggunakan tools tersebut secara gratis, namun tentunya ada beberapa limitasi. Kalau kamu ingin mempelajari bagaimana cara menjadi freelancers dan mendapatkan banyak client. Kamu dapat berkunjung ke website BuildWithAngga.com dalam mempersiapkan karir menjadi freelancers dan dapat survive dengan kompetitor lainnya. Sampai jumpa di artikel & tips selanjutnya. Good Luck!

Hi everyone, kamu pernah gak sih mau bikin desain user interface tapi bingung mulai dari mana? Yuk sini, baca penjelasan berikut! Pada kesempatan kali ini aku akan berbagi langkah mudah untuk kamu membuat desain tampilan halaman Home dari langkah yang paling awal! Langkah 1 : Mencari Referensi dan Menentukan Konten Sebelum kamu membuat desain suatu tampilan, kamu harus menentukan konten tampilan desain akan seperti apa. Aplikasi atau website apa yang akan kamu buat. Pada tahap ini kamu bisa terlebih dahulu mencari referensi dari desain. Karena tahap ini akan memberikan kamu lebih banyak ide tentang tampilan yang akan kamu buat. Kamu bisa mencari referensi melalui Pinterest.com, Dribbble.com, Behance.net dan Shaynakit.com. Langkah 2: Menentukan Warna dan Gaya Desain Setelah menentukan tema dan referensi yang cocok, kamu bisa mulai menentukan pilihan warna yang akan digunakan untuk desain kamu. Pilihan warna yang bisa kamu tentukan adalah warna primary, secondary dan warna neutral. Warna-warna ini akan digunakan pada aset desainmu seperti button, icon, navigation bar dan lain-lain. Dengan menentukan warna yang akan digunakan, desainmu akan menjadi lebih konsisten dan rapi. Langkah 3: Memilih Ukuran Frame yang Akan Digunakan Membuat Frame pada figma bisa dilakukan dengan menekan huruf F pada keyboard, lalu akan muncul pilihan ukuran Frame. Saat ini mengikuti ukuran yang biasa digunakan adalah Iphone 14 Pro dengan ukuran 393 x 852px. Langkah 4: Membuat Header Langkah selanjutnya adalah memasukan konten header yang telah ditentukan. Untuk contoh kali ini aku memasukan konten berupa foto profil, notif dan detail nama serta kalimat ucapan seperti “Good Morning”. Membuat profile dapat dilakukan dengan menggunakan objek ellips dengan menekan huruf O pada keyboard. Lalu pada pengaturan Fill diubah menjadi image dan kamu dapat memilih gambar yang diinginkan. Selanjutnya kamu dapat membuat text dengan menekan huruf T dan dilanjut dengan menuliskan kalimat “good morning” dengan menggunakan ukuran 12pt dan “Marilyn Dokidis” dengan menggunakan ukuran 18pt. Pembuatan tombol notif di sini menggunakan icon yang ditaruh ke dalam ellips serta digabungkan menjadi group dengan select kedua object dan klik ctrl+G. Jangan lupa untuk menyesuaikan warna icon dan ellips. Icon yang aku gunakan di sini yaitu Iconly. Langkah 5: Membuat Input Field Booking Flight Pada tampilan card ini terdapat beberapa komponen yang harus dibuat untuk melengkapinya. Langkah awal dalam pembuatan ini adalah dengan membuat card terlebih dahulu. Tahap ini dapat dilakukan dengan menggunakan rectangle dengan menekan R. Buat kotak dengan ukuran 353 x 401px dan atur corner radius menjadi 24. Membuat button untuk “One-way” dan “Multi-city” dapat dilakukan dengan text yaitu T dan memasukan texttersebut ke dalam Frame (click F) dengan ukuran 156,5 x 41 pixels. Jangan lupa untuk mengatur corner radius pada Frame untuk mendapat bentuk yang diinginkan. Membuat form untuk “tujuan dan keberangkatan” dengan menggunakan text dan juga menambahkan icon. Untuk form ini digabungkan ke dalam satu Frame dan diberikan batas dengan menggunakan Line dengan menekan huruf L. Jangan lupa untuk tambahkan button dengan menggunakan icon panah yang digabungkan ke dalam ellips. Lalu ubah ukuran corner radius menjadi 12. Form untuk tanggal, kamu dapat menggunakan tahapan yang sama seperti sebelumnya hanya saja Frame yang digunakan memiliki ukuran yang berbeda. Untuk tambahan terdapat icon switch yang bisa kamu dapatkan melalui Figma Community atau dapat kamu buat sendiri dengan ellips dan rectangle. Masih dengan tahap yang sama yaitu Text dan Frame, pada form ke 4 ini yaitu penumpang dan kelas perbedaannya hanyalah ukuran panjang. Selanjutnya kamu dapat membuat “Search Flight” CTA button dengan cara yang sama yaitu menggabungkan text dan icon ke dalam Frame. Selanjutnya atur ukuran tinggi dan panjang dari button tersebut. Langkah 6: Membuat Special Price Pada bagian ini akan dibagi menjadi dua yaitu “Judul” dan bagian "Card". Pada judul menggunakan ukuran font 18pt untuk title dan 12pt untuk subtitle. Selanjutnya untuk button “See more” bisa menggunakan ukuran 12pt yang selanjutnya akan dimasukan ke dalam Frame dengan ukuran 79 x 36px. Untuk card “Promo”, pertama kamu dapat membuat Frame dengan ukuran 287 x 118px terlebih dahulu dan mengatur corner radius menjadi 12px. Langkah selanjutnya menyiapkan icon destination pesawat. Dengan menggunakan dua objek yaitu ellips dan line dash. Bentuk pesawat bisa kita ambil dari icon. Lalu kita dapat membuat text data-data yang dibutuhkan untuk dimasukan ke dalam info card tersebut sepeperti tanggal, tujuan, durasi dan jam penerbangan. Dengan menggunakan ukuran huruf seperti di atas. Langkah selanjutnya adalah menambahkan tampilan promo pada card yaitu dengan icon promo ukuran 32 x 32px dan Frame ukuran 66 x 118px dan corner radius 12 x 12px. Setelah selesai kamu bisa menggabungkan kedua card dengan cara group yaitu klik kanan dan pilih group selection. Langkah 7: Membuat Background Untuk Header Kamu dapat membuat background untuk bagian header agar lebih menarik dengan tahap-tahap berikut ini: Membuat background kali ini menggunakan Frame dengan menekan huruf F. Gunakan ukuran 393 x 291px dan atur corner radius 40px untuk dua sudut saja. Oiya, jangan lupa untuk ceklist clip content. Setelah itu ubah Fill menjadi Linear dengan kode warna #3079D9 dan #1E73E4. Lalu kamu bisa mencari tampilan “Map” pada figma community. Kali ini aku menggunakan melalui link berikut World Map SVG Illustration . Langkah terakhir adalah memasukan map tersebut ke dalam Frame background yang telah dibuat dan ubah opacity map menjadi 40%. Selesai tahap ini kamu bisa langsung taruh background tersebut pada bagian header. Langkah terakhir gabungkan background dengan header, taruh background pada posisi di belakang header yang telah kita buat dengan click kanan dan send to back. Langkah 8: Bottom Navigation Bar Untuk melengkapi tampilan dan fitur pada aplikasi maka akan ditambahkan navigation bar. alasan penggunaan text pada navigation bar adalah untuk mempermudah pengguna mengetahui fungsi bottom tersebut. Tahap pembuatan bottom navigation bar yaitu dengan menggunakan Frame 393 x 107px. Setelahnya, buat fitur yang akan dimasukan ke dalam  navigation bar dengan menggunakan teks dan juga icon seperti contoh di atas. Navigation bar telah selesai dan siap digabung bersama aset lainnya. Langkah 9: Colors Jika keseluruhan desain telah selesai, kamu bisa mulai memeriksa penggunaan warna yang digunakan dan menyesuaikannya. Tentukan Primary Color dan Secondary Color yang akan digunakan. Pada UI design kali ini, aku menggunakan #3079D9 sebagai primary color dan #FFD88F untuk secondary color. Yeay sekarang kamu sudah berhasil membuat tampilan UI homepage untuk aplikasi travel! Semoga langkah pembuatan desain UI untuk Home ini dapat dimengerti yaa dan menambah semangat ya belajar UI. Oiya, kamu juga bisa loh belajar lebih dalam lagi mengenai UI melalui website BuildWithAngga ;)

Typescript merupakan superset dari Javascript. Apa yang dilakukan oleh Javascript tentu bisa dilakukan Typescript, namun sebaliknya apa yang dilakukan Typescript belum tentu bisa dilakukan Javascript. Terdapat fitur-fitur dasar yang akan sering kita gunakan ketika menggunakan Typescript, pada artikel kali ini kita membahas dasar dan bagaimana menuliskan sintaks Typescript dan implementasi contoh sederhananya. 1. Tipe Data Seperti penjelasan di awal, Typescript merupakan superset dari Javascript yang dimana semua yang dilakukan oleh Javascript tentu saja bisa dilakukan Typescript. Berikut ini tipe data yang akan sering digunakan ketika menggunakan Typescript: Tipe DataContohstringIni bertipe data stringnumber1,2,3,4booleantrue/false 2. Variabel Terdapat fitur ekstra yang bisa kita tetapkan ketika ingin membuat sebuah variabel pada Typescript, yaitu kita bisa menetapkan tipe data apa yang akan ditampung pada variabel tersebut. Sebagai contoh: let username:string = 'John Doe' username = 30 console.log(username) // Output: Type 'number' is not assignable to type 'string'. Hal merupakan sebuah benefit ketika menggunakan Typescript, karena menjadikan program kita akan lebih konsisten dan meminimalisir terjadinya error akibat perubahan variabel yang tidak inginkan. 3. Type and Interface Type pada Typescript dapat kita manfaatkan untuk mendefinisikan tipe data yang akan digunakan. type UserType = { name: string age: number } const userObject:UserType = { name:'John Doe', age:10 } Pada kode di atas, UserType didefinisikan sebagai sebuah type yang memiliki dua property: name dengan tipe string dan age dengan tipe number. Kemudian, kita membuat object userObject dibuat berdasarkan tipe UserType yang telah didefinisikan sebelumnya. Lalu terdapat interface, yaitu aturan yang berbentuk object untuk mendefinisikan tipe data yang akan digunakan. Contoh penggunaan: interface UserInterface{ name: string age: number } const someUserObject:UserInterface = { name:'Doe', age:10 } Terlihat pada kedua contoh di atas, baik Type ataupun Interface sama-sama diwajibkan untuk mengisi property yang kita definisikan. Apabila kamu ingin membuat property tersebut bersifat opsional, maka kamu bisa mendapatkannya dengan cara menambahkan Opsional Mark (?) pada property tersebut. interface UserInterface{ name: string age: number address?:string // Property yang bersifat opsional, maka Typescript menghiraukan apabila tidak terdapat nilai ini. } const someUserObject:UserInterface = { name:'Doe', age:10 } 4. Intersection and Union Type Intersection (&) pada Typescript memungkinkan kita untuk menggabungkan beberapa tipe data menjadi satu. // Definisikan Type type UserType={ name:string username:string } type BioType= { age:number } // Gunakan Type pada object const user:BioType & UserType={ name:'John Doe', username:'johndoe', age:30 } Pertama, kita definisikan UserType dengan property name dan username sebagai string.Lalu, kita definisikan juga BioType dengan property age sebagai number.Kemudian kita melakukan penggabungan antara UserType dan BioType dengan intersection (&) untuk membuat tipe data baru pada variabel user, dan hal ini membuat objek user wajib memiliki semua property dari kedua tipe data tersebut. Berbeda dengan Intersection Type yang dimana kita harus mengisi semua nilai pada tipe data tersebut, Union Type (|) digunakan untuk menyatakan bahwa sebuah nilai dapat memiliki salah satu dari beberapa tipe data yang didefinisikan. // Definisikan Type type UserType={ name:string username:string } type BioType= { age:number } // Gunakan Type pada object const user:BioType | UserType={ name:'John Doe', username:'johndoe', } Kode di atas valid, dikarenakan kita menggunakan Union Type yang dimana pada variabel tersebut dapat memiliki salah hanya satu nilai saja yang dari kita definisikan. 5. Array and Object Pada Typescript, kita bisa mendefinisikan tipe data array menggunakan sintaks khusus. Ada beberapa cara untuk melakukannya: Notasi Type: Menggunakan tanda kurung siku [] untuk mendefinisikan tipe array dari suatu tipe data tertentu. // array string let fruits: string[] = ['Jeruk', 'Pisang', 'Pepaya']; // array number let age: number[] = [20, 14, 33, 36,]; Generic Type: Kita juga bisa menggunakan generic Array untuk mendefinisikan tipe array dengan lebih eksplisit. // array string let fruits: Array = ['Jeruk', 'Pisang', 'Pepaya']; // array number let age: Array = [20, 14, 33, 36,]; Union: Kita juga bisa menggunakan Union Type (|) untuk mendefinisikan tipe array yang dapat menyimpan beberapa tipe data. // array string atau number let data: (string | number)[] = ['Jeruk', 30, 'Pisang', 456]; Tuple: Tuple adalah tipe khusus array yang memungkinkan kita mendefinisikan tipe data untuk setiap elemen dalam array pada posisi yang telah ditentukan. // Tuple dengan tipe data spesifik untuk setiap elemen let tuple: [string, number, boolean] = ['Jeruk', 30, true]; Sedangkan untuk mendefinisikan objek pada Typescript, ada beberapa cara yang dapat kita gunakan, yaitu: Notasi Object: Kita bisa menggunakan notasi objek langsung dengan menetapkan tipe data untuk setiap property dalam objek. let bio: { name: string; age: number } = { name: 'John Doe', age: 30 }; Interface: Menggunakan interface memungkinkan kita mendefinisikan struktur objek yang lebih kompleks dengan menentukan tipe data untuk setiap property. interface PersonInterface { name: string; age: number; } let person: PersonInterface = { name: 'John Doe', age: 30 }; Type: Kita juga bisa menggunakan type untuk digunakan pada tipe data objek, dengan cara yang serupa seperti menggunakan interface. type TypePerson = { name: string; age: number; }; let person: TypePerson = { name: 'John Doe', age: 30 }; 6. Function Terdapat perbedaan dalam membuat function ketika menggunakan Javascript dan Typescript. Apabila kita membuat function dan terdapat parameter didalamnya, kita diwajibkan untuk mendefinisikan tipe data dari parameter tersebut. function somFunction(x: number, y: number) { // rest of code } Kemudian kita juga dapat memberikan informasi tambahkan pada tipe data dari kembalian fungsi tersebut, sebagai contoh: function sum(x: number, y: number):number { return x+y } Parameter: Fungsi sum memiliki dua parameter yang memiliki tipe data number.Tipe Kembalian: Dengan adanya :number setelah parameter fungsi, ini menandakan bahwa fungsi ini akan mengembalikan nilai bertipe number.Operasi: Fungsi ini menjumlahkan nilai x dan y, lalu mengembalikan hasil penjumlahan tersebut sebagai nilai kembalian. Kesimpulan Kesimpulannya dengan Typescript, kita dapat dengan jelas mendefinisikan struktur tipe data yang diharapkan, baik untuk objek, fungsi, atau jenis data lainnya. Penggunaan type, interface, dan konsep seperti union, intersection memungkinkan kita untuk membuat kode yang lebih aman dan mudah dipahami. Apabila ingin belajar lebih banyak mengenai Typescript, Di BuildWithAngga kita punya kelas gratis dan mudah dipahami untuk keperluan belajar kalian. So tunggu apalagi? Sampai jumpa dikelas dan good luck!