1. Wprowadzenie
Niniejsza propozycja projektu przedstawia naszą kompleksową ofertę świadczenia usługi projektowania stron internetowych opartej na Figma dla nowego redesignu strony internetowej Nuwa, w związku z całkowitym rebrandingiem. Przebudowana strona odzwierciedli przywództwo Nuwa w zakresie komercjalizacji badań, technologii i innowacji oraz wpływu społecznego, jednocześnie uwzględniając jej imperatywy komercyjne. Nasza propozycja szczegółowo opisuje zakres prac, wymagania projektowe i techniczne, kamienie milowe projektu, strukturę cenową oraz nasz proces współpracy, aby zapewnić płynne przekształcenie cyfrowej obecności Nuwa.
2. Tło i przegląd projektu
Nuwa ma na celu przekształcenie swojej obecności cyfrowej w Centrum Doskonałości i Innowacji, które nie tylko napędza sukces komercyjny, ale także pokazuje znaczący wpływ społeczny. Nowa strona internetowa będzie służyć różnorodnym odbiorcom, w tym instytucjom finansującym, globalnym partnerom, badaczom i klientom biznesowym, oraz ułatwi odwiedzającym eksplorację naszych drugorzędnych marek. Czerpiąc inspirację z wiodących stron internetowych branży i stron poświęconych innowacjom, brief projektowy obejmuje wiele sekcji:
- STRONA GŁÓWNA: Baner główny, dynamiczne podkreślenia wpływu i jasne CTA
- BRANŻE: Szczegółowe strony podzielone na Ochronę Humanitarną i Cywilną, Sztuki Sceniczne oraz Media i Rozrywkę
- TECHNOLOGIE: Szczegółowe informacje na temat Chmury, Edge, Danych i AI, IoT oraz technologii immersyjnych
- WNIOSKI: Zgromadzone myślenie liderów, wiadomości i treści badawcze
- PARTNERZY: Kompleksowe profile partnerów
- KONTAKT: Interaktywne opcje kontaktu
Nasz projekt migracji i redesignu oparty jest na nowoczesnych technologiach, wykorzystujących framework NextJS z rozwojem front-endu w React, Payload CMS do zarządzania treścią oraz Storybook do dokumentacji komponentów. Figma będzie głównym narzędziem projektowym dla tego "Zapytania o ofertę usługi projektowania stron internetowych", aby stworzyć zintegrowany system projektowy zgodny z naszymi wytycznymi marki i ściśle zintegrowany z naszym CMS.
3. Zakres prac
3.1 Strategia projektowania i dostarczane materiały
- Plik(i) Figma:
- Dokument główny Figma podzielony na następujące sekcje:
- Zintegrowany system projektowy,
- Bloki segmentowe,
- Bohaterowie i układy, oraz;
- Strona pełnoekranowa i szablony.
- Włączenie tokenów projektowych (kolory semantyczne, skale typograficzne, mnożniki odstępów, ...) w celu zapewnienia spójności.
- Referencje takie jak https://fluent2.microsoft.design/ oraz https://carbondesignsystem.com/ są naszymi rekomendacjami jako standard do naśladowania.
- Biblioteka komponentów:
- Repozytorium wielokrotnego użytku komponentów (przyciski, formularze, ikony, karty) z zablokowanymi elementami o wysokim wpływie (np. CTA bohaterów, główna nawigacja), aby zapobiec niezgodnościom.
- Dokumentacja i mapowanie:
- Szczegółowe wytyczne dotyczące użycia komponentów oraz dokumenty mapujące, aby zapewnić programiście front-endowemu jasną korelację między każdym komponentem Figma a odpowiadającym mu blokiem Payload CMS i komponentem Storybook.
3.2 Wymagania techniczne
- Responsywne projektowanie:
- Ramki auto-layout Figma, które wymuszają responsywne zachowanie z wstępnie ustawionymi punktami przerwania, minimalnymi/maksymalnymi szerokościami treści i proporcjami odstępów dla następujących punktów przerwania:
| Klasa rozmiaru | Zakres punktów przerwania | Punkty przerwania |
|---|
mały | 320-479 | 640px lub mniej |
średni | 480-639 | 641px do 1007px |
duży | 640-1023 | 1008px i więcej |
x-duży | 1024-1365 | 1008px i więcej |
xx-duży | 1366-1919 | 1008px i więcej |
xxx-duży | 1920 i więcej | 1008px i więcej |
- Zgodność z dostępnością (WCAG 2.1)
- Wsparcie dla trybu ciemnego/jasnego
- Spójność marki
- Łatwość integracji CMS i warsztatów front-endowych dla programistów front-endowych
- Architektura systemu projektowego:
4. Proces i współpraca
Nasze podejście kładzie nacisk na współpracę, przejrzystość i iteracyjne doskonalenie:
- Wspólne tworzenie wireframe'ów:
- Inicjowanie wspólnych sesji z właścicielami treści, projektantami i inżynierami w celu dostosowania się do kluczowych komunikatów.
- Pętle feedbackowe:
- Regularne przeglądy interesariuszy i strukturalne sesje feedbackowe, aby zapewnić zgodność z naszymi celami strategicznymi.
- Zapewnienie jakości:
- Ciągłe testowanie za pomocą Storybook w celu weryfikacji zachowania komponentów na różnych urządzeniach oraz zgodności z tokenami projektowymi.
5. Warunki i zasady
- Własność intelektualna:
- Wszystkie dostarczane materiały i związane z nimi materiały staną się własnością Nuwa po pełnej płatności.
- Poufność:
- Obie strony zgadzają się na zachowanie poufności w odniesieniu do informacji zastrzeżonych.
9. Wytyczne dotyczące składania ofert
Zainteresowani projektanci są zaproszeni do składania swoich propozycji. Propozycje mogą obejmować:
- Podsumowanie twojego zrozumienia wymagań Nuwa.
- Sporządzoną metodologię i harmonogram projektu.
- Przykłady portfolio związane z projektowaniem stron internetowych w Figma.
- Jakiekolwiek dodatkowe dokumenty, które wspierają twoje umiejętności techniczne i projektowe.
10. Aneks
Następujące zasoby są dołączone do briefu projektowego:
- Referencje projektowe, wymagania i specyfikacje
- Księga marki Nuwa oraz wytyczne (wszystkie dodatkowe zasoby zostaną udostępnione na początku projektu za pośrednictwem WeTransfer)
Dostęp do komponentów UI i bibliotek może być zapewniony:
- Hero UI, Tailwind CSS Plus, Aceternity UI oraz 21st.dev
