Tips All

Apa dan Manfaat .ENV File Pada Projek Laravel Sebagai salah satu framework PHP yang populer, Laravel menawarkan banyak fitur dan kemudahan dalam pengembangan aplikasi web. Salah satu fitur yang sering digunakan dan penting untuk diketahui adalah file .env. Pada artikel kali ini, kita akan lebih dalam lagi mengenal tentang file .env dan bagaimana ia berperan pada aplikasi Laravel. File .env pada Laravel merupakan file konfigurasi yang berisi variabel lingkungan yang digunakan untuk mengatur aplikasi Laravel. File .env terletak di root direktori aplikasi Laravel yang akan secara otomatis ter-generate ketika kita berhasil membuat proyek Laravel pada komputer kita. Letak file .env Namun, tahukah kamu bahwa penggunaan file .env pada Laravel sangatlah penting? Pada file ini, kita dapat mengatur konfigurasi database, URL aplikasi, dan variabel lingkungan lainnya yang dibutuhkan. File .env memungkinkan kita untuk mengatur konfigurasi aplikasi tanpa perlu mengubah kode program secara langsung. Berikut ini merupakan beberapa konfigurasi penting yang dapat diatur pada file .env : Konfigurasi Database Pada file .env, kita dapat mengatur konfigurasi databaase yang digunakan oleh aplikasi Laravel kita. Mulai dari tipe database, nama database, host, username, dan password. Konfigurasi ini digunakan oleh Laravel untuk dapat terhubung dengan database yang telah ditentukan. Konfigurasi database pada file .env Konfigurasi Mail Laravel juga menyediakan fitur untuk mengirim email. Untuk menggunakan fitur ini, kita perlu mengatur konfigurasi mail pada file .env seperti driver mail, host, port, username, password, dan encryption. Konfigurasi mail pada file .env Konfigurasi Cache Selain fitur mengirim email, Laravel juga menyediakan fitur cache untuk meningkatkan kinerja aplikasi Laravel kita. Konfigurasi cache dapat kita atur pada file .env seperti tipe cache yang digunakan, waktu kedaluwarsa, dan opsi cache lainnya yang dapat diatur. Konfigurasi cache pada file .env Konfigurasi URL Pada file .env, kita juga dapat menentukan URL aplikasi kita, baik untuk pengembangan (development) maupun produksi (production). Hal ini sangatlah penting jika kita ingin menjalankan aplikasi di lingkungan yang berbeda, seperti di server staging atau production. Konfigurasi URL pada file .env Pada dasarnya, file .env merupakan bagian penting dari sebuah aplikasi Laravel yang seringkali diabaikan. Namun perlu diketahui, file ini memiliki peran yang sangat vital dalam melakukan konfigurasi aplikasi Laravel. Selain menyimpan variabel lingkungan, file .env ini juga digunakan untuk menyimpan informasi rahasia seperti kredensial API, token, atau password. Oleh karena itu, sangat penting bagi kita untuk menjaga kerahasiaan file .env dan tidak membagikannya dengan orang lain. Selain itu, pastikan untuk selalu memperbarui konfigurasi file .env sesuai dengan lingkungan aplikasi. Lakukan backup secara teratur menghindari kehilangan konfigurasi penting pada aplikasi Laravel kita. Kesimpulan File .env pada Laravel memiliki peran yang sangat penting dalam mengatur variabel lingkungan dan konfigurasi rahasia pada aplikasi Laravel. Oleh sebab itu, penting bagi kita untuk mengenal file ini dan memahami bagaimana mengelola file ini dengan baik. Dengan memaksimalkan penggunaan file .env kita dapat menghindari masalah keamanan ataupun kesalahan konfigurasi pada aplikasi Laravel kita. Untuk mempelajari Laravel lebih mendalam dan memanfaatkan file .env dengan lebih efektif, kamu bisa ikuti kelas Mastering Laravel 8 for Beginners & Intermediate: Bangun Website Bootcamp atau kelas Full-Stack Laravel React JS: Build Streaming Website Like Netflix. Kamu juga bisa belajar Laravel dari dasar dengan mencoba kelas stater kami yaitu PHP Laravel Web Development. Tunggu apalagi? ayo belajar Laravel sekarang dan tingkatkan skill programmingmu.

