Saya mencari sumber daya tentang komposisi halaman web.
Saya ingin belajar tentang pro dan kontra dari berbagai tata letak halaman dan teknik untuk menggerakkan mata di sekitar halaman.
Saya mencari sumber daya tentang komposisi halaman web.
Saya ingin belajar tentang pro dan kontra dari berbagai tata letak halaman dan teknik untuk menggerakkan mata di sekitar halaman.
Jawaban:
Pertanyaannya dapat memiliki jawaban yang cukup luas yang membutuhkan hari dan hari belajar, tetapi saya akan mencoba sesuatu yang singkat.
Anda harus mendesain tata letak Anda mengikuti kisi-kisi yang tidak terlihat, seperti di kertas sehingga di web yang akan membantu Anda menjaga segala sesuatu pada keselarasan dan kerapian yang tepat. Kesulitannya adalah bahwa di web, ukuran dan proporsi dapat diubah, dan konten bersifat dinamis pada banyak aspek (pengaturan preferensi, kalibrasi monitor, penerangan, ukuran monitor, browser, sistem operasi, dll ...).
Untuk alasan ini, mari kita tidak mempertimbangkan proporsi antara hal-hal, tetapi mari kita berkonsentrasi pada pengaturan klasik. Layout klasik adalah header di atas, footer di bawah, dan 3 kolom di tengah (dengan kiri dan kanan lebih kecil dari pusat). Itu bisa berupa situs web pada dua kolom atau lebih kolom, semuanya tergantung pada seberapa banyak informasi yang Anda miliki, dan seberapa banyak Anda ingin menampilkan atau berapa banyak "udara" (alias: ruang putih) yang ingin Anda tempatkan di antara informasi yang Anda miliki .
Catatan: Perlu diketahui bahwa ada beberapa batasan teknis CSS seperti menyejajarkan kolom (yang berada di baris horizontal yang sama) pada ketinggian yang sama ketika mereka memiliki konten berbeda yang mengisi kolom. Orang-orang mencoba untuk memperbaiki dengan solusi kreatif sampai browser akan memperbarui rendering CSS mereka pada standar terbaru
Ada 4 kemungkinan tata letak:
1) Memperbaiki tata letak: Anda menentukan setiap div dalam px yang pas di dalam ukuran tertentu yang akan terlihat di dalam browser (misalnya di dalam: 800x600)
pro: desainnya stabil: Anda bisa menggunakan lebih banyak ruang putih bergantung pada layar pengguna
Dari solusi ini, Anda dapat memutuskan untuk ke kiri (mengetahui bahwa celah besar akan ada di kanan dan Anda bisa bermain dengan latar belakang grafis), atau menyelaraskan pusat (membagi ruang putih di kiri dan kanan, mengurangi jumlahnya daripada rata kiri).
2) Tata letak cairan: Halaman akan beradaptasi dengan ukuran layar, memindahkan dan mengadaptasi konten
pro: selalu akan mengisi halaman tanpa meninggalkan ruang putih yang tidak terkontrol: Anda akan kehilangan kontrol pada proporsi dan kisi tempat Anda memposisikan konten Anda (contoh: satu paragraf pada lebih banyak baris yang menjadi satu kalimat baris panjang pada resolusi layar yang lebih tinggi)
Contoh Teknik atau satu lagi yang lebih kompleks
3) Tata letak asli: Mereka didasarkan pada melanggar aturan tata letak dan kisi. Mereka tidak menggunakan tata letak kolom klasik dan sebagian besar didasarkan pada efek desain grafis, seperti menampilkan informasi di seluruh situs web, dan mereka menggunakan penentuan posisi yang lebih absolut daripada solusi lain. Baik untuk bersenang-senang artistik di web atau portofolio gila dan tidak lebih (saya tidak menentangnya, tetapi mereka membutuhkan pengetahuan tentang aturan komunikasi desain web, teknis, dan upaya kreatif yang baik).
Saya tidak menemukan contoh saat ini, maaf.
pro: estetika hebat dan kontra asli: Anda tidak dapat menggunakan ini untuk situs web komersial, atau untuk blog atau untuk apa pun dengan sejumlah besar info.
4) Tata letak tetap dinamis: Ini yang saya gunakan saat ini untuk situs web pribadi saya, dan untuk situs web klien yang memiliki waktu untuk dihabiskan untuk membuat situs web fleksibel tetapi terkendali. Ini tidak lebih dari tata letak tetap, tetapi dengan javascript yang terus-menerus memeriksa ukuran layar Anda (dalam hal mengubah ukuran atau untuk menentukan ukuran mana itu) dan memberikan css yang sesuai untuk ukuran itu. Jadi, berapa pun ukuran layar Anda, Anda akan selalu memiliki kontrol yang baik. Misalnya jika saya memiliki tata letak 3 kolom, jika saya mengubah ukuran browser, saya dapat memutuskan bahwa kolom ketiga akan hilang dan pergi di bagian bawah konten, sebelum catatan kaki.
pro: Kontrol lengkap + fleksibilitas con: Banyak upaya dalam mendesain dan men-debug waktu yang dihabiskan untuk memeriksa apakah semuanya baik-baik saja, bahkan berpikir ke depan karena Anda akan menambahkan konten baru di kemudian hari dan semuanya harus bekerja dengan baik.
Artikel tempat saya mengambil inspirasi (Saat ini jquery melakukan pekerjaan besar dengan mengubah ukuran (), 3 tahun yang lalu saya memiliki skrip panjang untuk itu :))
Catatan terakhir Saat ini ada tren baru pada desainer web grafis (orang-orang yang lebih banyak desainer grafis daripada programmer), yang menggunakan tata letak tetap mereka merancang setiap halaman dan blog mereka seperti halnya majalah dengan artikel mereka. Kreatif, dan merancang setiap artikel dengan gayanya sendiri.
Eksponen adalah Jason Santa Maria
Artikel lainnya:
Ada lebih banyak artikel di luar sana. Cari "tata letak css". Atau ikuti tempat-tempat di mana berbicara tentang kegunaan dan desain seperti Signal Vs Noise
Semua yang perlu diketahui tentang komposisi adalah pengalaman dan studi, atau pengujian kegunaan (coba-coba). Tempatkan seseorang di depan situs web Anda dan lihat bagaimana mereka bereaksi terhadap desain Anda. Atau alat pelacak Mata :)
Saya otodidak jadi saya tidak bisa menyarankan tentang buku tentang komposisi, tetapi buku yang bagus tentang tata letak kotak dapat banyak membantu Anda.
Jika Anda menginginkan sistem yang baik untuk meletakkan desain web maka lihatlah sistem grid 960 . Ini yang saya gunakan untuk sebagian besar layout saya. Saya pikir ada juga pilihan template yang baik untuk digunakan dalam paket yang berbeda, seperti Photoshop dan InDesign serta beberapa yang dapat dicetak untuk semua kebutuhan mencoret-coret situs web Anda.
Juga contoh yang baik dari tata letak yang berbeda dapat dilihat di sini: http://designshack.co.uk/articles/layouts/10-rock-solid-website-layout-examples