15 Trend Reka Bentuk Web untuk Mengawasi Untuk Tahun 2012

Sejauh ini tahun 2011 telah membawa beberapa perubahan menakjubkan dalam reka bentuk dan teknologi Internet. Pembangunan web telah menjadi subjek yang lebih lancar untuk melompat ke dalam pembelajaran, apatah lagi perpustakaan sumber terbuka yang banyak berguna dalam menyelaraskan proses. Namun, nampaknya komuniti reka bentuk global jauh dari membuang tuala.

Saya ingin memperkenalkan 15 idea yang telah berkembang pesat sepanjang tahun lalu. Trend ini merangkumi teknik rekabentuk web dan grafik yang mungkin akan memainkan peranan besar yang berpindah ke 2012. Anda mungkin telah melihat beberapa daripada mereka yang diwakili di banyak laman web kegemaran anda dalam talian.

Syukurlah kaedah untuk melaksanakan ciri-ciri ini menjadi lebih mudah difahami dan lebih ramping dalam kod.

1. Reka bentuk antara muka yang responsif

Pengalaman purata pengguna mungkin merupakan aspek yang paling penting untuk dipertimbangkan semasa mereka bentuk laman web. Anda mahu elemen halaman bertindak balas dengan pantas pada input papan kekunci / tetikus dan berkelakuan seperti yang diharapkan. Beberapa contoh mungkin termasuk menu lalat sisi, kotak drop-down, dan tetingkap pop timbul.

Termasuk perpustakaan JavaScript terkenal seperti MooTools dan jQuery, ia menjadi lebih mudah untuk menghidupkan ciri-ciri ini dan lebih. Kebanyakan penyemak imbas moden menyokong kod ini dan walaupun secara mendalam merendahkan apabila skrip tidak tersedia. Pada akhirnya anda mahu menjadikan pengguna berasa selesa apabila berinteraksi dengan mana-mana sahaja dalam reka bentuk.

Begitu juga anda perlu mengambil input input dan data yang dipertimbangkan. Pada banyak halaman pendaftaran anda akan menerima respons kecil semasa anda bekerja melalui setiap kawasan input. Anda boleh melakukan pemeriksaan automatik untuk alamat e-mel yang sah, menduplikasi nama pengguna, dan memasukkan input kata laluan dua kali. Ini akan menjimatkan masa pada hujung pengguna dan menyediakan panduan berguna sepanjang proses pendaftaran.

2. Peranti Bergerak skrin sentuh

Dalam beberapa tahun kebelakangan ini telah menjadi jelas bahawa telefon pintar mendapat sokongan di kalangan peminat bukan berteknologi. Tetapi sejak 2011 kami telah melihat letupan tapak mudah alih dan templat khusus mudah alih.

Populariti peranti iPhone dan iPad bersama-sama dengan telefon berkuasa Android bermakna anda akan mempunyai pengunjung sepenuhnya berinteraksi dengan halaman anda melalui arahan sentuhan. Ini perlu menjadi pertimbangan yang realistik dengan setiap reka bentuk mockup. Trend dalam reka bentuk web mudah alih telah menunjukkan bahawa membina tema mudah alih yang berasingan sepenuhnya sering memberikan hasil yang terbaik. Dengan cara ini, anda dapat memastikan semua kandungan dinamik di tempat pada susun atur utama anda semasa menyampaikan versi tapak web kepada pengguna mudah alih.

3. Ton Freebies!

Siapa yang boleh mengatakan mereka secara jujur ​​tidak menikmati muat turun percuma? Pereka web telah berkongsi kandungan mereka dalam talian selama bertahun-tahun, tetapi baru-baru ini ini telah menjadi trend yang sangat popular di kalangan artis digital. Terdapat beberapa komuniti yang dibina secara khusus di sekitar menawarkan muat turun percuma untuk pereka web dan grafik.

Dua kegemaran peribadi saya adalah Muat turun PSD dan Designmoo, kedua-duanya mendapat kerap dikemas kini oleh ahli berkualiti. Selain itu arkib Hongkiat Freebies mempunyai banyak gula-gula manis untuk diperiksa. Dalam mana-mana era sebelum ia tidak pernah benar-benar mudah untuk memuat turun antara muka, susun atur, logo, sepanduk, dan hampir semua jenis fail JPA / AI yang lain!

Sesetengah Muat turun Rapi

Berikut adalah beberapa hadiah percuma untuk diperiksa dari awal tahun 2011. Dan jika anda fikir senarai ini mempunyai beberapa fail yang hebat, tunggu sehingga 2012 gulung sekitar!

