Dostępny na nowe projekty
Akcja
Jedno działanie prowadzi. Drugie wspiera.
// system BartoszRobi.pro
System tej strony. Standard mojej pracy.
To brandbook i design system BartoszRobi.pro. Pokazuje, jak marka, interfejs i język tworzą jedną całość. W podobnej formie porządkuję i przekazuję klientom ich marki oraz produkty - tak, żeby zespół wiedział, jak je rozwijać.
// idea marki
Projekt nie kończy się na plikach
Ta strona jest przykładem mojego sposobu pracy: najpierw charakter marki, potem zasady i komponenty, na końcu spójne wdrożenie.
Klient dostaje nie tylko efekt. Dostaje opis produktu, role elementów i punkt odniesienia dla osób, które będą rozwijać go dalej.
Handoff
What the client gets
(not only files)
(not only files)
Marka i produkt powinny mieć instrukcję dalszego życia. Co jest stałe. Co można zmieniać. Jak podejmować kolejne decyzje bez zaczynania od zera.
Brandbook, design system i opis produktu spotykają się w jednym miejscu. Krótko, wizualnie i na tyle konkretnie, żeby korzystał z tego marketing, design i development.
01
zasady marki, nie tylko logo
02
komponenty gotowe do rozwoju
03
opis produktu i decyzji
04
jeden punkt odniesienia dla zespołu
// tokeny
Kolory
Paleta ma role. Każdy kolor wie, co robi.
Ink#0D1512
Background#F3F6F4
Green#0C7951
Green Hi#12A069
Focus#E8630A
Dark BG#070C0A
// typografia
Każdy krój ma swoją rolę
Bartosz zrobi
Archivo buduje charakter. Inter prowadzi treść. JetBrains Mono opisuje system. Dobór nie jest dekoracją - daje zespołowi prostą zasadę użycia.
// JetBrains Mono opisuje system, eventy, etykiety i techniczne dopiski
// komponenty
Elementy gotowe do rozwoju
Każdy komponent ma rolę, warianty i przykład użycia. Dzięki temu produkt zachowuje spójność, nawet gdy pojawiają się kolejne ekrany i osoby w zespole.
Karta projektu
Kontekst. Efekt. Następny krok.
// kontrast
Zmiana rytmu
Kontrast oddziela ważny moment produktu.
// język
Jak marka mówi
Tak: Robię projekty stron, identyfikacje, wdrożenia i grafiki, które da się realnie wykorzystać.
Nie: Tworzę kompleksowe doświadczenia digitalowe napędzane strategią 360.
Tak: Byłem wrzucany na głęboką wodę i dowoziłem.
Nie: Z pasją realizuję wyzwania w dynamicznym środowisku.
// zasady
Zasady przekazania
01Każdy element ma nazwę, rolę i przykład użycia.
02Decyzje wizualne wynikają z charakteru marki.
03Komponenty opisują też zachowanie, nie tylko wygląd.
04Język produktu ma konkretne przykłady: tak i nie.
05Dokumentacja ma być czytelna dla designu, marketingu i developmentu.
06System ma ułatwiać kolejną decyzję, nie zamykać produktu w sztywnych ramach.
// materiały
Grafiki gotowe do użycia
Każdy format ma określone proporcje, minimalny wymiar i bezpieczny obszar. Dzięki temu zespół może przygotować nowe materiały bez zgadywania i bez przypadkowego kadrowania najważniejszych elementów.
Znak marki
Przezroczyste tło i pole ochronne wokół znaku.
Herb lub logo partnera
Znak wyśrodkowany, bez białego prostokąta w tle.
Zdjęcie portretowe
Twarz w górnej połowie i zapas dla responsywnego kadrowania.
Miniatura realizacji
Najważniejszy element w centralnych 80% obrazu.
Plansza prezentacyjna
Tło może być przycinane, treść pozostaje w bezpiecznym centrum.
Case study - hero
Mockup wyśrodkowany, bez tekstu przy krawędziach.
Artykuł / aktualność
Tytuł i kluczowy motyw nie mogą opierać się o brzegi.
Social sharing
Logo i tekst w centralnym obszarze 1080 × 530 px.
01Zdjęcia i wizualizacje eksportujemy w przestrzeni kolorów sRGB.
02SVG stosujemy dla znaków i ikon, WebP dla zdjęć i dużych plansz.
03Ważna treść pozostaje w centralnych 70-80% grafiki.
04Nie dodajemy białego tła do logotypów, jeśli nie jest częścią znaku.
05Pliki na stronę kompresujemy: logo do 150 KB, zdjęcia do 400 KB, plansze do 800 KB.
06Nazwy plików opisują projekt i zastosowanie, np. marka-realizacja-home.webp.