Projekt funkcjonalny strony #3 – jak go stworzyć? Software house - X-Coding Wrocław
projekt-funkcjonalny-strony-3-jak-go-stworzyc

Projekt funkcjonalny strony #3 – jak go stworzyć?

1.04.2015 / / E-Commerce

W pierwszym artykule opisującym projekty funkcjonalne wyjaśniłem, że projekt ten jest podstawą tworzenia stron firmowych i e-sklepów, zwłaszcza jeśli chce się to zrobić efektywnie. W kolejnym tygodniu pokazałem, jakie są typy projektów funkcjonalnych, wyróżniłem szkielet strony, makietę strony oraz prototyp.

W tym artykule opiszę kilka narzędzi, z których korzystałem, tworząc projekty funkcjonalne.

Szkic na kartce ołówkiem

Projektowanie strony najlepiej jest zacząć od metody kartki i ołówka. Jest to sposób polegający na tym, że pierwsze szkice strony przeprowadza się na zwykłej kartce papieru, korzystając z ołówka. Dzięki temu można szybko rozrysować najważniejsze elementy projektowanego serwisu, a także na bieżąco je poprawiać, przemieszczać i udoskonalać. Projektowanie na kartce papieru pozwala pobudzić kreatywność, nie ograniczając się do możliwości programów komputerowych. Tutaj można skreślić nieudane elementy, zmazać je, a także szybko zobrazować interakcje poprzez np. doklejenie przylepnych kartek.

Taki szkic wymaga jednak późniejszego opracowania w odpowiednim programie, by skonkretyzować projekt, a także ustalić występujące w nim detale: rozmiary elementów, ich kolejność czy dokładne położenie.

Projekt funkcjonalny - szkic Niektóre najlepsze projekty zaczynają się od papieru

Pencil Project

Pencil Project to w pełni darmowy program do tworzenia projektów funkcjonalnych. Ma możliwość dodania standardowych kształtów, takich jak prostokąt, koło czy trapez. Ma również dużo dodatkowych elementów, w tym różne przyciski, checkboxy, ramki okien czy elementy do tworzenia diagramów. Ze strony internetowej programu można pobrać duży zestaw ikon, które przydają się podczas projektowania interfejsów.

Dodatkową zaletą tego programu jest możliwość zapisu gotowych projektów jako plików różnego typu:

  • Grafika PNG,
  • jedna Strona HTML z łączami do kolejnych podstron projektu,
  • PDF,
  • SVG,
  • dokument ODT.

Produkt ten nie jest jednak pozbawiony wad. Nie jest to program dopracowany graficznie, cały interfejs posiada surowy wygląd. Nie jest także bardzo rozwijanym programem ze stałym wsparciem programistów. Dodatkowo, przy projektach z dużą ilością elementów widać okresowe spowolnienie pracy, zwłaszcza przy przewijaniu zawartości.

Ogólnie jednak dobrze się w nim pracuje, a efekty są w stanie sprostać najważniejszym potrzebom. Produkt jest w całości darmowym narzędziem, bez ograniczeń czasowych.

Pencil Project

Axure RR

Jest to jeden z najpopularniejszych programów na rynku. Oferuje bardzo wiele możliwości stworzenia dokładnej makiety. Posiada wiele podstawowych elementów zdefiniowanych w systemie, dodatkowo wiele innych bibliotek można ściągnąć z Internetu, dzięki czemu zyskuje się większe możliwości niż w Pencil. Są to nie tylko takie rzeczy jak prostokąt, obraz czy przycisk. Wśród elementów dostępnych dla użytkowników są specjalistyczne elementy interfejsów (np. obrazy telefonów Apple), w których obrębie można projektować aplikacje dedykowane na te systemy, oraz elementy takie jak klawiatury, belki z informacjami czy nawet ikony wykorzystywane w tych urządzeniach.

Dużym atutem tego programu jest możliwość dodania interakcji do elementów, czyli np. tego, co ma się wyświetlić po kliknięciu w przycisk, albo jaka strona powinna się pojawić. Dzięki temu, poza szkieletem strony można również stworzyć dobrze działający prototyp, gotowy do zapisania jako działająca strona HTML.

Projekty tworzone w tym programie nie muszą być szkieletami strony z niską ilością szczegółów. Axure oferuje możliwość dodania dokładniejszej grafiki, dzięki czemu projekty bardziej przypominają docelowy produkt.

Program ten oferuje za darmo w pełni funkcjonalną wersję na 30 dni. Dodatkowo osoby ze statusem studenta lub nauczyciela mogą zamówić za darmo wersję działającą dłużej.

Axure RP

UXPin

To kolejny przykład bardzo popularnego i zaawansowanego narzędzia. Jest to aplikacja dostępna z poziomu przeglądarki. Posiada bogatą kolekcję elementów gotowych do umieszczenia w projekcie strony. Niektóre z nich, np. przyciski, kalendarze, czy obrazki, dopasowane są do różnych platform, np. do aplikacji działających na systemie iOS czy Android, a także do stron internetowych. Każdy z elementów posiada szczegółowe opcje konfigurowania, dzięki czemu można precyzyjnie dostosować go do własnych potrzeb, zmieniając m.in. rozmiary, kolory, promień obrotu czy tzw. padding, czyli odległość treści od krawędzi obiektu. Do każdego elementu można również dodać akcję, z jaką jest związany, np. po kliknięciu w przycisk strona przewija się do stopki.