Set UI Web Mini

Pemain Muzik Mini Gelap

Tag gelongsor

Slider Foto Gelap

Kotak Carian

Masuk ke / Borang Masuk

Log Masuk Modal

Borang Masuk Bersih

Jadual Harga

Bar Pemuatan Minimal

Popup Lampiran

4. Standard HTML5 & CSS3

Kedua-dua archetypes reka bentuk baru ini telah mengumpul yang semakin meningkat berikutan sepanjang tahun 2011. Pereka web semantik telah menunggu beberapa tahun untuk mengeluarkan reka bentuk CSS sahaja yang memberikan sudut bulat dan menjatuhkan bayang-bayang. Tambahan pula W3C telah membuat banyak kemajuan dalam mendapatkan sokongan dari pelayar yang paling popular.

Saya hanya dapat melihat perkara yang baik untuk masa depan pembangunan web HTML5 / CSS3. Pereka barisan hadapan sering diabaikan dalam bidang hari ini, namun mereka sangat penting untuk keseluruhan proses komposisi. Cuba jangan memerah diri ke dalam label 'set' berdasarkan teknik yang anda ketahui dan praktik setiap hari. Kami menawarkan panduan pemula untuk pemodelan HTML5 / CSS3 jika anda merasakan keperluan untuk mengejar.

Melekat dengan piawaian baru ini juga akan membuat pembangunan dalam JavaScript dan jQuery hanya lebih mudah. Pembangun telah menerbitkan dan berkongsi kod projek HTML5 / CSS3 mereka dalam talian, dan jika perkara terus kami pasti akan menyedari lebih banyak lagi perkara ini berlaku pada tahun depan.

5. Reben dan Banner

Walaupun teknik reka bentuk ini tidak tepat “baru” ia tidak pernah berlaku melalui arus perdana sehingga baru-baru ini. Anda mungkin melihat contoh riben sudut, bar navigasi spanduk, dan lencana pita kecil. Trend ini mungkin meletup kerana pengumpulan besar-besaran tutorial terperinci yang boleh didapati melalui Google.

Pereka web lebih kompeten hari ini dalam melancarkan blog mereka sendiri untuk berkongsi maklumat. Sekarang teknik yang mudah dapat dengan mudah disalurkan di antara pereka untuk menduplikasi kesan yang paling popular. Terdapat juga PSD percuma yang boleh anda muat turun untuk menyelamatkan diri anda.

6. Premium Tema WordPress

Pembebasan terakhir WordPress 3.0 termasuk sejumlah ciri lama yang ditunggu-tunggu seperti jenis pos adat dan imej artikel yang unik. Namun perubahan yang paling mendalam yang saya lihat datang dari kedai-kedai pembangunan WordPress yang pakar dalam tema WP premium.

Selepas anda membeli tema seperti itu, proses pemasangan serupa dengan yang lain. Namun kini mungkin untuk memasukkan fungsi pemalam tersuai, tema kanak-kanak, menu admin baru, dan sejumlah besar ciri-ciri lain dari dalam tema! WooThemes, ElegantThemes dan Tema Roket adalah beberapa jenama yang menonjol kepada saya di atas semua yang lain. Kualiti mereka adalah sempurna dan saya rasa pemaju mereka pergi di atas dan di luar untuk mencipta templat terbaik dan menu admin paling intuitif.

Pergi ke 2012 saya hanya boleh bayangkan WordPress akan menjadi lebih mudah digunakan. Ini bermakna lebih banyak tema yang berkualiti tinggi akan dikeluarkan, dan lebih banyak blog yang hebat akan dilancarkan.

7. Majalah dalam talian

Bercakap tentang tema WordPress kita juga harus membawa kejayaan yang diadaptasi dari majalah dalam talian. Laman web ini tidak begitu berbeza dari mana-mana blog WordPress generik selain struktur umum dan susun atur halaman. Anda boleh melihat penyaji yang lebih besar ini dengan persembahan semata-mata dari halaman rumah mereka, dan koleksi penulis menulis untuk laman web ini.

Apabila majalah mula bergerak dalam talian, mereka akan menjadi sumber pendapatan bagi banyak penulis. Memang topik seperti 'reka bentuk web' menargetkan niche yang lebih kecil daripada, katakan, permainan atau ekonomi. Tetapi hakikat bahawa kita melihat lebih banyak majalah reka bentuk dalam talian daripada cetak pergi untuk menunjukkan di mana dunia boleh menuju pada tahun-tahun akan datang.

