Beerc Bar - Case Study | Web Design & Branding

1. Estetika: Industrial Glow 1. Aesthetics: Industrial Glow 1. Ästhetik: Industrial Glow

Cilj je bio prenijeti noćnu, toplu atmosferu bara na ekran. Koristili smo duboke crne tonove s jakim kontrastom zlatne boje koja simbolizira pivo i svjetlost. The goal was to transfer the night, warm atmosphere of the bar to the screen. We used deep black tones with a strong contrast of gold symbolizing beer and light. Ziel war es, die nächtliche, warme Atmosphäre der Bar auf den Bildschirm zu übertragen. Wir verwendeten tiefe Schwarztöne mit einem starken Kontrast von Gold, das Bier und Licht symbolisiert.

Paleta Boja Color Palette Farbpalette

Beerc Gold

#F4C025 • Pivo, Svjetlost, Akcija #F4C025 • Beer, Light, Action #F4C025 • Bier, Licht, Aktion

Industrial Dark

#1A1A1A • Dubina, Atmosfera #1A1A1A • Depth, Atmosphere #1A1A1A • Tiefe, Atmosphäre

Off-White

#F8F8F5 • Čitljivost, Kontrast #F8F8F5 • Readability, Contrast #F8F8F5 • Lesbarkeit, Kontrast

Tipografija Typography Typografie

Display Font

Boska

Elegantan, ali oštar. Savršen za naslove koji trebaju karakter. Elegant yet sharp. Perfect for headlines that need character. Elegant und doch scharf. Perfekt für Überschriften, die Charakter brauchen.

Body Font

Plus Jakarta

Moderan i geometrijski. Osigurava čitljivost menija i informacija. Modern and geometric. Ensures readability of menus and information. Modern und geometrisch. Gewährleistet die Lesbarkeit von Menüs und Informationen.

2. Tech Stack & Performanse 2. Tech Stack & Performance 2. Tech Stack & Leistung

// Menu Item Component
const BeerItem = ({ name, abv, price }) => {
  return (
    <div className="flex justify-between border-b border-white/10 py-2">
      <h3 className="font-serif text-xl">{name}</h3>
      <span className="text-beerc_gold">{price} €</span>
    </div>
  );
}

Brzina i Animacije Speed and Animations Geschwindigkeit und Animationen

Glatke tranzicije bez utjecaja na performanse. Stranica se učitava trenutno, čak i na mobilnim mrežama. Smooth transitions without impacting performance. The page loads instantly, even on mobile networks. Reibungslose Übergänge ohne Beeinträchtigung der Leistung. Die Seite lädt sofort, auch in Mobilfunknetzen.
Mobile First Mobile First Mobile First

Dizajnirano primarno za mobitele, jer gosti često provjeravaju ponudu u pokretu. Designed primarily for mobile phones, as guests often check the offer on the go. Primär für Mobiltelefone konzipiert, da Gäste das Angebot oft unterwegs prüfen.