UI layar terpisah telah menjadi cara populer untuk menampilkan konten. Kami sering menganggapnya digunakan di area di mana kami ingin pengguna memilih di antara dua opsi. Namun kami juga melihat penggunaan kreatif lainnya dari teknik ini.
Misalnya, layar terpisah juga dapat digunakan dengan efek yang luar biasa sebagai tata letak halaman penuh atau bahkan sebagai animasi transisi.
Berikut 10 contoh UI layar terpisah, lengkap dengan kode sumber yang dapat Anda edit sesuai kebutuhan. Masing-masing memiliki sesuatu yang unik untuk ditawarkan.
Membuat Pilihan
Ini tentunya merupakan cara paling umum untuk menggunakan layar terpisah. Pengunjung situs web dihadapkan pada dua pilihan. Di sini, warna gambar latar belakang membantu memberikan pemisahan yang bagus, sementara logo bulat di tengah menyatukan semuanya.
Lihat Pena Situs Web – Layar Terpisah oleh Bridget Reed
Memisahkan Slider
Layar terpisah juga menghasilkan efek transisi yang menarik, seperti yang kita lihat pada contoh tayangan slide di bawah. Menggulir ke bawah menyebabkan setiap separuh layar terbelah dan menampilkan gambar berikutnya dalam antrian. Hasilnya adalah UI yang sangat halus dan canggih.
Lihat Pena Pisahkan Tayangan Slide yang Apik oleh Fabio Ottaviani
Tata Letak Halaman Terpisah Dengan Sidebar Statis
Dengan dominasi layar HD dan perkembangan 4K, semakin banyak desainer yang memanfaatkan ruang layar ekstra tersebut. Contoh tata letak ini menyediakan sidebar statis dengan gambar latar belakang tebal. Tapi itu juga terlihat bagus di layar yang lebih kecil, karena sidebar itu menjadi header. Ini menarik dan fungsional.
Lihat Pena Tata letak layar terpisah oleh Travis
Demi Perbandingan
Tren lain yang mendapatkan daya tarik adalah memanfaatkan layar terpisah untuk membandingkan gambar “sebelum” dan “sesudah”. Di sini kami memiliki pengaturan yang memungkinkan pengguna cukup menggerakkan mouse untuk melihat perbedaan antara dua gambar. Hanya dengan sedikit menggunakan JavaScript, UI ini merupakan teknik yang menarik.
Lihat Pena UI Layar Terpisah oleh Envato Tuts+
Galeri Bergantian
Efek pengguliran “setengah demi setengah” pada contoh ini menambahkan sentuhan unik. Tampaknya seolah-olah kartu dan foto ditumpuk secara bergantian saat Anda menggulir. Dan karena menggunakan kurang dari 150 baris CSS murni, waktu buka seharusnya tidak terlalu menjadi perhatian.
Lihat Pena Menggulir setengah demi setengah #CSS murni oleh @Kseso oleh Kseso
Tata Letak Terpisah Majalah
Tata letak ini mengemulasi sesuatu yang mungkin Anda temukan di majalah cetak. Judul tebal dan teks pengantar di sebelah kiri memberikan kontras yang luar biasa dengan foto dan artikel multikolom di sebelah kanan. Secara keseluruhan, ini menghasilkan tampilan yang sangat apik dan profesional.
Lihat Pena Profil Pribadi // Keanu Reeves oleh Brian Haferkamp
Ikhtisar Layanan Tata Letak Terpisah
Konsep di sini keren banget dari segi branding. Ini menggunakan layar terpisah dalam halaman dengan pesan branding statis di sebelah kiri, dikombinasikan dengan daftar layanan yang ditawarkan di sebelah kanan. Ini hanya berbeda dan merupakan cara untuk sedikit menonjol dari yang lain.
Tata Letak Terpisah Korsel 3D
Transisi antar slide di carousel ini benar-benar menambah dimensi baru pada layar terpisah. Setiap slide “terbelah” menjadi dua saat slide berikutnya ditampilkan dalam format 3D yang keren. Ada kualitas seperti mesin tertentu di sini yang sangat cocok untuk perusahaan teknik atau industri.
Lihat Pena Pisahkan Korsel 3D oleh Paul Mulia
Memisahkan itulah Perbedaannya
Apa yang dimulai sebagai cara untuk memilih antara A atau B telah menjadi sesuatu yang lebih. Tata letak dan animasi terpisah menawarkan kepada desainer jalan kreatif lain untuk mendorong interaction.
Meskipun kami masih melihatnya dalam bentuk tradisionalnya, kami juga menemukan bahwa mereka digunakan untuk menyempurnakan hal-hal seperti menelusuri konten dan galeri gambar. Itu bahkan digunakan untuk meniru teknik desain cetak.
Mudah-mudahan, contoh di atas dapat menjadi inspirasi bagaimana Anda dapat menambahkan UI terpisah ke proyek Anda sendiri. Bersenang-senang bereksperimen dan menerapkan fitur-fitur yang tampak hebat dan menambahkan sesuatu yang unik ke dalamnya.
Cuplikan CSS Lainnya untuk Tata Letak
Atas