8. Mudah Drop Shadows

Sebagai aspek CSS3 kini lebih mudah berbanding sebelum ini untuk para pereka untuk melaksanakan bayang-bayang drop di mana saja di laman. Teks kotak dan elemen gaya kotak telah diberikan sifat masing-masing untuk memberikan kesan bayangan yang jelas.

Sintaks teks-bayangan sangat mudah untuk menghafal dan mengikuti bersama sebagai kotak-bayangan. Dengan imej yang tidak perlu dalam menghasilkan kesan ini, pemaju web boleh memfokuskan diri untuk memperluaskan idea asas ini.

9. Typography Dinamik

Font adalah sebahagian besar dari sfera yang merangkumi tradisi reka bentuk web. Fon paling terkenal termasuk Arial, Helvetica, Georgia, dan Trebuchet MS telah wujud selama bertahun-tahun. Walaupun mereka terus memberi maksud yang mendalam dalam piawaian web, terdapat banyak pilihan alternatif untuk typography laman web maju.

Typekit misalnya hanya memerlukan beberapa baris kod untuk dimasukkan ke dalam kepala dokumen anda. Selepas ini, anda boleh menentukan nama fon yang hendak dimasukkan dan masukkannya ke CSS anda. Bahagian yang terbaik mengenai teknik ini ialah ia bergantung pada JavaScript, jadi pengguna akhir tidak perlu memasang fon.

Alternatif lain ialah Font Web Google yang berfungsi dengan cara yang sama dengan Typekit. Saya mencadangkan pereka yang berminat untuk menyemak pertanyaan media wajah CSS3 @, kerana anda diberi lebih banyak kreativiti. Kod ini boleh digunakan untuk mengimport .ttf atau .otf fail fon dari pelayan web anda dan sertakan ia sebagai font stylesheet yang boleh digunakan! Dengan begitu banyak sistem gantian yang digunakan untuk membina fon dinamik saya menjangkakan 2012 akan memegang lonjakan inovasi dan bakat reka bentuk di kawasan ini.

10. Galeri Imej Persembahan slaid

Dengan populariti seterusnya jQuery saya telah melihat lebih banyak gambar slaid yang dijatuhkan ke dalam susun atur web. Galeri adalah sempurna untuk menunjukkan sekilas kandungan halaman dalaman. Ini boleh menjadi satu set penyertaan portfolio, gambar, jawatan blog dengan imej pilihan, tangkapan skrin demo, dan lain-lain.

Apabila anda menganggap animasi gelongsor dan pudar yang unik itu tidak pernah lebih mudah untuk membina tayangan slaid pantas untuk halaman rumah anda. Saya yakin bahawa 2012 akan melihat peningkatan dalam trend ini, dan bukan hanya antara pereka. Aplikasi web dan syarikat perisian dalam talian telah menggunakan persembahan slaid sebagai tutorial berpandu untuk memaparkan tangkapan skrin dan ciri unik.

11. Kotak Popup Modal

Saya rasa kotak modal masih agak baru kepada Internet memandangkan mereka telah muncul dalam perisian desktop dan aplikasi mudah alih selama bertahun-tahun. Tujuan tingkap modal adalah untuk menawarkan kandungan kotak (seperti pendaftaran pengguna atau log masuk) di atas halaman semasa tanpa memuatkan yang baru.

Banyak skrip galeri imej sumber terbuka menggunakan jenis kesan lightbox di mana latar belakang memudar lebih gelap daripada kotak pop timbul. Saya benar-benar menikmati ciri ini apabila saya melihatnya, walaupun ia masih belum diterima pakai oleh ramai orang. Dan walaupun kotak modal seksi dan ramping, mereka juga boleh menjadi sangat sukar untuk kod dan berfungsi dengan baik.

Untuk mendapatkan idea untuk tapak web anda sendiri, lihat beberapa komuniti perkongsian berita sosial yang lebih popular. Reddit dan Digg adalah dua yang pertama yang masuk ke dalam fikiran kerana kedua-duanya mempunyai ciri-ciri mendaftar / kotak log masuk dengan susunan biasa. Di samping itu, kesan UI untuk Google+ membanggakan sejumlah besar fungsi modal.

12. Senarai Inspirasional

Koleksi item senarai telah muncul sejak hari-hari awal reka bentuk web. Ketika kami berpindah ke pereka abad baru mula menggunakan HTML yang dipesan dan senarai tanpa urutan ke menu navigasi rumah. Tetapi pada masa kini senarai dapat dan sedang digunakan untuk lebih banyak lagi.

