Strona WWW Front-End

Witam piszę ten temat ,aby otrzymać opinię a co za tym idzie krytykę mojej strony, interesuje się front-end już ponad rok i dłubie różne rzeczy. Co warto zmienić a może nic nie zmieniać? Czy z takim portfolio to nie wstyd. Najbardziej jakby ktoś mi napisał jakiś dev zaznajomy z tematem co robię źle http://krystianwitkowski.pl/
Pozdrawiam

Ładne zestawienie kolorów :)

...ale jak na mój gust trochę za pstrokato i zbyt męcząco dla oczu (ta klawiatura w tle w kolejnych fragmentach, masa różnych animacji atakujących raz z lewej, raz z prawej, przejść, etc).
Układ sprawia wrażenie dość chaotycznego, np. mam wrażenie, że ta informacja w górnym prawym rogu nie jest tam, gdzie klient by jej szukał, szczególnie że jakieś informacje kontaktowe masz po lewej stronie.

Jak patrzę na tą stronę mam skojarzenie z takim piosenkarzem z The Voice (lub innego, podobnego szoł), który bardzo fajnie śpiewa, ale zamiast subtelnie poprowadzić głos, zaczyna się drzeć, żeby jak najwięcej w jednym kawałku pokazać ;)

Wchodzę.
Widzę "Cześć".
"Bez sensu" - Myślę.
Wychodzę.

Dlaczego miałbym klikać gdzieś, żeby zobaczyć stronę. Całkowicie bez sensu, całkowicie nie user friendly. Wywal to.

Endrju napisał(a):

Wchodzę.
Widzę "Cześć".
"Bez sensu" - Myślę.
Wychodzę.

Dlaczego miałbym klikać gdzieś, żeby zobaczyć stronę. Całkowicie bez sensu, całkowicie nie user friendly. Wywal to.

Nie miałem w sumie na to pomysłu więc tak zostawiłem no cóż, i tak miałem to usunąć.

Od zawsze towarzyszy mi cecha, która bezpośrednio przekłada się na moją pracę, jest to wszechobecna dbałość o szczegóły, staram się ,aby każdy projekt odznaczał się niezwykłą dbałośćią o detale i jak najbardziej odwzorowywał to czego oczekuje ode mnie klient.

Pitu, pitu. Dbałość o detale, a:

• przecinek przed spacją zamiast po
• literówka (dbałośćią --> dbałością). O ironio!
• ode mnie --> ode mnie

I dalej znowu przecinek i spacja: moim celem jest zawsze ,aby końcowy efekt.

XD

Poza tym wyskakujące animacje przy każdej okazji miałyby trochę sensu może, gdyby strona nie przeładowywała się. Jednak jak klikam w menu i najpierw czekam z pół sekundy aż strona się przeładuje, potem jeszcze czekam aż debilna animacja się załaduje. Przypomina mi to strony Flashowe sprzed 10 lat czy więcej.

Ale jest na to prosty sposób - wypieprzyć niepotrzebne animacje i od razu strona będzie lepsza. A jeśli nie chcesz wypieprzać, to przemyśl chociaż wartość opóźnień, bo niektóre się ładują za wolno, że trzeba czekać, a niektóre atakują że oczopląsu można dostać.

No i mobilki. Odpalam stronę na iPadzie i pokazują mi się te klawiatury. Ale nie mogę nigdzie kliknąć. Dopiero się łapię, że jest hamburger (co jest bez sensu w tym przypadku - po co hamburger, skoro na mobilnej stronie po wejściu i tak nic nie ma i jedyne co można zrobić to kliknąć hamburgera?

Czyli ogólnie - wygląda to na strasznie niedbale stworzoną stronę nad którą trzeba jeszcze dużo popracować. Ale wydaje mi się, że ma potencjał. Wizualnie mi się podoba, nie jest przeładowana, a ten zielony kolor nawet fajny. Tyle, że obcowanie z tą stroną jest koszmarne (choćby te animacje).

Layout przyjemny dla oka ale całkowicie bezużyteczny:

• strona startowa - po co? (dodatkowo można przeskrolować stronę zanim się ją zobaczy),
• strona główna nie pokazuje czego dotyczy witryna - ZERO kontentu gdy użytkownik nie najedzie na kafel, po najechaniu zresztą też - niewiele mówiące nagłówki, zero opisu, wszystko domyślnie ukryte, nie wiadomo co czym jest,
• nieklikalne logo, błąd wyświetlania info (interferuje z drugim kaflem),
• rozbicie szczątkowej treści na kilka podstron,
• animacje spowalniające i utrudniające nawigację,
• wielkie przestrzenie, mało treści (chyba się powtarzam),

Cały kontent można by było zawrzeć na jednej stronie, bez zbędnych bajerów - strona ma przede wszystkim w jak najlepszy sposób prezentować treść i ułatwiać nawiację, jeśli to nie jest spełnione to reszta nie ma znaczenia - grafiki i efekty służą do wyeksponowania treści (i same powinny ją stanowić) oraz ułatwienia interakcji. Ogólnie idziesz w bardzo złym kierunku - poczytaj o usability i user experience bo to u Ciebie leży.

moim zdaniem na początku lepiej skupić się na prostych, czytelnych stronach, z dobrym kodem, wcięciami i responsywnością oraz działaniem
prócz tego co wyżej dodałbym jeszcze:
strona u mnie na smartfonie z androidem kilka razy wyświetla tę klawiaturę i nic więcej, sprawdzałeś kompatybilność?
strona nie działa poprawnie na explorer 11 (pół biedy ze starszymi i tak niewiele osób używa) sprawdzałeś to?

na plus czytelny kod i szybkość

Czy z takim portfolio to nie wstyd.

Jeżeli portfolio to trochę wstyd, bo masz tam "lorem ipsum...", te same grafiki w tłach pod realizacjami i puste realizacje (informacja o niedostępnej stronie nie jest zachęcająca).
Jeżeli to podmienisz, na dodatek sam to zrobiłeś a nie skopiowałeś od kogoś innego to czemu by nie spróbować? Nikt Cię nie wyśmieje (a jeżeli to zrobi to tylko wystawi sobie złe świadectwo), w najgorszym przypadku nie dostaniesz odpowiedzi ;)
Kilka uwag ode mnie:

