Logika Slicing dalam mengkonversi Design— Perspektif #1
Dalam dunia perfront-endnan duniawi kita pasti sering mengalami kesulitan dalam mengkonversi desain, apalagi untuk mereka yang baru terjun atau pun belajar front-end.
Dalam dunia front-end sendiri bisa dibilang mencoba adalah kunci untuk memahaminya, karena bukan karena front-end memiliki bahasa yang banyak untuk dipelajari, tapi karena dalam salah satu bahasanya yaitu css memiliki property yang cukup banyak dan kita diharuskan untuk mengkobinasikan degan property lainnya. dengan secara tidak langsung satu property dengan property yang lain saling berterkaitan.
ok, cukup saya pikir kalian paham maksud saya, yah dalam pengkombinasian tersebut memiliki kemungkinan yang sangat tidak terbatas.
dalam prespektif saya sendiri melakukan slicing design seperti kita sedang melukis dengan koding, dan juga bisa dibilang kita sendang menduplikasi design tersebut agar saat di konvesi tetap memiliki tampilan dan bentuk yang sama, dari hal kecil hingga keseluruhan halaman.
tanpa kita sadari saat kita sudah mulai terbiasa dalam mengkonversi, kita akan bisa memetakan design terebut dalam beberapa bagaian untuk mempermudah kita dalam mengkonversinya, saya menyebutnya sebagai logika slicing.
jadi menurut saya kalau kalian pernah belajar back-end, tidak hanya dalam back-end yang memiliki logika, namun front-end juga memiliki logikanya sendiri dalam melakukan slicing design.
ok, sekarang kita coba bahas lebih dalam yah.
🎮 Logika Slicing
Sebenarnya logika slicing ini hanya sebuah sebutan dari saya, namun sebenarnya kalau kalian pernah belajar framework css dimana salah satunya adalah framework bootstrap, kalian akan mengenal nama grid, kalau saya sendiri mengartikan grid sebagai pengelompokan atau membagai suatu layout agar mendapat komposisi atau letak yang pas.
mungkin kalian bisa lihat contoh penggunaan grid dibawah ini
kalau dalam bootstrap sendiri terbagi menjadi 12 grid, atau kalau dalam design kalian dapat melihatnya seperti ini.
nah dari paparan diatas nih saya pikir kalian sudah mulai paham dalam berlogikanya.
ok, lanjut sekarang bagaimana logika yang kita gunakan dalam koding ?
sekarang saya akan menyajikan design, dan coba anda analisis apa yang akan anda lakukan jika ingin melakukan slicing.
kalau dalam permasalahan ini saya hanya akan menggunakan 9 grid saja, kenapa ? karena dalam design tersebut bisa dibilang tidak menggunakan full 12 grid dalam penerapannya, dan saya asumsikan tiap textnya jika saya buat grup dan masing-masing memiliki 3 grid sehingga menggunakan 9 grid saja sudah cukup.
mungkin lebih mudahnya bisa anda lihat dalam design dibawah ini.
3 grid yang berwarna pink, tidak termasuk karena tidak memiliki konten text apapun sehingga hanya yang berwarna biru, hijau dan orange saja yang saya gunakan grid.
ok, sekarang kalian pasti akan bertanya, bukannya disana ada konten berupa gambar ? bukannya harusnya juga mengguanakan grid ?
ok untuk itu akan saya bahas di atikel selanjutnya tentang tips & trik dalam slicing design, jadi tunggu saja yah.
kembali ke topik utama, dalam artikel ini, hanya akan membahas tentang logika slicingnya.
jadi seperti itu, contoh sederhana dalam berlogika slicing, ini tentang bagaimana kita menerapkan grid dalam memetakan design yang ingin kita konversi, sehingga dapat memudahkan kita dalam mengguanakn grid itu sendiri khsusunya saat kita ngoding mengguankan framework, salah satunya bootstrap.
Oiyah, hampir saja lupa logika setiap orang itu berbeda jadi jangan terpaku dengan artikel ini saja yah, silahkan bebaskan diri anda dalam berlogika dan temukan logika yang sesuai dengan diri anda.
Akan berlaanjut di prespektif lainnya..
