Web Desain Hari Ini

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

KONTAK

[email protected]://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 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”


Usulkan danJelaskan Ide


Website =Produk

2

Website bukangrafik art

2 Website adalah Produk

Web desainermembuat website berguna dan laku


Web desainer =produk desainer


Web desain =Kompleks

3

Web desain =UI, UX, Visual performance

3 Web Desain itu Kompleks

Spesialis UI, SpesialisUX, Spesialis Frontend

= Web Desainer


Para spesialis,Duduklah di depan

meja yang sama



Tim webdesainer

UI

UX Front-end


Tim webdesainer

UI

UX Front-end

Copy-writer

Jika bekerja sendiri,memiliki pengetahuan

tentang itu semuaadalah wajib



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


Jangan asalmengikuti tren


Setiap website =produk yang unik


Kenali sasaran(pengguna) website


Content is KingDesign is Queen


Web desainakan semakin

rumit

5

Teknologiberkembang (pesat)

5 Web Desain akan Semakin Rumit

Beragam devicedengan dimensi,

resolusi dan density yang berbeda


Browser bersaingmenampilkan fitur

tercanggih


Kecepatan dankemampuan browser mengadopsi “fitur & standar” yang baru

berbeda-beda


Photoshop / Fireworks tidak menghasilkan

desain final


Pixel perfect menjaditidak mungkin


Animasi dan efekdiputuskan di browser,

dalam frontend development


Web desainerdituntut terus belajar,

lebih cepat


Haruskahwebsite

responsive?

6

Responsive web bukantren, tapi kebutuhan

6 Haruskah Website Responsive?


Variasi dimensi layarsangat banyak



Android screens, 2012


Samsung phone & tablet screens, 2013

Responsive web = wajib?


Mashable.comMedium.com

Theguardian.com/uk?view=mobile


Mashable.comMedium.com

Theguardian.com/uk?view=mobile

RESPONSIVE


Ebay.comAmazon.com

Facebook.com


Ebay.comAmazon.comFcebook.com

TIDAK RESPONSIVE


Responsive ataumobile version?


PertimbangkanPutuskan

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 jugatanggung jawab

Web desainer

W H A A A A T ?

7 Kecepatan Juga Tanggung Jawab Web Desainer


Struktur HTML/CSS yang buruk akanmemperlambat

website


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

[email protected]://edy.im

T E R I M AK A S I H