Jaki jest właściwy sposób pracy z grafikiem? [Zamknięte]

Ostatnio współpracowaliśmy z grafikiem (zaaranżowanym przez klienta), aby zapewnić skórkę dla aplikacji Django + Bootstrap, którą zbudowaliśmy. Projektant dostarczył serię statycznych obrazów nowego układu wraz z dokumentem opisującym niektóre atrybuty techniczne (rozmiary czcionek, kolory, kilka wymiarów itp.).

Wdrożenie tego okazało się niezwykle czasochłonne. Chociaż cała witryna była w zasadzie stroną główną, stroną indeksu i pół tuzina stron ze szczegółami, spędziłem co najmniej 5 dni po prostu wdrażając zmiany CSS i HTML. Więc wychodzę na nogi i nazywam to „Wrong Way” .

Moje podstawowe podejście było następujące:

1. Porównaj obraz statyczny i bieżący rendering i zauważ różnicę.
2. Zgadnij, jaka zmiana byłaby potrzebna w CSS / HTML
3. Dokonaj tej zmiany
4. Przejdź do kroku 1.

Niektóre z konkretnych problemów polegały na tym, że nie rozumiałem, że projekt obejmował zmianę z 8 kolumn na 12, niektóre obrazy zostały dostarczone w niewłaściwym formacie (.png mogą renderować się inaczej w różnych kombinacjach przeglądarki / platformy), kłopotów z próbą cofnięcia stylu Bootstrap, zwykłe zapasy CSS w celu uzyskania idealnego renderowania pikseli itp. I czasami musiałem zreorganizować szablony HTML, aby uzyskać określone zachowanie.

Jaka jest właściwa droga?

W mojej firmie jest kilka osób specjalizujących się w tej pracy.

Są projektantami. I znają HTML. Mogą być pomostem między projektantami a inżynierami frontonu; którymi zwykle są. W ten sposób musimy po prostu zintegrować ich HTML.

To ciężka praca. Istnieje powód, dla którego witryny takie jak „PSD do HTML w ciągu 24 godzin” działają dobrze. Rozwiązaniem w naszej firmie jest wyspecjalizowanie się w tym. Dla nas praca z HTML-em to pestka.

Nie ma srebrnej kuli.

Nie jestem pewien, czy istnieje „właściwy sposób”, ale dość skutecznym sposobem współpracy z projektantem jest najpierw zbudowanie niestylowanego systemu, który używa szablonów i umożliwia łatwą wymianę wszystkich szablonów. Następnie, gdy masz funkcjonalny, ale nie stylizowany (lub minimalnie stylizowany) interfejs, przekazujesz wyniki projektantowi do stylizacji.