Pernahkah kamu mendengar istilah UI UX? UI (User Interface) dan UX (User Experience) merupakan istilah yang berkaitan dengan desain aplikasi dan website. UI umumnya akan berfokus kepada aspek visual dari antarmuka pengguna, sedangkan UX melibatkan pengalaman pengguna saat menggunakan sebuah antarmuka aplikasi. 5 Website untuk Mencari Pekerjaan UI UX Designer UI berkaitan dengan segala sesuatu yang dilihat dan dirasakan oleh pengguna seperti warna, tata letak, font, dan jenis elemen lainnya yang menyusun antarmuka. Tujuan dari UI adalah untuk memberikan pengalaman visual yang menarik dan mudah dipahami bagi pengguna. Sedangkan UX berkaitan dengan pengalaman pengguna secara keseluruhan ketika menggunakan aplikasi atau website, termasuk hal-hal seperti kemudahan penggunaan, kinerja aplikasi, keandalan, keamanan, dan kepuasan pengguna. Tujuan dari UX adalah untuk memastikan bahwa pengguna dapat menggunakan aplikasi atau website dengan mudah dan efektif. Sehingga diharapkan pengguna merasa puas secara keseluruhan. Apa itu UI UX Designer? Wireframe yang dibuat UI UX Designer Mungkin kamu berpikir bahwa profesi designer hanya bisa ditemukan di dunia fashion atau seni. Namun nyatanya untuk sebuah aplikasi yang kamu instal di perangkat seluler kamu melibatkan seorang designer didalamnya. Profesi tersebut dinamakan UI UX Designer. UI UX Designer adalah seorang yang terlibat dalam desain UI dan UX untuk produk digital seperti website, aplikasi, perangkat lunak, dan perangkat mobile. Profesi ini memiliki tanggung jawab untuk memastikan produk digital yang mereka kembangkan mudah digunakan dan menarik bagi pengguna. UI UX Designer harus memiliki pengetahuan mengenai aspek desain visual dan juga kemampuan untuk memahami kebutuhan dan preferensi pengguna. Selain itu, seseorang yang menggeluti profesi ini harus memiliki pengalaman dalam menggunakan software desain dan pengetahuan tentang prinsip-prinsip desain dan tren terbaru dalam desain UI dan UX. Berapa Gaji Seorang UI UX Designer? Profesi UI UX Designer merupakan salah satu pekerjaan yang fleksibiel karena dapat dilakukan secara remote dimana saja dan kapan saja. Ini pilihan yang tepat buat kamu yang ingin berkreasi dan mengekspresikan kreativitas namun dengan sistem kerja yang santai. Selain itu, profesi ini juga menawarkan gaji yang kompetitif. Menurut data dari situs Jobstreet, gaji rata-rata UI/UX designer di Indonesia adalah sekitar Rp 9.600.000 per bulan. Namun, gaji ini dapat bervariasi tergantung pada pengalaman, keterampilan, lokasi kerja, dan jenis industri. UI/UX designer yang bekerja di perusahaan teknologi atau startup mungkin memiliki gaji yang lebih tinggi dibandingkan dengan yang bekerja di perusahaan non-teknologi. Bagaimana Membangun Karir Sebagai UI UX Designer? UI UX Designer bekerja bersama tim Berkarir menjadi seorang UI UX Designer menjadi tantangan yang dapat kamu coba. Terlebih lagi di masa sekarang ini, segala informasi akan disajikan dengan internet melalui aplikasi dan website. Kebutuhan akan ahli atau profesional UI UX menjadi peluang yang menjanjikan jika ditekuni lebih dalam. Tahukah kamu, UI UX Designer biasanya bekerja sama dengan tim pengembang dan produk untuk merancang dan mengembangkan antarmuka pengguna yang efektif dan mudah digunakan. Jika kamu merasa tertarik berkarir dibidang ini namun bingung harus memulai dari mana, berikut penulis berikan tips untuk membangun karir sebagai UI UX Designer. Kit tools UI UX Designer Pelajari dasar-dasar desain UI dan UX, termasuk prinsip-prinsip desain dan tren terbaru dalam desain. Kamu dapat mengikuti kursus online, seminar, atau membaca buku-buku tentang desain UI dan UX.Giat berlatih untuk mengembangkan kemampuan desain kamu. Banyak tools yang dapat membantu kamu untuk membuat desain. Mulailah dengan berlatih menggunakan software seperti Adobe XD, Figma atau Sketch dan membuat prototipe terlebih dahulu.Selanjutnya kamu perlu membuat portofolio desain kamu. Portofolio dapat menjadi alat yang sangat berguna untuk mempresentasikan keahlian desain kamu kepada calon klien atau pengusaha.Bergabunglah dengan komunitas desain dan terlibatlah dalam forum online, grup diskusi, dan acara desain untuk memperluas jaringan Anda dan berbagi pengalaman dengan profesional desain lainnya.Mencari pekerjaan: Mencari pekerjaan sebagai UI UX Designer dapat dilakukan melalui job board atau website pencarian kerja. Selain itu, Anda juga dapat mencari tahu perusahaan-perusahaan yang sedang mencari UI UX Designer dan mengajukan lamaran. Rekomendasi Website untuk Mencari Pekerjaan UI UX Designer Setelah sebelumnya kamu telah mengetahui apa itu UI UX Designer dan bagaimana mempersiapkan diri untuk menekuni profesi ini, maka selanjutnya kamu akan masuk ke tahap paling penting yaitu mencari pekerjaan. Berikut penulis ingin merekomendasikan kepada kamu website untuk mencari pekerjaan bagi seorang UI UX Designer. LinkedIn Jobs Lowongan pekerjaan UI UX Designer di LinkedIn LinkedIn saat ini menjadi platform yang wajib dimiliki oleh profesional terutama kamu yang baru ingin mencari pekerjaan. Pada LinkedIn terdapat fitur jobs yang terintegrasi yang disebut dengan LinkedIn Jobs. Platform ini menyediakan berbagai lowongan pekerjaan dari berbagai perusahaan di seluruh dunia. Dengan menggunakan LinkedIn Jobs, kamu dapat mencari pekerjaan berdasarkan lokasi, kategori, tingkat pengalaman, dan kata kunci tertentu. LinkedIn Jobs memungkinkan pengguna untuk membuat profil lengkap, mengikuti perusahaan, dan terhubung dengan profesional di bidang yang sama. Selain itu, LinkedIn Jobs juga menyediakan fitur pencocokan pekerjaan yang sesuai dengan profil pengguna, mengirimkan pemberitahuan pekerjaan terbaru, dan merekomendasikan lowongan pekerjaan yang relevan dengan pengalaman dan keterampilan kamu. Glassdoor Lowongan pekerjaan UI UX Designer di Glassdoor Glassdoor adalah sebuah situs web yang memungkinkan para pengguna untuk mencari informasi tentang perusahaan, termasuk ulasan dari karyawan saat ini dan mantan karyawan, gaji, proses wawancara, serta pertanyaan wawancara yang sering ditanyakan oleh perusahaan tertentu. Situs ini juga menyediakan informasi tentang lowongan pekerjaan yang tersedia di berbagai perusahaan. Selain itu, Glassdoor juga menyediakan data gaji dan penggajian yang terperinci, sehingga para pencari kerja dapat mengetahui gaji rata-rata untuk posisi yang mereka cari dan perbandingan gaji di berbagai perusahaan. Fitur ini membantu pencari kerja untuk menentukan gaji yang realistis untuk posisi yang mereka lamar. Indeed Lowongan pekerjaan UI UX Designer di Indeed Indeed menjadi salah satu situs yang diminati banyak jobseeker karena menyediakan layanan pencarian lowongan kerja dan memungkinkan para pengguna untuk mencari lowongan kerja berdasarkan kategori yang diinginkan. Indeed mengumpulkan lowongan kerja dari berbagai sumber, termasuk situs web perusahaan, portal lowongan kerja, dan agen perekrutan. Kamu dapat mencari lowongan kerja yang sesuai dengan kriteria mereka, membuat profil Indeed, dan mengirimkan lamaran langsung ke perusahaan melalui situs web tersebut. Selain itu, Indeed juga menyediakan berbagai sumber daya untuk membantu para pencari kerja dalam mencari pekerjaan, termasuk artikel tentang strategi pencarian kerja, tips wawancara, dan tips untuk menulis resume yang efektif. Dribbble Jobs Lowongan pekerjaan UI UX Designer di Dribbble Jobs Berbeda dengan tiga website sebelumnya, Dribbble Jobs adalah sebuah platform pencarian kerja khusus untuk para desainer dan kreatif di bidang digital. Dribbble Jobs menyediakan berbagai lowongan pekerjaan untuk desainer grafis, desainer produk, desainer UX/UI, ilustrator, animator, fotografer, dan profesional kreatif lainnya. Lowongan pekerjaan ini ditawarkan oleh perusahaan-perusahaan besar, startup, dan agensi kreatif di seluruh dunia. Dribbble Jobs memungkinkan para pengguna untuk membuat profil lengkap, mengunggah portofolio kreatif mereka, dan mengikuti perusahaan yang mereka minati. Jika kamu sudah memasang portofolio di Dribbble, kamu dapat mengintegrasikannya dengan profil Dribbble Job kamu. Dengan begitu, recruiter dapat dengan mudah melihat portofolio kamu tanpa harus beralih ke platform Dribbble. Behance Lowongan pekerjaan UI UX Designer di Behance Sama halnya dengan Dribbble Jobs, Behance juga merupakan platform kreatif yang memungkinkan para desainer, seniman, dan kreatif lainnya untuk memamerkan portofolio mereka secara online. Platform ini merupakan bagian dari Adobe Creative Cloud dan menyediakan fitur untuk mengunggah dan membagikan karya kreatif, terhubung dengan profesional kreatif lainnya, dan mencari inspirasi kreatif. Behance menyediakan berbagai kategori karya kreatif, seperti desain grafis, desain produk, desain web, ilustrasi, animasi, fotografi, dan lain sebagainya. Pengguna Behance dapat mengunggah karya mereka, menambahkan deskripsi dan informasi tentang proyek, serta memperlihatkan proses pembuatan karya tersebut. Behance juga menyediakan fitur untuk membagikan karya kreatif ke jejaring sosial, seperti Facebook, Twitter, dan LinkedIn, serta menyediakan fitur untuk mengirimkan pesan langsung kepada pengguna lain. Suasana rapat tim UI UX Designer Nah itu dia penjelasan terkait UI UX Designer dan website rekomendasi dari penulis untuk kamu yang tertarik berkarir menjadi UI UX Designer. Jika kamu ingin meraih gaji yang kompetitif sebagai UI UX designer, tingkatkan keterampilan kamu, kumpulkan pengalaman kerja, tingkatkan portofolio, dan pertimbangkan lokasi kerja yang tepat. Dengan kerja keras dan kesabaran, kamu dapat meraih kesuksesan dalam karir sebagai UI UX designer. Tunggu apalagi, segera persiapkan diri kamu untuk menghadapi perkembangan teknologi yang begitu cepat terutama trend terhadap media dan produk digital. UI UX Designer mungkin bisa menjadi opsi kamu untuk menjadikan peluang karir atau sekedar untuk menyalurkan hobi. Kamu juga perlu mengasah kemampuan interpersonal karena UI UX designer sering bekerja dalam tim yang terdiri dari anggota tim yang berbeda seperti desainer visual, pengembang web, manajer produk, dan lain-lain. Dengan begitu kamu dapat berkomunikasi dan berkolaborasi dengan baik bersama anggota tim yang berbeda dan membantu kamu membangun hubungan kerja.

