Sang Designer dan Sang Pemikir yang Jenius

Sang Designer dan Sang Pemikir yang Jenius

Waktu terus berjalan, sang designer kita sekarang sudah menjadi profesional dengan pekerjaan nya. Karena dengan kepandaian nya mendesign sebuah web, sekarang dia menjadi tambah pusing lagi dengan order-order yang datang dari sana-sini. Tentu saja sekarang dia harus memikirkan suatu cara yang cepat dan akurat untuk menyelesaikan order-order yang diterima nya.

Anda sebagai sahabat sejatinya, menjadi senang sekaligus prihatin dengan kondisi ini. Sebab hampir setiap hari sang designer kita itu dikejar-kejar oleh pelanggan nya untuk segera menyelesaikan design web nya. Walah-walaaah..., ternyata menjadi profesional itu tidak enak juga yah keluhnya. Apa ada yah suatu program yang dapat mempermudah dalam pendesign-an web ini..?, tanya dia kepada Anda. lalu Anda pun menjawabnya, Pasti ada donk..!, sebab semua orang juga memikirkan bagaimana membuat sesuatu itu menjadi mudah dan cepat..!, kilah Anda dengan semangat.

"Albert Einstein"

Tapi Program apa yang bisa membuat design web ku ini menjadi lebih cepat dan mudah..?, tanya dia lagi. Waaaaah..., untuk saat ini saya tidak tahu tuh..!, tapi pasti ada deh. Uuummmmh..., bagaimana kalau kita tanyakan pada Bang Einstein untuk hal tersebut.?, jawab Anda. Tapi saya malu bertanya pada dia, keluh dia lagi.

"Untuk mendapatkan ilmu jangan malu untuk bertanya pada siapa saja.., walaupun Bang Einstein itu terlihat eksentrik, tetapi dia punya banyak akal dan segudang ilmu yang mungkin bisa menyelesaikan masalah kamu itu..!, jawab Anda dengan antusias. Kamu benar.., Kalau begitu yuk antar saya ke Bang Einstein..!, sambung dia. Maka Anda berdua pun pergi menuju tempat nya Bang Einstein untuk mencari penyelesaian masalah teman sejati Anda itu."

Sesampai nya di tempat Bang Einstein, Anda pun langsung mengungkapkan permasalahan yang dihadapi rekan Anda tersebut. Pada saat itu Bang Einstein berpikir serius tanpa bersuara untuk mencari solusi dari permasalahan tersebut. Tak lama kemudian Bang Einstein berkata. " Untuk memudahkan dalam merancang apapun, diperlukan sebuah template atau wadah yang dapat menampung maksud yang sama. Sehingga template tersebut dapat digunakan lagi dilain waktu tanpa harus membuat lagi maksud yang sama. "

Mendengar penuturan dari Bang Einstein itu Anda berdua masih terlihat bingung mengenai maksud dari solusi yang diberikan Bang Einstein tersebut. Melihat gelagat itu, Bang Einstein pun tersenyum kemudian dia berkata lagi. Saya mengerti bila Kalian berdua bingung apa yang saya ucapkan tadi, Ok lah sekarang saya beri contoh yang mudah mengenai pemikiran saya tersebut. Kalian lihat batu bata yang ada dipinggir rumah ku ini..!, seru dia sambil menunjukan jarinya ke arah samping. Anda berdua pun menoleh ketempat yang ditunjukan oleh Bang Einstein. Dapatkah kalian berdua membuat sebuah batu bata yang sama ukuran nya, tanpa menggunakan cetakan..?, tanya Bang Einstein pada Anda berdua. Dengan kompak Anda berdua menjawab "Tidak bisa..!". Lalu Bang Einstein berkata lagi. Sebenarnya bisa, tetapi tentu saja memerlukan waktu yang lebih lama ketimbang memakai cetakan. Nah.., Cetakan inilah yang membuat pekerjaan membuat batu bata ini jadi cepat. Tapi apa hubungan nya batu bata dengan design web..?, tanya Anda pada Bang Einstein. Bang Einstein tidak menjawab pertanyaan Anda, tetapi dia tersenyum. Kemudian dia berkata lagi. Saya dengar kalian berdua sedang mempelajari design web..!, Anda berdua pun mengangguk seperti burung pelatuk. Sekarang saya bertanya pada Kalian berdua.., bagaimana cara penulisan program HTML untuk membuat huruf berjenis ARIAL yang berukuran 12 dan berwarna merah..?, tanya Bang Einstein sambil mengambil secarik kertas dan sebuah pena, kemudian diserahkan kepada teman Anda yang dari tadi terlihat bengong. Kemudian teman Anda tersebut menuliskan nya pada kertas yang diberikan Bang Einstein. Tulisan nya sebagai berikut :

                                           <font face="arial" size="2" color="red">

Lalu Bang Einstein bertanya lagi pada Anda berdua. Berapa banyak perintah ini Kamu tulis dalam suatu design web..?. Lalu teman Anda itu menjawab, Yah.., banyak dan hampir setiap saat saya menuliskan nya. Bisakah Kamu ringkas perintah itu dengan suatu template..? , tanya Bang Einstein lagi. Teman Anda tersebut cuma menggelengkan kepalanya seperti orang membaca tahlilan dalam ISTIGHOSAH. Bang Einstein tersenyum melihat kelakuan teman Anda tersebut, kemudian dia berkata lagi. Pernahkah kalian mendengar suatu script yang disebut dengan Cascading Style Sheet..?, Anda berdua pun menjawab, "Pernah..!". Sekarang gunakan CSS sebagai template untuk memudahkan Kalian dalam men-design sebuah web, seru Bang Einstein. Lalu Anda berdua pun saling berpandangan dan tertawa gembira atas penuturan Bang Einstein tersebut. Inilah rupanya maksud dari penuturan Bang Einstein semula. Bahwa untuk memudahkan suatu design, maka diperlukan sebuah template, dan dalam design web dengan HTML, CSS itulah salah satu template nya. Setelah paham mengenai penuturan Bang Einstein tersebut, Anda berdua pun pamit dan mengucapkan banyak terima kasih atas pemikiran nya tersebut.

