Reka bentuk minimum untuk Rdio membolehkan muzik menjadi bintang

Kandungan

• Apa yang mendorong reka bentuk semula?
• Apakah pendekatan reka bentuk anda terhadap projek itu?
• Bagaimana anda menghasilkan konsep untuk halaman arahan?
• Apa yang anda gunakan untuk membina laman web ini?
• 05. Apakah aspek projek yang paling mencabar?

Social jukebox Rdio adalah perkhidmatan muzik dalam talian, dengan lebih dari 20 juta lagu tersedia untuk pengguna. Sebagai keperluan penyegaran, reka bentuk laman web syarikat mengalami perombakan minimal dan elegan, yang menggunakan pelbagai karya seni album di halaman arahan baru yang menarik. Kami bercakap dengan peneraju reka bentuk visual pada projek Geoff Koops, pereka UX Mike Towber dan jurutera bahagian depan Jason Norris untuk mengetahui lebih lanjut ...

Apa yang mendorong reka bentuk semula?

Geoff Koops: Di sebalik usaha reka bentuk dan kejuruteraan Rdio, terdapat keinginan yang konsisten untuk pengurangan dan penyederhanaan - untuk meningkatkan pengalaman pengguna kami, untuk mengurangkan kos penyelenggaraan dan teknikal, untuk berkomunikasi dengan indah dan ekonomi. Oleh itu, ketika kami menjumpai jangka masa yang tepat untuk projek reka bentuk semula ini, pendekatan yang sama dapat dilakukan di laman web.

Rasanya seperti kami dapat mengurangkan dan mempermudah kehadiran pemasaran web kami secara dramatis: lebih sedikit kata, lebih sedikit halaman, lebih sedikit penguncian gambar telefon dan tablet dengan skrin. Keterangan produk yang lebih komprehensif, apa-apa-tetapi-the-kitchen-sink, kurang pujukan tentang produk, dan cara yang lebih langsung untuk masuk.

Selain itu, Rdio.com hanya memerlukan penyegaran. Versi laman web sebelumnya adalah elegan dan cukup berkesan, dan ia telah memberi perkhidmatan yang baik kepada kami selama beberapa tahun, tetapi ia mula menunjukkan usia, merasa tidak selari dengan beberapa kemas kini reka bentuk produk web dan mudah alih yang telah dilancarkan selama berbulan-bulan dan dengan kekerapan yang semakin meningkat.

Sebagai tambahan kepada penampilan dan nuansa yang ketinggalan zaman, laman web ini sebenarnya mengandungi beberapa maklumat ketinggalan zaman. Terdapat cukup kandungan yang membebankan, terutama untuk pasukan reka bentuk yang ramping, yang kebanyakannya berfokus pada produk, untuk memastikan semua salinan dan skrin produk tetap terkini. Kami ingin mengehadkan jumlah kandungan secara ketat sehingga kami tidak akan terganggu dengan banyak penyelenggaraan kandungan.

Apakah pendekatan reka bentuk anda terhadap projek itu?

GK: Bagi kami, laman web pemasaran yang sangat sederhana menjalankan tugas dalam satu halaman. Dan bukan satu halaman panjang-panjang, 20 minit-untuk-dibaca-semuanya-halaman. Sebaliknya, satu halaman pendek (dengan beberapa tatal dibenarkan) yang mendapat maklumat yang diperlukan. Kami menyimpannya sebagai panduan praktikal ketika kami menghampiri projek tersebut. Tetapi singkatnya pendekatan kami bukan sekadar tujuan sewenang-wenangnya.

Rdio adalah laman pemasaran terbaiknya sendiri. Percuma untuk mendaftar dan menggunakan, dan kami fikir pengguna akan merasa senang apabila mereka mula mendengar dan menemui muzik. Kami mempercayai produk dengan penuh minat. Oleh itu, membuat orang menghabiskan banyak masa di halaman keluar dari laman web kami, tentu saja, bukan tujuan kami - kami mahu orang meluangkan masa dalam produk tersebut.

Dengan pemikiran itu, semasa kami mendekati projek ini, kami ingin mempermudah cadangan di halaman arahan. Kami memprioritaskan untuk membuat jalan masuk yang pantas dan jelas ke dalam aplikasi untuk pengunjung yang sudah memutuskan - meletakkan pilihan pendaftaran Facebook / e-mel besar di hadapan dan tengah - dan menghilangkan ajakan bertindak dan salinan yang tidak penting.

Rdio adalah laman pemasaran terbaiknya sendiri. Kami mempercayai produk dengan penuh minat

Menyedari bahawa akan ada orang yang memerlukan lebih banyak maklumat sebelum membuat keputusan, kami memberikan penjelasan ringkas mengenai pilihan langganan kami dan beberapa ciri "tiang", tetapi menyembunyikannya tepat "di bawah lipatan" pada halaman memuatkan penyemak imbas pelawat saiz tingkap.

