D demircode
Müşteri Sunumu · 2026 · Cetaform

İki tasarım yaklaşımı,
aynı brand kimliği.

Cetaform — Türkiye'nin lider profesyonel el aletleri üreticisi — için iki farklı tasarım dili geliştirdik. Her iki yaklaşım da aynı içerik mimarisini, aynı brand renklerini ve aynı kullanıcı akışını paylaşıyor. Ayrılan tek şey: duygusal ton ve görsel ritim.

Tasarım Sayısı
02
Sayfa Toplamı
08
Ürün Mimarisi
15
Ortak Brand
01
§ Ortak Zemin

Her iki tasarımda korunan.

Tasarım 01 ve Tasarım 02 farklı bir görsel dil sunsa da, brand omurgası ve kullanıcı deneyimi mimarisi birebir paylaşılır.

Ortak · 01

Brand Kimliği

Cetaform red (#FF0000), gold accent, antrasit, paper renkleri. 47 yıllık miras, 4.000+ ürün, 70+ ülkeye ihracat.

Ortak · 02

İçerik Mimarisi

4 sayfa: Anasayfa, Ürünler kategori liste, Ürün detay, Ürün liste (faceted filter). Aynı 15 ana kategori, aynı kullanıcı akışı.

Ortak · 03

Mega Menü

4 ana grup: Ürünler, Destek, Haberler, Kurumsal. Hover/click açılma, sticky nav scroll morph, mobile accordion drawer.

Ortak · 04

Logo Plate

Kırmızı kare billboard logo, nav'dan dışarı sarkan. Hero üzerinde "stamp" gibi durur, sticky beyaz nav'da da görünür kalır.

Tasarım 01 / Cinematic Premium

Cinematic, koyu ve otoriter.

Profesyonel atölye duygusunu sinematik hero ile açan; brand'i otorite ve miras olarak konumlandıran yaklaşım. Victorinox'un cinematic anlatımı + Stahlwille'nin premium endüstriyel kimliğinden esinlenildi.

Ziyaretçi siteye girdiği an "burası ciddi bir üretici" hissini almalı. Hero karanlık ve atmosferiktir; tipografi posterden çıkmış gibidir; renkler antrasit ile kırmızının kontrastında konuşur.

Atmosfer
Cinematic koyu
Hero
3 sahne otomatik geçiş
Display Font
Anton (poster)
Body Font
Titillium + Open Sans
Renk Dominantı
Antrasit + Red
Esin
Victorinox · Stahlwille
↑ Tasarım 01 · Cinematic ↓ Tasarım 02 · Editorial
Tasarım 02 / Editorial Catalogue

Light, editorial ve hassasiyet odaklı.

Aydınlık, katalog disiplinli yaklaşım. Her ürün bir spec sheet gibi sunulur. Stahlwille'nin editorial katalog estetiği + Beta tools'un grafik disiplininden esinlenildi.

Ziyaretçi sayfayı bir basılı katalog sayfası gibi okur. Mono REF kodlar, tabular sayılar ve blueprint grid arka planı; brand'i "ölçülebilir hassasiyet" olarak konumlandırır. Profesyonel müşterinin teknik bilgi aradığı durumlarda en güçlüsüdür.

Atmosfer
Light editorial
Hero
5 ürün showcase slider
Display Font
Titillium Web 900
Mono Accent
IBM Plex Mono
Renk Dominantı
Paper + Red
Esin
Stahlwille · Beta Tools
§ Karşılaştırma · Yan Yana

Hangi tasarım, hangi duyguyu taşır?

Boyut Tasarım 01 · Cinematic Tasarım 02 · Editorial
AtmosferCinematic koyu, atmosferik atölyeLight editorial, katalog spread
Hero3 sahne otomatik geçiş, Ken Burns5 ürün showcase slider, blueprint grid
BG DominantıAntrasit (#383E42), siyah gradient overlayPaper (#FAFAF7), beyaz, ince hairline
Display TipografiAnton (poster-condensed)Titillium Web 900 + IBM Plex Mono accent
Vurgu ÖğeleriSinematik fotoğraf, gradient, grainMono REF kod, blueprint grid, datasheet kart
Esin MarkalarıVictorinox · Stahlwille premiumStahlwille editorial · Beta tools
HissiPremium, otorite, mirasHassasiyet, mühendislik, disiplin
En Güçlü YönHero etki, brand premium algısıÜrün detay, teknik bilgi sunumu

Her iki tasarım, aynı brand renkleri ve aynı içerik mimarisini paylaşır. Fark sadece görsel dilde ve duygusal tonda.

§ Karar Rehberi

Hangisini seçmeli?

Eğer önceliğiniz

Brand otoritesi ve premium algı

İlk ziyarette güçlü duygusal etki, miras anlatımı, sinematik atmosfer önemliyse — Tasarım 01 öne çıkar.

→ Tasarım 01'e dön
Eğer önceliğiniz

Ürün ve teknik bilgi sunumu

Profesyonel müşterinin spec/datasheet aradığı; hızlı bilgi akışı ve katalog disiplini önemliyse — Tasarım 02 öne çıkar.

→ Tasarım 02'ye dön
Eğer kararsızsanız

Yan yana açın, hisse güvenin

İki sekmede her iki anasayfayı yan yana açın. Hangisi sahanızdaki müşteriye konuşur — sizinki odur.

§ Hazırlayan · Demircode

Bu sunum,
Demircode tarafından
hazırlandı.

Demircode, profesyonel markalar için modern web deneyimleri tasarlayan ve geliştiren bir yazılım stüdyosudur. Uçtan uca brand kimliği, UI/UX tasarımı ve özel yazılım çözümleri sunuyoruz.

Cetaform için hazırlanan iki tasarım yaklaşımı; sektörel araştırma, brand analizi ve kullanıcı senaryolarına göre özel olarak geliştirildi.

İletişim demircode.com
Sunum
Cetaform · 2026
Sayfa Sayısı
8 (4 × 2 tasarım)
Stack
Static HTML · Tailwind
Demircode Web →
© 2026 Demircode · Tüm hakları saklıdır.
Cetaform için Demircode tarafından hazırlandı.