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

Selamat datang di bagian 3, posting terakhir dalam 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."

Sekarang kita telah membahas persiapan dan belajar bagaimana memiliki mata yang lebih baik untuk desain dan telah membahas beberapa prinsip desain yang efektif untuk dimiliki di kotak peralatan kita, kita akan fokus pada 3 bidang desain yang sangat penting yang merupakan kunci untuk mencapai situs yang dirancang dengan baik.

Mari kita langsung!

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

Jika Anda terus mengikuti dua posting pertama dalam seri ini, Anda pernah mendengar saya menunjukkan bahwa tidak ada benar atau salah dalam hal desain, tetapi bersama dengan prinsip-prinsip desain yang efektif yang telah kita bahas, ada beberapa , bidang desain praktis yang saya fokuskan untuk memastikan pembuatan situs web yang sukses dan menyenangkan setiap saat. Dan bagian terbaiknya adalah, ide-ide ini dapat ditransfer ke semua jenis industri atau gaya desain web!

1) Tipografi dan Font

Situs Anda dapat memiliki citra yang indah, warna yang menarik, dan elemen desain yang menyenangkan, tetapi jika jenisnya terlihat tidak sesuai atau tidak sesuai dengan gaya situs, itu bisa menjadi penghalang utama. Karena kita tidak membahas dasar-dasar tipografi dalam seri ini, silakan merujuk kembali ke pos 50 Ketentuan Tipografi yang Harus Diketahui (Dan Dipahami) Setiap Desainer Web jika Anda ingin mempelajari lebih lanjut tentang dasar-dasarnya. Pemahaman tentang font kerning, leading, tracking, sans dan sans-serif akan sangat dibutuhkan oleh orang yang ingin menjadi lebih baik dalam hal tipe dan desain.

Izinkan saya menawarkan beberapa panduan tipografi praktis yang saya patuhi sebagai desainer web Divi yang sukses dengan klien yang sangat berbeda dalam gaya desain dan industri yang berbeda:

Gunakan font yang cocok dengan industri/desain situs Anda – Dalam posting pertama seri ini, saya mengingat contoh di mana saya sendiri merancang situs yang memiliki citra dan warna yang bagus tetapi fontnya tidak cocok. Singkatnya, itu adalah situs manufaktur industri dan font yang awalnya saya gunakan adalah gaya yang lebih modern dan ramping yang memang tidak sesuai dengan tampilan dan merek perusahaan.

Ini tidak berarti bahwa Anda tidak dapat berkreasi dengan font atau bahwa Anda harus menyesuaikan dengan status quo industri, tetapi praktis, jika Anda bekerja di situs layanan profesional, Anda mungkin tidak akan menginginkan bagian atas, font berseni yang terlibat. Dan sebaliknya, jika Anda sedang mengerjakan sesuatu dengan getaran yang unik, mungkin berseni, mungkin Arial atau Helvetica tidak akan cocok dengan getaran yang Anda inginkan. Ini membawa saya ke poin saya berikutnya untuk mencampur dan mencocokkan font.

Tetap menggunakan 2 hingga 3 font – Prinsip desain dasar yang telah teruji oleh waktu selama beberapa dekade adalah membatasi jumlah font yang Anda gunakan. Terlalu banyak font mengalihkan perhatian pembaca, sering membingungkan hierarki dan terus terang, akhirnya terlihat seperti selebaran barat lama yang mencari hadiah untuk penjahat. Saya sering menggunakan satu font untuk header dan judul, kemudian biasanya menggunakan font sans-serif yang mudah dibaca untuk semua teks paragraf saya. Terkadang saya akan memiliki font gaya ke-3 untuk menu utama tetapi font menu saya sering disederhanakan dengan judul saya.

Untuk ide lebih lanjut tentang cara memasangkan font bersama, silakan lihat posting sebelumnya tentang Pemasangan Font dalam Desain Web: 7 Prinsip Utama Terungkap dan Dijelaskan

Miliki visual dengan teks Anda – Jumlah teks yang layak dalam konten Anda sangat bagus. Bahkan, disarankan untuk memiliki setidaknya 300 kata per halaman untuk membantu dari perspektif SEO. Namun berhati-hatilah karena terlalu banyak teks dan tidak cukup alat bantu visual. Untuk buku, blog, artikel, dan konten bentuk panjang lainnya, banyak teks diharapkan, tetapi jika Anda mendesain halaman arahan yang menarik, terlalu banyak konten akan membuat pengguna bosan sebelum mereka melihat lebih jauh. Saya sering mendesain dengan pola pikir bahwa halaman depan harus menjadi saluran penjualan yang membawa klien melewati pintu KEMUDIAN mereka dapat menyelami lebih banyak halaman, blog, dan sumber daya lainnya untuk informasi yang lebih detail.

Beranda Tema Elegan saat ini adalah contoh sempurna untuk itu.

