Pinteresti ümberkujundamine, plokkide kaupa

Kui ma olin Rootsis kasvanud laps, olid mu tuba täis klassikalisi BRIO disainitud puidust mänguasju. Mäletan, et mind paelusid lihtsad kujundused, erksad värvid ning abstraktsete geomeetriliste kujundite ja orgaaniliste vormide segu. See, kuidas nad välja nägid ja liikusid, kutsusid teid mängima nendega.

Eriti suurepärane oli puidust rongisüsteem. Rajatised võiksite ringidesse, sirgetesse sirgetesse, s-kõveratesse sobitada, mida iganes soovisite. Kuid marsruutide loomisel pidi olema läbimõeldud - loogika selle järgi, kuidas tükid omavahel kokku sobivad, ei saanud te geomeetriat sundida.

Mõni kakskümmend aastat hiljem mängivad mu enda lapsed nende lapsepõlvest pärit samade säilmetega. Kuulen neid praegu nende toa puitpõrandale koputamas. Kestvad kujundused on vastu pidanud aastate ja põlvkondade muutuste vältel.

See BRIO imeline iseenesestmõistetav lihtsus oli mul meeles eelmisel kevadel, kui ma esimest korda hakkasin keskenduma suurele probleemile, mis oli välja kujunenud Pinteresti kujunduse abil. Tegelikult 3 suurt probleemi.

  1. Meie kasutajaliides oli ebajärjekindel
  2. Meie visuaalsüsteem jäi seisma
  3. Meie turundus tundus meie tootest lahus

Aastate jooksul olid kõik meie veebisaidi, rakenduste ja turunduse kujundused hakanud triivima, nii et nad ei tundnud enam, et neil on sama isiksus. Samuti oli lisatud mitmeid uusi funktsioone ilma selge visioonita, kuidas need üldisesse disaini sobivad, nii et liides oli hakanud tunduma segaduses ja raskesti mõistetav. Puudus visuaalne hierarhia ega süsteem, mis aitaks teil aru saada, mis oli ükskõik millise lehe vaatamisel oluline. Selle tulemusel kadusid kõik inspireerivad ideed, mille inimesed Pinteresti kaudu salvestavad - meie kogemuse kõige olulisem osa - ära.

Nagu selgub, on neetud raske kujundada mõõtkavas järjepidevaid ja kauneid asju.

Põhimõtete küsimus

Pinteresti kogemus tervikuna vajas tõsist lihtsustamist ja ühendamist. Ja kui me kavatseme seda teha, siis pidime leidma enda jaoks mõned kujunduspõhimõtted.

Taganesin Pinteresti keldri pimedasse nurka ja veetsin järgmised nädalad disainilahendustega mängides. Ma polnud alguses isegi kindel, mida ma teen - põhimõtteliselt oli see nagu minu enda välja kasvanud versioon koos plokkide löömisest. Hakkasin mõtlema sellistele küsimustele nagu: Miks inimesed Pinteresti armastavad? Mis teeb meie toote ainulaadseks? Milline on meie isiksus? Millest me kõik räägime?

Mida rohkem ma selle peale mõtlesin, seda enam mõistsin, et Pinteresti olemus sarnaneb palju mu pere armastatud BRIO mänguasjade kollektsiooniga. Mõlemad julgustavad teid mängima erinevate võimalustega, ühendama tükid omavahel ja looma oma maailma. Võite alustada omaenda eesmärkidest ja projektidest, samuti võite saada inspiratsiooni sellest, mida keegi teine ​​teeb, ja selle üles ehitada. Hüppa sisse ja hakka kohe mängima, peata igal ajal, kui tahad, tule siis tagasi ja tõsta üles otse sinna, kus pooleli jäi.

Mõtlemist veelgi kaugemale ajades lasksid olulised omadused, mida Pinterest ja BRIO jagasid, kokku 3 lihtsat põhimõtet. Need kirjeldasid Pinteresti tänapäevaseid parimaid omadusi ja panid aluse sinna, kuhu me toote tulevikus tahame viia.

