Aplikacje, które mogą zmniejszyć obciążenie „nauką” w projektowaniu

Czego najbardziej nie lubią projektanci stron internetowych? Prawdopodobnie kodowanie. A może tuż obok jest prototypowanie dla wszystkich urządzeń. A wszystko, co może ułatwić tego rodzaju rzeczy, pozwala projektantowi poświęcić więcej czasu na kreatywne aspekty swojej pracy.

Mając to na uwadze, istnieje wiele wspaniałych nowych aplikacji, które każdy projektant powinien zbadać jako potencjalne dodatki do swojego zestawu narzędzi!

FRONTIFY

Cóż za świetna witryna do tworzenia własnych przewodników po stylu i przechowywania ich w chmurze do wykorzystania w przyszłości i udostępniania. Dostępne są szablony przewodników stylistycznych dla logo i obrazów, palet kolorów, typografii, ikon oraz własnego tekstu i multimediów. Innym dużym plusem jest to, że nie musisz ręcznie tworzyć własnych przewodników po stylu PDF — przechowujesz je w Frontify i można je przekonwertować na pliki PDF w celu pobrania, wydrukowania i udostępnienia. Wersjonowanie utrzymuje wszystkie starsze wersje w tle, aby można je było w każdej chwili uruchomić. Możesz zacząć od ich szablonów lub zbadać przykłady księgi znaku, aby dostosować własne. Wszystkie funkcje są dostępne przez API. Oto przykład tego, co można zrobić z samym logo, korzystając z własnego logo Frontify:

To jest podstawowe logo. Frontify uznał, że „krople” są tutaj kluczowe, ale mogą zrobić wiele innych rzeczy, nadal zachowując spójność logo. Oto zmiany kolorów:

A oto przykład wariacji podstawowego logo:

To tylko jeden przykład szablonów projektów i kolorów, których można używać do tworzenia unikalnych wskazówek dotyczących stylu, a wszystkie komponenty są wymienne.

KOMPOZYTOR WIZUALNY

Ta aplikacja istnieje już od jakiegoś czasu i być może już o niej wiesz, ale trudno byłoby znaleźć inną z pakietem opcji projektowania. W zasadzie odebrał żmudne zadania planowania i kodowania. Możesz mieć układy projektowe w ciągu kilku minut, dodając elementy jednym kliknięciem. Cena 25 USD jest tego warta. Przyciski do wszystkiego; wiele opcji animacji, opcje natychmiastowego udostępniania i tak dalej. Ponad 40 elementów treści w tym dziecku! To naprawdę uniwersalne narzędzie! Jeśli nie masz pewności co do wszystkich jej funkcji i sposobu korzystania z tej aplikacji, zapoznaj się z samouczkami wideo tutaj.

Istnieją świetne funkcje, które pozwalają bardzo szybko projektować strony i można modyfikować prawie każdy element. Na przykład istnieje kilka wstępnie zdefiniowanych elementów siatki, które można modyfikować, lub opcja zaprojektowania własnej siatki.

Wadą Visual Composer jest to, że po dezaktywacji pozostawia dużo małego kodu, który należy usunąć przed uruchomieniem nowego motywu. Oto przykład projektu stworzonego za pomocą Visual Composer.

POLOWANIE NA PROJEKT

Kiedy Twoja inspiracja właśnie się zatrzymała, prawdopodobnie szukasz jej, szukając nowych stron internetowych, które mogą dać Ci świetne pomysły. To może być trochę czasochłonne zadanie, więc dlaczego nie skorzystać z dużo wygodniejszej metody? Design Hunt jest swego rodzaju „rozlicznikiem”, ale na co dzień zmienia cały swój repertuar. Rysuje wspaniałe nowe projekty znalezione na Pinterest, Dribble, Designer News, DesignInspiraton i nie tylko i publikuje je dla projektantów, którzy szukają nowych inspiracji i pomysłów. Teraz możesz codziennie udać się w jedno miejsce i znaleźć zupełnie nową kolekcję.

TOOKAPIC

Stosunkowo nowy w branży zdjęć stockowych, Tookapic ma obecnie ponad 11 000 zdjęć stockowych, większość za darmo, reszta za niewielką cenę. Możesz naprawdę polubić to bardziej niż źródło zdjęć, z którego teraz korzystasz – fenomenalny kolor i wyrazistość oraz naprawdę wyjątkowe zdjęcia. Wejdź na ich stronę i sprawdź, co mają. Możesz być zaskoczony!

