Realizacja strony dla logopedy Pauliny Lisiak

Jakiś czas temu miałyśmy szansę współpracować i realizować projekt dla logopedy Pauliny Lisiak. Całość jest utrzymana w delikatnej tonacji, adekwatnej do kolorystyki logo. Klientka dostarczyła profesjonalne zdjęcia, prezentujące jej osobę, więc musiałyśmy w odpowiedni sposób je wyeksponować i wdrożyć na stronę tak, by były subtelnym dopełnieniem tekstu. Starałyśmy się uzyskać lekką, przyjazną, przejrzystą i stylową stronę, która jednocześnie będzie obrazować markę osobistą klientki (nie bez powodu zastosowałyśmy strukturę onepage – celem było stworzenie strony wizytówki). Dlatego też postawiłyśmy na delikatne ikony, kolory i akcenty, które mamy wrażenie, że w punkt oddają charakter pracy jakim jest praca logopedy. Strona jest po prostu przyjazna dla oka niezależnie od wieku czy płci odbiorcy!

Przy planowaniu strony założyłyśmy staranne zaprojektowanie każdej z sekcji, dlatego, że przy strukturze strony jaką jest onepage, trzeba mieć na uwadze wyjątkowo częste urozmaicanie wyglądu.

Jak stworzyłyśmy sekcję „wypunktowań w postaci listy pionowej” krok po kroku?

Przyjrzyjmy się nieco bardziej poniższej sekcji, która dotyczy przedstawienia dużej ilości punktów w sposób pionowy.

Krok 1

Na sam koniec, pod elementem bloku z ikoną, wstawiłyśmy ikonę niedużej, delikatnej kropki. Ostatnim działaniem było umieszczenie pionowej kreski nad blokami, po środku sekcji. W tym celu, wykorzystałyśmy element Rozdzielacz, którego styl ustawiłyśmy na jednolity, a szerokość na 38%. Po jego odpowiedniej stylizacji musiałyśmy również przejść do odpowiedniego ustawienia elementu tj. obrócenia go w ten sposób, by był on w ułożeniu pionowym, nie poziomym. Dlatego w zakładce TRANSFORM, przy opcji obróć, ustawiłyśmy wartość na -90.

Krok 1

Na sam koniec, pod elementem bloku z ikoną, wstawiłyśmy ikonę niedużej, delikatnej kropki. Ostatnim działaniem było umieszczenie pionowej kreski nad blokami, po środku sekcji. W tym celu, wykorzystałyśmy element Rozdzielacz, którego styl ustawiłyśmy na jednolity, a szerokość na 38%. Po jego odpowiedniej stylizacji musiałyśmy również przejść do odpowiedniego ustawienia elementu tj. obrócenia go w ten sposób, by był on w ułożeniu pionowym, nie poziomym. Dlatego w zakładce TRANSFORM, przy opcji obróć, ustawiłyśmy wartość na -90.

Krok 2

Dodatkowo, w zamyśle było lekkie nachodzenie fotografii na prawą kolumnę, dlatego też przesunęłyśmy ją lekko w prawo – w tym wypadku ustawiłyśmy margines w formie %, po to aby mieć pewność, że na każdej rozdzielczości przesunięcie będzie wyglądało identycznie czyli nic się nam nie przesunie, ani nie rozsypie.

Krok 2

Dodatkowo, w zamyśle było lekkie nachodzenie fotografii na prawą kolumnę, dlatego też przesunęłyśmy ją lekko w prawo – w tym wypadku ustawiłyśmy margines w formie %, po to aby mieć pewność, że na każdej rozdzielczości przesunięcie będzie wyglądało identycznie czyli nic się nam nie przesunie, ani nie rozsypie.

Krok 3

W celu jeszcze większej płynności przejścia, ustawiłyśmy niewielkie, białe obramowanie zdjęcia (Typ obramowania > jednolite oraz ustawienie szerokości z każdej strony na 9)

Krok 3

W celu jeszcze większej płynności przejścia, ustawiłyśmy niewielkie, białe obramowanie zdjęcia (Typ obramowania > jednolite oraz ustawienie szerokości z każdej strony na 9)

Krok 4

