Branding

Serloading’in kimliği.

Her büyüme bir yükleme ekranıyla başlar. Logomuz bu fikirden doğdu: kıvrılan bir S ve altında ilerleyen bir çubuk.

Logo

Serloading logo

Ana logomuz: yumuşak, yuvarlak bir S, altında ilerleyen bir çubuk ve etrafında hizmet alanlarını gösteren etiketler (SEO, Code, Meta Ads, E-posta). Ad ile görsel aynı şeyi söylüyor: iş sürekli yükleniyor, büyüyor. Header, favicon gibi küçük alanlarda yalnızca S ve “serloading” yazısı kullanılır.

  • 01S harfiTek kalınlıkta, yuvarlak uçlu çizgi. Dostça ama net.
  • 02İlerleme çubuğuDolu kısım ilerlemeyi, açık kısım potansiyeli gösterir.
  • 03Sarı topSlider topu. Sitede kaydırdıkça gerçekten ilerler.
  • 04EtiketlerHizmet alanlarını gösteren çipler. Çalıştığımız her alan logonun parçası.

Renkler

İki ana renk ve bir nötr. Mint güven ve tazelik verir, sarı enerjiyi ekler. Koyu zemin yerine açık, ferah yüzeyler kullanıyoruz.

  • Mint#12B5A6Ana renk, vurgular
  • Mint koyu#0A786EMetin ve bağlantılar (kontrast)
  • Nane açık#CDF3ECYüzeyler, çubuk izi
  • Güneş#FFC145Eylem butonları, top
  • Mürekkep#0F2E2CAna metin
  • Zemin#F3FBF8Sayfa arka planı

Tipografi

Başlıklarda karakterli ve yumuşak hatlı bir grotesk, gövde metinde okunaklı bir sans. Her ikisi de siteden barındırılır, dış istek yoktur.

Bricolage Grotesque

Büyüme yükleniyor.

Figtree

ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZ abcçdefgğhıijklmnoöprsştuüvyz 0123456789

Bu siteyi nasıl yaptık?

Site, tek sayfada her şeyi söyleyen bir vitrin değil, ölçülebilir bir ürün olarak kuruldu. Yaparken dikkat ettiğimiz şeyler:

  • Hız

    Statik üretim (Astro), sıfır dış font isteği, yalnızca gerekli JavaScript. Hedef: LCP < 2,5 sn, CLS ≈ 0.

  • SEO

    Temiz URL’ler, TR/EN için ayrı yollar (/ ve /en/), hreflang, kanonik adresler, sitemap ve yapılandırılmış veri (Organization, Person, FAQ).

  • GEO ve AEO

    Net, alıntılanabilir cevap blokları, FAQ şeması, llms.txt ve yapay zekâ botlarına açık robots.txt.

  • Erişilebilirlik

    Klavyeyle tam gezinme, görünür odak halkası, WCAG AA kontrast, anlamlı HTML ve içeriğe geç bağlantısı.

  • Hareket

    Hareket süs değil anlatımdır. Aşağıdaki kurallara göre tasarlandı.

  • Dürüstlük

    Uydurma rakam, sahte referans ve yapay "güven rozeti" yok. Sadece gerçek olan yazılır.

Hareket kurallarımız

Sayfa bir yükleme çubuğuyla anlatılır: kaydırdıkça çubuk dolar, her bölüm bir adım ilerletir.

  1. Her şey kaymaz. Sadece anlam taşıyan öğeler hareket eder.
  2. Üç farklı hız ve eğri kullanılır, tek tip geçiş yoktur.
  3. Sadece transform ve opacity animasyonlanır (60 fps).
  4. "Hareketi azalt" ayarı açıksa tüm animasyonlar kapanır, içerik olduğu gibi görünür.

Kullanım

Yapın

  • Logoyu açık, sakin bir zeminde kullanın.
  • Etrafında en az S harfinin yarısı kadar boşluk bırakın.
  • Küçük boyutta yalnızca S sembolünü kullanın.

Yapmayın

  • Logoyu esnetmeyin ya da döndürmeyin.
  • Renkleri değiştirmeyin.
  • Kalabalık fotoğrafların üstüne koymayın.

Hadi %100’e taşıyalım.

Hedefinizi kısaca yazın, 1 iş günü içinde dönüş yapalım.

Teklif al WhatsApp ile yaz

Teklif al

Projenizi anlatın.

Birkaç satırla hedefinizi yazın, 1 iş günü içinde size dönelim.