Zestaw narzędzi projektanta: przepływy pracy, oprogramowanie i strony internetowe

Podobnie jak programiści, twórcy treści, ludzie zajmujący się marketingiem i tak dalej, projektanci muszą mieć dobry zestaw narzędzi, który pomoże im w codziennej pracy. To, co próbowaliśmy tutaj zrobić, to nakreślić takie narzędzia, przepływy pracy i sposób, w jaki można je połączyć, aby przyspieszyć pracę i zmniejszyć ryzyko błędów i błędów.

Zbierać informacje

Kiedy pojawia się nowy projekt, pierwsze godziny to przede wszystkim zbieranie informacji na jego temat - z jakimi problemami boryka się klient, jakie są jego cele, co lubi itd. Na tym kluczowym etapie projektant powinien postarać się uzyskać jak najwięcej użytecznych danych, które zostaną później wykorzystane do podjęcia świadomych decyzji.

Evernote

Evernote to niesamowite oprogramowanie - to nie tylko aplikacja do robienia notatek. Może przechowywać pliki, łączyć je w kolekcje, znaczniki, grupy itp. Dzięki zaawansowanemu wyszukiwaniu można odwoływać się do poprzednich projektów i tak dalej. Oczywiście najpotężniejszą stroną jest to, jak go używasz. Mają przybliżone wytyczne dotyczące niektórych podejść organizacyjnych.

E-mail, Slack, Zoom…

Następny jest inny oczywisty, ale jest powód, dla którego go dodaliśmy - przełożenie połączenia, wiadomości lub spotkania wideo może być dużym opóźnieniem w projekcie. Często możliwość współdzielenia ekranu i przeglądania makiet, makiet, koncepcji i projektów ratuje życie. Nigdy tego nie zapomnij

Znajdź inspirację

Gdy jest wystarczająco dużo informacji, następnym krokiem jest zebranie inspiracji - jak powinna wyglądać aplikacja / strona internetowa, jaki jest styl, jaki jest cel itp. Czy są jakieś fajne pomysły na nowe technologie, które można wykorzystać lub różne rodzaje mediów? ? Wszyscy projektanci szukają inspiracji na lewo i prawo - strony internetowe, książki, magazyny, cokolwiek.

Dribbble, Behance i podobne strony internetowe

Właśnie z tego powodu (i aby projektanci mogli się chwalić) istnieją strony internetowe takie jak Dribbble. Tam my, projektanci, możemy przeglądać pomysły i podejścia, które rozwiązują problemy, z którymi obecnie się borykamy. Czasami celem jest zbudowanie „ogólnej strony sprzedaży dla usługi A”. Ta strona sprzedaży zawierałaby dosłownie kilka akapitów ze zdjęciem stockowym. Całkowicie mało inspirujący cel, ale jest realistyczny. Cóż, połączenie kolorów, typografii, odstępów itp. Może być nieco bardziej wyjątkowe. Może wypróbuj też inne układy! Pomysł na to może pochodzić z losowej strony docelowej opublikowanej 3-4 lata temu. Strona 99Design Discovery to także dobre miejsce do obejrzenia!

Niesamowite

Umieściliśmy witryny takie jak Awwwards w osobnej kategorii, ponieważ w rzeczywistości prezentują one coś, co zostało stworzone i można zobaczyć, jak działa. Co więcej, bardziej skupia się na drodze artystycznej, a nie na „jakiejkolwiek pracy projektowej”. W większości przypadków strony są tak ciężkie, że można ich używać tylko na maszynach z wyższej półki, ale wciąż można było czerpać z nich inspirację.

Paleta kolorów / branding

W przypadku zupełnie nowej kompilacji, w której nie ma predefiniowanych kolorów, jednym z kroków do rozpoczęcia pracy byłoby wybranie czegoś, co pasowałoby do nowej witryny. Można do tego podejść na dwa sposoby - wybierz istniejący schemat kolorów lub ustaw kolor podstawowy / drugorzędny i obejdź cały schemat na ich podstawie.

ColorHunt

Witryny takie jak Color Hunt zapewniają kolekcję palet kolorów stworzoną przez społeczność. Możesz wybrać i użyć ich bezpośrednio lub wybrać główne kolory na początek. Nie tak ładnie wyglądający, ale także podobny do Color Lovers.

BrandColors

BrandColors ma nieco inny cel - zawiera listę głównych marek i ich schematów kolorystycznych. Można tam znaleźć świetne odcienie i kombinacje, które mogą zainspirować Twoją konstrukcję. Kolory nie są objęte żadnymi prawami autorskimi, ale radzimy trochę się nimi bawić, zamiast kopiować i wklejać wszystkie kolory z miejsc takich jak Amazon.

Zasoby premium i bezpłatne

