Projektowanie vs kodowanie

Projektowanie vs kodowanie

Projektować strony internetowe graficznie czy od razu je kodować?


Jak myślisz, czy szybciej jest stworzyć projekt strony internetowej w programie graficznym czy pomijając ten proces przejść bezpośrednio do pisania kodu?

Przeprowadziłem mały eksperyment sprawdzając ile czasu zajmuje narysowanie prostego elementu modalnego.


Cały proces projektowania graficznego wykonałem w programie Figma. Najdłuższe przestoje jakie miałem pojawiały się w momencie doboru kolorystyki. Finalnie zaprojektowanie okienka modalnego w ten sposób zajęło mi niewiele ponad 4 minuty.

Następnie chciałem to samo okienko modalne odtworzyć już za pomocą kodu HTML i CSS. Tutaj najdłuższe przestoje jakie się pojawiały były związane z doborem fontów, aby użyć tych samych, których użyłem w programie graficznym.

Zwróć uwagę, że jest to bardzo prosty projekt. Przy bardziej skomplikowanych kodowanie mogłoby zająć kilkakrotnie więcej czasu niż projektowanie. W tym przypadku kodowanie zajęło mi 2x więcej czasu, trochę ponad 8 minut.

Mimo, że rysowanie jest szybsze od kodowania to projekt i tak trzeba przecież zakodować. Czy projekt graficzny można więc uznać jedynie za zbędny dodatek do kodowania? Odpowiedź znajdziesz w tym odcinku.

Czy web developer musi umieć graficznie projektować strony internetowe?

Mówiąc krótko: nie. Web developer może być odpowiedzialny tylko za część techniczną czyli napisanie kodu strony internetowej. Za projekt graficzny odpowiedzialny jest web designer.

Taki podział obowiązków jest standardem w większości wieloosobowych firm.

Jeśli jednak jesteś freelancerem, to aby w pełni świadczyć usługi swoim klientom musisz albo pełnić obowiązki web designera i web developera, albo zlecać projekty graficzne innym.

Czy do projektowania atrakcyjnych wizualnie stron potrzebny jest talent?

W byciu web designerem nie chodzi o to, aby być artystą. Chodzi o to, aby umieć jasno komunikować się z użytkownikami za pomocą designu.

Weźmy pod uwagę np. symbole mężczyzny i kobiety na drzwiach toalet. Są one jasnym komunikatem projektanta tych symboli dla użytkowników toalet. Symbole koła i trójkąta nie są już tak oczywistym komunikatem.

Podobnie jest w przypadku designu stron internetowych. Jeśli zaprojektujesz stronę w taki sposób, że użytkownik nie będzie w stanie łatwo odróżnić np. co jest przyciskiem a co tylko elementem dekoracyjnym to będzie to słaby design.

Słaby design nie oznacza jednak braku talentu projektanta. Słaby design oznacza jedynie brak dostatecznego opanowania zasad wizualnej komunikacji. Można to porównać do języka migowego. Nie trzeba być artystą, żeby migać. Ale trzeba poznać znaki migowe, żeby móc się nimi komunikować.

Przykładowo, w designie aby jasno zakomunikować podział elementów na dwie grupy, najlepiej wyraźnie je od siebie odsunąć. Jest to jedna z zasad GESTALT. Poznanie tych zasad jest dobry punktem startowym do nabycia umiejętności skutecznego komunikowania się za pomocą designu.

Dlaczego projektowanie strony poprzez kod jest nieefektywne?

Projektowanie graficzne jest szybsze niż kodowanie. Jeśli jednak damy się zwieść na drogę projektowania podczas kodowanie to okaże się, że nie jesteśmy w stanie pisać kodu linijka po linijce tworząc przy tym zadowalający wizualnie projekt.

Będziemy musieli stale zastanawiać się CO chcemy stworzyć. Chcą porównać kilka pomysłów, każdy z nich będziemy musieli zakodować, porównać ze sobą, a następnie wybrać najatrakcyjniejsze rozwiązanie.

Te same decyzje projektowe jesteśmy w stanie podjąć znacznie szybciej w programie graficznym.

Trafne i atrakcyjne rozwiązania najlepiej tworzy się w środowisku, które nie karze nas za eksperymentowanie i popełnianie błędów.

Dlatego przed przejściem do programu graficznego śmiało można skorzystać z najprostszych narzędzi - kartki i ołówka lub cienkopisu. Trzeba jednak bacznie obserwować swoje emocje, czy przypadkiem nie staramy się irracjonalnie unikać kosztów zużycia materiałów.

Próbując oszczędnie tworzyć szkice można stłamsić swoją kreatywność równie skutecznie jak poprzez projektowanie strony za pomocą kodu.

Dlaczego warto oddzielać proces twórczy od technicznego?

Podczas procesu technicznego jeśli zadajemy sobie pytania to są one nakierowane na umiejętności. Chcemy dowiedzieć się jak coś zrobić.

Jak za pomocą kodu zaokrąglić rogi elementu? Jak dodać gradient? Jak rzucić cień?

Proces twórczy to próba odnajdywania odpowiedzi na pytania przybliżające nas do poznania nowej rzeczy. Rzeczy, która jeszcze nie istnieje, chociaż jest podobna do innych już istniejących.

Co to jest? Jak to wygląda? Jaki ma kształt, kolor? Gdzie się znajduje?

W porównaniu do procesu technicznego, w procesie twórczym panuje niewiele zasad. W dodatku proces kreacji opiera się głównie o subiektywną ocenę projektanta.

To jaki wybierzesz font, kolor, ilustrację, wielkość elementów, ich rozmieszczenie, oraz wiele innych zmiennych - zależy wyłącznie od Ciebie. A im większy wybór tym trudniej podejmuje się decyzje.

Dlatego chcąc być kreatywnym, ale i jednocześnie efektywnym dobrze jest zapewnić sobie jak najdogodniejsze warunki do pracy.

Pisanie kodu i jednoczesne zastanawianie się nad tym co napisać to duże obciążenie psychiczne.

Efektywniej jest rozgraniczyć te procesy i najpierw graficznie zaprojektować stronę, a dopiero potem przejść do jej zakodowania.

Podsumowanie

Mając za zadanie przycięcie deski można wziąć piłę i od razu rozpocząć cięcie.

Rozsądniej jednak jest najpierw dokonać pomiarów i wyznaczyć linię cięcia.

Takie podejście, mimo że teoretycznie wydłuża cały proces, tak naprawdę jest tańsze i szybsze.

Nie marnują się źle przycięte deski, a finalnie skracany jest też całkowity czas wszystkich cięć.

Zmierz dwa razy, utnij raz.

Zaprojektuj dwa razy, zakoduj raz.

Jeśli chcesz nauczyć się projektować strony internetowe wejdź na stronę codisity.pl i zapisz się na darmowy kurs.

Napisz też w komentarzu jak uważasz - czy projektowanie stron internetowych w programie graficznym jest według Ciebie konieczne, czy można się bez tego obejść?