Tips Design

Pada artikel kali ini, kita akan membahas perbedaan dari seorang Graphic Designer dengan UI Designer. Masih banyak yang belum tahu perbedaan dari kedua pekerjaan tersebut, meskipun sama-sama bekerja dalam hal visual, kedua pekerjaan itu sangatlah berbeda terutama tujuan dari desain mereka. Seorang UI Designer mendesain visual untuk mempermudah pengguna menggunakan sebuah produk yaitu website ataupun aplikasi, sedangkan Graphic Designer mendesain visual untuk menyampaikan pesan dari sebuah produk kepada pengguna atau biasa disebuat juga sebagai branding. Perbedaan Graphic Designer dan UI Designer Selain tujuan tersebut, ada juga beberapa perbedaan dari kedua pekerjaan tersebut, antara lain: 1. Tools Yang Digunakan Tools yang digunakan designer | Photo by UX Store Selain tujuan mendesain, tools yang digunakan seorang Graphic Designer dan UI Designer juga berbeda meskipun mungkin ada beberapa tools yang memang bisa digunakan untuk keduanya, namun tujuan dari penggunaan tools tersebut berbeda. Untuk tools yang digunakan seorang Graphic Designer adalah: 1. Adobe PhotoshopUntuk mengedit, memanipulasi ataupun memberi efek pada foto atau gambar. 2. Adobe IllustratorUntuk membuat ilustrasi berbasis vector. 3. Adobe InDesignUntuk mengatur layout desain majalah, buku, poster, atau brosur. 4. ProcreateUntuk membuat 'lukisan' ilustrasi dengan teknik freehand drawing terutama untuk pengguna iPad. 5. Affinity DesignerUntuk membuat ilustrasi berbasis vector. Alternatif dari aplikasi Adobe Illustrator. 6. CorelDRAWUntuk membuat gambar 2D (ilustrasi, logo, icon) bahkan bisa untuk mendesain brosur, poster, dan undangan (media cetak). Sedangkan, tools yang digunakan seorang UI Designer antara lain: 1. FigmaUntuk mendesain user interface dan juga membuat prototype nya. 2. SketchUntuk mendesain user interface dan juga membuat prototype nya. 3. Adobe XDUntuk mendesain user interface dan juga membuat prototype nya. 4. FramerUntuk membuat prototype dari desain UI yang sudah dibuat. 5. PrincipleUntuk membuat prototype dari desain UI yang sudah dibuat. Khusus untuk pengguna Mac. 6. ProtopieUntuk membuat interaction design atau prototype dari desain UI yang sudah dibuat. 2. Workflow Workflow designer | Photo by Will Porada Workflow atau alur kerja seorang Graphic Designer dan UI Designer juga berbeda. Untuk alur kerja seorang Graphic Designer yaitu: Menyiapkan tools desain yang diperlukan (peralatan & software/aplikasi)Membuat konsep dari segala informasi yang diberikan oleh klienMengilustrasikan konsep dalam bentuk sketsa/draft secara individu atau bersama timMemilih warna, gambar, dan font yang akan digunakanUntuk project tertentu perlu berkoordinasi juga dengan pihak luar seperti agensi, percetakan, dan/atau pihak yang diajak bekerjasamaMelakukan diskusi dengan klien untuk progress project desainMempresentasikan ‘hasil karya’ yang sudah dikerjakan kepada klien. Sedangkan alur kerja seorang UI Designer pada umumnya adalah sebagai berikut: Membuat wireframe → Membuat gambaran kasar dari tampilan tiap halaman website atau aplikasi mobile (Optional: jika dalam satu tim tidak ada seorang UX Designer).Membuat style guide dan menyiapkan assets → Menentukan warna, tipografi, membuat komponen, ikon, logo, illustrasi, dsb. (Optional: jika klien atau tim belum menyediakan style guide dan asset yang dibutuhkan).Mendesain visual → Mendesain tampilan tiap halaman website atau aplikasi mobile sesuai dengan wireframe dan menggunakan style guide dan asset yang sudah disediakan.Membuat prototype → Membuat simulasi hasil desain website atau aplikasi mobile untuk diujicoba dan dievaluasi. 3. Alur Belajar Alur belajar designer | Photo by Unseen Studio Untuk alur belajar seorang Graphic Designer dan UI Designer cukup berbeda tetapi memiliki kemiripan untuk hal-hal yang dasar yang perlu diketahui dalam membuat project visual. Alur belajar atau langkah-langkah untuk menjadi UI Designer umumnya sebagai berikut: Pelajari design basic atau dasar desain → Belajar tentang prinsip-prinsip dasar desain seperti Contrast, Repetition/Rhytm, Alignment, dan Proximity (CRAP). Belajar tentang elemen visual seperti Typography, Colors, Shapes dan elemen visual lainnya.Pelajari tools UI Design → Belajar semua tools atau aplikasi yang biasa digunakan seorang UI Designer lalu master tools tersebut. Untuk saat ini Figma merupakan salah satu tools yang perlu kita pelajari.Cari sumber referensi → Agar kita selalu update tentang tren desain dan juga sebagai inspirasi untuk desain kita selanjutnya. Sumber referensi dapat kita temukan di web seperti Dribbble dan Behance.Ikut komunitas → Ikutlah komunitas desain untuk menambah koneksi dan sekaligus untuk meminta feedback tentang desain yang sudah kita buat agar kita semakin berkembang dan menjadi lebih baik sebagi seorang UI Designer .Ikut online course atau bootcamp → Ini merupakan langkah optional, namun dengan mengikuti online course ataupun bootcamp kita lebih mudah untuk mendapatkan akses menemukan mentor dan relasi, dan juga hasil belajar dari course atau bootcamp tersebut dapat langsung kita terapkan di dunia kerja. Sudah banyak platform yang menyediakan course ataupun bootcamp untuk menjadi UI Designer salah satunya kalian bisa mengunjungi website Buildwith Angga (BWA). Dan alur belajar untuk menjadi Graphic Designer umumnya sebagai berikut: Pelajari dasar desain → Graphic Designer perlu belajar berbagai elemen di dalam grafis. Beberapa elemen tersebut mencakup pemilihan warna, tipografi, simbol, serta grid system.Cari Sumber Referensi → Memilih dan mencari apa saja yang dapat dijadikan sumber referensi desain mulai dari majalah cetak, media sosial, Dribbble, Behance atau Pinterest. Lalu kumpulkan desain-desain yang menginspirasi.Pelajari Tools Graphic Design → perlu menguasai tools yang diperlukan untuk menunjang karier graphic design. Para graphic designer biasa memanfaatkan tools seperti Adobe Photoshop, Adobe Illustrator, Procreate, atau Corel Draw.Bedah Proses Desain → Bedah proses desain perlu dilakukan untuk belajar dan menambah skill menjadi graphic designer, setelah mengumpulkan desain-desain yang menarik & menginspirasi, kalian perlu membedah satu per satu desain tersebut, mulai dari warna yang digunakan, simbol-simbol yang dimasukkan, hingga proses pembuatan desainnya.Ikut Komunitas → Ketika belajar graphic design secara otodidak tanpa adanya ‘guru’ kita perlu ikut komunitas untuk menambah koneksi sekaligus untuk meminta feedback tentang desain yang sudah kita buat.Ikut Online Course → Ini merupakan langkah optional, namun dengan mengikuti online course kita lebih mudah untuk mendapatkan akses menemukan mentor dan relasi, serta alur belajar yang lebih terarah sesuai dengan roadmap untuk menjadi seorang Graphic Designer. 4. Cara Mencari Project Freelance Mencari project freelance | Photo by Bram Naus Ada banyak opsi untuk berkarir sebagai Graphic Designer dan UI Designer, yaitu bekerja di agensi/studio, startup, perusahaan besar, dan freelance. Di artikel ini akan membahas bagaimana menjadi freelancer Graphic Design dan UI Designer dan bagaimana seorang freelancer mendapatkan project freelance. Untuk mendapatkan project freelance biasanya seorang Graphic Designer dan UI Designer membagikan hasil karya desain mereka di beberapa platform desain maupun sosial media seperti Dribbble, Behance, Instagram maupun Facebook. Namun ada beberapa website yang biasa digunakan untuk mencari project freelance seperti Upwork, Fiver, Freelancer, 99designs, dan masih banyak platform freelance lainnya. Kesimpulan Profesi sebagai Graphic Designer dan UI Designer secara umum mungkin terlihat sama dikarenakan sama-sama bekerja dalam hal visual, namun jika kita teliti kembali, banyak sekali perbedaan dari dua profesi tersebut baik dari tujuan, tools yang dipakai, worklfow, alur belajar, dan cara untuk mencari sebuah project freelance. Terima kasih sudah membaca artikel ini. Silahkan bagikan artikel ini jika bermanfaat dan baca artikel kita yang lain ya.. 👋

