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

• Facebook

https://facebook.com/maskodook

• Twitter

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