Koncepcje rozwoju sieci Wszyscy projektanci stron internetowych powinni zrozumieć

Jest wiele do powiedzenia podział między projektantami a deweloperami. Oczywiście istnieje wiele hybryd projektantów / programistów, którzy mogą zrozumieć obie strony medalu, ale są nieliczne.

Kreatywne projekty rozwijają się właściwa komunikacja. Jednak może to być trudne, gdy projektanci i programiści nie są pewni, jak to zrobić rozmawiać ze sobą. Nie sądzę, żeby projektanci musieli wiedzieć, jak pisać poprawny JavaScript, ani nie powinni wybierać typografii. Ale są takie podstawowe tematy myślę, że pójdę w obie strony.

Następujące tematy są moim osobistym podejściem kluczowe pomysły na rozwój sieci, które wszyscy projektanci powinni zrozumieć. Jako projektant / programista wiem, jak mylące może być studiowanie obu obszarów. Ale zawsze warto się uczyć, ponieważ jasne zrozumienie poprawia komunikację i czyni projektanta bardziej wartościowym dla kreatywnego zespołu.

Zachowanie kodu frontendowego

Często uważa się, że projektanci stron internetowych mają umiejętności frontendowe wraz ze swoimi talentami projektowymi. Jest to gorący temat, głównie dlatego, że jest brak poprawnej odpowiedzi.

Projektanci powinni robić to, co oni są wygodne. Jeśli to oznacza tylko prace związane z projektowaniem wizualnym, niech tak będzie. Jednak krótkie zrozumienie technologii frontendowych może uczynić tego samego projektanta bardziej intuicyjny podczas tworzenia zasobów dla programistów.

Wierzę, że każdy projektant powinien przynajmniej rozumieć trzy podstawowe języki rozwoju frontendu (HTML, CSS i JS) wraz ze sposobem ich użycia. Na przykład większość menu rozwijanych opiera się na JavaScript, ale istnieją także alternatywy tylko dla CSS.

Kiedy projektant tworzy menu rozwijane, może pomyśleć o złożoność implementacji za pomocą kodu. Projektant, który rozumie, które elementy wymagają JavaScript, może być lepiej przygotowany do zrozumienia, o co proszą programiści.

To jest możliwe bez nauki pisania pojedynczej linii kodu.

CSS jest stworzony stylizować stronę. Jest głównie statyczny, oprócz animacji CSS i CSS tworzy większość efektów wizualnych na stronie. Najbardziej dynamiczne funkcje są tworzone za pomocą JavaScript.

Jeśli potrafisz zrozumieć ten podział, odetchnie świadomie do pracy projektowej. Zmusi również projektantów ruchu UX do rozważenia, ile pracy idzie na animację interfejsu.

Techniki reagowania

Każdy projektant stron internetowych powinien przynajmniej znać ten termin elastyczny projekt. Pozwala to na strony internetowe dostosuj się do różnych rozmiarów ekranu, do każdego z nich należy inny układ. Wymiary urządzenia po zastosowaniu nowego układu to zdefiniowane przez punkty przerwania, dodano (jeden) plik CSS.

Punkty przerwania są określone przez a określona szerokość piksela (i / lub czasami wysokość), minimalna lub maksymalna, przy której układ dostosowuje się do rozmiaru ekranu. Tak więc responsywny układ będzie wyglądał inaczej na monitorze 1080px niż na smartfonie 320px.

Aby zobaczyć, jak punkty przerwania działają w prawdziwych witrynach, odwiedź witrynę Media Queries.

Twoim zadaniem jako projektanta jest rozważenie, w jaki sposób każdy punkt przerwania może wpływać na makietę. Możesz zostać poproszony o zaprojektowanie kilku kompilacji dopasowanie do różnych wymiarów ekranu.

Gdy zrozumiesz, że punkt przerwania CSS określa warunki, w których zmienia się układ, będziesz miał znacznie łatwiejszy czas dostarczania tych zasobów do zespołu dev.

Myśl modularnie o projektach

Programiści zawsze chcą kod ponownego użycia w miarę możliwości, ponieważ takie podejście sprawia, że ​​rozwój mniej gadatliwy i zmniejsza rozmiary plików - w rzeczywistości jest to ważna technika optymalizacji kodu.

Modułowa konstrukcja opisuje metodę tworzenia stron internetowych “moduły” to może być ponownie używane z czasem. Pomyśl o przyciskach, formularzach, stylach nagłówków lub cytatach z fantazyjnymi stylizacjami.

Jeśli ty modułowe projektowanie elementów, programistom łatwiej będzie zakodować układ za pomocą klasy CSS wielokrotnego użytku. Zawsze dobrze jest pomyśleć, gdzie możesz rozsądnie ponownie użyć te same kolory, tekstury i elementy strony, jednak musisz być mądry nie szkodzić ogólnej estetyce.

Jest jeszcze lepiej, jeśli ty komentować które elementy skopiowałeś na różnych makietach, aby programiści mogli zaznacz te części strony kodem powtórz - szybszy i prostszy rozwój.

