Ana sayfa
5.209 pxakıyorŞirketin kendi filmiyle açılıyor; altında ürün dünyaları, online satış vitrini, otuzuncu yıl bandı, şube haritası ve iletişim.
Mehmet Ceylan YapıYapı malzemeleri · İzmir · 1996'dan beri
Showroom, katalog ve satış tek sitede
Mehmet Ceylan Yapı'nın kurumsal sitesini, ürün kataloğunu, online satış akışını ve blogunu tek bir yapıda topladık. On sayfa, tek kod tabanı, tek yönetim.
Seramik, doğal taş, banyo ve mutfak. Konak'ta 3.000 m² amiral showroom, Bornova, Karşıyaka ve Kuşadası'nda şubeler, Kemalpaşa'da 50.000 m² lojistik üssü.
01 · Sorun ve çözüm
Projeye başlarken
- 01
Ürün çeşidi fazla, yol gösteren yok
Seramik, doğal taş, banyo, mutfak, boya, aksesuar. Ziyaretçi ne aradığını biliyor ama nereden başlayacağını bilmiyordu.
- 02
Kurumsal ağırlık siteye yansımıyordu
1996'dan beri çalışan, dört lokasyonu ve yetkili bayilikleri olan bir firma. Bunların hiçbiri eski sitede görünmüyordu.
- 03
Dört lokasyon, belirsiz adres
Konak, Bornova, Karşıyaka ve Kuşadası. Müşteri hangi şubeye gideceğini, hangisinde ne olduğunu siteden göremiyordu.
- 04
Online satış kanalı yoktu
Bütün satış mağazaya bağlıydı. Fiyatı ve stoğu belli ürünler için internetten sipariş alınamıyordu.
Ne yaptık
Showroom'a gelmeden önce gezilebilen bir site.
On sayfa, üç iş. Tanıtım: açılışta şirketin kendi filmi, otuz yıllık geçmiş bir zaman çizelgesinde, yetkili bayilikler marka duvarında. Yönlendirme: altı ürün dünyası, dört şube tek haritada, konu bazlı iletişim formu. Satış: fiyatı ve stoğu belli ürünler için liste, detay ve sepet akışı. Üçü de aynı bileşen setini ve aynı ızgarayı kullanıyor.
Online satış vitrini: stok durumu, marka, ölçü ve metrekare fiyatı kartın üstünde. Ziyaretçi mağazaya gelmeden fiyatı görüyor, gelmek isterse hangi şubede olduğunu da.
02 · Teslim edilen
Sayfaların tamamı, baştan sona
Tek bir ekran görüntüsü ana sayfanın onda birini bile göstermiyor; bu pencerelerde sayfaların tamamı var. İlk pencere kendi kendine akar, geniş sayfalar siz kaydırdıkça ilerler, küçük pencereler üzerine gelince akar.
Hakkımızda
3.570 pxFirmanın otuz yılı, kaydırdıkça ilerleyen bir zaman çizelgesinde. Dar ekranda dikey listeye dönüşüyor.
Online satış
1.328 pxakıyorSatışa açık ürünlerin tamamı, kategoriye göre filtrelenebilir hâlde.
Ürün detayı
1.910 pxÜrün fotoğrafları, teknik bilgileri, metrekare seçimi ve anlık toplam tutar.
Markalar
2.580 pxakıyorYetkili bayilikler ve altı ürün dünyası; menüden ürün aramaları buraya iniyor.
Yapı Rehberi · yazı
3.001 pxUzun yazılar için okuma şablonu: ilerleme çubuğu, içindekiler ve paylaşım butonları.
İş ortaklarımız
2.857 pxakıyorÇalışılan markaların listesi; üzerine gelindiğinde solda o markanın görseli açılıyor.
Kariyer
2.392 pxAçık pozisyonlar ve CV yüklemeli başvuru formu.
Yapı Rehberi · liste
2.044 pxakıyorYapı Rehberi yazılarının listesi, kategoriye göre filtrelenebilir.
İletişim
1.962 pxİletişim formu, konuya göre yönlendirme, şube haritası ve sık sorulan sorular.
03 · Izgara
Sayfayı on iki eşit parçaya böldük
Sitedeki her bölüm aynı düzene oturuyor: içerik alanı on iki eşit parçaya bölünmüş ve aralarında sabit boşluk var. Ürün kartı bu parçalardan üçünü kaplıyor. Yeni bir bölüm eklenirken "ne kadar geniş olsun" diye tartışılmıyor, kaç parça kaplayacağı seçiliyor.
- İçerik alanı
- 1.280 px
- Sütun
- 12 eşit parça
- Sütun arası
- 20 px
- Ürün kartı
- 3 sütun · 305 px
3/12305 px3/12305 px3/12305 px3/12305 px
1440 px ekran · 1280 px içerik alanı12 sütun · 4 kart
04 · Renk
Bir vurgu rengi, dört nötr
Marka kırmızısı logodan alındı ve sitenin tek vurgu rengi olarak kaldı: butonlar, rozetler, aktif durumlar ve başlıklardaki vurgulu kelime. Geri kalan dört ton nötr — okunurluğu ve yüzey ayrımını taşıyorlar, dikkat çekmeye çalışmıyorlar.
01 · Vurgu · birincilMarka kırmızısı#ea1d26
02 · YazıMürekkep#1c1612
03 · ZeminKâğıt#faf8f6
04 · İkinci yüzeyKum#efe9e3
05 · İkincil yazıTaş grisi#8a807a
Kırmızının kullanıldığı yerler baştan sınırlandı; on sayfa boyunca yeni bir vurgu rengine ihtiyaç duyulmadı.
05 · Tipografi
Tek yazı ailesi, dört kademe
Aşağıdakiler teslim edilen sayfalardan alındı, yeniden dizilmedi. Başlık, giriş, gövde ve mono etiket — dört kademe bütün siteyi taşıyor. Kademeler arasındaki fark punto kadar ağırlıktan da geliyor.
Bölüm başlığı587 × 114 px
Giriş paragrafı587 × 148 px
Ürün başlığı562 × 49 px
Gövde metni703 × 203 px
Marka satırı562 × 17 px
Filtre çipi87 × 40 px
Yeni bir sayfa açıldığında yazı boyu seçilmiyor, var olan kademelerden biri kullanılıyor.
06 · Bileşenler
Tekrar eden parçalar
Sitenin her yerinde aynı bileşen seti çalışıyor. Bir ürün kartı ana sayfada, satış listesinde ve ilgili ürünler şeridinde aynı bileşendir; içeriği değişir, yapısı değişmez.
Kart ailesi
Ürün, yazı ve lokasyon kartları tek bir yapıdan türüyor. Panele yeni ürün ya da yazı girildiğinde sayfa kendini diziyor; kimse tasarımcıya sormak zorunda kalmıyor.
Bir ürünü bir kez girin, üç yerde çıksın
Ana sayfa vitrini, satış listesi ve ilgili ürünler şeridi aynı kaydı okuyor. Fiyat değişince üçü birden değişiyor.
Buton ailesi
Sitedeki her çağrı bu iki biçimden biri. Yeni bir sayfada buton tasarlanmıyor, var olandan seçiliyor.
Sipariş satırı
Metrekare girildikçe toplam anında güncelleniyor. Müşteri sipariş vermeden önce ne ödeyeceğini görüyor.
Yetkili bayilik duvarı
On iki yetkili bayilik tek ızgarada. Sitenin en çok bakılan bölümlerinden biri, çünkü müşteri güveni buradan tartıyor.
Şube haritası
Dört şube tek kadrajda, her birinin adresi ve çalışma saatiyle. Yol tarifi tek dokunuş.
07 · Teslim
Teslim edilenler
01
On sayfa, tek kod tabanı: kurumsal site, ürün kataloğu, online satış akışı, blog ve kariyer
- 02Her sayfanın kendi stil ve davranış kapsamı var; birinde yapılan değişiklik diğerini bozmuyor
- 03Tanıtım filmi siteye uygun boyuta indirildi; açılışta sessiz, izlemek isteyene sesli sürümü ayrı açılıyor
- 04Ürün kartı üç sayfada tek bileşen: fiyat bir kez güncellenince üçünde birden değişiyor
- 05Hareketi azaltılmış cihazlarda bütün animasyonların sabit karşılığı hazır
- 06Dört şube tek haritada; her birinin adresi, çalışma saati ve yol tarifi bağlı
- 07İletişim ve iş başvurusu formları, CV yüklemesi dahil çalışır hâlde
Showroom'a gelen müşteri artık ne istediğini bilerek geliyor. Site bizim yerimize ön görüşmeyi yapıyor.
Bu siteyi biz kurduk.
Tasarım, geliştirme ve yayına alma tek ekipte. Projenizi konuşalım, ilk değerlendirme ücretsiz.