mfurkanayhan// çözüm atölyesi

Web Siteleri

Hangi tarzı istersen.

Site “yapmak” tek bir şey değil. Aşağıdaki 37 tarzın her biri farklı bir iş yapıyor — ve her biri gerçekten açılan bir demo, ekran görüntüsü değil.

En çok emek verilenler

Bu 11 demo diğerlerinden ayrı bir seviyede: gerçek üç boyut, kaydırmaya bağlı anlatım ve hesaplanan içerik. Önce bunlara bak.

İçine inilen kesit, üretilen ses Müze / kazı alanı Kaydırma yok: höyüğün kesitine iniliyor. Her tabakanın yılda kaç milimetre biriktiği kalınlık ve süreden hesaplanıyor ve sezgiye aykırı çıkıyor — birikimi süre değil yoğunluk yapıyor. Ses dosyadan değil, Web Audio ile üretiliyor. Demoyu aç → Gece otoyolu, hareket eden filo Kargo / lojistik Girişte üç boyutlu bir gece otoyolu: yol akıyor, direkler geçiyor, farlar asfaltta koni bırakıyor. Aşağıda araçlar kadraja girip tekerlek çevirerek geliyor, şube ağı kaydırdıkça uçtan uca çiziliyor. Gönderi takibi mekaniği yerinde duruyor. Demoyu aç → Salonda gezilen showroom Otomobil salonu Galeri listesi değil, girilen bir salon: tekerlekle ilerliyorsun, her aracın arkasındaki duvar başka bir bölüm taşıyor ve sonunda anahtar teslim ediliyor. Hesap duvarında yılda kaç kilometre yaptığını söyle — beş yıllık gerçek maliyet çıkıyor ve en ucuz araç kilometreye göre değişiyor. Demoyu aç → Dairenin kaç saat güneş aldığı Emlak / konut projesi İlanlar cepheyi yazar; bu sayfa kaç saat güneş aldığını hesaplar. Üç boyutlu binada kaydırdıkça gün ilerliyor, komşu blokların gölgesi cepheye tırmanıyor. Kat planı da yerinde: kata tıkla, daireye tıkla, satılanlar gizlenmiyor. Demoyu aç → Girilen WebGL showroom Doğal taş / mermer Kaydırma yok: içine giriliyor. Plakaların arasında gezin, imleci ışık kaynağı olarak yüzeyde dolaştır. Cilalı ile honlanmışın farkı fiziksel olarak hesaplanıyor; ocakta da plakaya ışık tutularak bakılır. Demoyu aç → Masa kaç dakikada çıkar Restoran / menü Karanlık zemin, kor ışığı, noktalı menü çizgisi; sepet yok. Menüden yemek ekleyin, mutfak çizelgesi yeniden kurulsun: ateşte dört göz var, beşinci şiş kendi süresini değil masanın süresini uzatıyor. Demoyu aç → İmlece tepki veren WebGL alan Hareket / 3B Karanlık zemin, perspektif ızgara, imlece eğilen kartlar. Hareketin süs değil anlatım aracı olduğu tek demo — ve kapatma düğmesi sayfanın kendisinde. Demoyu aç → Gerçek güneş açısıyla gölge Mimarlık ofisi Gün ve saat seç, binanın gölgesi gerçek güneş açısıyla plana düşsün. Render değil hesap: avlunun o gün kaç saat güneş aldığı günü tarayarak bulunuyor. Demoyu aç → Aynı sahne, başka marka Ajans / prodüksiyon Sabitlenmiş tek WebGL sahnesi, kaydırma onun zaman çizgisi. Yüzey ışın yürütmeyle hesaplanıyor: sayfada tek bir görsel dosyası yok ve sayfa bunu canlı ölçümle söylüyor. Paleti değiştir — sahne, yazı ve arayüz aynı anda markanın rengine geçiyor. Demoyu aç → Kaydırdıkça çizilen kalıp Terzi / ısmarlama Kaydırdıkça bir ceket yedi katman hâlinde kuruluyor; her katman giyenin görmediği bir kararı anlatıyor. Koyu kumaş üstüne tebeşir: palet mesleğin kendisinden geliyor. Demoyu aç → Koltuğun gördüğü saha Stadyum / bilet Kaydırma yok: üç boyutlu tribünde blok seç, sıra seç, koltuğun gördüğü sahayı gör. Her koltuk için sahanın gözde kapladığı açı ve ne kadar basık göründüğü hesaplanıyor; ikisi aynı koltuğu işaret etmiyor — en geniş gören yer sahayı en çarpık gören yer. Demoyu aç →

Kurumsal ve hizmet

Ziyaretçi seni tanımadan geliyor ve güven arıyor. Buradaki tarzların ortak derdi o güveni kurmak; her biri farklı bir yerden kuruyor.

Kurumsal

Güveni ağırbaşlılıkla kurma

Lacivert, geniş boşluk, sakin tipografi. Güven ağırbaşlılıkla kuruluyor.

Şirket tanıtımı, hizmet sunumu, B2B Demoyu aç →

Randevu / yerel hizmet

Şu an açık mıyız

