Strona internetowa dla fotografa może być projektowana od podstaw. Czasami zdarzają się też sytuacje, że już istnieje, ale wymaga odświeżenia. Wpis pokazujący taką metamorfozę chodził za mną już dawno. Okazją do jego stworzenia okazała się zmiana portfolio Foto Baśnie, którą w lipcu przeprowadziłyśmy razem z Sylwią. Kwestie techniczne tych działań były łatwiejsze ze względu na fakt, że byłam również autorką pierwszej wersji strony. Jak wyszło, dowiesz się za chwilkę śledząc kolejne zmiany.

 

Opinia Sylwii o projektach

“Z Moniką, właścicielką Dream&Design znamy się ponad rok. I chociaż nasza współpraca nie zaczęła się gładko i prosto, wypracowałyśmy metodę, która po prostu działa. To znaczy – Monika sugeruje, ja słucham i się zgadzam. Tak jak swoich Klientów namawiam do tego, by mi zaufali i powierzyli siebie na kilka godzin, tak ja zawierzyłam Monice i po prostu pozwoliłam jej robić swoje. Tak było w ubiegłym roku. Strona pasowała do mnie i treści, które zawierała. Lecz nadszedł czas na zmiany. Zarówno aktualizację portfolio, bloga, jak i samej szaty graficznej strony. Gdybym myślała o czymś takim jak telepatia, to właśnie w taki sposób chyba pomyślałyśmy o sobie – ja o zwróceniu się do Moniki o pomoc, a ona o mnie z propozycją zmian i unowocześnienia strony. I jak w ubiegłym roku miałam jakieś uwagi czy zastrzeżenia, tak tym razem Monika, czyli Dream&Design zaskoczyła mnie niesłychanie. Otrzymałam znacznie więcej niż miałam o tym wyobrażenie. Strona szybko się wczytuje, pięknie i płynnie chodzi, świetnie wygląda na wszystkich platformach, wszystko jest bardzo czytelne, nowoczesne i zrównoważone. Jestem zachwycona zarówno efektem jak i czasem wykonania. Szata wizualna Foto Baśnie to kawał graficznej i informatycznej świetnej roboty.”

 

Strona internetowa fotografa – impuls do zmian

 

Pierwsza wersja strony www opierała się na motywie WordPress, który miał z góry określony wygląd. Oznacza to pewne ograniczenia w projektowaniu. O ile da się niektóre rzeczy ukryć za pomocą kodowania css, o tyle nie mamy już wpływu na szerokość strony, rozmieszczenie menu, umiejscowienie logo czy wygląd bloga. Na początku taka opcja była w pełni wystarczająca. Przyszedł jednak taki moment, kiedy Sylwia rozbudowała swoje portfolio i zmieniła częściowo zakres usług poszerzając je o warsztaty dla innych fotografów, więc zmiany na stronie były nieuniknione. Potrzeba ta pojawiła się w momencie, kiedy wchodziłam w zupełnie nowy etap projektowania stron www. Była to bardzo dobra okazja do stworzenia czegoś w zupełnie innym stylu, choć nadal idealnie współgrającym z moim poczuciem estetyki.

 

Strona internetowa dla fotografa – etapy zmian w Foto Baśnie

1. Metamorfoza strony głównej.

Pierwsza zmiana zaszła na stronie głównej. W pierwszej wersji portfolio podstrona ta zawierała slider, który nie zajmował całej szerokości. Wynikało to z budowy motywu, którego użyłam jako bazy. Nazwa w menu tej strony to HOME. Logo było umieszczone na środku, kolorystyka znaku graficznego i tekstów w menu to złoto.

fotografia stylizowana, slider na stronie www, responsywna strona www dla fotografa, strona internetowa dla fotografa, galerie zdjęć na stronie www, strona www dla fotografa, przykład fotograficznej strony www, fotograf Gdańsk, Foto Baśnie, foto-basnie.pl, minimalistyczna strona www, portfolio dla fotografa, nowoczesna strona www, webdesign,

Strona główna po metamorfozie prezentuje się tak:

logo fotografa, logo dla fotografa, fotografia stylizowana, fotografia portretowa, slider na stronie www, call to action, przyciski, responsywna strona www dla fotografa, strona internetowa dla fotografa, galerie zdjęć na stronie www, strona www dla fotografa, przykład fotograficznej strony www, fotograf Gdańsk, Foto Baśnie, foto-basnie.pl, minimalistyczna strona www, portfolio dla fotografa, nowoczesna strona www, webdesign, dream and design , blog fotograficzny, oferta fotografa

Nowe elementy na stronie:

  • slider na całą szerokość;
  • krótkie zapowiedzi tego, co można znaleźć na pozostałych podstronach, np. tekst “O mnie”, zapowiedź najnowszych wpisów blogowych;
  • przyciski tzw. CALL TO ACTION – prowadzące klientów do innych miejsc, np. do strony z ofertą, czy kontaktem – taki zabieg wpływa na lepsze pozycjonowanie strony w wynikach wyszukiwania i pozwala zatrzymać odwiedzających dłużej na stronie;
  • dodatkowe logo w stopce strony (które po kliknięciu przenosi do strony głównej) oraz ikony społecznościowe;
  • logo i napisy w menu w kolorze białym są lepiej widoczne na ciemniejszych zdjęciach wstawionych na slider.

