Meresain semula Pinterest, blok dengan blok

Apabila saya seorang anak dewasa di Sweden, bilik saya dipenuhi dengan mainan kayu yang direka khas oleh BRIO. Saya masih kagum dengan reka bentuk yang mudah, warna-warna cerah dan campuran bentuk geometri abstrak dan bentuk organik. Cara mereka melihat dan berpindah menjemput anda untuk bermain dengan mereka.

Sistem kereta api kayu itu amat hebat. Anda boleh menyesuaikan kepingan trek bersama-sama ke dalam kalangan, straightaways, s-curves, apa sahaja yang anda mahukan. Tetapi anda perlu berfikir tentang bagaimana anda membuat laluan anda - terdapat logik bagaimana kepingan-kepingan itu sesuai bersama, dan anda tidak boleh memaksa geometri.

Beberapa puluh tahun kemudian, anak-anak saya sendiri bermain dengan peninggalan yang sangat sama sejak zaman kanak-kanak saya. Saya dapat mendengar mereka berpaut pada lantai kayu bilik mereka sekarang. Reka bentuk yang berkekalan telah diadakan sepanjang tahun dan generasi perubahan.

Kesederhanaan BRIO yang indah ini adalah pada fikiran saya musim bunga lalu, ketika saya mula berfokus pada masalah besar yang telah dikembangkan dengan reka bentuk Pinterest. Sebenarnya, 3 masalah besar.

  1. UI kami tidak konsisten
  2. Sistem visual kami adalah basi
  3. Pemasaran kami terasa terputus dari produk kami

Selama bertahun-tahun, reka bentuk untuk laman web, aplikasi dan pemasaran kami telah mula hanyut, sehingga mereka tidak lagi merasa seperti mereka mempunyai keperibadian yang sama. Sejumlah ciri baru juga telah ditambah tanpa visi yang jelas tentang bagaimana ia sesuai dengan reka bentuk keseluruhan, jadi antara muka telah mula merasa berantakan dan sukar difahami. Tiada hierarki visual atau sistem untuk membantu anda memahami apa yang penting apabila anda melihat mana-mana halaman yang diberikan. Akibatnya, semua idea inspirasi orang menjimatkan di Pinterest - setakat yang paling penting dalam pengalaman kami - telah hilang.

Ternyata, ia sial untuk merancang sesuatu yang konsisten dan cantik pada skala.

Satu perkara prinsip

Pengalaman Pinterest secara keseluruhannya adalah dalam keadaan sakit yang menyederhanakan dan menyatukan. Dan jika kita hendak melakukan itu, kita perlu mengenal pasti beberapa prinsip reka bentuk teras untuk diri kita sendiri.

Saya berundur ke sudut gelap ruang bawah tanah Pinterest dan menghabiskan beberapa minggu akan datang bermain dengan reka bentuk. Saya tidak pasti apa yang saya buat pada mulanya - pada dasarnya ia seperti versi saya sendiri yang banging bersama blok. Saya mula merenungkan soalan seperti, Kenapa orang suka Pinterest? Apa yang menjadikan produk kami unik? Apakah keperibadian kita? Apa yang kita semua tentang?

Semakin saya memikirkannya, semakin saya sedar bahawa intipati Pinterest adalah seperti koleksi mainan BRIO tercinta keluarga saya. Kedua-duanya menggalakkan anda bermain dengan pilihan yang berbeza, menyambungkan keping bersama dan membuat dunia anda sendiri. Anda boleh mulakan dengan matlamat dan projek anda sendiri, atau anda boleh mendapat inspirasi dari apa yang dilakukan oleh orang lain dan membuangnya. Lompat masuk dan segera mula bermain, hentikan bila-bila masa yang anda mahukan, kemudian kembali dan pilih di mana anda berhenti.

Mendorong pemikiran lebih jauh, kualiti penting yang Pinterest dan BRIO berkongsi bubbled ke 3 prinsip mudah. Ini menggambarkan kualiti terbaik Pinterest hari ini, dan meletakkan asas untuk di mana kita mahu mengambil produk pada masa akan datang.

-

  1. Lucid

Ia intuitif, tidak dipelajari
 Anda memahami bagaimana perkara berfungsi tanpa penjelasan langsung.