Tailwind CSS merupakan salah satu framework CSS populer yang membantu developer untuk membuat tampilan website yang modern serta responsive. Sama seperti framework CSS lainnya, Tailwind juga menyediakan class yang siap digunakan tanpa perlu menyentuh file CSS. Untuk bisa menggunakan Tailwind CSS tentu kita harus menginstall terlebih dahulu, terdapat dua cara yang umum digunakan, bisa dengan Content Delivery Network (CDN) atau dengan Tailwind CLI. Tanpa perlu berlama-lama lagi, kita langsung saja ke caranya. Install Tailwind CSS dengan Play CDN Sebelum membahas caranya, kita cari tau dulu apa itu CDN. Content Delivery Network (CDN) sederhananya adalah jaringan server global untuk mengirim konten website kita. jika kita mengirim konten tersebut dari server utama kita kemungkin jaraknya ke pengguna cukup jauh, yang membuat proses pengiriman konten tidak efisien, dengan CDN konten akan dikirim dari server terdekat dari lokasi pengguna. Menginstall Tailwind CSS dengan CDN merupakan cara yang paling cepat dan sederhana. Namun, sama seperti framework lain, cara ini tidak direkomendasikan untuk production. Caranya cukup sederhana, kita hanya perlu menambahkan baris code dibawah pada section head file HTML kita. <script src="https://cdn.tailwindcss.com"></script> Baris code di atas akan mengimpor versi terbaru dari Tailwind CSS dan jika sudah ditambahkan kita bisa langsung menggunakannya pada website kita. Konfigurasi Tailwind CSS Dengan Play CDN Jika Tailwind CSS sudah terpasang dengan CDN kita sudah bisa mencoba Tailwind CSS pada project kita. Tapi tak hanya itu, terdapat beberapa konfigurasi yang bisa kita ubah jika menginstall Tailwind CSS dengan CDN. Tailwind Config Tailwind config dapat kita ubah untuk menambahkan token style kita sendiri, untuk mengubahnya kita bisa taruh code ini di section head HTML kita. <script> tailwind.config = { theme: { extend: { colors: { clifford: '#da373d', } } } } </script> Sebagai contoh code di atas akan membuat kita dapat menggunakan warna dengan nama clifford, misalnya text-clifford. Custom CSS Custom CSS disini bukan hanya membuat CSS biasa, namun bisa menggunakan semua fitur dari Tailwind CSS, caranya tambahkan baris code berikut ke section head HTML kita. <style type="text/tailwindcss"> @layer utilities { .content-auto { content-visibility: auto; } } </style> Dengan code di atas kita bisa menggunakan class .content-auto dengan fitur Tailwind CSS seperti responsive utilities, contohnya md:content-auto. Mulai Gunakan Tailwind CSS Setelah kita mengetahui cara setup Tailwind CSS dengan metode Play CDN, sekarang kita akan coba implementasikan ke file template kita. <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { biru: '#335ef7', } } } } </script> </head> <body> <div class="h-[100vh] w-full flex justify-center px-4 bg-slate-50"> <img src="https://buildwithangga.com/themes/front/images/logo_bwa_new.svg" class="w-1/5 mr-6" alt=""> <h1 class="text-5xl font-bold h-fit my-auto text-biru w-6/12"> Install Tailwind CSS Dengan CDN </h1> </div> </body> </html> Jika sudah berhasil maka seharusnya tampilannya akan seperti ini Tampilan web Tailwind CSS Install Tailwind CSS dengan Tailwind CLI Command Line Interface (CLI) merupakan command line program untuk mengeksekusi fungsi di sistem operasi, walaupun mayoritas orang sudah menggunakan yang berbasis GUI, CLI masih sering digunakan untuk mengkonfigurasi, menginstall software, dan juga mengakses fitur yang tidak tersedia melalui GUI. Untuk melakukan instalasi Tailwind CSS dengan CLI tool, pada device kita memerlukan node.js yang telah terinstall. langkah pertama jalankan command dibawah ini melalui terminal. npm install -D tailwindcss npx tailwindcss init jika sudah dijalankan maka isi project kita akan seperti ini. Folder structure Tailwind CSS Konfigurasi Tailwind CSS Dengan Tailwind CLI setelah menjalankan command diatas kita masih belum dapat menggunakan Tailwind CSS, maka kita akan konfigurasi files yg diperlukan terlebih dahulu. Template Path Buat folder ‘src’ pada project dan tambah file .html dan .css. Lalu buka file ‘tailwind.config.js’ lalu tambahkan lokasi file template web kita pada ‘content’. isikan dengan "./src/**/*.{html,js}" dalam kasus ini kita mengarahkan config tersebut ke pada folder ‘src’ dan mencari file dengan ekstensi .css dan .html. Folder structure Tailwind CSS /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } Tailwind Directives Agar file CSS kita terhubung dengan fitur Tailwind CSS, kita akan menambahkan baris code berikut pada file CSS yang baru kita buat tadi, dalam kasus ini cari file ‘input.css’ yang telah kita buat sebelumnya. @tailwind base; @tailwind components; @tailwind utilities; Build Tailwind CLI Langkah ini cukup penting dan akan selalu kita jalankan saat mendevelop project dengan Tailwind CSS, karena jika tidak maka perubahan yang kita buat tidak akan memberikan pengaruh. jalankan command berikut pada terminal. npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch Mulai Gunakan Tailwind CSS Setelah proses instalasi dan konfigurasi Tailwind CSS dengan CLI selesai, sekarang kita bisa coba implementasikan Tailwind CSS pada file template kita, jangan lupa untuk menambahkan baris code pada file template, agar CSS yang telah di-compile oleh Tailwind CSS dapat terhubung dan digunakan. <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/dist/output.css" rel="stylesheet"> </head> <body> <div class="h-[100vh] w-full flex justify-center px-4 bg-slate-50"> <img src="https://buildwithangga.com/themes/front/images/logo_bwa_new.svg" class="w-1/5 mr-6" alt=""> <h1 class="text-5xl font-bold h-fit my-auto text-biru w-6/12"> Install Tailwind CSS Dengan Tailwind CLI </h1> </div> </body> </html> Jika sudah berhasil, maka tampilannya akan seperti dibawah ini. Tampilan web Tailwind CSS Kekurangan dan Kelebihan Play CDN vs Tailwind CLI Kedua cara diatas tentu memiliki kelebihan dan kekurangannya masing-masing. Play CDN sangat mudah digunakan dan cocok untuk tahap development, apalagi jika kita hanya ingin sekedar mencoba saja. Untungnya Tailwind CSS masih memberikan opsi konfigurasi sekalipun menggunakan CDN walaupun tidak terlalu efektif karena kita mengatur konfigurasi pada file template, hal itu akan membuat project semakin kompleks jika project sudah terlalu besar. Sedangkan jika menggunakan Tailwind CLI, kita dapat dengan lebih leluasa melakukan configurasi karena file file yang terpisah, walaupun memerlukan banyak setup dan konfigurasi, serta cara ini lebih direkomendasikan jika berada pada tahap production. Lalu, metode mana yang paling baik?, tentu kembali ke kebutuhan dan preferensi masing-masing. Jika kalian tertarik untuk mempelajari lebih lanjut tentang Tailwind CSS, bisa coba kelas Tailwind CSS gratis dari BuildWith Angga, atau kamu bisa mempelajari styling yang akan sering kamu gunakan dan berbagai macam super tools untuk mempercepat pekerjaan kita dengan Tailwind CSS.

