Projektowanie portfolio Adobe

W listopadzie 2015 r. Odbyłem krótką rozmowę na ten temat Szkoła Sztuk Wizualnych (SVA) w Nowym Jorku na temat projektowania Adobe Portfolio i projektowania produktu. Możesz patrz na rozmowę tutaj . Pierwotnie napisałem ten artykuł w ramach przygotowań do przemówienia, ale od tego czasu rozszerzyłem go o publikację tutaj. Ma on na celu wprowadzenie produktu, udostępnienie wglądu w proces projektowania, skany z mojego szkicownika oraz niektóre specyfikacje / projekty zza kulis. Mam nadzieję, że uznasz to za interesujące.

Trochę intro.

Witaj, jestem Andrzej . Jestem głównym projektantem produktu i dyrektorem kreatywnym firmy Adobe Portfolio . Zamierzam podzielić się z Wami tym, co ja i świetny zespół programistów w Behance (Adobe) pracowaliśmy nad tym rokiem.

Witryna marketingowa Adobe Portfolio

Czym jest Adobe Portfolio?

Zasadniczo jest to produkt, który pozwala szybko i prosto stworzyć stronę internetową, aby zaprezentować swoją pracę i dostosować ją do swojego stylu i potrzeb. To nie jest nowa koncepcja, istnieją dziesiątki produktów, które właśnie to robią. Ale Portfolio ma kilka kluczowych różnic:

• Został zaprojektowany specjalnie z myślą o kreacjach, które prezentują swoje portfolio. Oznacza to, że robi to, czego potrzebujesz, w prosty i szybki sposób.
• Jest to DARMOWE z wszystkimi planami Adobe Creative Cloud.
• Możesz uzyskać dostęp do całej biblioteki czcionek Typekit, aby użyć jej w swojej witrynie.

Portfolio synchronizuje się z Behance.

Sprawą, która sprawia, że ​​Portfolio jest najbardziej unikalne, jest synchronizacja z Behance. Pomysł polega na tym, aby stworzyć piękną niestandardową witrynę internetową z Portfolio i zsynchronizować swoje projekty z profilem Behance. W ten sposób zyskasz nieocenioną ekspozycję swojej pracy na kreatywnej platformie wykorzystywanej przez miliony kreacji i ludzi rekrutujących kreacje! Ale nie musisz używać Behance, jeśli nie chcesz - możesz używać Portfela na własną rękę i nie synchronizować z Behance. Wybór nalezy do ciebie.

Fotografia Matthiasa Heidericha - jak widać Teczka i Behance

Responsywne układy.

Jak każdy program do tworzenia stron WWW, potrzebujesz punktu wyjścia. Jedną z wielu rzeczy, które musieliśmy zaprojektować, były układy zaprojektowane specjalnie do prezentowania pracy twórczej, które mają być podstawą do łatwego dostosowywania i wypełniania projektów.

Układy mają na celu pokrycie różnych stylów, aby dopasować się do różnych dziedzin twórczości. Można je wykorzystać jako gotowe rozwiązanie, aby szybko wypełnić swoje projekty i opublikować stronę internetową (w ciągu kilku minut) lub użyć funkcji edytora, aby zmienić strukturę i wygląd, aby pasowały do ​​Twojego stylu.

Z łatwością dostosuj ten sam układ, aby wyglądać zupełnie inaczej. Fotografowanie według Bryce Johnson

Poniżej znajdują się układy, z którymi uruchamiamy. Wstępne układy (do publicznej premiery wersji beta i produktu) są bardzo proste, koncentrując się na okładkach projektów, galeriach i projektach. Produkt będzie oczywiście rozwijał się, oferując więcej funkcji, takich jak obrazy na pełnym ekranie, edytowanie HTML i CSS, integracja blogu itp. W odpowiednim czasie. Wraz z rozszerzaniem się funkcji zmienia się także różnorodność i liczba układów do wyboru jako punkt wyjścia.

Układy i kreacje, do których są nazywane: Lina , Trociny , Matthias , Juco , Mercedes i Tomasz

Wybraliśmy nazwy układów po włączeniu kreacji Behance . Wybraliśmy kreacje, których praca dobrze pasowała do określonego layoutu i oczywiście była również wizualnie oszałamiająca.

