DesignMagazyn

Webdesign

Web designerze, naucz się HTML’a!

Opublikowane dnia .

Web designerze, naucz się HTML’a!

Wstęp

Webdesign

Web designerze, naucz się HTML’a!

Opublikowane dnia .

Jeżeli jesteś grafikiem webowym i uważasz, że dobra znajomość programów graficznych to wszystko co powinieneś umieć by projektować strony, to według mnie jesteś w błędzie.

Od jakiegoś czasu widzę, że od web designerów wymaga się przynajmniej podstawowej znajomości HTML i CSS. Pomimo tego że m. in. Adobe wypuszcza coraz więcej aplikacji które wspomagają tworzenie stron i potrafią automatycznie generować całe działające strony, to znajomość HTML i tak uważam za bardzo przydatną.

Dlaczego warto poznać HTML

Poniżej wypisałem najważniejsze (w mojej opinii) powody dla których warto nauczyć się kodowania.

1. Kodowanie ”Pixel perfect” i stałą szerokość stron to już przeszłość

Przez długi czas projekty webowe tworzono dla ustalonej szerokości a ich kodowanie polegało na przenoszeniu grafiki 1:1 z Photoshopa na HTML z zachowaniem wszystkich odległości oraz wymiarów z dokładnością co do piksela. Na dodatek strona musiała wyglądać identycznie w każdej przeglądarce – co do piksela!
To już przeszłość. Oczywiście zdarzają się wyjątki ale w większości przypadków podczas kodowania projektu graficznego do HTML większy nacisk kładzie się na elastyczność oraz zapewnienie najbardziej optymalnego wyglądu strony w zależności od rozdzielczości. Responsive Web Design to już nie tylko trend lub moda – powoli staję się standardem.

2. Mozolne wprowadzanie poprawek w Photoshopie

Czy zdążyło wam się kiedyś wprowadzać drobną poprawkę w projekcie graficznym, który składał się z kilkunastu plików PSD? Nic przyjemnego. Zwłaszcza jeżeli mówimy o dużych plikach ze sporą ilością elementów i warstw. Samo otwarcie pliku i przesunięcie buttona lub zmiana koloru potrafi zająć sporo czasu.

W efekcie końcowym klient dziwi się, że małe zmiany które podsyłała do projektu zaczynają generować kolosalne koszty…
Czasami po wstępnej akceptacji projektu warto przygotować wersje HTML i na niej wprowadzać ostateczne zmiany w stylu dopasowania odstępów, przesunięcie elementów lub podmiany cienia lub koloru. Taką zmiany bardzo często można wykonać poprawiając jedna linijkę w kodzie CSS, co zaowocuje sporą ilością zaoszczędzonego czasu, pieniędzy oraz nerwów : )

3. Ułatwiona współpraca z programistami i koderami

Już na starcie web designer znający HTML i jego ograniczenia będzie wiedział czego unikać przy projektowaniu strony. W przypadku projektów z bardzo napiętymi terminami będzie wiedział jak zaprojektować stronę, aby maksymalnie ułatwić i przyśpieszyć pracę koderowi.
Wszyscy wiemy, że dość często ostateczna wersja strony zakodowana w HTML potrafi trochę odbiegać od projektu graficznego i ogólnej wizji. Dlatego uważam, że web designer powinien uczestniczyć w procesie tworzenia strony do końca, nadzorując pracę programistów i koderów oraz zgłaszając ewentualne poprawki lub sugestię odnośnie wyglądu. Znajomość CSS pozwala na bardziej precyzyjnie określenie zmian. Można też podesłać gotowe do implementacji poprawki w CSS.

4. Projektowanie i szybkie prototypownie w HTML

Projektowanie strony za pomocą samego HTML jest częstą praktyką. Zwłaszcza jeżeli mamy do czynienia z projektem aplikacji webowej. W takich projektach nie ma fajerwerków graficznych, a ważniejsza jest użyteczność, przejrzystość i wysoka wydajność.
Zdarza się, że w przypadku takich projektów zupełnie pomijany jest etap projektu graficznego, a interfejs aplikacji przygotowuje się bezpośrednio z makiet. Ma to sens zwłaszcza jeżeli w projekcie wykorzystujemy jakiś framework (np: Bootstrap lub Foundation ). Jednak wykorzystanie gotowców UI oraz pominięcie etapu projektu graficznego nie oznacza wcale, że web designer nie będzie miał co robić i w przypadku takich projektów znajomość HTML i CSS jest niezbędna.

5. Automatyzacja jest dobra, ale nie polegaj na niej w 100%

