Prośba o poradę / jak się rozwijać?

Witam wszystkich po raz pierwszy!

BARDZO chciałbym Was prosić o poradę.
Mam taki cel zawodowy, żeby stać się interaction designerem. Różnie się definiuje to stanowisko, ale mnie interesuje połączenie kogoś kto projektuje interfejsy ORAZ tworzy mockupy i prototypy stron www, aplikacji itd.
O tę drugą część chciałem zapytać.

Mój background:

• ogólnie to jestem grafikiem, ale...
• lata temu poznałem html-a i css, w starej wersji, gdy jeszcze kod pisało się w notatniku (ktoś z Was te czasy pamięta???? :)) a layout tworzyło się na tabelach. Dziś divy mnie ZMIAŻDZYŁY, jakie to teraz proste jest! ;)
• 100 lat temu liznąłem też trochę C++, ale tylko na poziomie bardzo hobbystycznym, zostało z tego tyle że rozumiem podstawy programowania (zmienna, pętle, obiekty itd)

Cel:

• Umieć przede wszystkim stworzyć prototyp aplki, strony, systemu: czyli animacja, proste przejścia, klikanie po nim, proste funkcje itd.
• Fajnie jak to później dev będzie mógł wykorzystać, aby nie pisać na nowo (praca zespołowa), więc nie chcę tego robić po prostu w programie do animacji czy w innym power poincie. Dlatego chcę się trochę rozwinąć programistycznie :)

Co robię teraz:
Zabrałem się już za naukę:

• HTML i CSS to podstawa, więc odświeżam sobie HTMLa i CSS3 - tu nie ma dyskusji, muszę być na bdb poziomie z tym.

• Java Script: postanowiłem zacząć od JS-a na początek jadę z http://eloquentjavascript.net/ i próbuję złapać podstawy.
  Zastanawiam się, czy to jest jednak dobry pomysł, czy nie lepiej od razu złapać jakiś framework typu bootstrap.
  Z jednej strony nie chcę być nie wiadomo jak genialnym programistą, ale z drugiej wiem ze inwestycja w JS powinna (chyba?) się opłacić w przyszłości. Nigdy nie wiadomo, co będzie człowiek robił zawodowo za parę lat...

Prośba o poradę czy warto poświęcić czas na JS czy od razu jechać z framerowkiem (jakim?). Trochę się boję, czy frame mnie nie bardzo ogranicza? Jak chce miec strone albo nietypową aplikację, jak to działa? jak bardzo mam pewne rzeczy z góry narzucone we frameworku, JEŚLI nie jestem super programistą, tylko takim przeciętnym, który co nieco ogarnia.

Nie ukrywam, że mam dość designerów którzy robią coś czego potem nie da się wdrożyć, nie chcę być pozniej hejtowany przez moich developerów, więc chcę się ogarnąć i robić dobrą robotę, w idealnym wypadku dostają ode mnie szkielet do poprawienia, napisania bardziej pro itd, ale żeby się chłopaki ucieszyli, jak będą musieli ze mną pracować :)

Może z Waszego doświadczenia, jak najszybciej złożyć projekt do pokazania klientowi (prototyp), żeby się to pozniej dało dalej przesłać do deva i nie był to dla niego dramat? Może są jakieś inne narzędzia (znam Axure), albo inne frameworki do takich zadań, a ja nie mam pojęcia o nich?

Dzięki z góry i sory za długiego posta
Tom

Może mało przydatna odpowiedź, ale co mi się rzuciło:

• Stron chyba nigdy nie "pisało się" w Notatniku. Mnóstwo osób tak robiło, ale to wynikało z nieznajomości narzędzi. Sam przez to przechodziłem.
• Nie bierz się od razu za frameworki, szczególnie w JS, bo zostaniesz typowym przeklejaczem pluginów do JQuery czy wspomnianego Bootstrapa.
• Z drugiej strony - nie wiem na ile zaawansowany JS będzie Ci potrzebny w tej robocie. HTML & CSS się przyda, choć też nie na poziomie "mastah".

A tak jeszcze trochę bardziej off-topic (choć może nie do końca):
Bardzo mi się podobają rzeczy takie jak te:

Nie widzę takich bajerów poza "demami", a fajnie by było, gdyby takie trendy zaczęły wchodzić - jakoś dodaje to płynności do wykonywanych działań, a nie tylko "klik-pokaż, klik-ukryj". Robisz takie cuda?
http://lab.hakim.se/flipside/
http://tympanus.net/Development/CreativeGooeyEffects/send.html
http://tympanus.net/Development/MorphingSearch/

@dzek69: bardzo przydatna odpowiedź, dzięki!

dzek69 napisał(a):

Może mało przydatna odpowiedź, ale co mi się rzuciło:

• Stron chyba nigdy nie "pisało się" w Notatniku. Mnóstwo osób tak robiło, ale to wynikało z nieznajomości narzędzi. Sam przez to przechodziłem.
• Nie bierz się od razu za frameworki, szczególnie w JS, bo zostaniesz typowym przeklejaczem pluginów do JQuery czy wspomnianego Bootstrapa.
• Z drugiej strony - nie wiem na ile zaawansowany JS będzie Ci potrzebny w tej robocie. HTML & CSS się przyda, choć też nie na poziomie "mastah".

