Sketch Tutorial — Mari membuat design aplikasi iOS-Bag 7

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 mengatur properti di sebelah kanan sidebar kan? ;)
  • Setelah selesai posisikan “info waktu pengiriman” berjarak 5 dari title

5. Taruh pesan dibawah info pengiriman

  • Atur jaraknya 10px dari teks info pengiriman
  • Atur juga lebarnya (width) sama dengan teks title pada langkah nomor 3.

6. Buat lingkaran hijau untuk indikator belum dibaca

  • Tekan “O” untuk membuat lingkaran
  • Atur ukurannya menjadi 10 x 10
  • Tempatkan lingkaran berjarak 25 dari atas card dan 15 dari sisi kanan card

Pada Tutorial bagian 7 ini seharusnya Anda mendapatkan tampilan seperti dibawah ini. Jika Anda tidak mendapatkan tampilan seperti diatas silahkan periksa langkah langkah diatas atau Anda bisa menanyakan di kolom komentar bagian mana yang kurang jelas :)