Hello, people with the spirit of learning. Sebagai seorang UI Designer saat mendesain sebuah aplikasi ataupaun sekedar eksplorasi, login screen merupakan salah satu screen yang pastinya harus kita desain setiap kita mendesain sebuah aplikasi. Tutorial Figma Design Login Mobile App Yuk, kita desain login screen sekarang. 1. Siapkan Frame Pengaturan frame untuk UI Design login screen Tambahkan frame dengan cara tekan F pada keyboard lalu pilih frame iPhone 14 Pro Max (430 ⨉ 932).Ubah nama frame menjadi “Login Screen”.Ubah warna Fill frame menjadi #1B1B1B.Tambahkan component Status Bar dan Home Indicator untuk mengetahui safe zone dari frame. Kalian dapat mendapatkan component tersebut pada Community di Figma dengan keyword iOS 16 UI Kit for Figma oleh Joey Banks. 2. Siapkan Asset Assets untuk UI Design login screen Untuk logo, kalian dapat mendapatkannya dengan menggunakan plugin Logoipsum.Untuk logo Google dan Facebook kalian dapat mendapatkannya dengan menggunakan plugin Iconify atau kalian juga bisa mencari di Community Figma.Untuk icon amplop, gembok, dan mata kalian dapat mendapatkannya di Community Figma dengan keyword iconsax. 3. Atur Logo Pengaturan logo pada UI Design login screen Taruh logo kedalam frame lalu ubah ukuran logo menjadi 48 ⨉ 48.Ubah tipe Fill warna logo menjadi Linear.Ubah warna dari kiri kanan #417AFA, #F436E0 dengan Opacity 100%.Taruh logo di atas kiri frame dengan jarak dari atas dari Status Bar 16 dan kiri 24. 4. Tambahkan Headline Pengaturan headline pada UI Design login screen Tambahkan text “Welcome Back!” ke dalam frame, lalu atur font menjadi Rubik, font weight Bold, font size 48, dan letter spacing 1 px.Ubah Fill color text “Welcome Back!” menjadi #FFFFFF.Tambahkan text “Hello, we miss you..” ke dalam frame, lalu atur font menjadi Rubik, font weight Regular, dan font size 16.Ubah Fill color text “Hello, we miss you..” menjadi #D1D1D1.Pilih text “Welcome Back!” dan text “Hello, we miss you..” lalu terapkan Auto Layout dengan cara menekan Shift + A pada keyboard.Ubah nama auto layout menjadi “Headline”.Atur Headline menjadi Vertical layout dan atur space beetwen menjadi 8.Posisikan Headline di bawah logo dengan jarak 40 dan jarak kiri 24. 5. Buat Email Input Field Pengaturan email field untuk UI Design login screen Tambahkan label input dengan cara tekan T, lalu ketikkan “Email”.Atur font menjadi Rubik, font weight Medium dan font size 15.Ubah warna label menjadi #FFFFFF.Tambahkan text dengan cara menekan T pada keyboard, lalu ketikkan “Email” sebagai placeholder untuk input field.Atur font menjadi Rubik, font weight Regular dan font size 15.Terapkan auto layout dengan cara pilih text “Email” lalu tekan Shift + A pada keyboard.Atur menjadi Horizontal layout dan beri space between 12.Atur posisi text pada auto layout menjadi Align Left.Atur horizontal padding dan vertical padding menjadi 16.Ubah width menjadi Fixed 382 dan height Fixed 54.Ubah nama frame auto layout menjadi “Input field”.Ubah warna Fill Input field menjadi #313131.Beri radius 8.Ubah horizontal resizing pada placeholder text “Email” menjadi Fill container.Masukkan icon email, lalu taruh pada bagian kiri.Ubah warna icon dan text menjadi #838383.Terapkan auto layout pada label “Email” dengan Input field.Ubah nama auto layout menjadi “Email input”.Ubah menjadi Vertical layout lalu beri vertical spacing 8.Posisikan Email input dibawah Headline dengan jarak 40 dan jarak dari kiri 24. 6. Buat Password Input Field Pengaturan password field untuk UI Design login screen Lakukan hal yang sama seperti membuat Email Input Field.Ubah nama auto layout menjadi “Password input”Pada Input field component Password input, tambahkan icon mata, lalu letakkan pada sebelah kanan dan ubah warna icon menjadi #FFFFFF.Posisikan Password input dibawah Email input dengan jarak 16. 7. Buat Login Button Pengaturan tombol login untuk UI Design login screen Tambahkan text dengan cara menekan T pada keyboard, lalu ketikkan “LOGIN”.Atur font menjadi Rubik, font weight SemiBold dan font size 15.Terapkan auto layout dengan cara pilih text lalu tekan Shift + A pada keyboard.Atur posisi text pada auto layout menjadi Align Center.Atur horizontal padding dan vertical padding menjadi 16.Ubah width menjadi Fixed 382 dan height Fixed 54.Ubah nama auto layout menjadi “Login button”. Pengaturan warna pada tombol login untuk UI Design login screen Ubah tipe warna Fill Login button menjadi Linear.Ubah warna dari kiri ke kanan #3B7CFB, #9F56EC, #FF31DE dengan opacity 100%.Ubah warna Fill text “LOGIN” menjadi #FFFFFF.Ubah radius Button menjadi 8.Posisikan Login button dibawah Password input dengan jarak 24 dan dari kiri 24. 8. Buat Divider Pengaturan divider atau pembatas untuk UI Design login screen Tambahkan text “or” ke dalam frame, lalu atur font menjadi Rubik, font weight Regular, dan font size 15.Buat dua garis dengan menggunakan Pen atau dengan menekan P pada keyboard dengan masing-masing panjang 150.Pilih text “or” dan dua garis, lalu terapkan auto layout dengan cara tekan Shift + A pada keyboard lalu ubah nama auto layout menjadi “Divider”.Atur posisi layout menjadi Align center.Atur menjadi Horizontal layout, lalu beri horizontal spacing 24.Ubah width Divider menjadi 382.Pilih dua garis yang sudah dibuat, atur width nya menjadi Fill container.Posisikan text “or” di tengah, antara dua garis.Ubah Fill warna garis dan text “or” menjadi #838383.Posisikan Divider dibawah Login button dengan jarak 24 dan dari kiri 24. 9. Buat Social Buttons Pengaturan tombol login alternatif untuk UI Design login screen Tambahkan text dengan cara menekan T pada keyboard, lalu ketikkan “Google”.Atur font menjadi Rubik, font weight Regular dan font size 15.Terapkan auto layout dengan cara pilih text lalu tekan Shift + A pada keyboard.Ubah nama auto layout menjadi “Google button”.Atur posisi text pada auto layout menjadi Align Center.Atur menjadi Horizontal layout dan beri space between 12.Atur horizontal padding dan vertical padding menjadi 16.Ubah width menjadi Fill container dan height Fixed 54.Ubah warna text menjadi #FFFFFF.Ubah Fill warna auto layout menjadi #313131.Ubah radius menjadi 8.Tambahkan icon Google, lalu taruh disebelah kiri.Lakukan hal yang sama untuk membuat Facebook button. Pengaturan social button untuk UI Design login screen Pilih Google button dan Facebook button lalu terapkan auto layout dengan cara tekan Shift + A pada keyboard.Ubah nama auto layout menjadi “Social buttons”Atur menjadi Horizontal layout, lalu beri space between 16.Atur width Social buttons menjadi Fixed 382.Posisikan Social buttons dibawah Divider dengan jarak 24 dan jarak dari kiri 24. 10. Buat Register Link Pengaturan link register untuk UI Design login screen Tambahkan text “Don’t have an account?” ke dalam frame, lalu atur font menjadi Rubik, font weight Regular, dan font size 15 lalu beri warna #FFFFFF.Tambahkan text “Register” ke dalam frame, lalu atur font menjadi Rubik, font weight SemiBold, dan font size 15lalu beri warna #F237E0.Terapkan auto layout pada text “Don’t have an account?” dan “Register”, lalu ubah nama auto layout menjadi “Register link”.Atur menjadi Horizontal layout dan beri space between 8.Posisikan Register link di tengah dan beri jarak di atas Home Indicator 24. Closing Wah, terima kasih sudah mengikuti langkah-langkah untuk mendesain login screen nya dengan baik. Semoga bermanfaat ya. See you on the next tutorial 👋.

