Lanjutan bahasan tentang mockup tools favorit untuk menrancang tampilan antar muka aplikasi, setelah sebelumnya gw udah review irit tentang pencil project ,gw sekarang bakalan bahas tentang koleksi yang bisa di tambahkan.


Pencil Project yang di rilis terahir pada September 2013 memiliki koleksi componen yang kurang mutakhir, tampilan ICS dan iOS nya juga masih yang jadul untuk ukuran 2015 ini ehehe, maka dari itu gw iseng googling nemu beberapa collection tambahan untuk Pencil project yang memperkaya rancangan mockup kita :D

1.@nathanielnw Bootstrap
Sumber: https://github.com/nathanielw/Bootstrap-Pencil-Stencils

2. @nathanielnw Android Lolipop
Sumber: https://github.com/nathanielw/Android-Lollipop-Pencil-Stencils

3. @nathanielnw Material Icons
Sumber: https://github.com/nathanielw/Material-Icons-for-Pencil

4. Stencils and Templates resmi
Sumber: https://code.google.com/p/evoluspencil/downloads/list?q=label%3aStencil

Cara menginstal koleksi grafik baru:

1. Download file zip dari release terahir di github.
2. Di aplikasi Pencil, install file .zip tadi di menu "Tools > Install new collection..."
3. Pastikan opsi "Hide Heavy Elements" di menu View di unceklis

Haiii, kali ini gw bakalan share mockup tools untuk membuat desain user interface dari aplikasi yang akan dibuat, sebenernya ini pengalaman lagi ngerjain skripsi ehehe, dimana untuk membuat rancangan antar muka pengguna kalo menggunakan software grafis macam inkscape, photoshop ataupun corel draw berasa manual dan ribet banget ehehe.

Tapi dengan aplikasi mockup tools yang emang dikhususkan untuk merancang prototype aplikasi bakalan terasa lebih mudah dan cepat, aplikasi yg bisa jadi prototype mockup yang pernah gw coba adalah:

1. microsoft visio (setingkat diatas desain manual, cuma masih ribet, dan berbayar)
2. balsamiq (tampilan nya keren, mudah di pelajari, drag drop yang simple, tapi berbayar)
3. Pencil project (simple, mudah digunakan, dan open source)

Oke gw mau bahas untuk point 3 dari Pencil Project, tools ini sangat memudahkan dalam mendesain antar muka aplikasi yang akan kita buat nanti nya, dengan UI component yang mencukupi untuk desain web sih, buat mencobanya kita bisa download di http://pencil.evolus.vn/Downloads.html

UI component yang tersedia

Cara menggunakannya juga gampang kok, kita tinggal drag-drop collection yang ada di samping kiri ke dalam canvas dan atur dikit langsung jadi sesuai yang ada di imajinasi kita.
Ini contoh screen shot aplikasi pencil di Ubuntu 14.04 gw hehehe :D

Namun dengan rilis terahir dari aplikasi pencil ini di bulan November tahun 2012 lalu mengakibatkan component User Interface nya juga belum update, jadi kaya collection iOS nya masih iOS 6, android nya masih tema Holo di ICS, tapi ada cara juga sih biar collection di pencil bisa di tambahkan dari kontributor, di post berikutnya gw share ya yang gw dapet ehehe

Dan pada akhirnya kita bisa menghasilkan keluaran desain dengan bermacam-macam format seperti:

Sebagai tools gratisan, Pencil Project evolus ini keren banget, dan creatornya adalah orang vietnam loh! ternyata orang Vietnam memiliki tools yang cukup berkontribusi di dunia software open source ini. Terima kasih :D

Gegara rilisnya windows 8 di tahun 2012 lalu yang membuat perubahan drastis dalam dunia user interface. Win 8 tampil dengan desain yg simple, minimalis, dan kotak-kotak ternyata mendapat perhatian dunia desain UI, tampilan tombol yg serba glossy kayak kaca pun tiba-tiba berubah flat, satu warna, dan kotak! 
Web besar Indonesia macam Kaskus ajah sekarang tampilannya sangat flat dan simple dari sebelumnya, emang dunia internet sedang dilanda desain simple, flat ala windows 8. Nah sebagai penggiat pemrograman web, gw juga tertarik untuk membuat desain web dengan gaya kayak windows 8 ini, tapi ga kebayang riweuh nya kalo harus membuat semua user interface dari nol, untunglah gw menemukan framework CSS sangat keren dan mudah yaitu:

Dengan kerangka bootstrap 3 sehingga jelas memiliki performa responsive yg ciamik, dan yg paling gw suka adalah dokumentasi nya lengkap sekali coy, jadi gw tinggal capluk doank ini :D