MARVELAPP

To bezpłatne narzędzie do prototypowania umożliwia szkicowanie i tworzenie makiet z telefonu komórkowego lub dowolnego innego urządzenia i natychmiastowe oglądanie prototypu. Stamtąd możesz przestawiać, modyfikować, dodawać kolor, tekst, zmieniać formularze i robić praktycznie wszystko, z natychmiastową kompatybilnością z dowolnym urządzeniem. Po nazwaniu swojego projektu natychmiast przechodzisz do głównego interfejsu i zaczynasz. Po zakończeniu możesz wyświetlić podgląd całego projektu i wchodzić z nim w interakcję, aby upewnić się, że wszystko działa dobrze.

Aby dowiedzieć się więcej o tym fenomenalnym narzędziu, odwiedź stronę i obejrzyj demo – będziesz zachwycony łatwością obsługi. Jedną z najlepszych funkcji jest możliwość upuszczania obrazu z dowolnego miejsca (nawet Dropbox i szkicu) i dowolnego typu obrazu. Możesz również dodać zespół, jeśli jest to wspólny projekt. Największą wadą Marvela jest to, że darmowa wersja ma ograniczenia, więc na pewno będziesz musiał dokonać aktualizacji. Mimo wszystko jest to bardzo łatwe w użyciu – w każdym calu tak dobre, jak Justinmind.

ANIMOWANIE CSS

Jeśli tworzysz dużo animacji, na pewno będziesz potrzebować tego narzędzia. Naprawdę fajne funkcje bez konieczności pisania kodu. Istnieje gotowa do użycia biblioteka efektów animacji – w rzeczywistości ponad 50 – i możesz łatwo dostosować liczbę pętli i czas trwania. Animacja zapewnia wspaniałe zaangażowanie i rozrywkę, o ile nie przesadzasz!

Jeśli jednak szukasz naprawdę pełnej gamy funkcji i opcji, sam CSS nie wystarczy. Chociaż z pewnością debata na temat CSS i JavaScript trwa, z pewnością istnieją sposoby, w jakie można ich używać razem. Na przykład masz zaprojektowaną świetną animację CSS, ale chcesz, aby przesuwała się od lewej, gdy użytkownik dotrze do określonego punktu przewijania w dół. Będziesz musiał dodać JS, aby to zrobić. Zrozumienie, że CSS ma swoje ograniczenia i może zostać ulepszony przez JS, to po prostu mądre wykorzystanie dostępnych narzędzi.

Niemniej jednak Animate CSS jest naprawdę łatwe w obsłudze. Ściągasz go, dołączasz CSS, jQuery i inne komponenty, które chcesz i zaczynasz animować. Na YouTube są świetne samouczki, które pomogą Ci zacząć.

CHŁODZIARKI

Jeśli zdarzy ci się być daltonistą lub po prostu zakwestionować schemat kolorów, to narzędzie opracuje dla ciebie cały schemat kolorów lub utworzy go, jeśli wiesz, od czego chcesz zacząć. Kiedy zauważysz kolor, który Ci się podoba, zablokuj go, a następnie po prostu klikaj – otrzymasz kompletny schemat z dowolną liczbą kolorów. Jest to szczególnie przydatne, jeśli chcesz używać gradientów kolorów. W tym narzędziu nie ma nic kontrowersyjnego – projektanci, którzy go używają, uwielbiają je; tych, którzy jeszcze tego nie próbowali. Jedyny minus? Nie jest już darmowy i musisz mieć konto iTunes, aby pobrać.

Automatyczny generator schematów kolorów dla osób z wyzwaniami kolorystycznymi

CYRKULUS.SVG

Nie jest to wszechstronne narzędzie z wieloma opcjami, szablonami itp., ale oto unikalny sposób na zaprojektowanie menu lub kilku na dowolnej liczbie stron! Wszystko, co musisz zrobić, to wpisać szczegóły tego, co chcesz w swoim menu. Otrzymasz wtedy szczegółowe instrukcje, jak go zbudować i osadzić na określonej stronie.

Trochę, aby lepiej zaangażować odwiedzających

Circular SVG jest prawdopodobnie lepszy od CSS w tworzeniu tego rodzaju elementu. Po pobraniu masz 3 opcje: Możesz narysować swoje sektory w edytorze graficznym, takim jak Sketch, a następnie wyeksportować je jako SVG, dodać interakcję i osadzić je; możesz narysować swoje sektory za pomocą kodu; lub możesz skorzystać z generatora Circulus bezpośrednio w aplikacji.

