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?

Pengertian Pemakaian Tag

HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (&lt;) dan tanda lebih besar (&gt;).

Tag biasanya merupakan suatu pasangan yang disebut dengan:

* Tag awal, dinyatakan dalam bentuk <nama tag>
* Tag akhir, dinyatakan dalam bentuk </nama tag>

Formatnya: <nama tag> teks yang ditampilkan </nama tag>.

Contoh: untuk menampilkan teks dalam format teks miring ''Teks ini terlihat miring di browser anda'' dengan perintah HTML &lt; i&gt;Teks ini terlihat miring di browser Anda&lt;/i&gt;

Web designer yang memiliki kualitas baik itu gampang-gampang susah untuk dicari, ada banyak sekali web designer saat ini, apa lagi dengan semakin ramainya industri web di Indonesia khususnya.

Jika anda sedang ingin membangun sebuah website dengan desain yang baik, atau anda sedang mencari seorang web designer yang akan anda ajak untuk menjadi partner kerja anda dalam membangun sebuah website, maka coba luangkan waktu anda untuk membaca artikel berikut ini agar anda tidak salah dalam memilih orang (web designer). Karena beberapa designer cukup profesional di bidangnya namun sangat banyak juga yang amatir dan kurang bertanggung jawab.

Disini kami akan memberikan setidaknya 10 kualitas yang harus dimiliki oleh web designer yang baik atau bisa kita bilang cukup profesional dibidangnya, sehingga bisa jadi acuan anda dalam memilih web designer yang berkualitas.

1. Pendengar Yang Baik.

Seorang web designer yang baik itu mutlak harus bisa jadi pendengar yang baik, sehingga dia bisa memahami apa kebutuhan anda dan mempertimbangkan apa yang harus dia berikan untuk memenuhi keinginan anda dalam sebuah desain website.

2. Mempertimbangkan Gagasan Anda.

Banyak web designer yang egois, dia hanya fokus pada apa yang ingin dia lakukan terhadap website anda dan tidak memperdulikan apa yang anda inginkan terhadap website yang ingin dibuat. Web designer memang memiliki pengetahuan tentang apa yang dia akan buat, namun dia juga harus mempertimbangkan apa keinginan klien nya.

3. Komunikasi.

Selain harus bisa jadi pendengar, Seorang designer yang baik harus memiliki komunikasi yang baik juga, dia harus bisa menjelaskan terminologi tentang website dalam bahasa yang anda lakukan dengan dia. Dia Juga gampang dihubungi dan enak diajak berbicara.

4. Pengetahuan Tentang Teknologi.

Jika anda ingin menguji kemampuan atau pengetahuan web designer anda, maka tes lah pengetahuan nya tentang teknologi web. Dia harus familiar dengan tools yang digunakan dalam pembuatan sebuah website.
Responsive Web

Dia bisa dikatakan web designer yang baik jika mengerti HTML, CSS masalah grafis, perancangan tata letak, isu-isu media, kompatibilitas browser, dan isu-isu seputar web lain nya.

5. Penggunaan Terminologi.

Seorang web designer tidak hanya mengenal teknologi, tapi dia juga harus mengerti bagaimana menggunakan teknologi tersebut.

Misalnya saat ini sedang marak istilah “Responsive Web Design“, designer mungkin tau secara teori namun apakah dia sudah bisa menggunakannya? apakah dia sudah pernah membuat. Silahkan anda lihat bagaimana dia menggunakan teknologi tersebut, bisa dengan melihat portfolio atau dari gagasan yang dia berikan.

6. Menjaga Bisnis dan Tujuan Bersama.

Anda tentu ingin website anda terlihat bagus, web designer yang baik juga harus punya komitmen untuk membuat sebuah desain yang memiliki kualitas bagus juga, web designer harus paham kalau apa yang dia buat akan menjadi/menambah portfolionya. Dengan memahami itu biasanya web designer akan selalu memberikan yang terbaik disetiap pekerjaan nya.

Untuk itu anda bisa dengan melihat portfolio nya, apakah dia konsisten membuat yang bagus atau hanya sesekali.

7. Menghemat Waktu dan Biaya Anda.

Kadang web designer hanya berfikir bagaimana agar dia mendapat penghasilan yang banyak dari anda. Jadi berhati-hatilah dengan web designer yang meminta waktu pengerjaan yang terlalu lama atau terlalu cepat, apa lagi jika dia dibayar perjam atau per hari. Sebaiknya tentukan berapa lama target dan biaya yang akan dikeluarkan sebelum memulai pekerjaan, designer yang baik tidak akan menghabiskan waktu anda dan tidak akan terburu-buru juga, buru-buru bisa membuat hasil jadi tidak maksimal.

    Namun perlu diingat, jangan menekan harga web designer, karena bisa membuat dia bekerja dengan hati kurang senang, sehingga hasil jadi tidak maksimal, berikan harga terbaik  sehingga dia happy dan dapat menghasilkan karya yang baik.

