Pagiera: Tasarımdan Canlı Web Sitesine Tek Bir Görsel Çalışma Alanı

Web sitesi geliştirme araçları genellikle iki farklı dünyadan birini seçmek zorunda bırakıyor: tasarım özgürlüğü veya geliştirici kontrolü.

Görsel site oluşturucular hızlı ve keyifli bir tasarım deneyimi sunuyor ancak iş gerçek uygulama mantığına, dinamik verilere veya özelleştirmeye geldiğinde sınırlar ortaya çıkabiliyor. Kod tabanlı geliştirme ise neredeyse sınırsız kontrol sağlıyor fakat görsel kararları uygulamaya dönüştürürken tasarım ve geliştirme arasında sürekli bir geçiş gerekiyor.

Pagiera'yı bu iki dünya arasındaki boşluğu kapatmak için geliştirdim.

Pagiera, görsel olarak tasarım yaparken üretime hazır bir web sitesinin yapısını korumayı amaçlayan açık kaynaklı bir visual website builder.

Fikir nasıl ortaya çıktı?

Bir web arayüzünü tasarlarken verdiğimiz kararların büyük bölümü aslında doğrudan geliştirme ile ilişkili.

Bir hero alanının genişliği, breakpoint davranışı, component yapısı, typography sistemi, tekrar kullanılan kartlar veya bir API'den gelen içerikler yalnızca görsel kararlar değil.

Bunların tamamı ürünün gerçek çalışma biçiminin bir parçası.

Ben de şu sorudan yola çıktım:

Bir web sitesini Framer veya benzeri görsel araçların rahatlığıyla tasarlarken, arka tarafta gerçek bir uygulamanın esnekliğini korumak mümkün mü?

Pagiera'nın temel fikri bunun üzerine kuruldu.

Serbest bir canvas, gerçek bir web yapısı

Pagiera'nın merkezinde görsel bir canvas bulunuyor.

Elementleri sahne üzerinde yerleştirebilir, boyutlandırabilir ve düzenleyebilirsin. Ancak amaç yalnızca ekranda güzel görünen statik bir kompozisyon oluşturmak değil.

Her karar responsive sistemin bir parçası olarak kalıyor.

Desktop, tablet ve mobil görünümler üzerinde çalışabilir; farklı breakpoint'lerde tasarımın nasıl davranacağını kontrol edebilirsin.

Bu sayede tasarım süreci ile implementasyon süreci birbirinden kopmuyor.

Component ve variant sistemi

Modern web projelerinde aynı elementleri sürekli yeniden tasarlamak mantıklı değil.

Navbar, button, hero, card veya footer gibi parçaların tekrar kullanılabilir olması gerekiyor.

Pagiera'da herhangi bir yapıyı component haline getirip farklı sayfalarda kullanmak mümkün. Variant sistemi sayesinde aynı component'in farklı durumlarını oluşturabilirken temel yapı ortak kalıyor.

Böylece bir component üzerinde yapılan değişiklik bütün proje boyunca kontrollü şekilde taşınabiliyor.

Benim için bu özellik Pagiera'nın en önemli parçalarından biri çünkü proje büyüdükçe tasarımın bir ekran koleksiyonuna değil, yaşayan bir design system'a dönüşmesini sağlıyor.

Gerçek veri ile çalışan sayfalar

Birçok görsel oluşturucu landing page seviyesinde oldukça başarılı.

Ancak gerçek projeler çoğu zaman bundan daha fazlasına ihtiyaç duyuyor.

Bloglar, ürün listeleri, kullanıcı profilleri veya kategoriler gibi sayfalar dinamik verilerle çalışıyor.

Pagiera'da API sonuçlarını doğrudan sayfadaki elementlere bağlamak ve verileri tekrar eden component yapıları içerisinde kullanmak mümkün.

Örneğin:

/blog/:slug
/products/:category
/profile/:username

gibi dinamik rotalar oluşturulabiliyor.

Böylece tasarımcı yalnızca örnek içerikle çalışan bir mockup hazırlamıyor; gerçek uygulamanın sayfasını tasarlıyor.

Görsel editör ve production birbirinden ayrı değil

Pagiera'yı geliştirirken özellikle kaçınmak istediğim şeylerden biri klasik handoff süreciydi.

Figma'da tasarla.

Sonra kodla tekrar oluştur.

Sonra responsive davranışları yeniden çöz.

Sonra gerçek veriyi bağla.

Sonra tasarımla implementasyon arasındaki farkları düzelt.

Pagiera'daki yaklaşım farklı.