Desain Website Atau Blog Yang Baik

Sebuah website/blog dapat dinilai memiliki desain yang baik apabila memenuhi kriteria penilaian tertentu yang mungkin saja berbeda tergantung dari sudut pandang penilai. Meskipun demikian, secara umum terdapat lima kriteria desain website yang baik yang bisa digunakan sebagai acuan bagi Anda untuk membuat desain website/blog Anda sendiri atau hanya sekedar memperbaiki desain website yang sedang Anda gunakan.

Pengunjung baru sebagai target utama

Tujuan yang digunakan sebagai dasar acuan kriteria-kriteria berikut adalah pengunjung baru dimana tentunya kesan pertama memiliki nilai tersendiri di mata mereka. Biasanya, pada kunjungan kedua dan seterusnya, penilaian akan beralih pada hal lainnya seperti konten website/blog yang bersangkutan. Pentingnya menunjukkan kesan pertama yang menggoda dalam sebuah desain website bisa dianalogikan dengan ketika Anda mencoba menunjukkan kesan pada lawan jenis bahwa Anda adalah sosok yang menawan.

Kriteria Desain Website/blog yang baik

1. Waktu loading yang cepat
   Dari sudut pandang manapun, waktu loading yang cepat harus menjadi perhatian utama. Apabila wesite Anda gagal ditampilkan dengan sempurna dalam waktu beberapa detik, biasanya pengunjung baru enggan berlama-lama menunggu dan memutuskan untuk meninggalkan website/blog Anda. Biasanya ini terjadi pada pengunjung yang berasal dari hasil pencarian dimana mereka membutuhkan informasi yang tepat dan singkat.
2. Tidak memiliki halaman antara
   Halaman antara adalah halaman yang ditampilkan sebelum halaman utama ditampilkan yang biasanya disebut dengan Splash Page atau Intermission. Halaman seperti ini biasanya berisi ucapan selamat datang atau bahkan iklan. Halaman seperti ini sering ditemukan, seringkali hanya berisi logo website/blog dengan tulisan “Click here to Enter Site” di bawahnya. Hal ini sungguh mengganggu bagi pengunjung website Anda.
3. Tidak memuat file multimedia yang terlalu banyak
   Video dan audio adalah konten multimedia yang cukup mengganggu pengunjung dan memang tidak efektif. Biasanya pengunjung akan langsung mengecilkan volume atau bahkan menutup website/blog Anda. Apabila file multimedia memang diperlukan, buat agar file tersebut tidak langsung dijalankan pada saat website dibuka dan tambahkan link untuk mengaktifkan file multimedia tersebut.
   Bentuk lain yang cukup mengganggu adalah gambar animasi, sebisa mungkin tempatkan gambar animasi di luar konten utama website Anda sehingga pengunjung tidak terganggu ketika berusaha membaca konten tersebut.
4. Memberikan pesan, kesan dan tautan yang jelas
   Pengunjung akan segera meninggalkan website/blog Anda jika mereka tidak mendapatkan kejelasan tentang apa yang ditawarkan pada website Anda. Berikanlah informasi yang cukup pada halaman website Anda mengenai isi website tersebut seperti judul yang cukup jelas dibaca dan menginformasikan isi halaman website Anda. Berikan tautan (link) yang menuju halaman-halaman lain pada website Anda.
   Tempatkan tautan ini pada tempat yang mudah dijangkau dan jelas terlihat. Hindari pemuatan tautan yang menuju halaman website yang masih dalam pengembangan. Sebagai alternatif, berikan pesan yang menyebutkan bahwa halaman tersebut akan dapat diakses pada jangka waktu tertentu.
5.  Memiliki desain dengan struktur yang tepat
   Tentukan struktur penempatan konten website seperti header, footer, menu navigasi dan blok iklan. Usahakan struktur tersebut sama pada setiap halaman sehingga pengunjung tidak dibuat bingung dengan misalnya, menu yang berpindah-pindah.

Usahakan agar pemilihan warna, penempatan logo website dan font yang digunakan konsisten pada setiap halaman sehingga pengunjung tidak merasa berpindah ke website lainnya. Jangan pernah menempatkan iklan yang lebih banyak daripada konten Anda karena pengunjung tidak mencari iklan melainkan konten website Anda.
Dengan mengikuti kriteria tersebut, peluang Anda dalam memberikan kepuasan kepada pengunjung akan lebih tersedia. Dapat disimpulkan bahwa desain website yang baik dilihat dari sudut pandang target pengunjung bukanlah sebuah website dengan tampilan mewah nan indah, melainkan sebuah desain terstruktur dan informatif serta memberikan kemudahan pada setiap pengunjung untuk mengeksplorasi website Anda.
Meskipun demikian, sebuah desain website yang baik belum tentu bisa membuat penunjung tetap mengunjungi website Anda. Banyak hal lain yang harus juga dipenuhi seperti konten yang selalu ter-update serta akurasi sebuah artikel yang ditawarkan.

Semoga bermanfaat.

10 Webdesign Inspiration : Ilustrasi Grafis

Kali ini saya akan menunjukkan beberapa showcase webdesign yang bisa jadi beberapa inspirasi untuk memulai pekerjaan kita. Setelah dua showcase sebelumnya, mari kita lihat beberapa inspirasi webdesain dengan tema khusus: grafis dan ilustrasi (berikutnya @belajar_web akan selalu menampilkan showcase dengan topik khusus).
Oke, langsung saya mari kita nikmati beberapa webdesign menarik berikut:

1. Francesco Mugnai

Sebuah portfolio design dengan ilustrasi potret sang pemilik website, dengan tambahan navigasi keyboard

2. Creative Hut

Header dengan ilustrasi dan tipografi yang simple dan eyecatching

3. Kadhaa

Ilustrasi menarik dengan navigasi yang atraktif. two thumb!

4. Gopal-Semma

Website pernikahan yang simple dan ilustratif. Anda juga ingin buat seperti ini untuk pernikahan Anda?

5. Kommigraphics

Time to slideshow!

6. 2 Create Studio

Grafis hand drawn yang indah dengan implementasi parallax yang dinamis

7. AIGA Nebraska The Show 20

Full ilustrasi. Dinamis. Keren!

8. Dear Lament

Siluet kepala gadis cantik ini akan menarik kita untuk mengeksplore website ini hingga ke kedalaman 4705px. It’s sexy silhouette!

9. Me and Oli

Tertarik dengan garmen unik? Check this out!

10. Zizzi Ristorante

Website restoran dengan tampilan yang ilustratif dan dinamis
Ingin membuat website ilustratif juga? Semoga terinspirasi.

Sumber :  http://belajarwebdesign.com

Menyatukan 2 Pikiran (Designer vs Programmer)

Designer adalah designer, designer bukan programmer. Ada hal-hal yang susah dipersatukan antara designer dan programmer. Hal itu adalah idealisme. Designer: membuat website sebaik mungkin menurut pada sudut pandang mereka. Programmer: menerjemahkan hasil design si designer menjadi satu program utuh.

Tidak semua programmer bisa men-design dan sebaliknya sebagian besar designer tidak bisa memrogram. Disaat terjadi masalah, keduanya mempertahankan pendapat masing-masing.

Designer: banyak membuat ornamen-ornamen yang terkadang tidak jelas gunanya apa, walaupun enak dipandang.
 

Programmer: meskipun bisa dibikin, tapi keseringan mereka malas untuk membuatnya satu-persatu.

Designer: bertahan dengan argumennya bahwa dengan banyak ornamen maka website lebih menarik (memang iya).
 

Programmer: menolak pendapat designer karena semakin banyak ornamen makan akan semakin berat loading website-nya.

Designer: terlalu murah untuk memberikan semua layout per page, meskipun bagus dan bisa menjadi variasi.
 

Programmer: ingin menggunakan layout general, jadi tidak perlu banyak-banyak membuat template.

Designer: membuat design yang menurut mereka bagus tanpa memperdulikan feedback-nya pada website itu.
 

Programmer: membuat program yang bisa mendapat feedback yang bagus.

Designer: tidak terlalu tahu bagaimana hasil design mereka nantinya akan seperti apa implementasinya.
 

Programmer: mengerti benar bagaimana implementasi website yang bagus.

Dari kasus-kasus diatas, maka seharusnya designer dan programmer harus sering-sering berkomunikasi. Sering terjadi adalah client akan berekspektasi bahwa website yang mereka dapat akan seperti hasil design. Jika hasil design sudah melalui tahap seleksi mungkin tidak akan menjadi masalah. Namun, jika yang terjadi tanpa ada pemeriksaan terlebih dahulu dan ada sesuatu yang tidak mungkin untuk dilakukan, itulah masalahnya.

Solusi yang tepat untuk masalah-masalah seperti ini adalah membuat sebuah aturan bagi para designer, apa yang boleh dan apa yang tidak. karena lagi-lagi, yang membuat design bisa diterapkan dengan baik di website adalah programmer.

Sumber :  http://belajarwebdesign.com

Typography Untuk Website

Terdengar simpel dan sangat mendasar, tetapi inilah yang sering saya keluhkan. Isu-isu legalitas dan kompatibel atau tidaknya sebuah font untuk ditampilkan dalam sebuah website sangat-sangat membuat saya stres tingkat tinggi. Mungkin terasa hiperbola dari kalimat saya yang terakhir, ya, tapi itulah kenyataannya. Kata kompatibel yang saya maksud adalah tampil sempurnanya sebuah font terhadap semua media (browser, OS, mobile).

Sejarah Singkat

Sedikit cerita tentang Web Typography. Awalnya setiap browser memiliki standar format font masing-masing dari “TrueDoc”, “EOT”, “OTF/TTF”, akhirnya muncul “Web Open Font Format” atau biasa disingkat “WOFF”. Dalam perjalanannya, Web typography banyak mengalami kendala, terutama masalah “Lisensi”. Dengan menyertakan/embed @font-face maka dengan mudah orang akan mendapatkan font tersebut. Hal ini dikarenakan akses menuju font yang dimaksud berupa tautan, dan setiap orang bisa mengakses font tersebut.

Bertolak belakang dengan cara yang mudah tadi, artis typography merasa kuatir dengan cara tersebut. Ini berarti orang akan dengan mudah mendapatkan font mereka secara gratis. Tak perlu saya jelaskan panjang lebar, tentunya kita tahu, mereka juga cari makan. So, we must respect them too. Kita juga harus menyiapkan biaya ekstra untuk lisensi font mereka (untuk yang berbayar). Jika kita ingin dihargai oleh mereka kita juga harus menghargai mereka. Toh sama-sama menguntungkan.

Mungkin saya cukupkan untuk latar belakang dari Web Typography ini, jika ingin membaca lebih lanjut silahkan baca tautan dari referensi yang saya sertakan.

Generic Fonts

Ada 5 generic fonts yang digunakan dalam web. Font tersebut adalah: Sans-Serif, Serif, Monospace, Cursive, dan Fantasy. Kita tidak perlu menambahkan font ekstra untuk kelima font tersebut, karena secara default browser bisa merender font-font tersebut.

Hasil Render MacOS

Hasil Render Linux

Hasil Render Windows