Pojawiła się nowa kolorystyka na stronie: ciemne szarości w tekstach i jasne szarości oraz biele w tłach. Sylwii zależało na tym, aby portfolio opierało się przede wszystkim na intensywnych kolorach samych zdjęć, a oprawa graficzna tylko je delikatnie uzupełniała i była stonowana.

Zmieniłam też nazwę tej podstrony w menu na START. Dopełnieniem nowego designu są delikatne animacje tekstów i obrazów.

2a. Podstrona z galerią zdjęć

W poprzednim wyglądzie strony do portfolio prowadziły trzy zdjęcia. Po najechaniu myszką na wybrane zdjęcie pojawiała się nazwa galerii, do której fotografia prowadziła.

jak zrobić galerię zdjęć, galerie zdjęć na stronie www, jak zrobić galerię WordPress, wtyczka do galerii, WordPress, logo fotografa, menu na stronie www

 

W nowej wersji Sylwia zaproponowała podział galerii na pory roku. Jest to ciekawa alternatywa dla typowych podziałów wg kategorii fotograficznych.

jak zrobić galerię zdjęć, galerie zdjęć na stronie www, jak zrobić galerię WordPress, wtyczka do galerii, WordPress, logo fotografa, menu na stronie www

 

2b. Podstrona z galerią zdjęć

Po wejściu w daną kategorię w poprzedniej wersji strony ukazywała się galeria w stylu masonry utworzona za pomocą wtyczki FooGallery.

galeria w stylu masonry, portfolio fotografa, jak utworzyć galerię wordpress, galeria wordpress w stylu masonry, foogallery, wtyczka do galerii

 

Obecnie w wybranej galerii znajduje się karuzela zdjęć, dodatkowo jest ona umieszczona na całej szerokości strony. Pod spodem odwiedzający stronę mogą zobaczyć najnowsze wpisy blogowe z kategorii danej pory roku.

fotografia stylizowana, fotografia portretowa, slider na stronie www, call to action, przyciski, responsywna strona www dla fotografa, strona internetowa dla fotografa, galerie zdjęć na stronie www, strona www dla fotografa, przykład fotograficznej strony www, fotograf Gdańsk, Foto Baśnie, foto-basnie.pl, minimalistyczna strona www, portfolio dla fotografa, nowoczesna strona www, webdesign, dream and design, układ galerii, galeria w typie karuzeli wordpress, karuzela zdjęć na stronie www, karuzela zdjęć

Zwróć też uwagę na to, że logo i teksty na stronach innych niż strona główna są ciemnoszare.

3. Podstrona o mnie

Poprzedni wygląd strony “o mnie” składał się z jednego zdjęcia i tekstu.

strona o mnie

 

Projektując nową wersję postanowiłam zamieścić tu zdjęcia z sesji, w której Sylwia wciela się w rolę Maryli z “Ani z Zielonego Wzgórza”. Niesamowicie podoba mi się cała koncepcja pleneru, który powstał w Foto Baśniach.

fotografia stylizowana, fotografia portretowa, slider na stronie www, call to action, przyciski, responsywna strona www dla fotografa, strona internetowa dla fotografa, galerie zdjęć na stronie www, strona www dla fotografa, przykład fotograficznej strony www, fotograf Gdańsk, Foto Baśnie, foto-basnie.pl, minimalistyczna strona www, portfolio dla fotografa, nowoczesna strona www, webdesign, dream and design

4. Podstrona z ofertą

W starszej wersji strony do poszczególnych ofert przechodziło się z rozwijanego menu, a każdy zakres tematyczny znajdował się na oddzielnej stronie.

strona z ofertą fotograficzną, wordpress

 

W nowej wersji odpowiednie formatowanie kolumn, tekstu, zdjęć i kolorów tła pozwoliło zmieścić wszystko na jednej stronie. Podział dotyczy tylko oferty na sesje i na warsztaty, a przejście do ofert wygląda podobnie jak przejście do galerii. Przykładowo oferta z sesji wygląda tak:

 

5. Blog fotograficzny

Poprzednia wersja składała się z wyglądu kafelkowego, a zapowiedzi wpisów znajdowały się w dwóch kolumnach.

blog fotograficzny wordpress

Obecnie kolumny są trzy.

fotografia stylizowana, fotografia portretowa, slider na stronie www, call to action, przyciski, responsywna strona www dla fotografa, strona internetowa dla fotografa, galerie zdjęć na stronie www, strona www dla fotografa, przykład fotograficznej strony www, fotograf Gdańsk, Foto Baśnie, foto-basnie.pl, minimalistyczna strona www, portfolio dla fotografa, nowoczesna strona www, webdesign, dream and design, strona dla fotografa z blogiem, blog fotograficzny

 

6. Strona kontakt

I na koniec porównamy strony z danymi kontaktowymi:

strona z danymi kontaktowymi fotografa

fotografia stylizowana, fotografia portretowa, slider na stronie www, call to action, przyciski, responsywna strona www dla fotografa, strona internetowa dla fotografa, galerie zdjęć na stronie www, strona www dla fotografa, przykład fotograficznej strony www, fotograf Gdańsk, Foto Baśnie, foto-basnie.pl, minimalistyczna strona www, portfolio dla fotografa, nowoczesna strona www, webdesign, dream and design, dane kontaktowe

 

Zapraszam Cię do odwiedzenia strony Sylwii. Znajduje się ona pod adresem:
www.foto-basnie.pl

 

Wpisy, które też mogą Cię zainteresować: