WEB DESAINHARI INI
oleh @edypang
Hi, sayaEDY PANG
D S A I N E R
B R A N D I N GI D E N T I T Y
M A G A Z I N EL A Y O U T
INFOGRAPHICD E S I G N
W E B S I T ED E S I G N
echnology makes people’s life easier. But it only works when
it’s well designed.
For that reason, I constantly learn to synchronize products with human needs & behaviors, to build things that beautifully, functionally work”
MY VISION ON DESIGN
“T
1/2
Saya harap Andasemua adalahweb desainer
2/2
Jika bukan,berpura-puralah
demikian
DEAL?
WEB DESAINHARI INI
oleh @edypang
SIAPAWEB DESAINER
Pekerja Web:
WEB DESAINER
WEB DEVELOPER
WEB DESAINER
WEB DESAINER
“DESIGN”
WEB DESAINER
Tampilan, Keindahan, Kenyamanan,
Kecepatan, Konsistensi, Brand, Image,
Mockup, Frontend Code
WEB DEVELOPER
WEB DEVELOPER
“ENGINE”
WEB DEVELOPER
Server, Kualitas kode, Fungsi Aplikasi,
Kecepatan, Keamanan, Engine Code
Hey, Web designer!Do you know what you do?
ost people make the mistake of thinking design is what it looks
like. That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works”
Steve Jobs
“M
designer who does not write markup and css is not designing
for the web, but drawing pictures”
Andy Rutledge
“A
Hey, Web designer!Do you really know
what you do?
Memikirkan Kembali tentang
Website
Bagaimana Semestinya
Web Desainer Membuatnya
Desainer =Partner Klien
1
SAME VISION
Bersikap sebagaipartner, bukan
pekerjanya
1 Desainer adalah Partner Klien
Dengarkan,berhenti bilang“saya ahlinya”
1 Desainer adalah Partner Klien
Usulkan danJelaskan Ide
1 Desainer adalah Partner Klien
Website =Produk
2
Website bukangrafik art
2 Website adalah Produk
Web desainermembuat website berguna dan laku
2 Website adalah Produk
Web desainer =produk desainer
2 Website adalah Produk
Web desain =Kompleks
3
Web desain =UI, UX, Visual performance
3 Web Desain itu Kompleks
Spesialis UI, SpesialisUX, Spesialis Frontend
= Web Desainer
3 Web Desain itu Kompleks
Para spesialis,Duduklah di depan
meja yang sama
3 Web Desain itu Kompleks
3 Web Desain itu Kompleks
Tim webdesainer
UI
UX Front-end
3 Web Desain itu Kompleks
Tim webdesainer
UI
UX Front-end
Copy-writer
Jika bekerja sendiri,memiliki pengetahuan
tentang itu semuaadalah wajib
3 Web Desain itu Kompleks
3 Web Desain itu Kompleks
Solo web desainer
UI
UXFront-end
Cara lamaOwner (Brief) => Desainer (PSD)
=> Frontend developer (HTML/CSS)
=> Web Programmer
Cara lamaSeringkali, dari satu proses ke proses
yang lain tidak ada sharing ide
Cara lama
RESIKO: Owner => Desainer
Hasil kurang akurat karena desainer hanya
menggambar. Kurang dasar. Menjadi beban
sendiri.
Cara lama
RESIKO: Desainer => Frontend Developer
Desainer kecewa karena hasil tidak sesuai
harapannya.
Cara lamaAsal tidak ada kesalahpahaman,
proses akan berjalan aman
PROBLEM: HASILNYA TIDAK
AKAN JADI LUAR BIASA
Rethink:
Hasil yang biasa saja
akan menjadikan kita
web desainer yang
biasa saja
Cara seharusnyaIngatlah bahwa web desainer mendesain
produk. Bukan sekedar menjadi “pekerja”
Cara seharusnyaSpesialis UI, Spesialis UX, Spesialis frontend
bekerjalah pada dalam pemahaman sama.
Pahami brief bersama.
Cara seharusnyaBanyak kepala seharusnya lebih baik
daripada satu kepala
Cara seharusnyaNo one is expert.
Dengarkanlah ide orang lain.
Cara seharusnyaSampaikan ide. Ide desain kemungkinan akan
lebih dapat diterima karena telah dipikirkan
bersama dari berbagai sisi.
Cara seharusnyaLanjutkan proses desain sesuai hasil yang
disepakati
Cara seharusnyaBila bekerja sendiri, libatkan diri kita
ke semua spesialiasi tersebut
Rethink:
Mendesain website
bersifat krusial.
Karena merupakan
proses awal.
Akurasi tujuanwebsite = tanggungjawab web desainer
4
Dengarkan klien
4 Akurasi Tujuan Website adalah Tanggung Jawab Web Desainer
Gunakan pemahamankita dengan maksimal
untuk membuat desainyang sesuai tujuan
website
4 Akurasi Tujuan Website adalah Tanggung Jawab Web Desainer
Jangan asalmengikuti tren
4 Akurasi Tujuan Website adalah Tanggung Jawab Web Desainer
Setiap website =produk yang unik
4 Akurasi Tujuan Website adalah Tanggung Jawab Web Desainer
Kenali sasaran(pengguna) website
4 Akurasi Tujuan Website adalah Tanggung Jawab Web Desainer
Content is KingDesign is Queen
4 Akurasi Tujuan Website adalah Tanggung Jawab Web Desainer
Web desainakan semakin
rumit
5
Teknologiberkembang (pesat)
5 Web Desain akan Semakin Rumit
Beragam devicedengan dimensi,
resolusi dan density yang berbeda
5 Web Desain akan Semakin Rumit
Browser bersaingmenampilkan fitur
tercanggih
5 Web Desain akan Semakin Rumit
Kecepatan dankemampuan browser mengadopsi “fitur & standar” yang baru
berbeda-beda
5 Web Desain akan Semakin Rumit
Photoshop / Fireworks tidak menghasilkan
desain final
5 Web Desain akan Semakin Rumit
Pixel perfect menjaditidak mungkin
5 Web Desain akan Semakin Rumit
Animasi dan efekdiputuskan di browser,
dalam frontend development
5 Web Desain akan Semakin Rumit
Web desainerdituntut terus belajar,
lebih cepat
5 Web Desain akan Semakin Rumit
Haruskahwebsite
responsive?
6
Responsive web bukantren, tapi kebutuhan
6 Haruskah Website Responsive?
6 Haruskah Website Responsive?
Variasi dimensi layarsangat banyak
6 Haruskah Website Responsive?
6 Haruskah Website Responsive?
Android screens, 2012
6 Haruskah Website Responsive?
Samsung phone & tablet screens, 2013
Responsive web = wajib?
6 Haruskah Website Responsive?
Mashable.comMedium.com
Theguardian.com/uk?view=mobile
6 Haruskah Website Responsive?
Mashable.comMedium.com
Theguardian.com/uk?view=mobile
RESPONSIVE
6 Haruskah Website Responsive?
Ebay.comAmazon.com
Facebook.com
6 Haruskah Website Responsive?
Ebay.comAmazon.comFcebook.com
TIDAK RESPONSIVE
6 Haruskah Website Responsive?
Responsive ataumobile version?
6 Haruskah Website Responsive?
PertimbangkanPutuskan
Itu pilihan
6 Haruskah Website Responsive?
RWD Tips#1 SIMPLE LAYOUT
Responsive Web Design Bagus
untuk layout yang simple
RWD Tips#2 MOBILE FIRST
Develop website dimulai untuk layar
mobile, baru kemudian ke layar
yang lebih besar (desktop)
RWD Tips#3 SATUAN RELATIF
Gunakan satuan % untuk layout
Satuan em / rem untuk tipografi
RWD Tips#4 GAMBAR RESPONSIF
Aplikasikan teknik responsive images
agar load pada mobile bisa diperkecil
7Kecepatan jugatanggung jawab
Web desainer
W H A A A A T ?
7 Kecepatan Juga Tanggung Jawab Web Desainer
7 Kecepatan Juga Tanggung Jawab Web Desainer
Struktur HTML/CSS yang buruk akanmemperlambat
website
7 Kecepatan Juga Tanggung Jawab Web Desainer
Optimasikan file resource: Javascript,
CSS, Gambar
THAT’S ALL HAPPENING
TODAY
2015?
“Web will be more interesting”
“Web will be more different”
“Web design will be more challenging”
2015Tren & Prediksi
Seiring dengan web yang semakin
kompleks, akansemakin banyak
teknologi dangenerator yang
membantu
Akan lebih banyakwebsite dengan
tipografi dominan
Akan lebih banyakwebsite dengan
tipografi dominan
Website dengananimasi dan efek yang
semakin detail dankompleks
Website dengananimasi dan efek yang
semakin detail dankompleks
Website bertipeinfografis
Website dengangambar besar
Website dengangambar besar
OK, heroes!Let’s make
better websites
alling yourself a learner is better than calling yourself an expert”“C