Tata Letak Kotak Di Situs Portofolio WordPress: Tip & Contoh Desain

Struktur paling umum dari situs portofolio WordPress mana pun adalah kisi. Ini menunjukkan beberapa pekerjaan sekaligus sehingga pemirsa dapat memindai dengan cepat dan memilih apa pun yang menarik perhatian mereka.

Tapi apa yang membuat tata letak kotak yang kuat untuk portofolio? Dan apa yang harus Anda pertimbangkan saat meluncurkan situs portofolio Anda sendiri?

Dalam posting ini saya akan membagikan beberapa tips dan saran tentang desain tata letak grid terbaik untuk portofolio WordPress.

Desain Grid Ketat

Saat Anda menggunakan kisi, sebaiknya desainnya tetap rapat. Dengan cara ini item-item tersebut saling berdekatan untuk menjelajah dengan cepat dan mendorong pengguna untuk berinteraksi dengan konten.

Struktur grid biasanya berbeda berdasarkan jenis konten portofolio. Anda mungkin perlu menambah atau mengurangi padding tergantung pada foto dan tata letak Anda. Misalnya, karya seni bisa terasa buram saat berdekatan sehingga portofolio seni digital mendapat manfaat dari ruang ekstra.

Tetapi seorang desainer mungkin menjaga pekerjaannya tetap berdekatan karena tangkapan layar masih mudah dilihat, bahkan dari kejauhan. Anda dapat melihat contoh yang bagus di tema Ink untuk WordPress.

Ini sama sekali tidak menggunakan bantalan di antara elemen kisi mana pun. Blok persegi ini sejajar rapat sehingga pengguna melihat semuanya sekaligus.

Ini juga menggunakan gambar mini yang lebih kecil sehingga cenderung menarik perhatian dengan cepat. Saya sangat menyukai gaya ini dan ini adalah favorit pribadi karena meninggalkan kesan yang kuat. Perhatikan bagaimana setiap foto terlihat jelas kontras dengan yang lainnya.

Jika Anda memiliki pekerjaan yang dapat mengambil manfaat dari gaya ini, lihatlah tema Tinta. Ini adalah cara mudah untuk membuat jenis kisi portofolio ini tanpa mengkodekannya dari awal.

Tapi satu alternatif yang bagus adalah Bramble, yang memiliki sedikit lebih banyak ruang di antara masing-masing bagian.

Tema WordPress ini hadir dengan beberapa tata letak portofolio sehingga Anda benar-benar dapat memilih gaya mana yang paling Anda sukai. Beberapa tata letak portofolio memiliki gambar mini yang saling berdekatan, yang lain memiliki banyak bantalan di antara elemen-elemen dalam kisi.

Tetapi hal # 1 yang perlu dipertimbangkan adalah kelumpuhan analisis. Hal ini terjadi ketika terlalu banyak pilihan yang disajikan dapat membuat seseorang merasa tidak dapat memilih salah satunya.

Selama entri portofolio Anda terasa unik dan memiliki cukup ruang (atau kekurangan ruang) untuk berdiri sendiri, Anda akan mendapatkan banyak klik-tayang. Dan bukankah itu inti dari portofolio?

Grid Masonry

Tidak banyak orang yang tahu tentang kisi-kisi pasangan bata tetapi mereka sudah ada sejak lama.

Ini biasanya menggunakan JavaScript untuk mengatur item ke dalam kotak berdasarkan ketinggian vertikal yang bervariasi. Jadi, daripada menambahkan gambar mini yang sempurna dengan piksel pada ukuran yang sama, Anda dapat menambahkan elemen portofolio yang berbeda pada berbagai ukuran dan tetap menyesuaikannya.

Tema WordPress Weston memiliki fitur ini di halaman portofolio fotografi minimalisnya. Ini secara alami menargetkan fotografer yang ingin mendapatkan pekerjaan mereka secara online, dan kisi-kisi batu adalah pilihan yang cocok untuk fotografi ketinggian variabel.

Setiap foto menemukan jalannya secara alami ke dalam kisi dengan mengambil jumlah ruang yang tepat. Anda biasanya dapat menyesuaikan jumlah kolom dan tinggi kolom yang tepat, tetapi ingat bahwa itu akan berbeda berdasarkan ukuran perangkat.

Jika Anda menyukai tata letak layar penuh, intip tema Notio. Ini menggunakan desain kisi batu dengan gambar mini yang ketat dan efek animasi khusus.

Perhatikan kisi-kisi dari kedua tema ini juga bervariasi dalam keketatannya. Satu memiliki spasi ekstra di antara gambar sementara yang lain memiliki thumbnail yang disejajarkan dengan erat satu sama lain.

Tata letak kisi mengikuti beberapa tren dan Anda dapat memilih untuk mengikuti mana yang paling Anda sukai.

Arahkan Detail: Ya atau Tidak?