Powinienem powiedzieć, że te układy były jedną z ostatnich rzeczy do zaprojektowania (pre-beta), ale prowadzę je z myślą o tym artykule, aby przedstawić wam, co robi produkt, a przynajmniej jego 'produkt końcowy'.

Edytor.

Produkt (sam w sobie) musi umożliwiać użytkownikowi szybką i prostą edycję strony internetowej, wykorzystując jeden z powyższych układów jako punkt wyjścia. Interfejs użytkownika jest bardzo mały - znika z drogi i pozwala skupić się na projekcie witryny. Wszystkie zmiany, które wprowadzasz, żyją w edytorze.

Brzmi to trochę dziwnie, ale miałem na myśli trzy rzeczy, projektując wszystko od marki, strony marketingowej, a zwłaszcza od wydawcy:

Powinno to umożliwić użytkownikowi:

• Łatwo edytuj wszystko, co mogą zobaczyć.
• Zarządzaj i dodawaj treści.
• Responsywnie przeglądaj swoją witrynę.
• Opublikuj i zaktualizuj witrynę na żywo.

Poniżej znajduje się zakres scenariuszy edycji z produktu (edytor):

Różne ekrany od edytora. Fotografowanie według Chris Burkard i zaprojektuj według Andrew Couldwell

Rola projektanta produktu.

Moja rola projektanta w Portfolio zmieniła się dramatycznie w ciągu roku, od pomysłu do premiery. Wraz z rozwojem produktu cyfrowego, tak samo jak twoja rola jako projektanta produktu. Aby wrócić do początku:

ProSite.

Portfolio jest ewolucją istniejącego produktu Behance (wycofanego) o nazwie ProSite. Ma 5 lat, więc było wiele rzeczy, których mogliśmy się nauczyć z tego produktu: co działało dobrze? Co nie?

Sieć Behance.

Co więcej, dowiedzieliśmy się o społeczności twórców i pokazujemy pracę, poprzez projektowanie, opiekowanie się (i używanie!) Sieci Behance jest nieoceniona w zrozumieniu, jak zbudować produkt, taki jak Portfolio.

Spędziłem więc sporo czasu, absorbując całą tę wiedzę, którą Behance nabył przez lata, a także studiując ich wstępne projekty ewolucji ProSite. Zadawać pytania. Robienie notatek. Szkicowanie pomysłów.

The Behance Network i ProSite

Zawsze zaczynam od ołówka i szkicownika.

Pisanie i szkicowanie naprawdę pomaga mi skupić się, a pomysły płyną stąd. Czasem po prostu piszę słowa, które kojarzę z produktem, lub spisuję, co trzeba zrobić, po to, by wyrwać mi to z głowy. Pomaga rozładować umysł i skupić się na tym, co ważne.

Ten szkicownik działa naturalnie w szkice interfejsu użytkownika. Czasami całkowicie szkicuję funkcję lub mały interfejs użytkownika lub nowe podejście do interfejsu użytkownika. To szybki sposób na proste i proste projektowanie i odkrywanie pomysłów. Co najważniejsze, nie rozpraszają Cię perfekcja pikseli, czcionki, kolory, siatki, prowadnice itp. ... tak jak w przypadku korzystania z oprogramowania komputerowego.

Zawsze jest kwestia, kiedy wiesz, że masz wystarczająco dużo, by zrobić krok dalej i faktycznie zacząć czerpać z tych pomysłów. W przeszłości używałem Adobe Illustrator lub Omnigraffle do tego, do modelu szkieletowego. Ale czas był napięty w tym projekcie, więc poszedłem prosto do Photoshopa.

Poniżej kilka skanów z mojego szkicownika. Niektóre odnoszą się do produktu (redaktor), niektóre do strony marketingowej i marki:

Kilka skanów z mojego szkicownika

Ciekawym obrazem, który można wskazać powyżej, jest ostatni (prawy dolny róg). Możesz zobaczyć, że mój szkic jest bliski temu, co ostatecznie zaprojektowałem.

Koncepcje i prototypowanie.