UI UX designer sangat wajib untuk selalu up to date dengan design trend terbaru sehingga bisa memberikan hasil ui ux design yang bagus untuk klien atau perusahaan. Beberapa inspirasi design trend kali ini dapat kita mulai pelajari dan membuat eksperimen design tersebut sebagai seorang professional ui ux designer. 2023 UI UX Website Design Trends Untuk Dipelajari 1) Kombinasi layout, colorful, dan illustrations Menggunakan Illustration dengan warna yang kuat maka perusahaan dapat mengekspresikan emotional tentang bisnis mereka melalui illustration tersebut, sehingga pengunjung website dapat lebih mudah mengerti pesan yang disampaikan oleh website tersebut melalui ui ux design dengan kombinasi illustration. Kita dapat menggunakan Figma untuk membuat design yang sesuai dengan trend saat ini. colorful landing page with illustrations american landing page creative studio with illustration 2) Less content, large typography Design trend yang mengizinkan designer dari perusahaan tersebut untuk fokus kepada beberapa kata pada campaign marketing dan bisnis yang telah ditentukan, sehingga kalimat tersebut lebih mudah terlihat di mata pengguna website, tentunya ini dapat meningkatkan user experience design pada website. simple landing page japan travel website large typography website design 3) Brutalism Design Style Pada design trend ini semua terlihat besar dan keluar dari grid system pada umumnya, benar-benar brutal tampilannya namun tetap memberikan user experience design yang baik untuk pengunjung website. Figma juga sudah menerapkan design concept seperti ini dan hasilnya cukup memuaskan pengguna. brutalism layout website design ecommerce with brutalism design trend Kesimpulan dalam mengikuti design trend 2023 Sebagai professional ui ux designer, kita tidak harus terpaku oleh pola pikir kita pribadi, alangkah baiknya jika mengikuti design trend yang ada saat ini sehingga ketika klien meminta kita mengerjakan projek tersebut, maka kesempatan kita juga sebagai freelancer ui ux designer menjadi lebih luas lagi, good luck.

