Adobe Portfolion suunnittelu

Marraskuussa 2015 puhuin hieman Kuvataiteen koulu (SVA) New Yorkissa Adobe Portfolion suunnittelusta ja tuotesuunnittelusta. Sinä pystyt katsele puhetta täällä . Alunperin kirjoitin tämän artikkelin valmistellessani puhetta, mutta sen jälkeen sen julkaiseminen on laajentunut. Tavoitteena on tuottaa tuote, jakaa oivalluksia suunnitteluprosessiin, skannata sketchbookistani ja joitakin silmälaseja / malleja kulissien takaa. Toivottavasti mielestäsi on mielenkiintoista.

Pikku intro.

Hei minä olen Andrew . Olen johtava tuotesuunnittelija ja luova johtaja Adobe Portfolio . Aion kertoa teille, mitä minä ja suuri joukko kehittäjiä Behance (Adobe) ovat työskennelleet viime vuoden aikana.

Adobe Portfolio -markkinointi

Mikä on Adobe Portfolio?

Pohjimmiltaan se on tuote, jonka avulla voit nopeasti ja yksinkertaisesti luoda verkkosivuston esittelemään työsi ja muokata sitä tyylisi ja tarpeiden mukaan. Se ei ole uusi käsite, siellä on kymmeniä tuotteita, jotka tekevät juuri niin. Mutta salkussa on joitain keskeisiä eroja:

• Se on suunniteltu erityisesti mainoksiin, jotta ne voivat esitellä salkkunsa. Se tarkoittaa sitä, mitä tarvitset sen tekemiseen yksinkertaisesti ja nopeasti.
• Se on ilmainen kaikissa Adobe Creative Cloud -suunnitelmissa.
• Voit käyttää kaikkia Typekitin kirjasimia, joita voit käyttää sivustossasi.

Portfolio synkronoi Behancein kanssa.

Portfuusin ainutlaatuinen seikka on se, että se synkronoi Behancein kanssa. Ajatuksena on, että luot kaunis, mukautettu verkkosivusto Portfoliolla ja synkronoi hankkeet Behance-profiilisi kanssa. Siellä voit saada arvokasta altistumista työstään luovan mainosfoorumin avulla, jota käyttävät miljoonat mainokset ja ihmiset, jotka rekrytoivat mainoksia! Mutta sinun ei tarvitse käyttää Behaniaa, jos et halua - voit käyttää salkkua itsenäisesti ja päättää olla synkronoituna Behancein kanssa. Päätös on sinun.

Matthias Heiderichin valokuvaus - kuten nähdään salkku ja Behance

Responsive layouts.

Kuten minkä tahansa sivuston rakentaja, tarvitset lähtökohdan. Joten yksi niistä monista asioista, joita meidän oli suunniteltava, olivat ulkoasut, jotka suunniteltiin nimenomaan luovan työn näyttämiseksi, toimimaan pohjana, jonka avulla voit helposti muokata ja täyttää projektit.

Asettelujen tarkoituksena on kattaa erilaisia ​​tyylejä, jotka sopivat erilaisille luoville aloille. Niitä voi käyttää joko off-the-shelf-ratkaisuina, joka täyttyy nopeasti projekteidesi kanssa ja julkaisee sivuston (minuutteina) tai käyttää editorin ominaisuuksia muuttaaksesi tyylisi ja rakenteesi sopivan rakenteen.

Voit helposti muokata samaa ulkoasua niin, että se näyttää hyvin erilaiselta. Mukana valokuvaus Bryce Johnson

Alla on aloituskohdat, jotka käynnistämme. Alkuperäiset asettelut (julkisen betonisalkun ja tuotteen käynnistämisen osalta) ovat hyvin yksinkertaisia, keskittyen projektin katteisiin, gallerioihin ja projekteihin. Tuotetta tietenkin kasvaa tarjoamaan enemmän ominaisuuksia, kuten koko näytön kuvaruudut, HTML & CSS -muokkaus, blogien integrointi jne. Ajoissa. Ja kun ominaisuudet laajenevat, niin myös valikoima ja asettelujen määrä voi valita lähtökohdaksi.

Layouts ja mainokset, joista heidät on nimetty: lina , Sahanpuru , Matthias , Juco , mercedes ja Thomas

Valitsimme nimikkeiden ulkoasun mainosten jälkeen Behance . Lyhyen listan mainokset, joiden työ sopi hyvin tiettyyn ulkoasuun, ja tietysti myös visuaalisesti upea.

Minun on sanottava, että nämä ulkoasut olivat yksi viimeisistä suunnitelluista asioista (pre-beeta), mutta minä johdan heidän kanssaan tämän artikkelin vuoksi, esitelläkseni, mitä tuote tekee tai ainakin sen 'lopputuote'.

Editoija.

Tuotteen (itse) avulla käyttäjän on voitava nopeasti ja yksinkertaisesti muokata verkkosivustoaan käyttämällä yhtä edellä olevista kuvioista lähtökohtana. Käyttöliittymä on hyvin pieni - se irtautuu ja voit keskittyä verkkosivustosi suunnitteluun. Kaikki tekemäsi muutokset tapahtuvat editoriin.

Se kuulostaa hyvältä, mutta minulla oli kolme asiaa suunniteltaessa kaikkea brändistä, markkinointisivustosta ja erityisesti toimituksesta:

Sen pitäisi antaa käyttäjälle mahdollisuus:

• Voit helposti muokata mitä he näkevät.
• Hallitse ja lisää sisältöä.
• Tarkastele verkkosivustoaan tarkasti.
• Julkaise ja päivitä live-sivusto.

Alla on useita muokkaustilanteita tuotteesta (editori):

Eri näytöt editorista. Mukana valokuvaus Chris Burkard ja design by Andrew Couldwell

Tuotesuunnittelijan rooli.

Oma rooli salkun suunnittelija muuttui melko dramaattisesti vuoden aikana, konseptista käynnistää. Digitaalisen tuotteen edetessä, niin myös sinun rooli tuotesuunnittelijana. Joten palata alkuun:

ProSite.

Salkku on itse asiassa olemassa olevan Behance-tuotteen kehittyminen (eläkkeelle siirtyminen), jota kutsutaan nimellä ProSite. Se on 5-vuotias, joten paljon voisimme oppia tuosta tuotteesta: Mikä toimi hyvin? Mitä ei?

Behance-verkosto.

Lisäksi, mitä olemme oppineet luova yhteisö ja esitellä työtä, suunnittelemalla, kurkistamalla (ja käyttämällä!) Behance-verkostoa, on arvokas ymmärrystä siitä, kuinka rakentaa tuotetta kuten Portfolio.

Joten vietin paljon aikaa absorboimaan kaikki tämän tiedon, jonka Behance oli hankkinut vuosien varrella, ja tutkimalla myös ProSiten kehitystä. Kysyä kysymyksiä. Muistiinpanojen tekeminen. Piirrä ideoita.

Behance Network ja ProSite

Aloitan aina kynällä ja luonnoksella.

Kirjoittaminen ja luonnos todella auttavat minua keskittymään, ja ideoita virtaa sinne. Joskus kirjoitan vain sanoja, jotka liittävät tuotteeseen tai luetellaan sen mitä tarvitsee tehdä, vain päästäkseni pois päältäni. Se auttaa häiritä mieli ja keskittyä siihen, mikä on tärkeää.

Tämä sketchbook-työ toimii luonnollisesti UI-piirroksina. Joskus piirrän ominaisuuden tai pienen käyttöliittymän yksityiskohtia tai uutta lähestymistapaa käyttöliittymään kokonaan. Se on nopea tapa puhtaasti ja yksinkertaisesti suunnitella ja tutkia ideoita. Ehkäpä kaikkein tärkeintä, et saa häiritä pikselin täydellisyyttä, fontteja, värejä, verkkoja, oppaita jne. ... kuten käytät tietokoneohjelmistoa käytettäessä.

On aina olemassa asia, kun tiedät, että sinulla on tarpeeksi ottaa se askeleen pidemmälle ja aloittaa itse nämä ajatukset. Aikaisemmin olen käyttänyt Adobe Illustratoria tai Omnigraffle tätä varten rautalangaan. Mutta aika oli tiukka projektissa, joten menin suoraan Photoshopiin.

Alla on joitain skannauksia minun sketchbook. Jotkut liittyvät tuotteen (toimittaja), jotkut markkinointi sivusto ja merkki:

Muutamia skannauksia minun sketchbook

Mielenkiintoinen kuva, joka on edellä mainittu, on viimeinen (ala-oikea). Näet, että luonnokseni on lähellä sitä, mitä olen lopulta suunnitellut.

Concepting & prototyping.

