Cześć projektanci, doprowadzacie do szaleństwa swoich programistów?

Jest szansa, że ​​masz pewne nawyki, które nie przekładają się szczególnie dobrze na kodowanie, a to sprawia, że ​​życie jest trudne dla programisty pracującego z tobą nad projektami. Chcesz być lepszym współpracownikiem (i przyjacielem)?

Dowiedz się, jak lepiej komunikować się i projektować, aby programiści Cię kochali. Przyspieszy to projekty i ułatwi pracę. I nie chodzi też o to, żeby przynosić cukierki na spotkania. Możesz sprawić, że programista Cię pokocha, wprowadzając niewielkie zmiany w sposobie pracy.

1. Wprowadź deweloperów na początku

Największym problemem pomiędzy projektantami i programistami jest to, że często pracują w baniek. Osoby lub zespoły nie zaczynają mówić o projekcie, dopóki pierwsza wersja projektu nie zostanie ukończona. Następnie projektant przekazuje projektantowi.

Westchnienie.

To po prostu nie jest sposób na pracę. Projektanci i programiści powinni od samego początku być zaangażowani razem, aby porozmawiać o tym, jak projekt się połączy. Projektant może skupić się na kolorach i krojach pisma oraz na obrazach, jednak programista może zapewnić wgląd w użyteczność, funkcjonalność i wydajność.

Projektanci i programiści powinni dobrze wiedzieć, jak wygląda druga strona. Projektanci powinni zrozumieć wystarczającą ilość kodu i użyteczność, aby porozmawiać z programistami i zrozumieć wyzwania; programiści powinni mieć niewielką wiedzę na temat teorii projektowania, aby mogli zgłaszać sugestie, gdy pomysły na projekty są nieodpowiednie dla internetu.

2. Ćwicz spójne zarządzanie plikami

Jedną z największych rzeczy, które może zrobić projektant, jest przygotowywanie i pakowanie plików w ten sam sposób za każdym razem.

Ile razy otworzyłeś dokument programu Photoshop z setkami nienazwanych warstw? Nie udostępniaj tego typu pliku programistom. Każda warstwa i styl - niezależnie od tego, jakiego oprogramowania używasz - powinny być odpowiednio nazwane.

Ile razy otworzyłeś dokument programu Photoshop z setkami nienazwanych warstw?

Style, próbki kolorów i typografia powinny być spójne w całym projekcie. (Przycisk nie powinien wyglądać inaczej w zależności od strony.)

Nazwij pliki i style w taki sam sposób dla każdego projektu. Grupuj podobne elementy w podobny sposób i używaj spójnego systemu folderów. W ten sposób deweloper nie musi się uczyć, jak wyszukiwać części i elementy w każdym nowym projekcie.

3. Użyj czcionek Google

Jednym z największych wyzwań dla projektów projektowych, które obejmują druk i elementy cyfrowe, jest zarządzanie typografią. Nie używaj czcionek pulpitu do drukowania projektów internetowych lub aplikacji i po prostu zakładaj, że będą działać. (Często nie.)

W przypadku projektów cyfrowych wybierz czcionki Google dla typografii. Oznacza to, że może być konieczne znalezienie podobnego kroju czcionki w Internecie, aby pasowało do tego, czego używasz do drukowania. (W porządku.)

Nie pozwól, aby programista zrobił to za Ciebie. Wybierz porównywalne czcionki Google i korzystaj z nich od samego początku. W przewodniku po stylach można nawet zauważyć krój pisma w porównaniu z krojem cyfrowym.

Powód tego jest prosty: osadzanie czcionek może trochę skomplikować. Dodatkowo, czcionki Google są bezpłatne i zapewnią, że nie ponosisz dodatkowych kosztów projektu. (Podczas gdy jesteś na tym, rozważ zrobienie tego samego z ikonami i skorzystaj z pakietu takiego jak Font Awesome, który pozwala programistce na stylizowanie ikon za pomocą CSS, a nie importowanie pęczków plików graficznych!)

4. Pakuj zasoby obrazu

Podczas gdy jesteśmy na temat zasobów obrazu, bardzo ważne jest eksportowanie i pakowanie plików. Podczas gdy programista może otwierać i eksportować wszystkie pliki obrazów w celu zaspokojenia ich potrzeb, możesz zapytać, czego potrzebują i zrobić to po drodze.

Zapewnia to uzyskanie pożądanych zbiorów na obrazach, a także kompresję plików w celu szybkiego załadowania witryny.

Nie próbuj robić tego samodzielnie. Zapytaj programistę, w jaki sposób pliki powinny zostać zapisane, nazwane i skompresowane, aby uzyskać jak najlepsze wykorzystanie.

5. Pomyśl o środowisku

Jest tak wiele urządzeń o różnych rozmiarach i proporcjach, o których warto pomyśleć przy projektowaniu witryn i aplikacji mobilnych. Jako projektant musisz znać rozmiar płótna, marginesy, dopełnienie itp., Aby utworzyć makietę, która jest rzeczywiście użyteczna.

Zanim zaczniesz rysować, porozmawiaj z programistą, aby się upewnić, że wiesz, jak wygląda środowisko projektowania. Nie ma nic gorszego niż projekt, który wygląda niesamowicie w Photoshopie lub Sketchu i spada płasko w produkcji.

Musisz o tym wiedzieć wcześniej:

  • Jeśli framework ma specyfikację dopełnienia w różnych rozmiarach
  • Szerokość rynny między kolumnami (i jeśli się zmienia)
  • Rozmiar najbardziej wąskiego ekranu, który programista zakoduje

