Pixel Perfect Menggunakan MakiApp

Template Landing Page untuk Blogspot

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.

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

Baca Juga:  Percantik Form Pencarian dengan CSS

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 🙂

Tags

contoh tampilan web,contoh website html,desain html,contoh mock up,cara membuat tampilan web dengan css,contoh desain web html sederhana,contoh desain web dengan html,desain web menggunakan css,contoh mock up website,contoh tampilan web desain,contoh mockup,contoh design web dengan html,contoh web design simple,tampilan web design,contoh mock up web,mock up,tampilan web,contoh desain web simple,contoh website simpel,contoh simple website

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 kocaeli escort