Ranking narzędzi do projektowania stron WWW i tworzenia prototypów: Figma, Sketch, Adobe XD, InVision
Każda dobrze funkcjonująca i konwertująca strona internetowa musi być najpierw odpowiednio przemyślana i zaprojektowana. Nie jest to żadna nowość i myślę, że każdy, kto planuje stworzenie swojej strony www, o tym wie, lecz nie dla każdego oczywisty jest sam sposób powstawania takiego projektu. Dlatego w dzisiejszym wpisie opowiemy sobie nieco o najpopularniejszych aplikacjach do projektowania stron internetowych, takich jak: Adobe XD, Figma, Sketch czy InVision.
Na wstępie chciałbym zaznaczyć, że oczywiście żadne z tych oprogramowań nie jest czarną magią i samo opanowanie dostępnych w nich narzędzi nie należy do niezwykle skomplikowanych zadań. Aczkolwiek warto pamiętać, że dobry projekt strony internetowej to efekt wielu innych składowych, jak między innymi umiejętności: projektowania zgodnego z zasadami UX, komponowania typografii, projektowania z myślą o kodowaniu, znajomości wielu zasad i technik projektowych, lat doświadczenia i wiele innych. Wspominam o tym, aby uświadomić Cię, że mimo opanowania któregokolwiek z wymienionych narzędzi - zdecydowanie warto zaufać w tym temacie agencji zajmującej się tym od lat, niż próbować samemu stworzyć projekt.
Spis treści
- Przegląd porównywanych narzędzi
- Adobe XD, Figma, Sketch czy InVision? Które wybrać?
- Adobe XD - dla kogo będzie najlepszym rozwiązaniem?
- Figma - dla kogo będzie najlepszym rozwiązaniem?
- Sketch - dla kogo będzie najlepszym rozwiązaniem?
- InVision - dla kogo będzie najlepszym rozwiązaniem?
- Które z tych narzędzi naszym zdaniem jest najlepsze?
Przegląd porównywanych narzędzi
Zacznijmy więc od kilku słów na temat samych oprogramowań, o których dziś porozmawiamy.
Adobe XD - co to jest i do czego służy?
Adobe XD (Adobe Experience Design) jest aplikacją umożliwiającą projektantom stworzenie interaktywnych projektów dla aplikacji i stron internetowych. Została ona opublikowana w roku 2016 przez firmę Adobe Inc. i do dziś jest jedną z najpopularniejszych aplikacji służących do projektowania www. Adobe XD początkowo miała się nazywać “Project Comet” i była odpowiedzią na rosnące zainteresowanie konkurencyjna aplikacją Sketch. Mimo, że Adobe XD w tym roku przestaje być wspierane przez Adobe i nie otrzyma kolejnych aktualizacji, wciąż zrzesza dość duże grono użytkowników.
Więcej o Adobe XD w jednym z naszych wpisów blogowych: Adobe XD - Co to jest? Do czego służy?
Figma - co to jest i do czego służy?
Figma jest aplikacją umożliwiającą zarówno projektowanie interfejsów, stron internetowych czy aplikacji mobilnych, jak i tworzenie interaktywnych prototypów. Aplikacja ta zabłysnęła w dużej mierze dzięki temu, że jako pierwsza oferowała możliwość współpracy wielu osób w czasie rzeczywistym nad tym samym projektem. Aplikacja ta została wydana również w roku 2016 jako start-up i bardzo szybko zyskała dużą popularność. W roku 2022 Adobe ogłosiło, że planuje wykupić Figmę za kwotę 20 miliardów dolarów, jednak finalnie do transakcji nie doszło ze względu na aspekty prawa antymonopolowego, w związku z czym Figma otrzymała od Adobe solidne odszkodowanie związane z zerwaniem umowy sprzedaży.
Więcej o Figmie w jednym z naszych wpisów blogowych: Projektowanie User Interface, które działają - Figma
Sketch - co to jest i do czego służy?
Sketch jest aplikacją dedykowaną dla urządzeń z systemem macOS, używaną głównie do projektowania interfejsów oraz stron internetowych. Sketch jest jednym z pierwszych programów stworzonych do tego typu projektów, a został wydany już w roku 2010 przez Holenderską firmę Sketch B.V.
InVision - co to jest i do czego służy?
InVision jest platformą do projektowania, prototypowania i współpracy przy projektach stron internetowych czy mobilnych. Platforma ta posiada również liczne funkcje dotyczące zarządzania zadaniami czy użytkownikami. InVision również jest jednym z pierwszych oprogramowań, służących do projektowania www, które zyskały dużą popularność.
Adobe XD, Figma, Sketch czy InVision? Które wybrać?
Specjalnie dla was, zebraliśmy najważniejsze informacje dotyczące tych 4 oprogramowań, dzięki czemu wiedząc, na czym wam zależy, będziecie mogli w prosty sposób wybrać najlepsze oprogramowanie.
Ogólne specyfikacje
Adobe XD
Figma
Sketch
InVision
Windows, MacOS
Przeglądarka, Windows, MacOS
Tylko MacOS
Przeglądarka, Windows, MacOS
Wersja przeglądarkowa
Nie
Tak
Nie
Tak
Aplikacja mobilna
iOS, Android (podgląd prototypów)
iOS, Android (podgląd prototypów)
iOS (podgląd prototypów)
iOS, Android (podgląd prototypów)
Darmowy plan
Tak
Tak
30 dniowy trial
Tak
Płatne plany
Personalizacja interfejsu
Ograniczona
Ograniczona
Tak
Ograniczona
Język interfejsu
Szybkość działania
Wysoka
Wysoka
Średnia
Średnia
Stabilność programu
Doskonała
Doskonała
Dobra
Dobra
Obsługa dużych projektów
Dobra
Doskonała
Dobra
Ograniczona
Dostępna dokumentacja
Tak
Tak
Tak
Tak
Praca offline
Tak
Tak (ograniczona)
Tak
Nie
Współpraca w czasie rzeczywistym
Tak
Tak
Nie
Tak
Dostępność szablonów
Biblioteki obrazów i ikon
Adobe Stock (płatne)
Tak, przez pluginy
Tak, przez pluginy
Integracje z bibliotekami
Motywy interfejsu
Tak
Tak
Tak
Tak
Historia wersji
Tak, ograniczona
Tak
Tak, ograniczona
Tak
Funkcje projektowania
Adobe XD
Figma
Sketch
InVision
Animacje i przejścia
Tak
Tak
Tak, z wtyczkami
Tak
Zaawansowane animacje
Auto-Animate
Smart Animate
Ograniczone
Zaawansowane
Mikrointerakcje
Tak
Tak
Ograniczone
Tak
Interakcje z gestami
Tak
Tak
Ograniczone
Tak
Dostępne wtyczki
Tak
Tak
Tak
Tak
Liczba wtyczek i integracji
Średnia
Duża
Duża
Ograniczona
Siatki i układy
Tak
Tak
Tak
Tak
Autolayout
Ograniczony
Tak
Ograniczony
Ograniczony
Constraints
Tak
Tak
Tak
Tak
Responsive resize
Tak
Tak
Ograniczony
Ograniczony
Praca na komponentach
Tak (ze stanami)
Tak (z wariantami)
Tak (symbole)
Tak
Zmienne
Nie
Tak
Nie
Nie
Współpraca
Adobe XD
Figma
Sketch
InVision
Komentarze i feedback
Tak
Tak
Tak
Tak
Udostępnianie projektów
Tak (Linki, Zaproszenia)
Tak (Linki, Zaproszenia)
Tak (Eksport, Sketch Cloud)
Tak (Linki, Zaproszenia)
Interaktywne prototypy
Tak
Tak
Tak (ograniczone)
Tak
Społeczność użytkowników
Duża
Bardzo duża
Średnia
Średnia
Kontrola uprawnień
Tak
Tak
Tak (ograniczona)
Tak
Zarządzanie użytkownikami
Tak
Zaawansowane
Tak (ograniczone)
Zaawansowane
Zaangażowanie społeczności
Wysokie
Wysokie
Wysokie
Średnie
Import / eksport
Adobe XD
Figma
Sketch
InVision
Opcje importu
Opcje eksportu
Eksport assetów
Tak
Tak
Tak
Tak
Specyfikacja dla deweloperów
Tak
Tak
Tak (przez wtyczki)
Tak
Eksport kodu
Przez wtyczki (HTML, CSS)
CSS, iOS, Android + wtyczki
Przez wtyczki (m.in.: HTML, CSS)
Nie
Udostępnianie prototypów
Tak
Tak
Tak (przez wtyczki)
Tak
Porównanie ogólnej specyfikacji
Jeśli spojrzymy na podstawowe parametry wszystkich czterech aplikacji, wyłonią nam się widoczne różnice, chociażby w kontekście systemu operacyjnego, na którym działają poszczególne aplikacje: Sketch jako jedyny wspiera tylko macOS, podczas gdy pozostałe oprogramowania funkcjonują również na systemach Windows, a Figma i InVision wspierają również aplikację przeglądarkową.
Każdy z tych programów posiada możliwość przetestowania przed zakupem, w postaci darmowego planu lub okresu próbnego. Jednak w kwestii planów płatnych różnice cen są znaczące, a zaczynają się już od 4,95 euro w przypadku InVision aż do 36,89 euro za pakiet obejmujący Adobe XD.
Zastanawiając się nad wyborem odpowiedniego dla nas programu, warto również zwrócić uwagę na sposób, w jaki radzą sobie te aplikacje z dużymi projektami. Na tej płaszczyźnie zdecydowanie najlepiej radzi sobie Figma, zaś wiele do życzenia zostawia InVision.
Funkcje projektowania
Przechodząc do aspektów ściśle związanych z samym procesem i możliwościami projektowania, warto również pochylić się nad kilkoma istotnymi różnicami pomiędzy aplikacjami.
Jeśli zależy nam na tworzeniu zaawansowanych animacji i mocno interaktywnych prototypach, warto zastanowić się nad Figmą lub Adobe XD, ponieważ to one umożliwiają tworzenia właśnie takich animacji, jednocześnie posiadając szeroką gamę wtyczek, które mogą te funkcje jeszcze bardziej rozbudować.
Responsywność w projektowaniu stron internetowych jest bardzo ważna, dlatego na tej płaszczyźnie warto skierować się bardziej w stronę Adobe XD lub Figmy, które posiadają bardziej rozbudowane opcje Autolayoutu czy responsywnego skalowania, niż Sketch czy InVision.
Duże projekty to nieraz dużo danych i stylów, dlatego jeśli zależy nam na tworzeniu i zarządzaniu dużymi projektami, warto się przyjrzeć Figmie, która jako jedyna z porównywanych aplikacji posiada tzw. zmienne (variables), na których opierać się mogą naprawdę duże projekty.
Możliwości współpracy
W kwestii współpracy i udostępniania projektów również pojawiają się różnice, choć już nie tak drastyczne. W tym aspekcie Sketch jako jedyny posiada bardziej ograniczone możliwości w kwestii kontroli uprawnień, zarządzania użytkownikami, a udostępniane prototypy dają nieco mniejsze możliwości interaktywności.
Importowanie i eksportowanie
Tak jak wspomnieliśmy wcześniej, Sketch był jednym z pierwszych programów do projektowania interfejsów, który zyskał dużą popularność, dlatego każde z dzisiaj omawianych oprogramowań daje możliwość zaimportowania pliku w formacie Sketch.
Warto wspomnieć, że aplikacja Adobe XD, jako że jest częścią sieci Adobe, jako jedyna daje możliwość bezpośredniego importu plików PSD czy AI.
Jeżeli nasza praca uwzględnia późniejszą współpracę z programistami wdrażającymi w życie projekt, szczególnie warto pochylić się nad Figmą, ponieważ ona daje największe możliwości pod względem eksportu kodu. Na tym polu najmniej opcji daje nam InVision.
Adobe XD - dla kogo będzie najlepszym rozwiązaniem?
Adobe XD przede wszystkim będzie dobrym rozwiązaniem dla osób, które z wyboru pracują hermetycznie w środowisku Adobe, głównie ze względu na możliwości importu plików PSD i AI, oraz na podobieństwach w interfejsach pakietu Adobe. Jest to również stosunkowo prosta w obsłudze aplikacja, dlatego sugerowałbym ją dla osób początkujących.
Adobe XD - zalety
- Stosunkowo prosta w obsłudze (zwłaszcza dla użytkowników innych aplikacji Adobe)
- Duża szybkość i stabilność działania aplikacji
- Możliwość pracy offline
- Rozbudowane możliwości projektowania responsywnego
Adobe XD - wady
- Brak wersji przeglądarkowej
- Wysoka cena płatnego pakietu
- Ograniczona ilość wtyczek
- Brak dalszego wsparcia od Adobe
Figma - dla kogo będzie najlepszym rozwiązaniem?
Figma jest świetnym rozwiązaniem jeśli szukamy kompleksowej aplikacji umożliwiającej zarówno tworzenie małych, jak i dużych projektów. Niezależnie od tego, czy planujemy tworzenie stron internetowych, prezentacji multimedialnych czy makiety do burzy mózgów - mamy takie możliwości. Figma jednak nie należy do najprostszych rozwiązań. Biorąc pod uwagę ilość funkcji, jakie nam oferuje - interfejs może przytłoczyć początkującego projektanta.
Figma - zalety
- Dostępna wersja przeglądarkowa
- Duża szybkość i stabilność działania aplikacji
- Doskonała obsługa dużych projektów i zmiennych
- Zaawansowana współpraca w czasie rzeczywistym
- Bardzo duża i zaangażowana społeczność oraz ilość wtyczek
- Zaawansowane możliwości projektowania responsywnego
Figma - wady
- Wymaga nieco wdrożenia i “obycia” się z interfejsem
- Niejasny system subskrypcji. Mając płatny pakiet wciąż możemy otrzymywać informację o pracy w darmowym teamie.
Sketch - dla kogo będzie najlepszym rozwiązaniem?
Sketch ze względu na architekturę, w jakiej został stworzony, będzie dobrym rozwiązaniem przede wszystkim dla osób, które korzystają z urządzeń Apple z systemem macOS. Daje on również większe możliwości personalizacji interfejsu, dlatego osoby, które lubią przygotować środowisk “pod siebie” również będą szczególnie zadowolone z programu Sketch.
Sketch - zalety
- Większe możliwości personalizacji
- Możliwość pracy offline
- Duża ilość wtyczek i integracji
Sketch - wady
- Wersja jedynie na macOS
- Brak wersji przeglądarkowej
- Brak współpracy w czasie rzeczywistym
- Ograniczone możliwości animacji i interaktywności
InVision - dla kogo będzie najlepszym rozwiązaniem?
InVision na dzień dzisiejszy nie wyróżnia się szczególnie spośród konkurencji, jednak jak wspomnieliśmy wcześniej był swojego rodzaju prekursorem w dziedzinie projektowania www, dlatego można go śmiało nazwać swojego rodzaju “oldtimerem”. Jest to najbardziej ekonomiczne rozwiązanie z porównywanych dziś programów.
InVision - zalety
- Dostępna wersja przeglądarkowa
- Niska cena za płatny pakiet
- Możliwość współpracy w czasie rzeczywistym
InVision - wady
- Ograniczona możliwość obsługi dużych projektów
- Brak możliwości pracy offline
- Ograniczona ilość wtyczek
- Brak możliwości eksportu kodu
Które z tych narzędzi naszym zdaniem jest najlepsze?
Naszym zdaniem najbardziej kompleksowym i dającym największe możliwości programem do projektowania stron internetowych jest Figma. Przemawia za tym fakt, że dzięki niej możemy tworzyć zarówno małe jak i ogromne projekty, które wykorzystują rozbudowane pakiety zmiennych. Ale to nie wszystko, w Figmie niejednokrotnie oprócz projektów WWW tworzymy różnego rodzaju prezentacje, wizualizacje czy chociażby tablice event-stormingowe, dzięki wbudowanemu programowi FigJam. Jest to również świetne narzędzie do współpracy z programistami, głównie dzięki zaawansowanej współpracy w czasie rzeczywistym oraz możliwościom eksportu kodu.
Jednakże jeszcze do niedawna pracowaliśmy w programie Adobe XD, które również miało wiele zalet, chociażby ze względu na to, że korzystamy z innych aplikacji od Adobe. Na szczęście wszystkie z wymienionych dziś programów dają możliwość sprawdzenia i “przeklikania” sobie jej, czy to w darmowym planie, czy w wersji próbnej. Zapraszamy do samodzielnej analizy swoich potrzeb i wybrania idealnego rozwiązania z naszą tabelą!
