--- title: "Case study: Novacura – rebranding firmy tech | Sweet Lava" description: "Rebranding firmy technologicznej Novacura: korekta logo, nowa kolorystyka z niebieskim na czele, keyvisual z falą i biblioteka komponentów UI/UX." url: https://sweetlava.eu/pl/projekty/novacura/ lang: pl alternate_en: https://sweetlava.eu/en/work/novacura/ --- Technologia B2B # Novacura – rebranding i biblioteka komponentów UI Odświeżenie marki szwedzkiej firmy technologicznej. Delikatna korekta logo, zupełnie nowa kolorystyka z niebieskim w roli głównej, keyvisual z linearną falą oraz biblioteka komponentów UI/UX, wdrażana w produktach Novacura do dziś. Jerzy Koenigshaus ![Rebranding Novacura – identyfikacja i komponenty UI](https://cdn.sanity.io/images/pgdlccfz/production/db4c77dfdeead58fd5131f2b77a98d0281aa5de0-2400x1351.jpg?w=1600&q=90&auto=format) Kontekst ## Marka od wizytówki po skaner magazynowy Novacura to szwedzka firma technologiczna z Göteborga, obecna w 10 krajach i obsługująca ponad 220 klientów. Jej platforma low-code Novacura Flow rozszerza systemy ERP, takie jak IFS czy Infor M3, o aplikacje dla biura oraz hali magazynowej. Marka miała rozpoznawalne logo i własną kolorystykę, ale brakowało jej spójnych zasad. Zakres prac objął więc delikatną korektę znaku, nową kolorystykę z keyvisualem oraz bibliotekę komponentów UI/UX, która przenosi identyfikację do interfejsów produktów. ![Linearna fala: keyvisual marki Novacura](https://cdn.sanity.io/images/pgdlccfz/production/7769bde986b253f7c3b1820a25af92bc9383b1bb-4201x1647.jpg?w=2000&q=90&auto=format) Identyfikacja ## Niebieski jako nośnik marki Fala powyżej to keyvisual marki: linearny zapis przepływów informacji, które Novacura Flow prowadzi między systemem ERP a aplikacjami. Rysunek dobrze znosi skalowanie, dlatego sprawdza się zarówno na okładce prezentacji, jak i w nagłówku aplikacji. Nową kolorystykę oparliśmy na głębokim granacie oraz wyrazistym niebieskim, uzupełnionych skalą tintów. Logo poprawiliśmy ostrożnie: dopracowaliśmy formy i zachowaliśmy charakter, który klienci już znali. Dla produktu powstał osobny znak, zbudowany na tych samych zasadach. ![Logo Novacura na granatowym tle](https://cdn.sanity.io/images/pgdlccfz/production/eda24cfbd907457e14e202708428ea078f3f9b50-1601x1201.jpg?w=2000&q=90&auto=format) Logo firmy po delikatnej korekcie form. ![Paleta kolorystyczna Novacura: granat, niebieski i skala tintów](https://cdn.sanity.io/images/pgdlccfz/production/1597ffb27e65b8abe59a231319b79a9cc51ac837-1601x1201.jpg?w=2000&q=90&auto=format) Nowa paleta: granat i niebieski wraz ze skalą tintów. Design system ## Walka o każdy piksel na ekranie skanera Aplikacje Novacura działają między innymi na przemysłowych skanerach Zebra, które mają małe, słabo doświetlone ekrany. Biblioteka komponentów UI/UX musiała pogodzić język marki z ograniczeniami tego sprzętu: przełączniki, tabele, paginacja czy zakładki mieszczą komplet informacji i pozostają czytelne w świetle hali magazynowej. Kolejne wersje produktów Novacura korzystają z tej biblioteki do dziś. ![Plansze design systemu Novacura: przełączniki, tabele, paginacja i filtry](https://cdn.sanity.io/images/pgdlccfz/production/7f73661c79d1cc0071ab7b8d0cf3a632dc036693-4195x2005.jpg?w=2000&q=90&auto=format) Fragment biblioteki: przełączniki, tabele, paginacja oraz filtry. Przed i po ## Te same ekrany, nowy porządek Poniżej trzy ekrany aplikacji: po lewej wersja wcześniejsza, po prawej zaprojektowana na nowych komponentach. Układy mają mniej ozdobników, czytelniejszą hierarchię treści oraz mocniejszy kontrast, a formularze prowadzą wzrok od nagłówka do przycisku. ![Ekrany mobilne Novacura Flow przed redesignem i po nim](https://cdn.sanity.io/images/pgdlccfz/production/06ecb29d227b52f08821e80d2480f8ce40df5f23-2506x2506.png?w=2000&q=90&auto=format) Ekrany aplikacji przed wdrożeniem biblioteki i po nim. ![Ekrany aplikacji przed i po.](https://cdn.sanity.io/images/pgdlccfz/production/c3fb45919266b9bfe1c7e4cb636c85ab59fc17c6-2506x2506.png?w=2000&q=90&auto=format) Ekrany aplikacji przed i po. ![Ekrany aplikacji przed i po.](https://cdn.sanity.io/images/pgdlccfz/production/9ce788c1ff59607ad76a5bc33388c8f3660cebc4-2506x2506.png?w=2000&q=90&auto=format) Ekrany aplikacji przed i po. Rezultat ## Identyfikacja spójna z produktem Skalę zmian widać w produktach i platformach Novacura. Marketplace z aplikacjami wyglądał wcześniej jak przeciętny sklep; po redesignie sam stał się nośnikiem marki, kierowanym do konkretnego odbiorcy, czyli firm, które rozszerzają swoje systemy ERP o gotowe aplikacje. Novacura ma dziś markę, która wygląda tak samo w prezentacji handlowej, na stronie oraz w aplikacji na hali magazynowej. ![Novacura Marketplace: nowa koncepcja strony](https://cdn.sanity.io/images/pgdlccfz/production/a448ebcef1c671a4d1af2b95854049f6478e7ff7-6668x5043.jpg?w=2000&q=90&auto=format) Novacura Marketplace: nowa koncepcja strony W liczbach 1+1 korekta logo firmy i nowy znak produktu 10 krajów, w których działa Novacura 220+ klientów Novacura na świecie 1 biblioteka UI wdrażana do dziś ## Powiązane usługi - [Identyfikacja wizualna firmy i design systemy](https://sweetlava.eu/pl/uslugi/identyfikacja-design-systemy/) - [Audyt UX i projektowanie UX/UI](https://sweetlava.eu/pl/uslugi/ux-ui-ax/) ## Powiązane projekty ![Nowy sklep internetowy Hexeline – lista produktów oraz strona główna w widoku mobilnym](https://cdn.sanity.io/images/pgdlccfz/production/173b4d5d421e9f61a6c5af8fbc3364e6e9c5d40b-4340x2440.jpg?w=1600&q=90&auto=format) Moda premium ### [ Hexeline – projekt sklepu internetowego marki mody premium ](https://sweetlava.eu/pl/projekty/hexeline/) Zupełnie nowy sklep internetowy polskiej marki mody premium: od rewizji brandbooku po projekt każdego widoku, z checkoutem włącznie. Rok pracy projektowej, wdrożenie na Shopware oraz około 20% wzrostu sprzedaży online w rok. ![Logo Sinfonietty Cracovii w negatywie na czerni](https://cdn.sanity.io/images/pgdlccfz/production/13d53441677cf07f2c595ac4eb58b2838dd2718b-2400x1351.jpg?w=1600&q=90&auto=format) Kultura ### [ Sinfonietta Cracovia – nowe logo i identyfikacja orkiestry ](https://sweetlava.eu/pl/projekty/sinfonietta-cracovia/) Nowy znak Orkiestry Stołecznego Królewskiego Miasta Krakowa: batuta przecinająca krąg, księga znaku oraz identyfikacja siedziby. Od 2019 roku ten system spina ponad 50 projektów, które zrealizowaliśmy dla orkiestry. Blog ## Powiązane artykuły Branding i typografia ### [ Księga znaku – co to jest, co zawiera i ile kosztuje? ](https://sweetlava.eu/pl/blog/ksiega-znaku/) Księga znaku to instrukcja obsługi logo. Wersje znaku, pole ochronne, kolory, typografia, przykłady błędnych użyć. Wyjaśniamy, co powinna zawierać, czym różni się od brandbooka i ile kosztuje. Czytaj artykuł → Product design ### [ Czym jest design system i kiedy Twoja firma go potrzebuje ](https://sweetlava.eu/pl/blog/czym-jest-design-system/) Design system to nie „ładny zestaw w Figmie", lecz wspólne źródło prawdy dla projektantów i programistów. Wyjaśniamy, z czego się składa, ile kosztuje i kiedy się zwraca. Czytaj artykuł → Branding i typografia ### [ Identyfikacja wizualna firmy krok po kroku – od logo do design systemu ](https://sweetlava.eu/pl/blog/identyfikacja-wizualna-krok-po-kroku/) Jak powstaje profesjonalna identyfikacja wizualna. Etapy procesu, zawartość dobrego brandbooka, przykłady z realnych projektów, ceny oraz moment, w którym warto rozwinąć identyfikację w design system. Czytaj artykuł → UX/UI/AX ### [ UX vs UI – czym się różnią i dlaczego potrzebujesz obu ](https://sweetlava.eu/pl/blog/ux-vs-ui-roznice/) UX i UI bywają używane zamiennie, a opisują dwie różne warstwy produktu. Wyjaśniamy różnicę na przykładach i pokazujemy, co się dzieje, gdy zabraknie jednej z nich. Czytaj artykuł → ## Powiązane pojęcia - [Design system](https://sweetlava.eu/pl/slownik/design-system/) - [Design tokens](https://sweetlava.eu/pl/slownik/design-tokens/) - [Rebranding](https://sweetlava.eu/pl/slownik/rebranding/) - [UI kit](https://sweetlava.eu/pl/slownik/ui-kit/) ## Masz pomysł? Porozmawiajmy. Opowiedz nam o swoim pomyśle, a my doradzimy najlepszą drogę od koncepcji do działającego produktu. [ Napisz do nas ](https://sweetlava.eu/pl/kontakt/)