Selamat Datang

Trend Web Design 2012 versi T-WD

Trend di dunia web design memang selalu berubah, sekarang sedang ngetrend framework, responsive web, dan banyak lagi. Kalau kita ingat beberapa waktu lalu hampir semua layout website dibuat dengan tabel. Sekarang hampir semua sudah tabless, atau tidak menggunakan tabel untuk membentuk layout. Namun tabel tentu saja masih sangat berguna diberbagai kondisi, tapi tidak untuk kerangka tampilan web.

Pada tulisan di hari terakhir ditahun 2012 ini, Tutorial-webdesign.com akan membahas beberapa Trend web design selama tahun 2012 versi kami sendiri.

1. Responsive Web Design

Tahun 2012 bisa dibilang tahun nya Responsive Web Design, Responsive web design yaitu desain tampilan website yang bisa menyesuaikan ukuran layar device-nya saat website itu dibuka. Jadi website bisa dibuka dengan Handphone, Tablet PC, Desktop, TV Widescreen, dll tanpa menyulitkan pengunjungnya untuk menikmati konten yang ada.

responsive-web-design

Hal ini bisa dibuktikan dengan banyaknya website yang merubah desainnya dari yang sebelumnya tidak Responsive menjadi Responsive, diantaranya Microsoft.com, Mashable.com, dll.

Serta banyak nya tools yang bisa digunakan untuk memudahkan pembuatan responsive web design, seperti Framework, Plugin, dan lain nya.

2. CSS3 dan HTML5

html5-css3

Tidak bisa dipungkiri, CSS3 dan HTML5 banyak sekali dibicarakan selama tahun 2012, banyak website yang mulai menggunakan fitur-fitur canggih dari HTML5. Dipenghunjung 2012 W3C juga telah menyatakan fitur HTML5 sudah lengkap. Banyak nya CSS3 Generator dan HTML5 Starter template juga semakin membuat orang tertarik untuk menggunakan 2 teknologi ini.

3. Framework & Grid System

HTML & CSS Framework juga jadi buah bibir selama tahun 2012 ini

Zurb Foundation, Twitter Bootstrap, Skeleton bisa jadi menjadi beberapa yang mulai disukai banyak designer.

Framework terdahulu seperti 960 Grid System juga masih banyak yang mengunakan.

twitter-bootstrap

4. Single Page, Parallax & Fixed Navigation

Website yang terdiri dari 1 halaman saja (Single Page) banyak sekali digunakan selama 2012:

Biasanya single page ini digabungkan dengan efek-efek menarik dari Jquery Scroll atau Parallax seperti (Scrollolama)

Desain web tipe ini biasanya juga menerapkan Fixed Navigation (Menu Yang Posisinya tidak berubah tempat). Contohnya menu di website twitter dan facebook.

parallax-effect-jquery

5. Infinite scroll

Kita selama ini pasti mengenal istilah paging, atau penomoran halaman website yang ada angka-angka dan link untuk Next Page atau Previous page, seperti google. Namun selama 2012 para designer banyak yang tidak menggunakan Paging/Pagination itu, namun lebih memilih Infinite Scroll, dimana website akan me-load konten lain nya jika kita scroll. Seakan tidak habis-habis, Biasanya website Social Media dan Website berita yang menggunakan cara ini, karena konten mereka yang banyak. Anda bisa buktikan di website Facebook, Twitter, Pinterest, Mashable.

infinite-scroll

6. Custom Font Faces

Kalau beberapa waktu lalu kita biasanya menggunakan Arial, Verdana atau font-font standar saja untuk diterapkan diwebsite kita. Namun sekarang bisa dibilang Semua font bisa kita pakai, Website jadi lebih menarik, tidak perlu di desain di photoshop, kita bisa menggunakan font yang kita inginkan hanya dengan menyertakan font tersebut dengan fitur Font-face nya CSS3, atau kita cukup meng-embed dari Google web font, Adobe Edge, atau Typekit.

font-face

7. Ribbon dan Circle

Web Designer kayaknya sangat banyak yang menggunakan Ribbon di website nya selama 2012.

ribbon

Selain itu bentuk Circle juga tidak kalah nge-trend nya.

CircleNavigationEffect

Hal ini bisa dikarenakan fitur CSS3 yang juga sudah memungkin kan pembuatan bentuk-bentuk elemen web seperti itu.

8. Big Image / Background

Gambar kita ketahui adalah elemen yang paling bisa menarik perhatian pengunjung website, penggunaan gambar yang super besar banyak digunakan oleh para designer web pada tahun 2012 ini.

big-image

9. Minimalis & Simple

Desain yang minimalis tetap masih disukai tahun ini, walaupun banyak orang yang menganggap desain minimalis seakan dibuat dengan malas-malasan, dan tidak ada seni nya, tapi toh di dunia web, desain minimalis ini banyak digunakan karena banyak pertimbangan juga, Bandwidth, Dapat Diterima Hampir semua umur, dan kemudahan dalam mencocokan warna.

minimalis

10. Infographic

Terakhir yang kami amati banyak digunakan di tahun ini adalah penggunaan Infographic sebagai pengganti halaman web, penggunaan Infographic ini menjadi trend karena banyak orang menganggap dengan visualisasi gambar dan tulisan yang menarik dapat membuat orang lebih mengerti tentang maksud dari konten yang disajikan.

infographic

Metro Style

Di tahun ini juga diramaikan dengan Metro Style, style yang dipakai oleh Microsoft untuk Windows 8 ini juga banyak disukai dan digunakan oleh web designer di diwebsite nya.

metro-style

Jika anda tertarik untuk membuat website seperti itu bisa dipelajari diwebsite berikut ini

  • http://metroui.org.ua/
  • http://brobot175.co.uk/
  • http://aozora.github.com/bootmetro/

End.

Sekian Bahasan Kita Tentang Review Trend Web Design 2012.

Artikel berikutnya mungkin akan kita bahas web design yang akan jadi trend di tahun 2013.

Salam Web Design Indonesia.





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

9 thoughts on “Trend Web Design 2012 versi T-WD

  1. jaka says:

    Minimalis dan simple..
    Walaupun banyak yang menganggapnya sbg desainnya orang malas, tapi kalo di pencocokan warnanya tepat pasti akan terlihat keren jg.

  2. Terimakasih ulasannya suhu… Kayaknya sebagian tren di atas akan tetap bertahan di 2013 deh…

  3. yah, metro style dan flat ui jadi andalan saya daam membuat design website, simple but elegant

  4. […] Artikel terkait: Trend Web Design 2012 versi TWD […]

  5. Terimakasih atas informasinya :) Izin share :)

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development