Slicing Desain UI UX Landing Page Portofolio


 Hai Hai, Di postingan sebelumnya aku udah membuat sebuah desain yaitu Desain UI UX Landing Page Portofolio. Nah, di artikel ini aku mau slicing desain yang udah dibuat tadi. Baik, sebelumnya aku mau jelasin mengenai istilah slicing itu apa. Simplenya sih, Slicing itu kegiatan yang memiliki tujuan untuk mengkonversi tampilan desain berupa gambar menjadi bagian-bagian yang kecil. Nah, Bagian-bagian kecil ini yaitu bagian-bagian yang tidak bisa ditampilkan menggunakan HTML / CSS. Dengan begitu saat akan membuat tampilan versi HTML kita hanya perlu memanggil gambarnya saja.

Selain daripada itu untuk menslicing tampilan gambar tadi menjadi lebih kecil, proses slicing tentunya juga memiliki keuntungan lain. Oke, What is that? Yang paling utama yaitu mengurangi bandwith website yang akan kita gunakan nantinya.

Contoh ni, Website X memakai gambar yang lebar namun memiliki pola yang mirip ataupun sama. Bandwidth bulanan kita, nantinya akan tersedot cukup banyak hanya untuk nampilin background tersebut. Padahal kalau kita slicing terlebih dulu, maka tampilan website tentunya akan tetap sama aja sih namun udah pasti dengan kecepatan yang lebih baik dan tentunya bandwidth transfer file webnya menjadi lebih hemat (sedikit). 

Jadi gimana? udah dapet gambaran belum kira-kira? oke deh, aku kasih contoh ni :

  • Ini contoh Gambar 1 yang belum di slicing




  • Setelah diamati polanya sebenarnya gambar diatas memiliki pola yang sama seperti Gambar 2 dibawah ini kan?




Coba sekarang temen-temen bayangin, jika web A menggunakan Gambar 1 yang sama 100% dibandingkan dengan saat Web A menggunakan Gambar 2 berupa potongan kecil yang diulang-ulang. Akan lebih lebih cepat mana loading-nya? Tentunya yang menggunakan potongan kecil. Apalagi kalau dibuka dari Smartphone kalian, pastinya akan terasa sekali efeknya. 

Baik, setelah temen-temen membaca sekilas pengertian slicing diatas, sekarang aku mau nunjukin hasil Slicing Desain UI UX Landing Page Portofolio. Adapun teknologi yang digunakan dalam membangun Website Landing Page Portofolio ini diantaranya menggunakan HTML, CSS, dan JAVASCRIPT. Tentunya teknologi ini memudahkan temen-temen dalam memahami proses koding yang dibuat.

Berikut ini adalah tampilan Website Desain UI UX Landing Page Portofolio :

  1. Halaman Home
  2.  Halaman About Me


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

    3. Halaman Works 


 

 

 

 

 

 

 

 

 

 

 4. Halaman FAQ 


 

 

 

 

 

 

 

 

 

 

5. Halaman BLOG 


 

 

 

 

 

 

 

 

 

 

 

 

6. Halaman Contact 


 

 

 

 

 

 

 

 

 

 

 

 

7. Halaman Tampilan POST  




 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Apabila temen-temen tertarik dan berminat dengan Source Code Slicing Desain UI UX Landing Page Portofolio dan ingin mempelajarinya maupun mengembangkannya agar lebih baik ataupun menjadi sesuai dengan kebutuhan kalian? temen-temen boleh langsung unduh disini.

Semoga bermanfaat ya buat temen-temen, kalian juga boleh kok buat ngembangin lagi sehingga Slicing Desain UI UX Landing Page Portofolio ini akan semakin menjadi lebih baik. Jika temen-temen memiliki saran tentang apa yang harus diperbaiki dalam proses semacam ini, beri tahu aku di komentar di bawah. Juga, jika kalian menyukai jenis konten dari aku, beri tahu di komentar sehingga nantinya dapat membuat lebih banyak di waktu mendatang! 

Baca juga

Posting Komentar