Axure 9 od zera

W tym ćwiczeniu utwórz nowy projekt, nie ma w nim dołączonego pliku z ćwiczeniem.

W tym prostym ćwiczeniu należy pokazać właścicielowi biznesowemu wybranego portalu, obszary reklamowe, które będą się znajdować na jego stronie. Należy skupić się jedynie na rozmieszczeniu poszczególnych elementów i nie wdawać się w szczegóły. Najprostszą metodą jest dekompozycja wybranej strony na kształty. Większość elementów na stronach internetowych można rozbijać na mniejsze części aż dojdziemy do tego, że praktycznie wszystko jest prostokątami, dlatego w tym zadaniu używaj jedynie tego kształtu, możesz również dodawać trochę tekstu na prostokącie. Skup się w tym zadaniu aby odległości były równe i wszystko wyglądało prosto. Wybierz jedną z poniższych stron.

• wp.pl

• onet.pl

• interia.pl

• facebook.com

• youtube.com

Część z nich ma tak zwany infinity scroll czyli scrollowanie w dół w nieskończoność - nie rób tego w nieskończoność. Umów się ze sobą, że poświęcisz na zadanie max 10-15 minut. W następnym filmie - moje rozwiązanie. Do dzieła!

W tym ćwiczeniu utwórz nowy projekt, nie ma w nim dołączonego pliku z ćwiczeniem.

Kojarzysz pewnie te filmy z internetu, w której jakiś grafik rysuje ten sam obrazek najpierw w 10 minut, potem w minutę, a potem w 10 sekund.

Wybierz, nad którą stroną chcesz pracować 10 minut, nad którą 5 i nad którą 3 minuty, ale nie może być to strona z poprzedniego ćwiczenia oraz strony nie mogą się powtarzać!

W następnym filmie pokażę Ci moje rozwiązania 3 stron, ale na każdą będę miał 3, 2 i jedną minutę. Powodzenia i miłej zabawy!

• wp.pl

• onet.pl

• interia.pl

• facebook.com

• youtube.com

Pobierz i uruchom projekt dołączony do tego wideo, jak już uruchomisz projekt - kontynuuj.

W tym ćwiczeniu masz za zadanie przygotować tak zwany Design System. Nie mówię tu o całym Systemie takim jak Material Design od Googla czy Fluent Design System od Microsoftu. Chodzi o dostosowanie komponentów do jakiegoś - wybranego przez Ciebie stylu.

Pobierz i uruchom projekt dołączony do tego wideo, jak już uruchomisz projekt - kontynuuj.

W tym ćwiczeniu, do przygotowanej już prawie-gotowej aplikacji do rezerwowania hoteli musisz dorobić nawigację.

Na stronie Krok 1,

• Wszystkie przyciski “ZAREZERWUJ” powinny przenosić do strony Krok 2

Na stronie Krok 2,

• Przycisk WSTECZ powinien przenosić do Kroku 1

• Przycisk DALEJ powinien być zablokowany

• Checkbox powinien odblokowywać przycisk DALEJ

• Odblokowany przycisk DALEJ powinien przenosić do strony Krok 3

Na stronie Krok 3,

• Przycisk WSTECZ powinien przenosić do Kroku 2

• Kliknięcie na dowolną część któregokolwiek z pokoi powinno przenosić do Kroku 4

Na stronie Krok 4,

• Przycisk WSTECZ powinien przenosić do Kroku 3

• Przycisk POMIŃ UDOGODNIENIA powinien przenosić do Kroku 5

• Przycisk WYBIERZ DODATKOWE UDOGODNIENIA powinien przenosić do kroku 4b

Na stronie Krok 4b

• Przycisk dalej powinien przenosić do Kroku 5

• Zaznaczenie odpowiedniego checkboxa może animować grafikę obok

Na stronie Krok 5

• Przycisk SUPER! powinien przenosić do Kroku 1

• Ikona uśmiechu może się animować

Przygotuj cały formularz finalizujący zakup pizzy. Pamiętaj aby pola miały HINT TEXT i odpowiedni typ. Utwórz i zgrupuj odpowiednio radiobuttony i zablokuj przycisk zamówienia bez potrzebnej zgody.

Wstępne style są już przygotowane, ale jeżeli uważasz, że można je jakoś zmienić - śmiało!

W tym ćwiczeniu masz więcej swobody i więcej kombinowania, po skończonej pracy, zachęcam Cię do pokazania komuś tego formularza aby wyraził swoją opinię.

Jak skończysz - zobacz moją propozycję dokończenia formularza. Miłej zabawy!

Pobierz i uruchom projekt dołączony do tego wideo, jak już uruchomisz projekt - kontynuuj.

Na tej stronie informacyjnej znajdują się wszystkie owoce. Celem tego ćwiczenia jest podzielenie tej strony na 5 podstron, na każdej pojedynczy produkt. Po lewej stronie stwórz menu, które będzie przenosiło do odpowiedniej podstrony z produktem. Wykorzystaj mastery, aby nie było potrzeby modyfikacji menu w każdej podstronie. Dodatkowe zadanie to zrobienie aby aktywna strona była w jakiś sposób podkreślona w menu. Możesz wykorzystać do tego atrybut SELECTED o którym było w poprzedniej lekcji.

Pobierz i uruchom projekt dołączony do tego wideo oraz pobierz i rozpakuj paczkę z obrazkami, jak już uruchomisz projekt - kontynuuj.

Używając funkcji masterów override, stwórz listę pizz w formie “kafelków”, korzystając z notatek zostawionych w projekcie i grafik dołączonych do ćwiczenia.

W tym ćwiczeniu pracuj na poprzednim pliku - tym z ćwiczenia 8, dodatkowo pobierz folder z grafikami.

Celem zadania jest stworzenie zmieniającego się banera wykorzystując grafiki o nazwie baner (1-3), można je dodatkowo udekorować - do tego możesz użyć grafik farba (1-4) i spróbować dodać animacje.

Użyj do tego zadania panelu dynamicznego podzielonego na 3 staty, które powinny zmieniać się animacją co kilka sekund. Możesz dopisać jakieś kreatywne teksty na każdym stanie banera i dodać jakieś przyciski Call to Action.

Utwórz panel dynamiczny na podstawie tego, co już jest na twojej makiecie. Możesz dodać animacje, które pojawiają się w fajny sposób.

W tym ćwiczeniu pracuj na poprzednim pliku, tym z ćwiczenia 8 wzbogaconym o banery z ćwiczenia 9.

Utwórz nową stronę w projekcie: “Menu” stwórz w niej tabelę za pomocą repeaterów.

Przygotuj tabelę z pizzami i cenami według rozmiarów, możesz również dodać składniki. Nie dodawaj zdjęć.

Jeżeli czujesz się na siłach, możesz dodać paginację, czyli przechodzenie między stronami w tabeli.

W tym ćwiczeniu, spróbuj przerobić repeater, który był celem poprzedniego ćwiczenia na taki, który został utworzony w ćwiczeniu 8. Grafiki pizzy zamień na placeholder z obrazkiem.

Do dzieła!