Wszystkie te pomysły i projekty są informowane i ewoluowane poprzez koncepcję, prototypowanie i dyskusję z zespołem. Dobrze jest rozmawiać o pomysłach z innymi projektantami i programistami, a nawet z odbiorcami docelowymi, gdy tylko jest to możliwe. Na przykład: Jeden konkretny pomysł pochodził od mnie, omawiając wczesny (produkt) projekt z studentem ilustracji MSZ SVA . Świeża perspektywa zawsze pomaga, szczególnie dla produktu o tej złożoności.

Pracowaliśmy nad bardzo intensywnymi ramami czasowymi w tym projekcie. Po prostu nie było czasu na zbudowanie złożonych prototypów. Ale to, co zrobiłem, to stworzyć serię przeglądów PDF z wykorzystaniem Layer Comps w Photoshopie, pokazując kursor myszy poruszający się po ekranie, demonstrujący każdą interakcję, cechę i przepływ użytkownika w obrębie produktu. Pozwoliło to programistom (i innym zainteresowanym stronom) na krytykę i / lub zrozumienie całej funkcjonalności i przepływu użytkowników - dzięki czemu wiedzieli, co ma zostać zbudowane, a także zidentyfikowali potencjalne luki w interfejsie użytkownika / UX przed rozpoczęciem kompilacji i testowaniem.

Poniżej znajduje się (wideo) jeden z przykładów takich przewodników PDF:

Prototyp / instruktaż przedstawiający globalną personalizację w edytorze projektu

Szczegółowo w projekcie.

Po prostu: odejmij zgadywankę od deweloperów. Twój zespół musi zrozumieć, co należy zbudować. Ich zadaniem nie jest wypełnianie pustych miejsc, reagowanie na nie, ani odgadywanie, co dzieje się w danym scenariuszu. Nie mogę tego zbyt mocno wyolbrzymić - doświadczyłem tak wielu projektantów, którzy projektują i rozważają 20% produktu, a nie zastanawiają się nad tym.

Oprócz omówień, przepływów użytkowników i prototypów, o których mówiłem wcześniej, chciałbym również stworzyć szczegółowe specyfikacje dla wszystkich składników interfejsu użytkownika, funkcji i marki. Uważam, że są one ważne, gdy masz duży zespół, więc wszyscy są na tej samej stronie, z jednym centralnym punktem odniesienia. Specyfikacja ma na celu objęcie wszystkich scenariuszy, od stanów najazdu, do błędów, stanów aktywnych / nieaktywnych itp., A także obejmuje wartości i wymiary w pikselach (nawet sięgam do podstawowego CSS).

Im więcej detali uwzględnisz w swoich projektach, tym mniej pytań będą mieli programiści i im mniej czasu poświęcisz na zarządzanie kompilacją. Możesz skupić się na projektowaniu, testowaniu i ulepszaniu produktu.

Poza tym miło jest poświęcić czas na stworzenie tych "zestawów UI", ponieważ łatwiej jest zaktualizować produkt (projekt) w przyszłości. Nie trzeba aktualizować setek makiet, wystarczy zaktualizować specyfikację.

Poniżej kilka przykładów tych styleguide i specyfikacji:

Marketing i marka.

Już od miesięcy, wraz z zaprojektowaniem i budowaniem produktu (redaktora), ponownie skupiłem się na marketingu, wprowadzaniu na rynek i marce. Czym jest ten produkt? Jak zacząć go używać? Potrzebował głosu. Tożsamość.

Imię.

Kiedy po raz pierwszy dołączyłem do Behance, ten projekt był nieco żartobliwie nazywany wewnętrznie "Prosite 2.0". Produkt ProSite służył swoim czasom, ale jego następca wyrósł na inną bestię. Poza ich powiązaniem z Behance, były one bardzo różnymi produktami i nie miały korelacji 1: 1. To nie był projekt / uruchomienie. Zbudowaliśmy nowy ekscytujący produkt od podstaw i wycofaliśmy ProSite. To było ważne, aby przekazać - i to zaczyna się od nazwy.

