Opis - Proces Designu
Pomysł designu powstał z myślą o prywatnym sektorze medycznym. W przeciwieństwie do publicznych placówek, które przeznaczone są dla większości obywateli, co za tym idzie zawierają ogromne ilości informacji, prywatne firmy mogą pozwolić sobie na bardziej biznesowo wyglądającą stronę internetową.
Pracę rozpocząłem od szukania różnych inspiracji w serwisach typu dribbble. Następnie sporządziłem proste makiety niskiego stopnia (zawierające jedynie strukturę strony). Do stworzenia designu strony użyłem oprogramowania Figma.
Na początku wybrałem kolorystykę serwisu oraz typografię (rodzaj czcionki). Zdecydowałem się, że przewodnim kolorem będą odcienie niebieskiego, ponieważ wzbudzają zaufanie i uspokajają, co moim zdaniem jest cechą pożądaną dla ludzi z problemami zdrowotnymi. Ważny jest tutaj kontrast lodowego odcieniu błękitu z mocnym kolorem niebieskim, jakiego używałem przy elementach, na które użytkownik powinien zwrócić uwagę. Co do typografii, w tym projekcie postanowiłem użyć tylko jednej czcionki - Inter. Jest ona bezszeryfowa, przez co zapewnia dobrą czytelność, ale jest również na tyle estetyczna, by zastosować ją przy nagłówkach.
Kolejnym etapem był dobór odpowiednich zdjęć. Tutaj postanowiłem, że nie będę dodawał całych zdjęć, a jedynie wytnę za pomocą Photoshopa postacie lekarzy. Fotografie pochodziły z legalnych źródeł, których można używać do celów komercyjnych (Pixabay, Pexels itp.).
Co do struktury strony, składa się ona z sekcji:
- Początkowej tzw. hero section
- Z głównymi usługami firmy
- Opisującą działalność firmy
- Opisującą kadrę i specjalizacje lekarzy
- Z opiniami użytkowników
- Stopki
Treść na potrzeby przedstawienia designu została przeze mnie wymyślona. Po wykonaniu każdego opisanego kroku mogłem przystąpić już do realizacji projektu w Elementorze.
Design w Figmie
Realizacja w Elementorze
Już na samym początku pracy nad stroną napotkałem wiele problemów związanych z tym, że pracowałem na darmowej wersji elementora, przez co wiele funkcji, było dla mnie po prostu niedostępnych. Nauczyło mnie to jednak, że trzeba iść na kompromis i musiałem zrezygnować z niektórych wcześniejszych założeń w designie.
Przykładowo, nie mogłem oznaczyć aktywnej zakładki w menu, ponieważ tylko wersja premium zapewnia szeroką customizację menu. Poza tym z Elementor bardzo szybko tworzy się stronę, można edytować treść, a biblioteka ikon font awesome jest tam wbudowana, do wykorzystania.
Oczywiście musiałem odpowiednio dopasować marginesy różnych sekcji oraz sprawić, by strona była responsywna. Niektóre elementy takie jak zdjęcie chirurga nie nadają się do wyświetlania na ekranach smartfonów. Podczas przygotowań dowiedziałem się, że zdjęcia z rozszerzeniem svg mogą być potencjalnie groźne dla użytkowników stron. W wordpressie należy pobrać odpowiednią wtyczkę, by takie zasoby można było wgrywać na serwer.
Plany - rozwinięcie kilku podstron
Zamierzam przygotować inne podstrony w projekcie, żeby był bardziej obszerny...