Po co renderować projekty?
W jaki sposób wykorzystujesz makiety, a konkretnie makiety wysokiej jakości (nie makiety) w procesie projektowania i dlaczego / czy je polecasz?
Jestem programistą, w przeszłości właściciele moich produktów czasami podawali wymagania w formie makiet, ale nawet wtedy generalnie uderzało mnie, że można to przekazać bez całej dodatkowej pracy (0 zdolności artystycznych z piórem i papierowy szkic wystarczyłby).
W zeszłym tygodniu oglądałem kilka filmów na YouTube, aby uzyskać inspirację do projektu pobocznego / hobbystycznego, nad którym pracuję, i zacząłem naśladować niektóre z tego, co robili, ale przestałem, gdy zdałem sobie sprawę, że wysiłek nie został przeniesiony. Większość programów do projektowania, które widziałem, wygląda bardziej jak Photoshop niż przeglądarka internetowa, więc normalne działanie płótna / palety nie przekłada się łatwo na (S) CSS - nigdy (* nie od początku 2000 roku) nie pracowałem projekt, w którym wykorzystano obraz tła, więc nie jestem pewien, jaką rolę odgrywa szkic w cyklu życia projektu / rozwoju?
Nie pukam projektantów ani pracy, którą wykonujesz - pamiętam internet pod koniec lat 90. i nie chcę wracać, po prostu staram się zrozumieć, dlaczego firmy spędzają tyle czasu / pieniędzy na tworzeniu wysokiej jakości grafiki cyfrowej - to trzeba przetłumaczyć na obrazy, HTML i CSS?
Odpowiedzi
Myślę, że idealnym scenariuszem jest posiadanie projektantów, którzy kodują front-end. Ale w rzeczywistości większość projektantów tego nie robi. Jest jednak coraz więcej miejsc, w których to norma.
Z punktu widzenia projektanta projekty służą przede wszystkim 3 głównym celom:
- Krytyka w zespole
- Przetestuj z użytkownikami
- Porozmawiaj z klientami
Szkice papierowe nie mogą być używane do żadnego z powyższych, nawet modele szkieletowe są trudne do zrozumienia dla klientów i niektórych użytkowników. Ponieważ każdy przedmiot ma swój cel, szkicowanie na papierze (np. Szkicowanie na tablicy) najlepiej ułatwia szybką dyskusję na temat drobnych rzeczy lub pomysłu, nie można przedstawić takich elementów, jak branding, wygląd i styl.
Innym miejscem, w którym świeci, jest przedstawianie wstępnych, surowych pomysłów, które można szybko poprawić. Są rzeczy zwane papierowymi prototypami lub kartonowymi modelami produktów itp. Często są one używane do przeglądania scenariusza i zrozumienia, jak to jest używać produktu i czy wizja ma w sobie jakieś duże dziury. Łatwo przeoczyć ważne rzeczy, gdy się ich nie odgrywają.
Teraz zarówno prototypy hifi, jak i prosty html / css spełniają powyższe punkty. Zależy to tylko od projektanta i wewnętrznych procesów firmy. Nie ma reguły mówiącej, że prototypy sprzętu HiFi są koniecznością.
To, czego używasz, zależy od potrzeb i ograniczeń projektu. Chcesz przekazać coś, co można zrobić, szkicując na papierze? Proszę, nie trać czasu. Zrób to w dowolnym momencie w dowolnym momencie projektu. Chcesz przetestować z użytkownikami? klienci rozumieją tylko rzeczy związane z hi-fi? Czy projektanci żyją w html / css? Możesz pominąć Photoshop / Figma / Sketch, itp. Czy klient prosi o zbadanie 2 bardzo różnych ścieżek? kosztuje mniej iteracji na narzędziach do prototypowania? Następnie pomiń na chwilę html / css.
Pod wieloma względami przepływ kodu wireframe> photoshop> jest przestarzały. Narzędzia łączą teraz modele szkieletowe i Photoshop z regułami logicznymi. Niektóre z tych narzędzi do prototypowania zaczynają to tak bardzo komplikować (w zasadzie stają się wizualnymi reprezentacjami kodu), że zastanawiasz się, czy można to zrobić szybciej bezpośrednio w javascript (co jest, jeśli jesteś techniczny). Jestem pewien, że ta ewolucja będzie nadal przenosić coraz więcej tylko kodu. Dziedzina ewoluuje, pojawia się wiele nowych osób, które nie są techniczne. A narzędzia, które widzisz, są przeznaczone dla nich, a nie dla front-devów.
Istnieje również koncepcja wierności. Im bardziej coś wygląda jak produkt końcowy, tym bardziej ludzie są przekonani, że nie mogą wyrazić opinii i zmian. Będą się powstrzymywać, nawet jeśli powiesz im, że możesz dawać. Tak więc model szkieletowy naturalnie zachęci więcej niż coś, co wygląda na dopracowane i wykończone. Pokazanie klientowi dopracowanego projektu może nie dać Ci informacji zwrotnej, której szukasz. Ale znowu, możesz zamiast tego zakodować model szkieletowy. Nikt nie mówi, że nie możesz.
Ponieważ projektanci nie robią tego wyłącznie w celu komunikacji z programistami, ale raczej w celu komunikowania się z użytkownikami i stekami.
Jak przetestować rozwiązanie projektowe, które nabazgrałeś piórem i papierem? Skąd wiesz, jakie rozwiązanie generuje lepszą konwersję? Skąd wiesz, czy musisz dostosować swoje rozwiązanie, ponieważ użytkownikom trudno je zrozumieć itp.?
Projektanci robią to po to, by wspólnie wypracować coś ze steakholderami, którymi są zazwyczaj osoby o typie wizualnym, a także by zweryfikować swoją pracę, testując ją z użytkownikami.
Na koniec rozwiązanie projektowe zostaje przeniesione do programistów, a narzędzia takie jak sketch, adobe xd itp. Zapewniają sposób, przy niewielkim wysiłku, na przekazywanie deweloperom atrybutów stylizacji itp. Na podstawie wykonanej już pracy.
Kilka lat temu zrezygnowaliśmy z rzeczywistych renderowanych projektów w mojej pracy. przeszliśmy do szybkich prototypów, używając proxy / mock json jako zaplecza. nasi interesariusze czują się jak prawdziwa aplikacja i mogą ją krytykować na wczesnym etapie bez opracowywania kodu zaplecza. Wszyscy jesteśmy jednak przyzwoitymi projektantami UI i używamy bootstrapa jako podstawy. Po wykonaniu / zatwierdzeniu naszego prototypu uruchamiamy backend, ponieważ front-end jest już dosłownie gotowy. Używamy niestandardowego frameworka javascript o nazwie atomic stack napisanego przez Tyree Jackson. Sprawdź to!