Hasil Render iPhone

Hasil Render iPad

Hasil Render Mozilla Mobile

Hasil Render Android Mobile

Hasil Render Android Tab

Gambar diatas adalah hasil render font dari pelbagai media. Setiap media memiliki generic font masing-masing. Kita para developer dituntut untuk membuat font tersebut tampil identik di setiap media.

Dasar Styling Font

Pada dasarnya, untuk menampilkan sebuah font type untuk sebuah desain situs cukup melampirkan jenis font tersebut ke sebuah elemen HTML. Berikut adalah cara dasarnya

p { font-family: sans-serif;}
.header { font-family: serif;}

Tentu saja jika hanya menyertakan salah satu diantara 5 font dasar, maka sebuah situs akan terlihat monoton. Maka untuk mempercantik desain situs perlu menambahkan font diluar font dasar. Namun, perlu diperhatikan juga kompatibilitas font tersebut, apakah dapat tampil di semua browser dengan identik atau tidak. Jika tidak, harus ada font alternatif yang serupa tapi tak sama untuk tampil identik di semua browser dan segala jenis OS dan media. Berikut contoh dasar menyertakan font yang kita targetkan beserta alternatif fontnya.

p { font-family: helvetica, arial, verdana, sans-serif;}
.header { font-family: “times new roman”, times, georgia, serif;}

Kode css diatas dapat dibaca sebagai berikut

“Tampilkan elemen p menggunakan font helvetica, jika tidak ada gunakan font arial, jika tidak ada gunakan font verdana, jika tidak ada gunakan sans-serif”

“Tampilkan elemen .header menggunakan font times new roman, jika tidak ada gunakan font times, jika tidak ada gunakan font georgia, jika tidak ada gunakan font serif”

Kode diatas hanyalah contoh. Untuk pemula, saya sarankan untuk memperhatikan bentuk font yang akan disertakan berada dalam kelompok mana. Untuk referensi, saya sertakan tabel bentuk font menurut kelompoknya.

Untuk kompatibilitas font berdasarkan dari OS, saya sertakan tabel dibawah.

Tabel-tabel diatas berisi tentang generic font yang didukung oleh OS. Perhatikan dengan seksama font-family yang cocok dengan font yang sesuai dengan desain. Mungkin untuk pengelompokan font, ikuti tabel-tabel sebelumnya.

Embed Font Eksternal

Jika generic font dirasa kurang untuk mempercantik desain situs. Maka kita perlu embed font eksternal. Dalam melakukan embed ini, perhatikan juga tentang “bagaimana format font yang dapat tampil identik disemua browser”. Dengan tetap menyertakan font-family agar jika format font tidak dapat diterima oleh browser, ada alternatif font lain yang dapat ditampilkan (setidaknya bentuk font tidak lari terlalu jauh).

Dasar embed font sangatlah mudah, seperti membuat tautan dalam HTML.

@font-face { font-family: font-sans-serif; src: url(fonts/sans-serif-custom.ttf); font-size: normal; font-weight: normal;}
p { font-family: fontsans-serif, arial, helvetica, sans-serif; }

Dalam melakukan embed font, yang terpenting adalah dimana letak font tersebut, sisanya menyesuaikan. Font family yang terdapat di @font-face adalah alias nama font yang akan kita embed.

Cara paling aman untuk embed font adalah menggunakan pihak ketiga. Sejak saya menjadi front-end web dev, saya hanya tahu 2 situs yang menyediakan layanan ini, mungkin teman-teman ada yang mau menambahkan, saya persilahkan.

www.fontsquirrel.com

www.google.com/webfonts

Berikut saya sertakan hasil render dari masing-masing browser di 3 OS berbeda.

Linux

Windows

MacOS

Mobile

Font yang saya gunakan adalah “Droid” untuk Squirrel font dan “Share” untuk Google font. Khusus untuk Google font, saya bereksperimen untuk menggunakan langsung pada server Google dan font yang saya unduh sendiri dalam format woff.

Untuk Squirrel font dengan tulisan “Font Mix”. Font family ini menggunakan kode sebagai berikut.

