Layout PSD to HTML - jak to sie robi

Question

Witam,

Tworzyłem dotychczas strony z głowy lub na podstawie planu z kartki.
Ostatnio zastanawiałem się jak wygląda proces tworzenia strony internetowej przez freelancera.

Na podstawie tego co znalazłem w internecie widzę, że proces ten składa się z 3 etapów:
    1. Stworzenie mockup     -     szkic by zaznaczyć, gdzie na stronie maja być umieszczone najważniejsze elementy.
    2. Stworzenie layout na podstawie mockup’u    -     jak ma wyglądać końcowa wersja strony widoczna w przegladarce.
    3. Napisanie kodu html,css dla strony na podstawie layout’u.

W związku z tym mam pytanie jak dzisiaj tworzy się layout dla strony, jakie narzedzia się do tego używa? Z tego co znalazłem w sieci i na tym forum używa się głównie Photoshop’a. Czasem też innych narzędzi, np. Figma.  Czy wybór narzędzia ma jakieś znaczenie, że łatwiej będzie wykonać taki layout, a potem na jego podstawie napisac kod html,css? W tej chwili wydaje mi się, że najlepiej jest używać Figma, bo jest darmowy. Czy polecacie inne narzędzia?

 

Po drugie, jak wygląda przenoszenie layout’u strony z pliku PSD (Photoshop) do html (lub z robionego w innym programie, np. Figma)? Czy dąży się by przenieść go z dokładnościa co do piksela? Na jednym filmie z Youtube widziałem, że osoba w Photoshop mierzy dokładnie odległości dla wszystkich elementów.  Zaś na drugim filmie  połowę odległości ustawiała na oko, bez mierzenia w Photoshop, np. padding, margin.
Dlatego zastanawiam się czy przy przenoszeniu layout’u dąży się by przenieść układ elementów z dokładnościa co do piksela? Czy celem jest by strona html wyglądała dokładnie tak samo jak layout? Czy przeciwnie,  ważniejsze jest by strona html dobrze wyglądała w przegladarce, nawet jeśli są różnice z layoutem?

Będę wdzięczny za porady lub linki do artykułów.

Answer 1

Przenoszenie projektów z PSD do HTML-a i CSS-a jest nieco anachroniczne. Z jednej strony dlatego, że od lat istnieją rozwiązania takie jak Sketch, Figma czy nawet Adobe XD, które są o wiele lepszymi rozwiązaniami do projektowania layoutów i wspierają choćby pracę z design systemami, a z drugiej strony dlatego, że obecnie niemal wszystko jest responsywne i projekty praktycznie nie są (nie mogą) być przenoszone jeden do jednego. Coraz częściej też projektuje się bezpośrednio w przeglądarce internetowej. Natomiast programy takie jak Figma czy Sketch mają odpowiednie narzędzia, dzięki którym eksportowanie projektu do HTML-a i CSS-a jest ułatwione.

Czy celem jest by strona html wyglądała dokładnie tak samo jak layout? Czy przeciwnie,  ważniejsze jest by strona html dobrze wyglądała w przegladarce, nawet jeśli są różnice z layoutem?

Celem jest to, żeby strona była użyteczna. Wygląd nie musi być spójny tak długo, jak strona jest faktycznie użyteczna. Ogólnie uważam podejście pixel perfect za przestarzałe w dobie RWD. Strona powinna się dostosowywać do możliwości danego urządzenia, nie zaś za wszelką cenę wyglądać jak na layoucie.

Z tego co znalazłem w sieci i na tym forum używa się głównie Photoshop’a. Czasem też innych narzędzi, np. Figma.

Jest właśnie dokładnie odwrotnie. Używa się narzędzi takich jak Figma, Sketch czy Adobe XD, a Photoshop jest coraz mniej popularny. Swoją popularność de facto zawdzięczał wyłącznie temu, że kiedyś nie było narzędzi pod design.

Comments

Z tego jak rozumiem layout ma pełnić 2 role. Po pierwsze, ma być mapa, wzorem jak po napisaniu kodu ma strona wygladać. Jest planem dzięki któremu webdeveloper wie, gdzie na stronie będą znajdować się poszczególne elementy.
Myślałem przedtem, że webdeveloper musi trzymać się ściśle wymiarów na layout i dopasowac by stona wygladała jak na layoucie. Że robi się oddzielnie wersje layout na mobilie i desktop.
Dużo wyjaśnił mi ten post. Dziękuję.

