Niedziela, 14 sierpnia 2022

Designers Should Code: Build an App From Scratch

24 lipca 2022

Rozkład prostej aplikacji, od projektu UI do wdrożenia, który pokazuje, dlaczego kodowanie jest magicznym narzędziem dla projektantów.

Figma, Adobe XD, Photoshop, Wacom Tablet, szkicownik... wszystkie narzędzia dla projektantów interfejsów i stron internetowych, tak? Poświęć 2 minuty i spróbuj sobie przypomnieć, dlaczego chcesz zostać projektantem i dlaczego lubisz projektować rzeczy.

Szanse są takie, że to dlatego, że lubisz tworzyć; jesteś osobą kreatywną. Może zacząłeś od doświadczeń artystycznych jako dziecko, a następnie przekształciłeś tę twórczą energię w rozwiązywanie problemów, kontynuując wyrażanie jej wizualnie: Zostałeś projektantem, twórczym rozwiązywaczem problemów.

Dzisiaj postaram się pokazać, jak kodowanie jest niedocenianym narzędziem do wyrażania swojego kreatywnego sposobu rozwiązywania problemów, budując od podstaw prawdziwy generator SVG. A więc bierzmy się do roboty!

Krok 1: Nie wpadnij na pomysł; rozwiąż problem

Nie zagłębialiśmy się tutaj w głębokie rozważania biznesowe, ale dostrzeżenie problemów, z którymi się spotykasz i podjęcie decyzji o samodzielnym ich rozwiązaniu, to świetny sposób na rozpoczęcie.

Podczas pracy z klientem potrzebowałem kilku fal SVG do ilustracji. Poszukałem więc generatora fal: Było mnóstwo falujących kolorowych generatorów fal z wejściami parametrycznymi, ale nie było żadnego prostego, idealnego generatora fal sinusoidalnych. Postanowiłem narysować go na moim narzędziu matematycznym GeoGebra, a następnie wyeksportować go do SVG.

Dobrze, ale nie szybko. A my lubimy szybko wykonywać nasze zadania. Ale czekaj... Dlaczego nie stworzymy idealnego generatora fal sinusoidalnych? Bez równań i nudnych programów matematycznych do otwarcia, po prostu krzywa i przycisk eksportu. Masz to, teraz zaprojektujmy to.

Szybkie wskazówki: Jeśli szukasz problemu, poszukaj memów w swojej dziedzinie. Zawsze pokazują głęboki, bolesny, dobrze znany problem.

Krok 2: Zaprojektuj rozwiązanie proste jak to tylko możliwe

Dwie główne zasady: Pierwsza zasada, zastanów się, kto będzie z niego korzystał; druga zasada, przewiduj, czego oczekują od tego, jak działa. A więc kto? Programiści front-endowi. Na co czekają? Krzywa, którą można edytować z bezpośrednią informacją zwrotną i przyciskiem eksportu.

Projekt Wireframe

Projekt High-Fi

Szybka wskazówka: Możesz chwycić projekt Figma aplikacji, aby uzyskać więcej technicznych wskazówek dotyczących projektu.

Krok 3: Zbuduj to naprawdę

Jako projektant, zatrzymanie się na kroku drugim jest jak najbardziej w porządku. Ale wyobraź sobie, że mógłbyś zbudować to, co projektujesz! Wiesz już, że możesz stworzyć wszystko, co chcesz.

Możesz postrzegać kodowanie jako sposób na przetłumaczenie swojego UI, który z pewnością zakończy się aplikacją .com, która jest użyteczna dla każdego. Dlatego "najlepsze języki" nie mają znaczenia; kodowanie to tylko narzędzie do wyrażania swojej kreatywności i budowania rzeczy dla innych. I jako projektant, osoba kreatywna, może to brzmieć... ciekawie.

Od UI do funkcjonalnej aplikacji

Każdy interfejs aplikacji internetowej można przełożyć z projektu UI na kod za pomocą HTML/CSS/JS. Oto jak możemy zobaczyć rolę każdego z tych 3 "języków":

HTML: Chcę mieć przycisk.

CSS: Chcę, aby mój przycisk wyglądał na zaokrąglony.

JS: Chcę, aby coś się działo, gdy kliknę na mój przycisk.

Aby zbudować naszą aplikację, użyję Svelte. Svelte to kompilator JavaScript, który pozwala nam używać wszystkich tych trzech "języków" w jednym miejscu. Zobaczmy więc, jak kod może przetłumaczyć nasze UI na funkcjonalne rzeczy.

Kod przycisku HTML.

"Hej przeglądarko, chcę, aby przycisk o nazwie "exportButton" i wszystko w funkcji o nazwie "downloadSVGpath" zostało wykonane, gdy ktoś kliknie na przycisk :) Dzięki"

Kod przycisku w stylu CSS

"Hej przeglądarka internetowa, chcę, abyś zastosował te zasady stylu do mojego podstawowego przycisku HTML: Chcę mieć piękny zaokrąglony róg na 16px, wskaźnik myszy, gdy go najedziemy, nie chcę żadnych granic, ale chcę fajny gradient kolorów jako kolor tła. Następnie chcę, aby czcionka wewnątrz przycisku miała kolor ustawiony na #fcfc i używała kroju pisma Inter (pogrubionego, proszę). Podobnie jak w moim projekcie Figma, chcę również wyśrodkować rzeczy w przycisku i dodać padding. Aha, i dodać subtelny cień :) Thanks."

Rysowanie funkcji krzywej SVG

"Hej, przeglądarko, za każdym razem, gdy nasz suwak się porusza, chcę uruchomić tę funkcję: Chcę, abyś narysował krzywą wewnątrz ramki, którą zdefiniowałem wewnątrz mojego kodu HTML. Chcę również, aby mój obrys krzywej wyglądał na zaokrąglony przy każdej nakładce i miał kolor i szerokość, które zdefiniowałem wewnątrz zmiennych. Parametry funkcji sinus weźmiesz z zapisanych wartości suwaków. Na koniec, podczas gdy Twoja zmienna x nie osiągnęła całkowitej szerokości w osi x naszej ramki, rozwiążesz położenie punktu osi y równania sinus i narysujesz krzywą :) Dzięki."

Szybkie wskazówki: Możesz chwycić pliki kodu źródłowego aplikacji, aby je zbadać.

Podsumowanie

  • Kodowanie to tylko narzędzie, które pozwala nam przełożyć nasze bardzo wizualne metafory na coś, z czego każdy może korzystać. Jakie to fajne!!!
  • Kodowanie pomaga nam wyobrazić sobie nasze cele projektowe i zmusza nas do spojrzenia poza zakres wizualny: jak ma działać mój przycisk? Jak ma wyglądać po najechaniu? Jak mój popup modal może być zaprojektowany dla urządzeń mobilnych?
  • Kodowanie pozwala nam stworzyć dziwny pomysł, który zaprojektowaliśmy "just for fun", zamiast upychać projektowe case study do naszego portfolio pod tagiem "personal project".
  • Kodowanie pokazuje nam, ile pracy wymaga osiągnięcie tego, co zaprojektowaliśmy. Możemy więc lepiej zrozumieć potrzeby naszych klientów projektowych, wyzwania i zarządzanie zasobami.
  • Kodowanie jest elastyczne. Możesz odwzorować stronę Netflixa w sposób perfekcyjny, używając czystego HTML/CSS, Vue Framework lub dowolnego innego frameworka.