Tentang Material Design

Tentang Material Design. Sering kali kita mendengar istilah Material Design. Tetapi apakah Anda sudah paham arti dari desain yang satu ini. Jika belum maka dari itu aku akan mencoba menjelaskan arti dari Material Design.

Ok pribadi aku ke point.

Material Design ialah adalah bahasa desain yang dikembangkan Google dan diumumkan pada konferensi Google I/O pada 25 Juni 2014. Design ini dibuat oleh Google. Desain ini menggunakan tampilan visual yang menarik tapi sederhana. Dengan mengutamakan User Interface (UI) dan kecepatan terusan alasannya secara garis besar mengutamakan pewarnaan objek yang solid tanpa memaksakan menggunakan gambar-gambar yang tidak diperlukan. Terutama peningkatan penggunaan layout berbasis grid, animasi dan transisi responsif, padding dan efek kedalaman menyerupai pencahayaan dan bayangan.

Contohnya menyerupai blog ini, aku desain menggunakan property Material Design.

Material Design sudah diterapkan di banyak aplikasi. Android terbaru, Lollipop dan Marshmallow menyuguhkan tampilan Material Design sebagai User Interface (UI). Dan banyak juga Framework CSS / JS untuk membuat desain web yang sudah menggunakan Material Design.

Bagaimana apakah Anda sudah paham? Jika belum silahkan dibaca lagi.

Jika Anda tertarik dengan desain yang satu ini dan tertarik ingin menggunakanya silahkan Anda kunjungi Material Design Guidelines.

---

Jika Anda suka artikel Tentang Material Design silahkan share. Atau jikalau ada yang mau ditanyakan silahkan komentar. Terimakasih.

Read More

Best Material Design Color

Setelah pada artikel sebelumnya aku menjelaskan wacana Material Design dan untuk kali ini aku akan memberi tahu online tools untuk memilih warna desain material. Karena desain material membutuhkan warna yang pas semoga desainnya terlihat indah.

Material Pallete

Pada tool ini Anda mulai dengan memilih warna dan aksen warna utama. Setelah itu, ia akan menampilkan live preview dari color pallete yang dihasilkan dan memperlihatkan banyak sekali cara untuk mendownloadnya. Menurut aku tools ini paling keren alasannya yaitu kita dimudahkan dengan tampilan yang simple.

Material UI "Material Design Color"

Ini yaitu "cheatsheet" yang mewakili semua warna desain material dalam satu halaman.



Random Material Generator

Apakah Anda selalu memutuskan color pallete untuk warna yang Anda akan gunakan? Gunakan alat ini untuk secara acak memilih warna desain material Anda.

Material Design Pallete Generator

Jika Anda tertarik untuk membuat custom, materi desain menyerupai color pallete, coba tool ini. Pertama, Anda perlu menentukan warna dan itu tidak harus menjadi salah satu warna desain material. Material Desain Palette Generator maka akan menghasilkan kotak warna berdasarkan warna yang Anda pilih.

Plugin materi desain warna untuk Editor Grafis

Tidak hanya editor web saja, Anda dapat menginstal plugin / ekstensi yang mengintegrasikan swatch warna desain materi yang sempurna ke dalam software desain Anda.

• Untuk Photoshop / Illustrator: Google menyediakan unduh Adobe color files (.aco) untuk memudahkan untuk menyebarkan color pallete Anda dalam Photoshop atau Illustrator.

• Untuk Sketch: Lihat open source Material Design Color Palette Sketch Plugin by Koji Ishimoto.

• Untuk Gimp / Inkscape: Anda punya beberapa Pilihan: Gimp Material Design Color Pallete by KiSSFLOW dan Material Design Colors by Soichiro Kashima.

---

Itulah beberapa tools dan materi untuk memilih warna desain material. Bagaimana apakah Anda tertarik untuk menggunakannya?

Jika Anda suka dengan artikel Best Material Design Color silahkan share atau mungkin ada yang mau ditanyakan silahkan berkomentar. Terimakasih.

Read More

Framework Terbaik Material Design