Sayfadaki en yüksek sesli öğe telefon numarası. Fiyatlar açık, “şu an açık mıyız” canlı yazıyor.

Klinik, kuaför, veteriner, servis Demoyu aç →

Spor / pilates stüdyosu

Hangi paket gerçekten ucuz

Haftada kaç kez geldiğini söyle, hangi paketin gerçekten ucuz olduğunu gör. Ders başı ucuz görünen paketin bir de süresi var; kaç dersin yandığı sayılıyor.

Pilates, spor salonu, yoga, kurs, abonelik Demoyu aç →

Dil kursu / eğitim

Saate göre seviye cetveli

Seviye cetveli eşit aralıklı değil, öğrenme saatine göre yerleşiyor: yukarı çıktıkça her basamağın uzadığı bakar bakmaz görünüyor. Nerede olduğunu ve hedefini seç, kaç saat ve kaç ay gerektiğini gör.

Dil kursu, kurs merkezi, sertifika programı, özel okul Demoyu aç →

Müze / kazı alanı

İçine inilen kesit, üretilen ses

Kaydırma yok: höyüğün kesitine iniliyor. Her tabakanın yılda kaç milimetre biriktiği kalınlık ve süreden hesaplanıyor ve sezgiye aykırı çıkıyor — birikimi süre değil yoğunluk yapıyor. Ses dosyadan değil, Web Audio ile üretiliyor.

Müze, kazı alanı, kültür kurumu, sergi Demoyu aç →

Landing

Tek hedef, tek eylem

Tek hedef. Menü yok, dış bağlantı yok; her bölüm aynı eyleme çıkıyor.

Ürün lansmanı, kampanya, kayıt toplama Demoyu aç →

Otel / pansiyon

Takvimde dolu gece denetimi

Fiyatlar takvimin içinde yazıyor ve aralık seçilirken aradaki dolu geceler denetleniyor — seçtirip sonra üzgünüz demek yok.

Butik otel, pansiyon, apart Demoyu aç →

Tur operatörü / rota

Profilden hesaplanan etap

Yükselti profili hipsometrik tonlarla çiziliyor ve etapların tırmanış, iniş, zirve değerlerinin hepsi o profilden hesaplanıyor. Seviyeni seç, hangi günün sınırının üstünde olduğunu sebebiyle gör.

Tur operatörü, doğa yürüyüşü, bisiklet turu, acente Demoyu aç →

Kargo / lojistik

Gece otoyolu, hareket eden filo

Girişte üç boyutlu bir gece otoyolu: yol akıyor, direkler geçiyor, farlar asfaltta koni bırakıyor. Aşağıda araçlar kadraja girip tekerlek çevirerek geliyor, şube ağı kaydırdıkça uçtan uca çiziliyor. Gönderi takibi mekaniği yerinde duruyor.

Kargo, nakliye, lojistik, depo Demoyu aç →

Evden eve nakliyat

Oda oda hacim hesabı

Odalarını say, kaç metreküp ettiğini ve hangi aracın yettiğini gör. Fiyat kalem kalem açık: hangi seçimin faturayı neden büyüttüğü yazıyor, tek sayı değil aralık veriliyor.

Evden eve nakliyat, ofis taşıma, depolama Demoyu aç →

Hukuk bürosu

Dava süresi ve belirsizlik payı

Sayfada tek bir renk yok; hiyerarşi ton ve cetvelle kuruluyor. Dava türünü seç, aşamaların ay aralığını gör: dolu kısım en az süre, taramalı kısım belirsizlik payı.

Hukuk bürosu, mali müşavir, danışmanlık Demoyu aç →

Holding / grup şirketi

Kırk piksel gövde metni

Sayfada küçük yazı yok; gövde metni bile kırk piksel ve bu seni kısa yazmaya zorluyor. İşini kendi cümlenle seç, hangi bölümün hangi sırayla devreye girdiğini gör.

Holding, grup şirketi, çok bölümlü kurum Demoyu aç →

Belediye / kamu hizmeti

Sayfa başına tek soru

Vitrinin en süssüz ve en erişilebilir sayfası: gövde 19 piksel, sayfa başına tek soru, sarı odak halkası. Üç soruya cevap ver, ruhsat için gereken belge listesini yazdır.

Belediye, kamu kurumu, oda, kooperatif Demoyu aç →

Dernek / bağış

Bağışın kalem kalem karşılığı

Tutarı değiştir, o paranın koliye hangi kalemi koyduğunu kalem kalem gör. Eksik kalan kalem gizlenmiyor, üstü çiziliyor ve kaç lira eksik olduğu yazıyor.

Dernek, vakıf, bağış kampanyası, kooperatif Demoyu aç →

Satış ve katalog

Ürün çok, karar zor. Buradaki tarzlar gözü taramaya göre kuruluyor: ne satıldığı ilk saniyede anlaşılsın.

E-ticaret

Taramaya göre ürün ızgarası

Yoğun ürün ızgarası, rozetler, fiyat vurgusu. Göz taramaya göre kurulmuş.

Ürün satışı, katalog, mağaza Demoyu aç →

Oto galeri

Üçe kadar karşılaştırma

