Strona portfolio. Jak się za to zabrać? – cz. 1 – Projekt Graficzny.

Mija kolejny tydzień a ja ciągle nie wrzuciłem posta opisującego mój projekt w konkursie Daj się Poznać 2017. Co to za ociąganie? Nie ma takiego lenistwa! Czas podzielić się ze Światem swoim projektem 🙂 Co robię? Osobistą stronę portfolio. To ważna karta w tali każdego młodego człowieka aspirującego do zostania programistą, zwłaszcza w technologiach webowych. Zaczynamy 🙂

Jak się za to zabrać?

Budowę strony internetowej czy to osobistej czy nie, należy potraktować jak każde inne przedsięwzięcie czy projekt. Aby zrealizować to sprawnie i przejrzyście należy rozbić wszystko na etapy. Ja w mojej pracy wyróżniłem następujące etapy:

  1. Tworzenie projektu graficznego strony – Layoutu.
  2. Stworzenie kodu HTML i CSS pod projekt graficzny.
  3. Testy HTML i CSS.
  4. Zaprogramowanie zachowania strony przy pomocy JavaScriptu.
  5. Testy JS’a
  6. Wdrożenie strony.

Mój plan pracy jest daleki od optymalnego ze względu na stosunkowo słabą znajomość tematu. Zapewne doświadczeni specjaliści zaplanowali by to lepiej i użyli wyrafinowanych technik lecz ja jeszcze takim nie jestem. Ale będę nim 🙂

Plan taki czy inny. Ważne aby go realizować bo to prowadzi do ewentualnego sukcesu projektu.

Projekt Graficzny- jak to ugryźć?

Cały ten wpis będzie dotyczył projektu graficznego strony i narazie nie zobaczymy jeszcze żadnego kodu. Bo i po co kodzić kiedy nie wiadomo co kodzić? No to zaraz się dowiemy co kodzić 🙂 Przed nami sporo użytecznych informacji.

W zasadzie przygotowanie projektu graficznego nie leży w kompetencjach Developera czy Programisty. W praktyce dostaje on gotowy projekt i na tyle na ile jest to niezbędne nie martwi się układem elementów, UX itp. Po prostu ma wdrożyć rozwiązania powstałe w głowie klienta czy projektanta. Dobrze jednak rozumieć czego się od nas oczekuje i umieć “czytać” layouty.

Co ty z tym Layoutem?

Na internecie jest mnóstwo gotowych projektów/layoutów czekających aby je wdrożyć. Jeśli chcesz możesz ściągnąć jeden z nich i po prostu pozmieniać tekst. No ale jak ktoś się zna to się szybko zorientuje i nasza wspaniała strona nie będzie robiła na nim/niej wielkiego wrażenia. Napiszę o tym trochę więcej w osobnym poście.

Ja jako, że mam aspiracje graficzne postanowiłem stworzyć swój własny projekt graficzny. TUTAJ opisałem oprogramowanie jakie można użyć w tym celu. Czy projekt będzie się podobał czy nie to już kwestia względna. Każdy ma inne poczucie estetyki.

W ramach komentarza cały zeszły tydzień pracowałem i kodziłem projekt portfolio który ostatecznie w niedzielę trafił “do kosza”. Po prostu zaprojektowałem coś co po kilku dniach przestało mi się podobać. Tak też się czasem zdarza. Poświęcasz czas czemuś bez perspektyw. Taka praca projektanta…

Mój projekt graficzny – strona portfolio.

Zanim zabierzesz się do projektowania strony zadaj sobie podstawowe pytanie. Po co go robisz i dla kogo? Jakie funkcje ma on spełniać i do kogo dotrzeć. Po co komuś strona która nie służy żadnemu celu? Bez sensu. To już lepiej iść na spacer do parku niż siedzieć godzinami nad czymś co jest kompletnie nieprzydatne.

Jakie funkcje ma spełniać moja strona?

  1. Ma być pół-komercyjna tzn. nie zamierzam zdobywać nią klientów ale ma się podobać użytkownikowi i pomóc mi znaleść dobrą pracę.
  2. Musi mi się podobać  bo przecież to “moje” portfolio nie zrobię strony z jednorożcami kiedy wolę pegazy.
  3. Ma być dla mnie poligonem do nauki gdzie łączę zdobywanie wiedzy i tworzenie praktycznych rzeczy. Po co kodzić dziesiątki layoutów “bez duszy” i zastosowania?

Kiedy mam już te kwestię wyklarowaną myślę nad tym co chcę zamieścić na stronie. I tu się zaczyna zabawa…

Co mam tam zamieścić?

