Wireframe strony WSBMiR
Sposób przygotowania wstępnych szkiców dla strony głównej WSBMiR
Podsumowanie kolejnego etapu prac
Podczas ostatnich zajęć ustaliliśmy precyzyjny plan działania na następne dwa bloki lekcyjne. Przede wszystkim pracujemy obecnie nad trzema najważniejszymi elementami:
- Inspiracje / Benchmarki - 3 perfekcyjne projekty, do których poziomu będziemy dążyć
- Ostateczna propozycja tekstów dla strony głównej - prawdopodobnie drobne zmiany będą pojawiały się podczas całego procesu projektowego. Jednak w trakcie tworzenia wstępnych wireframingów, możemy zastanowić się nad koncepcjami ciekawych tekstów (ostateczna wersja zostanie podana 25.03)
- Wstępny wireframing dla strony głównej - Wykonany dowolną techniką Wireframing. Na ostatnich zajęciach korzystaliśmy z ciekawych UI Kitów do Figmy oraz Design Systemów. Jest to jedno z lepszych rozwiązań dla szybkich prototypów, ale dzisiaj polecę Wam Relume. Docelowo będziemy pracowali w Figmie. Potrzebna nam architektura strony głównej
Zadanie na dzisiejszych zajęciach
Dzisiaj finalizujemy trzy podpunkty, nad którymi pracujemy. Inspiracje, Weksty, Wireframing. Na następnych zajęciach prezentujemy wstępne koncepcje projektów. Spróbujemy zrobić burzę mózgów w celu ustalenia ostatecznych detali. W folderze zaj.4 Tworzymy podsumowanie. Własny folder zawierający dwa elementy
- linki lub screeny do 3-ech inspiracji
- wireframing w postaci graficznej prezentujący wstępny projekt strony głównej
Poniżej mój plan działania podczas wykonywania tego etapu prac. Może być inspiracją dla Twojego projektu oraz procesu i etapów działania. Pamiętaj, że nigdy nie jest to proces prostoliniowy. Często etapy mieszają się między sobą. Podczas projektowania wpadasz na pomysł na jakiś ciekawy tekst w konkretnym miejscu. Z drugiej strony poprawiając teksty jakieś słowo, może Cię zainspirować do zaprojektowania konkretnego elementu. Postaraj się wykonać ćwiczenie jak najlepiej, aby realnie przyczynić się do ostatnej jakości nowej strony WSBMiR.
Zdefiniowanie kluczowych słów dotyczących Designu
- Bold Fonts
- Grid
- Bento
- Simple / Minimalism
- Future
- Art
- Design
- Dark Mode
Dodatkowe słowa kluczowe
- School
- University
Reasearch w poszukiwaniu inspiracji i benchmarków. Lista polecanych stron
- Behance – kolejna platforma z inspiracjami, często używana przez projektantów.
- Awwwards – strona z najlepszymi projektami stron internetowych. Można tam znaleźć inspiracje dla nowoczesnych serwisów
- Dribbble – platforma z inspiracjami projektowymi. Można tam znaleźć nowoczesne designy stron internetowych.
- Landbook.com
- siteinspire.com
- lapa.ninja
- collectui.com
Wstępna selekcja inspiracji
- https://land-book.com/websites/52210-elisava-barcelona-school-of-design-and-engineering
- https://land-book.com/websites/73125-free-university-evergreen-nexus-university
- https://land-book.com/websites/58319-ignatius-school-webflow-html-website-template
- https://land-book.com/websites/61678-mlv-ignite-high-school-entrepreneurship-program
- https://land-book.com/websites/47048-institute-of-design-id-at-illinois-tech
- https://www.behance.net/gallery/185118759/Yale-Corporate-website-redesign?tracking_source=search_projects|university+website&l=6
- https://www.behance.net/gallery/219784559/Online-Design-School-WEBSITE?tracking_source=search_projects|school+website&l=1
- https://www.behance.net/gallery/159360263/University-of-Oxford-website-concept?tracking_source=search_projects|university+website&l=11
- https://www.behance.net/gallery/212145103/Educational-Website-Design-Concept?tracking_source=search_projects|university+website&l=10
- https://www.behance.net/gallery/209995971/Faculty-of-Liberal-Arts-Sciences-Website?tracking_source=search_projects|university+website&l=38
- https://www.behance.net/gallery/120113117/Khazar-University-Website?tracking_source=search_projects|university+website&l=84
- https://www.uniforma.pl/
- https://www.designpractice.pl/
Analiza i modyfikacja tekstów
- Chat GPT
- Notion
Praca nad Wireframingiem
- Relume
- https://uxpilot.ai/
🔥 Następne zajęcia zaczynamy Projekt Graficzny 🔥
