Web design - nauka

Hej.

Chciałbym porozmawiać o szeroko pojętej dziedzinie "Web design". Nie chodzi mi o naukę podstaw tworzenia stron, tylko o to żeby sprawić aby były ładne i funkcjonalne. Na dzień dzisiejszy o ile jestem w stanie stwierdzić że dana strona jest piękna/brzydka to przy jakiejkolwiek próbie modyfikacji istniejącego szablonu psuję go całkowicie.

Zobrazowanie: http://thecodinglove.com/post/103027049922/when-i-try-to-edit-some-lines-of-the-websites-css

Czy da się tego w ogóle nauczyć? A może trzeba mieć talent i bez niego nie da rady?
Zastanawiam się nad kupnem ksiażki: http://helion.pl/ksiazki/head-first-web-design-edycja-polska-ethan-watrall-jeff-siarto,hfwdep.htm , ale nie wiem czy to nie będą pieniądze wyrzucone w błoto :).

Edytując szablon robisz to "na czuja", czy wcześniej robisz sobie podgląd graficzny? Jeśli stosujesz pierwszą opcję, to nic dziwnego, że tak się dzieje ;) Jeśli o mnie chodzi to najpierw nanoszę odpowiednie zmiany na projekcie graficznym, a później się robi modyfikacje / tnie od nowa. Zależy co aktualnie mi jest potrzebne i co będzie szybciej :)

Zdefiniuj proszę "podgląd graficzny". Chodzi o szkic na kartce? Standardowo przerabiam po 1 elemencie i odświeżam. Po jakimś czasie dochodzę do tego że wygląda to jakbym przeżuł i wypluł.

Moim problemem jest też to że ja nie mam pojęcia co ja bym chciał właściwie uzyskać. Nie wiem gdzie umieścić jakie przyciski, jakie powinny być krawędzie, jak dopasowane kolory, jak czcionka, gdzie i ile odnośników powinno być żeby było czytelnie etc.

Mam na myśli projekt w PS/Gimp/inny program graficzny. Jak nie masz oryginalnego PSD robisz zrzut ekranu i nanosisz swoje poprawki. W tedy możesz dostosować modyfikacje tak, aby komponowały się z szablonem. Na bieżąco możesz sprawdzić różne warianty każdego z elementów, itp. Nie tracisz, w tedy czasu na poprawki w kodzie i później wycofywanie się z nich bo masz już podgląd i wiesz co robisz :)

Co do rozmieszczenia itp, to w sieci jest pełno stron z artykułami i opisami jak powinno się rozmieszczać elementy na stronach, na przykład http://goodui.org/ albo http://webdesign.tutsplus.com/ Trzeba tylko poszukać no i ćwiczyć ;)

Da się nauczyć, ale trudniej jeśli jesteś typowym programistą. Mam w teamie osoby, które absolutnie nie tykają designu i CSS, bo po prostu nie mają do tego predyspozycji i trudno im coś stworzyć, żeby nie namieszać - w szczególności jeśli projekt nie jest prostą stronką. Początki są trudne, bo dużo rzeczy nie wychodzi i trudno znaleźć rozwiązanie, bo problem może nie leżeć bezpośrednio w kodzie, a gdzieś pomiędzy.

Kilka rad:

• ogarnij podstawy kolorów, typografii (dość dobry kurs jest na codeschool), UX (don't make me think Kruga to dobra pozycja)
• załóż konto na jakimś serwisie dla designerów (np. behance), ewentualnie codepenie i poszukaj inspiracji (codrops też jest dobre)
• spróbuj reprodukować projekty stworzone przez innych
• rozmawiaj z innymi designerami - serio, jeśli trafisz na jakiś ciekawy projekt i nie rozumiesz jakiegoś podejścia, to po prostu zapytaj twórcy; nie obawiaj się, jeśli jest to jakiś guru z Facebooka, bo często oni są najbardziej pomocni ;)
• prototypuj (np. uxpin, axure) - to pozwala łatwiej wykształcić w sobie poczucie, że coś jest schludne, przejrzyste; ewentualnie rysuj, ale na tablecie (łatwiej korekty wprowadzić, podzielić się z kimś szkicem); nie polecam zaczynać czegoś od kodu - jak już masz rozrysowaną koncepcję, chociażby proste prototypy, to wtedy możesz przenosić to na kod

jest o tym strona Smashing Magazine: http://smashingmagazine.com

jeśli chodzi o książki to klasyką jest "Nie każ mi myśleć" Steve Krug

a jeśli chodzi o moje własne przemyślenia to:

