Trend Flat Desain

Sejak Windows mengeluarkan windows phone 7. Trend Flat desain semakin populer baik untuk aplikasi mobile, desktop maupun web.  Desaain flat ringkas dilihat dan tampak fresh. Lihat website microsoft.com. WIndows phone, WIndows RT dan Desktopnya. Semuanya menggunakan Konsep desain yang sama. Efek dari desain ini ternyata juga menular ke android dan iOS 7. iOS 7 adalah platform terbaru yang menggunakan pola desain ini.

ios-7-2-xl

Sebelum desain flat ini populer, User interface didominiasi oleh tampilan 3D seperti Windows Aero, Apple Mac OSX ataupun tampilan web yang menggunakan interface tombol yang memberi efek shadow atau tombol menonjol. Berbeda dengan desain 3D yang cocok untuk dunia Klik, desain flat cocok untuk layar sentuh dan interaksi sentuh. Itulah mengapa konsep flat ini sekarang me rambah ke semua OS dan AplikasiWeb yagn diakses untuk pengguna Mobile. Terus apa hubunganya dengan saya sebagai programer web? Ada bro. Baca dulu lanjutannya

CSS Framework dengan konsep Flat Desain

Flat desain ini juga memberikan imbas kedalam pembuatan website. Salah satu CSS framework yang menggunakan konsep ini adalah Metro UI CSS. Metro UI CSS adalah CSS yang digunakan untuk membuat website yang tampilannya sangat mirip dengan tampilan Metro sytle. Anda bisa mendownloadnya disini.

 

Screenshot_1
Contoh tampilan flat desain pada tombol

 

Screenshot_2
Tampilan Flat Metro UI berbasis Web menggunakan Metro UI CSS

Selain Metro UI, ada lagi CSS framework atau lebih tepatnya UI toolkit berbasis web yang menggunakan konsep ini, namanya adalah Flat UI. Flat UI adalah CSS framework yang merupakan turunan dari Twitter Bootstrap. Sejauh ini, twitter bootstrap masih mengunakan konsep efek 3d Button dan sejenisnya. Tampilan dari Flat UI bisa anda lihat d http://designmodo.github.io/Flat-UI/. Anda bisa memakai desain ini dengan cara mendownload CSSnya. Didalam file downloadnya sudah disediakan contoh contoh cara pemakainnya sehingga anda tinggal copy paste. Adanya CSS Framework ini juga akan memudahkan programer web yang single fighter karena akan mengurangi kerja desainnya dan lebih fokus pada logika program. Saya sendiri sengaja memakai framework CSS biar tidak perlu menyewa jasa desainer web.

Screenshot_3
Flat UI desain menyediakan komponen UI yang akan mempercepat mendesain sebuah website dengan konsep flat desain berbasis Twitter Bootstrap

 

Sumber lain.

Website spekyboy.com menulis 20 Free GUI Template yang bisa dipakai untuk mendesain web. Jadi sekarang anda membuat desain modern yang cantik dengan cepat.  Yang lupa saya sampaikan didepan, semua Desain flat yang saya berikan disini adlaah Free yang artinya anda tidak perlu membayar lisensi untuk memakainya.

Tujuan saya menulis tentang flat desain hanya satu, agar makin banyak web desainer indonesia membuat tampilan website kelas dunia. Di era open source dan open web sekarang, kita punya sumber dan tool yang sama dengan programer di amerika sekalipun. Masa setiap kali liat website pasti layoutnya punya pola seperti ini:” Header dengan logo di kiri, menu kiri, menu kanan dan ditengah kontent. Ya mirip website pemerintah gitu. Dengan tampilan klasik apa adanya? Apalagi masih meggunakan dreamweaver dengan table layout. OMG! kemana aja loe pada selama 5 tahun terakhir?

Selamat mencoba  Guys!

Membuat Pola Background website ala Twitter Profile

Salah satu trend webdesain adalah mempercantik halaman background web dengan pola. Pola ini bisa berupa garis,ukiran, titik atau kombinasinya. Jika anda ingin tahu contoh website yang menggunakan pola background ini adalah buntu.com dan http://www.Codeacademy.com. Nah intinya kita ingin membuat website seperti itu.

Kelebihan teknik ini ukuran filenya sangat kecil dibanding dengan menggunakan background image full wallpaper. Teknik ini juga sering disebut CSS sprite. Agar anda tidak kebingungan mencari pola background yang menarik, silahkan kunjungi http://subtlepatterns.com.

Tutorial ini adalah kelanjutan dari tutorial sebelumnya yang membahas tentang typografi web dengan Googlewebfont.Saya akan mengajarkan membuat background pola dengan dua cara yaitu cara statis dan cara dynamis.

Cara statis

Untuk cara ini berikut adalah langkah langkahnya

  1. Buka http://subtlepatterns.com
  2. Pilih pola yang cocok lalu download
  3. extract file pola (format png) kedalam folder background.

tambahkan CSS ke header Halaman

body{
background: url('background/namapola.png') repeat
}

Mengganti background secara dynamis

Anggaplah kita ingin membuat website seperti twitter. Pengguna twitter bebas mengganti halaman latar dengan pola background yang telah disediakan. Nah, kita juga bisa kok membuat yang mirip dengan twitter. Dalam contoh ini, ceritanya kita hanya menyediakan 3 pola background yaitu grey, noisy dan shattered. 3 file ini harus anda download dulu di http://subtlepatterns.com.

1. Buat tiga tombol link untuk masing masing backround.

<h3>Change Background</h3>
<a href='index.php?bg=grey' class='btn btn-primary '>Grey</a>
<a href='index.php?bg=grid' class='btn btn-success '>Noisy </a>
<a href='index.php?bg=shattered' class='btn btn-danger '>Shattered</a>

3. Buat fungsi PHP untuk mengubah background

function set_background($bg) {
if(!empty($bg)) {
	echo &quot;background: url('background/$bg.png') repeat;
	} else {
	echo &quot;background: url('background/shattered.png') repeat;
	}
}

Inti dari kode diatas adalah gunakan pola yang terpilih, jika tidak ada yang dipilih gunakan pola default yaitu shattered.png.

4. panggil fungsi didalam code CSS seperti ini

if(isset($_GET[bg])){
	$_SESSION['bg']=$_GET['bg'];
}
set_background($_SESSION['bg']);

Tampilan dari halaman

Demo webfont
Demo Background dengan pola (CSS Sprite)

Source code & Demo

Silahkan lihat DEMOnya DISINI. download source codenya sendiri disini. Bagi anda yang sudah mendownload source code tutorial typografi web dengan Googlewebfont tidak perlu lagi mendownload karena code pada tutorial ini sudah menjadi satu dengan tutorial tersebut.