Desainer yang baik, kita harus terus belajar, berusaha menguasai skill baru, dan menambah wawasan kita dengan mengikuti tren terbaru. Nah, Flat design adalah gaya yang paling happening saat ini. Mulai dari web design, mobile app, icon, ilustrasi, hingga video animasi.kali ini saya akan membagikan sejumlah tips yang dapat anda terapkan jika anda tertarik untuk mempelajari style Flat Design. Semoga bermanfaat.

Bold Colors
Flat design biasanya menggunakan warna yang cerah dan warna-warna yang mencolok. Lihat contoh-contoh desain di bawah ini. Mereka memberikan kesan luas dengan warna cerah sebagai kunci elemen website dengan gaya Flat Design.



Tapi bagaimana memilih warna yang cocok untuk flat desain kita? Bisa saja kita pakai Photoshop untuk membuat palet warna. Tapi ada beberapa cara yang lebih efektif. Salah satunya menggunakan 6 Alat berikut untuk memilih kombinasi warna desain website. DesignModo juga memiliki tool yang cukup keren, yaitu FlatUIColors.com. Di sini, anda akan menemukan sejumlah warna pilihan User Interface kit DesignModo yang dikumpulan menjadi satu. Kita tinggal klik salah satu warna untuk copy kode HEX dari warna tersebut.


Multi-Color Panels
Tips selanjutnya adalah menggabungkan beberapa warna lain yang lebih bervariasi. Umumnya, dalam mendesain web kita harus membatasi jumlah warna pada sebuah website. Namun dalam flat design kita dapat menggunakan lebih banyak variasi warna yang digunakan sebagai background website. Selama warna masih cocok, kita dapat mengkombinasikannya dengan baik. Meski jangan khawatir soal pemilihan warna, karena Flat Design adalah kebebasan berekspresi. Anda boleh memilih warna kontras yang tidak memiliki ikatan satu sama lain sekalipun.

Typography
Tipografi adalah bagian yang sangat beperan penting dalam sukses tidaknya kita membuat Flat Design. Tipografi yang elegant akan menjadi pusat dari sebuah Flat design, asal warna background tidak menggangu unsur teks. Mainly Tipografi dalam Flat Design terbagi menjadi 2, yaitu:

1. Uppercase Lettering
Banyak website dengan gaya flat design sukses menggunakan gaya tipografi ini. Banyak website menggunakan teks dengan huruf kapital sebagai navigasi dan headline.

2. White Text Over Background
Style ini juga cukup populer, dengan meletakkan teks di atas background warna solid atau bisa juga dengan background foto.

Vector Illustration
Karena kita sedang membahas flat design, gambar vektor sangat cocok digunakan sebagai ilustrasi yang dapat mempercantik situs kita. Karena vektor sendiri dibuat dari shape yang dasarnya memiliki flat color atau warna solid.

Subtle Background Patterns
Jika Anda seorang yang senang menggunakan pattern, Anda dapat mengkombinasikannya ke dalam desain Anda. Karena tidak jarang pattern digunakan sebagai background website, dan pattern yang halus dapat membuat website lebih menarik daripada hanya menggunakan background gradient biasa. Hanya saja hal yang perlu diperhatikan adalah pattern yang Anda gunakan harus menggunakan flat design juga.

Large Elements, Lots of Padding
Cara ini sebenarnya bukan hal yang baru lagi, tapi sangat cocok digunakan dalam flat design. Dengan membuat halaman website Anda lebih lebar dan memberinya lebih banyak ruang, akan membuat desain Anda tampak lebih rapi, lebih bersih, terlihat minimalis dan sesuai dengan tren flat design.

HTML 5 and CSS3 Transitions
Salah satu fitur yang juga sudah umum dijumpai pada website modern, yaitu digunakannya HTML5 dan CSS3. Flat design mungkin saja terlihat sangat sederhana, akan tetapi website dapat dibuat lebih menarik dengan animasi transisi dan mungkin juga efek lain yang dibangun menggunakan HTML5 dan CSS3.

Panoramic Background Photos
Ada banyak website yang tidak sepenuhnya menggunakan flat design, yaitu dengan menggunakan background berupa foto. Gambar digunakan sebagai bentuk visual dan ilustrasi dari sebuah website. Dan diberi tambahan elemen penunjang seperti judul headline.

Flat Design UI Kit
Flat Design UI Kit adalah sebuah stock file desain User Interface yang dapat Anda gunakan ulang untuk membuat desain User Interface versi Anda serdiri. Fungsinya untuk memudahkan pekerjaan Anda dalam membuat desain. Anda dapat menemukan banyak sekali varian tools ini di Google

Dengan mengetahui tips mendesain website dengan gaya flat design, Anda sekarang dapat membuat website dengan lebih maksimal dan tentunya lebih modern. Selamat mendesain.