Sebelumnya kita sudah mengenal apa itu machine learning dan bagaimana contoh utama dari penerapan sebuah machine learning di aplikasi dan website, kali ini kita akan mempelajari beberapa tipe machine learning yang sering digunakan demi membantu manusia bekerja lebih cepat dan produktif lagi. Perbedaan Supervised Learning dan Unsupervised Learning Machine learning membutuhkan banyak data untuk membuat keputusan yang baik, semakin banyak data yang dimiliki maka semakin akurat juga keputusan-keputusan yang dibuat oleh machine learning untuk manusia maupun sistem. Beberapa tipe machine learning adalah supervised, unsupervised, dan reinforcement learning. 1) Supervised Learning Supervised learning adalah bagian dari machine learning dan artificial intelligence, supervised learning menggunakan data yang sudah diberi label oleh data scientist untuk melatih algoritma dalam membuat sebuah hasil prediksi yang tepat. Scientist sudah menyiapkan data-data penting terkait dari output yang diharapkan, data tersebut dikoleksi lalu disimpan di dalam model pada supervised learning. Jika kita menggunakan GMail, terkadang GMail mengindentifikasi sebuah email yang bersifat scam atau spam dengan cepat dan akurat, well, itu contoh utama dari kerja algoritma supervised learning, dapat meningkatkan user experience design dan membantu manusia hidup lebih produktif. supervised learning pada GMail spam 2) Unsupervised Learning Sementara supervised learning membutuhkan banyak data yang diberikan label oleh scientist atau pengguna untuk membantu machine tersebut belajar, unsupervised learning dapat belajar mandiri dengan cara membaca sebuah pattern (tanpa harus diberikan labeled data). Tipe machine learning yang satu ini sangat membantu ketika pengguna butuh mengindentifikasi patterns dan menggunakan data tersedia untuk membuat keputusan cepat. Unsupervised learning cocok digunakan dalam membuat segmentasi pasar, image recogniition, dan cross-selling strategy yang bisa menumbuhkan sebuah bisnis, hal tersebut bisa kita kenal sebagai clustering algorithm. Algoritma yang digunakan biasanya adalah Hidden Markov models, k-means, hierarchical clustering, dan Gaussian mixture models. Pilih menerapkan supervised atau unsupervised learning? Saya sebagai pemula lebih tertarik menggunakan supervised learning karena saya sebagai scientist dapat mengkontrol hasil yang saya harapkan sehingga proses belajar menjadi lebih terarah dan sesuai dengan harapan, selain itu juga saya suka melakukan riset untuk data-data yang dibutuhkan pada algoritma supervised learning.

Machine learning sering digunakan dalam membuat prediksi di dalam sebuah aplikasi atau website, contohnya pada Netflix, apabila kita suka film horror maka Netflix akan lebih sering menampilkan rekomendasi film horror, seperti itulah contoh kecil penerapan machine learning yang membantu manusia. Apa itu Machine Learning? Cara Kerja dan Contohnya So, apa itu machine learning sebenarnya? Machine learning adalah salah satu bagian dari artificial intelligence (A.I) atau sebuah kecerdasan buatan manusia yang difokuskan untuk menggunakan data serta algoritma dalam meniru bagaimana otak manusia belajar hal baru. Seiring waktu, machine learning ini juga akan lebih banyak belajar dengan cepat sehingga machine learning bisa lebih akurat lagi dalam menentukan sebuah pilihan yang membantu kehidupan manusia, seperti contoh rekomendasi film Netflix. Machine learning sudah dipakai di mana saja? Jarang kita sadari bahwa machine learning sudah sering diterapkan dalam kehidupan kita sehari-harinya, saya akan memberikan beberapa contoh penerapan machine learning yang perlu kamu ketahui saat ini: 1) Film recommendation Netflix dan Disney menerapkan penggunaan machine learning yang cukup akurat sehingga mereka dapat mempelajari bagaimana cara kita menikmati film, dimulai dari pemilihan kategori film, subtitle, hingga pemilihan cover film kebutuhan marketing juga telah dilakukan oleh machine learning dengan sangat akurat, secara tidak langsung machine learning dapat meningkatkan user experience design pada bisnis yang kita miliki. penerapan machine learning pada website Netflix 2) Ads recommendation Instagram dan Google juga menerapkan kehebatan dari machine learning sehingga bisa memberikan iklan yang sesuai dengan interest diri kita, apabila selama sebulan ke belakang kita lebih sering mencari tas homemade maka machine learning akan memberikan iklan tersebut kepada kita melalui platform Instagram dan pencarian Google. Kesimpulan penggunaan machine learning Saat ini sudah semakin banyak konten yang dibuat oleh manusia, machine learning dapat memilah-milih konten apa yang harus ditampilkan kepada Andi dan Budi, sehingga Andi dan Budi tidak kewalahan dalam mengkonsumsi konten yang sesuai ketertarikan mereka. Kamu bisa mulai menerapkan machine learning pada toko online yang kamu miliki, sehingga kamu jadi mengerti barang apa saja yang cepat laku dan perlu di stock ulang dan barang mana saja yang tidak seharusnya kamu jual kembali.

Sebagai freelancer ui ux designer, terkadang klien minta kita mengerjakan projek website design atau mobile app design dengan cepat. Oleh karena itu kita dapat menggunakan template figma gratis yang tersedia di internet. Well, faktanya tidak boleh langsung menggunakan template figma begitu saja, berikut beberapa tips yang perlu dipelajari. Lisensi penggunaan template Template figma memiliki beberapa lisensi, kita wajib menemukan file template figma yang menggunakan lisensi 4.0 atau creative common untuk bisa digunakan sebagai projek komersil misalnya untuk projek klien freelance. Shaynakit menyediakan ribuan template figma website design dan mobile app design yang berlisensi 4.0. Rekomendasi template figma Kali ini saya akan share beberapa template figma terbaik dan paling banyak digunakan untuk projek latihan atau komersil, sehingga freelance website designer dapat bekerja lebih cepat lagi. Foodyar website design landing page restaurant website design Sebuah template figma yang cocok digunakan sebagai landing page bisnis makanan dan edukasi, menggunakan style trendy dengan komposisi layout menarik dan meningkatkan user experience. Silahkan download template Foodyar di sini. Store dashboard website design dashboard page for business transactions Klien sering meminta freelance website designer untuk design dashboard keperluan bisnis mereka, maka kita bisa coba gunakan template figma yang satu ini dengan informasi-informasi penjualan bisnis. Download template store dashboard di sini. Finding house landing page landing page for selling and buying houses Penjualan rumah di seluruh dunia meningkat drastis, agency mulai memperkerjakan freelance website design untuk mengerjakan marketplace jual beli rumah secara online dengan layout yang professional. Template figma yang satu ini cocok digunakan oleh kita untuk memulai projek jual beli rumah tersebut. Mulai download template figma Finding house di sini. Modifikasi template sebelum dijual Saya menyarankan freelance website designer menggunakan template figma yang berlisensi 4.0 dan wajib melakukan modifikasi terlebih dahulu sesuai kebutuhan projek freelance. Karena jika tidak maka design yang diberikan kepada klien akan serupa dengan hasil design dari designer lainnya yang menggunakan template figma tersebut. Berdiskusi dengan klien sebelum pakai template Jujur kepada klien bahwa kita akan menggunakan template figma yang tersedia, apabila klien tersebut butuh cepat selesai projeknya dan tidak keberatan, maka kita bisa gunakan template website design figma tersebut. Good luck.