Ini bukti kalo dokumentasi lengkap, kita tinggal copy-paste ajah buat mengaplikasikannya pada web yg dibuat

http://metroui.org.ua/examples.html

Tombol

Menu

Input Form

Window

UI nya khas windows macam Tiles (ubin kotak), efek carousel, efek klik, bahkan fluent menu kayak Office 2013 pun bisa lo bikin hanya dengan copas :D, gokil kan.

Nah buat kalian yg mau membuat front end web dengan tampilan keren ini bisa langsung aja di cekidot di web nya Metro UI CSS http://metroui.org.ua/

Untuk memperindah tampilan pada web selain dari pengaturan desain, gambar dan layout yg baik,, menggunakan huruf yg unik juga bisa menambah kecantikan dari web, kita bisa mengganti huruf default pada web (biasanya di tentukan oleh browsernya)

Pada umumnya kita bisa mengatur tampilan kalimat pada website dengan tag  <font face="Georgia, Arial, Garamond">Kalimatnya</font> gitu doang,, simple kan? tapi itu udah umum, pasaran.. gimana kalo kita mau nampilin huruf yg ga biasa, yg unik biar lebih menarik!!

Untuk menggunakan font khusus, maka anda harus mengupload dulu file font (ttf) di file server anda,, Lalu Tag HTML untuk meload font sendiri adalah:



Lalu pada textnya tinggal tambahkan pada css nya satu baris lagi

p {font-family:CustomFont, Helvetica, Arial} 

naah sekarang sekarang adalah cara mudahnya,, ada situs web yg menyediakan berbagai jenis font gratis dan legal untuk digunakan secara komersil di alamat tautan => http://www.fontsquirrel.com

asik bgt di situs itu, banyak pilihan font nya,, dan lagi cara menggunakan ke website malah lebih mudah lagi loh coy!!!

 contoh skrinsut diatas kita telah memilih font "Alex Brush" nah disitu ada button Download untuk digunakan di font komputer lokal (ttf), atau kalo mau digunakan di website tinggal pilih tab "Webfont Kit" maka akan di generate langsung font+css+sample nya..

dalam menggunakan font untuk website harap juga di pilih jenis ekstensi fontnya ya,, karena tidak semua browser bisa menampilkan font custom kita, berikut detail jenis ekstensi font:

TTF - Berhasil ditampilkan hampir disemua browser, Kecuali Internet Explorer dan iPhone
EOT - Cuma jalan di Internet explorer.
WOFF - Dipadetin, muncul standar
SVG - iPhone/iPad.

Salah satu fungsi dari perbandingan tanggal adalah untuk menentukan event kegiatan udah lewat apa belom, jadi mesti ada perbandingan antara tanggal hari ini dengan tanggal di event tersebut (database)
Awalnya gw langsung coba pake pengkondisian
<?php $today=date ("Y-m-d");
$tgl_agenda = $ag['tgl_agenda']; //dari database
if ($today < $tgl_agenda){
fungsitapileven();
} ?>
tapi hasilnya tidak terjadi pengkondisian tersebut, malah hasilnya selalu true, even yg uda basi jadi nongol, ternyata setelah gugling ketemulah jawabannya, ternyata $today dan $tgl_agenda masih dalam format string, jadi ga bisa buat perbandingan, mesti ada konversi jenis ke date, maka dirubahlah jadi :
<?php $today=date ("Y-m-d");
$tgl_agenda = strtotime($ag['tgl_agenda']);
$tgl_today = strtotime($today);
if ($tgl_today < $tgl_agenda){
fungsitampileven();
} ?>
jadi diperlukan “strtotime” untuk merubah format dari string ke time yg bisa di buat perbandingan :)

Hallo para pengiat web desain!!! udah lama gw ga posting tentang coding lagi, setelah menyelesaikan kuliah hehe, oke kali ini gw mau bahas tentang pembuatan input yg sekelilingnya menyala seperti twitter!

Nama :

Alamat :

Keren kan? nah trus gimana cara bikinnya? let's do it!!
Kita paste CSS code didalam HTML, misal di dalam <head> </head>


Nah kode diatas akan merubah tampilan setiap tag "input" dan "textarea" menjadi menyala biru( #007eff ) karena adanya bayangan. Lanjut kita akan bikin input text buat membuktikannya

Nama :<input type="text"><br>
Alamat : <textarea></textarea>

Sippp.. tinggal di jajal deh open di browser ente, jadilah contoh sperti diatas!!