Tasarladığın sayfa aynı zamanda yayınlanacak olan sayfa.

Bu nedenle component yapıları, responsive kurallar ve içerik bağlantıları üretim aşamasına geçerken kaybolmuyor.

Amaç bir tasarımın ekran görüntüsünü üretmek değil; çalışan web deneyimini doğrudan tasarlamak.

AI, editörün yerine geçmek yerine onun içinde çalışıyor

Pagiera'ya AI eklerken tamamen prompt tabanlı bir website generator yapmak istemedim.

Çünkü yalnızca:

"Modern bir SaaS landing page oluştur."

yazıp sonucunda kontrol edilmesi zor bir çıktı almak benim için yeterli değildi.

Pagiera'daki AI yaklaşımında yapılan değişikliklerin yine editörün kendi sistemi içerisinde kalması önemli.

AI component oluşturabilir, bir düzeni değiştirebilir veya tasarım konusunda yardımcı olabilir; ancak ortaya çıkan sonuç kullanıcı tarafından görülebilir ve düzenlenebilir olmaya devam eder.

Yani AI son kararı veren kapalı bir sistem değil.

Daha çok tasarım sürecinin içinde çalışan bir yardımcı.

Full-stack bir website builder

Pagiera sadece canvas tarafına odaklanan bir prototip değil.

Projeyi geliştirirken editörün yanında gerçek uygulamaların ihtiyaç duyduğu altyapının da sistemin parçası olmasını istedim.

Sayfalar, component'ler, içerikler, routing, preview ve publishing süreçleri aynı ürünün parçaları olarak çalışıyor.

Bu yaklaşım Pagiera'yı yalnızca bir landing page oluşturucudan ziyade daha kapsamlı bir web geliştirme ortamına dönüştürüyor.

Şablonlar bir başlangıç noktası

Boş bir canvas her zaman en iyi başlangıç olmayabiliyor.

Bu yüzden Pagiera içerisinde template sistemi de bulunuyor.

Ancak şablonların amacı kullanıcıyı hazır bir tasarımın sınırlarına hapsetmek değil.

Bir template;

• sayfaları,
• component yapılarını,
• responsive davranışları,
• typography sistemini,
• motion detaylarını

içeren başlangıç noktası olarak düşünülebilir.

Kullanıcı daha sonra bu sistemi tamamen değiştirebilir ve kendi projesine dönüştürebilir.

Açık kaynak neden önemli?

Pagiera'yı açık kaynaklı geliştirmek projenin temel kararlarından biriydi.

Web sitesi oluştururken kullanılan araç, projenin üzerinde görünmez bir sahiplik katmanı oluşturmamalı.

Kod üzerinde kontrol sahibi olmak, sistemi gerektiğinde genişletebilmek ve projenin belirli bir platforma bağımlı kalmaması benim için önemliydi.

Bu yüzden Pagiera'nın temel yaklaşımı oldukça basit:

Design freely. Publish real websites.

Pagiera'yı geliştirirken öğrendiklerim

Pagiera benim için yalnızca bir website builder geliştirme projesi olmadı.

Aynı zamanda görsel tasarım araçları ile yazılım mimarisinin ne kadar iç içe olduğunu daha iyi anlamamı sağladı.

Bir canvas üzerinde basit görünen bir hareket bile arka tarafta;

• layout sistemleri,
• responsive kurallar,
• component state'leri,
• serialization,
• rendering,
• routing
• ve kullanıcı deneyimi

gibi birçok farklı problemi beraberinde getiriyor.

Bu nedenle Pagiera üzerinde çalışmak, hem ürün tasarımı hem de frontend/full-stack geliştirme açısından şimdiye kadar üzerinde çalıştığım en kapsamlı projelerden biri haline geldi.

Bundan sonra

Pagiera hâlâ gelişmeye devam eden bir proje.

Hedefim onu yalnızca daha fazla özellik ekleyerek büyütmek değil.

Asıl hedef; web sitesi oluşturma sürecini daha anlaşılır, daha görsel ve geliştiriciler açısından daha kontrol edilebilir hale getirmek.

Tasarımcıların kod düşünmeden özgürce çalışabildiği, geliştiricilerin ise platformun sınırlarıyla mücadele etmek zorunda kalmadığı ortak bir çalışma alanı oluşturmak istiyorum.

Pagiera, tasarım ile production arasındaki mesafeyi mümkün olduğunca ortadan kaldırma denemem.

Projeyi incelemek ve canlı deneyimi görmek için Pagiera üzerinden devam edebilirsin.