Kumpulan Tool Untuk Web Design | majuter.us

hanamaze    5:29:00 PM    Comment   

Kumpulan Tool Untuk Web Design | majuter.us

Saya yakin, banyak web designer / developer menggunakan berbagai macam web design tools terkenal seperti Redpen, Bootstrap, Adobe Kuler, dan sebagainya, dengan tujuan untuk memudahkan desain / pengerjaan project.
Dan saya terpikir, sebenarnya banyak tools untuk web design lain yang juga bagus, namun mungkin kurang terkenal dikarenakan tidak banyak yang tahu, masih baru diluncurkan, atau masih beta. Jadi di sini, saya tuliskan daftar kumpulan web design tools sebagai tambahan referensi anda, web designer/developer.
Jika ada yang terlewat, silahkan tambahkan di kotak komentar.

1. SIP

 

Tool color picker sederhana yang fungsinya untuk mengambil warna apapun yang ada di layar. Mendukung 35 format warna seperti HEX, RGB, RGBA, dan lain-lain. Tersedia dalam bentuk ekstensi untuk Adobe Photoshop dan Illustrator. Tool gratis ini bisa anda download di iTunes Store (iya…, hanya untuk OS X saja).

2. InVision

Jika anda suka menggunakan Redpen, saya yakin anda akan jauh lebih suka menggunakan InVision. Fungsi InVision kurang lebih sama dengan Redpen yaitu untuk menunjukkan mockup/prototype desain, namun dengan fitur ekstra seperti gestures, animations, dan transitions.

3. Bourbon Neat

Bourbon Neat adalah sebuah responsive grid framework yang dibangun di atas SASS dan Bourbon. Tidak seperti grid framework lain seperti Bootstrap atau Foundation, Bourbon neat tidak membutuhkan class tertentu (.row, .small-x, .large-x, .span-x, dsb). Jadi HTML anda akan lebih bersih dan semantic.

4. Animatron

Dengan tool ini, anda tidak perlu belajar coding untuk membuat HTML5 animasi. Animatron adalah sebuah tool online untuk membuat animasi HTML5 untuk kemudian bisa anda taruh di situs anda.

5. Mapbox

Mapbox adalah sebuah tool yang memudahkan anda untuk mendesain peta. Dengan berbagai pilihan font, tekstur dan ilustrasi, serta custom marker, anda bisa menciptakan sebuah desain peta yang unik untuk disesuaikan dengan project desain.

6. Ocean

Saya rasa dari taglinenya, “a community of designers sharing feedback”, sudah jelas fungsinya apa :). Ocean kurang lebih fungsinya seperti Redpen, yaitu untuk mencari feedback. Namun karena ini adalah situs komunitas, jadi semua anggota bebas memberikan feedback.

7. Blocs

Blocs adalah tool untuk mendesain website untuk kemudian bisa diexport ke dalam bentuk HTML. Kurang lebih seperti Macaw.

8. Takana

Takana adalah sebuah tool dimana anda bisa melihat perubahan desain website anda di browser secara langsung pada waktu anda mengubah SCSS atau CSS di text editor, tanpa harus menekan save terlebih dahulu. Tool favorit terbaru saya.

9. Duo

Duo adalah browser dengan 2 panel tampilan (desktop dan mobile view) untuk membantu proses desain/develop website responsive. Tidak gratis. Hanya untuk OS X.

Sumber:

http://majuter.us/blog/tools/kumpulan-web-design-tools-untuk-membantu-proses-web-desain-development

Sekilas Tentang User Experience | intraktive.com

hanamaze    5:08:00 PM    Comment   

Sekilas Tentang User Experience | intraktive.com

Beberapa tahun belakangan ini topik user experience menjadi hot topic di jagat teknologi informasi disamping topik responsive web design (RWD). Permintaan tenaga UX designer melonjak, mereka yang menamakan dirinya sebagai UX designer pun pertumbuhannya signifikan. Ada 99.455 UX designer terdaftar di situs Linkedin saat tulisan ini dibuat.
Telah terjadi pergeseran pandangan di jagat teknologi informasi belakangan ini, dimana selama ini website dibuat cenderung atas selera dan maunya desainer dan pemilik, namun sekarang mereka mulai mengakomodasi apa yang disuka dan dibutuhkan pengguna berkenaan dengan produk yang mereka punya.

Illustration by Intraktive

Apakah User Experience

