Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Sketch
Webdesign

Merancang Jurnal Web Terinspirasi VSCO dalam Sketsa

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Sap (you can also view the original English article)

Final product image
What You'll Be Creating

Dalam tutorial ini, saya akan mengajarkan Anda cara mendesain aplikasi jurnal web sederhana dan canggih di Sketch, untuk seluler dan desktop. Kami akan menggunakan estetika VSCO sebagai inspirasi dan, di akhir tutorial ini, Anda akan menjadi sadar akan banyak fitur terpenting dari Sketch.

Selain keterampilan khusus aplikasi ini, Anda juga akan mendapatkan pemahaman yang lebih dalam tentang pengaturan tipografi dan tata letak dengan bantuan modular scale. Kita akan menggunakan beberapa teknik dasar dan menengah dalam Sketch. Mari kita mulai!

Aset Tutorial

Anda akan membutuhkan aset berikut untuk diikuti:

Quick Disclaimer

Sebelum kita membuka Sketch dan membuat dokumen baru, saya harus menunjukkan bahwa konsep ini sepenuhnya teoritis. Diperlukan analisis pasar yang jauh lebih mendalam sebelum kita dapat mengubahnya menjadi produk nyata yang dapat digunakan. Saya selalu bersemangat dalam bercerita online dengan foto yang indah, jadi saya membuat konsep ini untuk mengajarkan Anda cara mengikuti tren web dari perspektif desainer.

Typography

Ketika saya memulai sebuah proyek, saya selalu memulai dengan tipografi karena saya sangat percaya bahwa tipografi adalah alat paling penting bagi para desainer komunikasi yang mereka miliki.

Untuk teks tubuh dan judul yang lebih besar, saya memilih Merriweather, font serif yang terinspirasi oleh wajah buku gaya lama, yang berfungsi dengan baik untuk menceritakan kisah dan perjalanan. Pada layar resolusi tinggi, ini memberikan perasaan jurnal yang nyata dan dicetak.

Di sisi lain, untuk elemen UI umum seperti tombol dan label, saya menginginkan sesuatu yang modern, jadi saya memilih Montserrat, yang merupakan font sans-serif bersih dan sederhana.

Pengaturan Artboards

Pertama-tama, saya ingin menulis sedikit lebih banyak tentang bagaimana saya mendekati tata letak dan pengaturan tipografi saya. Tim Brown, Type Manager untuk Adobe Typekit, menciptakan alat fantastis yang disebut Skala Modular. Alat ini luar biasa: setelah kita menentukan ukuran teks ideal dan menyarankan angka penting, itu akan membagi dan mengalikan angka-angka ini dengan nilai yang secara matematis familiar seperti rasio emas atau kelima sempurna. Sesaat, ketika kita menyiapkan hierarki tipografi dan elemen dasar tata letak kita, saya akan selalu merujuk kembali ke angka-angka ini.

Catatan: Tentunya, dalam beberapa kasus kita perlu melanggar aturan ini, tetapi itu akan memberi kita keseimbangan alami dalam tata letak dan tipografi kita, yang menyenangkan bagi mata.

Saya menetapkan ukuran teks ideal menjadi 18px dan menetapkan 670px sebagai angka penting, karena ini akan menjadi lebar tata letak seluler aktual yang dapat digunakan.

Langkah 1

Setelah kami membuka Sketch, mari pilih opsi Artboard (A) di dalam menu Insert.

Setting up the artboards

Untuk tampilan seluler kami, saya sarankan Anda memilih dimensi iPhone 6, tetapi jika Anda memiliki model iPhone yang berbeda, lebih baik pilih yang itu. Menggunakan Sketch memiliki keuntungan besar karena memungkinkan Anda untuk mencerminkan pekerjaan Anda ke perangkat iOS Anda secara real time dengan Sketch Mirror, tanpa mengekspor atau mentransfer gambar. Mirror adalah bagian penting dari alur kerja desain saya, karena dengan itu, saya dapat langsung melihat hasil akhir pekerjaan saya di tangan saya.

Untuk mengaktifkan fungsi ini, Anda akan membutuhkan aplikasi Sketsa Mirror dari App Store. Kemudian klik ikon Mirror dalam Sketch (pastikan perangkat Anda berada di jaringan yang sama atau terhubung melalui kabel USB).

Use Sketch Mirror

Untuk tampilan desktop, saya memilih kanvas HD Desktop, yang lebarnya 1440pk.

Desktop HD artboard

