3 Prinsip Desain Web yang Efektif untuk “Non-Designer”

Selamat datang di bagian 2 dari seri mini kami "Prinsip Desain Web Divi yang Efektif" di mana kami mengeksplorasi praktik desain yang efektif untuk membantu memberdayakan desainer web baru dan mereka yang mengidentifikasi sebagai seseorang tanpa "mata untuk desain."

Dalam posting kami sebelumnya, kami membahas mempersiapkan pola pikir Anda dan membahas beberapa cara belajar bagaimana mengembangkan mata yang lebih baik untuk desain. Dalam posting ini, kami akan fokus pada beberapa prinsip universal desain yang baik yang dapat Anda terapkan segera pada upaya desain web Anda untuk menjadi lebih baik di sisi "desain" desain web.

Mari kita langsung!

3 Prinsip Desain Web yang Efektif untuk “Non-Designer”

Seperti yang disebutkan di bagian 1 dari seri ini, tidak ada benar atau salah dalam hal desain. Apa yang akan kita bahas dalam posting ini sebagian besar dan diterima secara universal sebagai prinsip desain yang baik dalam komunitas desain web pada umumnya. Ini juga merupakan pedoman pribadi saya sebagai desainer grafis/cetak yang menjadi desainer web Divi dengan pengalaman hampir satu dekade dan yang lebih penting, ratusan klien yang senang dan puas. Saya menerapkan prinsip-prinsip ini untuk setiap desain situs web Divi yang saya buat dan meskipun selalu ada satu klien yang menginginkan sesuatu yang mengerikan atau tidak biasa, ini akan melayani Anda dengan baik setidaknya 9 dari 10 kali

1) Aturan Sepertiga

Salah satu praktik paling umum di seluruh desain web, desain grafis, desain cetak, fotografi, dan media kreatif lainnya, adalah mengikuti satu aturan sederhana – The Rule of Thirds. Singkatnya, Aturan Sepertiga adalah tentang simetri dan keseimbangan. Tujuan dari aturan sepertiga dimaksudkan untuk membantu Anda mencapai keseimbangan dan harmoni yang lebih dalam desain. Dan bagian terbaiknya adalah – Anda dapat menerapkan Aturan Sepertiga pada grafik, gambar, seluruh tata letak halaman web, dan banyak lagi!

Ada banyak percakapan online mengenai apakah Rule of Thirds itu ilmiah atau tidak, tetapi terlepas dari itu, pendapat umum menunjukkan bahwa jika gambar atau desain terlalu mirip di bagian kiri dan kanan atau atas dan bawah, penonton mungkin akan menemukannya. membosankan atau membosankan. Jika ada, aturan sepertiga membuatnya tetap menarik dan dapat menghasilkan aliran yang baik yang akan kita bahas di bawah.

Dalam posting kami sebelumnya tentang Tip Desain untuk Mengoptimalkan Konten Web Divi Anda, ini juga dirujuk sebagai sistem grid yang merupakan cara yang bagus untuk memikirkannya secara visual. Bayangkan sebuah grid yang terlihat seperti ini:

Dengan kisi imajiner ini pada gambar, grafik, atau tata letak, Anda dapat dengan mudah menempatkan konten di dekat satu atau beberapa titik persimpangan utama.

Menjaga objek dan titik fokus pada 1 atau lebih dari 4 titik persimpangan seringkali akan menghasilkan tampilan yang jauh lebih seimbang dan simetris dibandingkan dengan contoh kedua di mana subjek berada di bawah titik persimpangan. Lihatlah gambar di bawah ini. Contoh pertama TIDAK mengikuti aturan sepertiga.

Contoh ini IS mengikuti aturan sepertiga.

Sementara contoh pertama masih merupakan gambar yang bagus, menggunakan aturan pertiga memberikan nuansa yang sama sekali berbeda pada gambar dengan memotong latar depan dengan titik persimpangan bawah dalam aturan pertiga. Mari kita lihat gambar dengan aturan grid sepertiga.

Sekarang mari kita lihat gambar tanpa berbaris di persimpangan aturan pertiga.

Anda dapat melihat perbedaan besar dalam hal bagaimana desain yang menarik perhatian sering kali sejajar dengan satu atau lebih titik persimpangan. Sementara Rule of Thirds paling sering dibicarakan dalam fotografi dan videografi, itu sama pentingnya untuk desain situs web. Saya akan menunjukkan kepada Anda bagaimana saya menerapkan aturan sepertiga ke situs pribadi saya. Berikut cuplikan desain awal "paro atas", yang berlaku untuk apa yang dilihat pemirsa sebelum menggulir ke bawah.

