WEB TREND 2008

Free Saturday Lesson ­ ComLabs ITB

   

contenttechnologyw e b . i n d o n e s i a2008design

{             }

   

Content

   

Konsep Web 2.0 : istilah yang muncul saat conference brainstorming session O'Reilly dengan MediaLive International pada tahun 2004.                                 ”participatory websites, it's about people...”

lagi­lagiweb 2.0 !

   

   

   

” social networking ”Add friendster gue dong!

   

Dulu pergaulan atau aktivitas sosial online adalah irc, yahoo, icq dsb.Di era web 2.0 trendnya adalah web based social networking.Orang­orang saling terkoneksi dalam jejaring pertemanan melalui hubungan kesamaan interest, hobby, topik, lokasi, sekolah dsb.

   

[ facebook.com ]

[ myspace.com ]

+ : apps & API

+ : music demo

   

[ multiply.com ]

[ friendster.com ]

+ : media sharing

+ : southeast asia

   

[ last.fm ]

[ mixi.co.jp ]

+ : music profile+ : audio scrobble

+ : batara kesuma's

   

[ akucintasekolah.com ]

           + : spesifik

[ fupei.com ]

   

” user generated content ”We provides the bucket...

   

[ flickr.com ]

[ youtube.com ]

+ : tags & community

+ : video

   

[ layartancap.com ]

[ sharingfoto.com ][ fotoku.com ]

[ fotografer.net ]

   

” multimedia & file sharing ”

Bandwidth bukan masalah...

   

[ rapidshare.com ]

[ youtube.com ]+ : video

   

[ imeem.com ]

[ multiply.com ]

   

[ layartancap.com ]

[ gigeupload.com ][ indowebster.com ]

[ gudangupload.com ]

   

” blog ”68% blogger positif :p

   

[ priyadi.net ]

[ budi putra ]

   

[ blogger.com ]

[ wordpress.com ]

   

[ dagdigdug.com ]

[ blogdetik.com ]

   

” microblogging ”Saat ini saya sedang di WC...

   

[ twitter.com ]

[ plurk.com ]

   

[ jaiku.com ]

[ pownce.com ]

   

[ kronologger.com ]

[ moodmill.com ]

   

” ecommerce ”Jualan online...

   

[ ebay.com ]

[ amazon.com ]

   

[ multiply.com ]

[ kutukutubuku.com ]

   

[ FJB kaskus.us ]

[ bhinneka.com ]

   

” social bookmarking ”Submit, rate... or dig.

   

[ del.icio.us ]

[ digg.com ]

   

[ lintasberita.com ][ republikblog.com ]

[ kilasan.com ]

   

” knowledge sharing ”Wikinomics & open culture...

   

[ id.wikipedia.org ]

[ ilmukomputer.com ]

   

” microsite ”Product & event branding...

   

[ Biore ]

[ Dove Moment of Truth ]

   

” web 1.0 legacy ”We're still alive and upgraded !

   

[ kaskus.us ]

[ detik.com ][ detikbandung.com ]

[ okezone.com ]

   

[ portal & profile ]

[ layanan ]

   

” legal issues ”My precious content... 

   

   

UU ITEUndang­Undang Informasi dan Transaksi Elektronik

( Pasal 25 )

   

Desain

   

” web 2.0 is not a design aesthetic ! ”Elliot Jay, FOWD Conference 2007

   

# misconceptions, but...

“Recruiting: a good web 2.0 designer.”

“Our client wants web 2.0 looks website.”

“This web design was great and up­to­date, it's sooo web 2.0­ish.”

“Wah webnya web 2.0 banget!”

    samples[ sample: microblogging ]

   similarities[ design trend ~ web 2.0 looks ]

Web 2.0

Web 2.0

Web 2.0

functions, features

design trend

business process,user participatory,user interaction

   

well... let's get cliché !( knowing the false understanding... adapt the current trends... trying to looking good! )

$ $ $

   become typical[ example: protolize.org ]

   become typical

vibrant,hi­contrast

colors

mirror effect / reflection

Also: centered layout,  oversize text,  glossy icons,highlight area,  screenshot reflection

round flashes

glossy/sheen,3D effect

roundedcorners

gradients

diagonallines

plenty ofspaces,

clear text

backgroundsolid?

gradient?clean white?

   

” background ”

   

Background: Solid + Dark

   

Background: Gradient

   

Background: Clean White

   

Background: Floating Paper

   

” glossy/sheen ”

   

Glossy Navigation & Buttons

   

” mirror effect ”

   Mirror Effects / Reflections

   

” rounded corners ”

   Rounded Area / Box

   

” clean, oversize & searchable text ”

   

Clean Text

   

” highlight area + teasing button”

   Highlight Area

   Highlight Area

   Highlight Area

   

Technology

   

” RIA & AJAX ”Javascript? Yukk...

   

Rich Internet ApplicationsAsynchronous Javascript And XML

   

” open API ”Let's mashup...

   

Application Programming InterfaceGoogleMapsAPI – FacebookAPI – FlickrAPI – PayPal API etc.* Mashup

   

” RSS ”E x t r a c t . . .

   

Really Simple Syndicationfrequently publishing ­ content summary – feeds 

   

” openID ”Single authentication... 

   

   

” webstandard & usability ”

Yippe, my web is XHTML & CSS valid! 

   

DOMCSSsemantic webW3C

XHTML/HTML       SVG

   

” opensource ”Linux, Apache, MySQL, PHP, Ruby on Rails, you name it...

   

   

” framework ”Don't repeat yourself... 

   

   

” mobile technology ”Devices, standard, lifestyle, infrastructure... 

   

GPRS3GminiBrowserBlackBerry

webstandardWAP

UMPC

notebookWi­Fi

   

” microformat ”Toward web semantic, today... 

   

   

http://slideshare.net/niwat0ri

   

t e r i m a   k a s i h

Diki Andeas – R&D PT Jerbee Indonesiadiki@diki.or.id www.chickenstrip.org