Newest Info

Berita, info dan pengumuman terbaru berkaitan dengan perkembangan teknologi

Sketch Tutorial — Mari membuat design aplikasi iOS-Bag 7

14 Agustus 2017 | Dwinawan Hariwijaya via medium
post image

Pada bagian 7 ini kita akan membuat bagian “card” yang mana adalah konten utama yang menampilkan informasi inbox atau pesan yang masuk. Pada bagian ini hal hal yang harus diperhatikan adalah: - Jarak antar elemen - Jarak antar huruf - Jarak antar baris pada paragraf Dengan memperhatikan ketiga hal tersebut Anda akan mendapatkan tampilan yang clean dan rapi. Yuk kita mulai 1. Membuat kotak untuk menampung konten tiap inbox Tekan R, lalu buatlah sebuah persegi panjang berukuran 335px X 203px Beri nama “background-card-1” Ubah warna nya menjadi warna putih 2. Beri shadow pada “background-card-1” Select “background-card-1” Check opsi shadow pada sidebar sebelah kanan Sesuaikan nilai tiap properti sesuai dengan sidebar sebelah kanan Tips membuat shadow yang halus: - Jika kebutuhannya adalah membuat shadow yang lebar, maka ukuran “Blur” nya jangan tanggung2, bisa sekalian diatas 10 atau 15 - Samakan warna shadow dari background di belakangnya - Setelah warna shadow sama selanjutnya geser pallete warna agak kebawah - Setelah itu turunkan opacity nya hingga 7 Posisikan jarak “card” 25px dari teks “You have…” dan 20px dari pinggir kiri dan kanan. Memberi jarak yang cukup lebar akan menambah kesan clean pada tampilan 3. Taruh teks untuk title di dalam card Tekan T untuk menulis lalu tuliskan sebuah title di dalam card Pada bagian “width” di sidebar sebelah kanan, atur angkanya menjadi 295. Kenapa sebabnya? Lebar “card” nya adalah 335px, kita akan memberi jarak untuk teks dari card sebesar 20px untuk sisi kiri dan 20px untuk sisi kanan. sehingga kalau dihitung 335–(20+20), maka sisanya adalah 295. Kenapa musti diatur panjangnya?… silahkan tulis kalimat berikut untuk title “iOS App Project Reference and API documentation”, Jika kita mengatur lebarnya, maka kita tidak perlu lagi repot2 menekan tombol “Enter” untuk mengatur teks. Sesuaikan properti teks dengan sidebar sebelah kanan Posisikan teks berjarak 20 dari atas dan samping kiri kanan dari card Tips membuat teks yang rapi dan clean - Jarak antar huruf (Character) jangan terlalu mepet. disini saya menggunakan 0.5 - Jarak antar baris (Line) juga jangan terlalu mepet, disini saya menggunakan 23 untuk ukuran teks 15 - Jika jarak antar huruf dan baris terlalu mepet akan memberi kesan padat, dan juga sulit dibaca karena jarak huruf yang sangat dekat bahkan ada beberapa huruf yang saling menempel. - Jangan memberi jarak terlalu berlebihan karena efeknya akan membuat user kesulitan membaca 4. Taruh info waktu pengiriman Sepertinya saya sudah tidak perlu lagi mengajari cara memasukkan teks dan…. IndonesiaIT 2017, [...], Artikel ini di ambil dari feed medium, untuk pengalaman baca yang lebih baik, silahkan kunjungi situ aslinya. IndonesiaIT - Software Developer Terbaik. Baca Selengkapnya.