Jak stworzyć profesjonalne portfolio?

Szukając pracy jako front-end developer warto przede wszystkim zadbać o swoją wizytówkę w sieci. Profesjonalne portfolio to nie tylko demonstracja Twoich umiejętności i zrealizowanych projektów, ale także prezentacja potencjału dla przyszłych pracodawców. Im bardziej będzie ono dopracowane, tym większe szanse, że ktoś będzie chciał nawiązać z Tobą współpracę. Jak zatem stworzyć profesjonalne portfolio, które będzie przykuwać uwagę innych i wyróżniać się na tle konkurencji? W dzisiejszym wpisie pokażę Wam, jak krok po kroku przygotować efektywne portfolio, z jakich narzędzi i pomocy skorzystać oraz jakimi zasadami kierować się przy jego projektowaniu.

Od czego zacząć?

Proces tworzenia portfolio można podzielić na 4 główne etapy:

photo-1429051781835-9f2c0a9df6e4

1. Plan i szkic

Na początku warto wypisać sobie kluczowe elementy, które chcemy, żeby znalazły się na naszej stronie. Nie ma tutaj z góry określonych komponentów. Jest jednak kilka detali, na które warto zwrócić uwagę. Do takich elementów można zaliczyć:

  • logo – zazwyczaj umieszczane jest w lewym górnym rogu,
  • nawigację – powinna być prosta i przejrzysta,
  • główne zdjęcie w tle (ang. hero image) – krótki tutorial, jak je przygotować znajduje się tutaj,
  • tytuł i slogan/hasło reklamowe (ang. tag line) – kilka słów o tym, kim jesteś i czym się zajmujesz,
  • portfolio – Twoje dotychczasowe projekty (jeśli już jakieś posiadasz); zadbaj o to, aby były przedstawione w dobrej rozdzielczości, zawierały krótki opis i link do wersji oryginalnej,
  • opinie klientów (ang. testimonials) – jeśli masz taką możliwość, podziel się nimi!,
  • formularz kontaktowy – koniecznie zadbaj o możliwość skontaktowania się z Tobą.

Następnie przechodzimy do rozrysowania naszego projektu. W tym celu warto skorzystać z darmowego narzędzia online – Moqups. Aplikacja ta pozwala na wstawienie i ułożenie gotowych elementów strony WWW do pustego arkusza i nie wymaga zdolności artystycznych. Projekt można potem zapisać, udostępnić lub wydrukować.

337_min

2. Organizacja projektu

To moment, w którym gromadzimy niezbędne grafiki, zdjęcia, ikony czy fonty. Warto pogrupować je w odpowiednich folderach, aby mieć do nich łatwy dostęp w momencie kodowania. Oczywiście w Internecie znajdziemy mnóstwo stron z darmowym dostępem do plików graficznych, dlatego temu tematowi poświęcę osobny wpis.

negativespace1-24

3. Projektowanie layout’u w Photoshopie

Kiedy mamy już gotowy szkic i przygotowane grafiki nadchodzi moment, kiedy warto te dwa punkty połączyć i przenieść bezpośrednio do Photoshopa. Projektowanie layout’u w PS może wydawać się początkowo skomplikowane, zwłaszcza jeśli nie pracujemy z tym programem na co dzień. Z pomocą przychodzą dostępne tutoriale online. Poniżej zamieszczam kilka darmowych źródeł:

negativespace-151

4. Kodowanie strony głównej

Gdy nasz layout w Photoshopie jest już gotowy zostaje nam najważniejsze zadanie, czyli zakodowanie strony głównej. O tym jednak pisać nie będę, gdyż tutaj wszystko zależy już od Waszej znajomości HTML, CSS i JavaScriptu.

 

Wskazówki i dobre praktyki

kaboompics.com_Yellow notebook on the grass

Od razu Was uprzedzę, że nie istnieje żaden kodeks dobrych praktyk przy projektowaniu portfolio. Wszystko zależy od Waszych umiejętności, pomysłu i inwencji czy też celu takiej wizytówki. Zebrałam jednak kilka przydatnych wskazówek, które warto mieć na uwadze, projektując swoją stronę.

1. Bądź sobą i pokaż swoją osobowość

Projektując swoje portfolio postaw na indywidualizm. Nie kopiuj designu stron, które Ci się podobają. Odwiedzający Twoją stronę chcą Cię poznać. Spróbuj zatem uwypuklić takie elementy, które podkreślą Twoją osobowość.

2. Zdefiniuj swój cel

Określ, w jakim celu i dla kogo tworzysz portfolio, a następnie dostosuj jego wygląd i słownictwo. Zastanów się, czy strona ma służyć znalezieniu pracy (zamieszczaj wtedy aktualne projekty, nad którymi pracujesz) czy ma generować sprzedaż (postaw na wyszczególnienie usług, które oferujesz, projekty dla klientów, które zrealizowałeś oraz ich opinie).

3. Wezwij do działania

Kiedy określisz już cel swojego portfolio, podkreśl go w „call to action”. Najprostszą metodą jest zamieszczenie wyraźnego przycisku, który wyróżni się na stronie. Dołącz link do swojego bloga, portfolio czy formularza kontaktowego i użyj odpowiednich słów, np. „Zatrudnij mnie”, „Zobacz moje portfolio”, „Skontaktuj się ze mną”.

4. Bądź dostępny

Koniecznie przeznacz odpowiednie miejsce na stronie na informację, w jaki sposób można się z Tobą skontaktować. Postaraj się zapewnić kilka form kontaktu. To może być formularz kontaktowy, adres e-mail czy linki do profili społecznościowych.

5. Nie kombinuj

Najważniejsze błędy, których należy się wystrzegać to przede wszystkim przegadanie, zbyt dużo informacji na raz w jednym miejscu, zbyt duża ilość prezentowanych projektów, nietypowa nawigacja czy bałagan wizualny. Zadbaj o to, aby Twoje portfolio było przejrzyste. Pisz prostym językiem i ogranicz długość zdań. Zachowaj równowagę między liczbą podstron a ilością treści na nich zawartych. Promuj tylko swoje najlepsze projekty. Zastosuj łatwą nawigację. Ogranicz liczbę elementów dekoracyjnych. I pamiętaj: less is more 🙂

Ja jestem dopiero na etapie przygotowywania swojego portfolio, ale wiele z powyższych porad okazało się pomocnych przy pracy nad nim. A czy Wy tworzyliście już swoje portfolio? Koniecznie podzielcie się swoimi przykładami lub stronami, które Was inspirują.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.