-

  1. Lucid

See on intuitiivne, mitte õpitud
 Saate aru, kuidas asjad töötavad ilma otsese seletuseta.

See paneb kasutaja end võimsana tundma
Miski ei lase teil end ebamugavalt tunda ega saa süsteemi usaldada. Süsteem pakub teile sobivaid komponente ja küsib, mida edasi teha.

See muudab sisu maitse paremaks
Raamistik on täiesti õmblusteta ja varjatud. Te ei pane seda tähele enne, kui olete sellega suhelnud. Selle asemel, et sundida teid teile, saate otsustada, milleks soovite.

2. Animeeritud

See on värvikas
Isiksus on julge ja paistab silma.

See on visuaalselt reageeriv
Kogemused mõjutavad füüsiliselt.

See on ootamatu
Kogemus on mänguline ja lõbus, kuid mitte kunagi üle jõu käiv.

3. purunematu

See on loodud uurimiseks
Nii nagu laste mänguasja, soovite seda proovida, et näha, mis juhtub. Mida rohkem uurite, seda kiiremini saate teada ja seda rohkem saate vastutasuks.

Vale puudutamine on võimatu
Kõik on loodud selleks, et hõlpsalt navigeerida ja teha täpselt seda, mida arvasite.

See on pöörduv
Kui teete kogemata midagi, mis ei anna soovitud tulemusi, on ilmne, kuidas seda parandada.

-

Kui me need 3 põhimõtet blokeerisime, oli järgmine samm tõlkida need millekski käegakatsutavaks, mis võiks potentsiaalselt olla aluseks kõigele, mille me edasi ehitasime.

Põhitõed

Kujundid - me kasutame põhilisi ja puutetundlikke kujusid, millest inimesed loomulikult aru saavad ja millega suhelda tahavad. Nurgad on ümardatud, et nad oleksid paremini ligipääsetavad.

Värvid - olen suur sarnaste värviskeemide fänn. Nad tunnevad end väga loomulikult ja kajastavad rahulikkust. Kui ühendada paar erinevat analoogset värvilahendust, mis algselt põhinesid mõnel antud täiendaval värvil, on tulemus väga huvitav ja ootamatu.

Hierarhia - kõik on äärmiselt hierarhiline, seega on alati selge, mis on kõige olulisem. Kujundades küsime endalt, mis on siin kõige olulisem, et keegi aru saaks? Mida saaksime eemaldada, et asi veelgi ilmsemaks muuta?

Valge ruum - vanas Pinteresti kujunduses keskenduti konteineritele, mis ümbritsesid inimeste sisu, mis ületas sisu ise. Kõik, mida te nägite, oli palju jooni, kaldeid, halli varjundit. Hingamiseks polnud ruumi. Valge ruumi tutvustamine annab elementide vahel loomuliku eralduse ilma visuaalset müra lisamata. Tulemus on tasakaalustatud ja struktureeritud ning tühimiku hulk lisab isikupära ja mõju.

Varased uurimused ja ideed

Tahtsime näha, mis juhtuks, kui me lihtsalt eemaldaksime kõik konteinerid UI-st. Kas fookus naaseb objektidele endile või kukub kogemus täielikult ära?

Selgub, et tulemuseks olev mahutiteta võrk tundus suurepärane ning lõpuks oli taas rõhk ideedele, mida inimesed Pinteresti kaudu säästsid. Me ei kaotanud konteinereid täielikult, kuna need aitavad selgitada, milline teave millise kujutisega kaasneb. Selle asemel ootame konteineri kuvamist, kuni olete piisavalt uudishimulik, et seda koputada. Nii õpetab liides visuaalselt teile, kuidas teave on meie süsteemis ühendatud ja grupeeritud. Seda suhtlust peate kogema ainult üks kord, et mõista, kuidas nööpnõel üles ehitatakse.

Uue standardikomplekti väljatöötamine

