30 Contoh Tata Letak Situs Web yang Terlalu Besar

Diterbitkan: 2017-01-27

Saat duduk untuk merencanakan situs web, Anda mungkin akan mempertimbangkan sejumlah faktor. Ini berkisar pada audiens target umum Anda dan apa yang mungkin mereka cari. Karena desktop semakin besar, ada lebih banyak kebutuhan untuk ukuran font yang lebih besar. Tipografi dan grafik halaman web yang terlalu besar biasanya akan membawa pengunjung lebih dalam ke tata letak Anda.

Saya ingin melihat beberapa tren desain yang terkait dengan membangun tata letak situs web yang terlalu besar. Istilah "kebesaran" menyiratkan bahwa mungkin desainnya terlalu besar, namun, saya pikir lebih akurat untuk mengatakan bahwa situs web tampak jauh lebih besar daripada desain biasa. Situs web sering menggunakan font yang lebih kecil untuk menghemat ruang dan tampil lebih profesional, sejak 10+ tahun yang lalu. Tetapi tidak ada yang tidak profesional tentang meningkatkan ukuran teks Anda dan memasukkan lebih banyak ruang di antara konten halaman Anda dalam desain yang lebih modern.

Menangkap Mata Di Atas Lipatan

Salah satu keuntungan terbesar untuk elemen situs web yang lebih besar adalah daya tarik yang akan Anda terima dari pengunjung. Ini berarti ketika Anda menyiapkan elemen halaman besar di paro atas, pengunjung Anda cenderung menggulir ke bawah dan memeriksa konten Anda lainnya. Ini tidak akan terjadi dengan setiap pengunjung, tetapi jauh lebih mungkin terjadi dengan desain glamor.

tata letak desain web bronco united kingdom

Tata letak agensi untuk Bronco memiliki perpaduan unik antara elemen halaman yang lebih kecil dan lebih besar. Di bagian paling atas Anda dapat melihat logo mereka dan beberapa tautan terkait ke halaman layanan mereka. Masing-masing dari berbagai warna dan efek teks secara alami akan menarik perhatian Anda tepat setelah halaman selesai dimuat. Dan karena sepertinya ada lebih banyak lagi yang dapat ditemukan di bagian bawah halaman, Anda mungkin merasa penasaran untuk menggulir ke bawah dan melanjutkan membaca.

1minus1 situs web agen ilustrasi grafis teks besar

Di situs web untuk 1minus1 saya merasa ada pendekatan serupa tetapi sangat fokus pada grafik. Setiap tautan navigasi teratas cukup besar untuk membaca dengan jelas ke mana mereka pergi. Dan desain judulnya memang menarik, tetapi grafis halaman bawah yang awalnya membuat Anda berkata "wow!". Ini adalah respons luar biasa yang ingin Anda peroleh dari pengunjung dalam beberapa detik pertama setelah mendarat di beranda Anda.

Gambar Layar Besar

Saya suka melihat tayangan slide foto dan pratinjau video langsung di beranda situs web baru mana pun. Ini adalah koneksi yang diperluas yang menawarkan wawasan singkat tentang perusahaan mereka, apa yang mereka lakukan, dan apa yang telah mereka lakukan di masa lalu. Saya terutama berpikir elemen halaman ini bekerja dengan baik di portofolio dan agensi desain, seperti situs web untuk Capcan.

foto desain tata letak capcan galeri kebesaran

Di beranda mereka, Anda akan menemukan tayangan slide gambar layar penuh besar yang bertransisi di antara sejumlah karya yang berbeda. Saya juga suka pada mereka halaman portofolio yang menggunakan kisi thumbnail layar penuh untuk daftar tampilan. Grafik yang lebih besar ini jauh lebih mudah bagi pengguna untuk melihat dan berinteraksi dengannya.

harga tinta startups desain tata letak situs web kemeja

Juga di beranda untuk Tinta Harga Anda akan melihat fitur desain serupa. Satu grafik beranda yang solid bersama dengan beberapa kolom di bawahnya. Setiap item akan menampilkan desain ikon yang berbeda sebagai bagian heading. Ini adalah fitur yang bekerja dengan baik untuk bisnis dan studio profesional yang ingin cepat berbagi bidang keahlian mereka.

Salinan Web yang Dapat Dibaca

Alasan favorit pribadi saya untuk memanfaatkan elemen halaman yang lebih besar adalah keterbacaan. Pada perangkat seluler dan tablet, Anda masih dapat dengan cepat menelusuri konten – terutama menggunakan kueri media yang secara otomatis menyesuaikan ukuran font. Tetapi untuk pembaca di komputer desktop, ini menyediakan metode yang lebih sederhana untuk melewati dan membaca setiap paragraf konten Anda.

Tata letak situs web besar pengembang pembuat kode portofolio Eshbeata

Situs web portofolio untuk Mohammad Eshbeata menampilkan contoh utama salinan web yang lebih besar dan lebih mudah dibaca. Desain beranda dibangun menggunakan pengguliran paralaks yang meminimalkan upaya pengunjung. Juga warna font sangat kontras dengan perubahan gaya latar belakang.

portofolio trent walton minimalis putih hitam

Trent Walton menggunakan pendekatan yang lebih minimalis dalam desain webnya. Ini adalah pilihan utama untuk kontras karena teks Anda akan besar, tajam, dan mudah dipindai dari jarak jauh. Masalah terbesar adalah tidak semua orang akan memiliki situs web untuk menggunakan ini untuk kualitas desain. Saya sangat mengagumi situs web Trent karena berbagai pilihan font, dan bagaimana semuanya tampak sangat alami dalam tata letak.

Latar Belakang Layar Penuh

