15 Tren Desain Web yang Harus Diperhatikan di 2012
Sejauh tahun 2011 telah membawa beberapa perubahan luar biasa dalam desain dan teknologi internet. Pengembangan web telah menjadi subjek yang jauh lebih lancar untuk belajar, belum lagi perpustakaan open source yang tak terhitung jumlahnya berguna dalam merampingkan proses. Namun tampaknya komunitas desain global jauh dari menyerah.
Saya ingin memperkenalkan 15 ide yang telah berkembang sangat pesat selama setahun terakhir. Tren ini mencakup teknik desain web dan grafik yang kemungkinan akan memainkan peran besar hingga 2012. Anda mungkin telah melihat beberapa di antaranya diwakili di banyak situs favorit Anda secara online..
Untungnya metode untuk mengimplementasikan fitur-fitur ini menjadi lebih mudah dipahami dan lebih ramping dalam kode.
1. Desain Antarmuka Responsif
Pengalaman rata-rata pengguna mungkin merupakan aspek yang paling penting untuk dipertimbangkan saat mendesain situs web. Anda ingin elemen halaman merespons dengan cepat input keyboard / mouse dan berperilaku seperti yang diharapkan. Beberapa contoh mungkin termasuk menu fly-out, kotak drop-down, dan jendela sembulan.
Termasuk pustaka JavaScript terkenal seperti MooTools dan jQuery, menjadi lebih mudah untuk menghidupkan fitur-fitur ini dan bahkan lebih banyak lagi. Sebagian besar browser modern mendukung kode ini dan bahkan dengan anggun menurunkan ketika skrip tidak tersedia. Pada akhirnya Anda ingin membuat pengguna merasa nyaman ketika berinteraksi dengan mana pun dalam desain.
Demikian pula Anda harus mempertimbangkan input formulir dan data. Pada banyak halaman pendaftaran, Anda akan menerima respons kecil saat Anda mengerjakan setiap area input. Anda dapat secara otomatis memeriksa alamat email yang valid, menggandakan nama pengguna, dan bahkan memeriksa ulang kata sandi input. Ini akan menghemat waktu di sisi pengguna dan memberikan panduan praktis selama proses pendaftaran.
2. Perangkat Seluler Layar Sentuh
Dalam beberapa tahun terakhir telah menjadi bukti bahwa smartphone mendapatkan dukungan bahkan di antara penggemar non-teknologi. Tetapi baru sejak 2011 kita melihat ledakan situs seluler dan templat khusus seluler.
Popularitas perangkat iPhone dan iPad bersama dengan ponsel yang didukung Android berarti Anda akan membuat pengunjung sepenuhnya berinteraksi dengan halaman Anda melalui perintah sentuh. Ini harus menjadi pertimbangan realistis dengan setiap desain mockup. Tren dalam desain web seluler menunjukkan bahwa membangun tema seluler yang sepenuhnya terpisah sering kali memberikan hasil terbaik. Dengan cara ini Anda dapat menyimpan semua konten dinamis pada tata letak utama Anda sembari menyajikan versi ramping dari situs kepada pengguna seluler.
3. Banyak Gratis!
Siapa yang bisa mengatakan mereka jujur tidak menikmati unduhan gratis? Desainer web telah membagikan konten mereka secara online selama bertahun-tahun, tetapi baru belakangan ini tren ini menjadi sangat populer di kalangan seniman digital. Ada beberapa komunitas yang dibangun khusus menawarkan unduhan gratis untuk web dan desainer grafis.
Dua favorit pribadi saya adalah Unduh PSD dan Designmoo, keduanya sering diperbarui oleh anggota berkualitas tinggi. Selain itu arsip Hongkiat Freebies memiliki banyak barang manis untuk diperiksa. Di era mana pun sebelumnya, secara harfiah tidak pernah semudah ini untuk mengunduh antarmuka web gratis, tata letak, logo, spanduk, dan hampir semua jenis file PSD / AI lainnya.!
Beberapa Unduhan Rapi
Di bawah ini adalah beberapa gratisan keren untuk dilihat dari awal tahun 2011. Dan jika Anda pikir daftar ini memiliki beberapa file hebat, tunggu saja hingga 2012 bergulir!
Perangkat UI Web Mini
Dark Mini Music Player
Tag Geser
Penggeser Foto Gelap
Kotak Pencarian
Login / Formulir Masuk
Kotak Modal Masuk
Bersihkan Formulir Login
Tabel Harga
Minimal Memuat Bar
Munculan Lampiran
4. Standar HTML5 & CSS3
Kedua arketipe desain baru ini telah mengumpulkan pengikut yang terus tumbuh sepanjang 2011. Desainer web semantik telah bertahun-tahun menunggu untuk menghasilkan desain khusus CSS yang menghasilkan sudut bulat dan bayangan. Selain itu W3C telah membuat banyak kemajuan dalam mengumpulkan dukungan dari browser yang paling populer.
Saya hanya bisa melihat hal-hal baik untuk masa depan pengembangan web HTML5 / CSS3. Desainer front-end sering diabaikan dalam bidang saat ini, namun mereka melayani sedemikian penting bagi seluruh proses komposisi. Usahakan untuk tidak memasukkan diri ke dalam set 'label' berdasarkan teknik yang Anda ketahui dan praktikkan setiap hari. Kami menawarkan panduan cara pemula untuk pengkodean HTML5 / CSS3 jika Anda merasa perlu untuk mengejar ketinggalan.
Berpegang teguh pada standar baru ini juga akan membuat pengembangan dalam JavaScript dan jQuery menjadi jauh lebih mudah. Para pengembang telah menerbitkan dan membagikan kode proyek HTML5 / CSS3 mereka secara online, dan jika hal-hal berlanjut, kita pasti akan melihat lebih banyak dari ini masuk ke tahun depan.
5. Pita dan Spanduk
Meskipun teknik desain ini tidak tepat “baru” itu tidak pernah benar-benar menembus arus utama sampai baru-baru ini. Anda mungkin telah melihat contoh pita sudut, bilah navigasi spanduk, dan lencana pita kecil. Tren ini cenderung meledak karena akumulasi besar tutorial mendetail yang dapat ditemukan di seluruh Google.
Desainer web hari ini lebih kompeten dalam meluncurkan blog mereka sendiri untuk berbagi informasi. Sekarang teknik sederhana dapat dengan mudah ditularkan di antara desainer untuk menduplikasi efek paling populer. Bahkan ada PSD gratis yang dapat Anda unduh untuk menghemat usaha Anda.
6. Tema Premium WordPress
Rilis final WordPress 3.0 termasuk sejumlah fitur yang telah lama ditunggu-tunggu seperti jenis posting khusus dan gambar artikel yang unik. Namun perubahan paling mendalam yang saya lihat berasal dari toko pengembangan WordPress yang berspesialisasi dalam tema WP premium.
Setelah Anda membeli tema semacam itu, proses pemasangannya mirip dengan yang lain. Namun sekarang mungkin untuk memasukkan fungsionalitas plug-in khusus, tema anak, menu admin baru, dan sejumlah fitur lainnya langsung dari dalam tema! WooThemes, ElegantThemes dan Rocket Themes adalah beberapa merek yang paling menonjol bagi saya. Kualitas mereka sangat sempurna dan saya merasa pengembang mereka melakukan yang terbaik untuk membuat template terbaik dan menu admin yang paling intuitif.
Memasuki 2012 saya hanya bisa membayangkan WordPress akan menjadi lebih mudah digunakan. Ini berarti lebih banyak tema berkualitas tinggi yang akan dirilis, dan blog yang lebih menakjubkan akan diluncurkan.
7. Majalah Online
Berbicara tentang tema WordPress, kita juga harus memunculkan keberhasilan majalah online yang diadopsi dengan cepat. Situs web ini tidak jauh berbeda dari blog WordPress generik mana pun selain dari struktur umum dan tata letak halaman. Anda dapat melihat majalah yang lebih besar ini dengan presentasi halaman rumah mereka yang tipis, dan kumpulan penulis yang menulis untuk situs tersebut.
Ketika majalah mulai bergerak online mereka akan menjadi sumber pendapatan bagi banyak penulis. Memberikan topik seperti 'desain web' menargetkan ceruk yang lebih kecil daripada, katakanlah, game atau ekonomi. Tetapi fakta bahwa kita melihat lebih banyak majalah desain online daripada media cetak menunjukkan di mana dunia akan menuju di tahun-tahun mendatang.
8. Drop Bayangan Mudah
Sebagai bagian dari CSS3, sekarang lebih mudah bagi desainer untuk mengimplementasikan drop shadow di mana saja di halaman. Teks kotak dan elemen gaya kotak telah diberikan masing-masing properti untuk memberikan efek bayangan yang jelas.
Sintaks teks-bayangan sangat mudah diingat dan diikuti sebagai bayangan kotak. Dengan gambar yang sekarang tidak perlu dalam memberikan efek ini, pengembang web dapat fokus pada perluasan ide-ide dasar ini lebih lanjut.
9. Tipografi Dinamis
Font adalah bagian besar dari lingkup yang mencakup tradisi desain web. Font yang paling terkenal termasuk Arial, Helvetica, Georgia, dan Trebuchet MS telah ada selama bertahun-tahun sekarang. Meskipun mereka terus melayani tujuan yang mendalam dalam standar web, ada banyak opsi alternatif untuk tipografi halaman web canggih.
Typekit misalnya hanya membutuhkan beberapa baris kode untuk dimasukkan dalam kepala dokumen Anda. Setelah ini, Anda dapat menentukan nama font mana yang akan dimasukkan dan menambahkannya ke dalam CSS Anda. Bagian terbaik tentang teknik ini adalah sebagian besar bergantung pada JavaScript, sehingga pengguna akhir tidak perlu menginstal font.
Alternatif lain adalah Google Web Fonts yang berperilaku mirip dengan Typekit. Saya merekomendasikan desainer yang tertarik untuk memeriksa kueri media font-@ @ CSS3, karena Anda diberi lebih banyak kreativitas. Kode ini dapat digunakan untuk mengimpor a .ttf atau .otf file font dari server web Anda dan sertakan sebagai font stylesheet yang dapat digunakan! Dengan begitu banyak sistem alternatif yang digunakan untuk membangun font dinamis, saya mengharapkan 2012 untuk mengadakan lonjakan inovasi dan bakat desain di bidang ini.
10. Galeri Gambar Baru-baru ini
Dengan popularitas jQuery berikutnya, saya telah melihat lebih banyak tayangan slide gambar yang dimasukkan ke tata letak web. Galeri sempurna untuk menunjukkan sekilas konten halaman dalam. Ini bisa berupa serangkaian entri portofolio, foto, posting blog dengan gambar unggulan, screenshot demo, dll.
Ketika Anda mempertimbangkan banyak animasi geser dan pudar yang unik, tidak pernah lebih mudah untuk membuat tayangan slide cepat untuk halaman rumah Anda. Saya yakin bahwa 2012 akan melihat tren dalam tren ini, dan tidak hanya di antara desainer. Aplikasi web online dan perusahaan perangkat lunak telah menggunakan tayangan slide sebagai panduan tutorial untuk menampilkan tangkapan layar dan fitur unik.
11. Kotak Popup Modal
Saya merasa bahwa kotak modal masih cukup baru di Internet mengingat sudah muncul di perangkat lunak desktop dan aplikasi seluler selama bertahun-tahun. Tujuan dari jendela modal adalah untuk menawarkan konten kotak (seperti pendaftaran pengguna atau login) di atas halaman saat ini tanpa memuat ke yang baru.
Banyak skrip galeri gambar sumber terbuka menggunakan jenis efek lightbox di mana latar belakang memudar lebih gelap daripada kotak popup. Saya sangat menikmati fitur ini setiap kali saya melihatnya, meskipun belum diadopsi oleh banyak orang. Dan meskipun kotak modal itu seksi dan ramping, mereka juga bisa sangat sulit untuk dikodekan dan mulai berfungsi dengan baik.
Untuk mendapatkan ide untuk situs web Anda sendiri, periksa beberapa komunitas berbagi berita sosial yang lebih populer. Reddit dan Digg adalah dua yang pertama terlintas dalam pikiran karena mereka berdua fitur mendaftar / login kotak modal dengan tata letak yang khas. Selain itu efek UI untuk Google+ membanggakan sejumlah besar fungsi modal.
12. Daftar Inspirasi
Koleksi item daftar telah muncul sejak awal desain web. Ketika kami pindah ke abad baru para desainer mulai menggunakan daftar yang dipesan dan tidak berurutan HTML untuk menaungi menu navigasi. Tetapi saat ini daftar dapat dan sedang digunakan untuk lebih banyak lagi.
Di sebagian besar tema blog saya menemukan seluruh bilah samping dimuat dengan daftar! Belum lagi desainer yang membuat gaya CSS yang luar biasa untuk daftar di entri artikel mereka. Kami membahas gaya daftar yang menginspirasi di pos lain awal tahun ini yang mungkin memberi Anda lebih banyak wawasan tentang masalah ini. Menantikan 2012, saya mengharapkan beberapa contoh yang sangat kreatif, mungkin setara dengan tata letak kustom Flowapp untuk tugas & to-dos.
13. Gambar Kecil Yang Dihasilkan
Di dunia web kita bisa sepakat bahwa konten adalah raja. Tetapi sebagian besar desainer juga akan setuju bahwa halaman teks kosong menjadi membosankan dengan cepat. Gambar dapat menambahkan bumbu tambahan jika Anda tahu cara memercikkannya dengan lembut. Salah satu metode tersebut menggunakan thumbnail dinamis untuk memberikan pratinjau untuk setiap halaman atau artikel.
Blog saat ini terus mengadopsi tren gambar unggulan, jadi mengapa tidak menerapkan thumbnail yang dihasilkan ke dalam tema Anda juga? Ini sering menarik perhatian saya pada judul artikel dan membantu memecah halaman yang penuh dengan tautan teks.
Sebagai contoh lain, Dribbble memberikan seluruh galeri daftar gambar mini untuk setiap gambar desain. Dalam tata letak gaya baris tabel seperti itu, sangat mudah untuk melihat sekilas setiap thumbnail dan menggulirkan untuk menemukan apa yang Anda cari. Taktik ini telah terbukti menarik perhatian seluruh komunitas desain! Eh, setidaknya anggota Dribbble yang terbaik. Saya hanya bisa berharap bahwa 2012 akan melihat pengerahan lebih lanjut dari ide-ide ini berdasarkan contoh-contoh seperti dari masa lalu.
14. Ikon Kebesaran
Tren unik ini berasal dari popularitas desain ikon Mac OS X. Ketika pemrogram mulai meluncurkan situs web untuk aplikasi Mac mereka, kita terlalu sering melihat ukuran besar yang terwakili dalam branding. Dengan demikian tren ini juga telah diambil melalui pengembang iOS dan sekarang nyaman berada dalam budaya desain modern.
Sulit untuk memprediksi bagaimana tren ini akan adil ketika kita pindah ke 2012. Di satu sisi ikon ini bisa kikuk dan mengambil lebih banyak ruang daripada yang diperlukan. Namun kita bahkan tidak mendekati kekurangan aplikasi iOS / OSX dan desainer masih mengeluarkan spesifikasi ikon pixel-perfect. Belum lagi bahwa perancang web sekarang termasuk ikon besar dalam hampir semua merek halaman! Ini adalah cara yang baik untuk menarik perhatian langsung pengunjung Anda dan membangun nama untuk perusahaan Anda.
15. Hyperlink berlebihan
Anchor Anchor tentu saja berada dalam lima elemen paling penting dari situs web mana pun. Ini jelas telah datang jauh sejak 1990-an dan tren desain populer hanya tumbuh secara eksponensial. Tampaknya kita sedang bergerak ke era di mana desain berlebihan diutamakan.
Lihatlah beberapa contoh tautan dari Patterntap untuk melihat apakah ada yang keluar dan menarik perhatian Anda. Ada begitu banyak ide luar biasa untuk desain hyperlink, baik dalam efek standar dan melayang. CSS3 sudut bulat, bayangan teks, dan keluarga font khusus menambahkan lebih banyak ide hebat ke dalam campuran! Salah satu contoh favorit saya adalah dari SimpleBits yang menggunakan animasi dinamis pendek pada setiap permalink entri blog mereka.
Kesimpulan
Ide-ide ini hanya beberapa tren yang lebih populer yang saya perhatikan mendapatkan prioritas di sepanjang 2011. Desain web yang bagus selalu tentang fokus dan menjaga niat pengguna sebagai prioritas utama. Tidak mungkin filosofi-filosofi ini akan berbeda pindah ke 2012, tetapi bagaimana kita membangun tata letak dan menyajikan data selalu berubah. Beri tahu kami pemikiran atau pertanyaan Anda di area diskusi komentar.