Banyak pilihan tools atau software yang digunakan untuk keperluan mendesain seorang UI/UX Designer. Pemilihan toolsini sangatlah penting karena dapat mempengaruhi cara kerja antara desainer dengan developer dan juga dengan klien. Beberapa tahun belakangan ini, tools yang populer digunakan yaitu Adobe XD dan Figma, namun kepopuleran Adobe XD semakin menurun dan banyak para desainer yang beralih dari Adobe XD menggunakan Figma sehingga membuat Figma menjadi tools andalan pertama yang digunakan para UI/UX Designer. Lalu apa saja kelebihan Figma daripada tools lain terutama Adobe XD. 5 Poin Penting Kenapa Figma Lebih Baik Dari Adobe XD Berikut 5 poin penting kenapa Figma lebih baik dari pada Adobe XD: 1. The Free Plan Figma Free Plan Sama seperti tools yang lainnya, Figma juga memiliki Plans atau paket yang ditawarkan kepada para penggunanya dalam menggunakan Figma. Pada Starter Plan (paket gratis) kita hanya dapat membuat 3 files, 3 pages pada 1 projects dengan unlimited editors. Namun hal itu tidak membatasi cara kerja kita karena Figma menyediakan unlimited file yang dapat kita simpan di Draft. Dan hal ini sangat cukup apalagi jika digunakan oleh seorang solo desainer. Sedangkan free plan pada Adobe XD hanya menyediakan kolaborasi untuk 2 co-editor, 1 link desain yang aktif dan penyimpanan cloud yang dibatasi sebesar 2GB. 2. Work on Any Platform Figma Work on Any Platform Figma dapat digunakan di platform manapun (Windows, macOS, dan Linux) dan juga dapat diakses melalui website sehingga kita tidak perlu menginstall terlebih dahulu untuk menggunakan Figma. Karena Figma merupakan software web-based maka kita dapat mengakses Figma dimanapun dan kapanpun selama kita memiliki koneksi internet. Sedangkan Adobe XD hanya tersedia untuk platform Windows dan MacOS berbasis desktop sehingga kita harus menginstall terlebih dahulu untuk menggunakan Adobe XD. 3. Figma Community Figma Community Figma memiliki komunitas yang begitu besar dan terus berkembang. Figma sendiri memiliki fitur Figma Community yang berisikan plugins, files desain, dan files lainnya yang di publikasikan oleh pengguna Figma baik oleh tim maupun perorangan yang dapat kita duplikat secara gratis untuk keperluan kita. Dibandingkan Figma, Adobe XD memiliki komunitas yang kecil. 4. Real Time Collaboration Figma Real Time Collaboration Dengan menggunakan Figma kita dapat berkolaborasi dengan siapapun hanya dengan cara membagikan link file yang dikerjakan. Kita juga dapat memberikan akses untuk edit atau view kepada pengguna lain yang ingin kita undang ke file Figma kita. Sehingga kita sebagai desainer bisa mengerjakan proyek dengan cepat karena dikerjakan bersama-sama diwaktu yang sama msekipun di tempat yang berbeda. Sedangkan Adobe XD tidak memiliki fitur ini. 5. Figma App Figma Mobile App Figma juga memiliki aplikasi yang berguna untuk melihat hasil desain kita pada beberapa device dan juga melihat hasil prototype yang sudah kita buat. Aplikasi ini juga dapat berjalan secara real time, sehingga ketika kita mengubah desain kita pada desktop secara otomatis tampilan desain kita pada aplikasi juga berubah. Dan pada update yang terbaru, kita juga dapat memberikan komentar melalui aplikasi sehingga kita tidak perlu membuka Figma melalui laptop atau komputer. Sayangnya, Adobe XD tidak memiliki aplikasi seperti ini. Kesimpulan Figma memiliki banyak keunggulan dibandingkan Adobe XD, maka dari itu tidak heran jika kepopuleran Adobe XD semakin menurun dan Figma menjadi tools andalan untuk para desainer. Terima kasih sudah membaca artikel ini. Silahkan bagikan artikel ini jika bermanfaat. 👋

