Hallo semuanya...
Dimasa pandemi seperti ini, kita dituntut untuk memanfaatkan teknologi untuk berbagai aktivitas yang kita kerjakan termasuk perkuliahan. Di Channel ini, sebagai Akademisi dan Praktisi di bidang IT, saya membagikan materi kuliah, seminar dan content edukasi lainnya untuk dapat di konsumsi oleh Mahasiswa saya khususnya juga untuk teman-teman lain yang ingin ikut belajar.
Semoga content di channel ini bisa memberikan manfaat yang luas untuk kita semua. Aamiin 😊
Пікірлер
Terimakasih banyak kak gina dan pak Rian dengan menonton video ini kita jadi paham dan mengerti tentang apa itu SQA ini, yang biasanya sering di lupakan bagi para programmer pemula Yang sering menyoroti front end serta back end, tetapi SQA ini sangatlah penting juga selain front end dan back end. Dengan mengetahui SQA ini kita dapat memastikan bahwasanya produk kita ini memiliki kualitas yang baik atau tidak, apakah ada bug atau tidak yang dapat fix sebelum produk ini publikasikan
Menurut ku pematerian ini sangat menarik apalagi terkhusus bagi orang orang yg ingin belajar di bidang software, dan pematerian ini didapat Target pasar/pengguna dari aplikasi yang akan dibuat Kesesuaian tampilan aplikasi dengan design/prototipe.Kemudahan dalam mengoperasikan aplikasi (lokasi tombol, warna, penggunaan menu).
materi yang dibawakan seru karena suatu hal yang baru saya dengar, bahwa jika ternyata dalam pembuatan perangkat lunak itu ada suatu pengawasan terhadap kualitasnya yaitu SQA. Dengan adanya SQA ini dapat mencegah terjadinya kesalahan atau masalah dalam perangkat lunak sebelum atau sesudah dibuat, sehingga pembuat tidak hanya asal asalan tetapi mengedepankan kepuasan user dalam pelayanan perangkat lunak yang berkualitas tinggi sesuai harapan mereka.
Pemateriannya keren, topik yang dibahas juga menarik mengenai SQA ini. Sebuah posisi yang bisa dibilang cukup penting selain dari front end dan back end. Karena ketika sebuah program atau produk selesai dibuat maka haruslah ada yang memastikan atau menguji bahwa produk tersebut berkualitas dan bisa berjalan dengan baik dari segala sisi
Luar biasa ilmunya sangat bermanfaat sekali kak, karena dengan video ini saya menjadi paham perihal Software Quality Assurance (SQA). Selain itu juga, saya berpendapat bahwa Software Quality Assurance (SQA) merupakan suatu disiplin dalam rekayasa perangkat lunak yang bertujuan untuk memastikan bahwa produk perangkat lunak yang dihasilkan memenuhi standar kualitas yang ditentukan. SQA melibatkan serangkaian proses, aktivitas, dan tindakan yang dirancang untuk memastikan bahwa perangkat lunak memenuhi persyaratan fungsional dan non-fungsional, serta sesuai dengan standar pengembangan yang ditetapkan. Software Quality Assurance adalah elemen kritis dalam pengembangan perangkat lunak, membantu memastikan bahwa perangkat lunak dapat dipercaya, berkinerja baik, dan memenuhi kebutuhan pengguna. Terima kasih Pak Rian dan Kak Gina
keren bangettt pemateriannya, menurut saya Software Quality Assurance (SQA) memang praktik yang krusial sih dalam pengembangan perangkat lunak karena untuk memastikan bahwa produk yang dihasilkan memiliki tingkat kualitas yang tinggi.
makasih ka keren banget materinya dan detail juga penyampaiannya
Nama : Mohamad FIkri NIM : 2209847 Kelas : 3B PSTI 2022 Dari video tersebut saya menjadi lebih tau tentang slicing UI, dan dengan developer handoff, akan sangat mempermudah developer dalam mengkonversi desain UI ke kode front end (HTML, CSS, dan JS).
Nama: Sri Rahayu NIM: 2204184 Kelas: 3B PSTI Video di atas menjelaskan tentang bagaimana teknik slicing ui design dari figma di konversi ke bentuk HTML, CSS dan JavaScript. Pembahasan pertama yaitu tentang design tampilan login lalu menjelaskan kode program yang dipakai untuk membuat tampilan login tersebut. Menyenangkan bisa mengetahui teknik slicing ui design ini👍🏻
Nama : Salsabila Aulia Choirunisa NIM : 2207022 Kelas : 3B PSTI Dari video ini saya mengetahui apa itu slicing desain yang merupakan cara mengkonversi desain dari figma ke kode html, css, dan Javascript. Pembahasannya seru jadi bisa mengetahaui bagaimana cara mengkonversinya, bukan hanya itu disini juga menjelaskan bagaimana cara membuat design web agara sama dengan desaign dari figma menggunakan handoff.
Nama : Annisa Nur Kholifah Suryaningrum NIM : 2204943 Kelas : 3B PSTI Dari video diatas, saya dapat memahami bagaimana caranya menkonversi desain yang dibuat dari figma ke dalam HTML, CSS, dan Javascript. Menjelaskan sedikit tentang github. Dan saya mengetahui cara untuk menentukan warna tampilan yang senada contohnya menggunakan website ColorSpace.
Nama: Jasmine Nayla Hafiezh NIM: 2209681 Kelas: 3A PSTI Video ini memberikan wawasan baru untuk saya tentang HTML, CSS, dan JavaScript serta cara mengkonversi desain UI dari Figma ke kode HTML, CSS, dan JavaScript, dengan fokus pada menu login. Video juga mencakup konsep design token dan komponen, penggunaan Figma dalam desain, serta pentingnya komunikasi antara desainer dan pengembang. Video ini juga memberikan wawasan komprehensif tentang proses konversi desain UI dan menggarisbawahi pentingnya pembelajaran berkelanjutan dalam desain UI dan pengembangan front-end.
Astuti Solihatunnisa 2208980 3B PSTI Pada materi ini menjelaskan bahwa, pentingnya merancang tampilan login sebagai elemen utama dalam desain aplikasi atau situs web yang harus didesain terlebih dahulu. Alat desain yang digunakan ialah Figma karena memungkinkan kolaborasi tim yang baik, serta memudahkan untuk mengkonversi menjadi HTML, CSS dan JavaScript. Mengenai pengembangan website, struktur folder, dan alat yang digunakan, seperti Visual Studio Code. Validasi sangat penting antara desain dan implementasi serta penggunaan CSS variabel dan teknologi flexbox dalam pengembangan web. Untuk mendukung pengembangan website, menyediakan sumber daya tambahan dalam bentuk repository.
NIM : 2201280 Nama : Triana Dewinta Sari Kelas : 3B PSTI Video ini memberikan panduan komprehensif untuk mengonversi desain UI dari Figma ke HTML, CSS, dan JavaScript dengan teknik slicing. Ini adalah sumber yang berguna bagi siapa pun yang ingin mempelajari cara membuat halaman web dari desain UI. Tutorial ini mencakup semua langkah yang diperlukan dan memberikan penjelasan dan contoh yang jelas. Seperti pengantar figma dan desain UI, cara mengekspor aset dari Figma, menyiapkan file HTML, membuat bagian header, membuat bagian konten utama, membuat bagian footer, menata HTML dengan CSS juga menambahkan interaktivitas dengan JavaScript
Meyda Al Zahra 2208981 3B PSTI Video ini membahas tentang bagaimana mengkonversi dari design designer kedalam bentuk Frontend html CSS dan javascript. Dengan menggunakan tools design khusus UI yaitu Figma, karena banyak keuntungan didalam Figma ini dari mulai komponen, layouting lebih mudah. Ada komunikasi yang harus terjaga antara desainer dan juga developer biasa disebut developer Handoff. Didalam developer Handoff ada 2 standar yaitu Design token yang berisi kumpulan Basic standarisasi yang dipakai seperti penggunana warna dan lainnya. Kemudian ada component yang berisi style text, ukuran text dan lainnya. Untuk khusus designer hanya membuat sampai membuat coding tampilannya yaitu bagian html dan CSS saja, sedangkan untuk Frontend developer lebih berfokus ke Fungsionaliti yaitu mengatur html, CSS dan javascript untuk fungsionalnya. Saya juga lebih mengetahui apa itu dribbble yang sangat membantu dalam proses pembuatan suatu project UI design.
Jasmine Lidwina Hanny Hedyana Putri 2203680 3B PSTI Dari video penjelasan ini, saya belajar cara mengkonversi desain dari seorang desainer ke dalam bentuk frontend HTML, CSS, dan Javascript. Proses ini dibahas menggunakan Figma sebagai alat bantu desain, dan contohnya diilustrasikan pada menu login. Selain itu, video ini juga menjelaskan penggunaan GitHub sebagai alat kolaborasi yang memudahkan berbagi proyek desain.
Nama : Yosafatur Aprendy Panjaitan NIM : 2202205 Kelas : 3A PSTI Didalam video tersebut menjelaskan tentang mengkonversi UI Design dari Figma ke HTML, CSS, dan JavaScript. Itu adalah proses mengubah desain antarmuka pengguna (UI) yang dibuat di Figma menjadi kode HTML, CSS, dan JavaScript. Proses ini dapat dilakukan secara manual atau menggunakan plugin atau layanan pihak ketiga.
Nama: Diki Naufal NIM: 2209334 Kelas: 3A PSTI Dalam video ini, saya dapat belajar bagaimana cara mengambil desain antarmuka pengguna (UI) dari Figma dan mengonversinya ke dalam bentuk kode HTML, CSS, dan JavaScript yang fungsional. Ini memberi saya wawasan yang mendalam tentang bagaimana proses desain dan pengembangan web bekerja secara bersamaan.
Nama : Fitri Azzahra Hanifatunnisa NIM : 2204906 Kelas : 3B PSTI Dari pemaparan video diatas kita dapat mengetahui bagaimana proses mengubah desain UI yang dibuat dengan figma menjadi sebuah kode HTML, CSS, dan JavaScript yang dapat ditampilkan di browser web dengan langkah-langkah jelas dan lengkap. Adapun dari pemaparan tersebut kita jadi tau mengenai Bahasa komunikasi antara desainer dan developer yaitu developer handoff, dan adanya desain token yang menyimpan kumpulan style yang dipakai untuk mendesain yang akan memudahkan pengelolaan dan pembaruan gaya desain secara konsisten. Desain token dan developer handoff saling berhubungan karena desain token dapat membantu mempercepat dan mempermudah proses developer handoff. Dengan menggunakan desain token, desainer dan developer dapat berbicara dengan bahasa yang sama dan mengurangi waktu yang dibutuhkan.
Nama: Rizal Aglal Faozi NIM: 2203489 Kelas: 3A PSTi Seru banget videonya, bisa nih kayaknya abis nonton video ini slicing dari design ke html, css, javascript, terus ternyata ada figma hand-off yang bisa bantu dan mempermudah proses development tersebut
Nama: Gina Ummul Muti'ah NIM: 2209911 Kelas: 3B PSTI Pembahasan dalam vidio ini lebih berfokus tentang "slicing design". Slicing Design yaitu cara mengkonversi desain dari Figma ke kode HTML, CSS, dan JavaScript. Dan juga bagaimana caranya membuat web design dari figma menggunakan developer handoff yang fungsinya untuk mengetahui element penting yaitu jarak antar div atau span, jarak margin, jarak padding, agar saat membuat web nya sama atau sesuai dengan apa yang ada di figma.
Nama: Muhammad Sulthan Nabil Tursilo NIM: 2203603 Kelas: 3A PSTI Sangat menguntungkan terutama bagi mereka yang baru memulai. Di video ini mengenalkan HTML, CSS, dan JavaScript dengan penjelasan yang sangat mendetail. Saya menjadi lebih memahami cara mengubah desain antarmuka menjadi kode HTML, CSS, dan JavaScript untuk halaman login.
Nama : Melvi Cantika Kelas : 3B PSTI NIM : 2204830 Dari video diatas saya bisa mengetahui bagaimana mengkonversi desain ke dalam bentuk tampilan website menggunakan Html, CSS dan juga JavaScript. Dari video ini untuk design nya menggunakan figma dan untuk design yang dibuat yaitu menu tampilan halaman login. Bahasa komunikasi antara designer dan developer disebut developer hand off, untuk developer hand off mempunyai standar yaitu design token. Design token itu sendiri basic standarisasi style yang dipakai untuk membantu mengorganisir elemen desain. Dari video diatas juga kita belajar tentang alur mengkonversi dari membuat folder dan juga file di Html, CSS dan juga JavaScript hingga menampilkan hasil yang sudah dibuat . Dari video diatas juga diajarkan mengenai struktur pada Html, CSS dan juga JavaScript
Nama: Muhammad Musyaffa Nim: 2205326 Kelas: 3B PSTI Alhamdulilah sangat bermanfaat bagi seorang pemula. karena mengenalkan HTML,CSS, dan javascript yang sangat jelas dari awal. Video ini memberikan gambaran yang jelas untuk menggunakan html, css, dan javasript. selain itu juga mengajari kepada semua para developer yang pemula agar mengetahuinya mengenai figma, saya sangat menyukai video ini dari awal sampai akhir karena mengajarkan dari prosesnya sampai hasil akhir. bagi seorang web developer yang kesulitan bisa langsung menonton video ini karena disini diajarkan dari awal sampai akhir mengenai pembuatan html, css, javascript dan figma
Nama : Herfian Muhammad Nur Fattah Putra Setya Aji NIM : 2201002 Kelas : 3A PSTI Topik yang membahas metode untuk mengubah desain Figma menjadi kode HTML, CSS, dan JavaScript dengan teknik slicing untuk penggunaan di web server. Dalam prosesnya, melibatkan fungsi yang mengatur komponen-komponen gaya CSS dan menjelaskan komunikasi efektif antara desainer dan pengembang. Selain itu, dibahas juga sedikit tentang penggunaan GitHub dan Repository.
Nama : Rani Yuniar NIM : 2207021 Kelas : 3B PSTI Dari sini saya belajar dan mengetahui bagaimana cara mengubah figma menjadi kode HTML, CSS, dan JavaScript. Lalu Figma sebagai alat desain UI, yang merupakan alat desain antarmuka pengguna populer, ada alat desain lain seperti Adobe XD dan Sketch yang biasa digunakan oleh desainer UI. Selain itu, kita belajar tentang pentingnya memiliki struktur folder yang tepat sebelum memulai konversi, termasuk penggunaan folder "assets" untuk menyimpan gambar, font, dan konten terkait. Kita juga diberikan panduan langkah demi langkah untuk membuat tampilan login, mengatur font, warna, dan elemen input dengan HTML, CSS, dan JavaScript. Selain aspek teknisnya, video ini menekankan pentingnya komunikasi yang baik antara desainer dan pengembang front-end agar terhindari miskomunikasi selama proses konversi. Terakhir, Kita diperkenalkan kepada penggunaan GitHub sebagai alat kolaborasi yang memudahkan berbagi proyek desain. Memahami langkah-langkah ini memungkinkan kita untuk efisien mengubah desain Figma menjadi kode berfungsi dan menjaga kolaborasi yang lancar antara tim desain dan pengembang.
Nama : Moh Fauzan Fakhira Nasihin NIM : 2201322 Kelas : 3B PSTI Dari penjelasan video di atas, saya dapat mengetahui tools yang dapat kita gunakan untuk membuat sebuah desain UI yaitu Figma. Figma sering kali digunakan oleh para desainer UI karena dianggap lebih mudah ketika proses editingnya, namun selain Figma masih ada beberapa tools lain yang dapat kita gunakan untuk membuat desain UI seperti Adobe XD dll. Setelah melakukan layouting desain kita dapat memulai menerapkan desainnya pada HTML, dan CSS
Rochman Bambang Eko Saputro 2201108 3B PSTI Dari video ini saya menjadi tertarik untuk mendalami bagian front end development. Serta membuka mata saya karena masih banyak istilah istilah lainnya dalam pemrograman.
Nama: Amira NIM: 2202598 Kelas: 3A PSTI Video diatas dapat membantu para pemula yang ingin memahami HTML, CSS, dan JavaScript, serta bagaimana mengkonversi desain dari Figma ke kode HTML, CSS, dan JavaScript dengan menggunakan teknik slicing UI design. Konsep pembuatan halaman login juga sangat relevan dalam konteks era digital, dan pemahaman tentang cara mengimplementasikannya dengan HTML, CSS, dan JavaScript merupakan langkah penting dalam pengembangan web. Video diatas juga dapat menjadi sumber belajar untuk memahami cara merancang dan mengkodekan tampilan web.
Nama : Nabiilah Lintang Dadari NIM : 2204166 Kelas : 3B PSTI Dalam video dijelaskan mengenai HTML, CSS, dan Javascript dalam penggunaan yang lebih kompleks. Adapun penjelasan tentang bagaimana mengkonversi design dari Figma ke dalam HTML. Dan tentunya penggunaan Figma dalam Slicing UI mempermudah dan mencegah developer jika terjadi kekeliruan dalam pengerjaan.
Erlangga Aditia 2201742 PSTI 3B Banyak hal yang saya dapatkan dari 1 video ini mulai dari workflow dan istilah istilah dalam proses development sebuah web/aplikasi. Dengan praktik slicing secara langsung membuat saya lebih mudah memahami kode program baik html, css maupun javascript nya. Pokoknya sangat bermanfaat bagi yang ingin menjadi front end developer khususnya.
Arifal Muhamad Iqbal 2202397 3A PSTI Figma ini mencakup tata letak, warna, tipografi, elemen-elemen UI, dan interaktivitas yang mungkin ada dalam desain. Untuk penanaman file disarankan menggunakan nama yang mudah saja dan untuk memudahkan kecuali jika pengguna memiliki kreasi yang tinggi.
NIM: 2202830 Nama: Ikeu Herliana Kelas: 3A PSTI Video tersebut sangat membantu untuk mengonversi UI Design dengan figma ke HTML, CSS dan JavaScript. Bahasa komunikasi antara designer dengan developer biasanya disebut dengan Developer HandOff yang didalamnya terdapat Design Token berupa kumpulan standarisasi seperti kombinasi warna, heading, dan komponen. 3 topik utama yang dibahas yaitu CSS Variables, CSS Box Sizing, dan CSS Flexbox. CSS Variables memudahkan saat menginisialisasi variabel CSS, salah satunya untuk memberi warna yang sama berulang kali dengan mendeklarasikan dalam selector !root. CSS Box Sizing mengatur border dan padding dalam setiap tinggi dan lebar elemennya. Sedangkan, CSS Flexbox berguna untuk mengatur tata letak dan penempatan elemen-elemen dalam container dengan cara yang fleksibel dan efisien.
Nama : Reza Putra Ramadhan NIM : 2200086 Kelas : 3A - PSTI Video ini menjelaskan bagaimana mempelajari proses konversi desain UI dari Figma ke HTML, CSS, dan JavaScript. Video ini memberikan gambaran yang jelas dan ringkas tentang langkah-langkah yang perlu dilakukan, serta tips dan trik yang bermanfaat. Secara khusus, saya sangat menyukai penjelasan tentang penggunaan Figma untuk desain. Video ini menunjukkan cara menggunakan Figma untuk membuat mockup desain yang realistis dan interaktif. Selain itu juga, penjelasan tentang teknik styling yang menarik menggunakan CSS. Video ini memberikan contoh-contoh yang jelas tentang cara menerapkan berbagai properti CSS untuk membuat elemen UI yang menarik dan responsif.
Nama : Fairuz Zulia Muntaha NIM : 2204655 Kelas : 3B PSTI Resume yang bisa saya tangkap dari hasil video yang sudah dijelaskan adalah cara mengubah salah satu alat desain Figma menjadi kode HTML, CSS dan JavaScript menggunakan teknik slicing. Dengan Slicing Ul menggunakan Figma, pengembang akan lebih mudah mengatur transfer desain yang kemudian dapat dijalankan di web server. Menjelaskan cara berkomunikasi antara desaigner dan develover untuk menghindari miskomunikasi dalam prosesnya. Disini dijelaskan pembuatan tampilan log in untuk user dengan menggunakan text, password, button dll pada html. dan juga Menjelaskan cara menggunakan GitHub sebagai alat untuk berbagi proyek desain.
Nama : Rahma Maulida NIM : 2209744 Kelas : 3A PSTI Penggunaan Figma sebagai alat desain UI serta teknik styling dengan CSS, pengelolaan elemen antarmuka pengguna dalam HTML, penggunaan JavaScript untuk fungsionalitas, inspirasi dari sumber daya desain, dan menekankan pentingnya terus belajar dalam industri desain UI dan pengembangan front-end. Dalam industri ini, Figma memungkinkan desainer untuk efisien menciptakan desain UI, sementara penggunaan CSS, HTML, dan JavaScript diperlukan untuk mereplikasi desain tersebut ke dalam elemen-elemen web, dengan Inspirasi dari sumber daya desain eksternal, seperti Dribbble dan Behance, berperan penting dalam pengembangan kreativitas dan tren terbaru dalam desain. .
Nama : Yunida Octavia Azzahra NIM : 2209759 Kelas : 3A PSTI Video ini menjelaskan mengenai beberapa materi, beberapa diantaranya adalah pembahasan mengenai teknik sciling design UI dari figma yang kemudian diikonversikan ke dalam html, css, dan juga Javascript yang nantinya bisa dijalankan pada web server. Dalam video ini juga dijelaskan cara membuat web design. Adapun hal yang perlu di highlight yaitu dengan adanya slicing ui menggunakan figma, itu bisa membantu developer untuk mengatur design handoff untuk direalisasikan dengan tujuan supaya nantinya design yang kita buat akan memiliki struktur yang sama
Nama: Dzaki Syauqi Anthera Mumtaz Kelas: 3A PSTI NIM: 2202942 PEnjelasan; Video ini memberikan pengetahuan yang sangat berharga tentang teknik desain antarmuka (UI) yang tenang dan menarik menggunakan alat desain Pigma, dengan hasil akhirnya dikonversi menjadi kode CSS dan HTML. Selain itu, video ini juga memberikan pencerahan tentang pentingnya penggunaan "design token," yang mencakup beragam elemen penting dalam desain. Melalui video ini, penonton akan diperkenalkan pada berbagai keunggulan yang dimiliki oleh Pigma dan alat-alat desain lainnya. Dengan demikian, video ini bukan hanya sekadar tutorial, tetapi juga merupakan sumber inspirasi yang kaya akan informasi dan wawasan mendalam dalam dunia desain.
Nama: Jihan Nurhaliza NIM: 2200961 Kelas: 3A PSTI Sangat bermanfaat khususnya bagi pemula. Mengenalkan html, css dan javascript yang dijelaskan dengan sangat rinci. Mengetahui cara mengkonversi desain UI ke html, css dan javascript pada menu login.
NIM 2201477 Nama : Khansa Nabila Kelas : 3B PSTI Dari video di atas berisi penjelasan mengenai bagaimana mengonversi design ke dalam bentuk Front-end HTML dan CSS, cara mendesain tampilan login. Terdapat pengenalan tampilan figma. Di dalamnya berisikan Developer hand off. Developer hand off ini memiliki 2 standar, yaitu: 1. Design token: kumpulan basic standarisasi style yang digunakan, seperti kombinasi warna. 2. Design token heading: styling standar untuk di setiap komponen-komponennya, contoh: input, button, dan lain-lain. Di dalam Figma terdapat banyak elemen-elemen seperti : frame, layer, text, images, shapes, vector tools, icons, layouts, dan lainnya. Untuk memulainya langkah pertama yang dilakukan itu membuat folder index.html, assets, .css, dan .js Kemudian terdapat folder Font yang berisi beragam font dengan extension .ttf direkomendasikan untuk digunakan pada browser. Selain itu, pada figma juga dapat mengekspor image, image ini terdapat beberapa type: PNG, JPG, SVG, PDF. Jika menggunakan type SVG maka akan menghasilkan gambar vektor, sedangkan type PNG, JPG maka akan menghasilkan gambar bitmap. Selain itu pada vektor jika dizoom-in gambar yang dihasilkan tidak pecah, sedangkan pada type PNG jika dizoom-in gambar yang dihasilkan akan pecah atau menimbulkan kotak-kotak putih. Pada penggunaan Figma juga banyak keunggulan didalamnya untuk membuat desain antarmuka pengguna (UI) situs web, aplikasi seluler, dan produk perangkat lunak lainnya.
Nama : Ai Nuraiman NIM : 2200647 Kelas : 3A PSTI Dari penjelasan video tersebut adalah dari sebuah kuliah tentang mendesain halaman login. Pembicara memperkenalkan dirinya sebagai seorang desainer UI dan menjelaskan bahwa halaman login biasanya merupakan halaman pertama yang dirancang. Dia menggunakan Figma sebagai alat bantu desain dan menjelaskan bahwa dia akan mengajarkan cara mengubah desain ke dalam HTML dan CSS. Dia juga menyebutkan pentingnya komunikasi antara desainer dan pengembang dan memperkenalkan konsep token desain dan penyerahan pengembang. Pembicara memberikan tautan ke repositori yang berisi kode dan desain akhir, serta referensi ke variabel CSS dan flexbox. Repositori ini dapat diunduh sebagai file zip dan diakses menggunakan Githack. Dalam pembelajaran hari ini, akan digunakan CSS variabel, box-sizing, dan flexbox. Repositori yang disediakan berisi kode final yang akan dipelajari hari ini, termasuk font dan gambar yang akan digunakan. Ada tiga folder dalam struktur folder yang digunakan, yaitu folder assets, folder css, dan folder js. Folder assets digunakan untuk menyimpan file seperti font dan gambar, sedangkan folder css dan folder js digunakan untuk menyimpan file CSS dan JavaScript.
Nama : Hilma Siti Fadilah Amalia NIM : 2207037 Kelas : 3B-PSTI Pembahasan mengenai pembuatan log in. Tools yang digunakan untuk design log in nya yaitu figma. Bisa juga menggunakan yang lain seperti Adobe XD. Keunggulan figma yaitu dari komponen komponennya. Lalu bahasa komunikasi antara desainer dan developer itu kalau di gds disebutnya developer hand-off. Developer hand-off itu punya standard yaitu design token. Design token itu adalah kumpulan basic standarisasi style yg kita pakai. Lalu github digunakan progremmer layaknya google drive bisa membuat sesuatu dan bisa diliat oleh orang lain, tujuannya agar bisa dikomen kemudian sama sama ngeliatin mana coding yg kurang baik lalu diperbaiki. Kemudian ada penjelasan mengenai cara pembuatan folder dan file. Untuk file harus diikuti dengan extensionnya. Visual studio code adalah tools yang umumnya sering digunakan. Lalu di video ini juga mebahas tutorial penggunaan dari visual studio code. Biasanya programmer menginstal live server agar tidak perlu me refresh halaman lagi untuk menampilkan hasil kodingan yang kita buat. Lalu dijelaskan pula stuktur html, css dan juga javascript. Disini dijelaskan pembuatan tampilan log in untuk user dengan menggunakan text, password, button dll pada html. Lalu font styling, text styling dll pada css. Adapun javascript digunakan untuk membuat website menjadi interaktif seperti penggunaan js function.
Aditya Arya Sukma 2204247 3B PSTI Setelah menonton video ini, saya mengetahui alur tentang konsep mengkonversi design dari figma ke HTML, CSS, dan Javascript. Dan di video ini saya jadi belajar tentang HTML,CSS, dan Javascript yang lebih Advance. Kemudian disini di ajari tentang struktur dasar file untuk melakukan konversi design dari figma menjadi sebuah website, yang pertama kita buat folder baru terlebih dahulu, kemudian diisi dengan file index.html, selanjutnya buat folder baru Bernama ‘assets’ yang isinyan untuk menyimpan image,font, atau hal lain yang berhubungan dengan konten tsb. Kita juga bisa membuat folder baru untuk menyimpan sebuah stylenya. Selain itu, di dalam video ini saya di ajari bagaimana caranya untuk membuat tampilan login, pengaturan font, warna, dan pengaturan elemen input untuk username dan password. Selanjutnya, saya belajar tentang hubungan antara desainer dan pengembang front-end
Nama: Nadia Herawati NIM: 2201046 Kelas: 3B PSTI Dari video ini saya mendapatkan banyak pengetahuan tentang cara mengkonversi desain dari Figma menjadi kode HTML, CSS, dan JavaScript yang biasa dikenal dengan ‘slicing design’. Selain itu, saya juga memahami tentang konsep ‘design tokens’ yang membantu dalam mengorganisir elemen desain, serta penggunaan variabel CSS dan pengaturan font dalam desain web. Kesimpulannya, video ini memberikan pengetahuan yang berharga dalam mengubah desain menjadi kode yang dapat diimplementasikan.
Nama : Fania Komalasari NIM : 2202585 Kelas : 3A PSTI videonya sangat membantu dalam mempelajari proses konversi desain antarmuka pengguna (UI) dari Figma ke elemen HTML, CSS, dan JavaScript. Terdapat juga panduan tentang penggunaan Figma untuk desain, teknik styling menggunakan CSS, pengelolaan elemen UI dalam kode HTML, penggunaan JavaScript, serta memotivasi bahwa penting terus belajar dan mengikuti perkembangan terbaru dalam desain UI dan pengembangan front-end.
Nama : Syifa Raudhatul Jannah Nim : 2205517 Kelas 3A PSTI Dalam video ini, saya mempelajari tentang prinsip-prinsip desain tampilan web dan cara efektif berkomunikasi dengan pengembang front-end. Dimulai dari dengan memahami pentingnya 'design token' dalam mengatur standar style desain. Saya juga belajar tentang komponen-komponen utama dalam tampilan web, seperti input dan tombol. Selain itu, saya juga diajarkan penggunaan perangkat desain seperti Figma untuk menggambarkan dan mengorganisir desain. Saya mengeksplorasi konsep penting seperti penggunaan CSS variabel untuk kontrol style dan pemahaman 'box-sizing' dalam desain.
Nama : Muhammad Hikmat Mustofa NIM : 2205641 Kelas : 3B PSTI Setelah melihat video ini, saya sudah memahami gimana mempelajari desain tampilan login yang ada di figma dikonversikan menggunakan html, javascript, dan css. Dan saya juga bisa memahami untuk cara membuat web login seperti menentukan warna, tata letak gambar, cara bisa bikin login seperti apa, dan sebagainya yang ada di video ini tersebut.
Nama : Aura Roschalina NIM : 2200989 Kelas : 3A PSTI Vidio diatas mempelajari tentang bagaimana cara mengkonversi salah satu alat design yaitu Figma kedalam kode HTML, CSS juga JavaScript dengan menggunakan teknik slicing yang nantinya dapat dijalankan pada web server. Melibatkan function yang mengatur dan membuat komponen-komponen style css dalam proses pembuatan. Juga menjelaskan bagaimana melakukan komunikasi antar desaigner dan develover sehingga, tidak terjadi miss komunikasi dalam pengerjaannya. Menyinggung sedikit mengenai penggunaan Github, Repository.
Nama: Azzahra Salsabilla NIM: 2207007 Kelas: 3A PSTI Berfokus pada teknik slicing, proses mengambil elemen-elemen desain dari figma seperti gambar, teks, warna, dan memisahkannya dalam kode HTML, menerapkan gaya dengan CSS, dan menambahkan interaktivitas jika diperlukan menggunakan JavaScript. Video ini menyoroti pentingnya memahami proses transformasi desain menjadi elemen-elemen yang dapat diakses oleh pengguna melalui browser.
Muhammad Ridhan Fadli Rahman 2202739 3A PSTI Desain UI yang dibuat di Figma dapat diubah menjadi aplikasi web fungsional menggunakan HTML, CSS, dan JavaScript. File desain dari Figma dapat diterjemahkan ke dalam HTML dan CSS untuk mereplikasi tata letak visual dan gaya desain, sementara JavaScript digunakan untuk menambahkan interaktivitas dan fungsionalitas. Proses konversi ini memungkinkan integrasi yang mulus dari desain ke dalam lingkungan web, memberikan pengalaman pengguna yang ramah dan interaktif.