Tworząc projekt we wspomnianym generatorze kodu (np. Adobe Muse) możemy stworzyć z niego działającą stronę, która „generalnie działa”.
W teorii to rewelacyjne rozwiązanie, ponieważ grafik nie musi się znać na kodowaniu i dostaję gotową stronę.
W rzeczywistości generacja kodu działa idealnie w przypadku standardowej strony na którą będzie zrobiona raz, a potem nic nie będzie się na niej zmieniało – nie będzie rozwijana pod względem technicznym. No i zostaje jeszcze problem generatorów, które  bardzo często traktują stronę jako ostateczny projekt. Niestety sytuacje gdy designer dostaję kompletną treść oraz wszystkie dane dotyczące strony internetowej przed rozpoczęciem jej projektowania nie są zbyt częste :(
Pamiętaj też o tym, że twój kod generuje maszyna i robi to według ściśle określonego algorytmu i nie umie ( jeszcze ) czytać w Twoich myślach i zgadywać Twoich intencji, dlatego czasami wyniki jakie wypluwa mogą odbiegać od tego co oczekujesz – wtedy przydaje się znajomość zasad działania HTML i CSS żeby wprowadzić jakąś drobną poprawkę.

HTML5 - Keep calm and don't open ie8

6. Różnice między przeglądarkami zanikają

To że każda przeglądarka trochę inaczej traktują kod HTML wiedzą wszyscy. Jednak ma to coraz mniejsze znaczenie.
Po pierwsze dlatego, że dobrze projektując i kodując stronę można uniknąć większości problemów.
Po drugie to strona nie zawsze musi wyglądać idealnie tak samo – czytaj pkt 1 :)
Po trzecie to konkurencja na rynku przeglądarek wychodzi użytkownikom na przeciw.
Obecnie mamy trzech głównych graczy: Chrome, Firefox i IE ( które od wersji 9 daje radę ). Gdzieś tam jeszcze jest Opera (która niedługo zmiana silnik na webkita ) oraz Safari ( która zasługuje na wspomnienie z powodu dużego udziału w rynku przeglądarek mobilnych ). Wszystkie te przeglądarki mają wsparcie HTML5 i nie przysparzają większych problemów z kodowaniem (chociaż jak dla mnie ostatnio czarną owcą i sprawiającą najwięcej problemów jest Opera, a nie jak zwykle IE).

7. Większa atrakcyjność na rynku pracy

Jeżeli szukasz zatrudnienia jak web designer to wpisanie znajomości HTML do twojego CV możne być tylko plusem. Nie tylko świadczy o tym, że w razie czego możesz wspomóc zespół kodowaniem ale również o tym, że projektowanie stron traktujesz kompleksowo i interesuje Cię wszystko co z nimi związane.
Poza tym na rynku pracy jest sporo firm, które dopiero się rozwijają lub nie mają wystarczającego budżetu żeby tworzyć dwa osobne stanowiska dla kodera i web designera – wówczas Twoja szansa na zatrudnienie bardzo wzrasta.

8. To proste

Od razu zaznaczę, że przez znajomość HTML rozumiem znajomość HTML5 i CSS3 oraz podstawowe rozeznanie w  jQuery pozwalające na podpięcie podstawowych wtyczek.
Nie oszukujmy się – nie jest to trudne do ogarnięcia. Oczywiście żeby dobrze kodować potrzeba doświadczenia ponieważ dużo rzeczy wychodzi z czasem, ale podstawy są bardzo proste. Wystarczy trochę chęci i czasu :)

Przecież grafik to nie koder

Oczywiście nigdzie nie jest powiedziane, że aby tworzyć niesamowite projekty trzeba koniecznie znać HTML, ale ja wywodzę się ze starej szkoły kiedy to projekty stron tworzyło się bezpośrednio w HTML a najważniejszym kryterium było żeby strona ładowała się szybko na modemie, a najpopularniejszym narzędziem do projektowania stron był MS Frontpage.

Oczywiście czasy się zmieniły i dzięki nowym narzędziom Adobe praca web designera jest znacznie ułatwiona i przyspieszona, jednak nie zmienia to faktu, że w całym procesie bardzo ważny jest HTML jako podstawa organizacji wyglądu stron internetowych.
Dlatego sugeruję wszystkim grafikom webowym, żeby poświęcili trochę czasu na naukę podstaw kodowania – przynajmniej na tyle by potrafili w podstawowym stopniu przygotować własne projekty w wersji webowej.

Ps.Na koniec podam jeszcze jeden dodatkowy bonus znajomości HTML’a przez grafika: Jeżeli choć trochę znamy się na kodowaniu stron, to żaden leniwy /  oporny koder nigdy nie wciśnie nam przysłowiowego „kitu”, że „tego się nie da zrobić w HTML”! : )

profile

Jan Szpakowski

http://www.janszpakowski.pl

UX / UI Designer który po godzinach lubi projektować logotypy. Uwielbia minimalizm, kreatywny branding, komiksy i science fiction. Jego mottem jest: simple is the best.

  • No cóż znajomość HTML’a oraz CSS to chyba podstawy z podstaw. Zawsze wydawało mi się, że właśnie to jest najważniejsze :) Choć może się myliłem. Osobiście znam do tego jeszcze jQuery oraz PHP+MySql, oraz uczę się innych języków. Ale może to moja nadgorliwość. Jednak uważam, że to zawsze się przyda – choćby do edycji pętli w WordPressie, czy zrobienie jakiś bajerków.

Zobacz komentarze (1) ...