Jak zrobić ładny projekt graficzny portfolio?

Jak zrobić ładny projekt graficzny portfolio?

Dziś coś dla graficznych laików. Szukając pierwszej pracy jako webmaster, często jesteście zmuszeni stworzyć własną wizytówkę w postaci strony internetowej/portfolio. Wiele z powstających rzeczy to istne graficzne kreatury, które mogą w rekrutacji zaszkodzić. Nie uważam się za eksperta ale dużo oglądam i zdaje się się, że wiem jak zrobić poprawny projekt graficzny.

Temat błędów popełnianych przez początkujących webmasterów poruszałem już wcześniej. Dziś chcę się skupić wyłącznie na projektowaniu graficznym i wskazać właściwą drogę. Znajdziecie tutaj szereg sprawdzonych wskazówek jak dobierać kolory, jakie odstępy stosować i czego unikać by Wasze wizytówki były ładniejsze.

Szkic

Pierwsza złota zasada, którą zdążyłem już zrozumieć, ma bezpośredni wpływ na jakość przekazu. Niezależnie od tego czy tworzysz prostą wizytówkę czy rozbudowany portal ogłoszeniowy, powinieneś zacząć od szkiców na kartce.

Każdy dobry projekt zaczyna się od kartki papieru.

Dlaczego? Na kartce szybciej zweryfikujesz pomysły i rozplanujesz układ strony. Nie chodzi tu jedynie o położenie nawigacji czy zdjęcia nagłówkowego.

Wierz mi, że talent rysowniczy potrzebny tu nie jest. Weź kilka kartek papieru i zacznij szkicować. Zrób ramkę, która będzie symbolizować okno przeglądarki i rozplanuj rozmieszczenie elementów.

  • Zaznacz gdzie będzie znajdować się logo i rozpisz listę w menu.
  • Czy strona będzie pełnoekranowa, ograniczona w szerokości a może to i to?
  • Zaplanuj wstępnie kolumny i proporcje obrazów.
  • Zaplanuj kolejność sekcji – odpowiedz sobie na pytania: Co chcę o sobie powiedzieć? Czy mam się czym pochwalić? Co potrafię a czego nie?
  • Przemyśl kwestię tekstów i ich długości, co osadzisz później w h1, h2, ..?
  • Zaplanuj elementy „call to action” zachęcające użytkowników do skontaktowania się z Tobą.

Z doświadczenia wiem, że tworzenie strony w locie, często kończy się bałaganem i niespójnością. Dlatego dobry plan to podstawa. Tworząc projekt graficzny unikniesz kłopotliwych pytań i skupisz się wyłącznie na oprawie wizualnej.

Treść

Dziwisz się, że zaczynamy od treści? Kolejna zasada, pod którą podpisuję się obiema rękami i nogami to „content first”. Pomyśl przez chwilę: jakim cudem można dobrać zdjęcia i grafiki do tekstu skoro nie znamy tekstu? Odpowiedź brzmi: nijak.

Niestety dziś trend jest taki, że bardziej niż zawartość, liczy się opakowanie. Trend ten ma zastosowanie w wielu dziedzinach naszego życia i sprawia, że tworzymy sztuczny, często nieprawdziwy obraz rzeczywistości. Warto tego unikać jeżeli chcemy być wiarygodni. Dlatego na początku warto skupić się na tekstach i chwytliwych ale nieprzesadzonych nagłówkach.

Jeżeli wiesz co chcesz przekazać użytkownikom strony, napisanie od kilkunastu do kilkudziesięciu zdań nie powinno stanowić wielkiego wyzwania. Jeżeli czujesz, że pisanie nie jest Twoją mocną stroną, zawsze możesz podpatrzeć jak piszą o sobie inni. Nie wzoruj się na konkurentach z Twojego poziomu, szukaj zawsze lepszych od siebie – takich, którymi chciałbyś stać się w przyszłości. Mam nadzieję, że nie muszę tłumaczyć, że kopiowanie treści jest karalne. Sugeruję jedynie podpatrzenie formy wypowiedzi i fraz, na które warto położyć nacisk.

Kolory

