<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Jurus Grafis - Tutorial / Tips / Inspirasi Desain &#187; Website &amp; Interface</title>
	<atom:link href="http://jurusgrafis.com/category/artikel/website-interface/feed/" rel="self" type="application/rss+xml" />
	<link>http://jurusgrafis.com</link>
	<description>Photoshop &#124; Illustrator &#124; Print Design &#124; Web Design &#124; Template Desain Gratis</description>
	<lastBuildDate>Fri, 20 Jan 2012 05:05:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>Siapa Saja yang Berperan dalam Pembuatan Sebuah Website?</title>
		<link>http://jurusgrafis.com/artikel/siapa-saja-yang-berperan-dalam-pembuatan-sebuah-website/</link>
		<comments>http://jurusgrafis.com/artikel/siapa-saja-yang-berperan-dalam-pembuatan-sebuah-website/#comments</comments>
		<pubDate>Thu, 16 Dec 2010 06:54:33 +0000</pubDate>
		<dc:creator>Richard Fang</dc:creator>
				<category><![CDATA[Artikel]]></category>
		<category><![CDATA[Website & Interface]]></category>
		<category><![CDATA[Back End]]></category>
		<category><![CDATA[Copywriter]]></category>
		<category><![CDATA[Designer]]></category>
		<category><![CDATA[Developer]]></category>
		<category><![CDATA[Front End]]></category>
		<category><![CDATA[Interface]]></category>
		<category><![CDATA[Peran]]></category>
		<category><![CDATA[Website]]></category>

		<guid isPermaLink="false">http://jurusgrafis.com/?p=2501</guid>
		<description><![CDATA[Kebanyakan orang menganggap sebuah website itu hanya di buat oleh satu orang saja, yaitu web designer. Tidak heran masih banyak desainer grafis lokal dengan basic print design yang mengira membuat website itu sulit. Tahun lalu saya sempat menawarkan teman (seorang desainer grafis juga) untuk mencoba terjun ke dalam desain website, tetapi tanggapannya adalah &#8220;gue ga [...]]]></description>
			<content:encoded><![CDATA[<p></p>
<p>Kebanyakan orang menganggap sebuah website itu hanya di buat oleh satu orang saja, yaitu web designer. Tidak heran masih banyak desainer grafis lokal dengan basic print design yang mengira membuat website itu sulit.</p>
<p><span id="more-2501"></span></p>
<p>Tahun lalu saya sempat menawarkan teman (seorang desainer grafis juga) untuk mencoba terjun ke dalam desain website, tetapi tanggapannya adalah &#8220;gue ga bisa code&#8221; , &#8220;ribet&#8221; dan lainnya yg sejenis. Ya, itulah sekilas potret mayoritas teman-teman desainer lokal saat ini.</p>
<p>Sangat disayangkan, karena menurut saya media yang akan paling banyak di gunakan dalam 2-3 tahun kedepan adalah media digital. Coba lihat<a href="http://store.apple.com/id/browse/home/shop_ipad/family/ipad?mco=MTY5NjUyMTY" target="_blank"> iPad sudah bisa di order online</a> dari website Apple, dengan harga mulai dari Rp.4,799,000. Sangat terjangkau sekali bukan? Dan ini baru awal, coba bayangkan kalau sudah menjamur.</p>
<p>Pembuatan produk digital (dalam hal ini saya ingin menitikberatkan pada website) melibatkan peran beberapa profesi. Website yang bagus biasanya di kerjakan oleh sekumpulan orang dengan spesialisasi yang berbeda namun saling bersinergi. Beberapa di antaranya adalah,</p>
<h3>1. Web Interface Designer</h3>
<p>Spesialisasi ini seharusnya bisa di adaptasi oleh teman-teman dengan basic print design. Memang butuh waktu untuk mempelajari cara kerja website, memahami cara kerja code dan developer, sampai dengan mengamati tren desain website terkini. But it&#8217;s worth it! Sekali kamu menyelami dunia interface design, kamu akan menyelam semakin dalam  </p>
<p>Peran interface sama pentingnya dengan developer, ini sama saja seperti kita mendesain sebuah logo. Kita menggunakan elemen visual untuk menyampaikan pesan, menggunakan simbol untuk mempermudah pengguna berinteraksi.</p>
<p>Intinya tetap komunikasi, malah semakin kita mendalami interface kita akan lebih banyak mempelajari kebiasaan pengguna (usability), yang menurut saya, secara tidak langsung kita mempelajari psikologi orang lain (misalnya, reaksi pengguna terhadap warna tertentu, permainan tipografi dan lainnya).</p>
<h3>2. Front End Developer</h3>
<p>Kalau kamu sudah mengerti code dan kamu senang meng-coding desain yang sudah kamu buat sendiri, maka sebaiknya kamu memilih peran front end developer. Secara teknis, front end developer akan menghasilkan html dan css dari desain yang telah di buat di photoshop.</p>
<p>Front end developer yang baik mempunyai mata yang jeli dan biasanya juga mempunyai sense of art. Kalau basic nya memang desainer maka akan lebih baik lagi. Itu sebabnya banyak juga web interface designer yang bisa berperan sebagai front end developer juga.</p>
<h3>3. Back End Developer</h3>
<p>This is where the magic happens. Tampilan sudah bagus, sekarang tinggal memberikan &#8216;kemampuan&#8217; pada website. Back End Developer ini bisa di bilang pekerja di belakang layar. Pengguna tidak melihat langsung tetapi bisa merasakan dan berinteraksi dengan website.</p>
<p>Misalnya saat kita mengupload foto ke facebook. Ini merupakan proses yang lumayan panjang. Tombol browse akan membuka window, menarik data dari komputer kita, lalu mengupload ke server, di display kembali di front end (page edit photo) sehingga user bisa melihat fotonya, memberikan deskripsi, tagging, dan yang terakhir publish.</p>
<p>Tetapi pengguna tidak merasakan proses yang panjang itu bukan? Itu karena interface dan fungsi bersinergi dengan baik.</p>
<h3>4. Copywriter</h3>
<p>80% tampilan website adalah text dan mayoritas pengguna pasti membaca text untuk mendapatkan informasi. Disinilah peran copywriter sangat di perlukan. Selain penampilan yang bagus, sebuah website harus mempunyai &#8216;cara/gaya berbicara&#8217; yang mudah di mengerti dan khas sesuai dengan market masing-masing.</p>
<p>Peran copywriter ini terkadang bisa menjadi faktor x. Coba lihat bagaimana Twitter mengubah &#8220;What are you doing now&#8221; menjadi &#8220;What&#8217;s Happening&#8221;. Sangat terasa perbedaannya. Hanya dengan mengubah kalimat, Twitter bertransformasi menjadi sumber berita bagi seluruh dunia.</p>
<h3>Kesimpulan</h3>
<p>Sebuah website bukan di buat hanya seorang web designer (istilah web designer menjadi rancu sekarang ini). Minimal membutuhkan 2 peran, interface designer dan front / back end developer. Jadi, kalau kamu mempunyai basic sebagai print designer, saya harap kamu mau meluangkan waktu mengenal dan mempelajari desain website (setidaknya kamu bisa menjadi interface designer).</p>
<p>Percayalah ini merupakan masa depan dunia dan website baru permulaan saja. Nantinya tidak menutup kemungkinan kita akan menggunakan platform yang berbeda (aplikasi misalnya), tetapi dasar nya akan tetap sama, keempat peran ini tidak akan terpisahkan.</p>
<p>Bagaimana dengan kamu? Ada peran yang terlewatkan? silakan berkomentar  </p>
]]></content:encoded>
			<wfw:commentRss>http://jurusgrafis.com/artikel/siapa-saja-yang-berperan-dalam-pembuatan-sebuah-website/feed/</wfw:commentRss>
		<slash:comments>53</slash:comments>
		</item>
		<item>
		<title>Kebangkitan Interface Design di Indonesia</title>
		<link>http://jurusgrafis.com/artikel/kebangkitan-interface-design-di-indonesia/</link>
		<comments>http://jurusgrafis.com/artikel/kebangkitan-interface-design-di-indonesia/#comments</comments>
		<pubDate>Mon, 29 Nov 2010 03:00:04 +0000</pubDate>
		<dc:creator>Richard Fang</dc:creator>
				<category><![CDATA[Artikel]]></category>
		<category><![CDATA[Diskusi]]></category>
		<category><![CDATA[Website & Interface]]></category>
		<category><![CDATA[Designer]]></category>
		<category><![CDATA[Indonesia]]></category>
		<category><![CDATA[Interface]]></category>
		<category><![CDATA[Panggilan]]></category>

		<guid isPermaLink="false">http://jurusgrafis.com/?p=2490</guid>
		<description><![CDATA[Judul di atas adalah sebuah harapan. Mengingat perkembangan dunia Teknologi Informasi di Indonesia yang sudah lumayan pesat, saya rasa sudah saatnya interface design (dalam web, mobile, apps etc) mempunyai peran yang lebih lagi di banding tahun-tahun sebelumnya. Interface sebagai Ujung Tombak Kalau kita perhatikan, belakangan ini sudah sangat sering start-up lokal bermunculan (silakan cek DailySocial.net). [...]]]></description>
			<content:encoded><![CDATA[<p></p>
<p>Judul di atas adalah sebuah harapan. Mengingat perkembangan dunia Teknologi Informasi di Indonesia yang sudah lumayan pesat, saya rasa sudah saatnya interface design (dalam web, mobile, apps etc) mempunyai peran yang lebih lagi di banding tahun-tahun sebelumnya.<span id="more-2490"></span></p>
<h3>Interface sebagai Ujung Tombak</h3>
<p>Kalau kita perhatikan, belakangan ini sudah sangat sering start-up lokal bermunculan (silakan cek <a href="http://dailysocial.net" target="_blank">DailySocial.net</a>). Layanan yang di tawarkan juga semakin beragam, fungsi-fungsi yang sangat menarik dan bahkan membantu kegiatan kita sehari-hari, baik itu dalam hal lifestyle, informasi dan produktifitas.</p>
<p>Namun sayangnya sebagian besar masih berkutat pada fungsi. Secara desain dan interface masih banyak yang kurang. Hal ini sangat saya sayangkan, karena interface ini sebenarnya ujung tombak dari produk start-up itu sendiri. Interface akan langsung berhadapan dengan pengguna. Ibarat pesulap yang membius penonton dengan penampilan, gerakan tangan dan kata-kata, sementara sang asisten (code, development, fungsi)  menyiapkan trik di belakang.</p>
<p>Fungsi dan manfaat boleh jadi killer, tapi kalau dari cara menampilkannya saja tidak menarik atau yang paling parah, membingungkan, maka jangan heran kalau start-up ini tidak berjalan lama.</p>
<h3>Function is King. Interface is Queen.</h3>
<p>Keduanya harus saling mendukung satu sama lain. Jika salah satu peran itu tidak terpenuhi maka produk tidak akan maksimal. Apakah kita mau menghasilkan produk yang setengah-setengah?</p>
<h3>Panggilan untuk Seluruh Desainer di Indonesia</h3>
<p>Menurut pengamatan saya, saat ini jumlah desainer lokal yang fokus di interface design masih sangat sedikit. Jumlahnya tidak sebanding dengan developer (front &amp; back end) yang lebih mudah di temukan, dan tentunya mereka ini kualitasnya sudah tidak perlu di ragukan lagi.</p>
<p>Untuk mempermudah para start-up (klien potensial) mendapatkan interface designer yang baik, saya harap <strong>teman-teman yang spesialisasinya di bidang interface design bisa berkomentar di bawah dan memberikan link ke portfolio masing-masing</strong>. Semoga dengan begini peran interface design di Indonesia bisa lebih di tingkatkan.</p>
<p>Dan yang paling penting, we&#8217;re making the web a better &amp; beautiful place. Are you in?</p>
]]></content:encoded>
			<wfw:commentRss>http://jurusgrafis.com/artikel/kebangkitan-interface-design-di-indonesia/feed/</wfw:commentRss>
		<slash:comments>40</slash:comments>
		</item>
		<item>
		<title>5 Elemen Penting Website Corporate</title>
		<link>http://jurusgrafis.com/artikel/5-elemen-penting-website-corporate/</link>
		<comments>http://jurusgrafis.com/artikel/5-elemen-penting-website-corporate/#comments</comments>
		<pubDate>Wed, 06 Oct 2010 10:15:08 +0000</pubDate>
		<dc:creator>Richard Fang</dc:creator>
				<category><![CDATA[Artikel]]></category>
		<category><![CDATA[Website & Interface]]></category>
		<category><![CDATA[Business]]></category>
		<category><![CDATA[Corporate]]></category>
		<category><![CDATA[Desain]]></category>
		<category><![CDATA[Elemen]]></category>
		<category><![CDATA[Interface]]></category>
		<category><![CDATA[Perusahaan]]></category>
		<category><![CDATA[Website]]></category>

		<guid isPermaLink="false">http://jurusgrafis.com/?p=2455</guid>
		<description><![CDATA[Website corporate / perusahaan merupakan perpanjangan tangan secara online dari sebuah perusahaan. Selain fungsinya untuk memberikan informasi, tak jarang juga banyak perusahaan menggunakan websitenya untuk mendapatkan klien baru. Pada kesempatan ini kita akan membahas beberapa elemen penting yang biasanya / wajib terdapat pada desain website corporate. Ok, langsung saja kita mulai. 1. Tagline / Slogan [...]]]></description>
			<content:encoded><![CDATA[<p></p>
<p>Website corporate / perusahaan merupakan perpanjangan tangan secara online dari sebuah perusahaan. Selain fungsinya untuk memberikan informasi, tak jarang juga banyak perusahaan menggunakan websitenya untuk mendapatkan klien baru.</p>
<p><span id="more-2455"></span></p>
<p>Pada kesempatan ini kita akan membahas beberapa elemen penting yang biasanya / wajib terdapat pada desain website corporate. Ok, langsung saja kita mulai.</p>
<h3>1. Tagline / Slogan Perusahaan</h3>
<p>Bisa bagian dari logo, bisa juga tidak. Yang pasti fungsi tagline adalah meringkas produk / jasa yang di tawarkan perusahaan kepada konsumen. Sehingga dalam sekejab saja pengunjung sudah tahu secara garis besar tentang perusahaan tersebut. Biasanya mulai dari 2 kata hingga 1-2 kalimat pendek, Kalau sudah lebih dari itu sudah bukan tagline lagi.</p>
<h3>2. Informasi Perusahaan &amp; Kontak</h3>
<p>Ini jelas mutlak ada di website corporate, pengunjung jadi bisa mengetahui latar belakang perusahaan, jasa yang di tawarkan bahkan sampai ke jajaran direksi jika perlu. Yang tak kalah penting adalah info kontak, mulai dari nomor telepon, email dan alamat yang jelas. Untuk alamat bisa juga di bantu dengan menambahkan peta (bisa di buat ilustrasi peta sendiri atau dengan menggunakan google maps).</p>
<h3>3. Jasa / Produk yang Di Tawarkan + Foto</h3>
<p>Info produk harus bisa di komunikasikan dengan mudah sehingga pengunjung dapat dengan cepat menangkap tujuan perusahaan ini dan apa keuntungannya untuk konsumen. Lebih baik lagi jika di perkuat dengan foto produk. Kalau produk fisik mutlak di foto dengan baik, kalau perlu gunakan jasa fotografer profesional dan highlight elemen penting yang ada pada produk.</p>
<p>Kalau produk tak berwujud (jasa / digital goods), maka gunakan gambar produk yang sebenarnya. Bisa berupa portfolio, foto event yang sedang di selenggarakan (untuk event organizer misalnya). Intinya tampilkan sejelas mungkin produk yang di tawarkan.</p>
<h3>4. Call to Action</h3>
<p>Biasanya berupa tombol dengan kata-kata seperti &#8220;Pesan Sekarang &#8211; Dapatkan Potongan Harga 35%&#8221; atau yang sejenisnya. Bisa juga semudah &#8220;Hubungi Kami Hari Ini Juga!&#8221;. Tujuannya untuk mengubah pengunjung menjadi klien potensial yang bisa kita hubungi dan akhirnya bisa menjadi klien kita. Pada akhirnya tujuan semua website komersial memang untuk konversi bukan?  </p>
<h3>5. Blog / News</h3>
<p>Bagian yang satu ini biasanya di jadikan anak tiri pada website corporate. Namun kalau di gunakan secara benar blog bisa menjadi salah satu media marketing yang efektif tanpa harus membuang biaya yang besar. Gunakan blog / news untuk memberikan info menarik yang berkaitan dengan produk / jasa perusahaan, selain sebagai media press release perusahaan.</p>
<h3>Inspirasi Desain Website Corporate</h3>
<p>Berikut ini beberapa contoh website corporate yang terlihat sedikit berbeda dari biasanya, tetapi tetap terasa aura profesionalnya. Dan yang paling penting mereka tetap dapat dengan jelas memberikan informasi &#8220;mereka itu siapa&#8221; dengan mudah kepada pengunjung.</p>
<p><strong>Aol</strong></p>
<p><a href="http://corp.aol.com/"></a></p>
<p><strong>Duchy Originals</strong></p>
<p><a href="http://www.duchyoriginals.com/"></a></p>
<p><strong>Dyson UK</strong></p>
<p><a href="http://www.dyson.co.uk/"></a></p>
<p><strong>Goldman Sachs</strong></p>
<p><a href="http://www2.goldmansachs.com/"></a></p>
<p><strong>GreenHill SAVP</strong></p>
<p><a href="http://greenhillsavp.com/"></a></p>
<p><strong>IDC &#8211; Industrial Door Contractors </strong></p>
<p><a href="http://www.hangardoor.com/"></a></p>
<p><strong>Intel</strong></p>
<p><a href="http://www.intel.com/?en_US_01"></a></p>
<p><strong>Scout</strong></p>
<p><a href="http://www.scout.com.au/"></a></p>
<p><strong>Sustain Ability</strong></p>
<p><a href="http://www.sustainability.com/"></a></p>
<p><strong>Trek Bikes</strong></p>
<p><a href="http://www.trekbikes.com/int/en/"></a></p>
<h3>Kesimpulan</h3>
<p>Desain website corporate tidak harus selamanya membosankan. Untuk dapat menghasilkan desain seperti contoh di atas kita harus mendalami dulu visi, budaya, produk dan nilai perusahaan. Dari sana kita baru bisa memutuskan akan menonjolkan bagian mana dari perusahaan, setelah itu baru kita masuk ke tahap desain yang bisa mendukung visi, budaya, produk dan nilai perusahaan tersebut tanpa melupakan unsur komunikasi yang mudah di terima oleh pengunjung.</p>
<p>Bagaimana menurut kamu? Apakah desain website corporate itu selamanya harus membosankan? Atau ada cara lain agar website perusahaan bisa menjadi pusat perhatian di kalangan Netizen?</p>
]]></content:encoded>
			<wfw:commentRss>http://jurusgrafis.com/artikel/5-elemen-penting-website-corporate/feed/</wfw:commentRss>
		<slash:comments>27</slash:comments>
		</item>
		<item>
		<title>Bedah Desain: Website Portfolio &amp; Penerapannya</title>
		<link>http://jurusgrafis.com/artikel/bedah-desain-website-portfolio-penerapannya/</link>
		<comments>http://jurusgrafis.com/artikel/bedah-desain-website-portfolio-penerapannya/#comments</comments>
		<pubDate>Tue, 02 Mar 2010 10:57:00 +0000</pubDate>
		<dc:creator>Richard Fang</dc:creator>
				<category><![CDATA[Artikel]]></category>
		<category><![CDATA[Website & Interface]]></category>
		<category><![CDATA[Bedah Desain]]></category>
		<category><![CDATA[Desain Website]]></category>
		<category><![CDATA[Inspirasi]]></category>
		<category><![CDATA[Portfolio]]></category>
		<category><![CDATA[Studi Kasus]]></category>

		<guid isPermaLink="false">http://jurusgrafis.com/?p=1676</guid>
		<description><![CDATA[Website portfolio adalah suatu keharusan bagi semua desainer (baik yang freelance atau yang fulltime bekerja dengan orang lain). Maka dari itu, kali ini kita akan membahas beberapa elemen yang biasanya digunakan ketika mendesain website portfolio. Inti dan tujuan dari website portfolio adalah untuk menunjukan hasil kerja/karya desain kita. Dengan begitu calon klien bisa melihat kemampuan [...]]]></description>
			<content:encoded><![CDATA[<p></p>
<p>Website portfolio adalah suatu keharusan bagi semua desainer (baik yang freelance atau yang fulltime bekerja dengan orang lain). Maka dari itu, kali ini kita akan membahas beberapa elemen yang biasanya digunakan ketika mendesain website portfolio.</p>
<p><span id="more-1676"></span></p>
<p>Inti dan tujuan dari website portfolio adalah untuk menunjukan hasil kerja/karya desain kita. Dengan begitu calon klien bisa melihat kemampuan kita dan jika cocok maka dia akan menggunakan jasa kita sebagai desainer. Hal lain yang juga penting adalah website portfolio harus mempunyai karakter tersendiri untuk membedakan website kita dari website portfolio lain.</p>
<p>Berikut adalah beberapa elemen yang saya pelajari dari website portfolio yang ada di luar sana.</p>
<h3>1. Portfolio Berada di Halaman Depan</h3>
<p>Ini sudah hampir menjadi template pada semua website portfolio dan memang cara ini sangat efektif. Apa yang kita harapkan kalau kita melihat web portfolio? tentu saja hasil karya desainernya kan?</p>
<p><a href="http://neutroncreations.com/"></a></p>
<p>Selain memudahkan pengunjung (dapat langsung ke inti website), elemen ini juga bisa menjadi daya tarik tersendiri untuk mengeksplor lebih jauh ke halaman lain di website kita, terlebih jika hasil karya nya sangat unik, menarik atau klien nya merupakan klien besar.</p>
<p><a href="http://www.thinkbrilliant.com/"></a></p>
<h3>2. Presentasi Portfolio</h3>
<p>Setelah melihat karya di Homepage, maka kita akan masuk ke detil tentang karya tersebut. Nah, bagian ini yang biasanya sering di lewatkan oleh kebanyakan desainer. Kita terbiasa hanya menyertakan screenshot, nama projek dan link ke website yang bersangkutan.</p>
<p>Seharusnya kita bisa menjelaskan lebih detil mengenai karya/projek tersebut. Dengan begitu pengunjung mempunyai nilai tambah terhadap kita, tidak hanya sebatas desainer visual saja. Kita bisa menulis beberapa paragraf tentang proses desain, konsep, masukan dari klien yang kita gunakan di desain kita, mengapa kita menggunakan desain dengan gaya tertentu dan lainnya.</p>
<p><a href="http://www.greatworks.se/clients-cases/absolut"></a></p>
<p>Atau yang lebih menarik adalah kita bisa menceritakan seberapa efektif desain yang kita buat itu, misalnya, dalam 6 bulan website klien tersebut bisa mendapatkan 500.000 pengguna baru di karenakan kita menggunakan Sign Up form terselebung (coba dulu baru daftar). Saya yakin hal tersebut akan lebih informatif dan berguna bagi pengunjung atau calon klien kita.</p>
<p><a href="http://yaronschoen.com/projects/casestudy/national_geographic/"></a></p>
<h3>3. Kalimat Pembuka yang Menarik</h3>
<p>Kita biasa menyebutnya Tagline. Kalimat yang menarik bisa menjadi cerminan pribadi kita di dunia maya ini. Terlebih jika kalimat tersebut bisa menjadi semacam slogan bagi kita. Maka secara tidak langsung pengunjung akan mengingat kalimat tersebut dan otomatis mengingat website kita.</p>
<p><a href="http://squaredeye.com/"></a></p>
<p><a href="http://www.wearepixel8.com/"></a></p>
<p>Walaupun elemen ini bersifat opsional, tetapi akan lebih bagus dan efektif jika kita meluangkan waktu memikirkan Tagline yang tepat untuk website portfolio kita sendiri.</p>
<h3>4. Foto/Ilustrasi yang Menarik Perhatian</h3>
<p>Gambar bisa menceritakan lebih banyak daripada kata-kata. Dan bila di sandingkan dengan kalimat pembuka (tagline) yang menarik maka kombinasi tersebut tidak akan terkalahkan.</p>
<p>Kita memang harus belajar sedikit bermetafora untuk mendapatkan hasil yang efektif. Tetapi percayalah jika kita bisa menggunakan cara ini maka website portfolio kita akan berhasil mendatangkan klien baru.</p>
<p><a href="http://www.wearevi.com/"></a></p>
<p><a href="http://www.indofolio.com/"></a></p>
<h3>5. Posting Terbaru dari Blog</h3>
<p>Bagi desainer yang suka menulis artikel atau senang membagikan pemikirannya pada orang lain, bisa menggunakan cara ini. Selain fungsi blog/artikel yang bisa membangun komunitas, kita juga secara bersamaan membangun personal brand. Menurut saya salah satu cara membangun personal brand adalah melalui konten pemikiran kita (yang biasanya di tuangkan dalam bentuk tulisan).</p>
<p><a href="http://simplebits.com/"></a></p>
<p>Bingung mau menulis topik apa? <a href="http://jurusgrafis.com/artikel/ide-menulis-blog-sebagai-desainer-grafis/" target="_blank">Coba gunakan beberapa ide simpel ini</a>. Walaupun kamu merasa diri kamu murni desainer visual, ayo luangkan waktu untuk belajar menulis dan menuangkan kata-kata  </p>
<p><a href="http://orderedlist.com/"></a></p>
<h3>6. Profil Pribadi / Studio</h3>
<p>Halaman ini merupakan halaman terpenting kedua setelah portfolio. Harus dengan jelas dan jujur mendeskripsikan diri sendiri. Alasannya adalah alasan klasik, bagaimana klien mau berbisnis dengan seseorang yang identitasnya tidak jelas?</p>
<p>Coba ceritakan sedikit background pendidikan, pekerjaan sehari-hari, tinggal di kota mana (jika keberatan memberikan alamat lengkap) dan hal unik lain yang ada di diri kamu (misalnya, suka mengoleksi action figure dll). Intinya buatlah halaman About ini se-personal mungkin, karena ini merupakan &#8220;kartunama&#8221; kamu di dunia maya.</p>
<p><a href="http://billytamplin.com/about/"></a></p>
<h3>7. Informasi Kontak yang Jelas</h3>
<p>Kalau pengunjung sudah sampai ke halaman ini, maka bisa di pastikan mereka sudah 75% tertarik dengan kamu. Jadi jangan sia-siakan kesempatan ini. Buatlah semudah dan seinformatif mungkin jika pengunjung mau menghubungi kita, baik itu hanya untuk berkenalan atau mau bekerjasama dalam suatu projek.</p>
<p>Tidak ada salahnya menyertakan alamat email, nomor handphone (jika tidak keberatan) dan alamat kantor/rumah. Ini untuk alasan kenyamanan bila klien bekerjasama dengan kita nantinya.</p>
<p><a href="http://www.gomedia.us/contact/"></a></p>
<p>Salah satu trik yang saya anggap efektif adalah dengan menggunakan form yang bisa di pilih (mau berkenalan saja, mau memberikan projek atau memberikan saran). Cara ini akan memudahkan kita, karena masing-masing pilihan mempunyai subjek yang spesifik yang bisa kita pisahkan inbox emailnya (contoh, untuk berkenalan 1 inbox sendiri, untuk projek 1 inbox sendiri). Jadi kita tidak menerima berbagai macam email di 1 inbox.</p>
<p><a href="http://www.viget.com/contact/web-form/"></a></p>
<h3>8. Detail Harga</h3>
<p>Ini masih menjadi perdebatan apakah etis untuk disertakan pada suatu website portfolio. Kalau menurut saya sah-sah saja, tergantung kepada masing-masing pribadi dan tipe bisnis yang kita jalankan.</p>
<p>Kelebihannya adalah kita tidak akan capai menjawab pertanyaan calon klien tentang harga (yang terkadang tidak berlanjut karena mungkin terlalu mahal). Dengan adanya informasi ini maka kita dapat sedikit memastikan bahwa kalau ada email dari klien baru maka kemungkinan dia akan menjadi klien kita.</p>
<p><a href="http://codecopia.com/services"></a></p>
<p>Kalau masih ingin memberikan detil harga tetapi tidak secara langsung, kita bisa menggunakan kisaran harga, misalnya Rp.1juta &#8211; Rp.4juta atau Mulai dari Rp.3juta. Jadi tidak ada harga yang pasti, karena memang setiap projek mempunyai keunikan tersendiri.</p>
<h3>9. Informasi Ketersediaan Menerima Projek Baru</h3>
<p>Hal ini lumayan penting bagi para freelancer fulltime atau parttime. Calon klien jadi tahu kita available atau tidak pada waktu dia ingin menghubungi kita. Ini akan mempermudah kita dan klien. Jangan sampai sudah berdiskusi panjang lebar tapi ternyata waktu kita tidak ada yang kosong untuk menerima projek baru.</p>
<p><a href="http://www.branded07.com/"></a></p>
<h3>10. Testimonial</h3>
<p>Sama seperti kita berjualan di Kaskus misalnya, testimonial memegang peranan yang penting. Jika tidak ada testimonial maka calon klien akan sedikit berspekulasi jika bekerjasama dengan kita. Mungkin klien hanya melihat dari portfolio kita yang &#8220;wah&#8221; saja.</p>
<p><a href="http://www.84colors.com/index.html"></a></p>
<p>Dengan adanya testimonial (apalagi dari nama yang lumayan terkenal), calon klien baru akan lebih yakin dengan kita. Jadi, jangan lupa meminta testimonial dari klien yang kita anggap mempunyai nama dan projek nya menarik  </p>
<h3>Kesimpulan</h3>
<p>Elemen dan cara-cara di atas adalah elemen umum dalam desain website portfolio. Kita bisa menggunakan semuanya atau hanya beberapa saja. Yang pasti hasil kerja/karya kita, siapa kita dan kemudahan dalam menghubungi kita memegang peranan penting pada website jenis ini.</p>
<p>Seperti biasa, kalau ada yang elemen yang terlewat, silakan berkomentar di bawah!</p>
<p><em>Jangan sampai ketinggalan artikel menarik lainnya, ayo berlangganan   dengan <a href="http://feedburner.google.com/fb/a/mailverify?uri=JurusGrafis&amp;loc=en_US" target="_blank">Email</a> atau <a href="http://feeds.feedburner.com/jurusgrafis" target="_blank">RSS</a>.   Ikuti juga <a href="http://twitter.com/jurusgrafis" target="_blank">Twitter   Jurus Grafis</a> dan temui <a href="http://www.facebook.com/jurusgrafis" target="_blank">Jurus Grafis   di Facebook</a>. </em></p>
]]></content:encoded>
			<wfw:commentRss>http://jurusgrafis.com/artikel/bedah-desain-website-portfolio-penerapannya/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
		<item>
		<title>Desainer Web Harus Bisa Coding?</title>
		<link>http://jurusgrafis.com/artikel/desainer-web-harus-bisa-coding/</link>
		<comments>http://jurusgrafis.com/artikel/desainer-web-harus-bisa-coding/#comments</comments>
		<pubDate>Mon, 22 Feb 2010 02:00:13 +0000</pubDate>
		<dc:creator>Richard Fang</dc:creator>
				<category><![CDATA[Artikel]]></category>
		<category><![CDATA[Website & Interface]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Programmer]]></category>
		<category><![CDATA[Proses]]></category>
		<category><![CDATA[Web Designer]]></category>

		<guid isPermaLink="false">http://jurusgrafis.com/?p=1619</guid>
		<description><![CDATA[Mari kita berdiskusi tentang hal ini, tapi sebelumnya saya mau menyampaikan pendapat tentang &#8220;Apakah desainer web harus bisa coding?&#8221;. Jujur saja, saya jadi agak sedikit gatal setelah membaca salah satu artikel dan beberapa komentar dari Elliot Jay Stocks. Harus Bisa? Apakah desainer web harus bisa coding? Tidak selalu! Tetapi harus &#8216;mengerti&#8217; bagaimana website itu nanti [...]]]></description>
			<content:encoded><![CDATA[<p></p>
<p>Mari kita berdiskusi tentang hal ini, tapi sebelumnya saya mau menyampaikan pendapat tentang &#8220;Apakah desainer web harus bisa coding?&#8221;. Jujur saja, saya jadi agak sedikit gatal setelah membaca salah satu artikel dan beberapa komentar dari <a href="http://elliotjaystocks.com/blog/web-designers-who-cant-code/" target="_blank">Elliot Jay Stocks</a>.<span id="more-1619"></span></p>
<h3>Harus Bisa?</h3>
<p><a href="http://www.flickr.com/photos/edduddiee/4275499654/sizes/l/"></a></p>
<p>Apakah desainer web harus bisa coding? Tidak selalu! Tetapi harus<strong><em> &#8216;mengerti&#8217;</em></strong> bagaimana website itu nanti akan di coding. Yang artinya, semua elemen desain yang kita buat di Photoshop harus <em>code-able</em>. Coba intip sedikit tips tentang <a href="http://jurusgrafis.com/artikel/langkah-persiapan-mendesain-website/" target="_blank">persiapan mendesain website</a>.</p>
<p>Saya mengakui, saya tidak merasa nyaman melakukan coding sendiri. Jangan salah, bukan karena saya malas, saya pernah mencobanya dan bahkan beberapa hari yang lalu sempat belajar css basic karena melihat <a href="http://prakasa.me/desain-web/css-basic-get-started/" target="_blank">video tutorial dari Prakasa</a>. (it&#8217;s a good one by the way!).</p>
<p>Namun saya masih merasa kesulitan mengulang pelajaran video tutorial itu dari awal (jika tidak melihat contoh/videonya), mungkin itu karena keterbatasan saya? (sering lupa code yang sudah di pakai). Yang terpenting adalah sekarang saya <em>&#8216;mengerti&#8217;</em> cara meng-coding sebuah website dan hal ini tentu saja akan menambah dasar pemikiran saya pada saat mendesain website di Photoshop.</p>
<h3>Pertimbangan Kemampuan, Waktu dan Kesempatan</h3>
<p><a href="http://www.flickr.com/photos/flygraphix/4246485041/sizes/o/"></a></p>
<p>Kenapa saya tidak meng-coding website (personal dan komersial) saya sendiri?</p>
<p><strong>Pertama</strong>, karena saya merasa kemampuan saya bukan di coding, dan lebih banyak teman yang sangat berkompetensi sekali dalam hal coding, yang bisa di ajak berkerjasama dalam suatu projek website.</p>
<p><strong>Kedua</strong>, waktu yang di perlukan untuk coding cukup lama, jadi saya lebih baik melimpahkan bagian code ke seseorang yang bisa di percaya, dan saya bisa melanjutkan ke projek lainnya (yang artinya perputaran projek akan lebih menguntungkan dan sistem kerja menjadi lebih efisien dan efektif).</p>
<p><strong>Ketiga</strong>, belum banyak web desainer yang mengkhususkan diri pada bagian interface dan pengaturan alur informasi pada website. Hal tersebut sedikit sekali berhubungan dengan coding, ini merupakan <em>konsep awal </em>sebuah website. Dan menurut saya bagian ini sama pentingnya dengan code. Percuma website berfitur canggih, efek jquery mencengangkan, tetapi desainnya sungguh menyakitkan hati.</p>
<h3>Akhirnya&#8230;</h3>
<p>Sebagai kesimpulan, seorang desainer web harus &#8216;mengerti&#8217; coding tetapi tidak harus &#8216;bisa&#8217; meng-coding. Tentu saja akan lebih bagus jika &#8216;bisa mengerjakan&#8217; code desainnya sendiri. Dan yang terpenting kita harus menyadari kemampuan kita yang sebenarnya berada di bagian mana.</p>
<p>Seperti yang kita tahu, website jaman sekarang sudah melibatkan banyak elemen, mulai dari interface (desain), code, copywriting, SEO bahkan sampai ke teknik marketing online. Apakah menurut kamu satu orang bisa memberikan semua itu?. Website bukan sekedar PSD to CSS/Html, website lebih dari itu.</p>
<p>Sekarang giliran kamu   silakan berkomentar! atau bila berkomentar tidak cukup, kamu bisa membuat posting sendiri di blog kamu dan link balik ke posting ini supaya teman-teman yang lain bisa tetap mengikuti topik hangat ini  </p>
<p><em>Jangan sampai ketinggalan artikel menarik lainnya, ayo berlangganan  dengan <a href="http://feedburner.google.com/fb/a/mailverify?uri=JurusGrafis&amp;loc=en_US" target="_blank">Email</a> atau <a href="http://feeds.feedburner.com/jurusgrafis" target="_blank">RSS</a>.  Ikuti juga <a href="http://twitter.com/jurusgrafis" target="_blank">Twitter  Jurus Grafis</a> dan temui <a href="http://www.facebook.com/jurusgrafis" target="_blank">Jurus Grafis  di Facebook</a>. </em></p>
]]></content:encoded>
			<wfw:commentRss>http://jurusgrafis.com/artikel/desainer-web-harus-bisa-coding/feed/</wfw:commentRss>
		<slash:comments>94</slash:comments>
		</item>
		<item>
		<title>7 Langkah Persiapan Mendesain Website</title>
		<link>http://jurusgrafis.com/artikel/langkah-persiapan-mendesain-website/</link>
		<comments>http://jurusgrafis.com/artikel/langkah-persiapan-mendesain-website/#comments</comments>
		<pubDate>Tue, 26 Jan 2010 12:33:39 +0000</pubDate>
		<dc:creator>Richard Fang</dc:creator>
				<category><![CDATA[Artikel]]></category>
		<category><![CDATA[Website & Interface]]></category>
		<category><![CDATA[Desain Website]]></category>
		<category><![CDATA[Persiapan]]></category>
		<category><![CDATA[Tips]]></category>

		<guid isPermaLink="false">http://jurusgrafis.com/?p=1390</guid>
		<description><![CDATA[Untuk mengimbangi kepopuleran bidang desain website pada tahun 2010 ini, maka ada baiknya saya menulis tentang persiapan apa saja yang perlu kita lakukan sebelum mendesain website. Mungkin banyak teman-teman pembaca setia Jurus Grafis yang belum familiar dengan cara kerja mendesain website, karena terbiasa dengan desain cetak (seperti saya dulu). Dalam desain website, kita sebagai desainer [...]]]></description>
			<content:encoded><![CDATA[<p></p>
<p>Untuk mengimbangi kepopuleran bidang desain website pada tahun 2010 ini, maka ada baiknya saya menulis tentang persiapan apa saja yang perlu kita lakukan sebelum mendesain website.</p>
<p><span id="more-1390"></span></p>
<p>Mungkin banyak teman-teman pembaca setia Jurus Grafis yang belum familiar dengan cara kerja mendesain website, karena terbiasa dengan desain cetak (seperti saya dulu).</p>
<p>Dalam desain website, kita sebagai desainer tidak diharuskan bisa mem-program desain yang telah kita buat. Tapi tentu saja akan lebih baik jika kita bisa sekaligus mem-program desain kita sendiri, tapi kalau di rasa mem-program sebuah website itu merupakan pekerjaan berat, lebih baik kita berfokus pada interface dan konsep desain terlebih dulu.</p>
<p>Yang patut kita tahu adalah cara berpikir programmer, agar desain yang kita buat masuk akal untuk di wujudkan dalam code. Misalnya, salah satu cara programmer bekerja adalah dengan membuat bagian background terlebih dulu, karena itu desain yang kita buat harus tertata rapih di dalam folder (Photoshop) yang spesifik.</p>
<p>Baiklah, mari kita mulai saja langkah persiapan mendesain website.</p>
<h3>1. Tujuan / Goal Website</h3>
<p><a href="http://digitalmash.com/"></a></p>
<p>Setiap desain harus mempunyai tujuan yang jelas dan goal apa yang ingin di raih melalui website tersebut. Jika itu website portfolio, tentukan tujuan nya, apakah untuk mendapatkan projek baru? , melakukan personal branding atau untuk menjadi semacam katalog online hasil kerja kita?</p>
<p>Dengan tujuan yang jelas maka kita akan dengan mudah menemukan konsep dan gaya desain yang pas. Hindari tujuan untuk &#8216;tampil keren&#8217; di awal pemikiran, karena desain yang kita anggap keren itu mungkin hanya bertahan dalam waktu 1 bulan saja, sehingga dalam waktu singkat kita merasa harus mendesain kembali website kita. &#8220;Keren&#8221; itu hanya &#8220;kulit&#8221; nya, yang terpenting adalah fungsi dan tujuan website tersebut.</p>
<h3>2. Sitemap</h3>
<p></p>
<p>Sitemap merupakan bagian yang sangat vital,  karena akan menjadi gambaran alur informasi yang jelas mengenai website yang akan kita buat. Tentukan navigasi dan fitur yang di perlukan di tahap ini dan buang fitur yang tidak efektif.</p>
<p>Kalau tujuan website sudah jelas, maka kita bisa berfokus pada tujuan itu dan tidak memasukkan fitur yang kurang penting, seperti chat box atau ruang iklan banner misalnya (sungguh aneh kalau di web portfolio ada banner iklan).</p>
<h3>3. Sketsa / Wireframe</h3>
<p><a href="http://www.flickr.com/photos/rohdesign/3307873748/sizes/o/"></a></p>
<p>Supaya tidak tersesat di kanvas kosong Photoshop, lebih baik kita merancang terlebih dulu di atas kertas. Langkah ini perlu untuk menghindari kerja dua kali di Photoshop. Bisa di bayangkan waktu yang terbuang ketika membuat background atau tombol terlihat bercahaya dan web 2.0 banget!, tapi ternyata letak dan ukurannya kurang tepat.</p>
<p>Tahap ini sangat perlu, terlebih jika kita berurusan dengan website yang mempunyai alur informasi yang kompleks. Dengan sketsa kita dapat menciptakan berbagai kemungkinan layout dengan cepat. Dan kalau kita bekerja dengan klien, mereka lebih senang kalau kita memulai projek dan memperlihatkan hasil sketsa kita sebelum melangkah ke tahap finishing di Photoshop. Ini bisa menjadi jalan untuk melibatkan klien secara aktif di dalam projek tanpa membuat kita kesal (karena untuk merubah hanya perlu menghapus sketsa saja).</p>
<h3>4. Resolusi 72 Dpi &amp; Warna RGB</h3>
<p></p>
<p>72 Dpi adalah resolusi standar untuk tampilan di monitor (jangan pernah membuat desain website di resolusi 100 dpi sekalipun, karena ukuran asli nya akan menjadi besar juga). Dan gunakan warna RGB yang memang di khususkan untuk monitor.</p>
<p>Well, langkah ini adalah langkah dasar yang tidak boleh di langgar, jadi jangan lupa teman  </p>
<h3>5. Lebar Konten Website Maksimal 960 Pixel</h3>
<p><a href="http://thingsthatarebrown.com/"></a></p>
<p>Seheboh apapun desain yang kamu buat, jaga area konten (teks, foto dll) agar jangan melebihi lebar 960 Pixel. Ini karena standar monitor orang awam masih berkisar di resolusi 1024 x 768. Untuk bagian background image mungkin perlu untuk melebihi lebar 960 pixel ini dengan tujuan supaya background terlihat rapih dan tidak terpotong jika di buka di monitor yang lebar seperti 1360 x 768 pixel atau lebih.</p>
<h3>6. Gunakan Grid System</h3>
<p><a href="http://960.gs/"></a></p>
<p>Grid bukanlah suatu pembatasan kreatifitas terhadap desain. Grid di ciptakan untuk mempermudah kita menjaga konsistensi layout dari halaman satu ke halaman yang lain. Selain itu gird juga membantu programmer yang akan menslicing desain kita di photoshop.</p>
<p>Saya biasa menggunakan <a href="http://www.960.gs" target="_blank">960 Grid System</a>, karena sudah merupakan standar di jaman sekarang ini. Jika kamu tidak mau menggunakan grid yang sudah ada, silakan gunakan grid kamu sendiri. Yang terpenting lebar area konten tidak boleh melebihi 960 pixel.</p>
<h3>7. Manajemen Folder &amp; Layer di Photoshop</h3>
<p></p>
<p>Biasakan untuk membuat folder di bagian-bagian penting sebuah website, misalnya, folder header, folder body, folder sidebar, folder footer. Sebenarnya nama folder nya bisa terserah kamu, yang penting di namakan dan masing-masing layer yang termasuk ke dalam satu bagian/section di satukan ke dalam satu folder.</p>
<p>Jangan lupa juga untuk menamakan setiap layer, sehingga akan mudah jika kita ingin mengedit desain kita nanti dan tentu saja ini sangat menolong programmer yang bekerjasama dengan kita.</p>
<h3>Kesimpulan</h3>
<p>7 langkah di atas adalah langkah awal supaya kita terbiasa mendesain dalam keadaan yang terorganisir (khususnya desain website). Karena kita tahu terkadang kita tidak bisa menyelesaikan suatu projek sendirian, dalam hal ini mungkin kita butuh teman programmer, jadi supaya code yang di hasilkan juga rapih, kita sebagai desainer juga harus memberikan &#8220;file mentah&#8221; yang rapih.</p>
<p>Sudah siap beralih menjadi web desainer? Atau mungkin ada langkah yang tertinggal? Ayo berbagi pendapat di kolom komentar!  </p>
<p><strong>Tautan Terkait </strong><br />
<a href="http://jurusgrafis.com/tutorial/merancang-desain-website-seperti-kartunama/" target="_blank">Merancang Desain Website seperti Kartunama </a></p>
<p><em>Jangan sampai ketinggalan artikel menarik lainnya, ayo berlangganan dengan <a href="http://feedburner.google.com/fb/a/mailverify?uri=JurusGrafis&amp;loc=en_US" target="_blank">Email</a> atau <a href="http://feeds.feedburner.com/jurusgrafis" target="_blank">RSS</a>. Ikuti juga <a href="http://twitter.com/jurusgrafis" target="_blank">Twitter Jurus Grafis</a> dan temui <a href="http://www.facebook.com/jurusgrafis" target="_blank">Jurus Grafis di Facebook</a>. </em></p>
]]></content:encoded>
			<wfw:commentRss>http://jurusgrafis.com/artikel/langkah-persiapan-mendesain-website/feed/</wfw:commentRss>
		<slash:comments>103</slash:comments>
		</item>
	</channel>
</rss>