Saya sudah pernah menjelaskan ihwal Material Design dan untuk artikel kali ini aku akan memberi tau framework terbaik berbasis Material Design untuk membuat tampilan web Anda menjadi lebih menarik. Sehingga pengunjung merasa nyaman saat berkunjung ke web Anda.

1. Material Design Lite

Material Design Lite ini dibuat oleh google, dengan fitur yang sangat banyak. Tentu ini kan eksklusif dari mbahnya Material Design jadi ya ini yang terbaik menurut saya.

2. Materialize

Materialize yakni sebuah framework responsive modern berbasis Material Design yang mampu Anda gunakan untuk proyek web Anda, Anda mampu mendownload CSS dan source file SCSSnya, lengkap dengan Javascript, ikon desain material dan font Roboto. Tersedia komponen ibarat grid, form, button, navbar dan lain-lain.

3. MDBootstrap

MDBootstrap ini mampu Anda gunakan kalau Anda ingin membuat web ala Material Design, dan ini berbasiskan Bootstrap. Framework yang satu ini mempunyai keistimewaan tersendiri. Tersedia juga template free dan premium. Komponen terbagi menjadi 2. Yaitu Free dan Premium.

4. MUI

MUI yakni Framework HTML / CSS / JS yang sangat ringan yang mengikuti tutorial Material Desain Google. Loading super cepat. Dan sangat responsive.

5. Daemonite

Daemonite ini responsive, cross-platform, front-end interface dan loading super cepat sama ibarat MUI dengan Material Design Google. Framework ini dibangun di HTML5 menggunakan Bootstrap, JS dan CSS.

6. Surface

Surface yakni Material Design framework only CSS. Yap ini hanya menggunakan CSS tanpa JS. Ini sangat ringan. Wow

7. Material Design for Bootstrap

Bahan desain material untuk Bootstrap 3 yang memungkinkan Anda menggunakan Material Design Google yang gres dalam kerangka favorit Anda.

8. LumX

LumX yakni framework front-end responsive yang berbasiskan Google Material Design dan AngularJS dengan Sass, Bourbon & Neat. Menggunakan framework ini Anda  mampu dengan cepat mengkostumasi aplikasi desain Anda.

9. Material UI

Material UI yakni framework CSS dan satu set komponen React yang mengimplementasikan Material Desain milik Google. Terdiri dari banyak sekali komponen ibarat button, dialog, dropdown, icon, input dan lainnya.

10. Angular Material

Proyek ini merupakan implementasi dari Material Design di Angular.js. Proyek ini menyediakan satu set dapat digunakan kembali, teruji, dan dapat diakses komponen UI berdasarkan sistem desain material.

---

Itulah beberapa framework terbaik menurut saya. Nanti artikel ini akan update kalau aku menemukan sumber terbaru. Maka dari itu selalu cek artikel ini atau juga mampu berlangganan update artikel di blog ini melalui subscribe us tombol di bawah. Terimakasih sudah berkunjung, kalau ada pertanyaan mengenai artikel ini silahkan komentar. Dan kalau Anda suka dengan artikel Framework Terbaik Material Design silahkan share. Terimakasih.

UPDATE! 01 February 2017

Read More

Free HTML Material Design Template

Berbicara wacana web semua orang pasti ingin memiliki. Dan selain itu juga menginginkan desain web yang sempurna. Tetapi tidak usah kebingungan alasannya yaitu disini aku akan membagikan beberapa template web berbasis Material Design.

1. One Page Material Design

Demo
Download


Ini yaitu One Page Material Desain HTML Template yang artinya satu halaman, dibuat dari kerangka MaterializeCSS.

2. App Page

Demo
Download

Ini yaitu desain halaman HTML template sederhana, digunakan sebagai laman aplikasi. Template ini dibuat menggunakan Project Polymer.

3. Materialize Starter Template

Demo
Download

Template pemula sederhana dibuat oleh Materialize dengan fitur Header, Call-to-Action dan Fitur Icon. Template ini didesain dengan layout Responsive.

4. Text Only Page

Demo
Download

