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 ^_^

[Infographic] 5 Trend Logo Design Tahun 2017

Setiap tahun akan ada inovasi-inovasi baru yang selalu muncul dengan cepat. Dengan mengikuti perkembangan yang ada didekat kita, maka kita akan terbiasa untuk mengikuti perkembangan tersebut.

Bagi seorang designer, tentu trend sangat penting untuk diikuti. Berikut ini saya telah mendapatkan Infographic dari Creato yang saya ambil dari Pinterest mengenai 5 Trend Design Logo pada tahun 2017.

1. Trend Design 1 : Minimalist

Tren desain yang pernah adalah Minimalist. Seringkali kita sebagai seorang desainer menyukai hal-hal yang sederhana, namun fokus pada tujuan.

2. Trend Design 2 : Hand Drawn

Tren desain yang kedua adalah Hand Drawn, lebih senang digunakan pada cafe atau restaurant.

3. Trend Design 3 : Negative Space

Tren desain yang ketiga adalah Negative Space, kebutuhan akan ruang sangat penting untuk memanjakan mata pembaca.

Biasanya sering digunakan pada konsep layout-layout yang menarik. Seperti Pinterest dan Instagram.

4. Trend Design 4 : Line Art

Trend desain selanjutnya adalah Line Art. Kita sering melihat logo-logo pada brand yang dibuat dengan sangat sederhana hanya seperti sebuah icon yang dibuat dari penggunaan line (baris, garis).

Line Art cukup populer bagi kalangan bisnis baru ataupun umum.

5. Trend Design 5 : Vintage

Trend desain terakhir adalah Vintage, tren desain yang satu ini juga sangat populer, dan mungkin Anda juga sudah mengetahuinya.

Efek pada desain yang diberikan mengingatkan kita pada masa lampau.

tren desain logo tahun 2017
Design by Creato Design Sydney


Jika Anda suka dengan design, jangan sungkan untuk menyebarkan artikel ini agar orang lainpun bisa memiliki manfsaat dan wawasan yang sama seperti Anda.

Silahkan share jika bermanfaat ^_^

10 Elemen Dasar Desain Yang Harus Dipahami Oleh Pemula

10 Elemen Dasar Desain Yang Harus Dipahami Oleh Pemula – Imajinasi lebih penting daripada pengetahuan, begitulah yang diucapkan oleh Albert Einstein pada masanya. Memang, otak manusia dipenuhi imajinasi. Kita selalu berkhayal akan apa jadinya benda, objek, atau apapun itu.

Untuk dapat menciptakan desain yang indah, tidak hanya sekedar mendapatkan inspirasi atau ide yang bagus. Meskipun kita menghabiskan waktu selama berbulan-bulan bahkan bertahun-tahun untuk mempelajari nuansa desain dan variasinya.

Karenanya, ada beberapa elemen dasar yang harus diketahui oleh setiap desainer pemulasebelum memulai proyek apapun.

Elemen Pertama : Line (Garis)

Elemen pertama dan yang paling dasar pada desain adalah garis. Sedikit mengulangi cerita ketika masih SD, apakah Anda masih ingat ketika disuruh menggambar di buku bergambar ?

Apa yang Anda lakukan terlebih dahulu ? Yap, membuat garis.

Dalam menggambar, garis adalah goresan pena atau pensil. Sedangkan dalam desain grafis (graphic design), ini bisa disebut sebagai dua titik yang saling terhubung.

Garis berguna untuk membagi ruang pada gambar agar mata kita bisa menuju lokasi tertentu. Misalnya memikirkan sebuah halaman koran yang dapat memisahkan antara judul, dan gambar. Benerkan ?

Nah berikut gambar dibawah ini adalah contoh garis pada desain.

Line (Elemen pada Desain) Line (Elemen pada Desain)

Elemen Kedua : Color (Warna)

Warna adalah salah satu elemen desain yang paling jelas, baik untuk pengguna maupun desainer. Dengan warna, bisa kita menggunakannya sebagai background (latar belakang), shape (bentuk), texture (tekstur), atau typhography (tipografi).

Warna dapat menciptakan suasana hati, atau berpengaruh pada perasaan kepada orang yang melihatnya. Setiap warna mengatakan sesuatu yang berbeda, dan kombinasi yang diberikanpun dapat mengubah kesannya bisa lebih jauh.

Warna, Color

Elemen Ketiga : Shape (Bentuk)

Elemen ketiga adalah Shape atau Bentuk. Seperti geometris. Bentuk dapat didefenisikan oleh batas, seperti garis atau warna, dan sering digunakan untuk menekankan sebagai halaman.

Semua desain yang kita hasilkan, pada akhirnya terbuat menjadi sebuah bentuk. Jadi Anda harus selalu memikirkan bagaimana berbagai elemen desain Anda menciptakan sebuah bentuk, dan bagaimana bentuk itu dapat berinteraksi.

shape, bentuk

Elemen Keempat : Space (Ruang)

Membuat ruang pada desain itu sangatlah penting untuk diperhatikan. Dengan adanya ruang, tentunya dapat memudahkan pengguna atau penglihat merasakan kenyamanan.

Ada sisi pernapasan yang terbuka, jika ruang yang dibuat itu sempit, tentu saja kita begitu sulit untuk bernafas. Contoh sederhanya pada sebuah tulisan tanpa spasi atau enter.

Apa yang Anda rasakan ? tentu saja menjengkelkan !

Elemen Kelima : Texture (Tekstur)

Elemen kelima adalah Texture, dengan memperhatikan tekstur pada situs web atau desain grafis Anda dapat membuat pengguna nyaman karena Anda sedang menciptakan kesan pada layar tekstur itu sendiri. Seperti tampilan 2 dan 3 dimensi pada layar.

Elemen Keenam : Typhography (Tipografi)

Mungkin satu dari 10 elemen dasar desain grafis dan juga untuk desain web adalah tipografi. Seperti warna, tekstur, dan bentuk, font yang Anda gunakan dapat memberi tahu pembaca bahwa Anda sedang melakukan promosi, atau memberikan informasi kepada penglihat.

Desain gambar yang bagus dan inspiratif juga penting, tapi dengan tambahan kata-kata, bisa menjadi lebih penting. Bahkan lebih mahal 🙂

typography

Elemen Ketujuh : Scale (Ukuran)

Bermain dengan skala dan ukuran benda, bentuk, jenis dan elemen lainnya menambah minat dan penekanan. Betapa membosankannya situs web simetris yang dulu sering banget kita lihat dengan semua komponen web dengan ukuran yang sama ? Tentu sangat membosankan kan ?

Tapi, jumlah variasi akan sangat bergantung pada konten didalamanya. Perbedaaan ukuran sangat menentukan kualitas pada pandangan seorang penglihat itu sendiri. Didalam design web, dikenal dengan instilah Responsive Web Design.

Bagaimana web design kita itu sendiri dapat dibaca dari layar Desktop hingga kelayar Smartphone.

Elemen Kedelapan : Dominance and Emphasis (Dominasi dan Penekanan)

Walaupun gambar dapat berbicara tentang penekanan satu hal atau yang lainnya, unsur penekanan lebih berkaitan dengan objek, warna, atau style yang mendominasi pada perasaan seseorang. Kontras pada warna itu menarik, dan dapat menciptakan sebuah titik fokus.

Elemen Kesembilan : Balance (Keseimbangan)

Ada dua sekolah keseimbangan: simetri dan asimetri. Sementara kebanyakan desainer, seniman dan orang kreatif lebih menyukai asimetri karena sifatnya yang eye-catching, simetri memang memiliki tempatnya.

Elemen Kesepuluh : Harmony (Harmoni)

Harmoni adalah “Tujuan utama desain grafis,” menurut Alex White, penulis “The Elements of Graphic Design.” Jadi, Anda tahu itu pasti penting. Harmoni adalah apa yang Anda dapatkan saat semua bagian bekerja sama. Tidak ada yang harus berlebihan. Desain yang bagus hanya cukup dan tidak pernah terlalu banyak. Pastikan semua rincian sesuai satu sama lain sebelum Anda mempertimbangkan proyek selesai.

Sumber : https://creativemarket.com/blog/10-basic-elements-of-design

7 Langkah Mudah Cara Instal Dan Menggunakan File Action (ATN) di Photoshop CS6

Saya baru-baru ini menggunakan file Action (ATN) Photoshop untuk keperluan pembuatan grid pada sebuah desain web. Grid yang saya gunakan dan yang paling terkenal adalah 960 Grid System Master, bagi Anda desainer web pasti sudah tahu sistem grid yang satu ini.

Nah sambil menyelam minum air. Saya tidak mau dong ketinggalan zaman cuman makek Photoshop tapi gak tau apa itu Action ? karena itulah secara langsung selain belajar membuat desain web, saya juga belajar apa itu action, gimana cara instalnya, dan gimana cara makeknya.

Apa Itu File Action (ATN) Photoshop ?

Sebenarnya gak terlalu ribet amat ngejelasinnya. Dari berbagai sumber yang saya pelajari bahwa file Action (ATN) pada Photoshop ini merupakan sebuah plugin atau alat tambahan yang berfungsi untuk merekam suatu tindakan (action) disaat kita sedang melakukan editing gambar.

Kurang lebih ibaratnya kayak brush, atau font gitulah. File yang gak ada di Photoshopnya saat instalasi, maka ketika kita menginginkan sesuatu yang baru, maka kita bisa mendownloadnya dan mengsinstalnya secara premium (berbayar) atau freemium (gratis) untuk mempermudah / mempercepat pekerjaan editing gambar kita.

Cara Instalasi File Action (ATN) Photoshop

Nah sekarang kita akan mencoba instalasi file action (atn) tersebut. Langsung saja kita mulai :

  • Pertama yang harus Anda perlukan tentunya file Action itu sendiri. Anda bisa mendownloadnya secara gratis di Google. Misalkan dengan keyword “Free Action Photoshop” atau “Download Action Photoshop Gratis”. Ntar banyak kok berbagai varian Action yang bisa Anda temukan.
  • Jika sudah selesai download, Anda harus ingat dulu file dimana tempat Anda menyimpannya. Kalau ingat, buka Photoshop Anda.
  • Lalu arahkan perhatian Anda ke Menu Bar Window > Actions (ALT+F9).

cara instalasi dan menggunakan file action photoshop 1

  • Selanjutnya klik tombol kecil (seperti tampak pada gambar) entah apa namanya. Lalu klik Load Actions.

cara instalasi dan menggunakan file action photoshop 2

  • Cari file tempat Anda menyimpan file Action (ATN) nya. Jika sudah ditemukan filenya, klik Load.

cara instalasi dan menggunakan file action photoshop 3

Dan inilah hasilnya bahwa file Action Anda berhasil di upload.

cara instalasi dan menggunakan file action photoshop 4

Cara Menggunakan File Action (ATN) Photoshop

Sekarang gimana cara menggunakannya ? sempat saya pelajari juga cara menggunakannya cukup sederhana.

  • Buka foto atau gambar yang ingin Anda gunakan sebagai bahan untuk diedit menggunakan file Action ini.
  • Klik 1 Kali pada Action yang Anda inginkan (Action ATN yang sudah Anda upload). Dan tekan tombol PLAY (Segita menyamping).

cara instalasi dan menggunakan file action photoshop 5

Dan hasilnya jadi aneh gimana gitu. Hahaha …

cara instalasi dan menggunakan file action photoshop 6

Ingat ya !

Setiap apa yang Anda kerjakan, berpengaruh terhadap apa yang Anda hasilkan. Cieee …

Maksudnya jenis varian file Action yang Anda download, akan menghasilkan hasil seperti variannya. Misalkan actionnya Vintage. Maka nanti gambar Anda menghasilkan warna-warna vintage. Dan begitu seterusnya … PAHAM ?

Semoga bermanfaat !

Jika emang ini artikel bermanfaat :

  • KOMEN tutorialnya dibawah
  • SHARE ke Social Media Anda
  • TAG teman Anda yang juga senang dan sedang belajar Photoshop

Salam bertumbuh !