O co w ogóle chodzi w tym całym web designie? Od czego zacząć naukę? Dziś na YouTubie, blogu i fejsie rusza tydzień Web Designu.
Web Design jest stosunkowo świeżą dziedziną projektowania. Nic dziwnego, historia stron internetowych jest przecież całkiem świeża. Jeszcze kilkanaście lat temu tworzenie stron internetowych wyglądało zupełnie inaczej. Wystarczył notatnik lub prosty edytor html i strona sama się robiła. Kilka linijek kodu, ramki, ruchome gify, a chwilę później pojawiły się wypasione, w pełni animowane strony flashowe. Strony projektowało się na rozdzielczość 800×600 px i nikt za bardzo nie zastanawiał się nad potrzebami użytkowników… bo właściwie ilu ich było? Internet nie był tak dostępny, w domach stałe łącza pojawiały się powoli, a nikt nie myślał o przeglądaniu stron w swoich telefonach.
Postęp technologiczny i dostępność nowego medium sprawiły, że to jak wyglądają, działają i jaki cel mają dzisiejsze strony internetowe obróciło się o 180 stopni. I tu sprawa się komplikuje…
Czym jest właściwie web design?
To po prostu projektowanie stron internetowych. Tylko i aż, bo od którego momentu mówimy właściwie o projekcie? Czy dopiero klepiąc kolejne widoki w programie graficznym, czy animując interfejs i tworząc skomplikowane interakcje, czy na etapie pierwszy szkiców i makiet? Web design i web development mocno się dziś ze sobą przeplatają. Strony nie są już nieruchomymi, stałymi bytami. Przez mnogość urządzeń, na których możemy je oglądać Responsive Web Design musiał stać się standardem. A zatem zaszła potrzeba projektowania tych dynamicznych bytów, tego jak zachowują się zmieniając rozdzielczości. Czy projektant znający tylko Photoshopa jest w stanie to zrobić?
Przyjmijmy, że mianem Web Designu będziemy zatem określać całość zadań jakie trzeba wykonać pracując nad wizualną stroną strony.
Co muszę umieć jako Web Designer?
Przede wszystkim projektować. Nauka projektowania będzie bazą do tworzenia projektów stron. Podstawą będzie kompozycja, praca z barwą i typografia. Ta ostatnia zresztą bywa dość kłopotliwa i pewnie nie raz się z tym spotkaliście trafiając na strony, gdzie tekst był zbyt mały, mało kontrastowy, po prostu nieczytelny.
W następnej kolejności warto znać jakieś narzędzie, które pozwoli Wam tworzyć Wasze pierwsze projekty. Najwygodniej zacząć od programu graficznego. Jeżeli nie znacie jeszcze żadnego programu nic straconego, bo to świetna okazją do poznania przy okazji wybranego narzędzia.
Mam program i jakąś podstawową wiedzę…
no i co dalej?
Teraz czas na fun part. Bo rzeczy do ogarnięcia w teorii jest dość sporo. Warto jednak nie przerażać się ich mnogością i uświadomić, że będziecie uczyć się tego wszystkiego z czasem.
Pierwszym krokiem będzie wybranie bazowej rozdzielczości, na którą stworzycie swój pierwszy projekt. 1280 px powinna być w sam raz, ale nie przywiązujcie się do niej specjalnie. Bo tworząc swój projekt musicie mieć z tyłu głowy, że nie tylko w tej rozdzielczości będzie oglądany. Teraz warto zastanowić się nad gridem, czyli siatką, która będzie Waszym szablonem.
Grid (siatka) wywodzi się… z druku! Jest świetnym narzędziem, które porządkuje treść na stronie. Określa szerokość szpalt (kolumn tekstu) oraz odległości między nimi. I choć te całe gridy mogą wydawać się skomplikowane na początku, po jakimś czasie przestaniecie zwracać na nie uwagę. Skąd wziąć grid? Właściwie bardzo często projektuję swój na potrzeby konkretnej realizacji, ale spokojnie możecie użyć „gotowca”.
Content is the king
No dobra, mamy szerokość, mamy siatkę i co teraz? Skąd mam właściwie wiedzieć co ma być na tej stronie. Jakieś logo, jakiś tekst, obrazki…? Jeżeli to Wasz pierwszy projekt polecam wykorzystać treść jakiejś istniejącej strony. Znajdźcie niedużą firmę z Waszej okolicy i spróbujcie zaprojektować dla nich nową stronę. Zastanówcie się nad nawigacją, tym czego potencjalni użytkownicy mogą na niej szukać. Które informacje są bardzo ważne, które można na przykład pominąć. Dobierzcie zdjęcia, barwy, krój pisma. Zróbcie tak żeby to wszystko do siebie po prostu pasowało.
Redesign Facebooka, Twittera, czy YouTuba zostawcie na później. Skupcie się na treści, którą musicie dobrze zaprezentować. Bo ta treść jest najważniejszą częścią strony internetowej. Niezależnie czy opiera się wyłącznie na tekstach, obrazach czy materiałach wideo – po treść przychodzą użytkownicy.
Nie mam pomysłów!
Ważną częścią projektowania jest research. Czyli rozeznanie się z branżą, dla której się pracuje, poznanie konkurencji i po prostu poszukiwanie inspiracji. Poklikajcie po podobnych tematycznie stronach, zwróćcie uwagę na Wasze ulubione strony – co Wam się w nich podoba, co sprawia, że lubicie spędzać tam czas. Zastanówcie się co Was irytuje i czy coś takiego może pojawić się w Waszym nowym projekcie. Poznajcie użytkowników, którzy potencjalnie korzystaliby z zaprojektowanej przez Was strony. Odpowiedzcie sobie na pytania: Co robię? Dla kogo to robię? Dlaczego to robię?. Jeżeli dobrze zrozumiecie cel, który trzeba osiągnąć, będzie Wam dużo, dużo prościej.
Ołówki w dłoń!
Zanim zaczniecie układać wszystkie potrzebne elementy w programie, usiądźcie z kartką papieru i naszkicujcie szybkie koncepty. Wybierzcie miejsca dla nawigacji, najważniejszych tekstów i obrazów. Zakomponujcie to odpowiednio i dopiero wtedy przerzućcie na komputer. Takie szkicowanie przyda Wam się jeszcze, kiedy będziecie szukać rozwiązań dla kolejnych projektów.
I to wszystko?
Chciałoby się! Tak naprawdę to dopiero początek, ale od czegoś trzeba zacząć. Praktyka czyni jednak mistrza i dużo więcej przyswoicie, kiedy po prostu zaczniecie projektować. Co przed Wami? Podstawowe zagadnienia związane z użytecznością i user experience. Zapoznajcie się z tym na czym polega projektowanie z myślą o użytkownikach, jakie są dobre wzorce i na co po prostu zwracać uwagę.
Sprawdźcie dobre praktyki i popularne frameworki takie jak bootstrap czy systemy wizualne jak Material Design. I przede wszystkim oglądajcie. Oglądajcie, zwracajcie uwagę, zapamiętujcie. Wasze codzienne „klikanie” jest świetnym researchem do zrozumienia różnic między typami stron. Bo przecież inaczej zbudowana jest strona z wiadomościami, inaczej działa i zachowuje się Facebook, forum internetowe, strona restauracji, czy strona reklamująca najnowszy film.
Na później zostawcie sobie dynamikę – animacje, mikrointerakcje są atrakcyjną częścią wielu interfejsów, potrafią wzbogacić doświadczenia użytkownika, ale również go wkurzyć, dlatego wyczucie jest tu bardzo ważne.
Dużo tego?
Niestety. To niestety szybko zmieniająca się branża. Postęp technologiczny pędzi do przodu i po prostu trzeba interesować się nadchodzącymi zmianami. Jeżeli jednak to coś, co Was interesuje i sprawia przyjemność, odkryjecie, że ten Web Design wcale nie jest taki skomplikowany.
No to co? Gotowi na tydzień Web Designu ;)?