Pärast paar kuud väldanud disainilahenduste ja interaktsioonide mängimist saime koos meeskonnaga lõpuks asjad paika, kus tundsime, et kõik meie tootedisaini põhimõtted (selged, animeeritud, purunematud) on esindatud. Olime valmis oma vastloodud põhimõtted ja disainisüsteemi proovile panema.

Tahtsime alustada suletud süsteemiga, nii et otsustasime kõigepealt tegeleda meie iOS-i rakendusega. Esimese läbimise jaoks keskendusime visuaalsele kujundusele - infarhitektuuri ümbertegemine tuleb hiljem. Siit saate lugeda kõike juhtmevaba iOS-i ümberkujundamise ja koordineeritud taustaprogrammi ümberehituse kohta.

Koos rakenduse ümberkujundamisega lõime ka nn Pinterest'i tootedisaini standardid, mis hõlmavad järgmist:

Süsteem - kujundid, tüpograafia, värvid, ruudustik
Struktuur - komponentide paigutus
Keskkond - kõik väikesed kujundused maailmast, mida me kujundame

Järgmised 9 kuud veetsime iga komponendi ehitamiseks tihedas koostöös inseneriga ning tegime selle käigus palju muudatusi ja muudatusi. See on olnud uskumatu koostöö, mis tagab, et kõik, mis me koos ehitasime, ei vasta mitte ainult meie disaini eesmärkidele, vaid on korduvkasutatav ja väärtuslik kõigile teistele Pinteresti tootetehnoloogia meeskondadele.

Allpool on toodud vaid mõned viisid, kuidas meie uued disainistandardid on Pinterestis kujunenud.

Eepiline meeskond, kes selle teoks tegi

Päris palju oli kogu Pinteresti tootekujundusmeeskond seotud uue kujundussüsteemi kontrollimise ja juurutamisega.

Meil oli ka väike meeskond pragude kujundajaid (Annie Teng, Jay Marsh, Kimberly Fellman, Linus Wahlstedt, Long Cheng, Patrik Goethe, Rick Chatas, Susan Kare, Tom Watson, Woosung Kang), kes tegid tihedat koostööd minuga ja meie suurepäraste inseneridega korrata koos disainimisotsuseid, leida õigeid üleminekuid ja kõveraid, protesteerida erinevaid žeste jne. See oli protsessi parim osa. Meeskondadevaheline koostöö, mis hõlmas tagasisidet mitmest vaatenurgast (protsess, mida Pinteresti nime all nimetatakse kudumiseks), tegi tulemused plahvatuslikult tugevamaks. Meil oli ka väga lõbus.

Ja viimasena, tegin tihedat koostööd Pinteresti bränditiimiga, et luua uusi brändijuhiseid, mis kajastaksid neid samu kujunduspõhimõtteid. Meie uusim turundus on juba hakanud tunduma, nagu see jagaks meie tootega sama häält.

Järgmisena tegeleme iOS-i rakenduse järgmise paranduste lainega, koos Pinteresti veebisaidi ja Androidi rakenduse ümberkujundamisega ning otsime veelgi rohkem tähekujundajaid, kes aitaksid seda teostada.

Loodan, et olete sama põnevil kui meie, kuhu see kõik jõuab.

-

Tänu Adam Bartonile, Allen Williamsile, Arla Rosenzweigile, Andrea Burbankile, Austin Changile, Austin Loudenile, Bill Kunzile, Brendan Ryanile, Bin Liule, Chris Danfordile, Changshu Liule, Chunyan Wangile, Connor Montgomeryle, Dan Luriele, Eusden Shingule, Evan Sharpile, Evany Thomas, Huy Nguyen, Frank Fumarola, Garrett Moon, George Liu, Gordon Chen, Jason Costa, Jeff Ferris, Jenny Liu, John Milinovitš, June Andrews, Leo Liu, Leon Lin, Levi McCallum, Lukas Blakk, Luke Zhao, Martin Jiang , 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 selle juhtumise eest.

-

Andreas