Tip: nanti kita dapat memodifikasi ketinggian artboard kita dengan mengubah angka pada panel inspektur.

How to modify the artboard height

Langkah 2

Setelah kita memiliki papan gambar yang tepat, saatnya untuk menyiapkan beberapa panduan sehingga tata letak kita memiliki cukup ruang dan terlihat seimbang. Untuk mengaktifkan penguasa dan panduan dasar, buka View > Show Rulers (⌃R) Kemudian pilih tengah kanvas mobile kami, yang akan di 375px dan juga meletakkan tanda pertama dan 40px terakhir, sehingga akan bekerja dengan padding horisontal 40px.

Untuk membuat pedoman, klik penggaris pada 40px, pada 375px dan pada 710px poin.

Basic guidelines

Dalam hal tampilan desktop, kami juga menetapkan panduan tengah (720px) dan padding 100px.

Guidelines for desktop

Menciptakan Area Navigasi Teratas

Catatan: Jika Anda ingin membuat mockup realistis dengan menubar Safari asli, Anda dapat membuat screenshot dan menempel pada gambar yang dipotong, atau Anda dapat mengunduh iPhone 6 GUI Template (iOS 8) yang dibuat oleh (eks) Teehan + Tim Lax.

Sketch iOS UI Design Template

Kiat: Senang mengetahui bahwa Sketch memiliki kerangka di iOS yang juga ada, yang dapat Anda temukan di bawah File > New From Template > Desain UI iOS.

Langkah 1

Untuk membuat bilah navigasi atas kami, mari pilih Rectangle (R) tool .

Retangle tool

Tip: Saya benar-benar menyarankan Anda untuk mempelajari pintasan paling penting, karena mudah digunakan. Dalam banyak kasus, tombol pintas adalah huruf pertama alat kita, jadi dalam kasus Rectangle itu R, dalam kasus Oval it O, dalam kasus Line it L.

Dengan Rectangle tool buat lebar 750px, tinggi persegi panjang 120px, yang memiliki warna latar belakang #F9F9F9.

Navigation bar color fill

Tip: Dalam hal warna, saya selalu menggunakan nomor HSBA (Hue, Saturation, Brightness, Alpha), karena mudah untuk memodifikasinya dan membayangkan hasilnya terlebih dahulu.

Langkah 2

Mari pilih alat Oval (O) dan sambil menekan tombol Shift + Alt, gambar lingkaran 80px yang sempurna. Di sisi kanan, di panel Inspektur, klik pada tombol Fills, dan di bawah tab keempat unggah gambar profil.

Image fill

Tip: Jika Anda menekan tombol Alt dan memindahkan kursor, Anda dapat melihat jarak dalam piksel di antara elemen yang dipilih.

Distance between elements

Langkah 3

Pilih Text Tool (T) dan tempatkan nama di samping gambar profil dengan padding kiri 20px. Atur ukuran font menjadi 22px dan warna font ke #9E846E. Anda dapat mengatur huruf besar dalam menu Type > Uppercase.

Uppercase type

Tempatkan teks 'Cerita baru' dengan pengaturan yang sama di sisi kanan artboard kita dengan 20px padding kanan.

Alignment

Langkah 4

Sekarang, kita akan membuat ikon pertama kita, yang akan menjadi ikon ‘+’.

Mari buat persegi panjang 36x6px dengan alat Rectangle (R) kita, yang memiliki warna yang sama dengan teks kita. Setelah selesai, gandakan bentuk yang dihasilkan.

Our first icon

Pilih yang kedua dan pada panel inspektur (di sisi kanan) putar 90 derajat.

Rotate

Setelah menempatkan persegi panjang ke satu sama lain dengan sempurna, tarik yang pertama dan letakkan ke yang kedua pada panel lapisan. Dengan demikian kami menggabungkan dua layer terpisah menjadi satu ikon 36x36px.

Merging shapes

Langkah 5

Dalam kasus tampilan desktop kita, kita juga memiliki persegi panjang navigasi lebar penuh yang sama dengan tinggi 70px dan opasitas 80%.

Desktop navigation

Ukuran teks tombol menu sedikit lebih kecil; 14px dengan padding 40px dan garis pemisah #CCCCCC.

Desktop navigation buttons

Merancang Navigasi Bawah Tetap

Dalam kasus tampilan seluler, kita akan membuat bilah navigasi bawah tetap, tempat pengguna dapat memilih antara Kisi, Lokasi favorit, halaman Cari dan Profil.

