Web Desain Hari Ini

WEB DESAIN
HARI INI
oleh @edypang

Hi, saya
EDY PANG
D S A I N E R

B R A N D I N G
I D E N T I T Y

KONTAK
hi@edy.im
http://edy.im
@edypang

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 Anda
semua adalah
web desainer

2/2
Jika bukan,
berpura-puralah
demikian

Pekerja Web:
WEB DESAINER
WEB DEVELOPER

WEB DESAINER
Tampilan, Keindahan, Kenyamanan,
Kecepatan, Konsistensi, Brand, Image,
Mockup, Frontend Code

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

Bersikap sebagai
partner, bukan
pekerjanya
1 Desainer adalah Partner Klien

Dengarkan,
berhenti bilang
“saya ahlinya”

Usulkan dan
Jelaskan Ide

Website bukan
grafik art
2 Website adalah Produk

Web desainer
membuat website
berguna dan laku

Web desainer =
produk desainer

Web desain =
UI, UX, Visual
performance
3 Web Desain itu Kompleks

Spesialis UI, Spesialis
UX, Spesialis Frontend
= Web Desainer

Para spesialis,
Duduklah di depan
meja yang sama

Tim web
desainer
UI
UX Front
-end

Tim web
desainer
UI
UX Front-
end
Copy-
writer

Jika bekerja sendiri,
memiliki pengetahuan
tentang itu semua
adalah wajib

Solo web desainer
UI
UX
Front
-end

Cara lama
Owner (Brief) => Desainer (PSD)
=> Frontend developer (HTML/CSS)
=> Web Programmer

Cara lama
Seringkali, 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 lama
Asal 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 seharusnya
Ingatlah bahwa web desainer mendesain
produk. Bukan sekedar menjadi “pekerja”

Cara seharusnya
Spesialis UI, Spesialis UX, Spesialis frontend
bekerjalah pada dalam pemahaman sama.
Pahami brief bersama.

Cara seharusnya
Banyak kepala seharusnya lebih baik
daripada satu kepala

Cara seharusnya
No one is expert.
Dengarkanlah ide orang lain.

Cara seharusnya
Sampaikan ide. Ide desain kemungkinan akan
lebih dapat diterima karena telah dipikirkan
bersama dari berbagai sisi.

Cara seharusnya
Lanjutkan proses desain sesuai hasil yang
disepakati

Cara seharusnya
Bila bekerja sendiri, libatkan diri kita
ke semua spesialiasi tersebut

Rethink:
Mendesain website
bersifat krusial.
Karena merupakan
proses awal.

Akurasi tujuan
website = tanggung
jawab web desainer
4

Dengarkan klien
4 Akurasi Tujuan Website adalah Tanggung Jawab Web Desainer

Gunakan pemahaman
kita dengan maksimal
untuk membuat desain
yang sesuai tujuan
website

Jangan asal
mengikuti tren

Setiap website =
produk yang unik

Kenali sasaran
(pengguna) website

Content is King
Design is Queen

Web desain
akan semakin
rumit
5

Teknologi
berkembang (pesat)
5 Web Desain akan Semakin Rumit

Beragam device
dengan dimensi,
resolusi dan density
yang berbeda

Browser bersaing
menampilkan fitur
tercanggih

Kecepatan dan
kemampuan browser
mengadopsi “fitur &
standar” yang baru
berbeda-beda

Photoshop / Fireworks
tidak menghasilkan
desain final

Pixel perfect menjadi
tidak mungkin

Animasi dan efek
diputuskan di browser,
dalam frontend
development

Web desainer
dituntut terus belajar,
lebih cepat

Haruskah
website
responsive?
6

Responsive web bukan
tren, tapi kebutuhan
6 Haruskah Website Responsive?

Variasi dimensi layar
sangat banyak

Android screens, 2012

Samsung phone & tablet screens, 2013

Responsive web =
wajib?

Mashable.com
Medium.com
Theguardian.com/uk?vi
ew=mobile

Mashable.com
Medium.com
Theguardian.com/uk?vi
ew=mobile
RESPONSIVE

Ebay.com
Amazon.com
Facebook.com

Ebay.com
Amazon.com
Fcebook.com
TIDAK RESPONSIVE

Responsive atau
mobile version?

Pertimbangkan
Putuskan
Itu pilihan

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 juga
tanggung jawab
Web desainer

W H A A A AT ?
7 Kecepatan Juga Tanggung Jawab Web Desainer

Struktur HTML/CSS
yang buruk akan
memperlambat
website

Optimasikan file
resource: Javascript,
CSS, Gambar

“Web will be more
interesting”

“Web will be more
different”

“Web design will be
more challenging”

Seiring dengan web
yang semakin
kompleks, akan
semakin banyak
teknologi dan
generator yang
membantu

Akan lebih banyak
website dengan
tipografi dominan

Website dengan
animasi dan efek yang
semakin detail dan
kompleks

OK, heroes!
Let’s make
better websites

alling yourself a learner is better
than calling yourself an expert”“C

hi@edy.im
http://edy.im
T E R I M A
K A S I H

Web Desain Hari Ini

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Web Desain Hari Ini

Similar to Web Desain Hari Ini (20)

Web Desain Hari Ini