Przykładowy Bento Grid w Figmie - gotowy do pobrania
Przygotowałem dla Ciebie przykładowy szablon Bento Grid w Figmie, który możesz wykorzystać jako punkt wyjścia do swoich projektów.
Podgląd w Figma:
Bento Grid Tutorial - Jak stworzyć efektowny layout w stylu japońskim
Bento Boxy to japońskie lunche, które są starannie układane - równiutko i cacy. W ten sam sposób podchodzimy do layoutu typu bento box. Poznaj moje sprawdzone sposoby na tworzenie efektownych układów, które przyciągają wzrok i organizują treść w sposób, który pokochasz.
1. Stwórz grid
Bez młota to nie robota - tworzysz grid.Ja lubię siatkę 30 x 30 px albo 45 x 45 px. Fajnie pasuje do slajdów HD (1920 x 1080 px). Jak już masz siatkę, to uzupełniasz trzymając się grida.
2. Wstaw w grida jeden duży kafelek
Najlepiej najpierw umieścić 1 wielki kafelek, a wokół niego mniejsze kafelki. Możesz spróbować użyć ciągu Fibonacciego, ale czasami nie pasuje. Ja robię na oko.
3. Układaj kafelki żeby oko się cieszyło
Jeżeli szukasz bardziej geometrycznego efektu, możesz układać kafelki tak, żeby były na przelot. Ja jednak wolę jak trafia się na rozdroża w przerwach pomiędzy kafelkami, wtedy można nakierować oko na następny kafelek.
4. Wypełnij tylko 40% kafelków obrazami
Możesz dodać obrazek do każdego okienka (gdy tworzysz galerię), ale jak robisz infografikę z tekstami to lepiej zostawić niektóre kafelki na samą ikonkę lub na tekst. Ja stosuję zasadę ok. 40% obrazów a reszta kafelków to typografia i ikonografia.
Czym właściwie jest layout Bento Box?
Bento Box to inspirowany japońską sztuką pakowania posiłków sposób na organizację treści wizualnych. Charakteryzuje się modułową strukturą, gdzie różnej wielkości "kafelki" tworzą harmonijną całość. Ten styl layoutu stał się niezwykle popularny w projektowaniu stron internetowych, aplikacji i mediach społecznościowych ze względu na swoją estetykę i funkcjonalność.