Merancang Tips dan Contoh Tata Letak Intensif Konten

Untuk membuat tata letak yang komprehensif untuk web dibutuhkan keterampilan dan banyak dedikasi. Desainer web melakukan pekerjaan di mana yang paling tidak dapat dilakukan, dan dengan cara yang sangat canggih. Seiring berkembangnya halaman web, kami telah melihat kebutuhan untuk mengisi lebih banyak ruang dan menyimpan lebih banyak konten daripada sebelumnya. Jika Anda sudah memahami cara mendesain situs web, itu adalah bonus besar untuk memahami metode ini dengan lebih baik. Fitur inti dalam situs web jarang berubah. Namun dengan konten halaman lebih dari rata-rata, faktor lain ikut berperan termasuk ruang putih, tipografi, penentuan posisi elemen, antara lain.

Kami akan membahas secara terperinci untuk membahas beberapa kiat utama untuk membangun tata letak intensif konten. Ini dapat berkisar dari aplikasi jejaring sosial, situs bisnis & perusahaan besar, atau apa pun di antaranya. Penting untuk bertanya pada diri sendiri "apa yang ingin saya capai dengan desain ini?"Ketika Anda mendesain halaman karena akan membantu Anda melihat prospek yang lebih luas.

Halaman Web Kustom

Tidak peduli seberapa berpengalaman Anda dalam desain web praktis, memang benar bahwa kita semua harus memulai dari suatu tempat. Merancang halaman web khusus umumnya merupakan langkah pertama menuju karier dalam pemrograman web sebelum menerapkan spesifikasi konvensional.

Saya selalu merekomendasikan membuat daftar kecil elemen halaman yang dianggap diinstal ke dalam template. Setelah semua ini ditulis, menjadi lebih mudah untuk menyingkirkan ide-ide buruk atau mengambil permata yang terlewat atau terlupakan. Ini juga membuka jalan bagi perencanaan yang mudah untuk menghilangkan stres di jalan.

Layout Wireframe

Untuk situs web 5 halaman generik Anda akan sering melihat elemen yang sama diulang. Logo sudut atas, tautan navigasi kepala, area konten utama mungkin dipisah dengan bilah sisi dan fungsi lainnya (login, kotak pencarian, dll).

Pertimbangkan titik awal yang baik untuk memulai tata letak halaman yang terperinci. Banyak desainer merasa terbantu untuk membuat sketsa desain rangka gambar yang mungkin untuk menghilangkan cacat yang tidak begitu jelas. Ini tidak memerlukan kertas mewah dan bahkan dapat dilakukan di notebook yang rusak. Tujuan dari wireframe adalah untuk memberikan gambaran kasar tentang letak tata letak situs dengan ruang untuk mengisi rincian nanti.

Dengan tata letak konten yang berat, harus dipertimbangkan seberapa banyak platform akan berisi. Membangun tata letak 2-3 kolom tertutup untuk menampung 100+ halaman konten yang rumit dan panjang tidak akan menyisakan banyak ruang untuk bernapas. Dengan membuat sketsa dan merencanakan ke depan, Anda dapat mengontrol jumlah ruang yang luas untuk konten halaman. Ini tidak hanya merangkum area teks atau blok tetapi juga berhubungan dengan gambar dan video.

Ruang Putih Brilliant

Mungkin spasi putih faktor terpenting untuk dipertimbangkan dalam desain tata letak konten yang intensif. Konten situs web mengatur semuanya, lebih dari situs web biasa. Jika pembaca tidak dapat memahami konten karena tidak ada ruang untuk mencerna kata-kata Anda, lalu lintas akan menjadi kotor dan tidak menyenangkan.

Paragraf dan header halaman adalah tempat yang bagus untuk memulai dengan penyesuaian. Menggunakan properti CSS, Anda harus dapat memanipulasi margin eksternal dan menutup setiap elemen teks blok-garis. Ini termasuk semua pos 1-6, paragraf, blockquote, daftar, teks yang telah diformat sebelumnya, dan beberapa elemen yang lebih sedikit.