Sebenarnya, kami mula memikirkan lebih banyak mengenai reka bentuk semula laman web pemasaran sebagai hanya merancang semula skrin pertama produk untuk pengguna yang belum masuk - dan, tentu saja, kami mengoptimumkan untuk pengunjung yang belum pernah log masuk.

Kami mahukan laman web untuk pengguna yang keluar dan pelawat baru yang merasa seperti itu termasuk dalam keluarga reka bentuk yang sama, dan direka oleh tangan yang sama dengan yang merancang aplikasi Rdio, sambil tidak meminjam secara langsung dari reka bentuk produk sehingga membingungkan pengunjung tentang di mana sempadannya.

Melalui semua itu, beberapa keutamaan asas merangkumi penjelajahan kami: menyediakan akses pendaftaran berterusan, dan mempermudah pesanan kami secara besar-besaran.

Bagaimana anda menghasilkan konsep untuk halaman arahan?

Kami tahu halaman arahan mesti menjadi pengalaman yang kaya tetapi tidak pengalaman yang panjang, menuntut, atau terlalu mengasyikkan, kerana semasa kami ingin menarik perhatian, kami tidak mahu menggagalkan pengguna baru kami.

Di Rdio, kami berusaha sebaik mungkin untuk keluar dari jalan dan membiarkan muzik menjadi bintang, dan kami berusaha menjadikan pengalaman mendengarkan dan menemui muzik semeriah dan elegan mungkin. Salah satu cara untuk mencapainya adalah dengan memperlakukan karya seni album dengan penuh rasa hormat, menggunakannya sebagai bahan utama pada palet kami.

Dalam meneroka konsep untuk halaman arahan kami, melihat pilihan yang melibatkan bermain muzik atau video tertanam, atau membuat fotografi asli atau membawa fotografi gaya hidup dan muzik yang ada. Foto dan video yang menggambarkan kesan atau gaya hidup di sekitar muzik boleh menggugah dan bahkan bergerak, tetapi mereka juga berisiko merasa sedikit manipulasi dan "iklan-y."

Pada akhirnya, kami memilih konsep yang secara eksplisit menunjukkan bahawa menghormati karya seni album dan meletakkan album sebagai elemen visual utama dalam pelbagai keadaan halaman. Bagi kami, penggabungan muzik dan mesej secara visual paling sesuai dengan produk dan budaya kami di Rdio.

Seni album menjadi huruf yang tersemat dalam empat kata utama dalam urutan pembukaan animasi. Dan dalam keadaan halaman yang diselesaikan, lebih banyak karya seni album berlapis di belakang medan warna biru Rdio separa telus, yang memungkinkan untuk melihat sekilas melalui huruf-huruf tagline yang tersingkir ("Muzik berkembang. Main dan temukan percuma") ke karya seni di bawahnya. - lakonan latar depan / latar yang mengangguk kepada aliran muzik tanpa henti yang menunggu di dalam Rdio.

Apa yang anda gunakan untuk membina laman web ini?

Jason Norris: UX dan reka bentuk visual kebanyakannya berlaku di Illustrator dan Photoshop, dengan papan putih atau lakaran pensil yang menangkap pemikiran spontan sepanjang masa. Prototaip gerakan dan tatal dilakukan dalam After Effects dan Keynote.

Dari segi pembinaan laman web ini, laman pemasaran sebelumnya adalah laman web yang terpisah dan statik, yang menghalang kami daripada dapat berkongsi gaya dan fungsi yang kami kembangkan untuk aplikasi Rdio. Jurutera kami membina halaman arahan baru menggunakan kerangka kerja Javascript berasaskan komponen yang sama dengan yang kami gunakan untuk membina aplikasi Rdio, yang dibina di atas rangka kerja Backbone.js.

Kami menggunakan elemen kanvas HTML5 dengan banyak untuk menjadikan seni dan teks album kabur sebagai "potongan". Tatal dikendalikan oleh beberapa Javascript tersuai yang disesuaikan.

05. Apakah aspek projek yang paling mencabar?

Mike Towber: Melepaskan tahap maklumat sekunder dan tersier, menghilangkan pintu masuk 'side-door', dan mengurangkan tindakan yang dapat dilakukan oleh pengunjung ke laman web ini adalah lompatan keimanan.

Pasti, anda boleh melancarkan secara lembut atau menguji pelbagai senario untuk mengurangkan kejutan, dan berulang berdasarkan apa yang anda pelajari, tetapi dengan mempermudah laman web kami, banyak perkara yang selalu memerlukan banyak keberanian, dan juga peringatan yang asal tujuan dan keutamaan, untuk kita hanya mencarinya.

Apa pendapat anda mengenai reka bentuk semula Rdio? Beritahu kami dalam komen.