Dobrym przykładem tego rodzaju wzorca projektowego byłby jQueryUI ( http://jqueryui.com/ )

Po pierwsze, muszę przyznać, że do tej pory nigdy nie pracowałem z interfejsami internetowymi.

Myślę jednak, że dobrą praktyką dla Ciebie i projektanta może być napisanie prozy o tym, jak powinien wyglądać ostateczny projekt. W ten sposób możesz być bardziej pewny, że jest spójny, ponieważ pachniałby, gdybyś opisywał różne tabele dla każdej strony. Prose może ułatwić twoją implementację, ponieważ tak naprawdę piszesz kod, który jest bliższy twojej implementacji niż obrazów.

Staraj się również, aby projektant skupił się na komponentach, a nie na całych stronach. Jeśli poprawnie wykonasz komponenty strony, skomponowanie ich na całej stronie jest znacznie łatwiejszym krokiem.

Rozwijałem HTML / CSS z kilkoma projektantami i jak już wspomniano, nie ma „srebrnej kuli”. Projektanci, z którymi pracowałem, nie wiedzieli wiele (nic) o html / css. Niektórzy z nich mieli pewne doświadczenie w projektowaniu stron internetowych i muszę powiedzieć, że kiedy mają taką wiedzę, zawsze kończy się to łatwiejszym rozwojem i „lepszą stroną internetową”, szczególnie gdy chodzi o responsywność UX.

Wydaje mi się, że niektóre firmy szukające strony internetowej nie wiedzą / ignorują: każdy może powiedzieć, że jest grafikiem / webdeveloperem / webdesignerem / projektantem interfejsu użytkownika z podstawową wiedzą (lub nawet żadną, tak, widziałem to w obu). Podczas gdy „prawdziwi” mogą zrobić jeszcze więcej i stworzyć łatwe do utrzymania, skuteczne strony internetowe. Staram się „edukować” klienta i wyjaśniać, że projektowanie stron internetowych wymaga umiejętności, których nie mają graficy „tylko drukować”. Kiedy to działa, zwykle wysyłam klienta do projektantów, z którymi już współpracowałem i mam wspólny przepływ pracy.

To powiedziawszy, często zdarza się z wielu powodów, że budujesz strony internetowe z ludźmi, którzy mają umiejętności graficzne i nie mają umiejętności projektowania stron internetowych. W tej sytuacji najlepszym sposobem, jaki udało mi się zaoszczędzić czas na kodowanie, a nie skończyć na układach niemożliwych do opisania, jest zaangażowanie się w proces projektowania i komunikacja z projektantem oraz wyjaśnienie, co możesz / nie możesz zrobić, a co byłoby prostsze / lepsze z twojego punktu widzenia.

Chociaż w niektórych sytuacjach może to być trudne do zorganizowania, kapitałem jest wyjaśnienie klientowi i projektantowi, że „jeśli myślisz, że projektowanie stron internetowych stanowi duży projekt internetowy, w końcu oszczędzasz czas, pieniądze i headeachs” i że będziesz chętnie wezmę udział w procesie projektowania, aby zaoszczędzić czas i pieniądze.

Oto proces, który staram się realizować w większości projektów:

1. Projektant buduje standardy graficzne, jeśli nie istnieją (zazwyczaj nie angażuję się tutaj. Próbuję tylko zasugerować projektantowi, czy nie są zgodne czcionki internetowe, np. Czcionki Google)
2. Mokup wykonany przez projektanta. Angażuję się tutaj i współpracuję z projektantem, aby budować układy zgodne z Internetem (szczególnie te responsywne), zanim klient je zobaczy .
3. klient sprawdza poprawność mokup
4. Koduję mokup

Czas, który spędzam na komunikacji i pracy z projektantem, jest oszczędzany podczas procesu kodowania, co kończy się prostszym, łatwiejszym w utrzymaniu i schludniejszym kodem.

To nie uchroni cię od szczęśliwego projektanta, który dzwoni do ciebie w piątek wieczorem z bardzo ładnym mokupem, który klient widział i teraz chce z tym zdaniem: „Hej, proszę, zakoduj to dla mnie, termin jest… wczoraj! „ Potem cała teoria rozpada się i jeśli szukasz pracy w tym momencie, jesteś dobry na headeach przez cały weekend.

Wniosek:

Nie sądzę, żeby różniło się to bardzo od kodu związanego z nieprojektowaniem, najlepszym sposobem pracy z innymi ludźmi jest komunikacja z nimi.

Jako grafik, który stał się programistą stron internetowych, dla mnie było to jak dotąd najłatwiejsza część. Uważam, że często występuje luka komunikacyjna między zespołem projektowym UX a programistami wdrażającymi ten produkt. Jasne, dokumenty pomagają, ale proces ten może wydawać się o wiele bardziej naturalny po nawiązaniu bezpośrednich rozmów na temat strategii. Wiem też, że czasu nie ma dla wszystkich, ale postaraj się zaangażować podczas fazy projektowania i projektowania. Może to ogromnie pomóc, gdy potrzebna jest komunikacja między projektantem a deweloperem. Projekt wymaga bardziej zjednoczonego wysiłku zespołowego, a mniej scenariusza „Cóż, wykonałem swoją część, za ścianą”. Uważam, że bardzo korzystne jest równoległe prowadzenie prac projektowych i rozwojowych, zachęcić zespół projektowy do dostarczenia szkieletów na wczesnym etapie procesu. W ten sposób możesz wykonać jeden styl, który dotyczy wyłącznie układu i pozycjonowania. Następnie, gdy kampanie stają się bardziej bogate i kompletne. Weź kolejną przepustkę CSS dla wyglądu i innych atrybutów stylu. Przynajmniej nie pozwala ci to skupić się na wszystkim na raz.

Mam podobny problem. mam pomysł, że do tego celu można użyć narzędzi takich jak Greasemonkey lub Tampermonkey. W zeszłym tygodniu poprosiłem o komentarz na temat tego pomysłu: jak zlecić na zewnątrz interfejs użytkownika dynamicznej aplikacji internetowej? , ale nie uzyskał zadowalających odpowiedzi.

Za pomocą tych narzędzi możesz wstrzykiwać CSS, HTML i JavaScript na stronę. Według mojego pomysłu podajesz projektantowi adres URL działającej strony i oczekujesz w zamian skryptów Greasemonkey. Teoretycznie powinieneś być w stanie bardzo szybko zintegrować je z istniejącą witryną. W ten sposób zadaniem projektanta będzie napisanie HTML i CSS i sprawienie, by strona faktycznie działała. Wymaga to jednak znacznie więcej umiejętności programistycznych po stronie projektanta.

Wiem, że ten pomysł wymaga wielu opracowań. Ale jeszcze tego nie próbowałem i nie wiem, czy ktoś to robi. Mogą wystąpić pewne problemy z implementacją.