<?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; Interface</title>
	<atom:link href="http://jurusgrafis.com/tag/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>Mendesain Interface Rak Buku Ala iBooks</title>
		<link>http://jurusgrafis.com/tutorial/mendesain-interface-rak-buku-ala-ibooks/</link>
		<comments>http://jurusgrafis.com/tutorial/mendesain-interface-rak-buku-ala-ibooks/#comments</comments>
		<pubDate>Sun, 21 Mar 2010 21:25:05 +0000</pubDate>
		<dc:creator>Richard Fang</dc:creator>
				<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Buku]]></category>
		<category><![CDATA[Etalase]]></category>
		<category><![CDATA[iBooks]]></category>
		<category><![CDATA[Interface]]></category>

		<guid isPermaLink="false">http://jurusgrafis.com/?p=1916</guid>
		<description><![CDATA[Rasanya kita sebagai desainer tidak akan pernah bosan untuk belajar dari Apple. Selalu ada saja ide baru yang di keluarkan, di tambah lagi dengan didukung visual yang menarik. Dan kali ini kita akan belajar membuat tampilan aplikasi iBooks yang ada di iPad. Sedikit Tentang iBooks iBooks adalah sebuah aplikasi E-Reader keluaran Apple, yang otomatis terdapat [...]]]></description>
			<content:encoded><![CDATA[<p></p>
<p>Rasanya kita sebagai desainer tidak akan pernah bosan untuk belajar dari Apple. Selalu ada saja ide baru yang di keluarkan, di tambah lagi dengan didukung visual yang menarik. Dan kali ini kita akan belajar membuat tampilan aplikasi iBooks yang ada di iPad.<span id="more-1916"></span></p>
<h3>Sedikit Tentang iBooks</h3>
<p></p>
<p>iBooks adalah sebuah aplikasi E-Reader keluaran Apple, yang otomatis terdapat pada iPad. Selain fungsi nya untuk membaca, tampilan aplikasi ini sangat unik, yaitu menyerupai rak buku. Jadi kita tinggal meng-klik cover buku yang ada dan kita bisa langsung membaca isinya, bahkan bisa <a href="http://www.apple.com/ipad/features/ibooks.html" target="_blank">membalik halaman seperti buku asli!</a></p>
<p>Ok, cukup pengenalan mengenai iBooks, sekarang kita akan belajar membuat desain interface ala iBooks!   Mari kita mulai!</p>
<h3>File Yang di Perlukan</h3>
<p>Sebelum mulai, sebaiknya kamu <a href="http://www.flickr.com/photos/zooboing/4116009083/sizes/o/" target="_blank">mengunduh tekstur kayu di tautan ini</a>. Atau kamu bisa mencari gambar tekstur kayu yang sesuai dengan selera kamu.</p>
<h3>Langkah 1</h3>
<p>Buka dokumen baru di Photoshop seperti gambar di bawah ini.</p>
<p></p>
<h3>Langkah 2 (Background)</h3>
<p>Kita akan membuat bagian backgroundnya terlebih dulu. Gunakan <strong>Rectangle Tool (U)</strong> untuk membuat persegi yang menutupi semua dokumen tersebut. Pilih warna coklat sebagai warna dasar.</p>
<p></p>
<h3>Langkah 3</h3>
<p>Buka file tekstur kayu yang sudah kamu unduh tadi di Photoshop. Lalu ubah ukurannya menjadi 200 x 200 pixel.</p>
<p>Setelah itu <strong>Edit &gt; Define Pattern</strong> lalu namakan tekstur tersebut. Sekarang kita sudah mempunyai pattern bergambar kayu yang bisa di ulang (repeated pattern) tanpa putus.</p>
<p>Selanjutnya, buat layer baru dan Fill (isi) dengan pattern kayu tersebut. Caranya, <strong>Edit &gt; Fill &gt; Custom Pattern</strong>.</p>
<p></p>
<h3>Langkah 4</h3>
<p>Setelah layer 1 terisi dengan pattern kayu, maka kita akan mengubah <strong>Layer Blending Mode</strong> nya menjadi<strong> Multiply</strong> dengan <strong>Opacity 85%</strong>.</p>
<p></p>
<p></p>
<h3>Langkah 5 (Manajemen Layer)</h3>
<p>Ok, kita sekarang sudah selesai membuat background nya. Supaya dokumen Photoshop kita rapih dan mudah untuk di edit di kemudian hari. Kita akan membuat Folder &#8220;Background&#8221;. Cara ini sama seperti mengelompokkan beberapa layer yang berhubungan dekat.</p>
<p>Cara ini harus di lakukan karena kita akan bekerja dengan lumayan banyak layer nantinya. Jadi lebih baik <em>stay organized</em> daripada nanti kita kebingungan sendiri  </p>
<p></p>
<p>Sebelum kita lanjut, buat Folder baru dan namakan &#8220;Rak&#8221;.</p>
<p></p>
<h3>Langkah 6 (Pembuatan Rak)</h3>
<p>Kita akan membuat Rak nya terlebih dulu. Gunakan <strong>Rectangle Tool (U)</strong> untuk membuat persegi panjang.</p>
<p></p>
<p>Sedikit info tentang kenapa saya memilih menggunakan Smart Object (vektor) daripada Rasterized Layer (pixel) adalah, untuk memudahkan kita mengubah bentuk (tanpa pecah) dan merubah warna (dengan patokan nilai yang sama dengan yang lain). Karena terkadang pada saat tahap sentuhan akhir kita ingin mengubah warna atau merubah ukuran, hal ini akan sedikit sulit di lakukan apabila semua bentuk yang kita buat bersifat Rasterized Layer.</p>
<h3>Langkah 7</h3>
<p>Berikan Layer Style dengan cara dobel klik layer persegi tersebut. Atau kamu bisa ke <strong>main menu &gt; Layer &gt; Layer Style.</strong> Gunakan efek <strong>Drop Shadow</strong> dan <strong>Gradient Overlay</strong> pada bentuk persegi ini.</p>
<p></p>
<p></p>
<h3>Langkah 8</h3>
<p>Selanjutnya, kita akan membuat efek 3 dimensi atau perspektif pada rak. Cara nya sangat mudah, kita hanya perlu memberikan shape tambahan di bawah layer rak ini.</p>
<p></p>
<p></p>
<p></p>
<p>Setelah posisi sudah tepat, sekarang kita akan memberikan efek bayangan pada bagian perspektif ini. Caranya masih sama dengan yang tadi, yaitu gunakan<strong> Layer Style Drop Shadow</strong> dan <strong>Gradient Overlay</strong> (ikuti setting seperti gambar di bawah).</p>
<p></p>
<p></p>
<h3>Langkah 9</h3>
<p>Untuk menambah kesan realistis, kita akan membuat penyangga rak buku. Gunakan <strong>Rounded Rectangle Tool (U)</strong> dan ubah setting roundness / radius nya menjadi 8 pixel.</p>
<p></p>
<p>Berikan efek <strong>Drop Shadow</strong> dan <strong>Gradient Overlay</strong> dengan menggunakan <strong>Layer Style</strong>.</p>
<p></p>
<p></p>
<p>Jangan lupa pada detil yang penting. Pada kasus ini kita akan menambakan mur/skrup pada penyangga. Gunakan <strong>Ellipse Tool (U)</strong> dan sesuaikan warnanya dengan penyangga tersebut.</p>
<p></p>
<p>Duplikasi mur/skrup ini untuk mengisi sisi sebelah dari rak. Ada banyak cara menduplikasi layer, cara paling mudah adalah seperti gambar di bawah ini.</p>
<p></p>
<h3>Langkah 10 (Detil Rak)</h3>
<p>Karena rak yang kita buat ini adalah rak kayu, maka kita harus memberikan tekstur kayu juga pada sisi luar rak. Untuk tahap ini kita akan menggunakan teknik <strong>Layer Masking</strong>, kalau kamu belum familiar dengan teknik ini silakan <a href="http://jurusgrafis.com/tutorial/teknik-masking-dasar-di-photoshop/" target="_blank">pelajari tutorial nya di posting terdahulu</a>.</p>
<p></p>
<p></p>
<p></p>
<p></p>
<h3>Langkah 11 (Detil Rak &#8211; Lagi)</h3>
<p>Seperti yang kita tahu, <a href="http://jurusgrafis.com/tutorial/optimasi-garis-1-pixel-pada-desain-website/" target="_blank">garis sebesar 1 pixel bisa memberikan perbedaan</a> yang signifikan pada suatu desain. Untuk itu kita akan memberikan juga detil &#8220;halus&#8221; pada desain kita kali ini.</p>
<p>Gunakan <strong>Pencil Tool (B)</strong> dengan besar 1 pixel berwarna putih, dan ubah <strong>Layer Blending Mode</strong> nya menjadi <strong>Overlay</strong>.</p>
<p></p>
<p>Berikan efek cahaya pada sisi luar rak dengan menggunakan Brush berwarna putih dan teknik Layer Masking.</p>
<p></p>
<p></p>
<h3>Langkah 12</h3>
<p>Buat folder baru dan namakan &#8220;Sisi Dalam Lemari&#8221;. Ya, kita sudah setengah jalan  </p>
<p></p>
<h3>Langkah 13 (Sisi Dalam Lemari)</h3>
<p>Selanjutnya kita membuat sisi samping bagian dalam dari rak buku ini. Sangat mudah sekali, karena hanya menggunakan <strong>Rectangle Tool (U)</strong> dan <strong>Layer Blending</strong> mode seperti gambar di bawah.</p>
<p></p>
<p></p>
<p></p>
<p>Untuk menyelesaikan bagian ini, kamu tinggal meng-copy paste sisi kiri yang sudah di buat. Lalu tinggal di balik dan di tempatkan di sisi sebelah kanan.</p>
<p></p>
<h3>Langkah 14</h3>
<p>Buat folder baru dan namakan &#8220;Buku&#8221;. Kita akan mulai menata rak buku ini!  </p>
<p></p>
<h3>Langkah 15 (Template Tampilan Cover Buku)</h3>
<p>Di tahap ini kita akan membuat semacam template untuk cover buku yang akan kita tampilkan. Gunakan <strong>Rectangle Tool (U)</strong> untuk menmbuat bentuk standar buku. Dan berikan <strong>Layer Style Drop Shadow</strong>.</p>
<p></p>
<p></p>
<h3>Langkah 16</h3>
<p>Supaya cover buku kita tidak terkesan &#8220;flat&#8221;/datar, maka kita akan memberikan efek ketebalan yang halus. Caranya adalah dengan menggunakan <strong>Brush &#8211; soft (B) </strong>berwarna hitam lalu di masking ke dalam template cover buku tersebut.</p>
<p></p>
<p></p>
<p>Gunakan teknik yang sama untuk memberikan efek cahaya pada buku. Saya sedikit menggelapkan warna dasar buku agar terlihat efek yang diinginkan.</p>
<p></p>
<h3>Langkah 17</h3>
<p>Masukkan cover buku yang kamu inginkan ke dalam template tersebut. Cara memasukkan cover ini masih menggunakan teknik Layer Masking. Untuk lebih jelasnya kamu bisa mengunduh file photoshop yang di buat khusus untuk tutorial ini di akhir posting.</p>
<p></p>
<p>Duplikasi dan lanjutkan menata rak buku kamu  . Desain cover buku yang keren-keren ini bisa kamu dapatkan di <a href="http://bookcoverarchive.com/genre/art_and_design" target="_blank">CoverBookArchive</a>.</p>
<p></p>
<p>Yeah! kita sudah selesai!. Selanjutnya kamu tinggal terus menduplikasi dan mengganti masing-masing cover bukunya.</p>
<h3>Hasil Akhir</h3>
<p></p>
<p>File Photoshop seperti di atas ini bisa kamu unduh di akhir posting (4Mb &#8211; Zip), dengan begitu kamu akan lebih jelas melihat bagaimana cara menyusun layer dan teknik yang di gunakan untuk mendesain tampilan seperti aplikasi iBooks.</p>
<h3>Kesimpulan</h3>
<p>Untuk membuat desain seperti ini tidak di butuhkan teknik dan trik yang rumit. Sejauh ini saya hanya menggunakan teknik masking dan layer blending. Yang terpenting adalah kesabaran dan perhatian terhadap detil-detil yang kecil. Selamat mencoba!  </p>
<h3>Sekedar Informasi</h3>
<p>Ternyata Apple di duga &#8216;mengikuti&#8217; desain aplikasi E-Reader bernama <a href="http://www.classicsapp.com/" target="_blank">Classics </a>(yang sedikit banyak mempengaruhi saya dalam mendesain interface tutorial iBooks ini). Classics <a href="http://itunes.apple.com/app/classics/id294773236?mt=8" target="_blank">sudah lebih dulu beredar di iPhone</a> jauh sebelum iPad di umumkan. Saya pribadi lebih menyukai desain interface milik Classics. Namun sayangnya saya belum bisa mencoba menggunakannya langsung!</p>
<p><em>Jangan sampai kamu ketinggalan tutorial seperti ini! Ayo berlangganan melalui <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>. Dan ikuti Jurus Grafis di<a href="http://twitter.com/jurusgrafis" target="_blank"> Twitter</a> dan <a href="http://www.facebook.com/jurusgrafis" target="_blank">Facebook</a>. </em></p>
<p><em><a class="downloadlink" href="http://jurusgrafis.com/wp-content/plugins/download-monitor/download.php?id=15" title="Version1 downloaded 1015 times" >Interface Ala iBook (1015)</a><br />
</em></p>
]]></content:encoded>
			<wfw:commentRss>http://jurusgrafis.com/tutorial/mendesain-interface-rak-buku-ala-ibooks/feed/</wfw:commentRss>
		<slash:comments>25</slash:comments>
		</item>
		<item>
		<title>Tinjauan Desain: Website Whiteboard Journal</title>
		<link>http://jurusgrafis.com/artikel/tinjauan-desain-website-whiteboard-journal/</link>
		<comments>http://jurusgrafis.com/artikel/tinjauan-desain-website-whiteboard-journal/#comments</comments>
		<pubDate>Sat, 30 Jan 2010 11:44:45 +0000</pubDate>
		<dc:creator>Richard Fang</dc:creator>
				<category><![CDATA[Artikel]]></category>
		<category><![CDATA[Tinjauan Desain]]></category>
		<category><![CDATA[Desain]]></category>
		<category><![CDATA[Interface]]></category>
		<category><![CDATA[Tinjauan]]></category>
		<category><![CDATA[Usability]]></category>
		<category><![CDATA[Website]]></category>

		<guid isPermaLink="false">http://jurusgrafis.com/?p=1429</guid>
		<description><![CDATA[Sekarang ini mulai banyak website baru buatan lokal muncul, dan ini merupakan indikasi yang bagus untuk industri desain website lokal. Maka dari itu Jurus Grafis membuat &#8216;rubrik&#8217; baru yaitu Tinjauan Desain (Design Review), yang pada saat ini membahas desain website sebuah majalah online bernama Whiteboard Journal. Pengenalan Singkat Whiteboard Journal adalah media publikasi online yang [...]]]></description>
			<content:encoded><![CDATA[<p></p>
<p>Sekarang ini mulai banyak website baru buatan lokal muncul, dan ini merupakan indikasi yang bagus untuk industri desain website lokal. Maka dari itu Jurus Grafis membuat &#8216;rubrik&#8217; baru yaitu Tinjauan Desain <em>(Design Review)</em>, yang pada saat ini membahas desain website sebuah majalah online bernama Whiteboard Journal.<span id="more-1429"></span></p>
<h3>Pengenalan Singkat</h3>
<p></p>
<p><a href="http://whiteboardjournal.com/" target="_blank">Whiteboard Journal</a> adalah media publikasi online yang membahas bidang fashion, desain, hiburan dan seni. Kalau melihat materi yang di sampaikan tentu ini di tujukan untuk pembaca Internasional dan Lokal (menggunakan bahasa inggris).</p>
<p>Mempunyai fitur yang menarik seperti &#8220;<a href="http://www.whiteboardjournal.com/features/roundtable" target="_blank">Round Table</a>&#8221; yang berisi wawancara dan diskusi (podcast) dengan narasumber dan topik yang sedang hangat. Fitur &#8220;<a href="http://www.whiteboardjournal.com/features/column" target="_blank">Column</a>&#8221; dan &#8220;<a href="http://www.whiteboardjournal.com/features/focus" target="_blank">Focus</a>&#8221; dengan artikel dan insight yang mendalam, tidak lupa juga &#8220;<a href="http://www.whiteboardjournal.com/features/w_music" target="_blank">W-Music</a>&#8221; dan &#8220;<a href="http://www.whiteboardjournal.com/city-guide" target="_blank">City Guide</a>&#8221; sebagai pelengkap yang menyenangkan.</p>
<h3>Minimalis, Aksen dan Detail</h3>
<p></p>
<p>Desain homepage Whiteboard Journal sangat rapih, bersih dan tidak banyak basa basi. Sesuai dengan tagline mereka, A Concise Publication, publikasi yang ringkas. Di tunjukan dengan menggunakan slideshow di bagian atas (<a href="http://en.wikipedia.org/wiki/Above_the_fold" target="_blank">above the fold</a>) untuk meng-emphasis artikel dan konten inti terbaru yang ada di website ini.</p>
<p></p>
<p>Lalu di lanjutkan dengan lembut  ke berita terbaru di bawah slideshow. Yang menarik dari news feed ini adalah icon yang di gunakan pada masing-masing kategori berita, seperti penggunaan icon pensil untuk kategori Art &amp; Design, icon gantungan baju untuk Fashion, dan lainnya. Cara ini memberikan detil yang membantu para pembaca untuk menemukan kategori yang sesuai dengan minat mereka.</p>
<p></p>
<p>Di bagian sidebar kanan sebenarnya biasa saja, karena kebanyakan hanya iklan yang di taruh disana. Tapi ada satu yang menarik perhatian saya yaitu sebuah widget &#8220;Latest Feature&#8221; yang menggunakan metode <em>tabbed browsing</em> untuk mengakomodasi konten yang lumayan beragam. Dan menurut saya cara ini sangat efektif sekali untuk website tipe majalah.</p>
<p></p>
<p>Dan ditutup dengan rapih oleh footer yang informatif, berisi semua kategori berita dan fitur website, termasuk tautan ke online store Whiteboard Journal. Tak lupa juga bagian footer di jadikan area monetisasi untuk menaruh banner iklan.</p>
<p>Sedikit permasalahan usability di header adalah logo Whiteboard tidak bisa di klik untuk kembali ke homepage. Saya rasa ini sudah menjadi standard pada semua website kalau logo itu jika di klik harus kembali ke homepage.</p>
<h3>Halaman Berita</h3>
<p></p>
<p>Penggunaan foto dengan lebar yang sesuai dengan area konten membuat bagian ini tetap rapih, walaupun menurut saya besar font nya masih terlalu kecil, coba bayangkan orang yang membaca dengan resolusi 1440  ke atas, mereka pasti sedikit kesulitan.</p>
<p></p>
<p>Saya tidak mengerti mengapa tidak ada kolom komentar di akhir posting, rasanya ini bisa menjadi masukan. Atau memang sengaja tidak menggunakan kolom komentar?. Ini membuat kesan percakapan satu arah yang sudah tidak jaman lagi sekarang ini.</p>
<h3>Halaman Fitur yang Unik</h3>
<p>Kalau kita masuk ke salah satu fitur seperti &#8220;Round Table&#8221; maka layout yang di tampilkan menjadi agak berbeda. Sidebar di hilangkan sehingga area besar di tengah menjadi fokus. Kolom di bagi 2 sehingga kita merasa seperti membaca majalah cetak.</p>
<p></p>
<p>Yang menjadi masalah disini adalah flow membaca artikel, pertama karena tidak ada Drop Cap pada paragraf pertama, kedua karena tidak menggunakan H2 untuk huruf text yang lebih besar sebagai penanda dan ketiga tidak ada petunjuk kemana kita harus membaca selanjutnya, ke bawah atau ke kanan. <a href="http://jurusgrafis.com/artikel/tips-membuat-tipografi-lebih-menarik-mudah-terbaca/" target="_blank">Tipografi</a> harus di perhatikan lagi di bagian ini yang menurut saya sangat krusial.</p>
<p></p>
<p>Terakhir adalah pagination yang sangat terlalu kecil, kalau pembaca kurang jeli mungkin mereka melewatkan dan selesai membaca dengan bingung karena artikel belum selesai tetapi tidak ada lanjutannya lagi. Solusi nya adalah memperbesar angka pagination di bawah, dan berikan petunjuk yang jelas kita sekarang berada di halaman berapa.</p>
<h3>Salah Satu Contoh Layout Toko Online yang Baik</h3>
<p></p>
<p>Saya merasa bagian ini sangat baik, semua produk Whiteboard bisa langsung di lihat dengan mudah. Di tunjang dengan informasi ketersediaan barang pada setiap foto.</p>
<p></p>
<p>Yang kurang hanya tidak ada informasi harga sampai kita masuk ke dalam halaman detail produk. Tombol &#8216;Buy&#8217; yang terlalu kecil dan kurang kontras (ini berpengaruh kepada psikologi kita untuk mengklik atau tidak), dan terlalu di ulang-ulang sampai 3 kali. Saya rasa cukup dengan 1 tombol yang lumayan besar, warna kontras (kuning atau hitam pekat?) dan di tempatkan di samping harga atau di akhir informasi.</p>
<h3>Kesimpulan</h3>
<p>Whiteboard Journal bisa di jadikan standard yang sangat baik untuk desain website bertipe majalah yang berisi kategori beragam. Walaupun ada beberapa masalah usability di sana sini, namun saya rasa itu masih dapat di maklumi dan hanya masalah minor saja.</p>
<p>Menurut kamu bagaimana desain interface website Whiteboard Journal? Yuk berdiskusi di kolom komentar  </p>
<p>Dan kalau kamu tertarik website kamu di bahas di sini silakan kirimkan email ke,<br />
<strong><em>hello [at] jurusgrafis.com</em></strong> atau<strong><em> jurusgrafis [at] gmail.com</em></strong></p>
<p><em>Ayo berlangganan Jurus Grafis melalui <a href="http://feedburner.google.com/fb/a/mailverify?uri=JurusGrafis&amp;loc=en_US" target="_blank">Email</a> dan <a href="http://feeds.feedburner.com/jurusgrafis" target="_blank">RSS</a>, supaya kamu tidak ketinggalan artikel menarik berikutnya!. Temui juga <a href="http://www.facebook.com/jurusgrafis" target="_blank">Jurus Grafis di Facebook</a> dan ikuti<a href="http://twitter.com/jurusgrafis" target="_blank"> Twitter Jurus Grafis</a> untuk berita tambahan seputar desain. </em></p>
]]></content:encoded>
			<wfw:commentRss>http://jurusgrafis.com/artikel/tinjauan-desain-website-whiteboard-journal/feed/</wfw:commentRss>
		<slash:comments>21</slash:comments>
		</item>
	</channel>
</rss>

