Od UX do UI (wymagania IT)

Dołączasz do już istniejącego projektu. Dostajesz informację od developerów, że wdrażają aplikację w Angularze i wybrali bibliotekę komponentów PrimeNG. Co to dla Ciebie jako UXa oznacza?

• Abosolutnie nic. Wszystko prokejtuję według własnego uznania.

• Oh nie! Teraz nie będę miał_ przestrzeni na własne pomysły!

• Muszę pamiętać, aby weryfikować potencjalne rozwiązania, aby pokrywały się z możliwościami Angulara i PrimeNG.

Answer explanation

Nie zależnie od wybranej technologii i innych narzędzi ułatwiających pracę developerom, ty jako projektant/ka również buduj świadomość możliwości technologicznych.

Dzięki temu nie tylko stworzysz lepsze doświadczenia użytkownika, ale również zmaksymalizujesz efektywność pracy devów, gdyż nie będą tworzyć pewnych rozwiązań od podstaw.

Czy projektant/ka musi znać HTML i CSS?

• Nie, nie jest to wymagane. Jednak już podstawowa znajomość HTML/CSS pomaga we współpracy z devami.

• Tak, są to absolutnie konieczne i podstawowe umiętności na rynku pracy.

• Nie, projektant/ka nie musi znać HTML i CSS. Może zupełnie zapomnieć o technologiach w pracy IT.

Answer explanation

Dobrze zorientowany pracodawca nie będzie wymagał od projektantów umiejętności kodowania.

Jednak w trakcie rozwoju, podstawowa znajomość HTML i CSS pomaga tworzyć lepszy, bardziej dopracowany UI.

HTML i CSS jest mile widziany jako umiejętność na poziomie regular oraz senior (zwłaszcza u UI designerów).

Czym jest Design System?

• Jest to zbiór podstawowych designów low-fi, które są podstawą w pracy projektowej.

• Jest zbiorem ilustracji i dozwolonych zdjęć, używanych w produkcie cyfrowym.

• Jest zbiorem wytycznych i elementów standardowych (komponentów) do projektowania i rozwijania produktu cyfrowego.

• Jest to zbiór 10 zasad projektowania stworzonych przez Nielsen Norman Group

Answer explanation

Dobry design system jest nie tylko będzie listą komponentów, ale również zawiera szczegółową dokumentację przydatną dla projektantów i programistów.

Zawiera dobre praktyki, zalecane rozwiązania, informacje jak zaimplementować rozwiązania pod różne rozdzielczości czy uwzględniające dostępność.

Połącz nazwy komponentów z ich wizualnymi odpowiednikami.

• Checkbox

• 
• Snackbar

• 
• Dialogs

• 
• Primary Button

• 
• Text Field

• 

Answer explanation

Pamiętaj, że każdy design system może nazywać te same bądź bardzo zbliżone do siebie komponenty w inny sposób.

Świetnym przykładem jest okno dialogowe. Może być określane jako: modal, pop-up, dialog window, dialog-box, czy po prostu dialog.

Nie ważna jest nazwa. Ważne, aby każda osoba z zespołu wiedziała czym dany komponent jest i jaką pełni funkcję.

Czym jest WCAG?

• Unijne rozporządzenie o sposobie przechowywania danych wrażliwych.

• Tak zwane słowa kluczowe po których roboty przeglądarek indeksują strony internetowe

• To zbiór wytycznych dotyczących dostępności treści internetowych.

• To format pliku wektorowego, który może zostać wykorzystany w produktach cyfrowych.

Answer explanation

WCAG to skrótowiec od Web Content Accessibility Guidelines czyli wytycznych dotyczących dostępności treści internetowych. Obecnie obowiązuje wersja 2.1 tych wytycznych.

Wytyczne WCAG wyjaśniają jak tworzyć strony internetowe i aplikacje aby udostępnić je osobom z niepełnosprawnościami.

Dla kogo przydatna jest dostępność cyfrowa?

• Dla wszystkich. Nie zależnie od stanu zdrowia czy posiadanej niepełnosprawności.

• Dla osób z zaburzeniami poznawczymi.

• Wyłącznie dla osób starszych z ograniczeniami ruchowymi.

• Dla osób niesłyszących i niewidomych.

Answer explanation

Mimo, że gdy myślimy o dostępności, która wprowadza równość dostępności treści produktów cyfrowych dla osób z różnym poziomem niepełnosprawności. To tak naprawdę dostępność powoduje łatwiejsze opcje korzystania produktów cyfrowych dla wszystkich. Również dla Ciebie :)

Masz przez sobą fragment skali typografii. Ustaw treści według stopnia ich ważności.

• 
• 
• 
• 
• 

Czym jest RWD?

• Z angielskiego 'Random Word Displayer'. Jest to narzędzie do generowania treści alternatywnych i poprawy SEO.

• Lista reguł, która jest obowiązkowa do spełnienia aby produkt cyfrowy dostosowywał się wyświetlał się na mobile.

• Jedna z jednostek (jak em czy rem), dzięki, której produkty cyfrowe mogą się skalować.

• Jest techniką projektowania stron WWW, tak aby ich układ i wygląd automatycznie dostosowywał się do rozmiaru okna przeglądarki, na której strona jest wyświetlana

Kiedy zastosujesz zasadę projektową 'Mobile First'?

• Zawsze, niezależnie od tego na jaką rozdzielczość ekranu projektuję

• Tylko projektuję aplikację na urządzenie mobilne (smartfone).

• Tylko gdy jestem pewny, że moi użytkownicy głównie korzystają z urządzeń mobilnych, a dodatkowo projektuję ekrany na dekstop.

• Zawsze gdy projektuję aplikacje mobilne pod tablety. Wówczas muszę rozważyć widok horyzontalny i wertykalny.

Co powoduje zastosowanie gridu podczas projektowania? [ZAZNACZ 3 ODPOWIEDZI!]

• Ułatwia szybsze podjęcie decyzji co do rozmieszczenia elementów interfejsu.

• Porządkuje i uspójnia układ elementów na stronach przyszłej aplikacji.

• Pomaga w opracowaniu wysokości interlinii akapitów.

• Łatwiej zaplanować pracę pod RWD.

Answer explanation

Siatka – system pionowych i poziomych linii, (kolumny, wiersze) wprowadzające strukturę i organizację w układzie strony/widoku. Komunikują porządek, spójność i elastyczność. Siatka jest podstawową strukturą ułatwiająca organizację elementów oraz jednym z podstawowych elementów design systemu.

Najczęściej spotykane framewor’ki z siatką to Bootstrap, Foundation, Google Material.