Niewątpliwym plusem jest możliwość dostosowania każdej strony do wersji RWD, czyli wyświetlanej na różnych rozdzielczościach ekranu.

UXPin umożliwia również zaprezentowanie online stworzonego projektu. Do każdego projektu dostarczony jest specjalny link, który można np. wysłać klientowi, albo otworzyć w czasie osobistego spotkania z nim, i zaprezentować jak projekt wygląda i działa, opowiadając o wszystkich istotnych elementach.

Dodatkowym atutem UXPina jest możliwość przeprowadzenia testów użyteczności na stworzonym prototypie, dzięki czemu można jeszcze przed etapem programowania sprawdzić zastosowane rozwiązania.

UXPin nie jest również wolny od wad. W moim odczuciu najistotniejszą z nich jest brak aplikacji desktopowej. Osobiście bardzo cenię sobie możliwość otworzenia konkretnego programu do pracy, nie używając do tego przeglądarki.

Wersja darmowa UXPina dostępna jest na 7 dni, z możliwością przedłużenia do 30 poprzez udostępnianie go na portalach społecznościowych – Twitter, Facebook oraz Google+.

UXPin

Balsamiq Mockup

Balsamiq jest prostym narzędziem przydatnym do szybkiego naszkicowania strony. Nie jest to program dla osób, które potrzebują dokładnego projektu. Może być natomiast zastępstwem dla szkicowania na papierze, tak by zawrzeć na nim ogólną ideę strony.

Baslamiq posiada ładny interfejs, wszystkie elementy są dopracowane graficznie. Domyślnym trybem jest szkic, który symuluje elementy ręcznie rysowane. Szybko można jednak go zmienić na szkielet strony, wtedy wszystkie elementy stają się idealnie proste, równe, jak na projekcie funkcjonalnym być powinny.

Dodatkową zaletą tego programu jest prosty tryb prezentacji, kursor staje się wtedy dużą strzałką ułatwiającą pokazywanie poszczególnych elementów. Dzięki temu można w elegancki sposób zaprezentować klientowi wizję jego nowego produktu.

Balsamiq, podobnie jak Axure, umożliwia przetestowanie go przez 30 dni za darmo.

Balsamiq Mockup

MockFlow WireFramePro

MockFlow to ciekawe narzędzie do tworzenia projektów funkcjonalnych. Dostępny jest z poziomu przeglądarki internetowej, wszystkie projekty zapisywane są w chmurze. Udostępnia on też program o takiej samej funkcjonalności jak platforma internetowa.

MockFlow zawiera listę zdefiniowanych najważniejszych elementów wykorzystywanych podczas projektowania stron, i choć jest ich dużo mniej niż w UXPin czy Axure, osobiście nigdy nie spotkałem się z sytuacją, że czegoś mi brakowało. MockFlow oferuje również możliwość zaimportowania do projektu dodatkowych elementów, np. gotowych szkieletów strony czy zestawu ikon z Androida.

Program umożliwia również elegancką prezentację gotowych projektów. Dostępny jest tu pełnoekranowy tryb przeglądania, dzięki czemu żadne elementy systemu operacyjnego nie rozpraszają uwagi.

Inny tryb – Whiteboard – umożliwia bieżące wyświetlanie całego projektu na białym tle z możliwością zaznaczania konkretnych, omawianych elementów oraz wpisanie prostych notatek kolorowymi markerami. Taki efekt prezentacji można potem zapisać jako plik graficzny, by zapamiętać najważniejsze wnioski ze spotkania.

MockFlow WireFrame Pro dostępny jest za darmo dla jednego użytkownika z jednym projektem, bez limitu czasu. W tej wersji jednak można stworzyć maksymalnie 4 strony czy ekrany aplikacji.

MockFlow WireFramePro

Invision

Invision jest prostym narzędziem do prototypowania i prezentacji online. Służy on do tego, by zaprezentować proste interakcje pomiędzy zaprojektowanymi stronami.

Zasada działania jest prosta – mając gotowe szkielety stron lub makiety w plikach graficznych można je wgrać na swoje konto. Tam zaznacza się w każdej z nich miejsca, które można kliknąć i strony, do których prowadzą kliknięcia.

Dla projektu dostępny jest tryb prezentacji online. Odpowiedni adres internetowy można wysłać np. klientowi i na bieżąco omawiać z nim działanie serwisu.

Invision dostępny jest w wersji darmowej, ale tylko dla jednego projektu.

Invision

Podsumowanie

Programów do tworzenia projektów funkcjonalnych jest dużo więcej niż te, które przedstawiłem, dlatego przed zdecydowaniem się na któryś z nich warto przetestować kilka różnych.

Przy wyborze odpowiedniego narzędzia powinno się kierować przede wszystkim wygodą pracy i spełnieniem wymagań. Ważnym czynnikiem jest również cena produktów.

Ja wybrałem te kilka narzędzi, z którymi pracowałem w swojej karierze i w jakiś sposób zapadły mi w pamięć. Każde z nich oferuje ciekawe rozwiązania przydatne w codziennej pracy projektanta serwisów i aplikacji.