6. Zadawaj pytania

Zostało to już wspomniane już kilka razy, ale komunikacja między projektantem a deweloperem naprawdę jest kluczem do tego, aby wszystko to działało. Komunikacja może tworzyć lub łamać projekty, wpływać na terminy i wpływać na projekt i funkcjonalność projektu końcowego.

Komunikacja może tworzyć lub łamać projekty

Zabierz swojego programistę na lunch. Poznać ich. Zadawaj mnóstwo pytań po drodze. Jeśli nie masz pewności, czy coś zadziała, czy nie, po prostu zapytaj. Deweloperzy nie są przerażającymi ludźmi i o wiele łatwiej jest odpowiedzieć na pytanie na wczesnym etapie procesu, niż trzeba przemyśleć całą koncepcję.

7. Poznaj niektóre podstawy programisty

Gdy rozmawiasz z programistą i zadajesz pytania, zanurz się głębiej. Zapoznaj się z podstawami programowania, jeśli jeszcze nie masz tych umiejętności w swoim arsenale projektowym.

Projektanci pracujący nad projektami cyfrowymi powinni się wypowiadać w:

  • HTML i CSS (powinieneś być w stanie zmienić rozmiar lub kolor czcionki i zrozumieć, jak te dwie są różne)
  • Typowe wzorce użytkowników (projektowanie sposobu interakcji użytkowników z treścią)
  • Standardy dostępności (aby Twój projekt działał dla większej liczby użytkowników)
  • Jakie rodzaje elementów muszą być wyświetlane jako obrazy i co można stworzyć za pomocą czystego CSS
  • Jak działają punkty przerwania w układach responsywnych
  • Trendy w projektowaniu stron internetowych

Możesz nigdy nie napisać kodu, ale uczenie się zasad rozwoju sprawi, że będziesz lepszym projektantem, ponieważ zrozumiesz wartość narzędzi i przepływów pracy.

8. Użyj przewodnika "Styl życia"

Proces projektowania obejmuje również rozwój. Projektanci, musisz wiedzieć, że programista jest tak samo ważny dla procesu projektowania, jak Ty.

Mając to na uwadze, stwórz "żywy" przewodnik po stylu, który nie tylko zawiera kolory i czcionki, ale również komponenty. Każdy powinien mieć dostęp do dokumentu i aktualizować go, gdy projekt się pojawi.

Dobry przewodnik po stylu pomoże wszystkim pracującym nad projektem zachować spójność z elementami wizualnymi, zapewnić kontekst dla wyborów projektowych, służyć jako punkt współpracy dla projektu i pomóc w standaryzacji kodu. Przewodnik po żywym stylu pozwala wszystkim dzielić się pomysłami i zapewniać wskazówki w całym projekcie. To nie jest tylko dokument, który ktoś tworzy tuż przed rozpoczęciem projektowania.

Umieść poniższe informacje w przewodniku po stylu, aby jak najlepiej wykorzystać:

  • Style logo
  • Paleta kolorów
  • Paleta czcionek
  • Paleta ikon
  • Elementy menu nawigacyjnego (i tam łączą się z)
  • Opcje układu dla różnych stron
  • Fragmenty kodu, które można ponownie wykorzystać w witrynie (np. Przyciski)

9. Użyj siatki

Szanuj sieć. W responsywnym projekcie strony internetowej siatka jest czymś więcej niż tylko wytyczną do umieszczania elementów na ekranie, może także określać, gdzie elementy poruszają się na różnych rozmiarach ekranu oraz w jaki sposób kolumny układają się i tasują.

Siatka może pomóc w zaprojektowaniu i utrzymaniu przepływu. (Wyzwaniem jest to, że nie możesz arbitralnie łamać zasad projektowania).

Pomyśl o tym w ten sposób: Twój projekt składa się z czterech bloków zawartości ustawionych wzdłuż ekranu w rzędzie (o równych szerokościach rynnowych) na pełnoekranowym monitorze komputerowym. Następnie na tablecie te bloki przesuwają się, tworząc dwie kolumny z dwoma rzędami. Na urządzeniu mobilnym przesuwają się, tworząc pojedynczą kolumnę z czterema rzędami.

Zrozumienie, w jaki sposób sieć wpływa na rozmiar obiektów i jak zmieniają się obiekty na różnych urządzeniach, jest ważne, ponieważ może decydować o tym, jak projektujesz zawartość. Pomyśl jeszcze raz o tym samym scenariuszu. Co jeśli masz pięć bloków treści? Wymagałoby to przeprojektowania, aby zapewnić spójny zarys wizualny.

10. Nie bądź szarpnięciem

Prawdziwym kluczem do zapewnienia łatwej realizacji projektów jest elastyczność. Techniki projektowania i standardy dla sieci zmieniają się cały czas. Podczas gdy niektóre projekty pozwalają ci być bardziej skrupulatnymi szczegółami, a nieruchome, responsywne projekty tak naprawdę nie działają w ten sposób.

Złotą zasadą, jeśli chodzi o pracę z programistami, jest ... nie bądź palantem.

Projektanci, z którymi łatwo pracować, zyskają więcej szacunku i będą mieli lepsze relacje z programistami. Doprowadzi to do lepszych i bardziej udanych projektów. Powinno to być oczywiste, ale zbyt często jest tam wiele dziwnych zachowań. Nie wpadnij w tę pułapkę.

Bądź elastyczny, otwieraj i rozmawiaj ze swoim programistą. Będą cię za to kochać.