8. Pandai Menggabungkan Desain Lama Dengan Yang Baru.

Web designer yang baik bisa menggabungkan apa yang ada sebelumnya dengan gagasan-gagasan yang baru, dalam hal pembuatan desain website yang baru misal nya, dia akan memberikan sentuhan baru dengan tidak meninggalkan karakter website lama anda.

Namun jika anda ingin yang sesuatu yang benar-benar 100% berubah sebaiknya bicarakan dengan tegas juga, karena sebagian designer bekerja dengan melihat bagaimana anda/perusahaan anda sebelumnya.

Jadi minta dia memberikan masukan apa yang akan dia perbuat terhadap website anda, sebelum dia benar-benar anda pekerjakan, web designer yang baik harus bisa menjabarkan apa yang akan dia lakukan.

9. Memiliki Portfolio Yang Baik.

Yang paling utama tentu kita harus melihat apa yang pernah dia kerjakan, inilah hal cukup penting ketika kita ingin bekerjasama dengan orang lain. Lihat hasil karyanya, jika menurut anda menarik, janga hanya melihat satu, tapi lihat beberapa, apakah dia konsisten membuat yang baik atau tidak.

10. Rekomendasi / Nama Besar.

Jika dia banyak direkomendasikan oleh orang lain sudah barang tentu dia adalah seorang yang berkualitas dan punya citra baik dimata orang lain. Jadi cobalah untuk melihat sepak terjangnya di dunia maya, dengan aktifitasnya di sosial media atau di group/forum, kalau dia sering memberikan solusi untuk pertanyaan-pertanyaan di group  bisa dibilang dia memiliki kemampun yang bisa diandalkan.

Sekian.

Semoga ini bisa menjadi acuan anda sebelum memilih seorang web designer, jika ada yang ingin menambahkan silahkan tuliskan dibagian komentar, agar artikel ini bisa semakin berguna.

PANDI Pengelola Nama Domain Internet Indonesia Melayani pendaftaran nama-domain .ID dan menyediakan referensi serta tata-cara pendaftaran.

Ketentuan masa peralihan

- Pengelolaan domain yang sudah terdaftar tetap dapat dilakukan di PANDI hingga masa berlaku domain tersebut habis.
- Domain yang habis masa berlakunya setelah 31 Desember 2012 harus melakukan transfer ke salah satu mitra PANDI selambat-lambatnya 10 hari sebelum habis masa berlaku dan melakukan perpanjangan masa berlaku domain pada mitra PANDI tersebut.
- Transfer domain tidak dikenakan biaya apapun. Transfer akan dikenakan perpanjangan minimal 1 (satu) tahun dengan biaya normal pada mitra PANDI. Apabila masa berlaku domain masih panjang, silakan lakukan transfer menjelang masa berlaku domain Anda berakhir.
- Biaya perpanjangan nama domain setelah 31 Desember 2012 mengikuti biaya yang ditentukan oleh masing-masing mitra PANDI dan dapat berbeda-beda jumlahnya.


Biaya & Persyaratan
Pencarian Whois
Whois Domain .ID 
Pendaftaran Pengguna
 

Informasi lebih lanjut hubungi:

Telepon: +62 21 5793 9151 (pada jam dan hari kerja)
Email : info@pandi.or.id

Dalam membuat website ada 2 komponen yang harus dipersiapkan yaitu domain dan web hosting. Domain adalah nama dan alamat dari sebuah website contohnya namadomain.co.cc dan Web Hosting adalah tempat Anda meletakkan file-file website pada server yang terhubung dengan jaringan internet. Saat ini banyak sekali perusahaan di indonesia maupun di luar negeri yang bergerak di bidang jasa pendaftaran domain dan penyediaan paket web hosting. Dengan tingkat persaingan yang ketat saat ini, sampai-sampai ada beberapa perusahaan domain dan hosting yang memberikan layanannya secara gratis dan Anda dapat memanfaat hal tersebut untuk membuat website Anda dengan biaya hampir nol, sebab biaya normal untuk pembelian domain kira-kira Rp.80.000,- per tahun dan untuk web hosting kira-kira Rp. 360.000,- pertahun untuk paket pemula.

Bila Anda membuat website untuk kepentingan personal atau bisnis kecil, Anda bisa mengambil domain dan web hosting gratis dan bila Anda membuat website untuk kepentingan bisnis besar, tentunya sebaiknya Anda menggunakan domain dan web hosting yang berbayar, hal ini dikarenakan dengan kebutuhan spesifikasi web hosting yang diberikan untuk menunjang kebutuhan website Anda. Dan setelah Anda mempersiapkan domain dan hosting, langkah selanjutnya Anda baru membuat website.

Anda bisa mendownload artikelnya lebih lanjut dan semoga bermanfaat,


Follow

Follow

Follow

Follow

Follow

Follow

Follow