Seiring bertumbuhnya digital maka kini sudah banyak perusahaan yang memutuskan untuk menjalankan bisnis mereka secara online untuk mempromosikan jasa atau produk yang mereka jual kepada customer (b2c) atau perusahaan lainnya (b2b). Untuk menciptakan website dan aplikasi mobile yang disukai oleh customer maka perusahaan tersebut membutuhkan peran seorang Freelancer UI UX Designer untuk bekerja sama dengan tim developer dalam membangun aplikasi yang user-friendly. Cara bekerja Freelancer UI UX Designer Cara kerja seorang freelancer ui ux designer Adapun beberapa tahap yang bisa dilakukan oleh seorang UI UX Designer untuk mendesain website dan aplikasi mobile yang baik, beberapa langkah tersebut tidak dapat dilewatkan apabila ingin membantu perusahaan menjangkau potential customer lebih banyak lagi. 1) User dan Market Research UI UX Designer akan melakukan research kebutuhan customer dan market terlebih dahulu, bisa dimulai dari melakukan competitor analysis dari perusahaan yang sejenis sehingga bisa belajar design website/aplikasi mobile dari competitor tersebut. 2) Pembuatan low-fidelity wireframe Setelah berhasil melakukan riset dan memiliki informasi yang penting untuk diletakkan pada website dan aplikasi mobile, maka selanjutnya UI UX Designer bisa mulai membuat beberapa wireframe yang terdiri dari layout, typography, content, dan flow dari website atau aplikasi tersebut. Wireframe pertama oleh freelancer ui ux designer Wireframe tersebut akan digunakan untuk berkolaborasi dengan tim developer dalam membangun aplikasi dan website menjadi lebih selaras dan sesuai dari core business pada perusahaan tempat kita bekerja. 3) Membuat sebuah prototype Prototype sangat penting dibuat oleh UI UX Designer untuk memvalidasi aplikasi atau website tersebut kepada calon pengguna yang sudah ditetapkan di awal, dari melakukan usability-testing maka kita akan mendapatkan feedback untuk meningkatkan website atau aplikasi mobile. Selain itu juga Prototype bisa digunakan untuk menjelaskan kepada tim developer tentang bagaimana cara aplikasi dan website kita bekerja nantinya, sehingga tim developer bisa memulai perancangan database dan server. Tools utama sebagai Freelancer UI UX Designer Sebagai seorang UI UX Designer, apabila kita ingin bersaing dengan freelancer lainnya maka kita juga perlu mempelajari tools yang sedang popular demi memberikan pelayanan yang baik dan sesuai dari kebutuhan projek yang akan kita kerjakan. Beberapa tools yang akan saya sharing pada kali ini adalah tools yang popular dan wajib kita pelajari mulai dari dasar sampai dapat membangun projek pertama kita. Figma Figma hadir sejak beberapa tahun lalu dan sampai detik ini masih menjadi sofware popular para ui ux designer maupun developer, dengan Figma kita tidak perlu download dan melakukan proses instalasi, hanya perlu buka official website Figma maka kita bisa langsung bikin projek design baru bersama dengan tim lainnya. Maze Maze dapat membantu para ui ux designer untuk memvalidasi design website dan aplikasi yang telah dibuat menggunakan Figma sebelumnya, pada Maze, kita bisa membuat user story dan goal yang kita harapkan ketika pengguna menggunakan aplikasi dan website kita ke depannya. Alur belajar berkarir sebagai Freelancer UI UX Designer Well, jika kamu tertarik untuk memulai karir sebagai Freelancer UI UX Designer, di sini saya akan berikan langkah-langkah sederhananya untuk bisa memulai belajar saat ini juga. Alur belajar untuk berkarir sebagai freelancer ui ux designer 1) Mempelajari graphic design Untuk menjadi designer yang hebat maka kita perlu mengenal beberapa pondasi dari graphic design seperti color, typography, layout, grid system, iconography, dan lainnya. Saya sarankan kamu mempelajari ilmu graphic designer terlebih dahulu. 2) Belajar cara melakukan user research Jangan design hanya demi hasilnya cantik dan menarik saja, tapi juga perlu sesuai dengan kebutuhan pengguna target dari aplikasi atau website kita. Lakukan user research sederhana seperti melakukan interview orang yang latar belakangnya sesuai dengan target dari perusahaan kita. 3) Belajar cara berkolaborasi dengan developer Apabila design sudah siap kita lanjutkan kepada tahap development maka waktunya berkolaborasi dengan developer, proses ini biasanya dinamakan dengan design handoff, tujuan utamanya adalah menjelaskan kepada developer bagaimana aplikasi atau website kita bekerja. Mencari projek pertama Freelancer UI UX Designer Well, sebelumnya kita sudah mempelajari karir Freelancer UI UX Designer dan bagaimana cara kerja serta langkah-langkah awal belajarnya. Apakah kamu sudah siap untuk mencari projek pertama sebagai Freelancer UI UX Designer? let’s get started. Upwork Mayoritas Freelancer UI UX Designer di Indonesia lebih sering menggunakan website Upwork dalam menemukan klien dan projek pertama mereka, pada website tersebut kita bisa mulai mendaftarkan diri sebagai Freelancer dan melengkapi informasi pekerjaan yang akan kita kerjakan nantinya, misalnya Freelancer UI UX Designer. Dribbble Berbeda dari Upwork, pada website Dribbble kita bisa memposting seluruh portfolio kita sebagai seorang Freelancer UI UX Designer, pada kolom deskripsi kita bisa menjelaskan alasan utama kita mendesign projek tersebut sehingga bisa menarik perhatian dari orang-orang yang melihat portfolio kita. Pada website Dribbble, kita berkesempatan untuk sering dikontak oleh klien yang memperhatikan profile designer kita, oleh karena itu saya sarankan untuk selalu update portfolio terbaru kita pada website Dribbble untuk mendapatkan pekerjaan pertama sebagai Freelancer UI UX Designer. Memulai menjadi Freelancer UI UX Designer Awalnya memang sulit terlebih lagi ketika kita belum punya background graphic design, namun apabila kita rajin belajar dan mengikuti alur belajar Freelancer UI UX Designer buatan oleh mentor-mentor ahli di BuildWith Angga, maka akan lebih mudah lagi. Pelajari fundamentalnya, pahami tool-tool dari software Figma dan Maze, bangun mini project yang bisa dijadikan sebagai portfolio pertama kita sebagai Freelancer UI UX Designer, dan semoga beruntung.