Sekarang, mari kita letakkan rule of thirds grid di atas bagian utama dan lihat tampilannya. Dalam hal ini, saya akan fokus pada konten di bawah menu utama tempat saya menerapkan aturan sepertiga.

Dalam contoh ini, ada 4 elemen utama yang berada di atau dekat dengan titik persimpangan. Singkatnya, saya ingin menekankan hal berikut:

1. Deskripsi singkat tentang siapa saya dan tentang apa situs ini.
2. Gambar yang memungkinkan pengguna baru merasa lebih nyaman dan dipercaya dengan melihat siapa yang akan mereka dengar.
3. Grafik e-book terbaru saya memberi orang alasan untuk mendaftar.
4. Akhirnya, email ajakan bertindak mendaftar di 2 bingkai terakhir di mana mata pengguna akan berakhir.

Dengan aturan sepertiga, umumnya bukan praktik terbaik untuk memiliki sesuatu di setiap titik persimpangan (khususnya dalam fotografi) tetapi saya sering mengikuti tata letak ini di pembuatan situs web saya. Dan sebagai catatan: karena kita membaca dari kiri ke kanan, saya sering memiliki ajakan bertindak di tengah atau kanan layar karena di situlah mata kita berakhir. Kita akan membahas ajakan bertindak secara lebih rinci di posting terakhir dalam seri ini, tetapi ini adalah contoh bagus bagaimana saya menerapkan Aturan Sepertiga ke dalam desain saya.

Jadi, jika Anda tidak yakin tentang cara menata halaman web atau kesulitan mencampur gambar, teks, dan mungkin ajakan bertindak, coba ikuti aturan sepertiga dan biarkan itu menjadi panduan Anda.

2) Tata Letak dan Aliran

Dalam hal menata dan mendesain halaman web, sekali lagi tidak ada gaya yang benar atau salah. Seringkali tergantung pada proyek, keinginan klien Anda, gaya desain Anda dan seringkali pasar yang Anda targetkan. Lebih sering daripada tidak, dalam digital atau layanan seperti agen desain web, fashion dan fotografi desain yang lebih modern dan trendi dengan tampilan dan nuansa minimalis. Dengan desain modern, sering kali muncul lebih banyak ruang terbuka, lebih sedikit konten berbasis teks, lebih banyak citra, dan mungkin lebih banyak pengguliran. (Beberapa klien kuno saya hanya bergidik!)

Di pasar bisnis yang lebih tradisional seperti manufaktur, firma hukum, industri kerah biru, dll, Anda mungkin akan menemukan situs web dengan lebih banyak konten berbasis teks, lebih sedikit ruang terbuka, dan tidak diragukan lagi dengan citra dan elemen desain yang kurang…menarik. Dan untuk alasan apa pun, sebagian besar klien saya di industri ini sangat menentang pengguliran terlalu banyak. Jadi mengetahui bagaimana merancang tata letak dengan aliran yang baik adalah kuncinya! Saya sering menemukan bahwa saya harus mencoba dan menyeimbangkan gaya desain kreatif SAYA dengan apa yang berhasil dalam industri klien saya, demografi target, dan keinginan serta kebutuhan klien saya. Dengan semua yang dikatakan, ada beberapa prinsip tata letak dan aliran dasar yang dapat diterapkan tidak peduli dengan siapa Anda bekerja atau di industri apa mereka berada.

Melihat kembali posting sebelumnya yang disebutkan di atas, pedoman yang sangat penting untuk diikuti adalah pola-z desain. Anda akan sering menemukan ini dengan banyak kit tata letak Divi profesional baru yang disediakan setiap minggu.

Mari kita lihat apa yang saya maksud.

Pada contoh pertama di sebelah kiri, ada gambar di sebelah kiri, teks di sebelah kanan dengan tombol ajakan bertindak yang bagus kemudian mata Anda membaca ke bawah dan ke kiri ke bagian lain dari teks/CTA kemudian dengan gambar lain di sebelah kanan dan ulangi. Sebaliknya, pada gambar di sebelah kanan, ada pola terbalik. Teks ke gambar ke gambar ke teks, dll. Mengikuti pola gaya z ini adalah cara yang bagus untuk membuat pembaca tetap tertarik dan merupakan cara yang bagus untuk menyeimbangkan teks dan gambar bersama-sama.

