Adobe Illustrator przeżywa swój powrót w świecie projektowania stron internetowych. Nie tylko SVG staje się powszechnie używany w sieci, ale coraz więcej projektantów używa wektorów do tworzenia makiet. Poniższe wskazówki pomogą Ci w pełni wykorzystać Illustratora jako narzędzie do wireframingu.

Wireframing polega na szybkiej pracy i szybkiej iteracji. Celem nie jest tworzenie atrakcyjnych interfejsów; Twoim priorytetem numer jeden jest projektowanie informacji i doświadczeń.

1. Idź w stronę monochromatyczności

Szablony jasno określają hierarchię na stronie internetowej; wizualnie pokazują kolejność, w jakiej użytkownicy powinni przetwarzać dostępne informacje. Jeśli chcesz, aby użytkownicy przetwarzali nagłówek przed naciśnięciem przycisku „kup teraz”, nagłówek musi „przebić” przycisk, wymagając większej uwagi.

Tę wizualną hierarchię można zdefiniować na wiele sposobów. Możemy użyć rozmiaru, aby uczynić nagłówek bardziej efektownym, możemy użyć pozycjonowania (umieszczając go przed przyciskiem). Moglibyśmy użyć koloru, kontrastu i wielu innych rzeczy, ale robienie tego na schemacie tylko sprawia, że rzeczy stają się bardziej zagmatwane.

Po usunięciu koloru z równania, wizualna relacja zdefiniowana przez pozycję, rozmiar i (jeśli chcesz pójść o krok dalej) kontrast, jest znacznie czystsza.

Nie budujemy tutaj ładnych, pikselowo doskonałych zestawów UI. Trzymaj się ograniczonego zakresu szarości, a następnie używaj kolorów tylko do etykiet i notatek.

2. Zachowaj warstwy do określonych celów

Mówiąc o etykietach, notatkach i komentarzach, świetnym pomysłem jest umieszczenie każdej z nich na dedykowanej warstwie. To samo dotyczy wszystkiego innego, co ma konkretny cel; jak zachowanie, interakcja, gesty i tak dalej.

Umieść wizualizacje na jednej warstwie, zachowanie na innej, a etykiety na jeszcze innej, tak abyś mógł łatwo przełączać ich widoczność, gdy zajdzie taka potrzeba.

3. Wykorzystaj symbole

D.R.Y. jest ogólnie używany jako termin programistyczny, ale ma takie samo zastosowanie do przepływu pracy projektowej. W każdym szkielecie, będziemy używać i ponownie wykorzystywać pewne obiekty. Zmień te obiekty w symbole, a wszelkie zmiany wprowadzone w jednym z nich zostaną natychmiast odzwierciedlone w pozostałych.

Na przykład, oto proste pole formularza:

Przeciągnijmy je do okienka Symbole (Shift + Command + F11)

Możemy teraz wyciągnąć ten symbol z okienka Symbole, tyle razy ile chcemy, na tablicę. Klikając dwukrotnie na dowolny z nich, wyizolujemy go (trochę jak obiekty zgrupowane), dzięki czemu będziemy mogli go edytować. Wszelkie dokonane przez nas zmiany, w tym przypadku zaokrąglenie rogów prostokąta, zostaną zastosowane do każdego z użytych przez nas symboli pól formularza.

Gdy mamy już kolekcję symboli, możemy je również zapisać jako zestaw:

To pozwoli nam załadować je do innych plików w przyszłości.

Jeśli chcesz dowiedzieć się więcej na temat palety symboli, zajrzyj do Quick Tip: Working With Symbols in Adobe Illustrator.

4. Strzałki są idealne do wskazywania

Jedną ze świetnych wskazówek jest wykorzystanie strzałek skokowych, czegoś, co jest łatwo dostępne w Illustratorze od razu po wyjęciu z pudełka od wersji CS5. Makiety są idealną okazją do wizualnego opisania interakcji, przepływu aplikacji, nawigacji i ruchu.

W dzisiejszych czasach możemy łatwo dodawać groty strzałek do pociągnięć, bezpośrednio z panelu Stroke.

Możemy nawet edytować źródłowy plik Illustratora „Arrowheads.ai”, jak wyjaśnił Ryan Cornwell, i dodawać własne groty do mieszanki.