Obserwując projekty stron, które zgarniają prestiżowe nagrody, nie da się niezauważyć, że są one zazwyczaj oparte na 2-3 kolorach. Najważniejszy jest to kolor wiodący „primary”, który nadaje charakteru, utrzymuje spójność wszystkich elementów i identyfikuje Twój brand. Dodatkowo wybierany jest kolor uzupełniający, który dobrze kontrastuje z kolorem podstawowym.

Dobierając paletę kolorów, zacznij od swojego logo. Twoim „primary” powinien być ten, który widzisz jako pierwszy patrząc na logo. Korzystaj z „pickerów” by pobrać dokładną wartość RGB, nigdy nie wybieraj kolorów „na oko”.

Ponieważ artykuł ten przeznaczony jest dla nowicjuszy – osób, które nie zajmują się projektowaniem graficznym, nie będę wdawał się w zasady, których uczą na Akademii Sztuk Pięknych. Sam ich nie znam – polegam jedynie na poprzednich doświadczeniach i obserwacji najlepszych projektantów. Istnieją przeróżne narzędzia i artykuły profesjonalistów, które pomogą Ci wybrać odpowiednią paletę kolorów:

Pamiętaj, że kolory to pierwsza rzecz, którą rzuca się w oczy osobie wchodzącej na stronę. Poświęć na to więcej czasu i dokładnie zaplanuj paletę, która oddaje Twój charakter. Używaj jej świadomie i konsekwentnie a Twoja strona niezaprzeczalnie zyska na jakości.

Typografia

Typografia odgrywa mega istotną role w nadawaniu tonu całego projektu i bezpośrednio przekłada się na wrażenia czytelników. Być może będzie to dla Ciebie zaskoczeniem ale dobór czcionek stanowi jedno z największych wyzwań przed jakim staję przy każdym projekcie. Nic dziwnego skoro sztuka typografii sięga aż XV wieku i w jej zakresie zrobiono już chyba wszystko co tylko możliwe. Przed długi czas typografia w internecie była pomijana lecz w ostatnich latach zyskała uznanie jako nieodłączny element projektowania.

W szczególnym wypadku, opracowanie typografii na stronę internetową polega na:

  • przemyślanym doborze krojów pisma,
  • ustaleniu odpowiednich wysokości i długości linii,
  • doborze kolorów,
  • sterowaniu wielkością i kerningiem.

Jak wielu innych dziedzinach, tak i w typografi, dobre praktyki i sprawdzone schematy pomagają „mugolom graficznym” tworzyć estetyczne i czytelne teksty. Wystarczy znać kilka podstawowych zasad i konsekwentnie się do nich stosować.

1. Trzymaj się jednego fonta

Użycie więcej niż 3 innych fontów sprawia, że strona internetowa staje się chaotyczna i wygląda nieprofesjonalnie. Dla większości projektów, zupełnie wystarcza jeden font z kilkoma wariacjami. Standardowo dla nagłówków stosujemy grubszy krój czcionki niż w przypadku pozostałych tekstów.

Zastosowanie dwóch innych czcionek może bardzo wzbogacić layout ale trzeba to robić rozważnie. Podstawową zasadą jest dopasowanie odpowiedniego kontrastu. Nie powinno się stosować czcionek podobnych do siebie ani takich, które w żaden sposób do siebie nie pasują. Nie jest to sprawa prosta ani oczywista dlatego polecam korzystać ze sprawdzonych rozwiązań:

2. Wybieraj czcionki standardowe

Wykorzystuj usługi osadzania fontów takie jak Google Fonts czy Typekit. Większość użytkowników zna standardowe czcionki dzięki czemu mogą je czytać szybciej. Stosowanie nietypowych krojów jest niebezpieczne. Nie mając dużej wrażliwości estetycznej, możesz zepsuć swój projekt graficzny i będzie on użytkowników odstraszał. Przeglądając wizytówki początkujących webmasterów, mógłbym podać setki takich przykładów.

Jeżeli twoja strona nie ma na celu budowania marki, brandu czy stworzenia wciągającej opowieści, zwykle dobrze trzymać się sprawdzonych czcionek. Zaliczamy do nich z pewnością: Open Sans, Roboto, Lato, Montserrat, Lora czy Ubuntu.

