5 najlepszych narzędzi do elastycznego projektowania
Zacznę od stwierdzenia, że nie będę w tym miejscu umieszczać żadnych narzędzi do projektowania typu "wskaż i kliknij" (pomyśl o Adobe Edge Reflow). Powód jest dość prosty, uważam, że są one złe dla wszystkich; projektanci, klienci, kodery ... wszyscy cierpią.
To nie jest kwestia jakości kodu generowanego przez te programy. Nie dlatego, że projekt jest "zbyt łatwy". Dzieje się tak, ponieważ niezależnie od tego, jak dobre są te programy, zawsze będą ograniczać ludzi, którzy ich używają.
Będą one ograniczone, nawet jeśli nie można tego osiągnąć, ale dzięki temu, co według nich może osiągnąć. Jeśli o tym pomyślą, przeciętny użytkownik porówna go prawdopodobnie z takimi narzędziami, jak PowerPoint i / lub dowolną liczbę programów do drukowania, pogrążając się ponownie w starych mentalnościach. Na tym polega problem. Narzędzia do wizualnego publikowania w Internecie zawsze będą starały się stosować stare procesy do nowych technologii.
Prawdziwie sieciowy przepływ pracy to taki, który obejmuje podstawowe koncepcje i technologie, na których zbudowana jest sieć. Oczywiście, możesz użyć dowolnej liczby narzędzi wizualnych do tworzenia stron internetowych, które są technicznie responsywne, ale brakowało ci sensu.
Nie chodzi o elastyczny układ. Chodzi o udostępnienie informacji jak największej liczbie osób. Jest kilka rzeczy, których program taki jak Edge Reflow po prostu nie może zrobić. Krótko mówiąc, musisz napisać kod.
Dlatego najlepsze narzędzia, które pomogą Ci w elastycznym projektowaniu, to narzędzia, które pomagają zrozumieć i korzystać z technologii internetowych, dokładnie planować stronę, wydajniej pisać lepszy kod i testować / prezentować swoje responsywne projekty klientom w kontekście.
Zacznijmy od oczywistych:
1) Twoja przeglądarka
Nie, nie żartuję. Jest to dosłownie najważniejsze narzędzie, jakie masz, ponieważ pokazuje dokładnie, jak Twoja witryna wygląda w określonych warunkach.
Było wiele dyskusji na temat tego, czy projektowanie w przeglądarce jest lepsze niż projektowanie w edytorze graficznym, takim jak Photoshop czy GIMP. Pozwól, że rozwiążę to ...
Czy użytkownicy Twojej strony będą robić swoje przeglądanie w Photoshopie? Edytory obrazów mogą tworzyć ładne zdjęcia, a nie naśladować rzeczywiste doświadczenia. Użyj edytorów obrazu do edycji zdjęć. Użyj swojej przeglądarki do projektowania stron internetowych.
Czas odzwyczaić naszych klientów od makiet z bardzo szczegółowymi szczegółami, do których się przyzwyczaili. W miarę, jak zmienia się sieć, a nasze procesy stają się bardziej płynne i powtarzające się, musimy iść dalej.
Zainstaluj co najmniej jedną przeglądarkę z każdym głównym mechanizmem renderowania i zdobądź kilka rozszerzeń programistów. Przyzwyczaj się do patrzenia na kod źródłowy w taki sposób, w jaki widzi go twoja przeglądarka, ponieważ będziesz tu przez jakiś czas.
2) aplikacja do rysowania Dysku Google
Technicznie rzecz biorąc, prawie każdy oparty na wektorach edytor obrazów mógłby wykonać to zadanie, gdy drakończąśmy twoje strony i aplikacje. Przede wszystkim staram się oprawić wersję desktopową mojej strony, utworzyć kopię pliku, zmienić rozmiar płótna i przejść dalej. Używanie wektorów ułatwia szybką zmianę rozmiaru i zmianę elementów, gdy jesteś jeszcze w fazie planowania.
Wolę aplikację do rysowania dysk Google z kilku powodów:
Funkcje udostępniania i współpracy: Google udostępnia informacje lepiej niż wszystkim innym. Dzięki komentarzom w kontekście, jednoczesnej edycji i integracji Hangouta jestem zakochany.
Automatyczne przewodniki: W każdym dokumencie rysunku linie pomocnicze są tworzone automatycznie na podstawie wymiarów każdego obiektu umieszczanego w dokumencie. Ułatwia to zobrazowanie spójnych rozmiarów elementów w dokumencie, co jest świetne dla projektantów takich jak ja.
Kiedy dzielę się tymi modelami z klientami, ta profesjonalnie wyglądająca konsystencja to duży plus. A jednak nie jestem ograniczony do tych przewodników. Uważam to za dobrą alternatywę dla makiet aplikacji, które próbują ograniczyć cię do siatki.
Och, i to nic nie kosztuje. Czy muszę coś więcej mówić?
3) Prototypy stylu
Na podstawie płytek stylów, Prototypy w stylu są dostarczane w przeglądarce, aby pomóc klientom zorientować się, jak będą wyglądać elementy typografii, koloru i interfejsu użytkownika. Ponieważ przeglądarka ma być wyświetlana w przeglądarce, po utworzeniu witryny będzie mniej niespójności.
Co więcej, chciałbym założyć, że prototypy w stylu mogłyby pomóc naszym klientom w oderwaniu mentalnym koncepcji UX i estetyki. I naprawdę wszystko, co pomaga naszym klientom lepiej zrozumieć proces projektowania stron internetowych, może być tylko dobrą rzeczą.
4) Responsinator
Responsinator to proste narzędzie, które pokazuje Twoją witrynę w różnych rozmiarach. W bardzo prosty sposób naśladuje kilka różnych rozmiarów urządzeń i kontekstów. To narzędzie nie jest dla twojej korzyści. Chcesz zobaczyć, jak Twoja witryna wygląda w mniejszych rozmiarach? Zmień rozmiar okna przeglądarki. Co więcej, zdobądź prawdziwe urządzenia mobilne i wykonaj kilka testów.
Ta aplikacja internetowa najlepiej służy do szybkiego pokazania klientom, jak będą wyglądały ich witryny w kontekście innym niż monitor komputera stacjonarnego lub laptopa.
Ponownie, istnieje wiele narzędzi, które mogą wykonywać tę samą pracę co Responsinator i tak samo skutecznie, jak przypuszczam. Wybrałem tę, ponieważ przedstawia ona kilka sylwetek urządzeń po kolei, dla łatwego przeglądania.
5) Adobe Edge Inspect
Teraz ten jest dla ciebie. Jeśli masz komórkowe laboratorium testowe (i im wcześniej je zrobisz, tym lepiej) Edge Inspect zsynchronizuje wszystkie Twoje urządzenia, aby wyświetlić tę samą stronę naraz. Odśwież stronę na jednym urządzeniu i odśwież je wszystkie.
W przeciwieństwie do innych na tej liście, ten nie jest darmowy. Jeśli jednak stać Cię na wystarczającą ilość urządzeń mobilnych, aby znaleźć rozwiązanie tego typu, prawdopodobnie jest to warte swojej ceny.
Wniosek
Jak zawsze najważniejszym zasobem jest twój mózg. Te narzędzia i inne, które je lubią, mogą Ci pomóc tylko na Twojej drodze. Wybrałem te, ponieważ wykonują bardzo specyficzne funkcje, które pomagają mi w projektowaniu responsywnych stron. Nie ograniczają tego, co mogę zrobić.
Najlepsze narzędzia to te, które pozostają na uboczu.
Czy korzystasz z tych narzędzi? Jakie są twoje 5 najlepszych narzędzi do elastycznego projektowania? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, obraz narzędzi przez Shutterstock.