Bez zagłębiania się tu zbytnio w UX (więcej na ten temat kiedy indziej) postanowiłem umieścić w moim portfolio poszczególne sekcje:

  1. Sekcja HERO która jest w istocie ekranem powitalnym który ma na celu zainteresowanie użytkownika.
  2. Sekcja HOME – tutaj krótko o sobie ( lub firmie ) i co użytkownik/klient może zyskać w perspektywie pracy ze mną.
  3. Sekcja What I do – opisuję lub pokazuję co dokładnie robię.
  4. Podsekcja Testimonials – Opinie na mój temat osób które już ze mną pracowały.
  5. Sekcja About Me – Tutaj trochę info o mnie i moich kompetencjach.
  6. Podsekcja Certyficates – tutaj pokazuje, że edukacja i rozwój są dla mnie ważne. To się zawsze liczy.
  7. Sekcja Contact – w końcu jak użytkownik doszedł to tego etapu, może tutaj zdobyć moje dane kontaktowe.

I gotowe 🙂

Jak to wygląda?

Długawy ten wstęp. Czas pokazać jakiś konkret. Poniżej pokazuje projekt graficzny z uwzględnionymi aktywnymi elementami każdej sekcji.

Komentarz do projektu.

Uważam, że mój projekt jest dość minimalistyczny w kontekście tekstu. Zamieściłem kilka grafik i pobawiłem się kolorami. To co tu pokazuje jest też dość orientacyjne i ostateczna strona będzie wyglądała nieco inaczej. Dlaczego? Normalnie jak dostaje się projekt od designera powinien on być “pixel perfect” tzn. wyglądać dokładnie tak jak w pliku warstwowym. W moim przypadku sam sobie projektuje i koduje więc robię to, co ostatecznie uważam za bardziej estetyczne. Nie koniecznie dokładnie tak jak w oryginalnym projekcie.

Aktywne elementy projektu.

SEKCJA HERO

  1. Animacja poklatkowa z przyciskiem resetu.
  2. Aktywny przycisk skrolowania – wektor.

SEKCJA HOME

  1. Aktywne logo – wektor.
  2. Rozwijane Menu.
  3. Aktywny przycisk skrolowania – wektor.

SEKCJA WHAT I DO

  1. Kafelkowa animacja 3D pokazująca portfolio.
  2. Aktywny przycisk skrolowania – wektor.

SEKCJA TESTIMONIALS

  1. Slider

SEKCJA ABOUT ME

  1. Galeria technologi z użyciem wektorów i kolorów na hoverze (po najechaniu).
  2. Aktywny przycisk skrolowania – wektor.

SEKCJA CERTIFICATES

  1. Aktywny przycisk przenoszący do zewnętrznej galerii – wektor.

SEKCJA CONTACT

  1. Aktywny przycisk wysyłający maila – wektor.

Dodatkowe informacje.

Jeśli ktoś sam chciałby się pobawić w projektowanie własnych layoutów mam kilka informacji. Ja na to patrzę dość logicznie tzn synteza kolorów i kształtów. Potem dochodzi poczucie estetyki twórcy, umiejętność obsługi software’u no i jak we wszystkim godziny pracy i ćwiczeń.

TUTAJ inspiracja kolorystyczna.

TUTAJ jest świetna strona z kolorami, można znaleść odpowiednią barwę jeśli jej brakuje.

TUTAJ trochę fajnych informacji o czcionkach.

TUTAJ darmowa strona stock’owa tzn. masa darmowych grafik. Rasterowych i wektorowych. Pełno inspiracji…

Podsumowanie.

Tak mniej więcej wygląda pierwszy etap prac nad moją stroną portfolio. Etap ten można całkowicie pominąć lub znacznie uprościć korzystając z gotowych projektów ale nie byłbym sobą gdybym poszedł na łatwiznę 🙂

W kolejnych częściach serii będę stopniowo opisywał kodowanie wszystkich tych elementów abyście mogli wykorzystać tą wiedzę do budowy własnych stron 🙂

Pozostajemy w kontakcie.

  • Tomek Tomek

    Dobry post, ambitny plan (głównie te animacje), natomiast w „Jak się za to zabrać?” punkt 3 i 5 bym dał po 4 i najlepiej zlecił komuś innemu. Dlaczego? Bo gdy pracujesz nad stroną, to na bieżąco widzisz czy coś jest takie jak ma być czy nie, ale pewnych rzeczy nie wyłapujesz, bo jesteś człowiekiem. Dlatego lepiej żeby dodatkowo ktoś inny to przeklikał. Podział testów na dwa etapy sprawia, że musisz przeklikać to dwa razy. Owszem przeklikanie 2 razy jest lepsze niż jeden raz, ale jeszcze lepiej zrobić to jak już jest wszystko, bo testujesz wszystko 2 razy, a nie części. Dodatkowo łatwiej Ci będzie przeklikać jak już będą JSy. Polecam też https://www.browserstack.com/ (płatne, ale może można znaleźć coś alternatywnego, darmowego), żeby przeklikać też na innych systemach, urządzeniach.