Gaya saat di Web Desain Modern
Dalam artikel ini saya mencoba untuk meringkas saat ini state-of-the-art dalam desain grafis untuk halaman web (akhir tahun 2006, tetapi masih sangat relevan saat ini), dan mengidentifikasi fitur khas yang membuat halaman web modern terlihat segar, menarik dan mudah digunakan.
Fitur kunci dari desain web modern adalah kesederhanaan.
Untuk mempelajari bagaimana menerapkan desain web sederhana untuk situs Anda sendiri,Anda perlu membaca "Simpan Pixel - The Art of Simple Desain Web" , yang akan membawa Anda melalui set lengkap alat desain sederhana, digambarkan dengan 22 sebelum dan sesudah pendesainan ulang.
Saya senang untuk mengatakan bahwa desain web yang lebih baik hari ini daripada sebelumnya - dan itu terus meningkatkan. Itu bukan hanya karena ada situs web yang lebih di luar sana, sehingga hal-hal yang lebih baik untuk melihat. Masih banyak sekali mentah juga.Saya hanya berpikir bahwa web designer lebih tahu lebih banyak tentang bagaimana merancang daripada sebelumnya.
Contoh di bawah ini (yang saya akan berguling waktu) menunjukkan teknik desain grafis modern yang sangat baik. Mereka semua terlihat baik, dan jelas dan mudah digunakan.
Hotties
Saya tidak mengatakan ini adalah yang terbaik situs di luar sana, hanya saja mereka khas desain terbaik saat ini.
»Iconbuffet.com
Fitur umum
Situs besar di atas berbagi fitur desain berikut:
- Tata letak sederhana
- Orientasi Centered
- Desain isi, bukan halaman
- Efek 3D, digunakan hemat
- Lembut, warna latar belakang netral
- Warna yang kuat, digunakan hemat
- Lucu ikon, digunakan hemat
- Banyak spasi
- Bagus teks besar
Mari kita lihat fitur ini satu per satu.
Tata letak sederhana
Rasanya seperti kita melihat lebih simple 1 - dan desain 2-kolom dibandingkan tahun-tahun sebelumnya.
Seluruh nuansa yang Anda dapatkan adalah bahwa desainer umumnya sepakat bahwa halaman sederhana bekerja lebih baik.
Halaman ini dibaca dengan cara langsung dari atas ke bawah, dan Anda tidak menemukan mata Anda melewatkan sekitar berusaha untuk bekerja apa yang harus melihat. Ini adalah jauh lebih tenang dan lebih solid pengalaman browsing daripada di masa berlalu.
Orientasi Centered
Hal lain yang Anda ingat tentang semua picks panas di atas adalah bahwa mereka semua diletakkan di sekitar poros tengah.
Padahal beberapa tahun yang lalu, Anda akan menemukan banyak layout cair dan kiri-aligned layout fixed-width, konten saat ini berjalan di tengah layar.
Layout berorientasi kiri-jauh kurang umum daripada mereka dulu.
Juga, cair (full-width) tata letak yang kurang populer.
Kebijaksanaan selalu bahwa kita harus mencoba untuk mendapatkan informasi sebanyak "di atas flip" (yaitu terlihat di layar tanpa scrolling).Layout cair mencapai hal ini.
Namun, saat ini kita tampaknya lebih nyaman dengan scrolling, dan kami bersedia untuk memasang dengan bergulir untuk kepentingan peningkatan ruang putih dan tinggi baris.
Desain isi, bukan halaman
Baik desain web modern menempatkan kurang energi ke dalam merancang latar belakang halaman - kanvas dan halaman permanen fitur - dan lebih fokus pada merancang konten itu sendiri.
Ini adalah salah satu tema sentral Simpan Pixel, ebook saya pada seni desain web sederhana.
Kami melihat efek di:
- Freer, kurang kotak-in layout halaman
- Lembut, sederhana, halaman surut "furniture"
- Warna yang kuat dan efek 3D yang digunakan untuk menarik perhatian pada konten itu sendiri, termasuk branding utama
- Fokusnya adalah pada membuat subjek situs terlihat baik, daripada membuat desainer web terlihat baik (yang lebih baik bagi para desainer dalam jangka panjang!)
Untuk mengambil ...
Desainer Apa yang harus belajar dari tren ini adalah bahwa hal itu tidak cukup untuk merancang sebuah halaman kosong, untuk diisi dengan konten nanti. Seperti yang saya sudah menulis di tempat lain, konten adalah masalah kita. Sebagai desainer, kita komunikator (tidak dekorator) dan konten situs membawa sebagian besar pesan kami.
Mengapa pusat-menyelaraskan?
Saya suka pusat-menyelaraskan, dan telah cenderung menggunakannya pada desain saya untuk sementara waktu.
Ketika konten duduk di tengah layar, rasanya up-depan dan percaya diri.
Hal ini juga memberikan rasa kesederhanaan dan keseimbangan, yang mencerminkan bergerak menuju bersih, lebih Zen, desain.
Desain berpusat paling umum adalah baik fixed-width (lebar yaitu master dalam pixel atau persen) atau kadang-kadang tampilannya lebar (yaitu lebar master dalam ems, misalnyaForecast Advisor ). Manfaat membatasi lebar konten (khususnya dengan zoom-lebar, yang mengubah ukuran sebagai perubahan ukuran font) adalah bahwa garis-panjang dicegah dari mendapatkan terlalu lama pada layar yang lebih besar. (Garis sangat panjang teks kurang efisien.)
Namun itu juga mungkin untuk memiliki tata letak cair dengan pusat-orientasi, sebagaisitus Energi Alternatif Toko menunjukkan.
Di situs ini, hanya berpusat logo membawa, menghadap ke depan nuansa ramah dari situs berpusat, sementara mendapatkan banyak konten terlihat di layar.
Efek 3D, digunakan hemat
Setiap salah satu dari hotties menggunakan gradien halus, baik untuk memberikan sebuah bar kebulatan sedikit, untuk menciptakan perasaan lembut ruang di latar belakang, atau untuk membuat ikon menonjol dengan embossing dan halus drop-bayangan.
Refleksi & memudar sangat lazim. Drop-bayangan masih digunakan, tapi dengan hati-hati.
Merek putaran berkedip di mana-mana.
Lembut, warna latar belakang netral
Semua hotties memiliki latar belakang polos, yang paling populer adalah memudar putih dan abu-abu. Ini memberikan dingin, netral, basa lunak dengan mana Anda dapat flash warna yang kuat untuk menarik mata.
Warna yang kuat, digunakan hemat
Sebuah lunak, latar belakang gaya adalah sempurna untuk menambahkan fitur eye-catching.Warna yang kuat dan constrast tonal yang besar untuk menggambar mata ke unsur yang lebih penting pada halaman.
Iomega menggunakan warna yang lebih kuat dari yang lain, dengan gelap daerah promosi merah intens. Namun ini tidak menenggelamkan sisa halaman, karena warnanya konsisten dan sederhana dalam bentuk.
Lucu ikon, digunakan hemat
Ada tema di sini: Jangan gunakan terlalu banyak elemen yang menarik pada tampilan halaman yang sama (yaitu yang menarik bagi mata dan menarik perhatian pengguna).
Seperti halnya warna yang kuat dan efek 3D, menarik ikon dan tombol dapat menambahkan bahwa sedikit cat untuk membantu memberikan halaman nuansa berkualitas tinggi. Tetapi digunakan terlalu banyak, mereka akan memiliki efek counter, mengacaukan halaman dan membingungkan pengguna.
Banyak spasi
Hari ini desain web begitu segar, mereka merasa seperti mereka telah mengambil napas dalam-dalam.
Kadang-kadang saya membayangkan mengambil desain halaman yang terlalu ramai dan menempel pada balon, kemudian meniup udara di sampai semuanya pada halaman menarik terpisah untuk meninggalkan kesenjangan yang sehat.
Mata Anda membutuhkan ruang (guttering dalam bahasa typo) hal-hal bulat untuk membantu Anda dengan jelas dan rapi mengidentifikasi hal-hal.
Secara umum, lebih banyak ruang putih lebih baik. Ini sangat jarang bahwa saya melihat halaman dan berpikir: "Wah, mereka benar-benar perlu menjejalkan halaman yang sedikit"
Tentu saja, "putih" ruang tidak harus putih. Tapi itu harus luar angkasa!
Ini bagus untuk melihat begitu banyak desain menggunakan margin yang cukup besar untuk elemen ruang terpisah, dan ekstra line-height untuk membantu pada layar membaca.
Lihatlah semua ruang putih menyegarkan ini indah!
Bagus teks besar
Saya tidak mengatakan bahwa semua teks pada situs web Anda harus supersize. Bahkan, dalam beberapa skenario, teks kecil baik-baik saja (kita cenderung untuk mengambil lebih banyak bila teks adalah sedikit lebih kecil).
Apa ini desain yang baik menunjukkan adalah:
Membuat teks yang paling penting pada
halaman lebih besar dari teks biasa
Seperti teknik desain lainnya yang telah kita lihat, itu bekerja ketika digunakan dalam moderasi. Jika semua teks Anda besar, maka tidak ada teks besar.
Gunakan teks yang lebih besar untuk membantu pengunjung Anda melihat dengan cepat apa halaman sekitar, apa yang paling penting, dan mencari tahu di mana mereka ingin mencari berikutnya untuk menemukan apa yang mereka inginkan.
Tidak ada komentar:
Posting Komentar