Po drugie, to wizualizacja strony dla klienta. I tu mam pytanie odnośnie tego:

Coraz częściej też projektuje się bezpośrednio w przeglądarce internetowej.

Ciekawi mnie jak to się ma do sytuacji, gdy klient chce zobaczyć layout strony  przed podjęciem decyzji, że zakupi usługę stworzenia strony internetowej. Przeważnie klient chce zobaczyć layout strony w programie graficznym który pokaże jak strona będzie wygladać po zakodowaniu.  Jeśli zakodowana strona różni się od layout’u  (np. tylko dla wersja desktop był layout zrobiony) to czy klient może mieć jakieś uwagi, że usługa nie jest zgodna z tym co było w umowie (czyli: nie jest jak w layoucie nie zapłacę ci)?

---

Kultura pracy z klientem to zupełnie inny temat i tutaj faktycznie pixel perfect może pojawiać się zdecydowanie częściej. Ja mówię bardziej ze swojego doświadczenia, gdzie nie mam tak naprawdę bezpośredniego kontaktu z klientem, a po prostu rozwijam konkretny produkt. W takim wypadku można dostosować styl pracy tak jak chcemy.

Answer 2

Cześć.

Ja nie używam wogóle takich metod.

Tworzę od razy w html, css podglądając efekty w przeglądarce.

Niektóre pomysły wcześniej "wykonuje" w swojej głowie w wyobraźni, nie potrzebuje wizualnych narzędzi do tego, żeby później trzeba było to i tak od zera kodować.

Do tego mogę sobie eksperymentować z różnymi animacjami, efektami czy z interaktywnymi elementami czego w photoshopie nie zrobisz (w figmie może tak, ale próbowałem i to nie dla mnie, tylko wydłuża proces pracy.)

Podczas kodowania robię to od początku z myślą od dostosowaniu do urządzeń mobilnych, w prototypowaniu o które pytasz też można tworzyć wersje na tablety i telefony, nie jest to tak płynne (nie ma mowy o takim na przykład fluid typography), ale jak dla mnie to masa zbędnej pracy, skoro i tak trzeba to jeszcze zakodować.

Jeśli chodzi o tę responsywność, dostosowywanie do urządzeń, a nawet na samych komputerach rozdzielczości się różnią, więc nie widzę sensu w przenoszeniu piksel do piskela, jeśli już to jakąś procentową miarę. Ja w kodowaniu często używam jednostek em i rem, w prototypowaniu to chyba tylko w figmie tak można.

Jeżeli chciałbyś używać photoshopa do prototypowania, polecam w pełni profesjonalny i nie gorszy darmowy program Krita: https://krita.org/en/.

Proces pracy powinien być jak najwygodniejszy dla ciebie. Co dla innego jest wygodne i zgodne z nim nie musi być dla ciebie. I tak liczy się efekt końcowy, a jak go uzyskasz to twoja sprawa. Moim zdaniem bardziej od efektu liczy się nawet właśnie ta przyjemność z robienia tego, więc tym bardziej polecam robić tak, jak ci się najprzyjemniej pracuje, a efekty też będą lepsze, bo będą wynikać z pracy z przyjemności, gdzie i kreatywność działa lepiej i bawiąc się robi się zwykle więcej niż z obowiązku.

Tutoriale na jakie się natykasz pokazują różne rzeczy jak zrobić, a dokładnie jak akurat je robi ta osoba, ale nie są świętym doskonałym wyznacznikiem jakichś norm, których trzeba ściśle przestrzegać. Zwłaszcza, że autorzy takich tutoriali także są lepsi i gorsi. A to w sumie powinna być dobra zabawa (nawet jeśli robisz coś dla klienta), dla niektórych to nawet sztuka lub coś w tych klimatach, więc tak jak i tam, możesz robić to zupełnie po swojemu, jedynie się sugerować, czy inspirować.

Comments

Dziękuję za cenne rady. Kiedyś przyjrze się Krita.