Modułowa konstrukcja dotyczy projekt atomowy, oba podejścia są raczej ukierunkowane na deweloperów. jednak wyobrażanie sobie może pomóc zrozumieć, jak działa kod, więc jeśli się z tym zmagasz wizualizuj modułową konstrukcję sprawdź ten post, aby zobaczyć kilka przykładów.

Zapoznaj się z Retina Images & SVG

Zazwyczaj praca projektanta polega na przygotowywaniu obrazów, przechwytywaniu wszelkich niezbędnych zdjęć i projektowaniu ikon od podstaw. Oznacza to, że projektanci są wyłącznie odpowiedzialni za dostarczanie zasobów wizualnych że programiści ostatecznie kodują układ. Dlatego ważne jest, aby zrozumieć rozmiary siatkówki i do przekazać aktywa obsługiwane przez siatkówkę dla programistów wraz z finalną makietą.

Gorąco polecam ten post Smashing Magazine, jeśli chcesz dowiedzieć się więcej o przepływach pracy związanych z projektowaniem retina. Retinize It to darmowa kolekcja akcji Photoshopa, które mogą automatycznie tworzyć wersje siatkówki twoich aktywów.

Większość projektantów już wie, jak wspierać @ 2x obrazy, ale nowsze urządzenia iPhone 6+ mają @ Rozdzielczość 3x. Jednak niektóre projekty nie przejmują się rozmiarami obrazu 3x, więc porozmawiaj z kierownikiem projektu przed sfinalizowaniem jakichkolwiek aktywów.

Ostatnią rzeczą do rozważenia jest rozwój SVG w sieci. Wszystkie nowoczesne przeglądarki obsługują SVG format obrazu wektorowego. Oznacza to, że ikony SVG będą automatycznie skaluje się bez utraty jakości, więc nie potrzebujesz zasobów retina dla grafiki SVG.

Nie wszystkie zespoły kreatywne są jednak skłonne korzystać z SVG do projektowania stron internetowych. Są one z pewnością obsługiwane przez przeglądarki, ale w niektórych przypadkach mogą być trudne do wdrożenia. Dlatego komunikacja jest niezbędna dla udanej relacji projektant / programista.

Omów zalety i wady korzystania z grafiki wektorowej i zdecyduj, co działa najlepiej dla każdego projektu. Dzięki zrozumieniu tych funkcji będziesz w stanie wyraźnie komunikować się z programistami, a nawet pomóc im w kodowaniu układu obsługi siatkówki.

Zrozum dostępność

Progresywne ulepszanie i wdzięczna degradacja są dwa różne sposoby radzenia sobie z tym samym problemem: dostępność. Nie wszyscy użytkownicy będą na urządzeniach lub uruchomią przeglądarki obsługujące 100% dynamicznych funkcji witryny.

Ci użytkownicy powinni nadal otrzymywać doświadczenie, które działa, i to musi być obsługiwane za pomocą właściwego kodowania. Niektóre czytniki ekranu mogą ignorować cały kod JavaScript i CSS, ale stronę internetową nadal musi działać.

Niedawno zrobiłem przykrycie postu progresywne ulepszanie szczegółowo, ponieważ jest to moja preferowana metoda rozwoju. Progresywne ulepszanie zaczyna się od bardzo podstawowych funkcji, następnie działa do więcej “zaawansowane” funkcje.

Wdzięczna degradacja jest przeciwne podejście gdzie wszystkie główne funkcje zostały zaprojektowane w pierwszej kolejności, wtedy programista decyduje, jak postępować z tymi funkcjami, jeśli użytkownik nie obsługuje JavaScript lub CSS.

Jest mało prawdopodobne, aby projektant został poproszony o wykonanie makiet dla którejkolwiek z tych sytuacji. Ale ważne jest, aby projektanci rozumieli te terminy i ich znaczenie, ponieważ oni wpływają na proces rozwoju. Dotyczy to zwłaszcza projektów, w których dostępność jest dużym problemem.

W zamknięciu

Są pewne tematy, które pominąłem, ponieważ uważam je za opcjonalne. Kontrola wersji, obsługa błędów i animacje JavaScript to kilka bardziej złożonych tematów, które projektanci mogą chcieć zagłębić.

Ale zgodnie z prawdą, punkty omówione w tym poście nie tylko pomogą projektantom zrozumieć wymagania zespołu programistów. Po prostu przejrzysz powierzchnię tworzenia stron internetowych Zdobądź wgląd to pomoże Ci przekazać pomysły i sympatyzować z problemami występującymi podczas produkcji.

Jeśli szukasz więcej pokrewnych treści, spójrz na te posty:

• Jak skutecznie komunikować się z programistami (smashingmagazine.com)
• Pomóż projektantom i programistom nauczyć się rozumieć siebie nawzajem (uie.com)
• Nauka kodu Daje korzyści jako projektant UX (jessicaivins.net)