Uwaga: Irytujące jest to, że narzędzie Pipeta nie stosuje grotów strzałek wraz z innymi stylami obrysów, więc powielanie wybranego efektu nie jest tak łatwe, jak mogłoby być. Ale i tak są one idealne do tworzenia makiet.

5. Snap to Grid for Unified Spacing and Sizing

Na wiele sposobów jest to kontynuacja nieużywania kolorów. Ujednolicenie wymiarów i odstępów usuwa element rozpraszający z makiet, pomagając nam wizualnie skoncentrować się na tym, co ważne.

Nie ma znaczenia, czy dokładne wymiary nie odzwierciedlają tego, jak będzie wyglądał UI w dalszej części linii; tak długo, jak hierarchia i relacje pozostają prawdziwe, jesteśmy gotowi do pracy.

Zastosuj siatkę do swojego Artboardu, przechodząc do Widok > Pokaż siatkę. Wybór polecenia Widok > Przyciągaj do siatki pomoże Ci precyzyjnie pozycjonować obiekty.

Aby dokładnie określić, jak ma wyglądać Twoja siatka (pamiętaj, nie chodzi o drobne szczegóły), przejdź do Illustrator > Preferencje > Prowadnice & Siatka. Tam możesz zdefiniować odległość między liniami siatki, a następnie określić, ile poddziałów chcesz mieć w obrębie tych linii.

Uwaga: Nie krępuj się pokolorować swojej siatki na coś innego niż szary; nie będzie to częścią produktu końcowego.

6. Użyj stylów graficznych dla elastycznych przycisków

Zależnie od poziomu wierności (jak bardzo wierna jest ostateczna strona, do której dążysz) możesz mieć rzeczywisty tekst wewnątrz, na przykład, przycisków. Aby te przyciski rosły i malały w zależności od zawartości, nie używaj obiektów, ale stylów graficznych.

Zacznijmy od ciągu tekstu.

Otwórzmy teraz panel Wygląd, przechodząc do okna >Wygląd.

Używając panelu Wygląd, możesz dodać wiele wypełnień do jednego obiektu. Możemy nakładać te wypełnienia na warstwy w takiej kolejności, w jakiej chcemy, aby były wyświetlane; na tym obrazku widać kilka, wszystkie ułożone jedno na drugim.

Na razie potrzebujemy tylko dwóch wypełnień, więc dodajmy ciemne wypełnienie dla tekstu, a następnie jaśniejszy kolor dla tła.

Teraz nie widzimy bladoszarego tła, ponieważ ma ono dokładnie taki sam kształt jak górne wypełnienie. Możemy jednak wyodrębnić i manipulować każdym wypełnieniem osobno. Zaznacz dolne wypełnienie w panelu Wygląd, a następnie przejdź do Efekt > Konwertuj do kształtu > Zaokrąglony prostokąt…

Wprowadź ustawienia, jakie uznasz za stosowne, upewnij się tylko, że rozmiar jest względny w stosunku do obiektu, do którego to zastosujemy.

Bladoszare wypełnienie na dole przybrało teraz postać zaokrąglonego prostokąta, w stosunku do rozmiaru tekstu. Przycisk! Aby zastosować ten wygląd do innych obiektów, otwórz okno Stylów graficznych i przeciągnij do niego cały przycisk. Jego wygląd zostanie zapisany jako styl, który możesz ponownie wykorzystać.

Na przykład, oto dłuższy ciąg tekstu. Po zaznaczeniu tekstu kliknij nowo utworzony Styl graficzny (który dwukrotnie kliknąłem i zmieniłem jego nazwę), aby natychmiast go zastosować.

7. Ustaw kilka często używanych tablic artystycznych

Szybkość to nazwa gry przy tworzeniu makiet! Przepisz układ, idź dalej, przepisz kolejny, idź dalej. Dlatego sensowne jest posiadanie gotowego punktu wyjścia, do którego będziesz miał łatwy dostęp. Może się okazać, że najlepiej pracuje Ci się najpierw na masywnym artboardzie, wyciągając sfinalizowane obiekty do osobnego pliku, a może wolisz pracować bezpośrednio z artboardami o odpowiednich rozmiarach.

Na przykład tutaj znajduje się layout z ekranem iPada (1536x2048px) i czterema ekranami iPhone’a 4S (640x960px), choć możesz przygotować plik z dowolną liczbą przykładów ekranów urządzeń. Albo ustaw ręcznie preferowane wymiary, albo wybierz jeden z dostępnych ustawień wstępnych w Opcjach tablicy:

Włącz wszystkie wspólne prowadnice, nazwy warstw, zestawy symboli itp. które możesz wykorzystać, a następnie zapisz całość jako szablon do wykorzystania w przyszłości (Plik > Zapisz jako szablon…) Ten punkt wyjścia będzie następnie dostępny dla Ciebie poprzez Plik > Nowy z szablonu…, wraz ze wszystkimi elementami, które tam zostawiłeś.

8. Użyj TextExpander dla tekstu zastępczego

Illustrator nie posiada żadnych narzędzi do tworzenia tekstu zastępczego. Istnieją pewne skrypty, z którymi warto się pobawić, ale najłatwiejszym sposobem na wprowadzenie tekstu do ramek Illustratora jest użycie TextExpandera.

Uwaga: jeżeli jesteś użytkownikiem systemu Windows, program PhraseExpress oferuje podobną funkcjonalność do TextExpander

Dodaj serię fragmentów tekstu, które często używasz do tworzenia makiet (takich jak duży nagłówek, krótki nagłówek, tekst o różnej długości, typowy tekst przycisków, elementy menu i tak dalej), aby były łatwo dostępne z poziomu Illustratora.

Definiując frazę kluczową dla każdego wycinka, TextExpander zastąpi tę frazę treścią za każdym razem, gdy ją wpiszesz, oszczędzając w ten sposób mnóstwo czasu. Możesz również użyć opcji folderu, aby upewnić się, że te fragmenty będą działać tylko w Illustratorze, jeśli chcesz.

Aby dowiedzieć się więcej na temat optymalizacji przepływu pracy z TextExpanderem, spójrz na Master TextExpander With These Helpful Tips & Tricks.

9. Ćwicz logiczne nazewnictwo plików

Bycie w stanie szybko wizualizować zmiany i pomysły jest w sercu wireframingu, ale może to prowadzić do ogromnego stosu nieuporządkowanych plików, jeśli nie jesteś ostrożny. Kluczem jest zapisywanie na ważnych etapach i z logicznymi konwencjami nazewnictwa plików.

Na przykład, możemy chcieć rozpocząć każdą nazwę pliku od nazwy strony, nad którą pracujemy. Następnie może być sensowne użycie jakiejś nazwy wariantu, a po niej numeru wersji: page-variant-version.ai

Na przykład, możemy pracować nad landing page; takim, który koncentruje się na promowaniu albo kampanii emailowej, albo ebooka. Możemy mieć nazwy plików takie jak:

Nie tylko utrzymuje to porządek w folderach projektu, ale działa jako forma ręcznego wersjonowania. Matt Smith omawia ten pomysł szerzej w artykule Wireframing With Illustrator and InDesign.

10. Save in Dropbox for Easy Versioning

Podążając jeszcze dalej za ideą wersjonowania, zapisywanie plików bezpośrednio w Dropbox całkowicie usunie to zadanie z Twojej listy rzeczy do zrobienia. Nawet darmowy plan Dropbox będzie przechowywać kopię Twoich plików za każdym razem, gdy je zapiszesz, przez trzydzieści dni.

Podobnie Layervault oferuje podobną niesamowitość w swoim darmowym planie.

W obu przypadkach jest to szczególnie przydatne, jeśli współpracujesz z zespołem. Posiadanie wszystkich członków pracujących z jednej centralnej lokalizacji, z możliwością przywrócenia dowolnej wersji, jeśli ktoś zrobi coś dziwnego, jest idealne dla pracy zespołowej.

Wnioski

Wiele z tych wskazówek jest całkowicie osobistych dla mojego przepływu pracy i może nie przekładać się idealnie na Twój własny sposób robienia rzeczy. Mam jednak nadzieję, że przynajmniej wyzwolą w tobie ciekawość i skłonią do zastanowienia się nad sposobem tworzenia layoutów stron internetowych. Jeśli masz jakieś inne wskazówki, podziel się nimi w komentarzach!

Dalsza lektura

• Wireframing z InDesignem i Illustratorem
• Wireframing z Illustratorem i InDesignem (subtelna różnica!)
• Przewodnik początkującego po Wireframingu
• Illustrator i groty strzałek

.