Teknologi Artifficial Intelligence (AI) atau Kecerdasan Buatan memungkinkan “mesin” untuk membaca dan belajar dari pengalaman (experience) sehingga bisa melakukan tugas seperti manusia. Saat ini AI tidak hanya diaplikasikan pada hal-hal serius seperti pada mobil yang dapat mengendarai sendiri dengan teknologi AI, tetapi juga untuk hal-hal menyenangkan/fun yang tentunya tetap membantu kerja kita sehari-hari. 5 Website AI Terbaik Untuk Membantu Kerja Designer Teknologi AI ini juga sudah banyak digunakan dalam dunia design untuk membantu kerja para designer. Dan berikut adalah 5 Website dengan teknologi AI untuk membantu efisiensi kerja Designer: 1. AutoDraw Website AI AutoDraw Autodraw membantu designer membuat gambar coretan menjadi gambar yang lebih baik serta menyediakan rekomendasi gambar dari coretan yang kita buat. Website ini bisa dimanfaatkan untuk membuat design icon, jika membutuhkan bentuk yang lebih spesifik dan juga menjadi alternatif apabila skill dalam menggambar digital kita masih terbatas. 2. Dall.E 2 Website AI Dall.E 2 Dall.E 2 dapat membuat gambar dari deskripsi yang diperintahkan. Apabila designer membutuhkan visualisasi dari design project yang ada dan tidak menemukan di website penyedia gambar, kita bisa mencoba website tersebut dan menuliskan deskripsi gambar seperti apa yang diinginkan. Kini, website Dall.E 2 telah dikembangkan dan memungkinkan penggunanya mengedit gambar dengan berbagai cara. Fitur ini membantu banyak pengguna terutama yang bekerja di industri kreatif seperti graphic designer dan photographer. 3. Astria Website AI Astria Astria adalah image generator yang fungsinya sama seperti Dall.E 2 namun dapat membuat visualisasi dari gambar atau foto asli yang di-input menjadi gambar ‘baru’ dengan berbagai style. 4. Letsenhance.io Website AI Letsenhance.io Letsenhance.io adalah salah satu web photo-enhancer terbaik. Dapat membantu designer untuk menyempurnakan warna, resolusi foto, dan memperbaiki foto produk secara otomatis. Letsenhance.io juga dapat mendeteksi tipe gambar (pemandangan, manusia, dan ilustrasi kartun) dan dapat digunakan untuk memperbesar ukuran gambar tanpa menurunkan kualitas serta tetap menjaga detail-detail ketajaman gambar. 5. Fontjoy Website AI Fontjoy Fontjoy membantu designer menentukan kombinasi font yang cocok untuk digunakan dalam design project. Dalam mengerjakan design project, seringkali para designer bingung sehingga membuang waktu mereka untuk memilih kombinasi font yang akan digunakan. Dengan bantuan Fontjoy, kerja para designer akan lebih mudah dan efisien karena sudah tersedia tampilan font yang ingin dikombinasikan tanpa harus mencoba dan membandingkannya di halaman kerja design project. Terima kasih sudah membaca artikel ini dan jangan lupa bagikan artikel ini jika bermanfaat.