Następnie przeszłyśmy do drugiej kolumny, która miała zawierać główną treść danej sekcji. Na samym początku ustawiłyśmy odpowiednie marginesy kolumny oraz jej różowe, lekkie obramowanie, które ma wyznaczać w pewien sposób granicę przestrzeni, w której mieści się tekst:

Krok 4

Następnie przeszłyśmy do drugiej kolumny, która miała zawierać główną treść danej sekcji. Na samym początku ustawiłyśmy odpowiednie marginesy kolumny oraz jej różowe, lekkie obramowanie, które ma wyznaczać w pewien sposób granicę przestrzeni, w której mieści się tekst:

Krok 5

Oprócz wstawienia i podstawowej stylizacji nagłówków, nadałyśmy im również wyróżniające, jednolite tło, pasujące kolorystycznie do całej strony i logo klientki. Następnie przeszłyśmy do wypunktowania w postaci listy pionowej. Skorzystałyśmy tutaj z elementu LISTA IKON, którą wystylizowałyśmy odpowiednio w:

Krok 5

Oprócz wstawienia i podstawowej stylizacji nagłówków, nadałyśmy im również wyróżniające, jednolite tło, pasujące kolorystycznie do całej strony i logo klientki. Następnie przeszłyśmy do wypunktowania w postaci listy pionowej. Skorzystałyśmy tutaj z elementu LISTA IKON, którą wystylizowałyśmy odpowiednio w:

Inspiracje

Sekcji wypunktowania
Sekcji wypunktowania

Powyższą sekcję, można wykonać oczywiście na wiele różnych sposobów, które różnią się od siebie nie tylko całym układem ale również pomysłem na zaprezentowanie treści i fotografii.
Poniżej przedstawiamy kilka inspiracji, które mogą Wam się przydać przy tworzeniu na stronie sekcji z wypunktowaniem w postaci pionowej listy.

Na poniższych inspiracjach, każdej liście wypunktowań towarzyszy odpowiednia oprawa graficzna.

kaylanicolette.com

Wypunktowania w formie ikony „plusika”, nadaje charakter i podkreśla istotność treści. Dodatkowo, umieszczony poniżej przycisk CTA oraz zdjęcie po prawej stronie, które jest spójne kolorystycznie z całą sekcją.

kaylanicolette.com

Wypunktowania w formie ikony „plusika”, nadaje charakter i podkreśla istotność treści. Dodatkowo, umieszczony poniżej przycisk CTA oraz zdjęcie po prawej stronie, które jest spójne kolorystycznie z całą sekcją.

helloyoudesigns.com

Mimo, że wypunktowania, są bardzo delikatne i subtelne, to w tym wypadku na wizualny efekt pracuje tutaj cała sekcji tj. odpowiednie tło, dobrze dobrane nagłówki (które przyciągają wzrok dzięki użyciu różnych, lecz dopasowanych do siebie fontów)

helloyoudesigns.com

Mimo, że wypunktowania, są bardzo delikatne i subtelne, to w tym wypadku na wizualny efekt pracuje tutaj cała sekcji tj. odpowiednie tło, dobrze dobrane nagłówki (które przyciągają wzrok dzięki użyciu różnych, lecz dopasowanych do siebie fontów)

themoneytribe.com

Wypunktowania w formie znaczników liczbowych oraz złożoność sekcji z dwóch kolorów tła, które idealnie tworzą jedną kompozycję.

themoneytribe.com

Wypunktowania w formie znaczników liczbowych oraz złożoność sekcji z dwóch kolorów tła, które idealnie tworzą jedną kompozycję.

kdesign.co

Tutaj kluczowa jest „równowaga” – delikatne i eleganckie podkreślenie najistotniejszych punktów odpowiednią ikonką oraz zaakcentowanie istotnych części tekstu odpowiednią czcionką i jej kolorem.

kdesign.co

Tutaj kluczowa jest „równowaga” – delikatne i eleganckie podkreślenie najistotniejszych punktów odpowiednią ikonką oraz zaakcentowanie istotnych części tekstu odpowiednią czcionką i jej kolorem.

Facebook
Twitter
LinkedIn
Pinterest