Di artikel ini, saya akan memperlihatkan sepuluh tutorial Photoshop membahas desain web yang sangat berguna bagi para pemula. Semua tutorial ini cukup mudah bagi pemula namun ini tidak mengurangi nilainya karena teknik yang diajarkan dan hasil akhirnya berguna dalam proses desain web yang sesungguhnya. Kesepuluh tutorial ini telah saya urutkan dari yang termudah hingga tersulit.

1. Create A Minimal Portfolio Site Design

Seperti telah dibahas di 8 Tips Belajar Desain Web, seorang pemula sangat disarankan untuk memulai dengan mempelajari desain minimalis. Tutorial ini sangat tepat bagi Anda. Penjelasannya dengan sangat detail. Tidak saja teknik, Anda juga akan belajar beberapa poin penting dalam mendesain web misalnya cara merapikan susunan layer dan elemen-elemen desain sebuah halaman.

2. Create a Clean, Minimal Website Design in Photoshop

Di tutorial ini, Anda akan mulai belajar menggunakan Grid 960. Anda akan belajar proses penempatan elemen-elemen dalam grid dan juga beberapa dasar tipografi.


3. How To Build a Stylish Portfolio Web Design Concept

Selanjutnya, tutorial ini akan membawa Anda ke projek yang sedikit lebih rumit. Di sini Anda akan belajar untuk mulai menggunakan pola dalam beberapa elemennya. Tutorial ini juga disertai dengan tutorial konversi ke HTML/CSS.

4. Mendesain Theme Tumblr Minimalis

Selanjutnya Anda bisa mengikuti tutorial desain web yang juga sederhana dari Desaindigital. Tutorial ini ditulis dalam bahasa Indonesia sehingga seharusnya mempermudah belajar Anda. Di tutorial ini, Anda akan belajar membuat desain halaman bergaya thumblr. Berkat Indam, Anda juga bisa mengkonversi desain ini ke HTML/CSS.

5. Membuat Situs Resource Desain Premium di Photoshop

Setelah selesai mempelajari desain blog, saatnya maju ke desain korporat. Desain yang dibahas di tutorial ini sederhana sehingga mudah diikuti dan tidak akan terlalu banyak menyita waktu Anda.

6. Create a Light Textured Web Design in Photoshop

Satu lagi desain korporat minimalis. Desain tipe ini sangat sesuai dengan trend minimalis saat ini.

7. Create a Fabric Textured Web Layout Using Photoshop

Desain web dalam tutorial ini masih minimalis seperti beberapa tutorial di atas. Namun, kali ini disertai dengan tema jahitan. Penggunaan tema semacam ini membuat desain terlihat khas dan unik.

8. How To Create a Clean and Colorful Web Layout

Desain-desain di atas menggunakan warna yang monoton. Di tutorial ini, Anda bisa mencoba menggunakan lebih banyak warna dan mempelajari cara membuat kombinasi warna yang menarik.

9. Create a Professional Web 2.0 Layout

Tutorial kali ini lebih panjang dari yang lain. Di sini, Anda akan diajak membuat sebuah desain web korporat yang lengkap mulai dari daftar portfolio, area testimoni klien, hingga slideshow.

10. Create a Watercolor-Themed Website Design with Photoshop

Desain terakhir ini lebih rumit karena ada lebih banyak teknik yang digunakan. Anda akan belajar memotong gambar dan memanfaatkan tampilan transparan dalam desain.

Kesimpulan :
Kesepuluh tutorial ini sudah cukup bagi Anda untuk memulai proses belajar desain web dengan Photoshop. Sebagai seorang pemula, jangan dulu berfikir untuk membuat karya-karya original. Ikuti saja tutorial yang ada sebisa mungkin. Seiring waktu, Anda akan belajar untuk membuat karya sendiri. Selamat belajar!

Untuk memasukan atau menggunakan Script CSS ke dalam HTML ada 3 cara yang dapat dilakukan. Yaitu bisa dengan cara Inline Style, header style dan juga bisa dengan menggunakan Linked CSS.

1.  Untuk pertama-tama kita bahas terlebih dahulu mengenai cara Inline style, Inline style merupakan salah satu cara yang dapat dilakukan untuk menggunakan atau memasukan sript CSS ke dalam HTML dengan cara menuliskan Script CSS satu persatu ke dalam HTML.
Untuk lebih jelasnya perhatikan Sript di bawah ini :

<html>
<header>
<title>Belajar CSS</title>
</header>
<body>
<p style="color : red"> Teks ini berwarna merah </p>
<p style="color : Blue"> teks ini berwarna biru </P>
<p style="color : green"> teks ini berwarna hijau </p>
</body>
</html>

