Design VS Code – dlaczego mają iść w parze?

Czy projektanci powinni skupić się wyłącznie na kunszcie wizualnego brandingu strony internetowej? Czy programiści powinni tylko umieć kodować? Jakie znaczenie ma rozwój front-endu w Drupalu? Znajdźmy odpowiedzi na wszystkie Twoje pytania w tym artykule.

Kiedy głębiej zagłębimy się w tę zagadkę między projektowaniem a kodem, dociera do nas, że oba są w rzeczywistości komplementarne. Ale pytanie brzmi: dlaczego? Dlaczego projektanci UI/UX muszą uczyć się kodu i jego podstaw, a także programistów, jeśli chodzi o projektowanie.

Obie dziedziny wiążą się z kreatywnością, zrozumieniem użytkowników i ich zachowań. Bycie projektantem bez znajomości podstawowych umiejętności kodowania i struktury kodu jest jak przygotowywanie na wpół upieczonego ciasta, które po zjedzeniu może zabrać cię na szaleństwo w łazience.

Ale najpierw przejdźmy do podstaw na przykładzie.

Projektowanie a kodowanie: podobieństwo z różnicą

Pisarz musi sobie wyobrazić i podsumować swoje myśli, zanim faktycznie je zapisze. Nikt po prostu nie bierze pamiętnika, nie wchodzi na bloga lub platformę społecznościową i od razu zaczyna pisać. Dlatego cała procedura nazywa się komponowaniem. I tak, pisanie wiadomości e-mail w Gmailu jest również nazywane „tworzeniem”. A teraz, dlaczego mówimy o pisarzach, kompozycjach i tak dalej. Przejdźmy do sprawy. W tym przypadku wyobraźnia to twój projekt, a spisywanie myśli to rozwój. Mam nadzieję, że masz teraz lepsze zdjęcie; przejdźmy do innej strony tego tematu.

Czy projektanci powinni uczyć się kodu, a programiści poznawać UI/UX?

Podczas sprintów z kodem projektu możesz natknąć się na sytuacje, w których wszystkie utworzone projekty nie są wykonalne. Ostatecznie produkt końcowy staje się ulepszoną wersją oryginalnego projektu. Toczą się dyskusje, klient zmienia wymagania, ale problem pozostaje spójny. Sytuacji tych można uniknąć, jeśli zespoły projektowe i deweloperskie będą ze sobą współpracować od samego początku. W ten sposób praca jest wykonywana wydajniej, ponieważ otrzymują od siebie nawzajem ciągłe informacje zwrotne na temat tego, co jest wykonalne, a co nie.

Zrozumienie obu domen nie jest tak trudne, jak mogłoby się wydawać. W każdym z nich potrzeba wyobraźni, procesu myślowego i praktyki. I tak, nie wspominając, że podstawowe umiejętności to projektowanie i kodowanie, których należy się nauczyć, ale nie jest to obowiązkowe, jeśli je znasz.

Projektant musi znać wykonalność, możliwości i wyzwania związane z projektem, a poznasz to tylko wtedy, gdy wiesz, jak to osiągnąć za pomocą kodu. To samo dotyczy również programistów. Kiedy programiści zrozumieją różne scenariusze, przez które mogą przejść użytkownicy, ich wrażenia z użytkowania, rozwiązywanie problemów, rozwiązania itp., może to znacznie uprościć i usprawnić.

Oto powody, dla których dana osoba powinna nauczyć się podstaw którejkolwiek z umiejętności (kodowania lub projektowania) oprócz podstawowej wiedzy specjalistycznej

1. Większa kontrola nad wyglądem i stylem produktu: Zasadniczo oznacza to, że gdy programista wie, jak działa analiza projektu i jaki jest proces projektowania, może dostosować te pomysły projektowe i mieć większą kontrolę nad produktem końcowym a tym samym skutkuje szybszą dostawą produktu.
2. Zrozum użytkowników i zastosuj to do projektowania: Kiedy programista rozumie produkt z perspektywy użytkownika, daje mu to ogromną siłę do zbudowania czegoś, czego użytkownicy naprawdę potrzebują i pragną. Na przykład zrozumie, jak użytkownicy zareagują na różną typografię, różne style przycisków, schematy kolorów itp.
3. Adaptacja projektu: Jest to równie ważne dla projektantów, którzy potrafią kodować. Kiedy wie, w jaki sposób projektowany produkt będzie skonstruowany podczas opracowywania, może idealnie ulepszyć projekt i uczynić go bardziej wydajnym, zmniejszając w ten sposób czas i wysiłek włożony przez programistów.

Opracowanie konsekwencji posiadania tylko podstawowej wiedzy eksperckiej z Przykładami

Aby lepiej zrozumieć, dlaczego projektowanie i kodowanie powinny iść w parze, przyjrzyjmy się kilku przykładom.

Powyższe jest klasycznym przykładem użycia struktury niesekwencyjnej. Tutaj struktura jest porządkowana podczas opracowywania dla urządzeń mobilnych. To nie tylko zła praktyka; jest to również czasochłonne i uciążliwe. Gdyby jednak projektant znał strukturę tworzonego kodu, można by tego łatwo i prawdopodobnie uniknąć.