Apabila kamu bekerja sebagai designer, developer, atau marketer di perusahaan IT. Tentunya kamu sudah tidak asing dengan yang namanya prototype, kita akan coba membahas apa itu prototype serta manfaat membangun sebuah prototype. Ketika memiliki sebuah ide yang kita pikir dapat membantu jutaan manusia di dunia, misalnya sebagai contoh ingin membantu orang-orang menemukan taksi terdekat secara online melalui smartphone kesayangan, maka sebelum mengerjakan koding, bisa dimulai membuat sebuah prototype terlebih dahulu untuk digunakan usability-testing dengan calon pengguna aplikasi. Mengenal apa itu prototype Hadirnya prototype dapat memberikan manfaat besar bagi kesuksesan perusahaan, karena prototype ini adalah sebuah rancangan awal dari aplikasi atau website yang akan dibangun oleh tim designer dan developer. Prototype memiliki fitur-fitur utama dari produk yang nantinya akan digunakan oleh target pengguna oleh perusahaan tersebut. Setelah prototype selesai dilakukan uji coba maka perusahan akan mendapatkan feedback bermanfaat bisa meningkatkan prototype tersebut. Manfaat utama membuat prototype Startup atau perusahaan yang tidak memiliki budget besar memilih untuk membangun prototype terlebih dahulu dibandingkan harus final product, berikut adalah penjelasannya. Hemat waktu dan budget perusahaan Prototype dari projek website atau aplikasi tidak membutuhkan usaha dan budget besar untuk dapat diselesaikan, bahkan biasanya tim designer hanya mendesain wireframe sederhana, nantinya akan dijadikan sebagai prototype untuk usability-testing. Less effort, easy to modify Wireframe dan prototype hanya dijadikan sebagai acuan utama inti projek, apabila ada kesalahan yang perlu diperbaiki maka tidak membutuhkan usaha besar, hanya cukup diubah saja pada software design yang digunakan misalnya Figma. Minimum viable product (MVP) Perusahaan ingin memvalidasi ide bisnis mereka melalui prototype, pada prototype ini biasanya sering disebut sebagai minimum viable product. Jika prototype tersebut dibangun lalu hasilnya berhasil dan memberikan traction tinggi, maka perusahaan siap berinvestasi lebih besar untuk mengembangkan prototype tersebut. Presentasi kepada investor Prototype telah dibuat dengan baik dan memberikan traction yang tinggi, maka prototype tersebut bisa digunakan untuk mendapatkan investasi besar oleh venture capital. Tanpa adanya prototype maka venture capital tidak tertarik berinvestasi pada perusahaan kita. Beberapa contoh prototype Pahami prototype menjual berikut bisa kita buat sebagai designer atau developer dalam membantu perusahaan memvalidasi ide bisnis mereka sebelum mendapatkan investasi besar. Paper prototype contoh paper prototype aplikasi mobile Paper prototype sering dibuat ketika meeting bersama dengan stakeholder dan C-Level pada perusahaan, paper prototype sangat cocok apabila kita tidak memiliki banyak waktu dan ingin fokus kepada core projek tersebut. Low-fidelity prototype Setelah membuat paper prototype biasanya atasan meminta dilanjutkan ke software design seperti Figma, kita dapat mendesain low-fidelity prototype menggunakan Figma dengan mudah lalu dibagikan kepada stakeholder projek tersebut. High-fidelity prototype Pada high-fidelity prototype designer dapat memberikan sentuhan visual design yang menarik seperti segi warna, typography, margins, paddings, animation, dan lainnya. Biasanya high-fidelity prototype digunakan untuk usability-testing kepada calon target pengguna. contoh high-fidelity prototype untuk usability-testing Kesimpulan membuat dan memiliki prototype Bisnis tidak selalu naik, pasti akan turun juga. Perusahaan wajib melakukan research and development pada ide-ide bisnis terbaru, lalu bisa dieksekusi dengan cara membuat prototype demi menghemat waktu dan budget. Namun perlu diingat juga ketika design prototype, perlu diperhatikan UI UX design prototype tersebut demi mendapatkan hasil yang baik setelah melakukan usability-testing dengan prototype tersebut. Well, good luck dalam membuat protoype.