• style inline? Serio? Mam nadzieję, że nie ma tam żadnego important?
• po wejściu na stronę masz "Cześć" i krótką animację "daszka", ja bym go bardziej wyróżnił (np. poprzez powtarzanie animacji w pętli), bo trzeba się domyślić, że to on wywołuje jakąś akcję a nie napis cześć na który zdaje się wskazywać (dopiero po kliknięciu na niego wiem czemu jest skierowany w górę);
• w zakładce umiejętności zjadło Ci literkę "i" w prawym górnym rogu;
• coś jest nie tak z informacją o kontakcie, bo nawet poruszając myszką w obrębie turkusowego kwadratu co chwile pojawia się i znika, przez co jest nieużywalny;
• co oznaczają procenty? Skąd masz wiedzę, że opanowałeś JS w 60% a nie np. 52,49201%? I skąd wiesz kiedy będzie 100%? Jeżeli ktoś zechce to bez problemu Ci udowodni to, że znasz go słabiej niż sądzisz, i że z całą pewnością nie jest to 60%. Zamiast tego wpisz po prostu znajomość X i ewentualnie jakiś krótki opis;
• po co linki do portali społecznościowych jeżeli Linkedin nie działa w ogóle a Twitter i FB świecą pustkami? To jest ok jeżeli w miarę aktywnie dzielisz się ze światem wiedzą/materiałami branżowymi, tak to bez sensu;
• bardziej kwestia gustu - niektóre animacje nie powalają, np. na stronie 'usługi' - czemu mają służyć obracające się elementy? Jest wiele innych animacji, które pozwolą Ci wyróżnić dany element jeżeli chcesz a jednocześnie będą lepiej się prezentować. Podobnie animacje pojawiania się zawartości, takie przesuwanie po całym ekranie średnio wygląda, o wiele lepiej wygląda delikatna animacja przesunięcia (o kilka/naście %) z opacity. Inną kwestią jest to, że fajnie by to wyglądało gdyby to była jedna strona (czyli bez przeładowywania), gdzie kliknięcie na jeden element menu powoduje ukrycie jednej zawartości a pokazanie kolejnej. Wtedy takie animacje nabierają większego sensu;
• jeżeli nie możesz pozwolić sobie na kopirajtera to przeczytaj swoje teksty kilka razy, daj do sprawdzenia innym (np. znajomym, którzy nie gardzą książkami) bo masz sporo błędów jak na taką ilość treści, np.:

Jestem początkującym front-end developerem, staram się w każdej wolnej chwili poświecać czas na zgłębianiu technik front-endu.

• powtórzenia, zjedzony znak diakrytyczny;

jest to wszechobecna dbałość o szczegóły, staram się **,**aby
spację stawiamy PO przecinku, nie przed;

jak najbardziej odwzorowywał to czego oczekuje ode mnie klient.
piszemy ode mnie;

Do każdego projektu podchodzę indywidualnie dlatego **do każdego projektu **przygotowuje się inaczej stosując odpowiednie narzędzia
znów powtórzenia;

moim celem jest zawsze **,**aby końcowy efekt był pokrywający się w założeniach projektu.
znowu spacja w złym miejscu.

Oprócz tego same zdania są mało eleganckie. Starasz się konstruować zdania złożone, jednak różnie Ci to wychodzi. Wiem, że profil zawodu nie wymaga tworzenia pięknych wypowiedzi, jednak jeżeli chwalisz się dbałością o szczegóły to ją pokaż. Jak (już pomijając inne błędy) brzmi

efekt był pokrywający się w założeniach projektu
?
Czy nie lepiej i poprawniej brzmi np.

efekt pokrywał się z założeniami
?

Ogólnie to popraw kilka rzeczy i wysyłaj CV, w Warszawie (do której masz najbliżej, chyba, że mapa na stronie "Kontakt" jest "tak o", bo wtedy lepiej się jej pozbyć) pewnie się gdzieś załapiesz. Jeżeli nie teraz to za kilka tygodni/miesięcy. Dorzuć do tego informacje, że jesteś samoukiem, bo tym jak najbardziej warto się chwalić.

jeszcze przypomniał mi sie mały tips
umieszczając sznurka do strony w CV-pdf, często po kliku u rekrutera otwiera się ona w domyślnym IE (nawet jeśli używa innej) więc warto w pierwszej kolejności sprawdzać stronę na IE aby nie było wtopy ;)
szczególnie jak używamy animacji w stylu animate.css

Moim skromnym zdaniem zamiast używać 'display:table' w css'ie lepiej jest użyć flexboxa.

Dzięki za odpowiedzi na pewno wszystko co napisaliście wezmę pod uwagę ale raczej z takim portfolio nie będę chciał się raczej dzielić, ogólnie kod strony pisałem od 0, z jakiegoś psd jakieś pół roku temu a myślę ,że niektóre rzeczy lepiej bym zrobił więc będę chciał coś lepszego zrobić.

krystian090 napisał(a):

ogólnie kod strony pisałem od 0,.

na pewno?
w kodzie jest
Copyright (c) 2013 Daniel Eden

;)

@krystian090 daj znać jak skończysz nad nią pracować, jestem ciekawa efektu końcowego :)