Di dunia design digital kita bisa menggunakan ilustrasi untuk menyampaikan seluruh tujuan dari produk, karya atau layanan tanpa harus menulis paragraf panjang tentang hal itu, sedangkan icon adalah gambar yang mewakili suatu objek atau fungsi. Banyak illustrator memberikan banyak karya ilustrasi gratis yang dapat diakses melalui berbagai website penyedia ilustrasi. 5 Website Download Ilustrasi & Icon Gratis Untuk Design Di bawah ini, ada beberapa website untuk download berbagai ilustrasi & icon gratis yang bisa kamu gunakan: 1. Icons8 Website download ilustrasi Icons8 Website Icons8 menyediakan berbagai pilihan icon dan ilustrasi yang cukup lengkap dengan berbagai kategori. Untuk icon bahkan kamu bisa memilih icon style seperti pada iOS atau Windows. Pada website ini ada berbagai fitur yang memudahkan kamu dalam men-download assets yang dibutuhkan. Kamu juga dapat mengganti warna, ukuran pixel hingga mengubah beberapa komponen sebelum diunduh. 2. Freepik Website download ilustrasi Freepik Freepik adalah website ilustrasi yang banyak diminati, kamu bisa menemukan berbagai assets (Foto, ilustrasi, icons, file PSD dan Ai) berkualitas tinggi. Konten di website ini sudah diunduh lebih dari satu miliar kali dan menjadi situs gambar yang populer dan banyak digunakan oleh freelancer. 3. Iconfinder Website download ilustrasi Iconfinder Di Iconfinder kamu bisa menemukan berbagai pilihan icon, vector 3D hingga ilustrasi. Selain itu, kamu juga bisa dengan mudah mengganti warna pada icon yang dipilih. Tersedia juga fitur integrasi Iconfinder API yang membantumu untuk mengakses koleksi icon dan grafis yang menarik. Website ini juga menyediakan layanan untuk para creator dan designer untuk menjadi kontributor platform mereka sehingga kamu bisa mendapat penghasilan tambahan. 4. Reshot Website download ilustrasi Reshot Reshot sendiri adalah website gambar ilustrasi dan icon gratis yang berbasis komunitas. Reshot menyediakan banyak koleksi icon dan ilustrasi, kamu bisa men-download secara instant dan gratis dengan berbagai format tanpa khawatir dengan lisensi untuk komersial. 5. IconScout Website download ilustrasi IconScout IconScout menyediakan hingga 5,7 juta design assets seperti ilustrasi 2D & 3D, icons, dan lottie animations. Pada website IconScout memiliki fitur sama seperti website-website yang disebutkan sebelumnya yaitu dapat mengganti warna dan background assets sebelum men-download nya. Assets yang di-download dapat diimplementasikan di berbagai platforms. Terima kasih sudah membaca artikel ini. Silahkan bagikan artikel ini jika bermanfaat dan baca artikel kita yang lain ya.. 👋