Template ini didesain dengan sangat bersih dan responsive bertujuan untuk membuat Anda nyaman. Dengan fitur navigasi, footer menu dan lainya. Template ini dibuat oleh Material Design Lite.

5. Article Template

Demo
Download

Template ini berfokus pada tata letak yang rapi dengan fitur breadcbrumb, nav, search, header dan footer. Utuk sebuah halaman blog. Dibuat oleh Material Design Lite.

6. Pluto

Demo
Download

Pluto terinspirasi UI berdasarkan kerangka Bootstrap. Ini yaitu versi gratis, tetapi mereka menyampaikan versi berbayar dari template juga.

---

Sementara hanya itu yang aku sertakan, nanti dilain waktu akan aku update. Semoga Anda suka dengan template diatas. Jika Anda suka dengan artikel Free HTML Material Design Template silahkan share. Jika ada pertanyaan silahkan komentar. Terimakasih.

UPDATE! 08 February 2017

Read More

Best Blogger Material Design Template

Banyak yang mencari template blogger dengan desain material termasuk saya. Tetapi hanya sedikit yang aku temukan. Kalau HTML banyak. Mungkin alasannya yakni masih sedikit yang suka desain material sehingga kurangnya template blogger dengan desain material. Disini aku akan menawarkan beberapa template blogger dengan desain material paling sempurna. Silahkan Anda pilih mana yang paling cocok menurut Anda. Untuk template terbaru silahkan cek pada urutan paling bawah (sesuai waktu saat aku menemukan sumbernya).

1. Material Blogger Template

Demo
Download
Document


Template ini dibuat oleh Dihak MNA. Menurut aku template ini paling sempurna. Karena banyak fitur, smooth, responsive dan tanpa framework external. Ada versi premiumnya. Fitur lebih lengkap cek di bawah ini.

Features	Availability
SEO Friendly	True
Valid Schema.Org	True
Responsive	True
Menu	True
Mega Menu	True
Easy Customization	True
Unlimited Color	True
Realated Article	True
Ajax Load More	True
Page Navigation	True
Back To Top	True
Breadcrumbs	True
Tab Widget	True
Social Widget	True
Facebook Widget	True
Credit Removable	False
No Ads	False

2. MDFostrap

Demo
Download
Document


Template ini dibuat oleh Wisnu St. Responsive cool. Belum ada versi premium. Fitur lebih lengkap cek di bawah ini.

Features	Availability
Responsive Design	True
Valid Schema.Org	True
SEO Friendly	True
Mobile Friendly	True
Breadcrumbs	True
Awesome LightBox	True
Ads Ready	True
Auto Blog Post Summarize	True
Social Share Button	True
Subscribe Form	True
2 Column	True
CSS3 HTML Dropdown Menu	True
Featured Category By Label	True
Contact Page	True
Custom Error 404 Page	True
Clean Post
Color Schemes
Simple popular posts

3. Masign Grid

Demo
Download
Document


Template ini dibuat oleh Dunia Blanter. Responsive ada versi premiumnya. Fitur lebih lengkap cek di bawah ini.

Features	Availability
Responsive	True
Google Testing Tool Validator	True Cek
Mobile Friendly	True Cek
SEO Optimization	True
Documentation	True
Material Design Effect	True
Slide Menu Navigation	True
Menu Navigation	True
Material Design Search Box	True
Footer 3 Column	True
Ads Ready	True
Breadcrumbs	True
Multi Tabs Sidebar Widget	True
Recent Comments	True
Share Button	True
Multi Author Box	True
Related Posts	True
Material Design Threaded Comments	True
Subscribe Widget	True
Back To Top	True
Google Emoji	True
Support Update	Premium Only
Support Color Change	Premium Only
And Much More...	-

4. Neue

Demo
Download
Document


Template ini keren dan clean. Ada versi premiumnya. Fitur lebih lengkap cek di bawah ini.

Features	Availability
SEO Friendly	True
Valid Schema.Org	True
Responsive	True
Menu	True
Easy Customization	True
Unlimited Color	True
Realated Article	True
Breadcrumbs	True