Jika Anda ingin menarik perhatian pembaca Anda, penting untuk menerapkan spasi di bawah elemen teks utama. Paragraf dan pos yang lebih kecil paling cocok digunakan dengan margin bawah 15px-25px. Untuk elemen halaman yang lebih besar seperti h1 atau h2 pertimbangkan 35px + (ini akan tergantung pada ukuran font Anda juga). Spasi antara elemen vertikal penting untuk menggulir dan memindai "sekilas". Namun tinggi garis adalah properti CSS penting lainnya yang mempengaruhi jarak antar baris dalam elemen teks. Paragraf harus memiliki nilai tinggi garis yang jauh lebih besar dibandingkan dengan ukuran fontnya sehingga ada banyak bantalan ekstra di antara garis.

Pertimbangkan Gaya Dinamis

Selain dari jarak, tipografi digital harus dimanipulasi dengan cara membuatnya melompat dari halaman. Dengan ratusan juta situs web di dunia saat ini, sudah umum untuk melihat jenis font yang sama di mana-mana.

Jika Anda mendesain tata letak untuk situs web yang sarat dengan konten, hasilnya akan tampak seperti templat lunak lainnya pada akhirnya. Ada banyak properti untuk dimainkan dengan gaya tipografi canggih. Bayangan teks, spasi huruf kurang / lebih, platform latar belakang, ikon ... daftar ini tidak ada habisnya.

Sungguh Anda adalah desainer dan kata terakhir Anda adalah hukum. Mendesain tata letak tidak sebanding dengan jalan raya jalur tunggal tanpa perubahan haluan. Selama proses ini Anda dapat kembali dan mengubah gaya, memanipulasi elemen baru atau membuang konsep seluruhnya. Pertimbangkan beberapa tips CSS bermanfaat lainnya dan bermain-main untuk melihat yang paling cocok!

Gunakan Menu Dropdown

Dengan begitu banyak konten, tidak mungkin semua tautan Anda muat di satu halaman. Ada banyak opsi tentang cara menangani kelebihan halaman. Menempatkan tautan ekstra di blok bilah sisi atau dijahit ke dalam kolom di footer situs adalah dua opsi yang bertujuan.

Pilihan paling nyaman dan praktis adalah membuat skema navigasi drop-down dengan kategori dan sub-kategori. Ada juga banyak skrip open source yang menawarkan sub-sub-kategori jika Anda memiliki topik yang sangat terperinci.

Mungkin strategi tercepat dan paling membuat frustrasi adalah memulai dengan kerangka kerja JavaScript. Beberapa yang paling populer termasuk jQuery, MooTools, atau mungkin Prototype. Semua perpustakaan ini menawarkan dokumentasi dan banyak tersedia skrip menu drop down gratis.

Rencanakan Tampilan Konten

Dalam praktiknya, jauh lebih sulit untuk membuat area tubuh yang sederhana untuk menampung semua konten yang rata-rata dikandung oleh situs web Anda. Dengan pergeseran standar peramban dan dukungan seluler semi-jelek, tak heran kami melihat situs web yang padat konten seperti itu dihancurkan. Peka terhadap setiap gaya halaman web yang ditampilkan. Beberapa akan berisi banyak gambar, yang lain mungkin berisi gambar atau video utama atau tidak ada gambar sama sekali. Setelah Anda selesai mengkode tata letak akhir, buat beberapa halaman HTML untuk menampung tampilan yang berbeda.

Ini semua akan memiliki markup internal yang sama kecuali untuk konten di dalam area konten utama. Setiap tampilan halaman individual dapat dimanipulasi dan memberikan wawasan tentang produk jadi. Alihkan ini untuk memuat semua tampilan utama yang menurut Anda akan dibutuhkan pada setiap halaman. Contoh elemen halaman lainnya dapat mencakup kotak komentar, video atau galeri yang disematkan, atau tautan halaman terpisah.

Merencanakan Strategi Secara Menyeluruh

Sebenarnya tidak sepenuhnya sulit untuk membuat tata letak web pembangkit tenaga listrik. Banyak desainer terperangkap dengan detail kecil seperti bagaimana menanam elemen blok atau hyperlink warna. Detail-detail ini penting ketika mereka mengirim pesan branding, bahkan dari elemen yang lebih kecil, pesan tersebut harus datang bersama dengan keseluruhan halaman. Secara mental rencanakan tahapan desain Anda untuk mencari tahu bagaimana pendekatan terbaik untuk setiap hambatan. Jika Anda bekerja dengan klien, sebaiknya bahas jenis konten apa yang akan mengisi halaman sebelumnya. Ini memberi Anda kesempatan untuk merencanakan ke depan dan menyusun strategi pendekatan terbaik untuk tata letak umum.