Ketika kita mengerjakan design project sering kali membutuhkan gambar atau stock image untuk melengkapi design kita agar lebih menarik, dengan kualitas gambar yang tinggi. Stock Image saat ini sudah banyak ditemukan di internet, namun kita perlu memperhatikan jenis lisensi dari stock image yang diunduh apakah dapat digunakan untuk komersial atau tidak. 6 Website Penyedia Stock Image Gratis Untuk Design Sebagian stock image di internet memiliki persyaratan hak cipta dan harus membayar royalti untuk keperluan komersial atau dapat memodifikasi karya yang diunduh. Ada berbagai website yang menyediakan stock image bebas royalti. Berikut di antaranya: 1. Freepik Tampilan Website Freepik penyedia stock image gratis Di Freepik kamu bisa menemukan berbagai assets (Foto, vector, icons, file PSD dan Ai) berkualitas tinggi. Konten di website ini sudah diunduh lebih dari satu miliar kali dan menjadi situs gambar yang populer dan banyak digunakan oleh freelancer. 2. Unsplash Tampilan Website Unsplash penyedia stock image gratis Kamu dapat mengunduh berbagai pilihan gambar di Unsplash secara gratis dengan berbagai ukuran sesuai kebutuhan. Setiap gambar yang dipublikasikan di Unsplash dilisensikan di bawah Creative Commons Zero (CC0), yang memberi kebebasan kepada pengguna untuk menyalin, memodifikasi, mendistribusikan, dan menggunakan semua gambar tanpa izin atau atribusi. 3. Pixabay Tampilan Website Pixabay penyedia stock image gratis Pixabay merupakan website yang sangat lengkap karena menyediakan jutaan gambar, vector, ilustrasi bahkan video dan sound effects. Pixabay juga dirilis di bawah lisensi Creative Commons (CC0) ke dalam domain publik. 4. Burst Tampilan Website Burst penyedia stock image gratis Burst adalah website yang didirikan oleh Shopify. Burst dibuat dengan tujuan untuk membantu para entrepreneurs baik dalam membuat website, campaign marketing, dan produk yang lebih menarik. Kebanyakan foto ini diambil oleh tim Burst dan Shopify sendiri. Website ini juga di bawah lisensi Creative Commons (CC0). 5. Pexels Tampilan Website Pexels penyedia stock image gratis Pexels memiliki ribuan gambar dan video gratis yang dapat diunduh, karena di bawah lisensi Creative Commons (CC0). Dari tampilannya, Pexels punya kemiripan dengan web Unsplash. 6. Picjumbo Tampilan Website Picjumbo penyedia stock image gratis Website Picjumbo tidak hanya menyediakan stock image gratis, namun juga menyediakan stock image premium untuk penggunya yang berlangganan (membership). Nah, itu dia 6 website penyedia stock image gratis untuk design, kita bisa mengunduh foto dan gambar gratis tanpa perlu pusing memikirkan pelanggaran hak cipta konten. Terima kasih dan semoga artikel ini bermanfaat.

