Opis - Proces Designu
Praca rozpoczęła się od szukania inspiracji. Następnie powstały makiety w programie Figma. Do ich wykonania użyłem udostępnionego przez autora kursu gotowego zestawu przycisków i elementów (wireframe kit). Makieta strony głównej prezentuje się następująco:
Na etapie przygotowywania makiety zdecydowałem o czcionce strony. Zarówno dla nagłówków jak i tekstu paragrafu wybrałem fonta Barlow. Jest to estetyczna czcionka bezszeryfowa z dobrą czytelnością. Pomyślałem też nad tekstem zastępczym na stronie. Zdecydowanie dla mnie lepiej się to prezentuje od wypełniania każdej luki znanym generatorem słów lorem ipsum.
Strona główna zawiera sekcję nagłówkową ze zdjęciem na całej szerokości. Poniżej znajduje się sekcja, która naprzemiennie pokazuje różnorodne funkcje i zalety aplikacji. Na końcu znajduje się rozbudowana stopka.
Design w Figmie
Następnie rozpocząłem pracę nad designem strony. Wyszukałem odpowiednie zdjęcia i zasoby na strony, które umieściłem, tak jak we wcześniej zaplanowanej makiecie. Do tego zadania wykorzystałem zasoby ze stron takich jak sketchappsources i sketchrepo, których autorzy udostępniają za darmo gotowe elementy przygotowane w Sketchu. Dzięki temu przedstawiłem na stronie dashboard oraz funkcje aplikacji. Fragmenty nakładające się na zdjęcia w sekcji środkowej zostaną animowane. Oczywiście wybrane elementy zostały dopasowane kolorystycznie i tematycznie.
Co do kolorystyki strony postanowiłem, że strona będzie biała z nutką szarości, a kolor elementów jest tutaj dobrany pod kolorystkę aplikacji, więc jeśli firma miałaby inny brand, nie ma żadnego problemu żeby to zmienić.
Realizacja w Webflow
Webflow jest bardzo rozbudowanym kreatorem stron, który nie jest przeznaczony dla osób nie mających żadnego doświadczenia z tworzeniem witryn. Operuje się w nim elementami znanymi w językach html i css. W trakcie kursu nauczyłem się tym narzędziem posługiwać. Przypomina to pisanie strony kodem, lecz bloki są tutaj tworzone za pomocą narzędzia drag and drop, a każdy wygląd elementu można stylować za pomocą podręcznego menu.
Webflow to nie tylko kreator stron, ale też system zarządzania treścią. Dlatego w projekcie stworzyłem dynamicznie zmieniające się podstrony z postami oraz pojedynczymi wpisami.