Jakie materiały projektant stron internetowych korzystających z Photoshopa powinien wysłać do programisty?

Wdrażam głównie aplikacje internetowe i stacjonarne i po raz pierwszy zacząłem pracę z projektantem graficznym na stronie internetowej, która jest do użytku publicznego. W tym przypadku grafik nie robi HTML + CSS, ale używa Photoshopa.

Jaki rodzaj materiału jest zwykle dostarczany jako wynik końcowy, aby projekt mógł zostać rzeczywiście wdrożony?

Na przykład, czy powinienem dostać coś więcej niż tylko pliki PSD? Co powiesz na różne stany (np. Najechanie linkiem, stan aktywny itp.) Lub responsywny projekt? Czy oczekuję zbyt technicznych szczegółów?

Każda pomoc doceniona.

Mock-up jest zwykle przekazany dla dewelopera wiedzieć, co należy przejść do. Może się to różnić od pliku PSD do płaskiego obrazu, w zależności od przepływu pracy. Z mojego doświadczenia wynika, że ​​przekazałem makietę płaską ze wszystkimi używanymi wymiarami, rozmiarami i kolorami czcionek oraz pełnym zestawem plasterków i używanych obrazów. Zasadniczo wszystko, co jest wymagane do ukończenia projektu. Ale to naprawdę zależy od przepływu pracy. Jeśli witryna jest wykonywana głównie w CSS, wymagane są inne informacje (wartości gradientu, wartości cienia, wstępne ustawienia przycinania obrazu).

Stany przycisków powinny być zawsze uwzględnione. W zależności od sposobu ich wykonania (wyłącznie CSS lub plastry) należy podać wszystkie kolory, promienie i rozmiary lub same plastry.

Responsywny projekt jest nieco inny. Projektowanie widoku to dopiero początek. Deweloper powinien również wiedzieć, jak powinny zachowywać się elementy, gdy witryna stopniowo się „kurczy”. Jak zachowa się menu, jeśli wyświetli się mniej opcji? To, co jest tylko elementem listy w pełnym widoku sieci, może radykalnie zmienić ekran w widoku mobilnym. Co dzieje się ze wszystkimi elementami aktywowanymi (nie można ich używać w widoku mobilnym)?

Odpowiedź @ KMSTR to 80% rozwiązanie, ale jeśli twój projektant jest prawdziwym profesjonalistą, będzie konkretny w kwestii drobnych szczegółów, na przykład kiedy powinny wystąpić animacje przejścia lub w jakiej kolejności powinny ładować się elementy DOM.

Jeśli twój projektant znajduje się w tej górnej 20%, poproś o kilka przepływów użytkowników i szkieletów UX, a jeśli są szczególnie utalentowani, prototyp wykonany w After Effects lub Flash. Idealnie nie pozostawiają żadnego aspektu nieokreślonego.

Wszystko zależy od tego, co uzgodniłeś z grafikiem.

Niektórzy graficy nie wiedzą nic poza PhotoShop i zostaną utraceni, jeśli poprosisz o coś innego niż duży plik PSD.

Niektórzy projektanci graficzni znają się na HTML, CSS i JS i potrafią zbudować wszystko dla Ciebie.

A potem jest wszystko pomiędzy.

Polecam skłanianie się ku temu drugiemu, ponieważ projektant stron internetowych, który rozumie medium, będzie produkować projekty, które są bardziej przyszłościowe, responsywne, niezależne od przeglądarki i elastyczne niż poprzednie, ale te pierwsze mogą działać tak długo, jak długo programista interfejsu użytkownika ściśle współpracuje z projektantem interfejsu użytkownika.

Z góry powinieneś określić, czego się spodziewasz.

Jestem w stanie dostarczać pliki psd, strony HTML / CSS, a nawet w pełni dynamiczne strony JQuery / PHP / MySQL. To, co zostanie dostarczone, zależy od żądania.

Jeśli deweloper chce tylko psd, to wszystko, co dostarczam, a ich zadaniem jest tworzenie stron. Nigdy nie zadałbym sobie trudu tworzenia stron, jeśli nie są one potrzebne.

Mam niektórych klientów, którzy polegają na mnie w pełni funkcjonalnych stronach, które można upuścić na istniejące strony internetowe.

Mam niektórych klientów, którzy mają programistę, który odmawia użycia kodu, który do nich przesłano i nalega na samodzielne kodowanie wszystkiego, więc dostarczam pliki psd.

Nie ma solidnej odpowiedzi na twoje pytanie. Jest to kwestia tego, co zostanie uzgodnione przed rozpoczęciem pracy.

Naprawdę chcesz projektanta, który dobrze zna HTML, CSS i JavaScript. W miejscu, w którym pracuję, nigdy nie widzimy ani jednego pliku Photoshopa. Projektant podaje nam adres URL strony, kopiujemy cały jego interfejs, a następnie uzupełniamy luki, aby strona była dynamiczna.

Jest kilka powodów, dla których jest to preferowane:

1) Nie ma wątpliwości, czego chce projektant - nie ma interpretacji liczb ani notatek, widzisz dokładnie, jak powinien wyglądać produkt końcowy, zanim go dotkniesz. Wszystkie wartości CSS są dostępne, każda funkcja javascript lub animacja.

2) Ogranicza czas potrzebny na pracę na tej stronie. Tak, wciąż musisz go ponownie okablować i być może wykonujesz mnóstwo pracy na zapleczu, ale oszczędza to sporo czasu z przodu.

Oczywiście nie zawsze kontrolujesz projektanta, z którym współpracujesz. Ale jeśli masz tylko program Photoshop, upewnij się, że naprawdę otrzymujesz wszystkie stany przycisków i wiesz, jakich animacji chce projektant. Mamy nadzieję, że jeśli pracujesz w takim środowisku, możesz po prostu pójść do góry i porozmawiać ze swoim projektantem i poprosić o wyjaśnienie, gdy tego potrzebujesz.