Banyak portofolio menyertakan detail arahkan kursor yang muncul di atas gambar mini saat mengarahkan kursor. Efek ini biasanya tidak terbawa ke seluler, tetapi jelas merupakan tren umum untuk situs portofolio desktop dengan thumbnail besar.

Setiap gambar mini harus tertaut ke halaman item portofolio internal, atau setidaknya membuka galeri gambar yang terkait dengan bagian itu. Thumbnail tidak boleh membentuk seluruh portofolio.

Tetapi menambahkan detail dapat mendorong klik yang lebih tinggi dan membuat orang menggali lebih jauh ke dalam situs. Tema Buat WordPress menggunakan efek animasi khusus saat mengarahkan kursor untuk menarik perhatian ke detail kursor.

Saat kursor Anda mengarahkan item portofolio apa pun, Anda akan menemukan dua informasi penting:

• Nama/judul item portofolio
• kategori barang

Terkadang detail kecil ini dapat secara radikal meningkatkan pengalaman pengguna. Jika seseorang menelusuri pekerjaan desain grafis tertentu, mereka dapat menelusuri berdasarkan kategori dan memeriksa judul sebelum mengklik.

Tetapi di lain waktu, detail ini dapat menjadi tidak perlu bertele-tele dan dapat memakan terlalu banyak ruang. Itulah mengapa beberapa desainer melewatkan detail ini, seperti yang akan Anda temukan di tema WordPress Gather.

Thumbnail biasa dengan efek hover sederhana. Nyaman di mata dan semua detail ditemukan di bawah gambar mini sehingga tidak menghalangi gambar.

Tren ini tidak memiliki jawaban "benar" yang jelas. Detail hover berfungsi dengan baik untuk beberapa orang, tetapi bagi yang lain fitur ini dapat menjadi sumber gangguan kecil.

Temukan apa yang tampak terbaik di situs Anda dan ukur berdasarkan selera Anda sendiri. Tetapi apakah detailnya muncul saat mengarahkan gambar mini, atau di bawah gambar mini, coba tambahkan di suatu tempat di halaman.

Tangkap Mata Dengan Foto Menarik

Setiap tata letak kisi menggunakan gambar mini untuk menarik perhatian. Thumbnail ini biasanya menjual sebagian dari pekerjaan Anda dengan mendorong orang untuk mengklik dan membaca lebih lanjut.

Karya Anda mungkin seni digital, desain web, desain ikon, arsitektur UX, atau apa pun dengan daya tarik visual. Tapi intinya adalah Anda benar-benar membutuhkan daya tarik visual untuk menjual. Dan itu berasal dari foto-foto yang menarik.

Tema WordPress Mellow minimalis menggunakan berbagai foto masing-masing dengan gaya yang berbeda. Ini bukan foto proyek "benar" karena sebagian besar adalah placeholder. Tetapi mereka menawarkan contoh yang jelas untuk menjual pengunjung langsung dari pemuatan halaman pertama.

Saya sarankan menelusuri situs portofolio lain untuk melihat apa yang digunakan desainer lain untuk gambar galeri mereka.

Lihat apa yang dapat Anda gunakan untuk situs Anda sendiri dan jenis pekerjaan apa yang dapat menarik perhatian. Apa yang terbaik yang menunjukkan keahlian Anda? Bagian mana dari setiap proyek yang paling menarik secara visual atau membantu menjual karya Anda kepada orang lain?

Sekali lagi ini adalah pertanyaan yang sangat terbuka tetapi Anda akan ingin mencoba banyak strategi yang berbeda. Saya biasanya menemukan bahwa foto close-up menarik banyak perhatian, terutama dalam bentuk thumbnail. Anda dapat melihat campuran dari contoh-contoh ini dengan tema Beckett di halaman portofolio.

Dalam tata letak kotak, Anda hanya memiliki begitu banyak ruang untuk setiap proyek. Jadikan ruang itu penting!

Jika Anda tahu persis seberapa besar thumbnail Anda, maka Anda sudah mendapat keuntungan besar. Ini memungkinkan Anda memotong banyak thumbnail berbeda di Photoshop untuk melihat komposisi mana yang paling Anda sukai untuk item portofolio Anda.

Bergerak kedepan

Desain kisi cukup sederhana dan banyak tema portofolio WordPress disertakan secara default. Tetapi tata letak kotak tidak akan menawarkan banyak hal tanpa karya desain yang spektakuler untuk dipamerkan.

Saya harap posting ini menawarkan tip berharga bagi desainer dan kreatif yang meluncurkan portofolio mereka sendiri. Desain kisi paling umum pada portofolio sehingga pengunjung akan mengharapkannya. Dengan menerapkan tren ini (atau menggunakan tema ini), Anda dapat menarik lebih banyak perhatian dan idealnya membawa lebih banyak pekerjaan klien dari waktu ke waktu.