Mendesain Situs Web Trending: Tutorial Desain Flat & Minimalis – Beberapa tren populer karena suatu alasan: mereka hanya berfungsi.
Mendesain Situs Web Trending: Tutorial Desain Flat & Minimalis
allfreebackgrounds – Mereka mudah dibuat, pengguna terbiasa dengannya, fleksibel di banyak area pandang, dan menyajikan informasi dengan cara yang bermakna dan menyenangkan secara estetika.
Melansir awwwards, Ini terlihat bagus dan bekerja dengan baik. Tapi mengapa, dan bagaimana kita bisa meniru kesuksesannya?
Dalam tutorial ini kami akan menunjukkan cara membuat situs serupa yang menggabungkan desain datar, minimalis, kartu, dan gambar HD.
Baca juga : Proses Desain Web di RubyGarage Dalam Langkah Sederhana
Bagaimana Desain Situs Bekerja
Apa yang membuat situs ini menarik dan fungsional? Kami melihat beberapa keputusan desain pada pandangan pertama:
- Gambar adalah konten
- Halaman dimuat dengan efek fade
- Estetika yang terinspirasi datar menciptakan kematangan visual yang sesuai dengan merek
- Halaman beranda diatur dalam antarmuka berbasis kartu
- Ada bilah navigasi dan menu navigasi untuk mendukung pengalaman responsif penuh
- Gambar Minimalis & Definisi Tinggi
Di situs yang tujuannya adalah untuk menjual produk, menunjukkan barang dagangan sangat penting. Satu foto memberi orang kesan pertama yang mudah dibaca. Tapi itu harus foto yang tepat: foto yang mewakili kualitas produk, bukan hanya apa adanya. Gambar menceritakan semacam cerita.
Seperti yang dijelaskan dalam ebook Tren Desain Web 2015 & 2016 , foto besar sedang trendi saat ini karena mudah dibaca. Pada saat yang sama, situs web mobile-savvy menggunakan lebih sedikit, foto lebih kecil karena bandwidth seluler terbatas dan bisa menjadi mahal, tergantung pada paket data pengguna.
Bagaimana kita menyelaraskan bandwidth dengan kualitas? minimalis.
Dalam desain web, minimalis tidak hanya berarti “melakukan lebih banyak dengan lebih sedikit” — itu mengomunikasikan jumlah yang sama dengan lebih sedikit kekacauan. Penggunaan warna yang diredam yang berkoordinasi dengan baik di semua citra dan elemen desain visual (tajuk, latar belakang footer, dan tipografi).
Ada manfaat lain. Foto dengan skema warna terkoordinasi (di sebelah kiri, dalam perbandingan di atas) diunduh lebih cepat karena foto JPG dengan kontras yang lebih sedikit terkompresi lebih baik daripada foto dengan kontras tinggi. Itu berarti kita dapat menggunakan gambar yang lebih besar dan berkualitas lebih tinggi untuk jumlah byte yang hampir sama.
Desain Flat Menonjol
Elemen desain dengan warna tunggal dan sederhana tampak rata dengan latar belakang. Sangat bagus dalam menghilangkan gangguan untuk memfokuskan perhatian pengguna pada konten — dalam hal ini, produk — tetapi juga melengkapi tampilan dan nuansa situs yang elegan.
Pertimbangkan korsel pahlawan. Teksnya yang relatif tebal dan putih bersih menonjol dari foto-foto di atasnya. Pengguna tidak dapat tidak menyadarinya, namun tidak mengurangi tampilan keseluruhan.
Pada kartu di bawah, ruang putih yang luas — warna datar — melakukan kebalikannya, membuat produk menonjol dengan lega. Dan jika foto memiliki latar belakang, latar belakang tersebut bebas dari kekacauan dan pencahayaan yang merata. Anda bahkan mungkin mengatakan, datar.
Kartu Atur Konten & Tingkatkan Aliran
Desain berbasis kartu dimulai dengan petak, tetapi memahami alasannya membantu kami menggunakannya secara efektif.
Desain adaptif: Tata letak kotak-kotak tanpa embel-embel memampatkan dengan baik pada layar kecil sementara berkembang dengan baik pada layar besar.
Potongan seukuran gigitan: Sesendok kecil informasi mudah dicerna. Itu berarti semakin sedikit informasi per kartu, semakin baik. Perhatikan juga bahwa setiap kartu menggunakan jenis informasi yang sama, yang keduanya membantu pengguna membandingkan item dan mempelajari antarmuka secara sekilas.
Praktik terbaik untuk desain kartu:
- Setiap kartu hanya mengkomunikasikan satu ide yang kohesif.
- Rencanakan kartu untuk ditumpuk dan duduk berdampingan.
- Jadikan seluruh area kartu dapat disentuh.
- Ruang antar kartu membantu mereka berdiri terpisah, tetapi terlalu banyak ruang menciptakan celah yang mengganggu. Pikiran selokan Anda.
- Membuat Prototipe Situs Web yang Trendi & Dapat Digunakan
- Kita dapat menerapkan aturan minimalis, warna datar, kartu, dan gambar HD ini pada karya kita sendiri.
Inilah yang akan kita buat saat kita mulai di Photoshop dan berakhir di UXPin :
1. Dapatkan bahannya
Mulailah dengan mengumpulkan gambar yang Anda butuhkan. Pastikan mereka menggunakan warna atau rona serupa — dalam hal ini, kami bahkan menambahkan sedikit warna ke beberapa gambar skala abu-abu untuk membuatnya cocok.
Anda juga akan menginginkan garis besar situs: halaman tertentu, atau setidaknya bagian yang luas, situs akan berisi.
2. Tentukan prioritas
Berpikir mobile-first memaksa kita untuk menetapkan prioritas.
Apa yang dibutuhkan orang untuk keluar dari halaman beranda? Gambar apa yang akan menginspirasi mereka untuk bertindak? Putuskan konten apa yang penting bagi pengguna dari semua perangkat, dan konten apa yang hanya mampu Anda tampilkan untuk pengguna dengan layar lebih besar.
Untuk beranda, kami telah membuat hierarki visual sebagai berikut:
- Utama: Gambar pahlawan mendorong pengguna untuk menelusuri koleksi produk
- Sekunder: Membangun kredibilitas dengan tagline yang jelas menyoroti 25 tahun dalam bisnis
- Tersier: Tampilkan produk tambahan dengan 3 kartu berdampingan
- Dengan mendesain konten Anda terlebih dahulu untuk perangkat yang lebih kecil,
- Anda semakin meningkatkan pengalaman Anda saat area pandang meningkat.
- Pendekatan yang berlawanan berisiko menciptakan pengalaman seluler yang terasa seperti renungan.
3. Tata halamannya
Kami mulai dengan tampilan yang dioptimalkan untuk seluler untuk memastikan bahwa visual untuk prioritas kami benar-benar sesuai dengan kanvas. Dari sana itu masalah pengaturan kartu yang berdekatan satu sama lain pada kanvas yang lebih luas.
Itu bagian dari kenyamanan kartu: mereka mengalir dari kiri ke kanan, atas ke bawah, untuk mengisi layar pengguna sebaik mungkin.
Seperti yang terlihat di atas, langkah selanjutnya adalah merakit bagian-bagian di Sketch atau, dalam contoh ini, Photoshop . Kami membuat versi seluler (sisi kiri) dan layar lebar (sisi kanan) untuk mengonfirmasi secara visual bahwa prioritas kami benar-benar berfungsi.
Tata letak berbasis kartu sederhana dan fleksibel: komponen yang ditumpuk hanya mengalir dari kanan ke kiri seperti yang biasa dilakukan halaman web tradisional .
4. Rancang & uji interaksi
Mockup statis menunjukkan tampilan situs, tetapi prototipe menunjukkan cara kerja situs sebenarnya.
5. Tambahkan tautan
Maket statis menyesatkan. Mereka tidak menunjukkan alur pengguna situs web — dalam hal ini, bagaimana kami berencana untuk membuat pengguna dari kesan pertama mereka menjelajahi koleksi.
Ketuk foto untuk mengungkapkan opsinya. Kemudian ketuk ikon petir dan tombol “tautan” -nya. Pilih halaman yang sesuai dan Anda siap melakukannya.
6. Tambahkan sedikit ekstra
Meski bisa disadap, prototipe ini masih agak… hambar. Kita bisa membumbuinya dengan beberapa efek hover sederhana.
Pertama, atur opacity foto menjadi sekitar 85% dengan mengetuk palet “info”.
Kemudian tambahkan tindakan hover yang mengubah opacity-nya kembali ke 100%.
Anda dapat melihat hasilnya dengan mengarahkan kursor ke foto-foto di prototipe langsung ini .
Dari sini, langkah selanjutnya adalah menjalankan uji kegunaan dengan setidaknya 5 pengguna. Kami dapat menggunakan alat bawaan UXPin untuk menjalankan pengujian kami sendiri, atau Anda dapat menggunakan layanan seperti UserTesting untuk merekrut dan menjalankan pengujian.
Setelah Anda menganalisis hasil pengujian, saatnya untuk mengulangi desain dan mengujinya lagi. Validasi pengguna adalah langkah kunci yang membantu mengubah situs web yang dapat diterima menjadi situs web yang luar biasa.