Embed Size (px)
Citation preview
WEB DESIGN TRENDSKEMENTERIAN KEUANGAN
REPUBLIK INDONESIA
by Virgiawan Listanto
Intro
• Hi, Saya Virgiawan Listanto
• Founder dari ID-Webmaster,
Web Developer & UI/UX Designer
• Lahir di Metro, Lampung. Tanggal
30 Maret 1993
• Web Development Skills:
HTML5, CSS3, JavaScript, PHP,
MySQL, CakePHP Framework,
WordPress Theme Development
Pengalaman Kerja
• 2011 – 2012 (Web Developer)
CV. Merah Putih Networks
• 2012 (Freelance) Web Developer
Dremi Creative Design
• 2012 – Now (Founder)
ID-Webmaster
• 2013 – Now (Exclusive Author)
ThemeForest.net (Envato Market)
• 2015 – (Founder)• CV. Mediatama Studio
https://facebook.com/maskodook
https://twitter.com/maskodook
• Facebook Page
https://facebook.com/idwebmaster
• Twitter Page
https://twitter.com/id_webmaster
• Envato Profile Page (Portfolios)
https://themeforest.net/user/id-webmaster
Hi, Kami adalah
ID-WEBMASTER
Tentang ID-Webmaster
• Didirikan pada tahun 2012, ID-Webmaster telah menjual lebih dari
550 lisensi template aplikasi di berbagai belahan dunia
• Fokus pada pengembangan produk tumblr templates dan
WordPress templates dan juga jasa pembuatan website
• 70% Fokus di Envato Marketplace dan 30% sisanya untuk jasa
• Pada awalnya ID-Webmaster di bentuk oleh Virgiawan Listanto
selaku founder, dan Zuhardi selaku co-founder
• Saat ini ID-Webmaster telah berkembang menjadi CV dengan nama
CV. Mediatama Studio, yang dibentuk oleh Virgiawan Listanto
selaku founder dan Stevanus Aditiya selaku co-founder
www.stmikeresha.ac.id
www.smkmuh3metro.sch.id
www.portalindonesianews.com
Produk Digital ID-Webmaster
https://themeforest.net/user/id-webmaster
A BRIEF HISTORY OF WEB DESIGNSource: blog.froont.com
• The dark ages of web design (1989)
Warna yang gelap, dan hanya memunculkan beberapa teks
• Tables – The beginning (1995)
Awal kelahiran Browser dan HTML. dapat menampilkan gambar, ciri
khas: menempatkan tabel di dalam tabel. Tata letak terstruktur.
• JavaScript comes to the rescue (1995)
JavaScript adalah jawaban untuk keterbatasan HTML. Dapat
menampilkan Animasi seperti pop up, direction dan sebagainya
• The golden era of freedom – Flash (1996)
Flash sebagai animasi web, sering digunakan untuk “splash web”
atau tampilan awal (intro web) yg di tampilkan sebelum homepage.
• CSS – Cascading Style Sheets (1998)
Sebagai bahasa untuk men-styling tag HTML. Kehadirannya menjadi
pondasi penting teknologi web sekarang & masa depan
• Mobile - Grids and frameworks (2007)
Trend browsing di smartphone. Web memiliki versi mobile.
Munculnya CSS Grid dan CSS Framework
• Responsive web design (2010)
Trend popular teknologi website. Layout website dapat
menyesuaikan diberbagai jenis device, seperti: mobile dan tablet.
• The times of the flat (2010 - Now)
Flat Design, ciri khasnya: desain dengan warna yg datar, serta
Tipografi dan pemilihan gambar yang baik. Tidak adanya gradient.
Contoh Layout Web Tahun 90-an
Contoh Layout Web Tahun 90-an
Contoh Layout Web Tahun 90-an
Gradient Layout Trends
Gradient Layout Trends
Gradient Layout Trends
Perubahan Layout Dari Gradient ke Flat
TREN WEB DESAIN SAAT INI
WEB DESIGN TRENDS 2015
• Responsive Web Design
• Flat Design
• Big Image
• Semi Flat
• Retina Support
• Grid Layout
• Parallax Scrolling
• Floating Navigation
• Background Video
• Typography
• One Page
Responsive Web Design
Flat Design
Big Image (Background)
Semi Flat
Retina Support
Grid Layout
Parallax Scrolling
Floating Navigation
Background Video
Typography
One Page
UI/UX DESIGN
PERBEDAAN UI DAN UX
Dalam dunia web, UI (User Interfaces) lebih ke tampilan fisik dari desain yang enak untuk dipandang, termasuk diantaranya warna yang menarik, ukuran layout, dan lain sebagainya.
Sedangkan UX (User Experience) adalah sisi lain yang lebih interaktif dari sebuah situs website, dan bagaimana interaksi itu berperilaku terhadap pengunjung
PRINSIP WEB DESIGN TRENDS 2015
• Clean Layout• Fine Typography• Fine Photography• Sharp Images• Responsive Layout• Flat Design• White Space• Fixed Header Navigation• Outstanding UX (User Experience) • Margin, Padding, and Perfect Pixel• Minimalist
MICRO NICHE DESIGN
• Micro Niche Design adalah Trend desain layout web yang lebih mengutamakan konten website agar spesifik.
• Contoh: Barber Shop, Cleaning Service, Car Wash, Guitar Repair, Zoo, Flower Shop, dsb.
• Dengan tema yang spesifik tersebut, sekarang banyak bermunculuan desain web yang lebih Unik, menarik, sesuai dengan temanya, dan juga tidak universal (umum)
• Micro Niche Design memadukan User Experience dengan trend Flat Design yang sekarang
• Micro Niche Design berdampak bagus pada SEO (Search Engine Optimization) karena website dibuat lebih spesifik
CONTOH MICRO NICHE DESIGN
CONTOH MICRO NICHE DESIGN
CONTOH MICRO NICHE DESIGN
KESIMPULAN
• Perubahan layout website dari tahun ke tahun.• Trend Responsive Web Design dan Flat Design• Kombinasi Tipografi, Fotografi, serta Ilustrasi
pada Flat Design• Outstanding UX dan UI Design pada website• Flat Design membawa perubahan besar pada
trend layout sebelumnya yaitu Gradient Design• Micro Niche Design akan booming di beberapa
tahun kedepan
SEKIAN DAN TERIMA KASIHVirgiawan Listanto