Wróciłem do szkicownika i wykonałem ćwiczenie asocjacyjne, w którym zapisałem wszystko, co ten produkt zrobił, a także jakiego języka używał każdy podobny produkt na rynku. Naturalny rozwój tych wszystkich wciąż powracał do "Portfolio". Po pewnym pomyśle doszedłem do wniosku: "Dlaczego nie ?!" - robi dokładnie to, co mówi na puszce. Jest twórcą / edytorem strony internetowej zaprojektowanym specjalnie do tworzenia portfolio. Prostota i śmiałość nazwy dobrze pasują do projektu i wartości produktu. I tak nazwaliśmy to "Portfolio", które wkrótce stało się "Adobe Portfolio" i pasowało do pakietu produktów Adobe.

Strona główna witryny marketingowej ze zdjęciem wg Tanya Timal

Marka.

Portfolio ma bardzo dużo tożsamości i osobowości. Portfolio nie jest produktem korporacyjnym (że tak powiem). To biała etykieta. To jest twoje, aby zrobić własne. Jest przyjazny, prosty i przystępny. Marka, strona marketingowa, wprowadzanie na rynek, copywriting i przesyłanie wiadomości w całym doświadczeniu użytkownika (produktu) starają się przekazać to za pomocą języka, typografii, siatki, obrazów i kolorów.

Inne scenariusze to beztroskie przesyłanie wiadomości i humorystyczne obrazy. Zdjęcie projektu wg dua - Alexander Esslinger

Elastyczny projekt.

Wracając do mojego wcześniejszego punktu dotyczącego szczegółów w projektowaniu: projektowanie stron internetowych, podobnie jak projektowanie produktu, powinno zwracać taką samą uwagę na szczegóły. W takim przypadku ważne jest, aby witryna marketingowa była responsywna, ale zadaniem programistów nie jest ustalenie, w jaki sposób strona reaguje na różnych rozmiarach ekranu.

Poniżej kilka przykładów responsywnych projektów dostarczonych deweloperom do zbudowania myportfolio.com :

Responsywne projekty witryny marketingowej, ukazujące wczesną wersję tożsamości marki

Wyświetl a pełne studium przypadku witryny marketingowej tutaj

Reagujące projekty dla kilku układów, obejmujące różne scenariusze

Wyświetl a pełne studium przypadku układów

Testowanie użytkownika.

Produkt cyfrowy powinien ewoluować tak, aby odpowiadał ludziom, którzy go używają, uwzględniając zachowania użytkowników, aby zapewnić jak najlepszą obsługę. Najlepiej byłoby, gdyby produkty przechodziły fazę alfa / beta (ograniczone wersje), zanim trafią do wszystkich. Zrobiliśmy to z Portfolio. Pomogło nam to wyeliminować problemy, dowiedzieć się, czy UI / UX "działało" i uzyskać prawdziwe opinie od użytkowników z zamiarem ulepszenia produktu. Najlepiej przetestować, uczyć się i doskonalić z ograniczoną grupą użytkowników, niż uruchamiać do tysięcy / milionów ludzi i odkrywać problemy, gdy jest już za późno.

Test. Uczyć się. Poprawić. Powtarzać.

Jest to ważne w projektowaniu produktu. Tak wiele uczysz się od osób korzystających z produktu.

Będziesz zaskoczony tym, co odkryjesz:

... Ludzie nie zawsze używają produktu, jak się spodziewałeś!

• Uczysz się,
• Poprawisz się,
• Iterujesz na produkcie,
• Ciągle testujesz,
• I powtórz ten proces.

I szczerze mówiąc, czasami tak to wygląda:

... Ale produkt będzie na to lepszy.

Podsumowując.

Gdybym miał coś z tego zrobić, byłby to:

Zwolnij.

Zainspirować się. Poznaj swoich odbiorców. Robić notatki. Szkicuj pomysły.

Pojęcie.

Pracuj ze swoim zespołem. Przeglądaj pomysły. Przemyśl to.

Szczegółowo w projekcie.

Ktoś (jeszcze) musi zbudować to, co projektujesz.

Testuj i ulepszaj.

Czy to działa? Jak można go ulepszyć? Zawsze można go poprawić.

Uczyć się.

Zawsze. Każde doświadczenie w projektowaniu jest dobrą nauką.

[- Ten artykuł został pierwotnie opublikowany w Medium.com , opublikowano za zgodą autora -]

• ← Uber powraca do nowej tożsamości marki
• Projektowanie świąt →