1. najgorzej jak graficy (nie urażając grafików) biorą się do webdesignu. Wtedy stronka jest ładna, ale całkowicie niefunkcjonalna, z nieprzemyślaną strukturą, słabym usability, oraz całkowicie toporna w użyciu. Koleś projektuje ją w Photoshopie, a potem kleci coś na szybko. Dobrze HTMLa nie zna nawet. JavaScript to na oczy nie widział, więc wali jQuery i 500 pluginów. A efekt jest taki, że nie da się wejść na taką stronę bez zamułki.

Więc jednak do tworzenia stron umiejetności techniczne również są potrzebne (chyba że się pracuje w zespole z jakimś programistą, to co innego).

1. mody się zmieniają. Teraz prym wiedzie parallax scrolling i wyskakujące animacje (bardzo rzadko działające płynnie), ale to minie. Kiedyś wyznacznikiem "modnej strony" było mieć jakiś slider/carousel na głównej stronie. Jeszcze wcześniej modne były liczniki wejść czy migający tekst... Jutro będą to zdjęcia kotów.

Warto umieć zaimplementować "modną rzecz" (w razie czego, gdyby klient chciał), ale trzeba się liczyć z tym, że za pół roku te wszystkie strony, na których teraz jest parallax scrolling (chociażby), i są w modnym stylu "one page" trzeba będzie zmieniać, żeby dostosować je do kolejnej mody.

1. stronę, którą się zrobi trzeba samemu przetestować. Jest wiele stron w necie, które sprawiają, jakby nikt ich nie testował pod kątem użyteczności (nawet taki głupi test, że wchodzę na stronę, którą robię i wcielam się w rolę zwykłego użytkownika i klikam co by klikał user, próbując czegoś wyszukać chociażby. Prawie nikt tego nie robi. A powinni. Masę jest stron, na których nic nie można znaleźć... nawet czasem ładnie wyglądają, ale co z tego, skoro ich użytkowanie jest frustrujące?

Dlatego myślę, że ważniejsze są jakieś ogólne zasady projektowania / zdrowego rozsądku / użyteczności, a nie kolejna świecąca moda (której większość łeb-dizajnerów ulega i efekty są zwykle kiepskie)

Czy da się tego w ogóle nauczyć? A może trzeba mieć talent i bez niego nie da rady?

Nie wiem. reprezentuję bardziej techniczną (HTML/CSS/JavaScript) i zdroworozsądkową stronę tej dziedziny, niż związaną ściśle z webdesignem. Ale z obserwacji - to bardzo mało ludzi ma talent, więc nawet jak będziesz średnio dobry to i tak mógłbyś robić lepsze strony niż 90% w necie.

Zresztą ogólnie myślę, że to o co pytasz, to często naprawdę kilka różnych zawodów:

• grafik (Photoshopy itp.)

• UX designer, musi się znać na tym, żeby zrobić stronę przyjazną użytkownikowi, żeby strona nie była tylko ładna, ale i praktyczna (wbrew pozorom to nie takie proste).

• koder HTML/CSS, czyli przenosi koncepcję do HTMLa, koduje grafikę, bawi się CSSami etc.

• programista, bo jednak webdesign to nie wszystko. Strony dzisiaj wymagają również programowania.

czasem się to zlewa w 2 albo w jedno nawet (zależy od sytuacji, firmy itp. a jak robisz freelancerkę to zwykle jesteś wszystkim naraz), ale myślę, że ten, kto np. umie zaprojektować stronę graficznie w Photoshopie, niekoniecznie będzie ją umiał zakodować w HTML, czy napisać interakcję w JavaScripcie. No i UX. Też nie każdy grafik ani nie każdy programista ma do tego dryg. Można umieć programować czy grafikować, ale nie mieć wyobraźni i wyczucia, żeby zrobić coś przyjaznego użytkownikowi.

Od siebie polece hackdesign - duzo fajnych materialow za darmo

Dziękuje wszystkim za odpowiedź. Szczególnie za rzucenie odnośnikami do stron/materiałów. Przejże je i spojrzę na to od nowa.

@LukeJL Nie chodziło mi o to że techniczna strona nie jest istotna, tylko że ją potrafię ogarnąć sam. Od niedawna mam dostęp do frontu i trochę mi się to spodobało. I o ile firma może sobie pozwolić na rozdzielenie grafik/frontendowiec/backendowiec to pisząc coś dla siebie już jestem sam. Tragiczny wygląd nie nastraja dobrze do dalszego rozwijania projektu a z drugiej strony szkoda kasy na szablon jeżeli jest to projekt do szuflady :).