Foodnoms
Słoneczny rynek owoców na białej porcelanie – ciepłe pomarańcze, świeża zieleń i pełne, zaokrąglone kształty
Foodnoms wykorzystuje lekki język marketingowy do śledzenia odżywiania: czyste, białe płótno, duże makiety telefonów jako wizualne punkty zaczepienia oraz zabawny zestaw kolorów, gdzie kolory reprezentują składniki odżywcze i postęp. Dwukolorowy nagłówek (jeden kolor dla słowa kluczowego, ciemny grafit dla reszty) pozwala na szybką ocenę propozycji wartości. System opiera się na pojedynczym wyświetlaczu użytkownika (Aquawax Pro) o wyraźnie zaokrąglonych kształtach geometrycznych, które łagodzą wrażenie, jakie dają ekrany aplikacji wypełnione danymi. Większość powierzchni jest płaska i pozbawiona cieni; jednolity promień narożników nadaje przyciskom, kartom i etykietom przyjazny, miękki charakter, dzięki czemu śledzenie zdrowia wydaje się bardziej przystępne niż kliniczne.
Strona ma układ jednokolumnowy, wyśrodkowany, o pełnej szerokości (~1200 px) i bogatym rytmie pionowym. Nagłówek to cienki górny pasek z logo po lewej stronie, wyśrodkowaną nawigacją i wypełnionym pomarańczowym przyciskiem akcji po prawej stronie. Sekcja główna to wyśrodkowany stos: dwukolorowy tytuł, jednowierszowy podnagłówek, ikona App Store, a następnie rząd 3-5 makiet telefonów rozłożonych wachlarzowato na całej szerokości. Poniżej sekcji głównej znajduje się wyśrodkowana sekcja z logo prasowym „Zalecane” w siatce 2x3. Sekcje główne podążają za powtarzającym się schematem: dwukolumnowy tekst + makieta telefonu, naprzemiennie po bokach, z nagłówkami sekcji akcentowych w kolorze pomarańczowym/zielonym. Ostatnim elementem przed stopką jest karta CTA do pobrania o pełnej szerokości. Prześwity między sekcjami są szerokie (96 px), tworząc wrażenie przestronności i galerii. Nawigacja to minimalistyczny górny pasek – bez paska bocznego i dużego menu.
W wizualnym języku aplikacji dominują wysokiej jakości makiety ramek iPhone'a, prezentujące interfejs użytkownika – są to główne elementy, a nie zdjęcia stockowe. Makiety są wyświetlane z niemal całkowitą przezroczystością, rozłożone wachlarzowo z lekkim nachodzeniem na siebie i płynnym obrotem, umieszczone bezpośrednio na białym tle. W makietach komponent wizualny zapewnia własny interfejs aplikacji: informacje żywieniowe, zdjęcia produktów, pierścienie makro i kolorowe tagi kategorii. Jedyną zawartością fotograficzną są zdjęcia żywności przesłane przez użytkowników, widoczne na ekranie aparatu aplikacji Scan Your Food. Nie ma zdjęć lifestylowych, abstrakcyjnych ilustracji ani grafik dekoracyjnych. Branding jest w całości definiowany przez niestandardową czcionkę, pomarańczowo-zielono-ciemną kolorystykę i własny interfejs aplikacji.
Paleta
Marka
- Ember Orange
#ff5406— Pomarańczowy jest używany jako drugorzędny akcent w przypadku detali dekoracyjnych i do podkreślania nieregularnych sygnałów. Nie powinien być używany jako kolor podstawowy w wezwaniach do działania.
Neutralny
- Graphite
#2f2f2f— Tekst główny, ciemne przyciski (ikona App Store) i kontury ikon. Dominujący kolor inny niż biały w nagłówkach i tekście głównym. - Verdant Green
#00b33f— Kolor zielony służy jako dodatkowy akcent dekoracyjny i podkreśla niskie częstotliwości. - Signal Red-Orange
#ff3400— Ciepły akcent drugorzędny, widoczny w elementach interfejsu użytkownika aplikacji i powiązanym brandingu. O jeden ton cieplejszy niż Ember Orange, podkreśla wybrane lub aktywne stany aplikacji. - Sky Blue
#00a9dd— Przyjemny kontrast dla wewnętrznych kategorii danych aplikacji (węglowodany/białka/inne grupy składników odżywczych). Równoważy ciepłą, dominującą paletę kolorów w układach telefonu. - Mist Blue
#72a2c5— Stonowany, chłodny akcent – Zmiękcza błękitny kolor dodatkowych etykiet danych i tła wykresów w aplikacji. - Sunset Orange
#ff6d00— Ciepły akcent w nagłówkach drugorzędnych i wyróżnionym tekście na stronach marketingowych.
Typografia
od 12 do 60px · 7 kroków
- Aquawax Pro Medium — wymiana: Inter · wytyczne 500 · Aquawax Pro Medium – znaleziono w wyodrębnionych danych, ale nie został opisany przez sztuczną inteligencję.
- Aquawax Pro — wymiana: Nunito Sans · wytyczne 700, 500, 600 · Podstawowy krój czcionki marki używany we wszystkich kontekstach, w tym w nagłówkach i treści. Ten zaprojektowany na zamówienie krój charakteryzuje się dużą wysokością liter, zaokrąglonymi geometrycznymi kształtami i wygodnymi proporcjami. Czcionka Bold (700) jest używana w nagłówkach i sekcjach – typograficznych punktach odniesienia systemu. Czcionka Semibold (600) jest używana w podtytułach i etykietach przycisków o wysokości 14–1,8 mm. Czcionka Medium (500) jest używana w treści o wysokości 17–1,8 mm, z odstępem między wierszami 1,6–1,8 mm zapewniającym komfort czytania.
- System sans-serif — wymiana: Inter · wytyczne 400, 700 · Opcja zapasowa jest używana w przypadku bardzo małego tekstu i tekstu ikon w interfejsie użytkownika. Aquawax Pro nie jest używany w rozmiarach mikro; czcionka systemowa obsługuje je, aby zmniejszyć wagę renderowania.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przestronny |
| Podstawowy krok | 20px |
| Promień przycisku | 26px |
| Promień karty | 26px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 96px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Foodnoms i wypełni ją
- Uzupełnij produktami i postami za pomocą linku - Instagram, TikTok, Facebook.
- Przenieś zawartość ze starej witryny — wystarczy podać adres.
- Nowoczesny design na najlepszym silniku: React ( Next.js) z renderowaniem serwerowym i optymalizacją SEO od razu po wyjęciu z pudełka.
- W pełni zautomatyzowana optymalizacja SEO dla wyników wyszukiwania i rekomendacje sieci neuronowych.
Podobne style
- Slite — Ciepły, pergaminowy notatnik z terakotową rączką — każda powierzchnia jest z kremowego papieru, a każdy akcent to subtelny akcent pomarańczowy.
- Adora — Muzeum Impresjonizmu za matowym szkłem
- Bento — Lunchbox bento na rozświetlonym słońcem linoleum. Siatka zaokrąglonych, przypominających naklejki kartek w kolorze limonkowym, lawendowym, kobaltowym i bordowym, każda obrysowana grubą czarną kreską, leży na ciepłym, kremowym lnie pod wyrazistym, geometrycznym tytułem.
- Payments — Żywy, cytrusowy odcień na tle królewskiego fioletu. Głęboki, elektryzujący fiolet przywodzi na myśl nocne niebo, a cytrynowożółte akcenty lśnią niczym świeża skórka cytrusów na czystej, białej powierzchni.
- Textla — Słoneczny Retro Botanical Almanac – kremowożółta strona wydrukowana w ciemnozielonym kolorze z ilustracjami kaktusów przedstawionymi w ostrych, przesuniętych cieniach
- AI for Business — Brutalny showroom redakcyjny w ciepłych odcieniach szarości
- Superhuman — panel redakcyjny złotej godziny
- Visitors — biały rysunek techniczny
- Vercel — Terminal wydrukowany na białym papierze
- Jeton — Artykuł redakcyjny o fintechu na ciepłym marmurze
- Say Briefly — Szkicownik agencji kreatywnej na kremowym papierze
- ClickUp — Potężny pulpit nawigacyjny na białym marmurze. Strona jest broszurą produktową narzędzia do zwiększania produktywności, więc język wizualny został zapożyczony z samego produktu: gęste listy, wskaźniki statusu, grupy awatarów i wyraziste oznaczenia typograficzne, które wyglądają jak specyfikacja produktu na wyświetlaczu.