User experience adalah sikap, tingkah laku dan emosi pengguna saat menggunakan suatu produk, sistem atau jasa (rujukan Wikipedia). Pengalaman ini melibatkan persepsi individu berkaitan dengan manfaat yg dirasa, kemudahan yang didapat. User experience sangat dinamis, seiring perjalanan waktu persepsi yang dirasakan pengguna bisa berubah sejalan berubahnya lingkungan, kebiasaan dan nilai-nilai.
Dalam konteks ini user experience yang kita bicarakan adalah bentuk interaksi antara manusia dan komputer (human-computer interaction (HCI)) yang meliputi website, applikasi smartphone dan aplikasi desktop. User experience disini berkaitan dengan apa yang dirasa oleh pengguna yang berhubungan dengan kemudahanan, kenyamanan, efisiensi, kemanfaatan saat mereka menggunakan web, aplikasi smartphone dan aplikasi desktop.

Human Computer Interaction

Sebagai contoh dalam penerapan user experience ini bisa kita lihat pada :

• Proses checkout pada web e-commerce saat pengguna selesai melakukan pembelian suatu item barang. Apakah proses checkoutnya mudah atau malah merepotkan.
  
• Proses pendaftaran (sign up) di suatu website berupa form isian. Mungkin pembaca sering mengalami kebingungan ketika proses sign up dinyatakan gagal karena kesalahan mengisi data namun website tidak memberitahu data yang mana yang salah.
  
• Navigasi yang membingungkan, di antaranya pengguna bingung sebenarnya dia sedang berada di mana
• Pembaca masih ingat masa-masa boomingnya Macromedia Flash. Flash mendominasi website dengan halaman splashnya, pengguna dipaksa menunggu untuk melihat halaman splash berupa animasi pendek yang membutuhkan waktu untuk loading sebelum benar-benar masuk ke halaman utama.
  
• Mereka yang biasa menggunakan social media Path di smarrt phone terbiasa dengan tombol + di halaman depan, bila di sentuh tombol tersebut akan keluar beberapa tombol lain. Keberadaan tombol ini begitu fungsional.

Itu hanya beberapa contoh berkaitan dengan user experience yang sering kita temukan pada website atau aplikasi smart phone

Penggagas User Experience

Istilah user experience digunakan pertama kali oleh Don Norman akademisi bidang cognitive science, design dan usability engineering dan mantan vice president Apple Inc. Sekaligus penggagas awal dari user-centered design yakni pendekatan desain yang berfokus pada kebutuhan dan keinginan pengguna.

Seberapa Pentingkah User Experience dalam Penerapannya

Pada masa-masa awal era internet pemain-pemain besar di jagad internet seperti Yahoo, Amazon, Paypal, Google lebih peduli kepada teknologi, desain tidaklah mendapat porsi perhatian yang besar. Teknologi itu juga yang memberikan kesuksesan besar kepada mereka. Namun sekarang di masa di mana kompetisi begitu sengit keberhasilan produk tidaklah cukup ditentukan oleh teknologi yang bermanfaat dan fungsional semata.

Illustration by Intraktive

Untuk merebut hati para pengguna produk mereka, para pemain di dunia internet ini tak lagi bisa mengenyampingkan kebutuhan dan keinginan pengguna yang oleh Don Norman dinamakan dengan user-centered design. Produk yang berteknologi sekaligus fungsional tapi juga mampu memberi pengalaman (experience) yang menyenangkan, mudah pemanfaatannya, sehingga memiliki user engagement tinggi yang diukur oleh lamanya waktu yang dihabiskan oleh pengguna di produk tersebut.
Apakah pentingnya dengan penerapan user experience :

• kemudahan bagi pengguna website, aplikasi smartphone,perangkat lunak desktop yang menerapkan user experience yang baik akan memberi kemudahan dalam penggunaannya
  
• menaikkan kepercayaan pengguna/konsumen pada produk tersebut tingkat kepercayaan pengguna/konsumen sangat dipengaruhi oleh kemampuan produk yang mereka gunakan dalam membantu menyelesaikan masalah mereka
  
• menaikkan conversion rate bisa dibayangkan seorang pembeli yang harus melewati prosedur pembelian yang begitu panjang dan rumit di suatu situs e-commerce, tentu bukan pengalaman yang menyenangkan untuk mereka bagi ke calon pembeli lainnya
  
• dari segi bisnis user experience dipercaya mampu menaikkan penjualan (rujukan econsultancy)

 

Kerja Tim

User experience bukanlah pekerjaan yang melibatkan satu atau dua individu untuk menyelesaikan suatu masalah dalam satu malam. User experience tidak hanya semata berurusan dengan user interface namun aspek dari pengalaman si pengguna secara menyeluruh yang menyangkut konten, usability, informasi, termasuk aspek bisnisnya. Sehingga pekerjaan user experience melibatkan mereka dengan keterampilan dan spesialisasi berbeda yang melibatkan riset, perencanaan, pengembangan, pengujian. User experience adalah pekerjaan tim, mereka berkolaborasi untuk menciptakan sebuah produk