Rozważ powyższy przykład wyskakującej nakładki ze zwojem. Wyskakująca nakładka została zaprojektowana w taki sposób, aby skierować uwagę użytkownika na pojedynczy temat i jest używana jako punkt skupienia tylko wtedy, gdy trzeba wyświetlić określoną informację. W tym przypadku nakładka wyskakująca ma w tle zwój, który może rozpraszać użytkownika i może nie okazać się nieskuteczny

Deweloper zawsze koncentruje się na tym, aby zadanie zostało wykonane wydajniej i w szybszym tempie, a w trakcie tego procesu pomija niektóre aspekty projektu, które może uważać za niepotrzebne lub można to zrobić, nieco poprawiając projekt. Powyższy przykład pokazuje dokładny scenariusz, w którym programista wykonuje swoją pracę, ale w końcu naraża projekt na szwank. Tak więc, jeśli programista miał kontakt z podstawowym interfejsem użytkownika/UX, tego problemu można było i łatwo uniknąć.

Jako inny przykład weźmy powyższe zrzuty ekranu, które pochodzą z aplikacji do oszczędzania pieniędzy. Samo zadanie nie ma żadnego pola wejściowego dla podpisu cyfrowego. Ponadto po przesłaniu formularza komunikat o błędzie nie daje użytkownikowi żadnych wskazówek ani sugestii dotyczących uzyskania prawidłowego podpisu cyfrowego. Gdyby programista znał podstawy UI/UX, mógł z łatwością poprowadzić użytkownika przez kolejny proces lub mógł wyświetlić komunikat w prostszy sposób z odpowiednim odniesieniem do pola lub sugestii.

Gdzie zacząć?

Rozpoczęcie pracy to zawsze dobry pomysł. Dla projektantów podstawą do nauki jest HTML, CSS i trochę JS/jQuery. Istnieje wiele internetowych platform edukacyjnych i stron internetowych z narzędziami IDE na żywo, dzięki którym możesz ćwiczyć i uczyć się.

HTML : podstawowa struktura każdego projektu jest na pierwszym miejscu i jest to kod każdego produktu.
JS/jQuery: dzięki nim można osiągnąć suwaki, wyskakujące okienka, listy rozwijane i wiele więcej
Sandbox: narzędzie na żywo do zabawy z kodem
CSS/SCSS : Stylizacja struktury to proces twórczy i możesz to osiągnąć dzięki CSS/SCSS
W3Schools: Prosta platforma edukacyjna online i dobra na początek
Codrops (Tympanus): Obszerna biblioteka z myślą o projektowaniu i programowaniu na tej samej platformie

Programiści mogą zacząć od najlepszych praktyk dotyczących UI/UX z -
Behance: Kompletny zestaw projektów do profesjonalnego portfolio i inspiracji
Dribbble: Zaprojektuj pomysły do ​​opublikowania i zainspiruj się
Muzli: Blogi, inspiracje, pomysły
Średni : blogi o dowolnej dziedzinie (prawie), najlepsze praktyki i samouczki
Awwwards: Nominowane strony internetowe dla najlepszych projektów i zwycięzców, z którymi można się zainspirować
XD/Figma/Sketch: Narzędzia do projektowania makiet, makiety dla UI/UX

Dla projektantów

Dla programistów

Rozwój front-endu w Drupal

Drupal 8 jako CMS jest strukturą zarządzania treścią bardzo przyjazną dla UI/UX projektanta, ponieważ ma wiele do zaoferowania od razu po wyjęciu z pudełka, z których najważniejszą jest różnorodność dostępnych motywów i responsywnych projektów. Oczywiście jest o wiele więcej funkcji, o których mogę teraz pomyśleć, ale zatrzymajmy to na inny dzień.

Podczas gdy projektanci UX wykorzystują swoje umiejętności twórcze i skupiają się na wizualnej prezentacji witryny Drupal, programiści Front-end Drupal wypełniają lukę między projektantami UX a programistami back-end Drupal. To oni implementują komponenty wizualne dostarczone przez projektanta w serwisie Drupal. Chociaż zarówno projektant UX, jak i programista Front-end Drupal myślą w kategoriach doświadczenia użytkownika i rozwiązywania problemów związanych z UX, przyjmują różne podejścia do ich rozwiązywania. Ten ostatni jednak zawsze znajduje rozwiązanie za pomocą kodu.
Deweloperzy front-end Drupal są odpowiedzialni za dostarczanie pięknych stron Drupal, pracując nad i dostosowując motywy Drupal. Powinni umieć rozwiązywać problemy frontendowe, do których musieliby być wyposażeni w wiedzę z zakresu PHP, CSS, jQuery, CSS, HTML i co najważniejsze – projektowanie stron internetowych na urządzenia mobilne.

Wraz z rosnącą popularnością bezgłowych stron internetowych Drupal i oddzielonej architektury, programiści Front-end Drupal, którzy rozumieją frameworki programistyczne takie jak Angular, ReactJS, Vue.js, zawsze mają przewagę konkurencyjną.
Podsumowując, aby móc przodować w rozwoju Front-end Drupala, trzeba wyjść z ich strefy komfortu i nauczyć się, jak najlepiej tworzyć i wdrażać nowoczesne cyfrowe doświadczenia wyposażone w najnowsze technologie.