A little posts that what happening and cool stuff on Hexacreative back to home var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-9338711-3']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); Tumblr (3.0; @hexacreative)http://blogme.hexacreative.web.id/““Purpose of live gives away to vision. Vision creates dream. And dreams become reality.””<br/><br/> - <em><strong>Charles Sweeney</strong></em>http://blogme.hexacreative.web.id/post/966083571http://blogme.hexacreative.web.id/post/966083571Tue, 17 Aug 2010 12:36:00 +0700“Fortuna Favi Fortus. Keberuntungan memihak mereka yang berani! Kuasai rasa takut & jeritkan “teriakan perang” Anda!”<br/><br/> - <em><strong>#CareerCoachBook</strong></em>http://blogme.hexacreative.web.id/post/939384212http://blogme.hexacreative.web.id/post/939384212Thu, 12 Aug 2010 06:57:00 +0700Motivasi<p><img src="http://img707.imageshack.us/img707/9196/screenshot33lt.jpg" width="517" align="left" height="335"/></p> <p>Dipostingan pertama blog Hexacreative yang baru ini, saya ingin membahas tentang website Adobe (tanpa membahas online storenya). Bagi saya pribadi, website Adobe (<a title="Website Adobe" target="_blank" href="http://adobe.com"><a href="http://adobe.com" target="_blank">http://adobe.com</a></a>) merupakan web besar yang menarik dari segi desain, tata letak, komposisi warna, dan konsistensinya.<!-- more --></p> <p>Di era desain grafis serta desain website sekarang ini, siapa sih desainer yang tidak mengenal atau bahkan belum pernah mendengar kata &#8220;Adobe&#8221;&#160;? Yap, saya yakin pembaca disini mengetahui tentang Adobe (minimal tahu lah Photoshop itu produk dari mana :P). Adobe ialah perusahaan besar yang memproduksi software seperti Adobe Photoshop, Adobe Dreamweaver, Adobe Flash, Adobe Illustrator, Adobe Acrobat, dan masih banyak lagi.</p> <p>Mari kita bahas tentang apa yang dapat dipelajari dari website Adobe dan mungkin bisa diterapkan dalam proyek-proyek website kita selanjutnya. Bagaimana perusahaan ini mengelola websitenya yang terbaik untuk user ataupun pengunjungnya?.</p> <p><span><strong>1. Resolusi</strong></span></p> <p><span><strong><img src="http://media.tumblr.com/tumblr_l6wpzhtANQ1qcxd1b.png"/></strong></span></p> <p><span>Ada berbagai variasi resolusi minimal untuk website. Resolusi minimal ini sangat penting sekali untuk menampilkan konten-konten di website dalam tampilan layar/monitor. Tetapi Resolusi minimal yang optimal ialah 1024x768. </span></p> <p><span>Website Adobe sendiri memakai resolusi 1024x768 untuk resolusi minimalnya. Jika website Adobe dilihat dengan resolusi lebih rendah dari itu, maka tidak akan enak dipandang, karena ada scroolbar vertical dibagian dibawah browser untuk melihat keseluruhan konten. Seperti kebanyakan website lainnya. </span></p> <p><span>Website Adobe memilih menempatkan area resolusi minimal (lihat gambar diatas), yang biasanya website-website lain menempatkannya di kanan dan kiri website mereka, Adobe menempatkan semuanya di kanan website. Keunikannya, website Adobe dapat meload background dengan lebih cepat, karena background ditempatkan hanya di sisi kanan website serta logo Adobe di kiri atas dan konten terlihat lebih rapih.</span></p> <p><span><br/></span></p> <p><span><strong>2. Navigasi</strong></span></p> <p><img src="http://media.tumblr.com/tumblr_l6wpyrJO9T1qcxd1b.png"/></p> <p>Adobe memberikan penempatan link di navigasinya yang teratur dan berkategori. Agar visitor ataupun user dapat memilih informasi yang tepat. Kemudian bagian penting seperti yang berhubungan dengan online store seperti Chart, Acoount, Adobe tetap menempatkan link-linknya di atas link navigasi. Dan tidak di bagian kanan halamannya. Mungkin untuk memudahkan user/visitor mencari link.</p> <p><span><strong>3. Konsistensi Warna</strong></span></p> <p><span><strong><img src="http://media.tumblr.com/tumblr_l6wtlt2hY51qcxd1b.png"/></strong></span></p> <p><span>Cobalah anda kunjungi semua halaman di website Adobe dan perhatikan warnanya. Warna dasar apa yang sering dijumpai? Jawabannya adalah hitam, abu-abu muda, abu-abu tua, dan sedikit warna merah pada logo Adobe. Yap, warna memang bisa mencerminkan suatu brand. Seperti Facebook dengan biru tuanya, Twitter dengan biru mudanya, dan Urbanesia dengan hijau mudanya. Maka Adobe familiar dengan warna abu-abu gelapnya. Warna suatu brand dan website yang tepat juga dapat berpengaruh kepada kepercayaan klien/user.<br/></span></p> <p><span>Menyesuaikan warna brand serta konsistensi warna pada website memang gampang-gampang susah. Tetapi itu semua bisa dimudahkan jika kita tahu, dimana komposisi yang tepat untuk paduan warna tersebut (yaiyalah! :P). Penyesuaian warna bisa anda baca pada satu artikel inspiratif milik <a target="_blank" href="http://jurusgrafis.com/artikel/psikologi-warna-desain-grafis/">JurusGrafis</a>.</span></p> <p><span><br/></span></p> <p><span><strong>4. Sidebar, Body, dan Page Title Header</strong></span></p> <p><span><strong><img src="http://media.tumblr.com/tumblr_l6x5zmRxQB1qcxd1b.png"/></strong></span></p> <p><img src="http://media.tumblr.com/tumblr_l6wpvj5Kl31qcxd1b.png"/></p> <p>Jika anda lihat halaman Solutions, Products, Support, Communities, Company, Downloads, dan Store di website Adobe, maka anda akan melihat area kosong di sebelah Page Title. Itu adalah salah satu keunikan desain tata letak dari website Adobe.</p> <p>Mereka membuat layout yang berbeda dari website lainnya dengan memposisikan body dan sidebar tidak menyatu, tetapi body digaris luruskan pada sidebar. Sehingga akan mengurangi efek web yang lebar. <a target="_blank" href="http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/">Let&#8217;s think out of the box!</a></p> <p><span><strong>5. Desain Home Page Menyesuaikan Terhadap Info/Event/Produk Terbaru</strong></span></p> <p><span></span><img src="http://media.tumblr.com/tumblr_l6wq11482n1qcxd1b.png"/></p> <p>Halaman depan website adalah salah satu yang terpenting dalam unsur penilaian dari user atas kualitas suatu website, dan sebagai daya tarik user juga dalam menilai showcase-an produk yang akan mereka beli. Intinya halaman depan website adalah sumber informasi utama ketika pengunjung masuk ke website dan harus bagus :p</p> <p>Setiap Adobe meluncurkan produk atau layanan baru, desain halaman depan website Adobe selalu berbeda dan menampilkan fitur apa saja yang dapat dilakukan oleh software tersebut dalam bentuk gambar ataupun animasi di halaman depannya. Trik mereka untuk memikat konsumen tanpa disadari, karena dengan trik penyajian produk/layanan yang bisa dibilang &#8216;wah&#8217;.</p> <p>Dengan desain/warna produk yang berbeda-beda, tetapi mereka tetap berpegang teguh dengan warna gelapnya. Gambar diatas adalah contoh halaman depan Adobe yang mengshowcasekan produk Adobe Acrobat 9 dan diganti dengan Adobe Creative Suit 5 yang saya capture pada 7 Agustus 2010 kemarin (Adobe tahu aja saya lagi bikin artikel tentang itu :P).</p> <p><span><strong>6. Tata Letak Penampilan Produk di Halaman <em>Products</em></strong></span></p> <p><img src="http://media.tumblr.com/tumblr_l6wq1pzNTC1qcxd1b.png"/></p> <p>Ah ini mah sepertinya pembaca sudah pada mengerti kan? ga perlu dijelaskan yak.. hihi :P #kidding.</p> <p>Ada berapa produk Adobe? ratusan.. Jika setiap produk Adobe ditempatkan di satu halaman produk, maka bisa dibayangkan, pengunjung akan banyak mengeluarkan bandwith internetnya hanya untuk me-load gambar dan konten. Sukur-sukur jika internet pengunjung unlimited, jika tidak? pengunjung bisa tidak betah dengan website Adobe.</p> <p>Untuk mencegah itu, Adobe hanya menampilkan produk-produk pilihannya saja, dan sebagian produknya ditempatkan didalam form list seperti gambar dibawah ini.</p> <p><img src="http://media.tumblr.com/tumblr_l6x8ay6ug91qcxd1b.png"/></p> <p><span><strong>7. Pemberian Informasi Produk/Layanan (Lengkap) Kepada User</strong></span></p> <p><span></span><img src="http://media.tumblr.com/tumblr_l6wq3wdlUZ1qcxd1b.png"/></p> <p>Adobe menampilkan informasi dan link seluas-luasnya dan selengkap-lengkapnya tentang produkya. Jangan malas untuk mengetik informasi produk. Jika informasi yang diberikan tidak lengkap dan masih membingungkan, maka user juga ragu untuk membelinya. Konsumen tidak ingin dirugikan atas layanan/produk yang dibelinya.</p> <p>Bayangkan saja jika anda ingin membeli sesuatu yang sangat penting bagi anda, apa yang akan anda periksa supaya anda percaya untuk membeli barang tersebut di toko online?.</p> <p><span><strong>8. Memberikan Kepercayaan Kepada User Terhadap Produk dan Layanan</strong></span></p> <p><span></span><img src="http://media.tumblr.com/tumblr_l6wq4q6mWc1qcxd1b.png"/></p> <p>Produk yang lengkap, bantuan yang lengkap, bahkan informasi tentang produk mudah didapat. Lalu apalagi yang perlu dijadikan pembahasan? Jawabannya&#160;: Kepercayaan dan keamanan user dalam bertransaksi online di website.</p> <p>Optimalnya untuk menampilkan informasi ini adalah di footer. Footer dapat menempatkan info-info penting dan link random lainnya. Dan juga tempat view terakhir setelah navigasi diatas dan konten-konten website di body.</p> <p>Informasi yang ditampilkan dapat berupa link hak cipta website, ketentuan penggunaan, , tanggal terakhir website terupdate, dan jika website anda berbasis transaksi/online store, usahakan untuk menampilkan security yang ada didalam website anda.</p> <p>Disarankan untuk menulis isi link informasi tersebut di halaman lain. Jika ditulis semua di footer, akan berpengaruh terhadap konten, dan membuat sedikit acak-acakan. Usahakan hanya linknya saja yang berada di footer.</p> <p>Done.</p> <p><span><strong><br/></strong></span></p>http://blogme.hexacreative.web.id/post/931054998http://blogme.hexacreative.web.id/post/931054998Tue, 10 Aug 2010 15:16:03 +0700desaininspirasiwebsite