Kaikki nämä ideat ja mallit ovat tietoisia ja kehitetty käsitteellistämisellä, prototyypillä ja keskustelemalla tiimin kanssa. On hyvä keskustella ideoiden kautta muiden suunnittelijoiden ja kehittäjien sekä jopa kohdeyleisön kanssa, kun mahdollista. Esimerkiksi: Eräs erityinen ajatus tuli minulta keskustelemaan varhaisesta (tuotesuunnittelusta) MFA: n kuvaoppilaan kanssa SVA . Uusi näkökulma auttaa aina erityisesti tämän monimutkaisen tuotteen ansiosta.

Teimme töitä melko tiukalle aikataululle. Yksinkertaisesti ei ollut aikaa rakentaa monimutkaisia ​​prototyyppejä. Mutta mitä tein, oli luoda useita PDF-läpiviennuksia käyttämällä Layer Comps -ohjelmistoa Photoshopissa, jolloin hiiren osoitin liikkuu ruudun ympärillä ja osoittaa jokaisen vuorovaikutuksen, ominaisuuden ja käyttäjän virtauksen tuotteessa. Nämä sallivat kehittäjät (ja muut sidosryhmät) kritisoimaan ja / tai ymmärtämään kaikkia toimintoja ja käyttäjän virtausta - niin he tiesivät, mitä on tarkoitus rakentaa ja tunnistaa UI / UX: n mahdolliset puutteet ennen rakentamista ja testausta.

Alla on esimerkki näistä PDF-läpäisyistä (video):

Prototyyppi / läpivienti, joka näyttää projektin muokkaajan globaalin räätälöinnin

Yksityiskohtainen suunnittelu.

Yksinkertaisesti sanottuna: Ota arvailuja pois kehittäjille. Tiimisi on ymmärrettävä, mitä on rakennettava. Ei ole heidän tehtävänsä täyttää aihiot, tehdä se herkäksi tai arvailla mitä tapahtuu missä tahansa skenaariossa. En ymmärrä tätä tarpeeksi - olen kokenut niin paljon suunnittelijoita, jotka suunnittelevat ja harkitsevat 20% tuotteesta, eivätkä ajattele asioita.

Käyttäjän virtoja ja prototyyppejä, joita puhuin aikaisemmin, haluan myös luoda yksityiskohtaiset tiedot kaikista käyttöliittymän komponenteista, ominaisuuksista ja brändistä. Minusta tuntuu, että nämä ovat tärkeitä, kun sinulla on suuri joukko, joten kaikki ovat samalla sivulla, jossa on yksi keskeinen viitekohta. Tarkastusten tarkoituksena on kattaa kaikki skenaariot, rollover-tilasta virheisiin, aktiivisiin / ei-aktiivisiin tiloihin jne. ... sekä kattaa myös px-arvoja ja -määriä (edes mennään jopa perus-CSS: n mukana).

Mitä yksityiskohtaisempia piirroksia sisällytetään malleihisi, sitä vähemmän kehittäjien kysymyksiä, ja sitä vähemmän aikaa, kun käytät rakennuksen hallintaa. Voit siis keskittyä tuotteen suunnitteluun, testaukseen ja parantamiseen.

Myös mukava asia, kun otat aikaa näiden UI-sarjojen luomiseen, on se, että tuote (design) on helpompi päivittää tulevaisuudessa. Sinun ei tarvitse päivittää satoja mallistoja, vaan päivität tiedot.

Seuraavassa on muutamia esimerkkejä näistä styleguideista ja -peilistä:

Markkinointi ja brändi.

Kuukausia, nyt, kun tuote (toimittaja) on suunniteltu ja rakennetaan, keskityin uudelleen markkinointiin, alustamoon ja brändiin. Mikä tämä tuote on? Miten aloitat sen käytön? Se tarvitsi ääntä. Identiteetti.

Nimi.

Kun ensimmäisen kerran liittyi Behanceiin, tätä projektia kutsuttiin jossain leikillään "Prosite 2.0" sisäisesti. ProSite-tuote palvelee aikansa, mutta sen seuraaja oli kasvanut eri petoon. Behance-yhteyden lisäksi ne olivat hyvin erilaisia ​​tuotteita ja niillä ei ollut 1: 1-korrelaatiota. Tämä ei ollut uudelleensuunnittelu / käynnistys. Rakensimme jännittävän uuden tuotteen alusta lähtien ja poistimme ProSiten. Se oli tärkeää välittää - ja se alkaa nimestä.