Dalam contoh ini, kita melihat judul yang menarik, paragraf teks dengan tombol ajakan bertindak dan grafik visual yang bagus yang mengikat pesan yang membuat pengguna tetap terlibat. Ini adalah contoh yang bagus untuk diikuti ketika mengatur jumlah teks yang layak dengan visual.

Saya pernah memiliki halaman depan yang indah yang dirancang dengan teks dan visual dan ketika saya menyerahkannya kepada klien saya untuk melakukan pengeditan dasar, mereka telah membuang apa yang tampak seperti bab kecil sebuah buku ke halaman depan yang benar-benar merusak aliran desain. Saya menciptakan. Jadi biarkan itu menjadi pelajaran dan ketahuilah bahwa meskipun kontennya bagus, itu perlu ditempatkan dengan tepat!

Sumber daya hebat lainnya untuk dirujuk kembali adalah 20 Tren Tipografi yang Perlu Diperhatikan pada tahun 2016 karena tren tersebut masih sangat valid hingga saat ini dan akan terus bergerak maju.

2) Manajemen Citra dan Warna

Mirip dengan tipografi, saya cenderung menggunakan paling banyak 2 hingga 3 warna utama untuk pembuatan situs web saya. Kecuali jika itu adalah perusahaan atau organisasi dengan banyak warna dalam branding, saya menemukan bahwa terlalu banyak warna (terutama jika tidak cocok) bisa sangat mengganggu dan sering membingungkan. Berikut adalah beberapa panduan yang saya patuhi saat mencampur warna dan gambar:

Warna dasar dan warna aksen – Salah satu metode yang saya temukan sangat berhasil dalam proyek baru-baru ini adalah dengan mengambil merek klien dan jika belum, pilih warna aksen yang bagus untuk ajakan bertindak, tautan, dll. Misalnya, pada ini situs, saya mengambil branding logo dengan abu-abu dan oranye dan menambahkan teal/biru gelap yang halus untuk membantu menjadikan oranye "pop" sebagai warna aksen utama.

Merampingkan warna dengan gambar – Salah satu cara untuk menyatukan desain dan gambar Anda dengan cara yang bagus adalah dengan mencocokkan warna situs web dengan beberapa citra utama. Contoh ini agak jarang karena saya dapat mencocokkan warna situs web dengan pakaian klien saya yang menghasilkan kesan ramping yang sangat bagus antara citra dan warna situs web.

Saya mengambil warna merah marun dan oranye yang bagus dari pakaian klien saya dan mampu menyatukan seluruh situs dalam tampilan berseragam yang bagus. Sekarang Anda jarang berada dalam situasi di mana Anda dapat mencap seluruh situs dari sebuah gambar, tetapi prinsip yang sama ini dapat diterapkan saat menggunakan gambar latar belakang dengan ajakan bertindak, dll!

Praktis, jika Anda tidak yakin bagaimana memilih warna tertentu, berikut adalah 10 Alat Pemilih Warna

Hindari warna yang terlalu cerah – Saya sering melihat desainer baru menggunakan warna hijau super terang, merah muda, kuning, dll yang membuat orang menyipitkan mata dan menjauh dari layar. Saya tidak akan menunjukkan contoh buruk di sini, tetapi saya yakin Anda telah melihat banyak situs di mana warna membuat Anda berpaling dan tidak pernah ingin melihat ke belakang. Tentu tidak ada yang salah dengan warna-warna cerah, pastikan saja warnanya tidak memberikan efek itu. Di sinilah mendapatkan kritik dan umpan balik yang membangun dari desainer lain dapat membuahkan hasil.

Rekomendasi saya adalah menggunakan warna yang cukup netral untuk warna dasar seperti teks, grafik latar belakang, dll. Kemudian gunakan warna yang lebih cerah untuk ajakan bertindak, tautan, dan area yang lebih menarik perhatian dari desain halaman. Jika Anda baru dalam mendesain dan warna bukanlah area yang nyaman bagi Anda, silakan merujuk kembali ke Teknik Pencocokan Warna kami untuk Desainer Web WordPress yang akan memberikan banyak opsi tentang cara memilih warna dengan lebih baik.

3) Ajakan Bertindak yang Kuat

Terakhir, salah satu area desain web yang sangat penting adalah memiliki ajakan bertindak (CTA) yang kuat dan jelas. Salah satu masalah paling umum dari desain web yang buruk adalah memiliki konten yang didorong oleh teks yang berat tanpa ajakan bertindak yang jelas. Kontennya bagus tetapi jika itu semua informasi dan tidak ada konversi, klien Anda pasti tidak akan puas. Saya sarankan membuat CTA Anda menonjol dari elemen lain dalam desain Anda dengan warna aksen atau efek hover yang bagus.

Berikut adalah contoh bagaimana saya menerapkan ajakan bertindak untuk klien baru-baru ini.