Topik lain yang sangat lucu adalah desain ponsel. Pasar baru ini melihat ekspansi luar biasa tidak hanya pada smartphone tetapi juga PC tablet yang kuat. Ini berarti pengguna dapat mengakses tata letak Anda dari layar ponsel - pastikan konten tidak meluap dan disajikan dengan rapi.

7 Contoh situs web konten berat

Berikut adalah beberapa contoh tangkapan layar dari situs web populer yang banyak kontennya. Ini adalah sebagian besar merek terkenal baik di pasar fisik dan digital. Lihatlah beberapa ide di bawah ini untuk menemukan inspirasi dalam proyek Anda sendiri. Juga merasa bebas untuk membagikan tata letak web berat konten lainnya di bagian komentar.

Clicker

Clicker adalah aplikasi jejaring sosial baru untuk pecinta TV dan film. Anda dapat mendaftar untuk akun baru dan menemukan beberapa acara TV klasik favorit Anda, diarsipkan berdasarkan musim dan daftar episode. Anda dapat membandingkan situs dengan IMDB dengan lebih sedikit informasi dan lebih banyak konten video!

Masa Depan Desain Web

Future of Web Design 2011 akan meluncurkan berbagai hal di London pada musim semi mendatang. Lihatlah halaman beranda untuk informasi lebih lanjut dan contoh yang bagus dari desain tata letak berbasis teks. Semua detailnya benar-benar dibagikan dan menawarkan pembicara, jadwal, lokakarya, sponsor, dan banyak lagi.

Tuhan mungkin

Dalam tata letak yang lucu ini, karakter utama Lord Likely telah "kartun" dan dilubangi menjadi ilustrasi. Situs ini dibagi menjadi 3 kolom dengan setiap konten olahraga baru, iklan, tautan feed, dan arsip. Desainnya sendiri sangat retro dan pandai mengambil desain ilustrasi.

Microsoft

Sebagian besar penggemar teknologi akrab dengan Microsoft. Bahkan, kebanyakan orang yang mengerti apa itu komputer dapat memberi Anda bahkan deskripsi singkat tentang Microsoft dan Bill Gates. Halaman muka mereka berisi konten untuk puluhan paket perangkat lunak, pembaruan berita, siaran pers, dan informasi pengembang. Sedikit jalan di bawah halaman Anda dapat melihat menu tab vertikal dengan peralihan konten dinamis.

Tanah Mesin Pencari

Search Engine Land adalah majalah web populer yang berfokus pada Mesin Pencari dan pemasaran Internet. Mereka sering memperbarui dengan posting berkualitas luar biasa dan mendorong ratusan ribu orang ke situs mereka setiap hari. Halaman utama dibagi menjadi 3 kolom yang digunakan untuk menampung setiap modul konten dan iklan.

Gedung Putih

Desain Gedung Putih Amerika Serikat terlihat sangat bersih dan profesional. Ada banyak informasi mengenai jadwal presiden dan peristiwa politik penting lainnya. Salah satu trik untuk mengurangi ruang halaman adalah penambahan slider konten kecil ke arah heading halaman. Ini bagus untuk menampilkan 3-4 tajuk berita besar tepat ketika pengunjung Anda membuka halaman.

Portal Yahoo

Sejauh situs web konten besar pergi Yahoo! harus menjadi tren menuju puncak. Yahoo! menawarkan ratusan layanan kepada pelanggan mereka termasuk webmail, berita, video, dan bahkan pencarian web. Lihat beberapa Y! tautan portal dari bilah sisi untuk melihat perbandingan templatnya.

Kesimpulan

Ini hanya beberapa poin kunci dan langkah-langkah untuk membangun tata letak yang menuntut konten yang konkret. Halaman web dengan reservoir konten yang besar sering dianggap sebagai beban untuk menyimpan SEO dan tidak ada yang bernilai nyata. Desain adalah segalanya karena kesan pertama yang didapat pengguna dari setiap situs web. Dengan volume konten yang tinggi, ini bisa menjadi bencana dengan kekacauan dan generalisasi yang berlebihan. Jangan pernah berhenti berlatih dan hanya dengan beberapa proyek Anda akan mendapatkan penguasaan untuk membayangkan tata letak intensif konten.