Ia menjadikan pengguna merasa kuat
Tidak ada yang membuat anda merasa tidak selesa atau seperti anda tidak boleh mempercayai sistem. Sistem ini menyediakan anda komponen yang betul dan meminta anda apa yang perlu dilakukan seterusnya.

Ia menjadikan rasa kandungan lebih baik
Rangka kerja itu benar-benar lancar dan tersembunyi. Anda tidak menyedarinya sehingga anda berinteraksi dengannya. Anda dapat memutuskan apa yang anda mahu, bukannya kami memaksa anda.

2. Animasi

Ia berwarna-warni
Keperibadiannya berani dan menonjol.

Ia respons langsung
Pengalaman interaksi dengan cara fizikal.

Ia tidak dijangka
Pengalaman ini suka bermain dan menyeronokkan, tetapi tidak pernah menggembirakan.

3. Tidak dapat dipecahkan

Ia dibina untuk penjelajahan
Sama seperti mainan kanak-kanak, anda mahu mencuba untuk melihat apa yang akan berlaku. Semakin anda menyiasat, semakin cepat anda belajar dan semakin banyak anda mendapat kembali.

Tidak mustahil untuk salah ketuk
Segala-galanya direka untuk membantu anda mengemudi dengan mudah dan melakukan apa yang anda fikirkan.

Ia boleh diterbalikkan
Jika anda secara tidak sengaja melakukan sesuatu yang tidak menghasilkan hasil yang anda cari, jelas bagaimana cara membetulkannya.

-

Sebaik sahaja kita menyekat 3 prinsip ini, langkah seterusnya adalah untuk menterjemahkannya menjadi sesuatu yang ketara yang berpotensi menjadi asas bagi segala yang kita bina bergerak ke hadapan.

Asas-asas

Bentuk - Kami menggunakan bentuk asas dan sentuhan mesra yang rakyat secara semula jadi memahami dan ingin berinteraksi. Sudut dibulatkan untuk menjadikannya lebih mudah didekati.

Warna - Saya penggemar warna skema yang sama. Mereka berasa sangat alami dan mencerminkan perasaan ketenangan. Apabila anda menggabungkan beberapa skema warna analog yang berbeza yang asalnya berdasarkan beberapa warna pelengkap yang diberikan, hasilnya sangat menarik dan tidak dijangka.

Hierarki - Semuanya sangat hirarkis, jadi selalu jelas apa yang paling penting. Seperti yang kita reka kita tanya diri kita, Apa yang paling penting bagi seseorang untuk difahami di sini? Apa yang boleh kita keluarkan untuk membuat perkara lebih jelas?

Ruang putih - Dalam reka bentuk Pinterest yang lama, fokusnya adalah pada bekas yang mengelilingi kandungan orang, yang menguasai kandungan itu sendiri. Apa yang anda lihat adalah banyak garis, kecerunan, warna kelabu. Tiada ruang untuk bernafas. Memperkenalkan ruang putih memberikan pemisahan semulajadi antara elemen tanpa menambah bunyi bising. Hasilnya seimbang dan berstruktur, dan jumlah ruang putih menambah keperibadian dan kesan.

Penjelajahan dan idea awal

Kami mahu melihat apa yang akan berlaku jika kami hanya mengeluarkan semua bekas dari dari UI. Akankah tumpuan kembali ke objek itu sendiri, atau adakah pengalaman itu akan runtuh sepenuhnya?

Ternyata grid yang kurang bersih yang dihasilkan merasakan hebat, dan penekanannya akhirnya kembali pada idea orang yang menyimpan pada Pinterest. Kami tidak kehilangan bekas sepenuhnya, kerana mereka membantu menjelaskan maklumat mana yang berlaku dengan imej apa. Sebaliknya, kami menunggu untuk menunjukkan bekas sehingga anda cukup ingin tahu. Dengan cara itu, antara muka visual mengajar anda bagaimana maklumat dihubungkan dan dikelompokkan dalam sistem kami. Anda hanya perlu mengalami interaksi ini sekali untuk memahami bagaimana Pin dibina.

Merancang satu set standard baru

Selepas bermain dengan reka bentuk dan interaksi untuk beberapa bulan yang baik, pasukan dan saya akhirnya mendapat tempat yang kami rasa seperti semua 3 prinsip reka bentuk produk kami (jelas, animasi, tidak dapat dipecahkan) diwakili. Kami bersedia untuk meletakkan prinsip dan sistem reka bentuk baru kami untuk ujian.