Content Creator dan Influencer kini menjadi profesi yang banyak dikejar oleh anak muda di masa sekarang ini. Content creator dan influencer adalah dua istilah yang sering digunakan dalam industri pemasaran digital dan media sosial. Sebenarnya apakah Content Creator dan Influencer adalah hal yang serupa? Content Creator dan Influencer pada dasarnya memiliki tujuan yang sama yaitu untuk menarik minat audiens dengan konten yang dibuatnya, sehingga dapat meningkatkan keterlibatan atau engagement dari audiens. Meskipun keduanya memiliki keterkaitan, tetapi ada perbedaan yang signifikan di antara keduanya. Berikut ini penjelasan perbedaan antara content creator dan influencer: Pengertian Content Creator Photo by Marvin Meyer on Unsplash Content creator adalah seseorang yang menciptakan konten digital yang menarik dan relevan, seperti video, gambar, atau teks, yang bisa diposting dan disebarluaskan melalui media sosial atau platform digital lainnya. Fokus utama dari content creator adalah menghasilkan konten yang berkualitas dan menarik yang dapat menghibur, menginformasikan, atau menginspirasi audiens target. Content Creator sering kali memiliki audiens yang lebih terfokus dan tertarik pada topik tertentu. Pengertian Influencer Photo by Jakob Owens on Unsplash Sementara itu, influencer adalah seseorang yang memiliki pengaruh besar di media sosial dan mampu mempengaruhi atau memengaruhi perilaku atau pandangan orang lain terhadap topik atau merek tertentu. Content creator dapat menghasilkan berbagai jenis konten, seperti tutorial, review produk, wawancara, dan banyak lagi. Sedangkan influencer lebih cenderung pada jenis konten tertentu, seperti endorsement atau promosi produk. Fokus utama dari influencer adalah membangun komunitas dan interaksi dengan pengikut mereka di media sosial, dan menggunakan pengaruh mereka untuk mempromosikan merek atau produk tertentu. Apa saja tools andalan membuat konten? Berbicara soal Content Creator dan Influencer mungkin tak lepas dari yang namanya konten. Konten sendiri memiliki arti informasi atau materi yang dibuat dan dibagikan untuk tujuan tertentu, seperti untuk memberikan informasi, hiburan, atau mempromosikan produk atau layanan. Konten dapat berupa teks, gambar, audio, video, atau kombinasi dari semuanya. Photo by Anete Lūsiņa on Unsplash Konten biasanya dibuat untuk dikonsumsi oleh audiens target melalui berbagai platform seperti situs web, media sosial, blog, podcast, atau saluran media lainnya. Konten dapat menjadi bagian penting dari strategi pemasaran dan dapat membantu meningkatkan keterlibatan audiens dan memperkuat merek atau reputasi individu. Dalam membuat konten tentunya perlu memperhatikan banyak aspek salah satunya adalah tools pembuatan konten itu sendiri.Tools menjadi hal yang sangat dibutuhkan seorang Content Creator dan Influencer karena tanpa tools yang tepat maka akan mustahil dapat menghasilkan konten yang menarik dan berkulitas secara visual. Berikut tools andalan seorang Content Creator dan Influencer untuk membuat konten. 1. VN Editor VN Editor sebagai tool Content Creator VN Editor adalah aplikasi pengeditan video populer dan digunakan oleh banyak pengguna untuk membuat dan mengedit video pendek di platform media sosial seperti TikTok, Instagram, Facebook, dan lain sebagainya. VN Editor memungkinkan pengguna untuk menambahkan berbagai efek visual, musik, teks, filter, stiker, dan lainnya ke dalam video mereka. Aplikasi ini juga memiliki berbagai fitur seperti pengeditan frame-by-frame, menggabungkan beberapa video, menambahkan lagu, dan banyak lagi. Aplikasi ini juga dilengkapi dengan berbagai template video yang siap digunakan, seperti template video ulang tahun, template video promosi, dan banyak lagi. VN Editor memungkinkan pengguna untuk mengedit video dalam resolusi yang tinggi dan dapat diunduh serta digunakan secara gratis di perangkat Android dan iOS. Dengan aplikasi VN Editor, pengguna dapat dengan mudah membuat video yang menarik dan berkualitas tinggi dengan cepat dan mudah. 2. CapCut CapCut sebagai tool Content Creator CapCut adalah sebuah aplikasi pengeditan video yang tersedia di platform Android dan iOS. Aplikasi ini awalnya dikenal dengan nama Viamaker, namun kemudian diubah menjadi CapCut setelah diakuisisi oleh perusahaan teknologi ByteDance, yang juga memiliki aplikasi populer lainnya seperti TikTok dan Douyin. CapCut menawarkan berbagai fitur pengeditan video, termasuk penggabungan video, pemotongan, penyuntingan audio, pengaturan kecepatan, efek visual, teks dan banyak lagi. Aplikasi ini juga menyediakan berbagai template dan preset yang dapat digunakan untuk memudahkan pengguna dalam mengedit video. Selain itu, CapCut juga memungkinkan pengguna untuk menambahkan musik dan suara ke dalam video mereka. Meskipun CapCut gratis untuk diunduh dan digunakan, ada beberapa fitur yang hanya tersedia untuk pengguna yang berlangganan paket premium. 3. Copy.ai Copy.ai sebagai tool Content Creator Aplikasi ini merupakan tools yang sangat membantu bagi Content Creator. Copy.ai adalah sebuah platform AI (kecerdasan buatan) yang menyediakan alat penghasil teks otomatis yang dapat membantu pengguna dalam membuat teks yang lebih cepat dan mudah. Dengan menggunakan teknologi AI, Copy.ai dapat menghasilkan teks seperti judul, deskripsi, paragraf, email, dan konten sosial media dengan cepat dan mudah. Pengguna hanya perlu memasukkan beberapa kata kunci atau kalimat dan Copy.ai akan menghasilkan teks dengan berbagai variasi yang dapat dipilih dan disesuaikan sesuai dengan kebutuhan. Selain itu, Copy.ai juga menyediakan fitur yang dapat membantu pengguna mengoptimalkan teks mereka dengan mencocokkan teks dengan target audiens atau menghasilkan variasi teks yang dapat digunakan untuk tes A/B dalam kampanye iklan. Copy.ai dapat berguna bagi marketer, penulis konten, dan bisnis yang ingin meningkatkan efisiensi dalam membuat teks yang menarik dan berkualitas tinggi. 4. TikTok TikTok sebagai tool Content Creator Kamu pastinya tidak asing lagi dengan aplikasi yang satu ini. Bisa dikatakan TikTok menjadi media sosial yang paling banyak digunakan di seluruh dunia. TikTok menyediakan berbagai alat dan fitur yang memungkinkan content creator dan influencer untuk membuat, mempublikasikan, dan mempromosikan konten mereka dengan mudah. TikTok adalah platform yang efektif untuk promosi merek karena dapat mencapai audiens yang besar dan beragam. TikTok menyediakan alat analisis yang membantu content creator dan influencer dalam memantau performa konten mereka dan menganalisis metrik seperti tayangan, suka, komentar, dan berbagi. 5. Hootsuite Hootsuite sebagai tool Content Creator Hootsuite adalah platform manajemen media sosial yang memungkinkan pengguna untuk mengelola dan mempublikasikan konten di berbagai platform media sosial dalam satu tempat. Hootsuite menyediakan berbagai jenis rencana berbayar dengan fitur yang berbeda-beda. Namun, mereka juga menawarkan rencana gratis yang dapat digunakan untuk mengelola hingga 3 akun media sosial dan juga dapat mengatur monitoring pesan masuk dan memperoleh analisis dasar kinerja posting Anda. Meskipun ada pembatasan jumlah akun media sosial yang dapat dikelola, tetapi Hootsuite masih memberikan cukup fitur dasar untuk mengelola beberapa platform media sosial secara efisien. Jika kamu memerlukan fitur tambahan atau ingin mengelola lebih banyak akun, kamu dapat mempertimbangkan untuk meningkatkan ke rencana berbayar. 6. Unsplash Unsplash sebagai tool Content Creator Unsplash adalah platform gambar stok gratis yang menyediakan gambar berkualitas tinggi yang dapat digunakan oleh Content Creator dan Influencer untuk mempercantik konten mereka. Unsplash menawarkan lebih dari 2 juta gambar gratis yang dapat diunduh dan digunakan tanpa perlu membayar atau memberikan atribusi ke pemilik gambar. Dengan adanya Unsplash, Content Creator dapat menghemat waktu dan biaya untuk mencari atau membeli gambar berkualitas tinggi. Gambar-gambar yang disediakan oleh Unsplash bervariasi dari berbagai kategori, seperti alam, manusia, teknologi, dan banyak lagi, sehingga pengguna dapat dengan mudah menemukan gambar yang sesuai dengan kebutuhan mereka. 7. SEMrush Semrush sebagai tool Content Creator SEMrush adalah platform SEO dan pemasaran digital yang membantu pengguna dalam riset kata kunci, analisis pesaing, dan mengelola kampanye iklan. Platform ini menawarkan berbagai fitur dan alat yang membantu pengguna meningkatkan kinerja situs web dan kampanye iklan mereka di mesin pencari. Dalam SEMrush, pengguna dapat melakukan riset kata kunci untuk menemukan kata kunci yang populer dan relevan untuk target audiens mereka. Kamu juga dapat melihat kata kunci yang digunakan oleh pesaing dan mengidentifikasi kesempatan untuk memperbaiki rate dalam hasil mesin pencari. SEMrush tersedia dalam berbagai rencana berbayar dengan fitur yang berbeda-beda, mulai dari rencana gratis hingga rencana enterprise yang lengkap. Photo by Adem AY on Unsplash Nah itu dia penjelasan mengenai tools andalan yang biasanya digunakan oleh Content Creator dan Influencer. Dalam memilih tools untuk membuat konten adalah hal yang cukup penting karena dapat membantu meningkatkan kualitas konten dan efektivitas pemasaran Anda. Untuk memilih tools untuk membuat konten kamu perlu mempertimbangkan apa yang ingin kamu capai dengan konten kamu. Kamu juga perlu memperhatikan budget yang kamu miliki saat ini. Pilih tools yang mudah digunakan dan tidak memerlukan waktu dan usaha yang besar untuk mempelajari cara menggunakannya. Ada banyak tools yang tersedia dengan harga yang berbeda-beda sehingga kamu cukup memilih yang sesuai dengan kemampuan kamu saat ini. Rekomendasi Kelas Untuk Content Creator Sudah siap membangun karir menjadi seorang Content Creator atau Influencer? Berikut ini penulis ingin merekomendasikan kepada kamu kelas Build Your Personal Branding on Socmed & Boost Your Career dari BWA untuk membangun personal branding sebagai seorang Content Creator maupun Influencer. Bersama mentor berpengalaman, kamu akan belajar bagaimana cara membangun personal branding dengan menemukan keunikan diri sendiri serta membangun kredibilitas diri yang berfokus di media sosial. Di kelas ini, mentor juga akan mengarahkan kamu terkait seni mempromosikan atau branding diri sendiri juga bagaimana mempertahakan eksistensi diri.