Dapat terlihat komposisi Sript CSS di atas menggunakan style="property : value"> menjadi style="color : red".
Untuk melihat hasilnya anda bisa copy sript di atas ke dalam notepad, lalu safe dengan format ( .HTML ).
dapat terlihat terjadi perbedaan warna di setiap kalimatnya.

2.  Yang ke dua anda bisa menggunakan header style, dimana kita dapat menuliskan sript CSS pada bagian header. Di mana bagian script html terpisah dengan scipt CSS. Bagian HTML terletak di bagian body sedangkan bagian CSS terletak di bagian Header.
Keunggulan dengan menggunakan cara ini kita tidak perlu menuliskan satu per satu sript HTML tapi cukup hanya dengan menuliskan Script CSS yang di butuhkan maka script CSS dapat digunakan di setiap tag HTML.

 Untuk lebih memahainya silahkan lihat contoh di bawah ini :

<head>
<title> Belajar tutorial CSS</title>
<style>
h3 {font-family : calibri;
      color : red;
      font-style : italic}
</style>
</head>

<Body>
<h3>kalimat ini memiliki font jenis calibri, warna merah dan juga di cetak miring</h3>
</body>
</html>

Dari contoh di atas dapat dilihat bahwa semua yang berada di dalam tag h3 akan memiliki apa yang telah di tuliskan pada bagian CSS di header tadi, yaitu akan memiliki font calibri, berwarna merah dan juga di cetak miring.

3. Yang ketiga adalah dengan menggunakan Linked CSS. Linked CSS adalah salah satu cara untuk memasukan menggunakan Script CSS dimana, sript html dipisahkan dengan sript CSS, lalu di hubungkan dengan link.

Untuk lebih jelasnya lagi silahkan ikuti petunjuk di bawah ini :

A. Buka notepad, notepad ini digunakan untuk menuliskan sript CSS.
lalu copy paste cript CSS berikut

h3 {font-family : calibri;
      color : red;
      font-style : italic}

Setelah itu save notepad

B. Buka notepad kembali, notepad yang satu ini di gunakan untuk menuliskan sript HTML.
Lalu copy paste sript HTML berikut

<head>
<title> Belajar tutorial CSS</title>
 <link rel="stylesheet" href="Tulis nama file notepad Css yang telah di save" type="text/css">
</head>
<Body>
<h3>kalimat ini memiliki font jenis calibri, warna merah dan juga di cetak miring</h3>
</body>
</html>

lalu save as file notepad tersebut di folder yang sama dengan file notepad CSS. Tulisan yang berwarna biru di atas mewajibkan anda untuk menuliskan nama fie notepad HTML yang telah ada simpan, Contoh : format.css.

Baru-baru ini Yahoo! meluncurkan Pure CSS yaitu sebuah CSS Module yang bisa dipakai untuk project website kita, ya seperti Bootstrap lah tapi Pure CSS lebih kecil gak sekomplek Bootstrap, meskipun tidak sekomplek bootstrap tapi keren juga dipakai pada project website kita selanjutnya.

Seperti CSS Framework lainnya, Pure CSS juga menyajikan beberapa elemen seperti Layout yang bisa responsive, Menu, Form, tombol, Grid Base, Tabel.



Grid

Penggunaan Grid untuk Pure CSS ini sama mudahnya seperti yang lain, hanya beda di classnya saja, untuk membuat sebuah Grid Layout dengan 3 kolom maka bisa menggunakan

   

<div class="pure-g">
    <div class="pure-u-1-3">
        <!--
        By default, grid units don't have any margin/padding.
        If you want to add these, put them in a child container.
        -->
        <p>Thirds</p>
    </div>

    <div class="pure-u-1-3">
        <p>Thirds</p>
    </div>

    <div class="pure-u-1-3">
        <p>Thirds</p>
    </div>
</div>

Kita bisa menggunakan class pure-g atau pure-g-r bedanya kalau pakai pure-g-r maka ketika browser di resize ke ukuran kecil maka class tersebut akan berpindah ke bawah, kalau pure-g biasa dia akan tetap menjadi 3 kolom.

Button (Tombol)
Untuk membentuk link menjadi tombol cukup tambahkan class pure-button di tag a atau button
   

<a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button>

Menu
Untuk membuat menu menggunakan Pure CSS ini juga gampang aja, tinggal pakai

<div class="pure-menu pure-menu-open pure-menu-horizontal">
    <ul>
        <li><a href="#">Home</a></li>
        <li class="pure-menu-selected"><a href="#">Blog</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Events</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

Nah, untuk melihat contoh elemen lainnya di Pure CSS ini bekerja, silakan kunjungi websitenya http://purecss.io/

Bagaimana Pure CSS ini menurut kamu?