Süzgeç ve üçe kadar yan yana karşılaştırma. Kimse araba sepete atmıyor: süzüyor, ikiye üçe indiriyor, sonra karşılaştırıyor — sayfa da bunu izliyor.

Oto galeri, ikinci el, ağır vasıta Demoyu aç →

Otomobil salonu

Salonda gezilen showroom

Galeri listesi değil, girilen bir salon: tekerlekle ilerliyorsun, her aracın arkasındaki duvar başka bir bölüm taşıyor ve sonunda anahtar teslim ediliyor. Hesap duvarında yılda kaç kilometre yaptığını söyle — beş yıllık gerçek maliyet çıkıyor ve en ucuz araç kilometreye göre değişiyor.

Oto galeri, showroom, plaza, yat ve karavan satışı Demoyu aç →

Emlak / konut projesi

Dairenin kaç saat güneş aldığı

İlanlar cepheyi yazar; bu sayfa kaç saat güneş aldığını hesaplar. Üç boyutlu binada kaydırdıkça gün ilerliyor, komşu blokların gölgesi cepheye tırmanıyor. Kat planı da yerinde: kata tıkla, daireye tıkla, satılanlar gizlenmiyor.

Konut projesi, müteahhit, emlak ofisi Demoyu aç →

Doğal taş / mermer

Girilen WebGL showroom

Kaydırma yok: içine giriliyor. Plakaların arasında gezin, imleci ışık kaynağı olarak yüzeyde dolaştır. Cilalı ile honlanmışın farkı fiziksel olarak hesaplanıyor; ocakta da plakaya ışık tutularak bakılır.

Mermer ocağı, doğal taş, seramik, yüzey malzemesi Demoyu aç →

Yeme-içme

Hiçbiri aynı işi yapmıyor. Menü okutmak, bir kahvenin hikâyesini anlatmak, vitrin göstermek ve satışın yasak olduğu bir ürünü tanıtmak ayrı şeyler.

Denizcilik

Aynı sektör, taban tabana zıt iki iş: biri on sekiz ayda teslim edilen tek bir tekne satıyor, öbürü yüzlerce kişiye yıllık bir hizmet.

Yaratıcı işler ve zanaat

Burada ürün senin işin: tasarım da olabilir el emeği de. Sayfanın kendisi bir iş örneği olmak zorunda, yoksa anlattığını yapamıyorsun demektir.

Portfolyo

Devasa tipografi

Devasa tipografi, siyah-beyaz, işler kart değil satır. Renk sadece hover’da.

Tasarımcı, fotoğrafçı, mimar Demoyu aç →

Hareket / 3B

İmlece tepki veren WebGL alan

Karanlık zemin, perspektif ızgara, imlece eğilen kartlar. Hareketin süs değil anlatım aracı olduğu tek demo — ve kapatma düğmesi sayfanın kendisinde.

Ajans, stüdyo, ürün lansmanı Demoyu aç →

Animasyon / animatör

Kare kare görüntüleyici

On iki kareyi tek tek gezdiğin bir görüntüleyici, soğan zarı ve pozlama cetveli. Hareket demosunun aksine sayfa durgun — kımıldayan şeyi sen kontrol ediyorsun.

Animatör, animasyon stüdyosu, motion Demoyu aç →

İllüstrasyon / çizim

Sürüklenebilir ayraç

Aynı çizimin eskiz ve renkli hâlini ayıran sürüklenebilir ayraç, ve kullanım hakkına göre kurulmuş bir fiyat tablosu. Rizograf dili.

İllüstratör, çizer, desen tasarımı Demoyu aç →

Mimarlık ofisi

Gerçek güneş açısıyla gölge

Gün ve saat seç, binanın gölgesi gerçek güneş açısıyla plana düşsün. Render değil hesap: avlunun o gün kaç saat güneş aldığı günü tarayarak bulunuyor.

Mimarlık ofisi, iç mimar, peyzaj, mühendislik Demoyu aç →

Ajans / prodüksiyon

Aynı sahne, başka marka

Sabitlenmiş tek WebGL sahnesi, kaydırma onun zaman çizgisi. Yüzey ışın yürütmeyle hesaplanıyor: sayfada tek bir görsel dosyası yok ve sayfa bunu canlı ölçümle söylüyor. Paleti değiştir — sahne, yazı ve arayüz aynı anda markanın rengine geçiyor.

Reklam ajansı, prodüksiyon, yaratıcı stüdyo, marka danışmanlığı Demoyu aç →

Terzi / ısmarlama

Kaydırdıkça çizilen kalıp

Kaydırdıkça bir ceket yedi katman hâlinde kuruluyor; her katman giyenin görmediği bir kararı anlatıyor. Koyu kumaş üstüne tebeşir: palet mesleğin kendisinden geliyor.

Terzi, ısmarlama üretim, el işi atölyesi Demoyu aç →

Yayın ve tarz

Tek kategori iş değil tavır ekseninde: aynı içerik bu tarzların hangisine konursa okuyucuya farklı bir şey söylüyor.

Demolardaki isimler ve içerik uydurma; gerçek bir işletmeye ait değil. Arama motorlarına da kapalılar.