Stoisz przed zadaniem zaprojektowania strony internetowej i nie wiesz, od czego zacząć? Nawet jeśli jesteś początkujący, z pomocą jednej z gotowych aplikacji stworzysz to, czego potrzebujesz.
Stoisz przed zadaniem zaprojektowania strony internetowej i nie wiesz, od czego zacząć? Nawet jeśli jesteś początkujący, z pomocą jednej z gotowych aplikacji stworzysz to, czego potrzebujesz.
Krok 1 – zacznij od postaw.
Na początek określ cel swojej strony internetowej, czyli przemyśl to, do czego ma ona służyć. Wiedząc, jaki jest cel, łatwiej będzie Ci zdecydować, które elementy powinny być widoczne w pierwszej kolejności, a jakie funkcje niekoniecznie.
W porządku, ale jakie mogą być przykładowe cele stron internetowych? Oto kilka możliwości:
Krok 2 – sprawdź, jak robią to inni.
Bardzo ważnym etapem projektowania, nie tylko stron internetowych, jest zrobienie dokładnego researchu. Poznanie innych rozwiązań pozwoli nie tylko poznać specyfikę np. danej branży, ale także określić grupę docelową.
Posługiwanie się moodbordami (tablicami inspiracji) pomoże określić styl, na jakim zależy klientowi, a nawet wskazać preferowane funkcje.
Krok 3 – przemyśl ścieżki użytkowników.
Na tym etapie powstają makiety UX, czyli szkice, które określają, w jaki sposób ludzie będą się poruszać po naszej stronie internetowej. Jest to wstępny widok strony, który ma w sposób poglądowy pokazać ustalone założenia. Po akceptacji będzie to punkt wyjścia do finalnego projektu.
Makiety strony mogą się różnić ze względu na poziom szczegółowości. Wyróżniamy makiety low fidelity (lo-fi) – bardzo prosta wersja strony przedstawiona np. na kartce papieru oraz high fidelity (hi-fi) – zawierająca dużo więcej szczegółów, dostosowaną kolorystykę i inne wizualizacje.
Krok 4 – pokaż, jak to będzie wyglądało.
Na tym etapie, bazując na wcześniejszych ustaleniach, tworzymy projekt strony internetowej. Obejmuje to dobór kolorystyki, typografii, grafik, pozostałych elementów, a także zaplanowanie ich układu.
Ważne, aby już teraz dostosować stronę zarówno do ekranów telefonów, jak i komputerów. Na tym etapie należy pamiętać o tym, że funkcjonalność strony musi iść w parze z estetyką. Mając gotowy projekt wyglądu i działania strony, zostaje tylko czekać na akceptację klienta 🙂
Przez wiele lat wiedza na temat projektowania stron internetowych była tajemnicza dla każdego, kto nie był specjalistą w tej dziedzinie. Obecnie na rynku pojawia się coraz więcej aplikacji, które umożliwiają projektowanie stron internetowych także mniej zaawansowanym użytkownikom. Często przyjazne interfejsy oraz dołączone samouczki pozwalają na samodzielne wypracowanie zarysów strony. Sprawdźmy kilka narzędzi dostępnych na rynku.
Figma to jedno z najnowocześniejszych i najpopularniejszych narzędzi do projektowania stron internetowych. Praca w tym narzędziu odbywa się w chmurze, co daje możliwość na udostępnianie w czasie rzeczywistym i współpracę wielu członków zespołu nad danym projektem.
Ciekawostka: Figma działa na PWA, dostępna jest zarówno dla użytkowników systemu Windows, jak i MacOS.
grafika pobrana ze strony głownej www.figma.com
Narzędzie to jest idealnym wyborem dla większych zespołów, posiadających zróżnicowany sprzęt. Świetnie się sprawdzi także dla początkujących projektantów ze względu na przejrzysty interfejs i dostępność gotowych szablonów.
Podstawowe funkcje narzędzia Figma są darmowe. Istnieje również możliwość wykupienia płatnych planów, które są przeznaczone dla zespołów projektowych. Dla pracującego samodzielnie freelancera wystarczający będzie plan bezpłatny.
Cena: od 0 do ok. 320 zł/miesiąc
Zalety: możliwość współpracy kilku osób, podstawowa wersja jest darmowa, przejrzysty interfejs
Wady: wysoka cena zaawansowanych pakietów
Adobe XD jest narzędziem wchodzącym w skład rodziny Adobe, pozwalającym na projektowanie interfejsu użytkownika. Tak jak pozostałe produkty tej firmy, Adobe XD jest intuicyjny i prosty w użyciu. Podobnie jak Figma, narzędzie to posiada wsparcie dla wielu platform, w tym Windows i MacOS.
grafika ze strony Adobe
Niewątpliwą zaletą XD jest możliwość integracji z innymi produktami Adobe, np. Illustrator czy Photoshop. Daje to szerokie możliwości projektowe. Pozwala on także na przetestowanie pod kątem użyteczności i funkcjonalności rozwiązania przed jego ostatecznym wdrożeniem.
Dostępna jest bezpłatna wersja aplikacji, o ograniczonych możliwościach. Tak jak pozostałe produkty tego producenta, dostęp do standardowej wersji Adobe XD wymaga opłacania abonamentu. Dokładne ceny i zakresy usług dostępne są na Adobe Creative Cloud.
Cena: ok. 1200 zł za licencję roczną (dla użytkownika indywidualnego)
Zalety: łatwy w obsłudze, kompatybilny z innymi programami Adobe, szersze możliwości eksportu plików
Wady: bezpłatna wersja nie może być wykorzystywana do celów komercyjnych, konieczność częstych aktualizacji
Popularnym narzędziem do projektowania stron dla systemu operacyjnego MacOS jest aplikacja Sketch. Pozwala on na tworzenie interaktywnych prototypów, a jego obsługa nie jest skomplikowana. Producent przygotował szereg filmów instruktażowych, aby ułatwić pierwsze kroki w tym narzędziu.
grafika ze strony www.sketch.com
Aplikacja ta jest często wybierana ze względu na szeroką bibliotekę narzędzi do projektowania. Sprawdzi się zarówno dla początkujących projektantów, jak i do bardziej zaawansowanych zadań. Fakt, że Sketch może być używany jedynie na MacOS, jest jednak znaczącym ograniczeniem.
Sketch jest narzędziem płatnym – użytkownik ma do wyboru kilka planów. Dodatkowo producent daje możliwość miesięcznego bezpłatnego przetestowania narzędzia.
Cena: ok. 40 zł miesięcznie przy licencji rocznej (dla użytkownika indywidualnego)
Zalety: przyjazny interfejs, umożliwia tworzenie responsywnych projektów
Wady: dostępny tylko dla systemu operacyjnego MacOS, brak zaawansowanych narzędzi do projektowania
Pomimo że każde z przedstawionych narzędzi ma swoich zwolenników, to wyraźnie pierwsze miejsce zajmuje jednak Figma. Zdominowała ona rynek projektowania stron internetowych, a jej szerokie możliwości sprawiają, że zarówno my, jak i wielu innych specjalistów stawia w swojej pracy na to narzędzie.
Niezależnie jednak, który produkt wybierzesz, efekt ostateczny strony, dzięki UI designowi, powinien być dopasowany do Twojego odbiorcy. Stwórz dla niego mapę, po której będzie mógł się łatwo i intuicyjnie poruszać.
Dodaj komentarz