Saat ini design tool Figma banyak digunakan oleh para Designer, baik oleh para Product Designer, UI/UX Designer dan bahkan Graphic Designer. Figma memiliki banyak plugin yang dapat digunakan untuk membantu kita bekerja lebih cepat dan efisien. Disini saya akan berbagi bagaimana cara mengunakan plugin “Background Remover” untuk membantu kamu bekerja lebih cepat dalam menghapus background gambar. Cara Menggunakan Plugin Figma Untuk Hapus Background Gambar Berikut cara menggunakan plugin Background Remover di Figma: 1. Buka File Design atau Buat File Design Baru Tampilan file baru pada Figma Plugin bisa dijalankan pada file design yang sedang kamu kerjakan atau kamu dapat membuat file design baru. 2. Tambahkan gambar Menambahkan gambar Tambahkan gambar yang akan dihapus backgroundnya. Kamu bisa menambahkan gambar dengan cara klik logo Figma dibagian kiri > File > Place image (Ctrl/Cmd+Shift+K) atau kamu dapat drag gambar ke file project design kamu. 3. Menjalankan Plugin Background Remover Menjalankan plugin Kamu bisa mencari plugin tersebut dengan klik kanan pada gambar > Plugins > Find more plugins (Apabila belum pernah menjalankan plugin tersebut). Plugin Icons8 Background Remover Lalu kamu bisa ketik “Remove background” > Run > Remove Background untuk menjalankan plugin. Ada banyak jenis plugin background remover yang serupa, namun pada artikel ini saya menggunakan plugin ‘Icons8 Background Remover’. 4. Menunggu Plugin bekerja untuk menghapus background Proses loading plugin background remover Dalam proses running plugin tersebut, lamanya waktu loading tergantung dengan ukuran atau resolusi gambar yang dipilih. Dan plugin di Figma ini memiliki batas ukuran gambar yaitu 5 MB. Apabila kamu memilih gambar dengan ukuran lebih dari 5 MB, akan muncul peringatan seperti ini: Peringatan ukuran gambar terlalu besar Untuk hasil akhirnya akan seperti ini: Hasil akhir menggunakan plugin background remover Background menjadi transparan Background pada gambar tersebut sudah terhapus dengan rapi. Tips: Untuk hasil ‘potongan’ yang lebih rapi kamu bisa menggunakan gambar dengan background/latar belakang yang polos, tidak terdapat bayangan atau gradasi. Terima kasih telah membaca artikel ini dan semoga bermanfaat!

Goals Bekerja sama dengan ui/ux designer, software engineer, dan marketing untuk menciptakan produk yang bermanfaat untuk masyarakat. Dimulai dari melakukan research, prototyping, dan melakukan usability-testing untuk validasi ide. Responsibilities Melakukan proses Design ThinkingMembuat prototype sederhanaMelakukan usability-testingBelajar ilmu bisnis dan startup Requirements Telah mengerjakan challenge sederhana yang tersedia di bawahTerbiasa menggunakan FigmaBersedia magang selama 3-6 bulan ke depanSedang tidak bekerja full-time/part-time/freelancerSedang tidak sekolah SMA/SMKJika sedang kuliah maka minimal semester 4Fresh graduate (SMK/kuliah) boleh apply magangSudah mengikuti minimal 1 kelas Premium (untuk memastikan bahwa kamu telah terbiasa menggunakan fitur-fitur di website BWA). Benefits Akses seluruh kelas PremiumBelajar hal baru pada sebuah real-world projectUang gaji atau saku bulananProgram pelatihan berbayar di luar program BuildWith Angga Challenge Riset 1 website untuk belajar online misalnya Skillshare.comBuatlah tabel perbandingan antara website tersebut dengan buildwithangga.comTulis tabel tersebut pada Notion.so dan siapkan link yang dapat diakses secara publikKirim link tersebut melalui email di bawah How to Apply [Closed] Siapkan Resume (CV) & Hasil test (berupa link Notion public ) dengan rapihIsi subject email dengan Magang Jr Product Manager 2023Kirim lamaran ke email [email protected] semoga menjadi tercepat dan terbaik Lowongan dibuka pada tanggal 6 Jan 2023 dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok, pantau terus Instagram BuildWith Angga untuk informasi terbaru terkait magang. Terima kasih.

Ketika mengerjakan projek dari klien atau dari perusahaan tempat kita bekerja maka sering sekali kita diminta untuk menyelesaikan dengan cepat, mengerjakan projek dengan cepat dapat menghasilkan projek yang kurang baik. Lalu bagaimana caranya agar kita bisa bekerja lebih cepat sebagai UI/UX designer tanpa harus mengurangi kualitas dari projek tersebut? well, saya akan sharing ilmu tersebut. 1) Menggunakan Metode Design Sprint Design Sprint dapat membantu kita untuk menyelesaikan MVP pada projek tersebut yang di mana kita lebih fokus kepada core business tentang bagaimana kita dapat menyelesaikan masalah pengguna dan menghasilkan profit dari segi bisnis. 2) Menggunakan UI Kit Design Template Perusahaan seperti Shayna Kit telah menyediakan ratusan template UI design yang bisa kita gunakan dengan mudah, semua projeknya menggunakan software gratis yaitu Figma, kita hanya perlu download template yang berkategori sama dengan bisnis kita lalu membuat modifikasi bedasarkan kebutuhan pengguna. 3) Lakukan Usability-Testing Terkadang perfectionist dapat membunuh waktu, usaha, dan goal yang kita miliki saat ini ketika sedang mendesain sebuah projek website atau mobile app. Setelah kita fokus menggunakan metode Design Sprint dan menggunakan template dari Shayna Kit, kita bisa coba membuat prototype dan melakukan uji coba pada pengguna yang sekiranya cocok dengan aplikasi kita. Cepat Bukan Berarti Hasilnya Tidak Bagus Well, dikarenakan sudah banyak resources yang bisa kita gunakan sebagai UI/UX designer untuk menghasilkan projek yang cantik dan menarik serta memberikan UX yang baik dengan waktu yang cepat, kini sudah tidak alasan kembali untuk menunda-nunda pekerjaan.