6 Tools Extensions Google Chrome Ini Yang Saya Gunakan Untuk Mempermudah Design Web

Dengan memanfaatkan Leverage (daya ungkit) dalam setiap pekerjaan, pastinya bisa mempermudahkan kita dalam melakukan pekerjaan apapun.

Termasuk dalam design web.

Pagi ini saya akan berbagi 6 Tools Extensions Google Chrome yang saya gunakan untuk mempermudah Design Web.

Langsung saja, lets go !

1. Bootstrap Grid

bootstrap grid
Sumber : http://pabrikthemes.com/the-magz

Bootstrap merupakan salah satu framework CSS yang sering bahkan paling banyak digunakan oleh web developer saat ini.

Karena kemudahannya dalam membuat layout sebuah website, seakan-akan kita sebagai pemula pun tidak perlu banyak ikut campur akan hal design, seperti responsive, karena sudah disediakan.

Tetapi, untuk mempermudah mendesain web menggunakan Bootstrap, kita sebagai pemula tentu saja memerlukan alat bantu lainnya.

Salah satunya adalah saya menggunakan Bootstrap Grid.

Dengan memahami setiap grid yang ada, bisa mempermudah saya untuk mengukur sudah seberapa lebar layout yang dibuat.

2. Bootstrap 3 Offline

Bootstrap 3 Offline
Sumber : Screenshot pribadi (Bootstrap 3 Offline)

Tentunya tidak selamanya kita bisa menemukan jaringan internet yang baik, bahkan tidak ada sama sekali. Maka dari itu, sebisa mungkin saya mencari alat bantu untuk mempermudah informasi dan pengetahuan saya mengenai web design.

Salah satunya saya menggunakan Bootstrap 3 Offline. Extensions Chrome yang satu ini memberikan fasilitas Bootstrap 3 yang lengkap banget.

Jadi kalau kamu mau belajar dan menggunakan Bootstrap 3 (sekarang sudah masuk ke versi 4), kamu bisa menggunakan ekstension yang satu ini.

3. Breakpoint Tester

Breakpoint Tester
Sumber : Screenshot Pribadi (Breakpoint Tester)

Tools yang satu ini mermpemudah saya dalam menentukan ukuran responsive pada browser Google Chrome.

Misalkan saya ingin melihat seberapa bagusnya design web saya dalam ukuran Tablet, maka saya tinggal menekan ke ukuran 768px.

Jadi ketika ada kesalahan dalam ukuran 768px ini dalam tampilannya, maka saya tinggal mendesainnya lagi 🙂

4. CollorZilla

CollorZilla
Sumber : Screenshot Pribadi (WordPress.org)

Sebagai web designer, tentunya kita ingin mendapatkan inspirasi dari setiap design web orang lain. Dan daripada itu, ada sifat keinginan untuk menciptakan tema yang sama.

Bukannya mau bermaksud plagiat, desain layoutnya mungkin berbeda, tetapi nuansa pada warnanya saja yang ingin saya ambil.

Maka dari itu, saya menggunakan CollorZilla sebagai alat bantunya.

Contoh :

Saya ingin mengambil warna pada halaman utama situs web WordPress.org pada bagian headernya. Maka saya tinggal mengaktifkan CollorZillanya, dan mengklik bagian Header WordPress.org yang ingin saya ambil warnanya.

Simple !

5. WhatFont?

What Fonts ?
Sumber : Screenshot Pribadi (WordPress.org)

Font apa sih yang dipakek oleh web itu ? baru-baru ini saya menggunakan WhatFont sebagai alat bantu untuk mengetahui font apasih yang dipakek web tersebut ?

Dulunya untuk mengetahui font yang digunakan oleh salah satu website inspirasi, hanya mengandalkan Chrome Developer Tools. Dan mulai mencari fontnya.

Sekarang, simple banget, aktifkan WhatFotnya, dan klik tulisan pada artikel web yang digunakan.

6. Lorem Ipsum Generator

Lorem Ipsum Generator
Sumber : Screenshot Pribadi (Lorem Ipsum Generator)

Penggunaan teks dummy pada sebuah design sangat penting untuk dihadirkan. Mengapa ? karena saya sedang menghadirkan kepada pembaca bahwa teksnya nanti akan jadi seperti ini loh.

Tampilan teksnya kek gini. Namun jika saya menggunakan Bahasa Indonesia atau bahasa yang baku banget untuk hanya sebuah tampilan teks, pengunjung bukan dapat merasakan experiencenya dalam mempengaruhi jiwa mereka dalam teks.

Tetapi nanti mereka malah baca teksnya.

Contohnya :

Curabitur aliquet quam id dui posuere blandit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Donec rutrum congue leo eget malesuada.

Atau ?

Setelah lama menolak konsep pernikahan, saya memutuskan menjalani ikatan yang konon sakral ini karena alasan berbeda

Sekarang kamu sebagai pembaca artikel ini. Apa yang kamu rasakan ketika ada demo pada sebuah website menggunakan Bahasa Indonesia sebagai teks dummynya ?