Nie zawsze jest wystarczająco dużo czasu na pracę nad każdym komponentem witryny. Czasami najlepiej jest pobrać pakiet ikon, ilustrację lub zdjęcie stockowe wykonane przez innego projektanta / fotografa i użyć tego bezpośrednio.

• Font-Awesome - Ogromna kolekcja ikon w postaci glifów czcionek
• Envato Elements - Ogromny wybór najwyższej jakości aktywów w dobrej cenie.
• Unsplash - Ogromna kolekcja wysokiej jakości darmowych zdjęć
• Generatory SVG, takie jak squircley, getwaves, blobmaker
• Adobe Fonts (płatne) i Google Fonts (za darmo)

Najlepszą wskazówką jest znalezienie kilku takich witryn i umieszczenie ich blisko siebie, aby maksymalnie ograniczyć czas i wysiłek potrzebny na wyszukiwanie i znalezienie najlepszej grafiki do pracy.

Główne narzędzia projektowe

Po zakończeniu początkowej pracy, trzeba faktycznie zbudować projekt. Ponieważ wszystkie progresywne oprogramowanie dla projektantów ma wszystkie niezbędne narzędzia do tworzenia projektów internetowych / aplikacji, pominiemy narzędzia do tworzenia szkieletów.

Figma

Naszym głównym wyborem do prac projektowych w DevriX jest Figma. Zapewnia doskonałe możliwości współpracy, a także aplikacje oparte na przeglądarkach, do których dostęp ma każdy członek zespołu, czy to Linux, Mac czy Windows. Wcześniej używaliśmy Adobe XD, ale członkowie korzystający z Linuksa nie mogli z niego korzystać, a Sketch jest zablokowany tylko na Macu.

Illustrator / Affinity Designer

W przypadku bardziej niestandardowych prac, Illustrator lub Affinity Designer to zdecydowanie jedne z najlepszych opcji. W ciągu ostatnich dwóch lat niestandardowe ilustracje są jedną z najpopularniejszych części witryn internetowych. Duża, kolorowa grafika rządzi w górnej części ekranu, a większe doświadczenie w korzystaniu z odpowiednich narzędzi to zdecydowanie dobra rzecz. W tym miejscu możemy również dodać oprogramowanie 3D, takie jak Blender, do renderowania modeli 3d, które można wykorzystać jako zasoby na stronach internetowych.

Photoshop / Affinity Photo

Photoshop był wiodącym oprogramowaniem do projektowania stron internetowych. Dziś może to zabrzmieć dziwnie, zwłaszcza że mamy wszystkie te wspaniałe narzędzia, które koncentrują się głównie na sieci. Ale Photoshop jest nadal świetnym narzędziem i często go używamy, gdy są zdjęcia, które wymagają edycji lub wycinania kształtów / form.

Prezentacja

Ale to nie tylko praca projektowa - statyczny plik PNG. Niektórzy projektanci, którzy bardziej skupiają się na animacji i interakcjach. Dobre demo pokazujące, jak elementy powinny zachowywać się po najechaniu kursorem, przesunięciu lub kliknięciu znacznie ułatwiłoby pracę programistom front-end. Zarówno Figma, jak i Adobe XD mogą w tym pomóc, ale oba są również ograniczone.

Adobe After Effects

Efekty końcowe są uważane za jeden z pierwszych wyborów w grafice ruchomej. Zapewnia wszystkie niezbędne narzędzia do reprezentowania wszystkich działań i animacji. Warto przypomnieć projektantom, że animacje powinny być zgodne z ograniczeniami sieci. Dodanie rozmycia w ruchu nie jest czymś, co możesz zrobić. Kiedy więc wejdziesz w bardziej zaawansowane animacje, zdecydowanie przedyskutuj to ze swoim zespołem programistów front-end lub przeczytaj więcej o animacjach w Internecie i tym, co jest możliwe. To samo dotyczy UX i A11y.

Przechowywanie

Figma i Adobe XD są prawie skoncentrowane na chmurze, więc nie powinieneś się martwić o utratę pracy, ale nie wszystko jest takie - Photoshop, pliki Illustrator, pobrane czcionki, zdjęcia itp. - wszystko to znajduje się na twoim komputerze.

Najlepiej jest tworzyć ich kopie zapasowe i mieć do nich stały dostęp, zwłaszcza jeśli pracujesz na więcej niż jednym komputerze. A jeśli chodzi o udostępnianie ich, jest to bardzo łatwe.

Dropbox

Najlepszym wyborem do tego byłoby Dropbox. Dzięki łatwej w użyciu aplikacji komputerowej będzie czuwał nad Twoimi plikami i synchronizował je z chmurą, gdy tylko wprowadzisz jakiekolwiek zmiany. Stamtąd udostępnianie ich klientowi lub zespołowi jest jednym kliknięciem.