Pixel Perfect Menggunakan MakiApp

Pembuatan website biasanya diawali dengan mendesain tampilan website (mockup) di software image editor seperti Photoshop, Fireworks, Illustrator, CorelDraw dan software lainnya. Dalam prosesnya, mockup yang sudah jadi tentu sangat-sangat sempurna karena hal itu menjadi acuan kita menilai bahwa desainnya keren & mantap.

Tapi bagaimana ketika sudah di slicing & di convert ke XHTML/CSS atau HTML5/CSS3? tentu hasilnya akan lain, memang tidak mudah untuk membuat desain website kita Pixel Perfect ketika di browser, banyak faktor-faktor yang mempengaruhi, seperti Typography yang menurut pengalaman saya ukuran font di software Photoshop berbeda proses rendernya di browser.

[related_posts]

Untuk memperbaiki itu semua kemaren saya menemukan aplikasi yang bagus sekali untuk mengecek apakah website kita sudah Pixel Perfect seperti yang dibuat di Photoshop atau lainnya. MakiApp adalah sebuah aplikasi untuk mengetes apakah layout di browser sudah pixel perfect. penggunaannya pun sangat mudah. ikuti langkah-langkah berikut.

Buka website Maki App & Drag Maki App ke Bookmark Tollbar browser Anda.

Hasilnya seperti gambar dibawah ini

Langkah selanjutnya untuk ngecek apakah desain di browser sudah sama dengan desain mockup Anda. Sebagai contoh saya akan ngecek website belajarwebdesign.com.

Baca Juga:  HAML - Markup Indah Pengganti HTML

Ketika  belajarwebdesign.com terbuka sepenuhnya sekarang kita klik tombol Maki App yang ada di bookmark toolbar, maka akan muncul gambar seperti ini :

Selanjutnya klik menu “Choose File” dan pilih gambar (mockup) desain belajarwebdesign.com yang saya buat menggunakan Photoshop, Ketika sudah memilih desain maka gambar tersebut akan diproses untuk ditampilkan dibrowser.

 

Nah, gambar diatas ini menunjukkan bahwa tampilan di browser dibandingkan dengan desainnya tidak sama, lihat bagian header tulisan belajarwebdesign.com terlihat bahwa ukuran font tidak sama. Sekarang tinggal atur di CSS-nya ukuran font disesuaikan agar hasilnya akan sama/ Pixel Perfect.

Contoh diatas hanya sebagian kecil karena website belajarwebdesign.com desainnya sangat simple & sederhana. Sekarang bayangkan jika ada sebuah client yang mengirimkan anda desain mockup website dia dan minta supaya hasil slicing HTML/CSS nya pixel perfect sama file yang dia kirim. ya, Aplikasi ini akan sangat membantu 🙂

Komentar

comments

zulsdesign

Seorang Web Designer, Web Developer, Wordpress Development dan independen Blogger. Spesialisasi Personal Branding. Selalu haus akan ilmu tentang perkembangan dunia Web Design, Social Media, Online Marketing. Kadang-kadang juga berprofesi sebagai konsultan Website dadakan :)

grain storage instagram türk takipçi satın al