CSS pozwala na tworzenie okrężnej nawigacji, ale jest kilka błędów przeglądarki i to po prostu dużo pracy. Musisz zacząć od prostokąta, rozbić go, a następnie pochylić i obrócić te sekcje. A jeśli używasz więcej niż tylko ikon w swoich sektorach, staje się to trudniejsze.

Korzystając z SVG, możesz narysować dowolny kształt, używając określonych linii i poleceń łukowych do wybranych „klinów” — oto przykład:

Po narysowaniu każdego ze swoich klinów i osadzeniu ikony i/lub treści, po prostu do nich dołączasz.

METAFLOP

Masz dość tych samych starych czcionek i stylów liter? Stwórz swój własny — nie wymaga kodowania — po prostu kliknij i przeciągnij. Zmiana na unikalne czcionki i style tekstu może zachęcić odwiedzających do faktycznego przeczytania treści! Ta aplikacja jest tak fajna, że ​​trudno będzie ci nie bawić się nią przez wiele godzin. I już nigdy nie powiesz, że typografia jest najmniej seksowną częścią projektowania stron internetowych.

To takie proste. Dostosowujesz czcionki z serii slajdów, które mają różne cechy — wysokość, przysłonę i kontrast. Dostosowujesz, aż będziesz mieć to, co lubisz, a następnie pobierzesz go jako pakiet czcionek internetowych (za darmo). Dostępna jest również biblioteka gotowych czcionek do wyboru. Graj dalej – zobaczysz, dlaczego projektanci czcionek mogą być „umierającą rasą”.

Przyciągnij uwagę unikalnymi czcionkami i stylami

FONTFLAME

To naprawdę „nowy dzieciak na bloku”. Fontflame stara się uwolnić projektantów od jeszcze jednego ciężaru – znalezienia par czcionek, które naprawdę działają. W tej chwili ma na swojej stronie 10 opublikowanych par, ale dodaje się codziennie. Przykłady parowania przy użyciu bezpłatnej biblioteki czcionek Google obejmują „Lobster-Asap” i „Roboto-Open Sans”. Wkrótce zostaną dodane dodatkowe biblioteki. Miej oko na tę stronę – wkrótce będzie miała wiele do zaoferowania w parach.

PODCAST FREELANCERA

Nie aplikacja ani narzędzie – to cotygodniowy podcast dla projektantów i programistów, którego nie będziesz chciał przegapić. Prowadzony przez Paula Jarvisa będziesz mieć dostęp do nowych trendów, aplikacji i narzędzi oraz wielu naprawdę praktycznych porad.

WIZJA

Oto świetne narzędzie do prototypowania, które ma kilka funkcji, których nie ma w innych. Podobnie jak wszyscy inni, tworzysz swoją makietę dla dowolnego lub wszystkich urządzeń – wybierasz te, które chcesz. Po utworzeniu prototypu możesz wyświetlić jego podgląd na wszystkich urządzeniach, a następnie wysłać go do klientów lub członków zespołu w celu sprawdzenia. Mogą komentować sam projekt, co jest ogromnym plusem. Dwie inne ciekawe funkcje In-Vision to tryb historii, który pozwala zobaczyć wszystkie wcześniejsze wersje projektu, oraz 3 projekty demonstracyjne, nad którymi projektanci mogą pracować, dopóki nie będą zaznajomieni ze wszystkimi funkcjami.

Porównując In-vision z aplikacją Marvel, ważne różnice są prawdopodobnie następujące:

1. InVision ma więcej funkcji niż Marvel, ale to również czyni go bardziej złożonym. Na przykład ma więcej funkcji współpracy na żywo, narzędzie do zrzutów ekranu z adnotacjami i świetne elementy historii.
2. Marvel ma aplikację na iOS i obecnie pracuje nad aplikacjami na Androida i iPada – InVision ich nie ma.
3. InVision jest prawdopodobnie lepszy dla większego zespołu, Marvel lepiej dla solowych lub małych zespołów.

Komentarze użytkowników obu tych aplikacji rzuciłyby więcej światła na to, która z nich jest najlepsza do jakich celów.

Prawdopodobnie masz jakieś ulubione aplikacje, o których inni projektanci chcieliby usłyszeć. Powiedz nam, czym one są i jak dają Ci więcej czasu na bycie artystą.