Dalam kebanyakan tema blog saya dapati keseluruhan bar sisi dimuatkan dengan senarai! Belum lagi pereka yang telah mencipta gaya CSS hebat untuk senarai dalam penyertaan artikel mereka. Kami melengkapkan gaya senarai inspirasi dalam jawatan lain pada awal tahun ini yang mungkin memberikan anda lebih banyak wawasan mengenai perkara itu. Looking forward ke 2012 saya menjangkakan beberapa contoh yang sangat kreatif, mungkin setanding dengan susun atur adat Flowapp untuk tugas & to-dos.

13. Thumbnail imej yang dihasilkan

Di alam semesta web, kita boleh bersetuju bahawa kandungan adalah raja. Tetapi kebanyakan pereka juga akan bersetuju bahawa halaman teks kosong menjadi membosankan dengan cepat. Imej boleh menambah rempah tambahan jika anda tahu bagaimana untuk menaburkannya dengan lembut. Salah satu kaedah ini ialah menggunakan imej kecil dinamik untuk menyediakan prapapar untuk setiap halaman atau artikel.

Blog hari ini terus mengamalkan trend imej yang diketengahkan, jadi mengapa tidak memohon lakaran kecil yang dihasilkan ke dalam tema anda juga? Ini sering menarik perhatian saya ke arah tajuk artikel dan membantu memecah halaman penuh dengan pautan teks.

Sebagai contoh lain, Dribbble menyediakan penyenaraian galeri keseluruhan imej kecil untuk setiap pukulan reka bentuk. Dalam susun atur gaya berbaris seperti itu, ia sangat mudah untuk menangkap sekilas setiap lakaran kecil dan menatal untuk mencari apa yang anda cari. Taktik ini telah terbukti menarik perhatian seluruh komuniti reka bentuk! Er, sekurang-kurangnya ahli Dribbble yang terbaik. Saya hanya boleh mengharapkan bahawa 2012 akan melihat lebih banyak usaha idea-idea ini membina contoh-contoh sedemikian dari masa lalu.

14. Ikon yang terlalu besar

Trend unik ini separa berasal dari populariti reka bentuk ikon Mac OS X. Sebagai pengaturcara mula melancarkan laman web untuk aplikasi Mac mereka, kami terlalu sering melihat saiz besar yang diwakili dalam penjenamaan. Oleh itu trend ini juga telah diambil melalui pemaju iOS dan kini selesa terletak dalam budaya reka bentuk moden.

Sukar untuk meramalkan bagaimana trend ini akan adil apabila kita bergerak ke tahun 2012. Di satu pihak ikon ini boleh menjadi kikuk dan mengambil lebih banyak ruang daripada yang diperlukan. Namun kami tidak hampir memukul kekurangan aplikasi iOS dan OSX dan pereka masih memainkan ciri-ciri ikon pixel-sempurna. Belum lagi bahawa pereka web sekarang termasuk ikon besar dalam hampir setiap penjenamaan halaman! Ini cara yang baik untuk menarik perhatian pengunjung anda dan membina nama untuk syarikat anda.

15. Hyperlink dibesar-besarkan

Pautan utama pasti dalam lima elemen paling penting dari mana-mana laman web. Ini telah menjadi jalan panjang sejak tahun 1990-an dan trend reka bentuk popular hanya berkembang pesat. Nampaknya kita berpindah ke era di mana reka bentuk yang dibesar-besarkan menjadi keutamaan.

Lihat beberapa contoh pautan dari Patterntap untuk melihat jika ada yang melompat keluar dan menangkap mata anda. Terdapat begitu banyak idea yang luar biasa untuk reka bentuk hyperlink, baik dalam kesan standard dan hover. Sudut bulat CSS3, bayang-bayang teks, dan keluarga font tersuai menambah idea yang lebih hebat ke dalam campuran! Salah satu contoh kegemaran saya adalah dari SimpleBits yang menggunakan animasi dinamik ringkas pada masing-masing entri permalink blog mereka.

Kesimpulannya

Idea-idea ini hanya beberapa trend yang lebih popular yang saya perhatikan untuk mendapat keutamaan sepanjang tahun 2011. Reka bentuk web yang besar sentiasa fokus dan memelihara niat pengguna sebagai keutamaan. Tidak mungkin falsafah ini akan berubah ke tahun 2012, tetapi bagaimana kita membina susun atur dan data sekarang sentiasa berubah. Beritahu kami fikiran atau soalan anda di kawasan perbincangan komen.