Co do stron w notatniku, chodziło mi bardziej o zaznaczenie okresu, w erze dinozaurów ;)
Dzięki za opinię odnośnie JS, te przykłady które podałeś są super i od razu odpowiadam, dlatego chcę się uczyć, żeby móc takie rzeczy pisać.
Wizualnie? nie mam problemu z wymyślaniem takich rzeczy, design to moje życie :) jednak poddałeś mi tu ciekawą myśl, przeciętny frontendowiec faktycznie rzadko się zajmuje takimi elementami. To jest w moim odczuciu robota nowoczesnego designera, ale tu już potrzebny jest Java Script. Czy możesz ocenić, jak zaawansowany JS jest użyty w podanych przez Ciebie przykładach?

Podglądam np. ten https://github.com/hakimel/css/tree/master/flipside
I tu trochę chyba sama się nasuwa odpowiedź, framework tego nie załatwi, jeśli chcę robić coś bardziej kreatywnego.
Dałeś mi do myślenia :)

BTW: pierwszy raz widzę plik scss, widzę że to taki css dla JS-a, ciekawe!

notatnik jest cool :)

Chciałbym jeszcze dopytać o rzeczy tego typu: http://codepen.io/vineethtr/pen/VYRzaV

Widzę, że to jest zrobione w HTML + CSS + JS, ale w html jest podane JADE i kod jest mało html-owy, CSS to samo ma dziwne (dla mnie) elementy jak

&:nth-of-type(3){
      top: 45px;
      @include transition( top 0.3s  ease .3s, transform .3s ease-out .1s );
      @include animation(mrotl 2s cubic-bezier(.5, .2, .2, 1.01) );
    }

Możecie mnie nieco naprowadzić, co to za cudo i jak się tego nauczyć?

Od końca:

scss to nie css dla js ;) Tu więcej: http://sass-lang.com/guide --- to nie ma z javascriptem nic wspólnego. Pliki scss nie są w ogóle używane przez przeglądarkę - one są tylko źródłem. Z tego źródła (zazwyczaj) przed wgraniem pliku na serwer tworzy się plik css.

Wskazane przykłady korzystają ze śladowych ilości JS. Wszystko obraca się wokół CSS i.. SVG ;) Z tym ostatnim polecam się zapoznać, bo to generalnie przyszłość (jeszcze nie teraźniejszość na moje).

Takie bajerki są fajne do tworzenia (web)aplikacji.

Skoro się spodobało, to zajrzyj w ten mój post: http://4programmers.net/Forum/1121562
Polecam subskrypcję RSS poszczególnych stron, naprawdę jest wiele świetnych materiałów, pomysłów, wiedzy, której nie znajdziesz w "kursach css". A wspomniane Collective zamierzam przeczytać wszystkie, póki co mam za sobą 138-bieżący ;)

@TomKrol: Zapewne pytasz o @include? Ot to tylko ciekawostka z SASS/SCSS - taki zapis spowoduje wygenerowanie w skompilowanym do css pliku właściwości CSS z zapisanymi prefixami dla przeglądarek, tj:

transition: top 0.3s  ease .3s, transform .3s ease-out .1s;
-ms-transition: top 0.3s  ease .3s, transform .3s ease-out .1s;
-o-transition: top 0.3s  ease .3s, transform .3s ease-out .1s;
-moz-transition: top 0.3s  ease .3s, transform .3s ease-out .1s;
-webkit-transition: top 0.3s  ease .3s, transform .3s ease-out .1s;

Tak przygotowana funkcja zazwyczaj ogarnia też alternatywne składnie dla przeglądarek (jeżeli jakiś ficzer jest jeszcze nowy to różne przeglądarki mogą częściowo wspierać różne składnie). Zainteresuj się głębiej SASS-em to za max 3 dni wszystko będzie jasne ;)

@dzek69
To niesamowite, wchodzę na forum, żeby trochę się dowiedzieć o JS, a okazuje się że jest jeszcze Saas, o którym nawet nie słyszałem, a może być mega ciekawą rzeczą dla mnie! Szaleństwo :) i ile możliwości nauki. Serdeczne dzięki!

SVG rozumiem jako format wektorowy, czy ten skrót ma jeszcze jakieś inne zastosowanie?
Saas to jak rozumiem jakaś forma prostego pisania skryptów, które później są "kompilowane" do pliku css i w ten sposób dopiero interpretowane na stronie przez przeglądarkę?

SVG tak, wektorowe obrazy, które można animować i stylować także przez CSS.

Tak, SASS po skompilowaniu staje się zwykłym plikiem CSS. Wszystko masz w dokumentacji. Nauki samego SASSa nie ma za wiele, bo to tak naprawdę rozszerzona składnia dla CSS i nic więcej :)

A co sądzicie o LESS? Różni się dużo od SASS?

Czy SASS i SCSS to jest to samo?