3. Dobieraj optymalną wysokość linii

Dobór optymalnego line-height w dużej mierze zależy od wybranej czcionki i nie zawsze jest oczywisty. Jest to jeden z głównych czynników wpływających na czytelność tekstu. Generalnie im większy rozmiar czcionki, tym większą wysokość linii powinniśmy ustalić. Prawda jest taka, że ilu projektantów na świecie, tyle opinii. Jeżeli miałbym je wszystkie uśrednić i zweryfikować swoimi doświadczeniami, optymalna wysokość linii mieści się w przedziale 1.4 – 1.7em. Tego polecam się trzymać a będzie dobrze.

4. Ograniczaj szerokość tekstu

Utrzymanie właściwej ilości znaków w każdej linii to klucz do czytelności Twoich tekstów. Projektując stronę, próbuj różnych układów i szerokości tekstu. Czytaj go wielokrotnie i odpowiadaj na pytanie: „czy tekst czyta się przyjemnie?”. W ogólnym ujęciu, dobrze jest stosować zasadę 60-70 znaków na linię. Dla urządzeń mobilnych, powinno to być ok 30-40 znaków.

Elementy graficzne

Jak już wiesz, treść jest bardzo istotna lecz wylany tekst bez elementów graficznych zdaje się być nieatrakcyjny. Obszerny tekst, choćby nie wiem jak wartościowy, może być dla użytkownika nużący. Warto co jakiś czas przełamać go interesującą grafiką lub zdjęciem. Wprowadza to element ożywienia i pozwala na swój sposób odpocząć.

Często spotykam się z nieodpowiednim doborem zdjęć. Są to sytuacje gdzie zdjęcie w żaden sposób nie koresponduje z sekcją, w której się znajduje. To o czym musisz pamiętać to fakt, że grafika ma za zadanie wzbogacać treść, być jej kwintesencją. Wielu początkujących twórców stron, nie przemyślała swoich wyborów stosując grafiki nieodpowiednie lub zwyczajnie kiepskie. Zdarza się i tak, że grafika wyróżnia się zbyt mocno lub jest jej tak dużo, że wywołuje oczopląs.

W ostatnich czasach bardzo popularne stały się „foty w tle”. Nie mówię, że to coś złego, jednak przyjmuje się to omylnie jako konieczność. Powielamy te same schematy – robimy tak jak inni. W przypadku osadzania zdjęcia jako tło, należy pamiętać o zachowaniu odpowiedniego kontrastu. Zdjęcie powinno być mocno przyciemnione a tekst biały. Użycie koloru jest uzasadnione jedynie w przypadku dużych nagłówków – w innym razie tekst będzie nieczytelny. Pamiętaj o zasadzie „content first”.

W dziale Darmowe zasoby, znajdziesz galerie darmowych zdjęć i grafik wektorowych, które z powodzeniem możesz użyć na swojej stronie. Niezależnie od efektów jakie zamierzasz osiągnąć tworząc projekt graficzny, pamiętaj, że każdy element musi mieć swoje uzasadnienie.

Logosy

Dlaczego zdecydowałem się poświęcić temu cały rozdział? Otóż zamieszczanie cudzych logotypów na swoim portfolio, rządzi się bardzo istotnymi prawami. Przeglądając wizytówki początkujących webmasterów, dostrzegam brak świadomości tego co wolno a czego absolutnie trzeba unikać.

Aktywne marketingowo firmy, posiadają tzw. „key visual”. Zawiera on między innymi precyzyjny opis zasad zamieszczania logo na swojej stronie – kiedy można osadzić je na niebiałym tle, jakie odstępy należy zachować czy jaka jest minimalna wielkość. Zwykle zamieszczając logo HTML5 czy chociażby Bootstrapa, nie mamy ściśle ograniczających nas zasad. Nie znaczy to jednak, że takie logo można władować niechlujnie gdziekolwiek.

Spójrz na poniższe przykłady. Co według Ciebie zrobiono tutaj źle?