Bagaimana kita bisa berbicara tentang situs web yang terlalu besar tanpa mempelajari gambar latar belakang layar penuh? Ada banyak plugin open source gratis seperti Backstretch yang memungkinkan Anda membuat latar belakang layar penuh dengan sangat cepat.

tata letak gambar layar penuh latar belakang jdawgs

Contoh dari J Dawgs juga menyertakan beberapa animasi teks yang sangat bagus. Saya pikir semua estetika ini ditambah dengan gambar latar belakang memberikan pengalaman yang sangat unik kepada pengguna. Namun situs web ini biasanya digunakan untuk konsumsi konten statis, dan gambar latar belakang yang besar mungkin menghalangi pilihan font Anda.

beranda situs web startup kin hr bigdesign

Coba gunakan segmen halaman Anda untuk dipecah menjadi elemen konten baris blok. Ini membuat mendesain font dan grafik besar menjadi lebih mudah karena Anda dapat membagi slide horizontal saat pengguna menggulir halaman secara vertikal ke bawah. Tetapi sekali lagi, fitur ini sebagian besar menguntungkan ketika Anda dapat memanfaatkan desain beranda Anda dengan baik. Tidak setiap situs web akan memerlukan gambar latar layar penuh kecuali jika itu secara langsung relevan dengan salinan web.

Efek Paralaks

Situs web yang menggunakan fitur pengguliran paralaks sering kali memiliki bilah navigasi yang memungkinkan pengunjung melompat di antara bagian halaman. Toolbar ini umumnya akan dipasang di bagian atas halaman untuk memudahkan akses. Banyak desainer membenci teknik ini, tetapi saya masih sangat menikmati aksesibilitasnya. Desain ulang terbaru dari Smokey Bones menampilkan elemen yang sangat besar dengan scrolling navbar yang tetap.

tata letak situs web restoran bbq smokey bone tipografi paralaks

Saya selalu menjadi penggemar restoran ini dan saya sering memeriksa situs web mereka. Ini cukup mengejutkan untuk menemukan desain baru dan menyaksikan betapa hebatnya tampilan seluruh antarmuka. Masing-masing panel horizontal menggunakan beberapa jenis tekstur atau gambar latar belakang, dan isinya masih cukup jelas terbaca. Dengan menyimpan semua ini di satu halaman, Anda menyelamatkan pengguna dari lebih banyak permintaan HTTP dan menghemat waktu mereka untuk menelusuri informasi.

berkembang solo desain agensi portofolio so1o

Desain paralaks adalah topik yang jauh lebih rumit, tetapi saya merasa ini cocok dengan konten yang terlalu besar. Grafik, video, teks, dan apa pun yang Anda tempatkan di situs web Anda akan mudah diakses dan dipahami. Desain beranda Thrive Solo menggunakan banyak lingkaran dan ikon untuk memuat bagian konten alternatif. Ini bisa menjadi teknik yang bagus untuk menjembatani kesenjangan untuk menjelaskan tujuan situs web Anda sambil juga membuat pengunjung penasaran dari kejauhan.

Galeri Pamer

Seiring dengan tren desain umum ini, saya juga ingin menyertakan galeri kecil inspirasi desain situs web. Koleksi ini berfokus pada situs web yang menggunakan grafik besar, logo besar, latar belakang besar, dan tipografi besar. Situs web yang lebih besar tidak selalu lebih baik, namun mereka dapat menarik banyak perhatian hanya dalam waktu singkat. Lihat apakah Anda dapat menemukan tema desain yang sudah dikenal di etalase ini, atau bahkan menunjukkan tren baru dengan penelitian Anda sendiri.

Manos

Desain warna-warni situs web agensi Manos

pengecoran bit

tata letak bitfoundry portofolio teks header besar

Kurungan

antarmuka desain tata letak situs web cageapp

Nova Crystallis

Majalah game Nova Crystallis square-enix tipografi besar

ZHNG Studio

zhng design studio portofolio situs web bigtext

Mozilla Firefox

halaman arahan browser mozilla firefox

Kepercayaan Tema

homepage themetrust gambar latar belakang layar penuh besar

Data Didorong London

gambar latar belakang layar penuh yang didorong oleh konferensi london

papan tokek

latar belakang startup situs web papan tokek besar

Tempat Benih

tata letak situs web demo seedpot langsung tipografi besar

Leaderbe

desain beranda tata letak situs web konsultasi leaderbe

Cujo

desain portofolio beranda cujo jp tata letak besar yang terlalu besar

Carsonified

desain inspirasi tata letak situs web carsonified

KK Desain

tata letak portofolio desain web krishnankutty

24 cara

Tata letak inspirasi desain web majalah blog 24ways

Ikon Miring

ikon miring tata letak desain situs web denise chandler

Lab Paradoks

tipografi portofolio desain web grand rapids yang indah besar

Latar Belakang Px

px pixel desain latar belakang studio tata letak situs web

Pak Henry

tata letak situs web biro desain biro internet jerman

Sesederhana Susu

sesederhana tata letak situs web studio desain susu

Apa yang Bersorak?

apa daftar portofolio studio desain ceria

Penghargaan Visioner Web

penghargaan webvisionary latar belakang ilustrasi tata letak situs web

Industri Snowden

inspirasi antarmuka tata letak situs web industri snowden

ulasan langka

tata letak situs web studio desain antarmuka pengguna rareview

Boxee

gambar latar beranda startup layar penuh kotak fotografi besar

Fajne Chlopaki

Tata letak situs web antarmuka desain portofolio Fajne Chlopaki

Gabungkan Agensi

studio tata letak situs web agensi digital menggabungkan inspirasi

Chris Boddy

tata letak portofolio antarmuka situs web copywriting chris boddy

Francisco Inchauste

finch situs web penulis tata letak situs web startups