Langkah 1

Sama halnya dengan navigasi teratas, kita akan mulai dengan lebar penuh, tinggi 100px, persegi panjang #FFFFFF dengan opasitas 90%. Mari tempatkan baris 1px #E6E6E6 di bagian atas persegi panjang ini dan bagilah menjadi empat kolom yang sama.

Semua ikon kita memiliki tinggi 50px dan warnanya #666666.

Fixed bottom mobile navigation

Tip: Anda dapat membuat ikon 'Kotak' Anda sendiri dengan mengatur sembilan segiempat 14x14px dengan 4px padding.

Membuat Header

Langkah 1

Untuk gambar pahlawan, mari buat full width, persegi panjang lebar 850 piksel, dan isi dengan foto, seperti gambar profil. Untuk memastikan teks di atasnya masih bisa dibaca, saya meletakkan layer hitam pada gambar dengan opacity 20%.

Hero image

Dalam hal gambar pahlawan desktop, saya sarankan 1000 piksel untuk tinggi. Selain itu, pastikan bahwa gambar ada di bawah bilah navigasi.

Langkah 2

Untuk judul dan subtitle, ukuran font masing-masing adalah 60px dan 24px. Font judulnya adalah Merriweather Bold dan subtitle fontnya adalah Montserrat Reguler.

Title and subtitle

Langkah 3

Elemen terakhir pada gambar pahlawan kami adalah tombol 'Dapatkan Inspirasi', di mana ukuran font adalah 24px dengan jarak spasi 1,33px. Tombol itu sendiri 338x89px dengan batas putih lebar 3px. Mari letakkan tombol 70px dari bagian bawah gambar.

Hero button

Untuk tampilan desktop, saya merekomendasikan ukuran font yang lebih kecil, 18px.

Membuat Kartu Artikel

Langkah 1

Pada langkah ini kita akan membuat tempat khusus untuk cerita paling populer. Untuk melakukan itu, mulailah dengan persegi panjang yang dipenuhi gambar 670x480px, yang memiliki ikon khusus di sudut kanan atas. Dengan ikon ini semua orang dapat menandai perjalanan favorit mereka di situs.

Favorite locations icon

Ikon ini memiliki lingkaran putih 80x80px dengan ketebalan dalam 2px. Ikon ‘pin’ memiliki lebar 12 piksel dan kita menggunakan angka Biasa Montserrat 18px. Seluruh ikon ini memiliki 70% opacity dan 15px padding atas dan kanan.

Favorite locations for desktop

Dalam hal tampilan desktop, gambar ini adalah 1240x750px dan ikon 'lokasi favorit' adalah 50x50px.

Langkah 2

Sekarang kita dapat membuat kartu pertamanya. Sebagai langkah pertama, buat persegi panjang yang dipenuhi gambar 670x522px, lalu persegi panjang 670x435px  #FFFFFF yang lain. Tempatkan persegi panjang kedua di atas yang pertama.

Designing the big card

Buat persegi panjang ketiga, 670x744px dan tutupi dengan dua sebelumnya. Tempatkan layer ini di bawah lapisan sebelumnya. Berikan sedikit bayangan ke lapisan ini, yang akan membuatnya sedikit keluar.

Shadows

Batas radius sangat penting dalam desain kartu kami, jadi atur ke 5px. Untuk melihat radius ini pada setiap lapisan, klik pada layer bayangan ini dan gunakan sebagai topeng.

Use as Mask

Karena fakta bahwa di seluler kami tidak memiliki keadaan mengambang, kami akan menggunakan tampilan hover sebagai tampilan standar, sehingga semua informasi akan langsung terlihat.

Grouping elements

Setelah kami memilih setiap lapisan yang terhubung ke desain kartu ini, kita dapat mengelompokkan (⌘-G) mereka bersama-sama, kemudian kita dapat menduplikasinya dengan mudah sambil menekan tombol Alt dan memindahkan grup asli ke bawah (sebagai alternatif kita dapat menduplikasi dengan ⌘-C dan Metode ⌘-V juga.)

Duplicate cards

Tip: Mengatur lapisan ke dalam kelompok sangat bermanfaat dalam proyek yang lebih besar seperti ini.

Di tampilan desktop, kita dapat menggunakan kartu yang sama. Untuk hasil yang lebih canggih, saya sarankan tweaker rasio dan ukuran font sedikit.

Card design in desktop view

