Najważniejszą częścią każdej aplikacji jest jej design, front end. Bez umiejętności tworzenia dobrego projektu już na początku skazujesz aplikację na porażkę. Możesz mieć najlepszy kod aplikacji, jeśli nie potrafisz stworzyć użytecznego wyglądu aplikacji użytkownicy nie będą chcieli z niej korzystać.
W tym poradniku pokażę Ci, jakich zasad przestrzegałem podczas tworzenia designu aplikacji, na końcu będzie check lista, która pozwoli Ci wyłapać błędy podczas tworzenia dobrych layoutów aplikacji które będziesz tworzyć.
Głównym założeniem aplikacji, jest szybkie i intuicyjne wyszukiwanie skrótów używanych w komunikacji zdalnej. Dlatego layout aplikacji skupiłem wokół wyszukiwarki w pierwszej sekcji.
1. Wybór rozdzielczości dla której będziesz projektował
Rozdzielczość dla jakiej będziesz projektował to 1440 px szerokości i wysokość w zależności od ilości treści na stronie. Ja w swoim designie zmieściłem się w wymiarach: 1440px szerokości na 2800px szerokości. Projektowałem w figmie, narzędziu bardziej przyjaznym od photoshopa z mocno okrojonymi funkcjami w porównaniu do kombajnu od Adobe. Kolejnym plusem dla figmy, jest to, że oprogramowanie jest darmowe i ma niższy próg wejścia od photoshopa.
Na początku ustaliłem jak będzie wyglądał grid, czyli kolumny które będą dzielić Twój projekt na spójne części: 12 kolumn o marginesie z prawej i lewej po 100px, oraz odstępie między sobą wynoszącym 30px.
2. Tworzenie Hierarchii wizualnej
Celem aplikacji jest wyszukiwanie znaczenia skrótów, dlatego centralnym elementem na który użytkownik w pierwszej kolejności powinien zwrócić uwagę jest wyszukiwarka.
- input wyszukiwarki posiada jasny kolor w celu podbicia kontrastu oraz wyróżnienia jej na ciemnym tle, - gabarytami czcionki, input boxu oraz przycisku przewyższa wszystkie elementy jakie znajdują się w pierwszej sekcji, - cała wyszukiwarka rzuca cień, co dodatkowo uwypukla ją na tle, - wyróżniłem pogrubieniem rodzaj wyszukiwania: skróty bądź opisy skrótów, zaimplementujesz możliwość wyszukiwania po dwóch tabelach - w głównej sekcji umieściłem także slogan który od razu wyjaśnia dla użytkownika z jakim rodzajem aplikacji ma do czynienia (wyszukiwarka) i co dzięki tej aplikacji otrzyma (wyjaśnienia skrótów).
3. Wybór czcionek
Czcionki które wybierasz do swoich projektów powinny odzwierciedlać ich przeznaczenie i nieść jasny przekaz co do stylu aplikacji. Błędem byłoby gdybyś wybrał do aplikacji która wyszukuje skróty w Internecie, czcionkę, która pasuje dla wyszukiwarki wakacji na Hawajach. Złym przykładem jest użycie czcionki Kaushan Script jako nagłówków, niesie ona z sobą jasne komunikaty:
- nie formalna, - wakacyjna, - kojarząca się z hawajamii. Nie pasuje do stylu nowoczesnej wyszukiwarki.
Ja wybrałem czcionkę Gurajada dla nagłówków skrótowca oraz czcionkę lato dla akapitów:
Najprostszym kontrastem jest wybranie pary czcionek szeryfowa : bez szeryfowa, jednak czcionka szeryfowa nie pasuje do przeznaczenia skrótowca. Tutaj będzie potrzebna nowoczesna para czcionek.
Do nagłówków idealnie pasuje Gurajada z google fonts. Czcionka jest bez szeryfowa i powstała z myślą o wykorzystaniu jej w nagłówkach, plakatach oraz zaproszeniach. Odpowiedni kontrast do czcionki lato zapewni jej styl telugu, czyli styl indyjskiego alfabetu sylabicznego.
Dla akapitów wybrałem czcionkę lato autorstwa Łukasza Dziedzica. Zbalansowana czcionka z nowoczesnym wyglądem, którą łatwo się czyta. W czcionce Łukasz zachował klasyczne proporcje dzięki którym można odnaleźć harmonię i elegancję, cechy których poszukiwałem dla skrótowca.
4. Wybór obrazków do aplikacji
Przy wyborze obrazów, które będziesz używał podczas tworzenia aplikacji, kieruj się zasadami:
- każdy obrazek powinien zawierać prawdziwą scenę, niosącą spójny przekaz z aplikacją, - emocje osób na zdjęciach powinny być prawdziwe, - całość zdjęcia powinna wyglądać na aktualną, tutaj zwróć szczególną uwagę na ubiór osób w kadrze oraz sprzęt jakiego używają.
Ja wybrałem zdjęcia osób które pracują lub rozmawiają przy komputerze, zwracając uwagę na otoczenie: obrazki powinny zawierać przekaz pracy zdalnej oraz rozmowy lub emocji.
5. Tworzenie palety kolorów
Kolorów nie wymyślałem od początku, posłużyłem się tutaj techniką pobierania kolorów z obrazka wyróżniającego w pierwszej sekcji strony. Technika ta zagwarantuje Ci odpowiednie dobranie kolorów w aplikacji, inspirujesz się realnym połączeniem kolorów, naturalnie występującym w otaczającym Cię świecie. Na obrazek człowieka siedzącego przy laptopie z gestem rozmowy nałóż rozmycie gaussowskie i pobierz różne kolory pipetą, ja otrzymałem taką paletę:
5. Finalny design w figmie