• Visual designer Tampilan secara visual mempunyai peranan penting untuk suatu desain web, aplikasi web/smartphone, aplikasi desktop. Kesan pertama dan tampilan visual yang memanjakan mata tentu memiliki daya tarik tersendiri bagi pengguna.
  
• Front end developer Implementasi terhadap konsep, ide yang telah dituangkan oleh UX designer tentu butuh implementasi, adalah pekerjaan front end developer untuk implementasinya dengan kode HTML,CSS, Javascript.
  
• Content strategist Website membutuhkan konten yang berbicara kepada publik siapa mereka, apa yang mereka lakukan, kalau mereka berbisnis apa bisnis mereka jalankan, pesan apa yang ingin mereka sampaikan kepada publik. Bagaimana itu dilakukan dan bagaimana strateginya adalah pekerjaan content strategist.
  
• Usability expert Memastikan bahwa sistem berfungsi dengan baik, mudah menggunakannya, user-friendly. Memastikan user bisa mendapatkan apa yang diinginkan dengan cepat yang dibantu oleh navigasi, search box. Usability expert menerapkan pola yang bisa dipelajari pengguna saat menggunakan sistem, sehingga walau tanpa dibekali guideline si pengguna bisa menggunakan siistem dengan mudah.
  
• Information architect Salah satu syarat terpenuhinya sistem yang mengaplikasikan user experience yang benar adalah organisasi konten termasuk diantaranya penataan navigasi dan link. Karena hal ini berkaitan dengan informasi yang dicari oleh pengunjung.
  
• User experience designer User experience designer adalah orang yang menentukan visi dari produk yang akan dihasilkan secara keseluruhan dari sisi user experience. Tim akan bekerja berdasarkan roadmap yang telah dibuat oleh user experience designer. Masing-masing anggota tim kemudian akan bekerja sesuai porsinya masing-masing untuk mencapai tujuan yang telah ditentukan.
  

Kesimpulan

Dari semua yang dipaparkan diatas kita bisa meringkas kembali tentang user experience, yaitu suatu usaha untuk menghasilkan produk (website, aplikasi smartphone, aplikasi desktop) yang berpusat pada kebutuhan dan keinginan pengguna (user). Dengan tujuan bisa menghasilkan produk yang bermanfaat, mudah digunakan, efisien sekaligus menyenangkan.

Sumber:

http://intraktive.com/index.php/article/99-sekilas-tentang-user-experience

Koleksi Warna - Color Pallete

hanamaze    5:37:00 PM    Comment   

Koleksi Warna - Color Pallete

Dalam pemilihan kode warna saya serin menggunakan color pallete di adobe photoshop untuk mengetahui kode RGB-nya, namun ini ada alternatif lain untuk memilih kode warna via web.

Ini ada beberapa web untuk mengispirasi kita dalam memilih warna ataupun meng-copy kode warna.

1. PALLETON.COM

 ALAMAT WEB

2. COLLOR.COM

 ALAMAT WEB

3. COLOR.ADOBE.COM

ALAMAT WEB

Semoga bermanfaat :)

Admin LTE - Template untuk admin (flat design)

hanamaze    4:47:00 PM    2 comments   

Admin LTE - Template untuk admin (flat design)

Admin LTE adalah salah satu template web berbasis bootstrap yang cocok digunakan untuk dashboard admin. Desain yang dipakai berbentuk flat yang memang menjadi tren disaat ini.

Inilah fitur-fitur template yang dijelaskan dari websitenya

AdminLTE Dashboard and Control Panel Template

• Responsive admin template
• Free & open source
• Built with Bootstrap 3
• Easy to customize
• 2,600+ stars on Github
• New: Installation guide

PREVIEW

 

Silakan dicoba sendiri

 DEMO

DOWNLOAD

GITHUB

Share hasil desainmu di Redpen.io

hanamaze    6:36:00 PM    Comment   

Share hasil desainmu di Redpen.io

Red Pen adalah web yang biasanya dipakai untuk share hasil desain grafis.
dengan upload gambar / mockup desain anda di redpen.io , anda dapat melihat orang lain mengomentari karya anda. Untuk membuat komentar sangat mudah hanya dengan meng-klik pada bagian yang dikomentari kemudian muncul popup form komentar selanjutnya submit maka komentar akan tersemat pada desain tersebut dalam bentuk ikon yang bisa di-klik.

Red pen

Cobalah :)