Hello people spirit of learning! Dalam aplikasi yang sering kita gunakan, pastinya kita sering menemukan tombol, yang dimana saat kita klik tombol tersebut akan melakukan perubahan data baik secara UI maupun data di belakangnya. Nah dalam flutter terdapat 3 jenis tombol, Simak penjelasannya. 1. ElevatedButton void main(List args) { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: ElevatedButton( style: ElevatedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(100)), fixedSize: Size(160, 45), backgroundColor: Color(0xFF3D58FF)), onPressed: () {}, child: Text( 'Home', style: TextStyle(fontWeight: FontWeight.w600, fontSize: 16), ), )), )); } } Yang pertama ada elevatedButton, tombol ini mempunyai ciri background warna tombolnya dan dibelakang buttonnya terdapat sedikit shadow. Tombol jenis ini sering digunakan di berbagai aplikasi yang sering kita gunakan. Oh ya anyway ada properti yang wajib diisi yaitu onPressed dan child, fungsinya onPressed adalah saat kita menklik didalamnya kita melakukan aksi, Namun disini kita kosongkan saja. Dan child bisa diisi dengan widget apapun. Biasanya diisi dengan widget Text. Disini kita bisa memodifikasinya dengan menggunakan properti Style didalam widget elevatedButton. setelah itu kita getter dengan styleFrom, yang didalamnya kita bisa menggunakan banyak properti. Seperti backgroundColor untuk mengubah warna buttonnya, lalu shape untuk mengatur lengkungan tiap ujung button, dan masih banyak lagi. Kalian bisa mencobanya sendiri sesusaikan design yang kalian inginkan ya. Untuk contohnya bisa dilihat pada code dan gambar diatas. 2. OutlineButton void main(List args) { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: OutlinedButton( style: OutlinedButton.styleFrom( shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)), fixedSize: Size(180, 45), foregroundColor: Color(0xff252E4E), side: BorderSide(color: Color(0xff252E4E))), onPressed: () {}, child: Text( 'Rate Alessya', style: TextStyle(fontWeight: FontWeight.w600, fontSize: 16), ), )), )); } } Yang kedua ada outlinedButton, tombol ini mempunyai ciri hanya memiliki stroke atau garis sisi button saja dan tidak mempunyai warna background. Jenis tombol ini jarang kita temukan pada aplikasi atau web yang kita gunakan sehari hari. sama seperti sebelumnya, ada properti yang wajib diisi yaitu onPressed dan child, fungsinya onPressed adalah saat kita menklik didalamnya kita melakukan aksi, Namun disini kita kosongkan saja. Dan child bisa diisi dengan widget apapun. Biasanya diisi dengan widget Text. Untuk melakukan styling hampir mirip juga dengan button sebelumnya, dengan menggunakan properti Style didalam widget elevatedButton. setelah itu kita getter dengan styleFrom, yang didalamnya kita bisa menggunakan banyak properti. Seperti foreBackgroundColor untuk mengubah warna text pada buttonnya, lalu shape untuk mengatur lengkungan tiap ujung button, side untuk menstyling ketebalan garis dan mengubah warna garis pada button, dan masih banyak lagi. Kalian bisa mencobanya sendiri sesusaikan design yang kalian inginkan ya. Untuk contohnya bisa dilihat pada code dan gambar diatas. 3. TextButton void main(List args) { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: TextButton( style: TextButton.styleFrom(foregroundColor: Color(0xff3D58FF)), onPressed: () {}, child: Text( 'Log in', style: TextStyle(fontWeight: FontWeight.w600, fontSize: 16), ), )), )); } } Yang terakhir adalah TextButton, Ciri-ciri dari button ini adalah hanya berbentuk text saja seperti text yang hanya dikasih Url atau link. Sering ditemukan dalam web sederhana ataupun pada aplikasi sederhana. sama seperti sebelumnya, ada properti yang wajib diisi yaitu onPressed dan child, fungsinya onPressed adalah saat kita menklik didalamnya kita melakukan aksi, Namun disini kita kosongkan saja. Dan child bisa diisi dengan widget apapun. Biasanya diisi dengan widget Text. Untuk textButton juga bisa di styling seperti sebelumnya, Namun disini saya hanya mencontohkan menggunakan properti foreBackgroundColor. Karena ini hanya textButton berisikan hanya text yang bisa di click. Namun kalian juga bisa memodifikasi sesuka kalian. karena getternya sama-sama dari styleFrom. Terima kasih dan semoga bermanfaat!