Boleh sih, tapi sedikit merasa kejanggalan. Dan saya akan mencoba untuk merubahnya 🙂

Nah, saat ini hanya 6 Tools Extensions Google Chrome Ini Yang Saya Gunakan Untuk Mempermudah Design Web.

Jika kamu juga ingin menggunakannya, silahkan saja. Gratis kok !

Semoga bermanfaat, dan bantu SHARE ya ^_^

Untuk ke-2 Kalinya, Item Saya Direject Oleh GraphicRiver.net

Huff, akhirnya setelah 5 hari menunggu, item saya yang masih berkategori web form dengan tema login form akhirnya ditolak. Nama item saya kali ini Masuk Angin Login Form, rada aneh emang namanya. Hehehe

Berikut inilah dia hasil design saya :

Baca Juga : Cerita Pengalaman Pertama Ditolak Cinta Sama Envato

Nah pas saya cek email, dia ngasih kata-kata gitu yang mengharukan. Dengan Google Translate, yang artinya :

Terima kasih atas kiriman anda Kami telah menyelesaikan peninjauan kami atas “Masuk Angin Login Form” dan sayangnya kami menemukan bahwa standar kualitas tidak diperlukan untuk bergerak maju, dan Anda tidak akan dapat mengirimkan kembali barang ini lagi.

Kami menghargai usaha dan waktu yang Anda berikan untuk menciptakan barang Anda.

Dan kami akan dengan senang hati memastikan bahwa entri Anda berikutnya akan memenuhi persyaratan pengiriman kami. Inilah saran kami: Kunjungi forum kami dan mintalah rekan penulis untuk mendapatkan masukan.

Komunitas kami yang membantu akan dengan senang hati mengulurkan tangan. Lihat artikel Pusat Bantuan ini untuk memahami mengapa dan bagaimana barang ditolak.

Ingat Anda bisa mendapatkan bantuan, dalam bentuk tutorial atau profesional yang terampil, di Envato Tuts + dan Envato Studio.

Kami berharap untuk melihat penyerahan baru dari Anda segera! Semua yang terbaik! Tim kualitas Envato Masih punya pertanyaan? Hubungi Pusat Bantuan kami.

Rangkumannya adalah bahwa item saya kali ini sama kayak kemarin. Yaitu tidak memenuhi kualitas standar. Hiufff (menghela nafas) kayak gimana sih caranya membuat kualitas gambar dari sebuah desain ?

Saya harus lebih banyak belajar lagi, kalau jual di Marketplace Indo sih, suatu saat saya nanti gak main login form kayak gini. Mungkin template-template untuk website gitu.

Udah sampe disini aja curhatan saya kali ini diblog ini. Tetap semangat dan luar biasa !

Kalau begitu, BAKAR SEMANGATNYA !!

Download Gratis Mockup Case Iphone 7 Untuk Jualan Custom Case

Untuk dapat berjualan custom case, diperlukan template case yang ingin kita jual sebagai bahan promosinya. Nah buat Anda yang ingin mempromosikan custom case merk Iphone 7, saya sudah mendapatkan mockupnya dari DesignBolts.com.


Keterangan :


Cara Menggunakan :

  • Setelah Anda download Mockup Iphone 7 Case nya, silahkan diextract dulu biar dapet filenya.
  • Kemudian buka filenya seperti biasa di Photoshop. Klik File > Open > Cari Filenya (CTRL+O).
  • Hidupkan tanda matanya, dan buka tanda grupnya.
  • Sampai disini silahkan Anda mau mengcustom mockup casenya.
  • Kan ada beberapa file yang dibuat menjadi Smart Object, nah untuk dapat memasukkan gambarnya, pilih layer smart object yang ada object gambarnya (lihat gambar dibawah ini). Klik 2x
download-mockup-iphone-7-1
Klik 2x untuk memasuki gambarnya.

 

  • Kemudian klik Oke
download-mockup-iphone-7-2
Klik Ok
  • Lanjut, masukkan gambar yang ingin dibuat dengan cara klik File > Place.
download-mockup-iphone-7-3
Klik menu File > Place
download-mockup-iphone-7-4
Masukkan gambar yang ingin dibuat.
  • Jika ukuran gambar tidak sesuai dengan ukuran mockupnya, resize aja pakek mouse.
download-mockup-iphone-7-5
Atur ukuran gambarnya
  • Apabila sudah merasa rapi, klik save (dari gambar smart objectnya), dan lihat hasilnya (kembali kefile utama).
download-mockup-iphone-7-6
Hasil jadi

Oke, semoga mockup dan tutorial saya bisa bermanfaat untuk Anda yang ingin jualan custom case Iphone 7. Kedepannya nanti saya akan upload terus mockup-mockup yang bermanfaat untuk Anda.

Maka dari itu, sering-sering aja main kesini. Bila perlu :

Follow Instagram saya : @rickyrachmanto

dan LIKE Fans Page saya : Official Ricky Rachmanto