Dalam hal ini, ajakan bertindak utama klien untuk pengguna situs web adalah mendaftar untuk pembaruan email, jadi langsung saja, kami memiliki logo yang muncul dari gambar latar yang lebih gelap, sedikit teks dengan peluang langsung untuk mendaftar bahkan sebelum menggulir ke bawah. Idealnya, Anda ingin menarik perhatian pengguna ke ajakan bertindak Anda. Di situlah memiliki warna aksen yang hidup atau efek pada sebuah situs sangat bermanfaat.

Berikut adalah beberapa panduan yang saya patuhi dalam hal ajakan bertindak:

Akhiri beranda Anda dengan ajakan bertindak yang kuat – Lebih sering daripada tidak, desain beranda saya hampir merupakan rekap situs secara keseluruhan. Misalnya, jika sebuah situs memiliki struktur seperti ini:

• Tentang kami
• Jasa
• Testimonial
• Blog
• Kontak

Saya akan membuat ajakan bertindak untuk masing-masing bagian di beranda, lalu desain akhir yang ramping untuk ajakan bertindak utama, yang dalam hal ini adalah mendaftar. Berikut adalah contoh utama dari apa yang saya maksud:

Halaman depan pada dasarnya merangkum seluruh situs dan merupakan titik awal bagi pengguna untuk mengklik untuk melihat galeri, video, dan informasi lebih lanjut. Mungkin pola pikir itu akan membantu Anda seperti dalam desain beranda Anda!

Miliki ajakan bertindak di bilah sisi Anda – Jangan lupa kesempatan untuk ajakan bertindak yang kuat di bilah sisi! Apalagi jika Anda memiliki situs dengan posting blog atau halaman lain yang sering menggunakan sidebar. Ini adalah kesempatan bagus untuk menambahkan pendaftaran email tambahan, tombol donasi, atau tautan ke CTA utama lainnya.

Mirip dengan situs di atas, salah satu ajakan bertindak utama untuk situs pribadi saya adalah pendaftaran email dan sementara itu berada di depan dan di tengah beranda saya, saya ingin memastikan juga membuatnya sangat jelas di posting blog dan halaman tutorial saya. .

Di sini, saya memilikinya di kanan atas setiap templat posting bersama dengan visual yang kuat di atas dan di bawah formulir pendaftaran utama. Jadi, jika Anda memiliki halaman dengan bilah sisi, ingatlah bahwa area tersebut adalah real estat yang berharga untuk ajakan bertindak yang kuat! Dan Anda ingin memastikan dan membuat CTA Anda terlihat dan sebaiknya di bagian atas bilah sisi yang akan muncul pertama kali di ponsel di bawah konten utama.

Miliki ajakan bertindak setelah konten subhalaman – Terakhir, dan mungkin yang paling diabaikan, adalah ingat untuk memiliki ajakan bertindak di halaman normal Anda! Saya sendiri mengakui telah mengabaikan hal ini sampai baru-baru ini ketika diminta oleh klien. Contoh di bawah ini memiliki ajakan bertindak yang kuat di akhir halaman layanan utama mereka.

Ketika pengguna situs web melihat halaman itu, mereka akan mengambil semua informasi kemudian memiliki kesempatan untuk menghubungi klien saya jika tertarik dengan gambar yang bagus dan ramah di sebelah kanan dan tombol CTA di sebelah kiri didukung oleh oranye cerah yang membantu bagian itu keluar dari halaman. Ya saya tahu saya katakan di posting sebelumnya bahwa saya biasanya meletakkan CTA saya di tengah atau kanan tetapi tata letak ini sepertinya berfungsi dengan baik

Penutup Seri

Saya harap seri ini telah membantu menginspirasi Anda dengan beberapa prinsip dan taktik desain web yang baik yang dapat Anda terapkan pada usaha desain web Anda! Mari kita lakukan rekap singkat tentang apa yang telah kita bahas di seluruh seri mini:

Bagian 1

• Mempersiapkan Pola Pikir Anda
• Cara Mempelajari Tren Desain yang Baik
• Dapatkan Umpan Balik dan Kritik yang Membangun atas Karya Anda

Bagian 2

• Ikuti Aturan Sepertiga
• Tata Letak dan Aliran
• Hirarki Visual

Bagian 3

• Tipografi dan Font
• Gambar dan Warna
• Ajakan Bertindak yang Kuat

Sekali lagi, seluruh studi akademis telah didedikasikan untuk desain yang baik, jadi kami hanya menggores permukaan di sini, tetapi harapan saya adalah bahwa prinsip dan praktik ini telah membantu mengarahkan Anda yang ingin menjadi lebih baik dalam desain ke arah yang benar. Jika Anda memiliki prinsip atau metode desain lain yang telah membantu Anda yang ingin Anda bagikan, jangan ragu untuk memberi tahu kami di komentar di bawah!

Ini untuk kita semua menjadi Desainer Web Divi yang lebih baik setiap hari!

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