Menin takaisin sketchbookiin ja käyn läpi sanayhdistysliikkeen, jossa kirjoitin kaiken tämän tuotteen ja minkä kielen kaikki markkinoilla olevat samankaltaiset tuotteet käyttivät. Kaikki näiden luonnollinen eteneminen jatkui takaisin "Portfolio". Joten jonkin ajattelun jälkeen päätin: "Miksi ei ?!" - se tekee täsmälleen mitä se sanoo tina. Se on sivuston luoja / editori, joka on suunniteltu erityisesti salkun luomiseen. Nimen yksinkertaisuus ja rohkeus meni naimisiin hyvin tuotteen suunnittelun ja arvojen mukaan. Ja niin kutsuttiin sitä "Portfolio", joka tuli pian "Adobe Portfolio" sopivaksi Adobe-sarjan tuotteisiin.

Markkinointisivuston kotisivu, jossa on valokuva Tanya Timal

Brändi.

Portfoliolla on hyvin oma identiteetti ja persoonallisuus. Salkku ei ole yrityksen tuote (niin sanotusti). Se on valkoista etikettiä. Se on sinun, tehdä omasi. Se on ystävällistä, yksinkertaista ja lähestyttävää. Brändi, markkinointipaikka, alustaminen, copywriting ja viestintä koko (tuotteen) käyttökokemuksen kautta yrittävät välittää tämän käytetyn kielen, typografian, ruudukon, kuvan ja värit.

Muita skenaarioita ovat helppokätiset viestit ja huumorikuvat. Projektikuva dua - Alexander Esslinger

Responsive design.

Palautetaan aikaisempiin asioihin suunnittelun yksityiskohdista: Web-suunnittelussa, samoin kuin tuotesuunnittelussa, pitäisi kiinnittää huomiota yksityiskohtiin. Tässä tapauksessa tietenkin on tärkeää, että markkinointialue on reagoiva, mutta kehittäjien tehtävänä ei ole selvittää, miten verkkosivusto vastaa eri näytön kokoilla.

Seuraavassa on muutamia esimerkkejä reagoivista malleista, jotka toimitetaan kehittäjille myportfolio.com :

Markkinointisivustosta vastaava muotoilu, joka näyttää aikaisemman version brändin identiteetistä

Katso a Täydellinen tapaustutkimus markkinointipaikasta täällä

Responsive malleja pari asetteluja, jotka kattavat eri skenaarioita

Katso a Täydellinen tapaustutkimus täältä

Käyttäjän testaus.

Digitaalisen tuotteen pitäisi kehittyä käyttäjien käyttäytymiseen sopivaksi, käyttäjien käyttäytymisen huomioon ottamiseksi, jotta se antaisi parhaan käyttökokemuksen. Ihannetapauksessa tuotteet siirtyvät alfa / beta-vaiheen läpi (rajoitetut julkaisut) ennen kuin ne julkaistaan ​​kaikille. Teimme tämän Portfoliolla. Tämä auttoi meitä poistamaan kysymyksiä, oppimaan, jos UI / UX "toiminut" ja saamaan todellista käyttäjäkysymystä tuotteen parantamiseksi. On parasta testata, oppia ja tarkentaa rajoitetulla käyttäjäryhmällä kuin käynnistää tuhansille / miljoonille ihmisille ja löytää ongelmia, kun se on liian myöhäistä.

Testata. Oppia. Tarkistaa. Toistaa.

Tämä on tärkeää tuotesuunnittelussa. Opit niin paljon ihmiseltä, joka käyttää tuotetta.

Sinut hämmästyttää mitä huomaat:

... Ihmiset eivät aina käytä tuotetta, miten he odottivat heitä!

• Opit,
• Parannat,
• Te iteraat tuotteessa,
• Pidät testauksen,
• Ja toista tämä prosessi.

Ja rehellisesti, joskus tuntuu hieman näin:

... Mutta tuote on parempi sille.

Tiivistettynä.

Jos ottaisin kaiken pois tästä, se olisi:

Hidasta.

Hanki inspiraatiota. Ymmärtää yleisösi. Tehdä muistiinpanoja. Luo ideoita.

Konsepti.

Työskentele tiimisi kanssa. Tutki ideoita. Ajattele sitä läpi.

Yksityiskohtainen suunnittelu.

Joku (muu) tarvitsee rakentaa mitä suunnittelette.

Testaa ja paranna.

Toimiiko se? Kuinka sitä voidaan parantaa? Sitä voidaan aina parantaa.

Oppia.

Aina. Jokainen suunnittelun kokemus on hyvä oppimiskokemus.

[- Tämä artikkeli lähetettiin alunperin osoitteeseen Medium.com , julkaistu uudelleen tekijän luvalla -]

• ← Uber aloittaa uudella Brand Identityllä
• Lomien suunnittelu →