Na logo GitHuba nałożony został tekst co jest niedopuszczalne i nie ma uzasadnienia w żadnym wypadku. Oprócz tego, autor strony nie zadbał o odstępy – obramowanie nie może stykać się ze znakiem. Według mnie minimalny odstęp od obramowania to jakieś 20-30 pikseli.

W dwóch pozostałych, błędem było osadzenie ich na kolorowym tle a w szczególności na kolorowej teksturze (Bootstrap). Wygląda to okropnie i z pewnością przyprawiłoby twórcę znaku o zawał serca.

Tworząc projekt graficzny pamiętaj by zachować odpowiednie odstępy. Dla wersji kolorowych dopuszczalne jest jedynie białe tło. Bardziej elastyczne zwykle jest wykorzystanie wersji „mono” (czarne lub białe) – o ile takie istnieje. Takie logo możemy osadzić na niebieskim tle czy przyciemnionym zdjęciu. Pamiętaj o zachowaniu dużego kontrastu.

Odstępy i przestrzeń

Ścisk na stronie przytłacza. Mało tego, ścisk na stronie może spowodować, że poszczególne elementy będą rywalizowały między sobą o uwagę użytkownika. Każda strona ma swoje przeznaczenie i każdy jej element powinien mieć swoje zastosowanie. Jeżeli jest ich zbyt dużo w jednym miejscu, nie będą spełniały swojego zadania. Dlatego warto dbać o zachowanie odpowiednich odstępów.

Często najbardziej oczywistym sposobem wyróżnienia obiektów jest zwiększenie ich rozmiarów. Możesz oczywiście powiększyć obrazy lub zwiększyć przyciski. Okazuje się jednak, że otaczanie elementu wolną przestrzenią może być równie skuteczne. Nawet niewielkie zwiększenie odstępów między obiektami, pomoże zwrócić uwagę na konkretny obszar Twojej witryny.

Tworzenie równowagi

Zbyt mała ilość wolnej przestrzeń prowadzi do zamieszania i dezorganizacji – cech, których z pewnością nie chcesz kojarzyć ze swoją stroną. Z drugiej strony zbyt wielkie odstępy mogą uwypuklić brak treści. Kluczem jest zrównoważenie projektu i sprawienie by wolna przestrzeń stała się narzędziem do oddzielania fragmentów treści dla większego komfortu użytkownika.

W dobrą stronę

W tym artykule, starałem się opisać główne czynniki, które zdecydowanie warto brać pod uwagę tworząc projekt graficzny. Wiele z tych czynników nie ma żadnego wzorca, który można stosować. Nie istnieje zasada mówiąca, że odstęp między sekcjami powinien wynosić 100 pikseli a nawigacja powinna być zawsze po prawej stronie. Takie kwestie trzeba po prostu dopasować do konkretnego projektu. Trzeba wyrobić w sobie poczucie estetyki.

Nawet jeżeli jesteś programistą, który tworzy swoje portfolio i nie masz nic wspólnego z projektowaniem, możesz sprawić, że będzie ona bardziej zachęcająca dla gości. Poświęć więcej czasu na dopracowanie szczegółów, próbuj różnych kombinacji i dbaj o przejrzystość. Przeglądaj strony konkursowe, galerie typu CSS Mania, szukaj inspiracji u lepszych od siebie. Z pewnością zdołasz zabić graficzną kreaturę i stworzyć coś wartościowego.

Popularne wpisy

Kodowanie

Responsywne menu — 3 sprawdzone rozwiązania

Responsywne menu — 3 sprawdzone rozwiązania

Czytaj to
Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Czytaj to

Felietony

Błędy początkujących webmasterów, których warto unikać

Błędy początkujących webmasterów, których warto unikać

Czytaj to
Dlaczego frameworki HTML często nie mają sensu?

Dlaczego frameworki HTML często nie mają sensu?

Czytaj to

Inspiracje

Zestaw prostych i ciekawych przycisków na stronę

Zestaw prostych i ciekawych przycisków na stronę

Czytaj to
Najlepsze strony, z których pobierzesz darmowe zdjęcia

Najlepsze strony, z których pobierzesz darmowe zdjęcia

Czytaj to

Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.