Od Benchmarków do Designu: Jak stworzyć nowoczesny interfejs strony uczelni
Po zebraniu inspiracji i benchmarków, czas przejść do konkretnych działań projektowych. W tym artykule skupimy się na procesie tworzenia spójnego projektu wizualnego strony uczelni, z naciskiem na design systemy i nowoczesne narzędzia projektowe, które znacząco usprawniają pracę designera.
Po etapie zbierania inspiracji i benchmarków, przyszedł czas na działanie. Dzisiaj skupimy się na przekuciu pomysłów w konkretny, wireframe strony głównej, przymierzymy się do wizualnej części pracy. W tym artykule znajdziecie przykładowe podejścia do tego zadania, wraz z zestawem narzędzi, które usprawnią cały proces.
Cel zajęć
Zaprojektowanie atrakcyjnej i funkcjonalnej strony głównej uczelni, rozpoczynając od szybkich wireframów, przez makiety, aż do finalnego projektu wizualnego. Na pierwszych zajęciach jedynie kwestie związane bardziej z UX, czyli makieta strony z nowymi tekstami.
(60 minut)
Wykorzystamy jeden z gotowych UI Kitów w ramach ćwiczenia na zajęciach. Możliwość ingerencji w treści, są to jedynie propozycje.
Od czego zacząć?
Po zebraniu benchmarków, pierwszym krokiem jest uporządkowanie i zhierarchizowanie informacji. Strona główna uczelni to nie tylko wizytówka, ale też centrum nawigacyjne dla różnych grup użytkowników:
Identyfikacja grup docelowych i ich potrzeb:
- Kandydaci na studia (informacje o kierunkach, rekrutacji)
- Obecni studenci (aktualności, dostęp do systemów)
- Wykładowcy i pracownicy (zasoby wewnętrzne)
- Partnerzy biznesowi i naukowi (współpraca, badania)
- Media i opinia publiczna (osiągnięcia, wydarzenia)
Może Design System?
Design system to nie tylko biblioteka komponentów, ale kompleksowe podejście do projektowania, które zapewnia spójność, skalowalność i efektywność. Oto proces tworzenia i wykorzystania design systemu dla strony uczelni:
1.Eksploracja i analiza istniejących design systemów UI KITÓW:
- Zbadajcie uniwersalne systemy jak Material Design, IBM Carbon czy Atlassian Design System oraz inne UI KITy. Pełna lista na dole wpisu
- Zidentyfikujcie wspólne wzorce i rozwiązania adaptowalne do waszego projektu
2. Elementy design systemu, które powinniśmy stworzyć:
- Design Tokens: fundamentalne wartości wizualne (kolory, typografia, odstępy, cienie)
- Komponenty bazowe: przyciski, pola formularzy, karty, nagłówki
- Złożone komponenty: nawigacja, karuzele, akordeony, galerie
- Wzorce: typowe układy stron, interakcje, animacje
- Zasady: guidelines dotyczące dostępności, responsywności, ton komunikacji
Wireframowanie:
- Figma/FigJam - główne narzędzie do współpracy i projektowania
- Excalidraw - proste rysowanie wireframów online
- Uizard - szybkie przekształcanie szkiców w wireframe'y. Funkcja AI
Gotowe design systemy do adaptacji:
- Atlaskit by Atlassian - kompletny system z dobrą dokumentacją
- Primer by GitHub - minimalistyczny i funkcjonalny
- Polaris by Shopify - przyjazny i nowoczesny
- Carbon by IBM - rozbudowany system enterprise
- Spectrum by Adobe - elegancki i przemyślany
- Fluent UI by Microsoft - zoptymalizowany dla różnych platform
- Fiori by SAP - zorientowany na aplikacje biznesowe
- Elastic UI - świetny dla aplikacji z wizualizacją danych
- Zendesk Garden - zbalansowany i przyjazny
Biblioteki UI dla Figma:
- Ant Design System for Figma - olbrzymia biblioteka komponentów
- Eva Design System - adaptacyjny system z ponad 480 komponentami
- Tailwind UI Kit - komponenty zgodne z filozofią Tailwind
- Mantine UI - nowoczesna biblioteka dla aplikacji webowych
- Chakra UI for Figma - dostępne komponenty z czystym designem
- Material 3 Design Kit - najnowsza wersja Material Design
- iOS UI Kit for Figma - oficjalny kit Apple
- Untitled UI - najpopularniejsza biblioteka premium