Ini bukan 'satu-satunya pilihan untuk tata letak dalam aliran dalam desain halaman yang baik, tetapi praktik yang baik adalah bahwa kami mengambil konten dari kiri ke kanan lalu ke bawah. Kemudian dari kiri ke kanan lalu ke bawah dan seterusnya. Jadi jika ragu, coba ikuti pola gaya z sebagai cara untuk membantu mengatur aliran konten halaman Anda. Dan satu catatan terakhir tentang pengguliran – Saya cenderung menjaga situs saya dalam 3-5 gulungan. Lebih sering daripada tidak, semakin Anda harus menggulir semakin besar halaman dan semakin lambat memuatnya. Sekali lagi, tidak ada yang benar atau salah dalam hal menggulir tetapi jika Anda belum pernah bekerja dengan klien dengan pola pikir yang lebih kuno, Anda dijamin akan mengalami beberapa pertentangan. Saya mencoba untuk menegaskan kembali klien-klien itu bahwa menggulir tidak perlu ditakuti. Media sosial telah melatih kami untuk terus menggulir dan mengambil konten dengan cepat.

3) Hirarki Visual

Prinsip utama terakhir yang ingin saya tunjukkan di sini adalah hierarki visual. Singkatnya, hierarki membantu pengguna mengetahui informasi terpenting dan memberi mereka arahan yang sangat jelas tentang ke mana arah mata mereka dalam desain Anda. Hirarki sering direferensikan dengan tipografi (yang akan kita bahas di posting ketiga kami) tetapi juga bisa sangat penting dalam elemen grafis, gambar, dan desain keseluruhan situs.

Saya tidak akan dengan sengaja menunjukkan situs-situs yang saya rasa kurang dalam departemen “desain yang baik” tetapi saya yakin Anda telah menemukan banyak situs yang memiliki hamparan teks dan gambar yang semuanya berukuran sama tanpa kejelasan yang jelas. panggilan untuk bertindak, kan? Itu yang ingin kita hindari. Menggunakan hierarki yang baik adalah cara terbaik untuk memandu pengguna situs web Anda mengetahui APA yang harus mereka klik atau lakukan selanjutnya.

Berikut adalah contoh desain terbaru yang saya buat dengan mempertimbangkan hierarki:

Sementara logo dan nomor telepon di kanan atas jelas besar dan terlihat, konten terbesar dan warna paling cerah di paro atas adalah ajakan bertindak untuk mengeklik tombol.

Klien saya secara khusus ingin orang-orang dengan mudah meminta pemeriksaan saat mereka tiba di situs, jadi saya menggunakan ide hierarki visual ini untuk mudah-mudahan mencapai hal itu! Contoh lain tentang bagaimana saya menggunakan hierarki baru-baru ini adalah desain paruh atas di situs ini:

Dalam hal ini, ajakan utama klien untuk bertindak adalah dengan Berbelanja Online atau Menghubungi mereka secara langsung. Logo, deskripsi singkat, dan bahkan nomor telepon sudah umum tetapi Tombol Ganda Divi adalah elemen terbesar yang Anda lihat pada awalnya dengan harapan membuat pengguna mengklik apa yang mereka cari jika mereka tidak menggulir lebih jauh.

Jadi sekali lagi, meskipun itu hanya beberapa contoh hierarki visual, ini bisa menjadi metode yang sangat ampuh dalam mengarahkan pengguna situs web Anda untuk melakukan apa yang Anda ingin mereka lakukan atau pergi ke tempat yang Anda inginkan! Sebagai tambahan, saya sangat menyarankan untuk memeriksa posting kami sebelumnya tentang Kesalahan Desain Web Umum yang Harus Dihindari.

Dalam Penutupan

Saya harap prinsip-prinsip desain yang efektif ini telah membantu Anda dalam upaya desain Anda apakah Anda baru dalam desain web atau ingin menjadi lebih baik dalam desain! Sekali lagi, ada banyak prinsip yang bisa kita bahas tetapi ini adalah 3 teratas yang coba diterapkan di semua desain situs web saya.

Jika Anda memiliki prinsip desain lain yang ingin Anda bagikan, beri tahu kami di komentar di bawah!

Besok: 3 Area Desain Penting yang Harus Difokuskan untuk Setiap Pembuatan Situs Web

Sekarang kita telah membahas mempersiapkan pola pikir kita, bagaimana belajar untuk memiliki pandangan yang lebih baik terhadap desain dan telah membahas beberapa prinsip desain dasar, posting terakhir kita akan mengeksplorasi beberapa aspek terpenting dari desain web untuk menjadi fokus. setiap pembuatan situs web. Sampai kemudian!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!