@font-face {
font-family: 'DroidSerifRegular';
src: url('droid/DroidSerif-Regular-webfont.eot');
src: url('droid/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('droid/DroidSerif-Regular-webfont.woff') format('woff'),
url('droid/DroidSerif-Regular-webfont.ttf') format('truetype'),
url('droid/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Mungkin cukup sekian artikel tentang webfont kali ini. Semoga bermanfaat

Referensi:

http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
http://www.upsdell.com/BrowserNews/res_fonts.htm
http://www.w3schools.com/cssref/css_websafe_fonts.asp
http://en.wikipedia.org/wiki/Web_typography

THE HISTORY OF HTML

HTML sudah lama dipakai sejak internet diperkenalkan dan merupakan bahasa standar untuk pembuatan halaman sebuah situs, tahun demi tahun banyak penyempurnaan untuk bahasa HTML hingga sekarang kita mengenal dengan HTML 5.

Berikut sejarah HTML dan perkembangannya :

by Wix. Browse more Technology infographics.

PROGRAMMER VS DESIGNER

Siang itu saya beragenda mewawancarai seorang pelamar untuk posisi staf admin keuangan. Malam sebelumnya saya memperhatikan surat aplikasi pekerjaan yang ia kirim, terlihat ada yang unik.

Cewek 25 tahun ini pegang 2 gelar sarjana S1; akutansi dan desain komunikasi visual. Pekerjaan sebelumnya adalah desainer website di sebuah biro jasa website di Surabaya. Dari portofolio yang bisa saya lacak, karya-karyanya cukup bagus. Malah istimewa kalau boleh sedikit memberi apresiasi lebih. Tapi kenapa ia membidik posisi administrasi alih-alih posisi desainer web yang juga ditawarkan?

Ternyata tak perlu waktu lama untuk tahu motifnya. Dia takut ketika bilang bisa bikin (desain) website, orang akan melihat dirinya bisa bikin dari keseluruhan proses produksi website, A-Z. Padahal dia ‘cuma bisa’ mendesainkan saja. Paling sampai urusan slicing, menggal-menggal worksheet desain sesuai dengan struktur elemen kebutuhannya.

Saya bisa langsung memaklumi ketakutannya. Dari banyak pengalaman saya pun sering menemukan kondisi banyak orang yang tak bisa membedakan peran designer web dan web programmer dalam proses produksi website. Apalagi di kota saya, Jogja. Di sini banyak pemilik bisnis yang sudah melek internet dan merasa butuh punya website. Tapi prinsip hemat sering jadi panglima. Kalau bisa dibikin oleh satu orang, ora perlu lah harus setim segala.

Sayangnya yang salah melihat ini bukan cuma orang luar saja, para pelaku jasa pembuatan website pun rancu membedakan antara designer dan programmer. Diperparah oleh munculnya banyak blog engine (wordpress, jomla, tumblr dll) yang kian memudahkan orang membuat website. Satu lagi dampak dari teknologi yang cenderung ‘instant’, bisa bikin orang tak lagi melihat esensi.

Pastinya itu cuma efek samping saja, pasti masih banyak hal baik yang didapat dari berbagai solusi teknologi termasuk blog engine. Tak jarang saya dengar cerita rekan yang sedang memprospek calon klien pembuatan website. Sering harga yang mereka beri ditanggapi dengan, “koq mahal ya. Kan sekarang bikin website itu gratis”.

Tim dalam produksi website
Dalam pembuatan website ada banyak fungsi yang berperan, tergantung kompleksitas website yang akan dibuat. Fungsi ini yang diartikan sebagai pelaku yang terlibat. Setidaknya dalam proses pembuatan website yang terlibat ada 3 fungsi; desainer, programmer dan yang bertanggung jawab urusan isi (content).

Desainer beda dengan programmer. Desainer berada di area estetis, upaya menyentuh perasaan tentang keindahan. Programmer berada di wilayah teknis matematis. Designer bekerja dengan imaginasi, programmer dengan logika.
Dalam sebuah kerja tim, desainer bertugas menangkap preferensi persepsi pengunjung agar bisa dengan mudah tertarik (user experience) dan gampang memahami isi  pesan webite (navigasi). Programmer bertanggungjawab mewujudkan imaginasi desainer dengan fungsi dan bahasa yang dimengerti oleh sistem jejaring internet; HTML, PHP, SQL, Java, Ajax, Delphi, Oracle, Ruby dan lain-lain.

Analoginya seperti membangun gedung, perlu ada arsitek yang berimaginasi tentang gedung yang artistik, fungsional, bikin betah penghuninya atau bahkan bikin kagum orang. Lalu ada insinyur sipil yang berperan mewujudkan imaginasi ini melalui pendekatan ilmiah dan matematis.

Kalau penanggung jawab isi berperan pada materi yang akan dimuat oleh website. Menyiapkan struktur isi website, isi menu tiap menu, narasi, copywriting dan lain-lain. Kadang 3 peran ini sering perlu ada 1 orang koordinator yang mampu menjembatani 3 fungsi tadi. Biasanya ini dipegang oleh seorang manajer proyek, dia mengawal dari perumusan konsep kreatif website yang mampu menjawab kebutuhan pemilik website sampai website siap tersaji.

Kadang website masih perlu keterlibatan pihak lain. Misal dalam ranah visual bisa perlu ada fotografer, ilustrator dan lainnya. Programmer pun bisa perlu bantuan programmer lain; misal programmer data base bila data yang dikelola begitu masif. Atau tester bila situs tersebut perlu menseriusi masalah keamanan website agar ndak gampang diretas orang.

Atas nama ‘semua bisa disederhanakan’
Kerancuan programmer dan desainer pun juga terjadi dalam analogi bikin gedung atau rumah. Ada yang menyederhanakan arsitek juga bisa diserahin tugas hingga tahap pembangunan. Atau ahli sipil pun bisa diminta membuat desain arsitekturnya.

Tak salah memang. Dalam keilmuan mereka pasti ada potongan area yang sama. Arsitek pun pasti belajar mengenai dasar-dasar ketekniksipilan, meski cuma mendasar. Secara etika profesional pun memungkinkan arsitek menangani tahapan pembangunan pada gedung dengan batasan hingga 3 lantai. Lebih itu harus pakai ahli sipil, setidaknya ini perkara keamanan gedung.

Ahli sipil pun pasti juga bisa ‘dipaksa’ membuat desain arsitektur bangunan maupun rumah. Apalagi kalau yang pesan tak terlalu mikirin orisionalitas. Banyak desain yang bisa dicomot. Atau sekedar bangunan ala kadarnya yang tak memusingkan estetika.

Kondisi yang sama, programmer pun pasti bisa bikin website tanpa bantu desainer web. Programmer pasti ndak kesulitan megang aplikasi desain yang sering dipakai buat desain web semacam fireworks, photoshop, in-design atau malah coreldraw. Tapi jangan berharap solusi kreatif atau orisionalitas atas user experience dan navigasi. Toh sekarang juga banyak website yang menyediakan templete atau contoh desain yang bisa dipakai sebagai referensi.

Pun designer bisa bikin website tanpa programmer. Kini ada banyak blog engine yang bisa menyederhanakan tahapan koding dan desain. Fenomena ini begitu banyak kita lihat, programmer dan desainer menjual jasa mereka secara mandiri tanpa keterlibatan yang lain.

Seperti ahli sipil dan arsitek, programmer dan designer web pun punya irisan area. Designer yang baik pasti dia akan mengikuti perkembangan teknologi proggraming web. Ia perlu tahu imaginasi yang bisa diwujudkan dengan HTML5 ataupun CSS3. Ia juga paham konsep tableless ataupun responsive web yang kini sedang marak. Cuma pastinya pemahaman ini tak menuntut dia paham detil hingga pada aspek teknis.

Lalu bagaimana urusan isi web? Ini juga bisa disederhanakan lagi. Boleh lah ada ahli yang bilang bikin website itu content matter, isi adalah panglima. Cuma banyak orang yang tak memusingkan masalah ini. Website kafe, hotel atau studio foto sudah ada pakemnya harus diisi apa, ndak usahlah mikir sesuatu yang baru di situ. Ndak usah mikir karakteristik tiap entitas bisnis dan konsep komunikasi pemasaran yang lebih komunikatif.

Tak ada yang salah dengan kondisi ini, selain sekedar banyak yang sudah tak lagi membedakan fungsi dasar mengapa ada istilah ‘programmer’ dan ‘designer’. Toh kebutuhan pasar memang masih banyak yang membutuhkan kesederhanaan ini. Mereka perlu punya website hanya untuk memastikan lembaga mereka tersedia di internet. Kayak mereka punya kartu nama, selain logonya tak ada elemen yang beda dengan kartu nama-kartu nama lainnya.

Entitas yang merasa perlu websitenya ditangani dengan pendekatan yang benar lazimnya memang sudah sadar bahwa mereka perlu berinvestasi membangun mereknya (branding). Mereka merasa perlu ada pembeda (distinctive) dalam setiap identitas yang ia bikin (corporate identity) untuk bisa terlihat diantara bejibun pesaing. Mereka yang sudah sadar membabangun ikatan emosi merek dengan pelanggan. Mereka sudah berpikir mengenai modifikasi persepsi untuk membangun citra positif yang akan berdampak pada reputasi.

Sekarang, jenis programmer web atau designer web seperti apakah dirimu?

Sumber :  http://belajarwebdesign.com

Designer Sejati Tumbuh Dewasa

D E S I G N E R     S E J A T I     T U M B U H     D E W A S A

Waktu pun terus berlalu, setapak-demi setapak di hadapinya. Kini sang designer mulai memikirkan cara bagaimana membuat sesuatu yang bermanfaat akan tetapi disukai oleh banyak orang. Untuk mencari Inspirasi dia berjalan-jalan keliling kota. Ketika diperjalanan dia melihat banyak sekali iklan-iklan yang bertebaran di sudut-sudut Kota, mulai dari spanduk, reklame, sampai neon-neon yang berkelap-kelip. Aha...!, Saya rasa mungkin tampilan Web akan lebih indah kalau ditaruh gambar-gambar seperti itu guman nya dalam hati. Yah betul..! teriaknya kegirangan, sampai tak menyadari kalau semua penumpang dalam bis kota

yang ia tumpangi memperhatikan nya. Karena merasa diperhatikan oleh semua orang, dia jadi malu sendiri. Akhirnya dia memutuskan untuk turun saja dari bis kota itu, dan kembali ke rumahnya untuk meng-aplikasikan pengalaman nya itu.

Dari pengalaman tongtong diatas, ada baiknya kalau kita mengambil hikmahnya. Yah tentu suatu design Web akan terlihat lebih indah dan menarik bila kita sajikan gambar atau images disamping teks-teks yang ada. bukankah Anda sendiri suka akan ke-indahan..?, kalau begitu marilah kita lanjutkan materi kita dengan fokus penempatan image, animasi dan flash pada design Web kita.

Untuk menempatkan images dalam suatu document HTML tidaklah sulit, Anda tinggal mengetikan TAG, dan lokasi dari file image itu berada. Image yang dapat Anda masukan ke Document HTML dapat berjenis BMP, JPG, JPEG, GIF, TIFF, dan lain sebagainya. Bila Anda ingin memasukan images yang berupa animasi, Anda dapat memasukan file images berektensi GIF. Tapi saya sarankan kepada Anda, jangan memasukan file image yang berukuran besar, sebab itu akan mempengaruhi proses pemuatan file di Browser. Sebaiknya bila Anda ingin menampilkan images yang berukuran besar harus disediakan Halaman khusus untuk menampilkannya, dalam arti image tersebut ditampilkan secara tersendiri tanpa ada tag-tag yang lain. Sebagai contoh Anda dapat membuka Halaman World of Electronics, sesi ANEKA PROJECT. disitu ada beberapa image yang saya tempatkan pada Halaman tersendiri, agar tidak mempengaruhi loading file tersebut. Atau Anda juga dapat menggunakan Tool peng-edit gambar seperti ADOBE PHOTOSHOP, untuk memperkecil ukuran file tersebut.

Tag / Kode / Perintah dari HTML

Tag / Kode / Perintah dari HTML

Pada Halaman sebelumnya, Anda sudah diperkenalkan tata cara atau aturan penulisan kode HTML beserta urutan-urutannya. Nah setelah Anda paham mengenai tata cara penulisan kode-kode HTML sekarang saatnya bagi Anda untuk dibawa lebih jauh mengenai tag atau perintah yang berlaku pada HTML. Tak perlu banyak pengantar lagi, sekarang saya akan menjelaskan mengenai TAG HTML ini satu persatu.

1. <center> dan </center>

Tag ini mempunyai fungsi untuk membuat suatu objek berada di tengah suatu bidang yang ditentukan. Objek itu dapat berupa teks, image maupun tabel. Suatu objek akan tetap berada di tengah sampai Tag penutup </center> ditemukan. Jadi setelah Anda memberi Tag <center> jangan lupa untuk memberikan Tag penutupnya yaitu </center> pada akhir dari objek yang akan diposisikan pada tengah suatu bidang.

Contoh : modifikasi dari latihan1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Latihan Membuat File HTML</title>
<meta name="author"   content="Malih Tongtong">
<meta name="description"   content="Uji coba pembuatan file HTML yang sederhana">
<meta name="keywords"   content="Latihan,HTML,Malih,berjalan,baik,atau,tidak">
</head>

<body>
<center>
Ini adalah program HTML pertamaku.
</center>
</body>
</html>

Pada file latihan1.html yang belum ditambahkan tag <center> teks berada pada keadaan default yaitu rata kiri, sedangkan setelah diberi tag <center> maka teks akan berada pada tengah layar monitor.

---

2. <b> dan </b>

Tag ini mempunyai fungsi untuk membuat huruf atau karakter yang ditampilkan menjadi tebal (BOLD).

Contoh penggunaan nya di dalam program :
Ini adalah <b>program HTML</b> pertamaku.
Ini adalah program HTML pertamaku.

Pada contoh diatas, kalimat program HTML diapit dengan tag <b> dan </b> , maka ketika Anda jalankan di browser kalimat tersebut akan tercetak dengan huruf tebal.

---

3. <font> dan </font>

Tag ini berfungsi untuk mengatur tampilan jenis, warna, dan ukuran suatu karakter atau huruf (font), Anda lihat huruf-huruf yang ada pada tutorial ini, warna-warna dari huruf-huruf itu sengaja saya buat demikian agar Anda dapat membedakan yang mana Objek, keterangan, dan subjek nya. Huruf pada Objek ini ditandai dengan huruf berwarna merah, keterangan ditandai dengan huruf hitam dan subjek dengan warna biru.

Atribut dari Tag <font> ini ada beberapa jenis antara lain :

a. color	:	Untuk merubah warna dari huruf atau karakter.
b. size	:	Untuk merubah ukuran huruf, besar kecilnya ukuran huruf di deklarasikan dengan angka 1 sampai 6.
c. face	:	Untuk merubah jenis dari huruf yang akan kita gunakan seperti Arial, Times New Roman, Verdana dan sebagainya.

Atribut color :
contoh penggunaan nya di dalam program :

<font color="black">Tulisan ini berwarna hitam</font>
<font color="red">Tulisan ini berwarna merah</font>
<font color="blue">Tulisan ini berwarna biru</font>
<font color="green">Tulisan ini berwarna hijau</font>
<font color="white">Tulisan ini berwarna putih</font>

Anda dapat merubah warna dari huruf atau karakter sesuka hati Anda, contoh diatas hanya beberapa warna saja yang di sajikan. Selain dengan nama warna dalam bahasa inggris, Anda juga dapat menggunakan kode HEXA seperti pada table dibawah ini.

DAFTAR WARNA - WARNA DAN KODE NYA
	#000000		#333300		#003366		#333399
	#800000		#808000		#008080		#666699
	#FF0000		#99CC00		#33CCCC		#800080
	#FF00FF		#FFFF00		#00FFFF		#993366
	#FF99CC		#FFFF99		#CCFFFF		#CC99FF
	#993300		#003300		#000080		#333333
	#FF6600		#008000		#0000FF		#808080
	#FF9900		#339966		#3366FF		#969696
	#FFCC00		#00FF00		#00CCFF		#C0C0C0
	#FFCC99		#CCFFCC		#99CCFF		#FFFFFF

Atribut size :
Contoh penggunaan nya di dalam program :

<font size="1">Huruf ini mempunyai ukuran 1</font>
<font size="2">Huruf ini mempunyai ukuran 2</font>
<font size="3">Huruf ini mempunyai ukuran 3</font>
<font size="4">Huruf ini mempunyai ukuran 4</font>
<font size="5">Huruf ini mempunyai ukuran 5</font>

Selain dengan angka, Anda juga dapat mendeklarasikan ukuran huruf dengan besarnya PIXEL contoh : <font size="1px">

Atribut face :
Contoh penggunaan nya di dalam program :

<font face="arial">Huruf ini type ARIAL</font>
<font face="times new roman">Huruf ini type TIMES NEW ROMAN</font>
<font face="verdana">Huruf ini type VERDANA</font>
<font face="tahoma">Huruf ini type TAHOMA</font>

---

4. <u> dan </u>

Tag ini berfungsi untuk memberikan efek garis bawah (underlines) pada suatu huruf atau karakter.

Contoh penulisannya di dalam program :

Menteri Pendidikan Nasional <u>memberikan sumbangan </u> untuk kaum miskin.

Menteri Pendidikan Nasional memberikan sumbangan untuk kaum miskin.

Pada contoh kalimat diatas kalimat MEMBERIKAN SUMBANGAN diapit oleh tag <u> dan </u> bila dijalankan pada browser maka kalimat yang di apit oleh tag itu akan diberi tanda garis bawah (underlines).

---

5. <br>

Tag ini berfungsi untuk berpindah baris ke baris berikutnya. Misalkan Anda membuat sebuah karya tulis yang tentunya tulisan itu cukup panjang untuk dibaca, atau Anda mennginginkan sesuatu kalimat harus berada dibawahnya walaupun kalimat itu hanya terdiri dari beberapa kata, Anda dapat menggunakan tag <br> untuk memisahkannya. Untuk Tag <br> tidak perlu ditutup seperti halnya tag-tag yang telah disinggung diatas. jadi cukup Anda berikan tag <br> dimana Anda menginginkannya.

Contoh penggunaanya dalam program :

Ini baris kesatu, <br>Ini baris kedua, <br>Ini baris ketiga.

Setelah Anda menjalankannya di Browser, maka Kalimat diatas akan menjadi seperti ini.

Ini baris kesatu,
Ini Baris kedua,
Ini baris ketiga.

---

6. <p>

Tag ini mempunyai fungsi untuk membuat sebuah paragraf baru. Didalam sebuahartikel tentunya banyak sekali paragraf-paragraf untuk memisahkan pokok pikiran yang terkandung dalam kumpulan kalimat tersebut, untuk memisahkan paragraf yang satu dengan yang lainnya, maka Tag <p> ini digunakan. Atribut dari Tag <p> ini ada 3 jenis yaitu Rata kanan ( align="right" ) , rata kiri ( align="left" ), rata kanan kiri ( align="justify" ). dan rata tengah ( align="center" ).

Contoh penggunaan nya di dalam program :

Rata kiri <p align="left">

paragraf yang ada di bagian ini akan disusun berdasarkan paragraf dengan aturan rata kiri, sehingga semua huruf yang berada di bagian kiri halaman akan terlihat rapi.

Rata kanan <p align="right">

paragraf yang ada di bagian ini akan disusun berdasarkan paragraf dengan aturan rata kanan, sehingga semua huruf yang berada di bagian kanan halaman akan terlihat rapi.

Rata kanan-kiri <p align="justify">

paragraf yang ada di bagian ini akan disusun berdasarkan paragraf dengan aturan rata kanan-kiri, sehingga semua huruf yang berada di bagian kanan dan kiri halaman akan terlihat rapi.

Rata tengah <p align="center">

paragraf yang ada di bagian ini akan disusun berdasarkan paragraf dengan aturan rata tengah, sehingga semua huruf akan terpusatkan dibagian tengah.

---

7. _dan

Tag ini mempunyai fungsi untuk membuat sebuah huruf atau karakter berada sedikit kebawah dari huruf atau karakter yang lain. Misalnya kita ingin menuliskan rumus suatu senyawa kimia, maka tag <sub> ini diperlukan.

Contoh penggunaan nya di dalam program :

H₂O      tampilan di browser :       H₂O
FeCl₃   tampilan di browser :     FeCl₃
CO₂      tampilan di browser :       CO₂

---

8. ^dan

Tag ini merupakan kebalikan dari tag <sub>, bila kita ingin membuat suatu huruf atau karakter agak sedikit keatas maka tag <sup> ini diperlukan. Misalnya kita ingin menuliskan suatu persamaan matematika maka kita gunakan tag ini untuk membuat suatu karakter atau huruf berada sedikit diatas yang lainnya.

Contoh penggunaan nya di dalam program :

X ² + Y ² + X + Y + 1 = 0    
tampilan di browser : X ² + Y ² + X + Y + 1 = 0

---

9. <i> dan </i>

Tag <i> ini berfungsi untuk membuat huruf atau karakter menjadi ITALIC.

Contoh penggunaan nya di dalam program :

Menteri Pendidikan Nasional <i>memberikan santunan</i> untuk anak yatim piatu

Kalimat diatas bila di jalankan pada browser menjadi seperti berikut ini :
Menteri Pendidikan Nasional memberikan santunan untuk anak yatim piatu

---

10. <hr>

Tag ini berfungsi untuk memberikan garis batas. Anda lihat Halaman web ini, Untuk memisahkan Materi yang satu dengan yang lain saya memberi batas dengan garis. Yah itulah kegunaan dari tag <hr>

---

11. <ol>, <li>, </li> dan </ol>

Terkadang suatu tulisan perlu diberi penjelasan dengan tanda-tanda tertentu, agar si pembaca memahami bahwa tulisan itu merupakan satu kesatuan yang terdiri dari beberapa point. Sebagai contoh sekali lagi Anda perhatikan Halaman web ini. Untuk memperjelas sesuatu bagian dari pokok pembahasan, saya menggunakan angka-angka yang merupakan point-point dari suatu bahasan dalam satu kesatuan. Tag ini saya beri nomor urut ke 11. Dengan perintah atau tag <ol> ini maka nomor urut akan dibuat secara otomatis.>

Contoh penggunaan nya di dalam program :

Jadwal kegiatan untuk hari ini :
<ol>
<li>Mandi.</li>
<li>Sarapan pagi.</li>
<li>Berangkat ke Kantor.</li>
<li>Meeting dengan Kepala Bagian.</li>
<li>Pulang dari Kantor.</li>
<li>Mandi Sore.</li>
<li>Istirahat.</li>
</ol>

Maka setelah dijalankan pada browser akan tampak sepertidi bawah ini :

Jadwal kegiatan untuk hari ini :

1. Mandi
2. Sarapan pagi
3. Berangkat ke Kantor
4. Meeting dengan Kepala Bagian
5. Pulang dari Kantor
6. Mandi Sore
7. Istirahat

Perhatikan.., setiap item di apit oleh tag <li> dan </li>, dan Tag <li> , </li> ini harus berada diantara Tag <ol> dan </ol> .

---

12. <ul>, <li>, </li> dan </ul>

Tag ini hampir mirip dengan tag <ol> diatas, bedanya adalah item-item nya bukan ditandai dengan angka melainkan ditandai dengan titik atau DOT yang besar.

Contoh penggunaan nya di dalam program :

Jadwal kegiatan untuk hari ini :
<ul>
<li>Mandi</li>
<li>Sarapan pagi</li>
<li>Berangkat ke Kantor</li>
<li>Meeting dengan Kepala Bagian</li>
<li>Pulang dari Kantor</li>
<li>Mandi Sore</li>
<li>Istirahat</li>
</ul>

Maka setelah dijalankan di Browser akan terlihat seperti dibawah ini.

Jadwal kegiatan untuk hari ini :

• Mandi
• Sarapan pagi
• Berangkat ke Kantor
• Meeting dengan Kepala Bagian
• Pulang dari Kantor
• Mandi Sore
• Istirahat

---

Wow...! Sampai disini, bila Anda menguasai tag-tag yang telah disajikan diatas. Saya ucapkan selamat..!, sebab dengan beberapa TAG itu KELAHIRAN SEORANG DESIGNER SEJATI dimulai.