Księgowość Podatki Kraków
Księgowość Podatki Kraków
Księgowość Podatki Kraków
UX/UI redesign
UX/UI redesign
Projekt koncepcyjny
Wszelkie wrażliwe dane zostały zmienione
Opis
Księgowość Podatki Kraków to strona internetowa reklamująca usługi firmy z zakresu księgowości
Księgowość Podatki Kraków to strona internetowa reklamująca usługi firmy z zakresu księgowości
Księgowość Podatki Kraków to strona internetowa reklamująca usługi firmy z zakresu księgowości
Problem
Problemy strony internetowej w główne mierze biorą się:
ze strony wizualnej: Przestarzały design (niedopasowany krój pisma, tło, które burzy przejrzystość strony i jednocześnie nie wzbudza zaufania, typografia, która utrudnia czytanie przez wzgląd na małą czcionkę i słabo zredagowany tekst oraz ogólny brak spójności wizualnej)
oraz przez słabą funkcjonalność: brak interakcji z przyciskami, słaba nawigacja(głównie jej położenie oraz brak orientacji na jakiej stronie użytkownik się aktualnie znajduje) jak i architektura informacji(niedopasowane kategorie)
Problemy strony internetowej w główne mierze biorą się:
ze strony wizualnej: Przestarzały design (niedopasowany krój pisma, tło, które burzy przejrzystość strony i jednocześnie nie wzbudza zaufania, typografia, która utrudnia czytanie przez wzgląd na małą czcionkę i słabo zredagowany tekst oraz ogólny brak spójności wizualnej)
oraz przez słabą funkcjonalność: brak interakcji z przyciskami, słaba nawigacja(głównie jej położenie oraz brak orientacji na jakiej stronie użytkownik się aktualnie znajduje) jak i architektura informacji(niedopasowane kategorie)
Problemy strony internetowej w główne mierze biorą się:
ze strony wizualnej: Przestarzały design (niedopasowany krój pisma, tło, które burzy przejrzystość strony i jednocześnie nie wzbudza zaufania, typografia, która utrudnia czytanie przez wzgląd na małą czcionkę i słabo zredagowany tekst oraz ogólny brak spójności wizualnej)
oraz przez słabą funkcjonalność: brak interakcji z przyciskami, słaba nawigacja(głównie jej położenie oraz brak orientacji na jakiej stronie użytkownik się aktualnie znajduje) jak i architektura informacji(niedopasowane kategorie)
Rozwiązanie
Poprawienie strony wizualnej
stworzenie spójnej koncepcji estetycznej, dzięki stworzeniu spójnego
design systemu
poprawienie czytelności strony poprzez polepszenie dotychczasowej typografii (wybranie nowego zestawu krojów pism oraz poprawienie czytelności)
Poprawienie architektury informacji i wynikającej z niej nawigacji
zmniejszenie ilości kategorii do wyboru,
zmienienie położenia głównej nawigacji,
poprawienie orientacji w poruszaniu się po stronie
Poprawienie funkcjonalności
stworzenie, w oparciu o ustandaryzowane rozwiązania, przyciski
Poprawienie strony wizualnej
stworzenie spójnej koncepcji estetycznej, dzięki stworzeniu spójnego
design systemu
poprawienie czytelności strony poprzez polepszenie dotychczasowej typografii (wybranie nowego zestawu krojów pism oraz poprawienie czytelności)
Poprawienie architektury informacji i wynikającej z niej nawigacji
zmniejszenie ilości kategorii do wyboru,
zmienienie położenia głównej nawigacji,
poprawienie orientacji w poruszaniu się po stronie
Poprawienie funkcjonalności
stworzenie, w oparciu o ustandaryzowane rozwiązania, przyciski
Poprawienie strony wizualnej
stworzenie spójnej koncepcji estetycznej, dzięki stworzeniu spójnego
design systemu
poprawienie czytelności strony poprzez polepszenie dotychczasowej typografii (wybranie nowego zestawu krojów pism oraz poprawienie czytelności)
Poprawienie architektury informacji i wynikającej z niej nawigacji
zmniejszenie ilości kategorii do wyboru,
zmienienie położenia głównej nawigacji,
poprawienie orientacji w poruszaniu się po stronie
Poprawienie funkcjonalności
stworzenie, w oparciu o ustandaryzowane rozwiązania, przyciski
zakres pracy
dział: ux i ui
narzędzia: Figma
platformy: web i mobile
dział: ux i ui
narzędzia: Figma
platformy: web i mobile
dział: ux i ui
narzędzia: Figma
platformy: web i mobile
Czas pracy
Czas pracy
Miesiąc
Miesiąc
Miesiąc
1.Początek
Mój proces redesignu zacząłem od szczegółowej analizy strony. Od czysto estetycznej kwestii, jak analiza kroju, spójności kolorystyki i ogólnego wrażenia, jakie całościowo strona pod tym względem chce przekazać, po te głębsze, bardziej dokładniejsze kwestie techniczne, takie jak stan funkcjonalności czy architektury informacji.
Mój proces redesignu zacząłem od szczegółowej analizy strony. Od czysto estetycznej kwestii, jak analiza kroju, spójności kolorystyki i ogólnego wrażenia, jakie całościowo strona pod tym względem chce przekazać, po te głębsze, bardziej dokładniejsze kwestie techniczne, takie jak stan funkcjonalności czy
architektury informacji.
Mój proces redesignu zacząłem od szczegółowej analizy strony. Od czysto estetycznej kwestii, jak analiza kroju, spójności kolorystyki i ogólnego wrażenia, jakie całościowo strona pod tym względem chce przekazać, po te głębsze, bardziej dokładniejsze kwestie techniczne, takie jak stan funkcjonalności czy architektury informacji.
Niemniej ten pierwszy krok, którym można nazwać realną pracą nad redesignem to był moment, kiedy przysiadłem do architektury informacji. Po przeanalizowaniu jej starej wersji i dojściu do pewnych wniosków wprowadziłem pewne małe zmiany, które uskuteczniają i ułatwiają jej funkcjonalność.
Niemniej ten pierwszy krok, którym można nazwać realną pracą nad redesignem to był moment, kiedy przysiadłem do architektury informacji. Po przeanalizowaniu jej starej wersji i dojściu do pewnych wniosków wprowadziłem pewne małe zmiany, które uskuteczniają i ułatwiają jej funkcjonalność.
Niemniej ten pierwszy krok, którym można nazwać realną pracą nad redesignem to był moment, kiedy przysiadłem do architektury informacji. Po przeanalizowaniu jej starej wersji i dojściu do pewnych wniosków wprowadziłem pewne małe zmiany, które uskuteczniają i ułatwiają jej funkcjonalność.
Mianowicie zauważyłem, że w starej nawigacji pewne rzeczy mogłyby zostać wrzucone do jednej kategorii, zmniejszając tym samym ilość wyboru oraz zwiększając jednocześnie dostępną przestrzeń. Np. zakładka “Kontakt” jak i “Dojazd” jak najbardziej mogą zostać połączone tworząc jedną kategorię np. kategorię “Kontakt”. Ponadto kategorię tę wraz z kategorią ‘O firmie” usunąłem z głównej nawigacji(po uprzedniej selekcji tego, jakie najważniejsze sekcje nawigacji powinny zostać w głównej nawigacji), wrzucając ją na stronę główną. W ten oto sposób udało mi się uzyskać nawigację z najważniejszymi kategoriami tej strony, czyli takimi, które skupiają się na czysto reklamowej funkcji tej strony: “Oferta”, “Cennik”, “Aktualności”, “Stawki i wskaźniki”, “Zweryfikuj kontrahenta”.
Mianowicie zauważyłem, że w starej nawigacji pewne rzeczy mogłyby zostać wrzucone do jednej kategorii, zmniejszając tym samym ilość wyboru oraz zwiększając jednocześnie dostępną przestrzeń. Np.
zakładka “Kontakt” jak i “Dojazd” jak najbardziej mogą zostać połączone tworząc jedną kategorię np. kategorię “Kontakt”. Ponadto kategorię tę wraz z kategorią ‘O firmie” usunąłem z głównej nawigacji(po uprzedniej selekcji tego, jakie najważniejsze sekcje nawigacji powinny zostać w głównej nawigacji), wrzucając ją na stronę główną. W ten oto sposób udało mi się uzyskać nawigację z najważniejszymi kategoriami tej strony, czyli takimi, które skupiają się na czysto reklamowej funkcji tej strony: “Oferta”, “Cennik”, “Aktualności”, “Stawki i wskaźniki”,
“Zweryfikuj kontrahenta”.
stara nawigacja
stara nawigacja
nowa nawigacja
nowa nawigacja
Po stworzeniu nowej wersji nawigacji, zabrałem się za szkice. Zrobiłem listę wszystkich elementów, które powinny zostać zmienione, która później posłużyła mi jako punkt wyjścia do wymyślania nowych rozwiązań. Koncepty i pomysły, z których wybrałem te najciekawsze przerobiłem na proste wireframe, aby w szybki sposób zwizualizować sobie i sprawdzić czy rozwiązania, które wymyśliłem mogłyby mieć ręce i nogi. Nie okazały się one, jak mi się na początku wydawało, strzałem w dziesiątkę, dlatego też proces projektowy nie był tak prosty i linearny. Od pierwszych paneli wireframe do ostatecznych dzieli spora różnica biorąca się z ciągłego wracania do 1 etapu i robienia wszystkiego na nowo. Stąd też jeżeli miałbym zobrazować mój proces, wyglądał on mniej więcej tak:
Po stworzeniu nowej wersji nawigacji, zabrałem się za szkice. Zrobiłem listę wszystkich elementów, które powinny zostać zmienione, która później posłużyła mi jako punkt wyjścia do wymyślania nowych rozwiązań. Koncepty i pomysły, z których wybrałem te najciekawsze przerobiłem na proste wireframe, aby w szybki sposób zwizualizować sobie i sprawdzić czy rozwiązania, które wymyśliłem mogłyby mieć ręce i nogi. Nie okazały się one, jak mi się na początku wydawało, strzałem w dziesiątkę, dlatego też proces projektowy nie był tak prosty i linearny. Od pierwszych paneli wireframe do ostatecznych dzieli spora różnica biorąca się z ciągłego wracania do 1 etapu i robienia wszystkiego na nowo. Stąd też jeżeli miałbym zobrazować mój proces, wyglądał on mniej więcej tak:
Po stworzeniu nowej wersji nawigacji, zabrałem się za szkice. Zrobiłem listę wszystkich elementów, które powinny zostać zmienione, która później posłużyła mi jako punkt wyjścia do wymyślania nowych rozwiązań. Koncepty i pomysły, z których wybrałem te najciekawsze przerobiłem na proste wireframe, aby w szybki sposób zwizualizować sobie i sprawdzić czy rozwiązania, które wymyśliłem mogłyby mieć ręce i nogi. Nie okazały się one, jak mi się na początku wydawało, strzałem w dziesiątkę, dlatego też proces projektowy nie był tak prosty i linearny. Od pierwszych paneli wireframe do ostatecznych dzieli spora różnica biorąca się z ciągłego wracania do 1 etapu i robienia wszystkiego na nowo. Stąd też jeżeli miałbym zobrazować mój proces, wyglądał on mniej więcej tak:
2.Design
Następnie skupiłem się na kwestii czysto wizualnych. Czyli spędziłem trochę czasu na tworzeniu spójnej koncepcji wizualnej i opartym na niej design systemie. Kierowałem się zasadą stworzenia identyfikacji, która przywołuje poczucie powagi oraz zaufanie do użytkownika. Decyzję tę podjąłem głównie przez fakt, że zaufanie uważam za najważniejszy aspekt tej strony, wynikający z jej funkcji — reklama usług firmy. Przy starej wersji strony nie widzę jakiegokolwiek powodu, aby zaufać tej firmie lub skorzystać z jej usług. Stąd też nowa identyfikacja stawia na zaufanie poprzez powagę, wysoką jakość przy doborze kolorów i krojów pism oraz na nowoczesnym i przyjaznym dla użytkownika design systemie.
Następnie skupiłem się na kwestii czysto wizualnych. Czyli spędziłem trochę czasu na tworzeniu spójnej koncepcji wizualnej i opartym na niej design systemie. Kierowałem się zasadą stworzenia identyfikacji, która przywołuje poczucie powagi oraz zaufanie do użytkownika. Decyzję tę podjąłem głównie przez fakt, że zaufanie uważam za najważniejszy aspekt tej strony, wynikający z jej funkcji — reklama usług firmy. Przy starej wersji strony nie widzę jakiegokolwiek powodu, aby zaufać tej firmie lub skorzystać z jej usług. Stąd też nowa identyfikacja stawia na zaufanie poprzez powagę, wysoką jakość przy doborze kolorów i krojów pism oraz na nowoczesnym i przyjaznym dla użytkownika design systemie.
Następnie skupiłem się na kwestii czysto wizualnych. Czyli spędziłem trochę czasu na tworzeniu spójnej koncepcji wizualnej i opartym na niej design systemie. Kierowałem się zasadą stworzenia identyfikacji, która przywołuje poczucie powagi oraz zaufanie do użytkownika. Decyzję tę podjąłem głównie przez fakt, że zaufanie uważam za najważniejszy aspekt tej strony, wynikający z jej funkcji — reklama usług firmy. Przy starej wersji strony nie widzę jakiegokolwiek powodu, aby zaufać tej firmie lub skorzystać z jej usług. Stąd też nowa identyfikacja stawia na zaufanie poprzez powagę, wysoką jakość przy doborze kolorów i krojów pism oraz na nowoczesnym i przyjaznym dla użytkownika design systemie.
moodboard
moodboard
Kolory
Kolory to głównie niebieski. Kolor zaufania, lojalności, bezpieczeństwa, a więc przymiotników świetnie określających usługi firmy. W ciemniejszej wersji nadaje również powagi. Służy on jako kolor główny, określany na interaktywnych i najważniejszych elementach strony. Oprócz tego, towarzyszą mu dwa odcienie neutralne do tekstu i do tła — czarny i szary.
Kolory to głównie niebieski. Kolor zaufania, lojalności, bezpieczeństwa, a więc przymiotników świetnie określających usługi firmy. W ciemniejszej wersji nadaje również powagi. Służy on jako kolor główny, określany na interaktywnych i najważniejszych elementach strony. Oprócz tego, towarzyszą mu dwa odcienie neutralne do tekstu i do tła — czarny i szary.
Kolory to głównie niebieski. Kolor zaufania, lojalności, bezpieczeństwa, a więc przymiotników świetnie określających usługi firmy. W ciemniejszej wersji nadaje również powagi. Służy on jako kolor główny, określany na interaktywnych i najważniejszych elementach strony. Oprócz tego, towarzyszą mu dwa odcienie neutralne do tekstu i do tła — czarny i szary.
#E6E6E6
#0D0D0D
#23277D
Typografia
Przy wyborze głównego kroju pisma kierowałem się skojarzeniem co do zawodu księgowego. Bardzo mi się słowo to kojarzyło ze starością i wiedzą, a mając na uwadze firmę, mającą na koncie spore doświadczenie w swoim zawodzie, nie mogłem wybrać lepiej niż krój pisma z kategorii serif — nadaje elegancji, poczucia sporego doświadczenia, powagi, jak również wzbudza zaufanie. Wybór padł na OFL Sorts Mill Goudy TT. Występuje on jako krój główny, a więc krój służący do wykorzystania głównie w nagłówkach i również w elementach mających zwracać uwagę.
Przy wyborze głównego kroju pisma kierowałem się skojarzeniem co do zawodu księgowego. Bardzo mi się słowo to kojarzyło ze starością i wiedzą, a mając na uwadze firmę, mającą na koncie spore doświadczenie w swoim zawodzie, nie mogłem wybrać lepiej niż krój pisma z kategorii serif — nadaje elegancji, poczucia sporego doświadczenia, powagi, jak również wzbudza zaufanie. Wybór padł na OFL Sorts Mill Goudy TT. Występuje on jako krój główny, a więc krój służący do wykorzystania głównie w nagłówkach i również w elementach mających
zwracać uwagę.
Przy wyborze głównego kroju pisma kierowałem się skojarzeniem co do zawodu księgowego. Bardzo mi się słowo to kojarzyło ze starością i wiedzą, a mając na uwadze firmę, mającą na koncie spore doświadczenie w swoim zawodzie, nie mogłem wybrać lepiej niż krój pisma z kategorii serif — nadaje elegancji, poczucia sporego doświadczenia, powagi, jak również wzbudza zaufanie. Wybór padł na OFL Sorts Mill Goudy TT. Występuje on jako krój główny, a więc krój służący do wykorzystania głównie w nagłówkach i również w elementach mających zwracać uwagę.
OFL Sorts Mill Goudy TT
OFL Sorts Mill Goudy TT
OFL Sorts Mill Goudy TT
Regular
Mając na uwadze kwestie zawartości strony, nie mogłem pozwolić na to, aby główna treść była umieszczona w kroju wspomnianym powyżej, bowiem zatraciło by to na czytelności samego tekstu, czyli najważniejszym aspekcie tej strony. Dlatego też zdecydowałem się na bezpieczniejszą, ale świetnie pasującą opcje — Open Sans. Czytelny, świetnie nadający się do sporej ilości tekstu, krój z wieloma grubościami i właściwościami, a ponadto fantastycznie pasujący stylistycznie z
krojem głównym, dodając lekkiej nowoczesności i świeżości.
Mając na uwadze kwestie zawartości strony, nie mogłem pozwolić na to, aby główna treść była umieszczona w kroju wspomnianym powyżej, bowiem zatraciło by to na czytelności samego tekstu, czyli najważniejszym aspekcie tej strony. Dlatego też zdecydowałem się na bezpieczniejszą, ale świetnie pasującą opcje — Open Sans. Czytelny, świetnie nadający się do sporej ilości tekstu, krój z wieloma grubościami i właściwościami, a ponadto fantastycznie pasujący stylistycznie z krojem głównym, dodając lekkiej nowoczesności
Mając na uwadze kwestie zawartości strony, nie mogłem pozwolić na to, aby główna treść była umieszczona w kroju wspomnianym powyżej, bowiem zatraciło by to na czytelności samego tekstu, czyli najważniejszym aspekcie tej strony. Dlatego też zdecydowałem się na bezpieczniejszą, ale świetnie pasującą opcje — Open Sans. Czytelny, świetnie nadający się do sporej ilości tekstu, krój z wieloma grubościami i właściwościami, a ponadto fantastycznie pasujący stylistycznie z krojem głównym, oddając lekkiej nowoczesności
Open Sans
Light
Open Sans
SemiBold
Open Sans
Bold
Przyciski
Przy przyciskach nie chciałem przesadnie eksperymentować: mają być jasne, czytelne, interaktywne i klikalne. Zdecydowałem się na ostrzejsze końce, bo dodają one powagi i profesjonalizmu (miększe końcówki mocno by konfliktowały z próbą stworzenia poczucia powagi)
Przy przyciskach nie chciałem przesadnie eksperymentować: mają być jasne, czytelne, interaktywne i klikalne. Zdecydowałem się na ostrzejsze końce, bo dodają one powagi i profesjonalizmu (miększe końcówki mocno by konfliktowały z próbą stworzenia
poczucia powagi)
Przy przyciskach nie chciałem przesadnie eksperymentować: mają być jasne, czytelne, interaktywne i klikalne. Zdecydowałem się na ostrzejsze końce, bo dodają one powagi i profesjonalizmu (miększe końcówki mocno by konfliktowały z próbą stworzenia poczucia powagi)
main btns
main btns
default
default
hover
hover
Oferta
Cennik
Aktualności
Stawki i wskaźniki
Zweryfikuj kontrahenta
Oferta
Cennik
Aktualności
Stawki i wskaźniki
Zweryfikuj kontrahenta
mobile btn
default
default
Oferta
Cennik
Aktualności
Stawki i wskaźniki
Zweryfikuj kontrahenta
while pressing
while pressing
Oferta
Cennik
Aktualności
Stawki i wskaźniki
Zweryfikuj kontrahenta
Nowa wersja
Stara wersja
Sekcje(oferta, cennik, aktualności, stawki i wskaźniki, zweryfikuj kontrahenta)
W sekcjach poprawiłem typografie. Teksty są wyśrodkowane, łatwiej je się czyta oraz uwzględniłem nagłówki, przez co łatwiej zorientować jest się teraz w przypadku długich tekstów. Ponadto, tak jak w starej wersji, nawigacja jest na każdej podstronie, w nowej wersji jest ona położona u góry w standardowym miejscu nawigacji oraz zaznacza aktualne miejsce pobytu użytkownika kolorem niebieskim. Dzięki temu, że kolor niebieski jest mocno kontrastowym kolorem, ułatwia to orientację, w którym miejscu użytkownik aktualnie się znajduje, tak samo, jak dodany przeze mnie wielki nagłówek z nazwą sekcji. Ponadto, tak jak na stronie głównej, w momencie scrollowania pasek nawigacji jest w wersji sticky, tak, aby być ciągle pod ręką. Zmniejsza to frustracje przy scrollowaniu do góry, żeby przełączyć stronę(przydatne przy stronach o bardzo długich tekstach). Przy dłuższych stronach (np. “stawki i wskaźniki”) umieściłem również nawigację dla samej zawartości strony. Po kliknięciu przenosi użytkownika do wybranego nagłówka, a na stronie “aktualności” moim głównym celem było zmniejszenie wyświetlającej się treści. W starej wersji użytkownik doświadcza mase tekstu, często źle zredagowanego, przez co łatwo się w nim pogubić oraz przeciążyć umysł. Dlatego postawiłem na rozwiązanie accordions. Treść podzieliłem na rok, przez co sama strona jest mniejsza, a najaktualniejsze informacje są łatwo dostępne przez wybranie odpowiedniego roku. W tym przypadku rok 2023 jest zakładką otwartą, tak, aby użytkownik nie musiał już się wysilać co do znalezienia aktualnych wiadomości. W przypadku, gdy nadejdzie rok 2024 wtedy 2024 będzie otwartą zakładką itd. Przy każdej sekcji umieściłem również na dole dział kontakt, żeby informacje w nim zawarte były dostępne pod ręką.
Nowa wersja
Nowa wersja
Stara wersja
Stara wersja
Nowa wersja
Nowa wersja
Stara wersja
Stara wersja
Nowa wersja
Nowa wersja
Stara wersja
Stara wersja
Nowa wersja
Nowa wersja
Stara wersja
Stara wersja
Nowa wersja
Nowa wersja
Stara wersja
Stara wersja
3.Co dalej?
Choć różnica w redesignie jest zauważalna i pewnie przyjemna dla oka, to zadowolony w pełni z tego projektu, choćbym chciał, nie jestem, bo nie wiem jak w praktyce strona ta by funkcjonowała. Na pewno nie postawiłbym teraz kropki, tylko zrobił przede wszystkim badania funkcjonalności na jakiejś próbce osób, wyłapał dzięki niej potencjalne błędy(które na pewno są) i starał się je naprawić. Dopiero po tym, gdy miałbym 100% pewność, że wszystko funkcjonuje tak jak należy, a przynajmniej gdybym był zadowolony z uzyskanego kompromisu biznesowego z dobrym dizajnem, uruchomiłbym stronę.
Choć różnica w redesignie jest zauważalna i pewnie przyjemna dla oka, to zadowolony w pełni z tego projektu, choćbym chciał, nie jestem, bo nie wiem jak w praktyce strona ta by funkcjonowała. Na pewno nie postawiłbym teraz kropki, tylko zrobił przede wszystkim badania funkcjonalności na jakiejś próbce osób, wyłapał dzięki niej potencjalne błędy(które na pewno są) i starał się je naprawić. Dopiero po tym, gdy miałbym 100% pewność, że wszystko funkcjonuje tak jak należy, a przynajmniej gdybym był zadowolony z uzyskanego kompromisu biznesowego z dobrym dizajnem, uruchomiłbym stronę.
Choć różnica w redesignie jest zauważalna i pewnie przyjemna dla oka, to zadowolony w pełni z tego projektu, choćbym chciał, nie jestem, bo nie wiem jak w praktyce strona ta by funkcjonowała. Na pewno nie postawiłbym teraz kropki, tylko zrobił przede wszystkim badania funkcjonalności na jakiejś próbce osób, wyłapał dzięki niej potencjalne błędy(które na pewno są) i starał się je naprawić. Dopiero po tym, gdy miałbym 100% pewność, że wszystko funkcjonuje tak jak należy, a przynajmniej gdybym był zadowolony z uzyskanego kompromisu biznesowego z dobrym dizajnem, uruchomiłbym stronę.
Nowa wersja
Stara wersja
strona główna
Całą koncepcję oparłem na powadze, dlatego też nie ryzykowałem z jasnymi kolorami, czy próbą pozostawienia ozdobnego tła. Postawiłem na minimalistyczny design z prostym tłem, który nie będzie rozpraszał. Idąc dalej jeżeli chodzi o rozpraszanie i minimalizm musiałem niestety też usunąć ozdobne zdjęcia kotów(przepraszam wszystkich kociarzy!) i krajobrazów. Sekcja hero zawiera elementy, które jasno mówią, kto to, co robi i w jaki sposób można się o tym dowiedzieć. Zdecydowałem się na radykalny krok w zmianie położenia nawigacji. Powodem, dla którego to zrobiłem było poczucie, że boczna nawigacja nie zwraca należytej uwagi, a jednocześnie pomysł, aby była ona po boku w kontekście strony internetowej uważam za nietrafiony, przez wzgląd na to, że użytkownik wchodząc na stronę oczekuje podobnych schematów projektowych jak na każdej innej stronie, a boczną nawigację częściej spotyka się jak już w webowych aplikacjach. Rozwiązaniem tym jest nawigacja w centrum uwagi, która od razu rzuca się w oczy oraz ułatwia i przyspiesza flow użytkownika po stronie. Ponadto gdy scrolluje się stronę w dół pojawia się tradycyjny pasek nawigacji w wersji sticky, tak aby zniwelować czas na powrót do górnej sekcji, tylko od razu mieć możliwość przejścia dalej
Całą koncepcję oparłem na powadze, dlatego też nie ryzykowałem z jasnymi kolorami, czy próbą pozostawienia ozdobnego tła. Postawiłem na minimalistyczny design z prostym tłem, który nie będzie rozpraszał. Idąc dalej jeżeli chodzi o rozpraszanie i minimalizm musiałem niestety też usunąć ozdobne zdjęcia kotów(przepraszam wszystkich kociarzy!) i krajobrazów. Sekcja hero zawiera elementy, które jasno mówią, kto to, co robi i w jaki sposób można się o tym dowiedzieć. Zdecydowałem się na radykalny krok w zmianie położenia nawigacji. Powodem, dla którego to zrobiłem było poczucie, że boczna nawigacja nie zwraca należytej uwagi, a jednocześnie pomysł, aby była ona po boku w kontekście strony internetowej uważam za nietrafiony, przez wzgląd na to, że użytkownik wchodząc na stronę oczekuje podobnych schematów projektowych jak na każdej innej stronie, a boczną nawigację częściej spotyka się jak już w webowych aplikacjach. Rozwiązaniem tym jest nawigacja w centrum uwagi, która od razu rzuca się w oczy oraz ułatwia i przyspiesza flow użytkownika po stronie. Ponadto gdy scrolluje się stronę w dół pojawia się tradycyjny pasek nawigacji w wersji sticky, tak aby zniwelować czas na powrót do górnej sekcji, tylko od razu mieć możliwość przejścia dalej
Całą koncepcję oparłem na powadze, dlatego też nie ryzykowałem z jasnymi kolorami, czy próbą pozostawienia ozdobnego tła. Postawiłem na minimalistyczny design z prostym tłem, który nie będzie rozpraszał. Idąc dalej jeżeli chodzi o rozpraszanie i minimalizm musiałem niestety też usunąć ozdobne zdjęcia kotów(przepraszam wszystkich kociarzy!) i krajobrazów. Sekcja hero zawiera elementy, które jasno mówią, kto to, co robi i w jaki sposób można się o tym dowiedzieć. Zdecydowałem się na radykalny krok w zmianie położenia nawigacji. Powodem, dla którego to zrobiłem było poczucie, że boczna nawigacja nie zwraca należytej uwagi, a jednocześnie pomysł, aby była ona po boku w kontekście strony internetowej uważam za nietrafiony, przez wzgląd na to, że użytkownik wchodząc na stronę oczekuje podobnych schematów projektowych jak na każdej innej stronie, a boczną nawigację częściej spotyka się jak już w webowych aplikacjach. Rozwiązaniem tym jest nawigacja w centrum uwagi, która od razu rzuca się w oczy oraz ułatwia i przyspiesza flow użytkownika po stronie. Ponadto gdy scrolluje się stronę w dół pojawia się tradycyjny pasek nawigacji w wersji sticky, tak aby zniwelować czas na powrót do górnej sekcji, tylko od razu mieć możliwość przejścia dalej
3.Co dalej?
Choć różnica w redesignie jest zauważalna i pewnie przyjemna dla oka, to zadowolony w pełni z tego projektu, choćbym chciał, nie jestem, bo nie wiem jak w praktyce strona ta by funkcjonowała. Na pewno nie postawiłbym teraz kropki, tylko zrobił przede wszystkim badania funkcjonalności na jakiejś próbce osób, wyłapał dzięki niej potencjalne błędy(które na pewno są) i starał się je naprawić. Dopiero po tym, gdy miałbym 100% pewność, że wszystko funkcjonuje tak jak należy, a przynajmniej gdybym był zadowolony z uzyskanego kompromisu biznesowego z dobrym dizajnem, uruchomiłbym stronę.
3.Co dalej?
Choć różnica w redesignie jest zauważalna i pewnie przyjemna dla oka, to zadowolony w pełni z tego projektu, choćbym chciał, nie jestem, bo nie wiem jak w praktyce strona ta by funkcjonowała. Na pewno nie postawiłbym teraz kropki, tylko zrobił przede wszystkim badania funkcjonalności na jakiejś próbce osób, wyłapał dzięki niej potencjalne błędy(które na pewno są) i starał się je naprawić. Dopiero po tym, gdy miałbym 100% pewność, że wszystko funkcjonuje tak jak należy, a przynajmniej gdybym był zadowolony z uzyskanego kompromisu biznesowego z dobrym dizajnem, uruchomiłbym stronę.
3.Co dalej?
Choć różnica w redesignie jest zauważalna i pewnie przyjemna dla oka, to zadowolony w pełni z tego projektu, choćbym chciał, nie jestem, bo nie wiem jak w praktyce strona ta by funkcjonowała. Na pewno nie postawiłbym teraz kropki, tylko zrobił przede wszystkim badania funkcjonalności na jakiejś próbce osób, wyłapał dzięki niej potencjalne błędy(które na pewno są) i starał się je naprawić. Dopiero po tym, gdy miałbym 100% pewność, że wszystko funkcjonuje tak jak należy, a przynajmniej gdybym był zadowolony z uzyskanego kompromisu biznesowego z dobrym dizajnem,
uruchomiłbym stronę.
Sekcje(oferta, cennik, aktualności, stawki i wskaźniki, zweryfikuj kontrahenta)
W sekcjach poprawiłem typografie. Teksty są wyśrodkowane, łatwiej je się czyta oraz uwzględniłem nagłówki, przez co łatwiej zorientować jest się teraz w przypadku długich tekstów. Ponadto, tak jak w starej wersji, nawigacja jest na każdej podstronie, w nowej wersji jest ona położona u góry w standardowym miejscu nawigacji oraz zaznacza aktualne miejsce pobytu użytkownika kolorem niebieskim. Dzięki temu, że kolor niebieski jest mocno kontrastowym kolorem, ułatwia to orientację, w którym miejscu użytkownik aktualnie się znajduje, tak samo, jak dodany przeze mnie wielki nagłówek z nazwą sekcji. Ponadto, tak jak na stronie głównej, w momencie scrollowania pasek nawigacji jest w wersji sticky, tak, aby być ciągle pod ręką. Zmniejsza to frustracje przy scrollowaniu do góry, żeby przełączyć stronę(przydatne przy stronach o bardzo długich tekstach). Przy dłuższych stronach (np. “stawki i wskaźniki”) umieściłem również nawigację dla samej zawartości strony. Po kliknięciu przenosi użytkownika do wybranego nagłówka, a na stronie “aktualności” moim głównym celem było zmniejszenie wyświetlającej się treści. W starej wersji użytkownik doświadcza mase tekstu, często źle zredagowanego, przez co łatwo się w nim pogubić oraz przeciążyć umysł. Dlatego postawiłem na rozwiązanie accordions. Treść podzieliłem na rok, przez co sama strona jest mniejsza, a najaktualniejsze informacje są łatwo dostępne przez wybranie odpowiedniego roku. W tym przypadku rok 2023 jest zakładką otwartą, tak, aby użytkownik nie musiał już się wysilać co do znalezienia aktualnych wiadomości. W przypadku, gdy nadejdzie rok 2024 wtedy 2024 będzie otwartą zakładką itd. Przy każdej sekcji umieściłem również na dole dział kontakt, żeby informacje w nim zawarte były dostępne pod ręką.
Sekcje(oferta, cennik, aktualności, stawki i wskaźniki, zweryfikuj kontrahenta)
W sekcjach poprawiłem typografie. Teksty są wyśrodkowane, łatwiej je się czyta oraz uwzględniłem nagłówki, przez co łatwiej zorientować jest się teraz w przypadku długich tekstów. Ponadto, tak jak w starej wersji, nawigacja jest na każdej podstronie, w nowej wersji jest ona położona u góry w standardowym miejscu nawigacji oraz zaznacza aktualne miejsce pobytu użytkownika kolorem niebieskim. Dzięki temu, że kolor niebieski jest mocno kontrastowym kolorem, ułatwia to orientację, w którym miejscu użytkownik aktualnie się znajduje, tak samo, jak dodany przeze mnie wielki nagłówek z nazwą sekcji. Ponadto, tak jak na stronie głównej, w momencie scrollowania pasek nawigacji jest w wersji sticky, tak, aby być ciągle pod ręką. Zmniejsza to frustracje przy scrollowaniu do góry, żeby przełączyć stronę(przydatne przy stronach o bardzo długich tekstach). Przy dłuższych stronach (np. “stawki i wskaźniki”) umieściłem również nawigację dla samej zawartości strony. Po kliknięciu przenosi użytkownika do wybranego nagłówka, a na stronie “aktualności” moim głównym celem było zmniejszenie wyświetlającej się treści. W starej wersji użytkownik doświadcza mase tekstu, często źle zredagowanego, przez co łatwo się w nim pogubić oraz przeciążyć umysł. Dlatego postawiłem na rozwiązanie accordions. Treść podzieliłem na rok, przez co sama strona jest mniejsza, a najaktualniejsze informacje są łatwo dostępne przez wybranie odpowiedniego roku. W tym przypadku rok 2023 jest zakładką otwartą, tak, aby użytkownik nie musiał już się wysilać co do znalezienia aktualnych wiadomości. W przypadku, gdy nadejdzie rok 2024 wtedy 2024 będzie otwartą zakładką itd. Przy każdej sekcji umieściłem również na dole dział kontakt, żeby informacje w nim zawarte były dostępne pod ręką.
mobile i tablet
mobile i tablet
mobile i tablet
mobile i tablet