5. Materispoit

Demo
Download
Document


Template fast loading, ads ready. Belum ada versi premiumnya. Fitur lebih lengkap cek di bawah ini.

Features	Availability
SEO Friendly	True
Valid Schema.Org	False
Responsive	True
Menu	True
Easy Customization	True
Realated Article	True
Back To Top	True
Breadcrumbs	True
Credit Removable	False
Ads Ready	True

6. Materiality

Demo
Download
Document


Template fast loading, ads ready, full responsive. Fitur lebih lengkap silahkan cek di document.

7. Material

Demo
Download
Document


Template fast loading, full responsive. Fitur lebih lengkap silahkan cek di document.

---

Itulah beberapa template blogger dengan desain material. Artikel ini akan aku update, kalau aku menemukan sumber yang lain. Maka dari itu silahkan bookmark artikel ini biar Anda mudah untuk mengunjunginya kembali. Jika Anda suka dengan artikel Best Blogger Material Design Template silahkan share. Jika ada yang ingin ditanyakan silahkan komentar. Terimakasih.

UPDATE! 25 July 2017

Read More

Cara instal Flat-Plat Material Design theme di Linux

Seperti yang sudah kita ketahui, design yang berbasis Material Design sudah sangat banyak kita jumpai, contohnya menyerupai icon, framework website, aplikasi android dan lain sebagainya. Namun ternyata di Linux juga ada loh tema yang menggunakan unsur Material Design. Memang hal ini sangat memungkinkan, alasannya design yang satu ini memang nyaman untuk dilihat. Nah berikut di bawah ini penjelasan untuk temanya. 😉

Flat-Plat yaitu tema berbasis Material Design yang dibuat untuk lingkungan desktop berbasis GNOME/GTK+ dan memiliki pertolongan untuk GTK3, GTK2, Metacity, GNOME Shell, Unity, Budgie, MATE, LightDM, GDM, Chrome theme, dan lain sebagainya.

Fitur dari Flat-Plat

• Mendukung animasi ripple effect (hanya aplikasi GTK3).
• Mendukung varian terang dan gelap.
• Mendukung versi titlebar gelap atau terang.
• Mendukung versi compact untuk resolusi rendah.
• Mendukung Dash to Dock ekstensi theming.
• Mendukung Workspaces to Dock ekstensi theming.
• Mendukung ekstensi Chrome/Chromium dan ekstensi scrollbar.
• Tampilan lebih cantik bila Anda menggunakan font family termasuk Medium and Light.

Di bawah ini penampakannya:

Cara instal Flat-Plat di Ubuntu

Untuk hasil tema yang tepat hanya mendukung GNOME Shell 3.18, Unity 7.4, atau MATE 1.14 dan versi yang lebih gres untuk ketika ini, sehingga Anda harus beralih ke salah satu dari mereka jikalau Anda tertarik untuk menggunakan tema ini.

Untuk menginstal tema, silahkan jalankan perintah di bawah ini menggunakan Terminal:

cd /tmp curl -sL https://github.com/nana-4/Flat-Plat/archive/v20170605.tar.gz | tar xz

Arahkan ke direktori yang diekstraksi dan instal file sebagai root:

cd Flat-Plat-20170605 && sudo ./install.sh

Gunakan Unity Tweak Tool untuk mengaktifkan tema ini. Jika Anda belum menginstal silahkan jalankan perintah di bawah ini:

sudo apt install unity-tweak-tool

Jika Anda ingin menghapus tema yang Anda butuhkan yaitu menghapus direktori yang terinstal dengan menjalankan perintah berikut:

sudo rm -rf /usr/share/themes/Flat-Plat{,-compact,-dark,-dark-compact,-light,-light-compact}

Itulah tema berbasis Material Design untuk Linux. Bagaimana apakah Anda tertarik untuk menggunakannya? Jika ada yang ingin ditanyakan silahkan komentar, jikalau Anda suka artikel ini silahkan share. Sekian mengenai artikel ini, biar bermanfaat. 😊

Read More