Jangan lupa bahwa kami memiliki tampilan mengambang yang tersedia di desktop, sehingga kami dapat membuat versi kartu yang lebih sederhana sebagai default, mengungkapkan yang lebih rumit ketika pengguna mengarahkan kursor di atas kartu.

Merancang Bagian Peta dengan Koleksi Journey

Dengan bantuan bagian peta ini, mungkin untuk memfilter dan menelusuri perjalanan menurut lokasi. Hasilnya akan ditampilkan sebagai koleksi yang ditulis oleh banyak penulis.

Langkah 1

Buat persegi panjang berukuran 750x850px dan isi dengan screenshot Google Maps sederhana. Untuk bilah pencarian tempatkan persegi panjang lain di bagian atas persegi panjang ini dengan opasitas 80%.

Tip: Untuk mempermudah perataan, buat persegi di sisi kiri bilah penelusuran. Setelah ini kita dapat menempatkan ikon pencarian kami di tempat yang benar.

Alignment technique

Saya memilih #B3483E sebagai warna utama untuk Map UI saya. Warna ini terinspirasi oleh Pantone Marsala, warna Pantone tahun 2015.

Map UI color

Langkah 2

Ketika seseorang mencari lokasi tertentu, hasilnya akan ditampilkan sebagai jurnal notebook kecil. Setiap buku jurnal adalah gambar berukuran 320x414px, dengan sedikit bayangan.

Notebook design
Kita dapat mengatur radius perbatasan selektif dengan memilih bentuknya dan menekan tombol Enter. Jika kita memilih salah satu titik vektor, kita dapat memberi mereka nilai radius perbatasan yang terpisah. Atur batas atas dan radius bawah kanan ke 12px.
Rounded corners

Langkah 3

Dalam tampilan desktop, hampir semuanya identik, kecuali bahwa kami memposisikan jurnal di samping peta dan bukan di bawah peta.

Map in desktop view

Merancang Kartu Artikel Kecil

Langkah 1

Merancang kartu artikel kecil akan serupa dengan membuat yang lebih besar, kecuali bahwa kita menghapus deskripsi dan bagian ringkasan dari cerita. Dengan cara ini kita dapat menampilkan lebih banyak informasi dalam ruang yang sama, sehingga pengguna dapat pergi meskipun lebih banyak konten dalam waktu yang sama.

Small cards

Di tampilan desktop, selain mengurangi ukuran kartu, kami juga mengurutkan dalam kotak tiga kolom. Saya yakin ini akan memberi kita cara mudah dan cepat untuk menemukan dan menjelajahi konten baru.

Panggilan untuk bertindak

Sebelum kami menyelesaikan proyek kami dengan catatan kaki, tidak dapat dihindari bahwa kami menyediakan bagian ajakan bertindak.

Langkah 1

Seperti biasa, kita membutuhkan persegi panjang yang dipenuhi gambar pada 750x1000px. Untuk membuat teks dapat dibaca, kita menambahkan layer gradien putih ke gambar kita. Gradien kami dari opacity #FFFFFF 30%, ke opacity #FFFFFF 70%, jadi kita hanya perlu memodifikasi jumlah opacity.

Call to Action

Tip: trik kecil namun terkadang masih signifikan untuk meningkatkan keterbacaan teks kita adalah dengan menambahkan bayangan padanya. Dalam hal ini, saya menerapkan bayangan cahaya lembut pada judul dan teks paragraf saya.

Call to Action Text design

Menciptakan daerah Footer

Untuk area footer kita akan menggunakan kombinasi ikon media sosial dan tombol teks.

Mobile footer design

Pastikan bahwa ikon media sosial kami tetap dapat disentuh di layar seluler kecil. Mari buat mereka setidaknya 44 piksel atau lebarnya.

Desktop footer design

Satu Ide Lagi

Untuk tampilan desktop, kita dapat membuat satu gaya navigasi lagi, tetapi kita harus berhati-hati dengan ini dan hanya menggunakannya di atas lebar 1440px. Ini setara dengan navigasi bawah tetap dalam tampilan seluler.

Extra desktop navigation view

Selamat!

Kami telah menyelesaikan desain aplikasi web jurnal kami yang indah. Setelah mengikuti tutorial ini, saya harap Anda lebih percaya diri dalam menggunakan Sketsa untuk proyek-proyek besar. Mari kita lihat mashup produk akhir:

Saya ingin tahu bagaimana Anda menemukan prosesnya, jadi jangan ragu untuk memberi masukan dan pertanyaan di komentar.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.