() translation by (you can also view the original English article)
Dalam tutorial ini saya akan membawa Anda ke dalam proses desain saya untuk membuat desain responsif dalam Sketch. Untuk menjaga hal-hal ke intinya, saya akan berbicara tentang halaman landing responsif yang saya desain untuk aplikasi perjalanan beberapa waktu lalu. Mari kita bahas!
Pengaturan Dasar
Setiap proyek desain memiliki semacam pengaturan. Untuk yang spesifik ini, saya akan berbicara singkat tentang konten dan wireframe sebelum melompat ke dalam proses desain responsif di Sketch.
Pertama, Konten
Ini adalah praktik yang baik untuk mendapatkan konten sebelum Anda memulai proyek desain. Begitulah cara saya memulai semua proyek saya (untuk apa nilainya, itu bagian dari kontrak saya — sesuatu yang saya sarankan Anda terapkan juga). Tutorial ini berfokus pada sisi UI, menghilangkan pertanyaan UX penting seperti mengapa konten tertentu dipilih, tujuan dari sebuah halaman dan sebagainya.
Saat mendiskusikan konten dengan klien Anda atau tim Anda, Anda perlu memikirkan konten pada layar kecil dan besar. Saya sarankan menulis konten untuk seluler terlebih dahulu, tulis semuanya di Google Doc. Selanjutnya, buka dokumen di ponsel Anda untuk menentukan apakah itu tepat atau terlalu banyak. Jika Anda scroll halaman dan halaman konten tertulis di ponsel Anda, Anda tahu Anda harus segera mengalaminya.
Selalu, apa pun itu, potong konten Anda secara signifikan.
"Singkirkan setengah kata di setiap halaman, lalu singkirkan setengah dari yang tersisa." – Steve Krug, Jangan Buat Saya Berpikir
Setelah puas dengan konten seluler, Anda dapat menambahkan lebih banyak ke versi tablet dan desktop. Layar yang lebih besar memiliki lebih banyak layar real estate untuk menangani informasi yang lebih detail.
Anda akan melakukan revisi, tentu saja. Jangan terlalu terpaku pada tahap ini. Konten harus mendekati final tetapi tidak harus ditulis di atas batu.
Untuk mempelajari lebih lanjut tentang pendekatan konten-terlebih dahulu, baca artikel James Deer:
Menyetujui konten untuk semua versi situs adalah langkah pertama dalam menyiapkan desain Anda. Anda sekarang tahu apa yang diharapkan. Benar-benar tidak masalah untuk menjaga konten tetap sama di seluruh konten, sama halnya dengan konten tertentu yang muncul atau menghilang tergantung pada ukuran layar.
Jenis Konten Apa Yang Anda Inginkan?
Jenis konten yang paling umum di web adalah teks tertulis. Namun, ada hal-hal lain termasuk gambar dan grafik (mis. Foto atau ilustrasi), video, kutipan, file audio (mis. Podcast), permainan, atau bahkan konten tersemat melalui iframes.
Anda tidak harus memiliki semua video dan episode podcast dipakukan. Paling tidak memiliki deskripsi konten visual atau pendengaran. Itu yang saya lakukan untuk klien ini. Saya tahu kira-kira grafik seperti apa yang saya inginkan untuk setiap bagian untuk lebih menjelaskan proposisi nilai dari setiap bagian. Tapi, saya tidak memiliki grafik yang sebenarnya pada saat konten itu dibicarakan. Saya baru saja menggambarkannya.
Wireframing
Langkah selanjutnya adalah merepresentasikan konten secara visual. Dengan proyek ini saya memilih untuk melakukan wireframe yang sederhana dan berkualitas rendah. Saya ingin dengan cepat dan menarik konten secara visual. Saya membuat dua wireframes, satu ponsel, dan satu desktop karena masing-masing memiliki persyaratan konten yang berbeda. Keduanya memberi Anda gambaran umum tentang struktur visual halaman landing.
Anda dapat menggunakan tool apa pun yang paling nyaman bagi Anda untuk wireframes, tetapi saya menggunakan Sketch di sini. Anda juga dapat membuat wifeframes low-fidelity pen dan paper. Tidak masalah. Anda bahkan dapat menggunakan teknik yang dibahas nanti dalam tutorial ini untuk membuat responsif wireframes.
Mari melompat ke desain UI responsif dengan Sketch.
Desain UI Responsif
Ini akan membuat hidup kita lebih mudah jika kita pertama-tama mengidentifikasi konten yang sama di semua varian dan konten yang unik untuk layar tertentu.
Dalam desain ini, elemen-elemen berikut hadir di semua layar:
- Heading, termasuk h1 dan h2 (meskipun ada di semua layar, namun responsif)
- Tombol
- Tautan
- Quote
- Latar Belakang
Elemen unik untuk ukuran layar yang berbeda
- Grafik (grafik juga akan responsif)
- Paragraf Teks
Sempurna. Sekarang kita bisa mulai menciptakan elemen-elemen ini dengan tepat.
Mendesaiin Antarmuka Dasar Pengguna
Tombol dasar saya untuk desktop dan tablet adalah persegi panjang yang 352px kali 40px dengan radius batas 5px. Latar belakangnya adalah #7455FF. Dalam properti pengubahan ukuran, pilih untuk menyematkan objek ke tepi kiri dan kanannya dan atur ketinggian tetap.
Berikutnya adalah layer teks, tombol copy, dengan font Note Sans UI, tebal, dan ukuran font 16px. Warnanya putih atau #ffffff. Lebar pelurusannya diatur ke auto dan tidak ada pengaturan lain yang ditetapkan pada lapisan teks. Jika Anda mau, Anda dapat mengubah tombol menjadi simbol, meskipun tidak diperlukan untuk desain khusus ini karena tombol hanya muncul sekali di sepanjang halaman.
Saat Anda menggabungkan dua elemen ke dalam grup (atau simbol), Anda harus dapat mengubah ukuran lebar tombol itu tidak masalah, dengan teks tetap berada di tengah tidak peduli lebar tombolnya.
Hal lain yang dapat Anda lakukan adalah menggunakan Anima plugin untuk Sketch. Ini memungkinkan Anda untuk membuat layar fluid yang mengubah ukuran sekaligus menjaga properti mereka bersama seperti spacing, padding atau ketinggian. Ini bagus untuk tata letak dengan form.
Kita dapat menggunakan Anima untuk menempel elemen tajuk yang berbeda secara bersamaan saat mengubah ukurannya dari seluler ke desktop. Ini juga akan memberi kita indikasi yang baik tentang bagaimana elemen-elemen ini akan berperilaku satu sama lain dalam ukuran layar lain daripada yang kami desain dalam ukuran seperti ponsel yang lebih besar atau tablet.
Namun, untuk apa yang kita lakukan hari ini, plugin ini tidak menambah terlalu banyak perubahan.
Tipografi Responsif dalam Sketch
Desain landing page ini memerlukan beberapa heading besar dan indah. Dalam versi desktop, h1 adalah 72px sedangkan h2 adalah 32px. 72px terlalu banyak untuk seluler. Kita harus membuat heading h1 responsif. Ini tidak sesederhana tipografi fluid dalam CSS tetapi bisa dilakukan.
Kita perlu membuat style untuk setiap heading h1 lalu menyimpannya sebagai gaya teks dengan konvensi penamaan atau sintaks yang tepat. Ini akan memungkinkan kita untuk memilih h1 yang diperlukan seperlunya saat mendesain sisa halaman. Ini bukan manual yang sempurna dan cantik, tapi begitulah kelanjutannya.
Untuk h1 ini adalah style berikut: Noto Sans UI, tebal, ukuran 72 (desktop), ukuran 48 (tablet) dan ukuran 32 (mobile).
Sintaks yang sama dapat juga diterapkan untuk mengatur simbol. Misalnya: Style-name/sub-name/specific-style
Jadi, untuk mengatur tipografi, kita dapat menggunakan sintaks berikut untuk h1 besar untuk desktop: Headings/H1/Desktop, untuk tablet: Headings/H1/Tablet and untuk ponsel: Headings/H1/Phone.
Alasan yang mengatakan Headings/h1 dalam drop-down, untuk saat ini, adalah karena kita belum menambahkan style lain. Jadi, mari kita beralih ke h2 dan menambahkan lapisan hierarki lain ke dalam style teks.
Untuk h2, saya menggunakan style berikut: Noto Sans UI, tebal, ukuran 73 (desktop dan tablet) dan ukuran 18 (ponsel). Gunakan sintaks berikut untuk h2 pada ponsel: Headings/H2/Phone. Untuk tablet kita dapat melakukan dua hal, kita dapat menggabungkannya dengan desktop dan menyebutnya Headings/H1/Desktop + Tablet atau kita dapat memiliki dua style terpisah yang sama saja. Saya menulis tentang desain ini setelah selesai jadi sedikit bias. Saya akan mengatakan pisahkan tablet dari desktop karena ini adalah praktik desain yang lebih baik.
Dengan gaya tipografi di Sketch, Anda benar-benar dapat terinci dan teratur dengan aturan sintaksnya. Namun, pada tulisan ini, tidak ada fitur tersebut dalam Sketch, atau tidak ada plugin, yang mengubah ukuran tipografi untuk Anda seperti cara kerja tipografi fluid melalui CSS. Sampai sekarang, masih merupakan proses manual.
Menggunakan dan Menggunakan Kembali Simbol
Selanjutnya, kita akan membuat simbol untuk digunakan kembali dan membuat hidup kita sedikit lebih mudah. Dalam desain ini, kita memiliki banyak testimonial dan kutipan dari pengguna sebelumnya; mereka harus responsif.
Untungnya, format untuk testimonial akan sama di seluruh halaman sehingga kita hanya perlu melakukan ini sekali. Pertama, kita memiliki nama orang dan kemudian quote mereka. Namun keduanya memiliki style yang berbeda. Mari beri style sumbernya terlebih dahulu. Saya beri nama gaya teks Testimonial/Source. Style sebenarnya dari elemen ini adalah: Noto Sans UI, tebal, ukuran 14, tinggi garis 24. Selanjutnya, kita memiliki testimonial yang sebenarnya. Saya beri nama gaya teks Testimonial/Quote. Style nya adalah: Noto Serif, regular, ukuran 14, tinggi garis 24.
Untuk membuat simbol, pilih kedua elemen teks dan klik ikon Create Symbol di bagian kiri atas toolbar Anda. Saya beri nama simbol Testimonial.
Sekarang, kita perlu mengedit simbol agar dapat diubah ukurannya dengan baik untuk ukuran layar yang berbeda dan untuk ukuran quote yang berbeda. Klik dua kali pada simbol yang baru dibuat untuk mengeditnya.
Pertama-tama, kita perlu mengganti nama elemen di dalam simbol. Secara default, nama lapisan teks dibuat dari konten tekstualnya sendiri. Saya mengubah namanya masing-masin menjadi nama Source's name dan Quote.
Selanjutnya, kita perlu menyesuaikan pengaturan pengubahan ukuran untuk kedua elemen teks. Mereka akan memiliki properti pengubah ukuran yang sama. Tidak akan memiliki lebar atau tinggi yang tetap. Namun, keduanya akan mengubah ukuran dari tepi kiri dan atas. Ini akan memastikan saat Anda mengubah ukuran simbol, elemen teks akan tetap berada di tempatnya.
Untuk menggunakan kembali simbol, klik pada drop drown dari kiri atas toolbar yang mengatakan Insert dan menavigasinya ke simbol Testimonials. Kemudian klik di mana saja pada artboard untuk menempatkannya. Untuk mengubah konten teks paste ke input penggantian yang sesuai yang telah kita ganti namanya sebelumnya. Ubah ukuran sesuai kebutuhan.
Grafis Responsif
Saya menggunakan istilah "grafis responsif" sedikit berbeda di sini. Idenya adalah bahwa grafis akan berubah tergantung pada ukuran layar. Namun, saya masih harus membuat grafis secara manual untuk setiap layar. Kecuali mereka fluid, seperti elemen input atau button, mereka tidak dapat dibuat secara otomatis.
Untuk mendapatkan pemahaman yang lebih baik tentang apa yang dimaksud dengan grafis responsif, berikut adalah tautan ke artikel yang saya tulis tentang ikon responsif tetapi gagasannya persis sama untuk semua jenis grafis dan gambar.
Menggunakan kembali Elemen Grafis
Kita dapat mengubah kedua kartu itinerary menjadi simbol serta kartu dari bawah bagian sosial halaman landing. Mari kita pergi dengan kartu sosial di sekitar grafis Hari 3 sebagai gantinya (sedikit lebih menarik).
Sekali lagi, pilih kartu dan mengubahnya menjadi simbol. Klik dua kali untuk mengedit simbol. Kita ingin memastikan ukurannya baik secara vertikal maupun horizontal.
Dimulai dengan background, kita ingin mengubah ukuran properti yang membuat pin objek ke atas dan ke kiri. Hal yang sama berlaku untuk dua lapisan teks. Namun, kita ingin gambar, atau avatar, disematkan ke kanan atas. Terakhir, jangan lupa untuk mengubah judul elemen-elemen ini menjadi sesuatu yang lebih tepat ketika kami meng-override kontennya.
Dan voila!
Rincian Kecil Juga Penting
Terakhir, kita juga ingin detail desain yang kecil. Dalam desain khusus ini, saya menggunakan kembali garis ungu kecil dengan banyak titik. Saya mengubah indikator ungu ini menjadi simbol juga.
Simbol ini terdiri dari satu lingkaran 8px kali 8px dengan background #7455FF. Lebar garis tidak terlalu penting tetapi nilai standarnya adalah 122px. Tingginya 2px. Sekali lagi, dengan background #7455FF.
Dalam simbol kita perlu melakukan pengaturan pengubahan ukuran lagi. Untuk lingkaran, kita membutuhkannya tetap dengan ukuran yang sama dan di tempat yang sama. Kita akan memberinya lebar dan tinggi tetap dan menyematkannya ke tepi kanan atas. Untuk garis, kita juga akan memberinya tinggi tetap, tetapi bukan lebar tetap seperti yang kita butuhkan untuk memperluas lebar. Kita juga akan menyematkannya ke tepi kanan saat mengubah ukuran.
Dengan cara ini, ketika kita mengubah ukuran simbol ini, maka hanya akan mengubah lebar garis.
Trik Background Singkat
Satu hal lagi yang bisa kita lakukan adalah mengatur background menjadi fluid juga. Ketinggian bagian berbeda antara layout seluler dan desktop; ini berarti Anda harus memindahkan elemen background ke atas dan ke bawah ke tempat yang tepat.
Di sini, UI memanggil untuk border putih 16px. Itu berarti bahwa lapisan background harus berjarak 16 px dari artboard. Yang harus Anda lakukan adalah memilih lapisan background dan, baik menggunakan plugin Anima atau menggunakan properti pengubahan ukuran, pin semua tepi lapisan latar background. Jadi, pasangkan ke atas, bawah, kiri dan kanan. Sekarang, ketika Anda akan mengubah ukuran artboard, background akan mengikuti!
Dan Lain-Lain?
Sekarang kita telah mengurus sebagian besar elemen desain yang dapat dibuat responsif atau fluid atau menjadi simbol yang dapat digunakan kembali, sudah waktunya untuk membicarakan sisa elemen desain pada halaman ini.
Sederhananya, ini adalah di mana Anda menyingsingkan lengan baju Anda dan melakukan desain Anda secara manual, satu per satu. Mendesain grafik peta harus dilakukan dengan tangan karena itu unik. Hal yang sama berlaku untuk layout dan pemilihan warna, dan memutuskan tipografi.
Kesimpulan
Sayangnya, merancang ineterface yang responsif dalam Sketch belum sepenuhnya mudah. Tetapi ada tekniknya, bahkan plugin, yang akan membuat hidup Anda jauh lebih mudah sebagai desainer yang bekerja di Sketch. Saya harap tutorial ini telah memberi Anda panduan yang baik dari proses desain saya sendiri. Mendesain UI yang responsif tidak harus membosankan, banyak juga yang otomatis.
Apakah Anda memiliki tips atau trik untuk mendesain UI responsif untuk dibagikan dengan kita? Beri komentar di bawah!