Kami mahu memulakan dengan sistem yang terkandung, jadi kami memutuskan untuk mengatasi aplikasi iOS kami terlebih dahulu. Untuk lulus pertama kami, kami memberi tumpuan kepada reka bentuk visual - kerja semula arkitektur maklumat akan datang kemudian. Anda boleh membaca semua mengenai reka bentuk semula iOS dan backend yang diselaraskan semula dalam WIRED.

Bersama mendesain semula aplikasi, kami juga membina apa yang kami panggil Piawaian Reka Bentuk Produk Pinterest, yang merangkumi:

Sistem-Bentuk, tipografi, warna, grid
Struktur - Susunan komponen
Alam Sekitar - Semua kepingan dunia yang kami reka

Kami menghabiskan 9 bulan akan datang bekerja rapat dengan kejuruteraan untuk membina setiap komponen, dan kami membuat banyak pengubahsuaian dan pelarasan di sepanjang jalan. Sudah menjadi usaha yang luar biasa dan kolaboratif memastikan semua yang kami bina bersama bukan sahaja memenuhi matlamat reka bentuk kami, tetapi boleh diguna semula dan bernilai untuk semua pasukan kejuruteraan produk lain di Pinterest.

Di bawah hanya beberapa cara Piawaian Reka bentuk kami yang baru telah berlaku di seluruh Pinterest.

Pasukan epik yang menjadikannya berlaku

Cukup banyak pasukan reka bentuk produk di Pinterest terlibat dalam membuat pemeriksaan dan melaksanakan sistem reka bentuk baru.

Kami juga mempunyai pasukan kecil pereka retak (Annie Teng, Jay Marsh, Kimberly Fellman, Linus Wahlstedt, Long Cheng, Patrik Goethe, Rick Chatas, Susan Kare, Tom Watson, Woosung Kang) yang bekerja rapat dengan saya dan jurutera hebat kami berulang pada keputusan reka bentuk bersama-sama, untuk mencari peralihan dan lengkung yang betul, untuk prototaip gerak isyarat yang berlainan, dan sebagainya dan seterusnya. Ini benar-benar bahagian terbaik dari proses ini. Bekerja merentas pasukan, menggabungkan maklum balas dari pelbagai perspektif (proses yang dikenali di Pinterest sebagai "merajut") membuat keputusannya lebih pesat. Kami juga mempunyai banyak keseronokan.

Dan yang terakhir, saya bekerja rapat dengan pasukan jenama Pinterest untuk mewujudkan garis panduan jenama baru yang mencerminkan prinsip reka bentuk yang sama. Pemasaran terkini kami sudah mula merasakan ia berkongsi suara yang sama dengan produk kami.

Seterusnya, kami akan menangani gelombang penambahbaikan seterusnya untuk apl iOS, bersama dengan mendesain semula laman web Pinterest dan apl Android, dan kami sedang mencari pereka yang lebih cemerlang untuk membantu menjadikannya berlaku.

Saya berharap anda adalah seperti yang teruja kerana kita tentang di mana ia akan berakhir.

-

Terima kasih kepada Adam Barton, Allen Williams, Arla Rosenzweig, Andrea Burbank, Austin Chang, Austin Louden, Bill Kunz, Brendan Ryan, Bin Liu, Chris Danford, Changshu Liu, Chunyan Wang, Connor Montgomery, Dan Lurie, Eusden Shing, Evan Sharp, Evan Thomas, Huy Nguyen, Frank Fumarola, Garrett Moon, George Liu, Gordon Chen, Jason Costa, Jeff Ferris, Jenny Liu, John Milinovich, June Andrews, Leo Liu, Leon Lin, Levi McCallum, Lukas Blakk, Luke Zhao, Maura Lynch, Max Gu, Michael Schneider, Nicole Hedley, Nipoon Malhotra, Rahul Malik, Ricky Cancro, Rocir Santiago, Romi Phadte, Samuel Hsiung, Scott Goodson, Seth Weisfeld, Steven Ramkumar, Steven Walling, Trevor Pels, Vincent Tian, ​​Vivian Qu, Wendy Lu, Yu Yang, Yuchen Liu, Yuliang Lin, Yunnan Wu kerana membuat ini berlaku.

-

Andreas