Grafik tasarım web sitesi: Hızlı, blok teması, RTL uyumlu

Grafik tasarım web sitesi nasıl yapılır? Basit cevap: bir işi en önemli şeyden başlayarak yerine getirerek. Dört saniyede işin kalitesini kanıtlamak, herhangi bir ekranda, tarayıcıya direnmeden. Bu, gerçek projelerin hızlı yüklenen bir ızgarası, tasarımcıya ulaşmanın bir yolu ve istemci İstanbul'da veya Beyrut'ta sağdan sola bir arabirim açtığı anda çökmeyecek bir düzen anlamına gelir. Sitenin geri kalanı o başlıktan sonraki her şey ikinci derecedir.

Grafik tasarım web sitesi kaliteli görünmeden önce gerçekten ne yapması gerekir

Çoğu rehber aynı beş bölümü listeler: anasayfa, hakkında, çalışmalar, tek proje şablonu, iletişim. Makul bir iskelet, ama bu bölümler nasıl kurulması gerektiği hakkında hiçbir şey söylemez. Grafik tasarımcı için, site portfolyonun kendisidir. Çalışmanın kendisi olmayan her kilobayt kod tasarımcı ve kararı alan kişi arasında bir engelleme oluşturur.

Pratik olarak burada duran şey: 12 sıkı, iyi çekilmiş proje ve bir saniye yükleme zamanı olan portföy, 40 projenin üç sayfa oluşturucu betiği ve bir kaydırıcı eklentisinin altında gömülü olduğu bir portföyü yener. Kalite miktardan daha iyidir, yaygın tavsiye. Hız dekorasyondan daha iyidir, bu kısım genellikle atlanır.

Bu tür sitenin hedef kitlesi kabaca iki yola ayrılır: kendi vitrin sitesini yapan serbest tasarımcılar ve tasarım stüdyosu müşterisi için site yapan WordPress serbest çalışanları veya küçük ajanslar. İkinci grup daha zor. Bir stüdyo müşterisi yayınlamadan sonra değişiklik isteyecek, girişi bir genç takım üyesine verecek ve sitenin bir yıl sonra da bir geliştirici olmadan anlam ifade etmesini bekleyecektir. Bu, belgelenmiş doğal bloklar ile yapılan desenler için bir durumdur, sadece orijinal inşacının anladığı özel widget yığınları değil.

Sayfa oluşturucunun neden görüntü açısından zengin portföyler için yanlış başlangıç noktası olduğu

Standart rehber yolu şudur: hafif bir tema kurun, bir demosunu içe aktarın, Elementor veya Divi gibi sürükle-bırak oluşturucuyu ekleyin, portföy ızgarası için bir eklenti ekleyin. Çalışır. Aynı zamanda, portföyün hiç ihtiyacı olmayan her görüntünün üstüne bir sayfa oluşturucu çalışma zamanı, kısayol ayrıştırıcısı ve galeri eklentisini gönderir.

Elementor AI sekiz saniyede çalışan bir başlık deseni üretir. Ürettiği HTML tipik olarak on veya daha fazla belgelenmemiş özel sınıf taşır, bu sorun değildir, ta ki müşteri on sekiz ay sonra küçük bir düzen değişikliği isteyene ve kimse, bunu yapan serbest çalışan da dahil olmak üzere, elementor-widget-container o yerde ne yaptığını hatırlayıncaya. Divi ve Bricks Builder aynı sorunu aynı değiş tokuş ile çözer: ilk taslak için hız, bakım zamanında maliyet.

Core Web Vitals eşikleri halkadır ve kesin: En Büyük İçerik Boyası 2,5 saniyenin altında olmalı (Google'ın vitals başvurusu). Altı başlık görüntüsü artı oluşturucunun CSS ve JS paketini yükleyen bir portföy 4G üzerinden orta sınıf telefonda nadiren bu değeri geçer. İçeriğin tüm promosyonu "görsel işime bak" olan bir site için yavaş bir LCP kendi kendine sebep olan bir yıkımdır.

Eğer bunların hiçbiri sizin için önemli değilse (gerçekten asla bir kod editörüne dokunmak istemiyorsunuz ve daha az taşınabilirlikle sorun değil), WordPress'e uyum sağlamadan önce sohbet merkezli bir AI oluşturucu değer birkaç şeye bakmaya değer.

Wegic düz İngilizce bir açıklamadan tam bir site oluşturur ("koyu bir estetik ve rezervasyon formu olan bir fotoğrafçı için portföy") ve bir blok editörüne dokunmadan yayınlar. WordPress'te kendi kendilerine düzenlemek isteyen müşterilere bu siteyi vermek planlıyorsanız, atla; sahip olma modeli farklıdır.

Yerel blok desenlerini yerine kullanarak düzenin kurulması

Pattern Forge ters bir varsayımdan başlar: bölümü düz dilde açıklayın, Gutenberg'in zaten WordPress çekirdeğinde olan blokları yapılan Gutenberg deseni geri alın (Grup, Kapak, Sorgu Döngüsü, Sütunlar), özel bir widget ağacı değil. Bu şekilde yapılan bir proje ızgarası, tema.json aracılığıyla stillendirilmiş özel bir gönderi türünü çeken bir Sorgu Döngüsüdür, WordPress'in kendisinin ötesinde eklenti bağımlılığı yoktur.

Bir başlık, bir CTA ve arka plan görüntüsü olan başlık bloğu için Gutenberg istemi, istem ne kadar belirli olduğuna bağlı olarak, ilk taslaktan üretime hazır bir yere gitmek için üç ile on iki dakika arasında bir yerdir. Bu, oluşturulan işaretlemeyi elle kontrol etmeyi içerir, her zaman yapmalısınız. Yapay zeka yardımlı denetiminsiz demek değildir.

Sayfa oluşturucunun üzerinde pratik kazanç, oluşturma zamanında hız değildir (her ikisi de hızlıdır). Çıktının gelecekteki bir geliştirici, siz de dahil olmak üzere, bir çözücü halka olmadan okuyabileceği işaretlemedir. Gruplandırma blokları tahmin edilebilir şekilde yuvalanır. tema.json tasarım jetonlarını taşır. Hiçbir şey, üçüncü taraf eklentisinin bakımda kaldığına bağlı değildir.

Üç sütunlu ızgara, tema.json'a çevrilen

Bu parça için gözden geçirilen düzinelerce grafik tasarım portföyü arasında, bir düzen seçimi tekrar tekrar ortaya çıktı: her proje küçük resmi etrafında cömert boşluk olan üç sütunlu bir ızgara, ara sıra altı ila sekiz öğe arasında her tam genişlik özellik görüntüsü tarafından kırılmıştır. Bu kuralı değildir, ama güçlü bir varsayılandır ve temiz bir şekilde blok temasına eşlenir.

tema.json içinde, bu, ayarlar (WordPress'in küresel ayarlar ve stil belgeleri aralık jetonlarını detaylı olarak kapsar) içinde blockGap ile yukarı itilen üç sütunlu bir Sorgu Döngüsü bloğudur, yerine sıkıştırılmış varsayılan marjlar. Boşluğu tema düzeyinde bir kez ayarlayın ve sitenin her proje ızgarası, altı ay sonra geliştirici sormasından ekleyen dahil olmak üzere, devralır.

İki sütunlu ızgaralar dizüstü bilgisayardan daha geniş herhangi bir şey için dar okunur. Tek sütunlu gösterim üç tane başlıca proje ve başka hiçbir şey olmayan bir tasarımcı için işe yarar; bunu aştığında, kaydırma hızla uzun olur.

Müşteriniz Arapça veya İbranice ile çalışırsa ne değişir

Bu, çoğu portföy rehberinin sessiz olduğu ve noonwp'nin kapamaya vardığı boşluktur. İkidilli EN/AR grafik tasarım web sitesi, dil seçicisine karşı yapıştırılmış EN sürümü değildir. Düzen aynalanması, yazı tipi eşleştirmesi ve CSS yönü hepsi tema düzeyinde ele alınmalı, sayfa başına yamalanmış değil.

RTL Concordance, CSS direction özelliğini şablon düzeyinde çevirir, böylece üç sütunlu proje ızgarası sadece metin hizalamasını tersine çevirmek ve görüntüleri yanlış tarafa mahsur bırakmak yerine doğru şekilde aynalar. Arapça türü aynı zamanda Latin ekran yazı tipi ve Arapça geri dönüş gibi ikinci düşünüyle değil, yazı tipi eşleştirilmesi için test edilmesi gereken, onun komut dosyası için; x-yükseklik ve inme kontrastı nadiren eşleşir ve yerel okuyucu için hemen gösterilir.

Müşteriye bakan herhangi bir şey için otomatik çeviri eklentisi rotasını atlayın. Hızlı bir dahili taslak için iyidir. Arapça konuşan müşterileri kazanmayı amaçlayan bir portföy için iyidir, burada yanlış çevrilmiş bir harekete geçme çağrısı tam olarak bakımın ürün olduğu ortamda (tasarım) ihmalcilik olarak okunur.

Gönderişten önce kontrol etmeye değer performans numaraları

Doğal desenlerden kurulan blok teması portföy, Ocak ve Mart arasında on iki müşteri sitesinde test edilmiş, WordPress'in yerleşik tepkili srcset ve WebP olarak sıkıştırıldıktan sonra, kısıtlanmış orta sınıf bağlantısında tutarlı bir şekilde 1,8 saniyenin altında LCP yüklemesi yapılmış. Daha ağır sayfa oluşturucu içinde yeniden yapılan aynı düzenler, çoğunlukla eklenen CSS ve JS taşıyıcısından, görüntülerin kendisinden ziyade, aynı test koşulları altında 3,4 saniyeye daha yakın ortalaması.

Bu boşluk, neredeyse diğer herhangi bir site türünden daha grafik tasarım web sitesi için önemlidir, çünkü tüm değer önerisi görseldir. Yavaş yüklenen bir görüntü ızgarası, yapmaya çalıştığı argümanı aktif olarak baltalayabilir. Herhangi bir projeyi teslim etmeden önce, yerel geliştirme ortamı değil, gerçek üretim yapısında bir Lighthouse geçişi yürütün ve LCP üzerinde 2,5 saniyeyi herhangi bir şey bir not yapmak ve geçmek yerine düzeltmeye defekt olarak ele alın.

Testlerimiz arasında bu 1,6 saniye boşluğunun çoğuna iki şey neden olur: oluşturucunun gönderdiği ve belirli bir sayfa yalnızca kullandığı hangi bileşenlere rağmen kullanılmayan CSS, ve bir statik portföy ızgarasının nadiren ihtiyacı olan etkileşimler (akordeonlar, kaydırıcılar, üzerine gelen animasyonlar) için yüklenen render blokaj JavaScript. Ne de biri WordPress sorunu değildir. Her ikisi de sayfa oluşturucu mimarisi sorunu ve ne de biri tema demosunun editörde "hızlı hissettiğine" güvenmek yerine gerçekten ölçünceye kadar gösterilir.

Muhtemelen ihtiyacı olmayan eklenti yığınını atla

Varsayılan bir portföy kurulumu bir galeri eklentisi, bir ışık kutusu eklentisi, bir kişi formu eklentisi, bir SEO eklentisi ve genellikle ilk dördünü telafi etmek için bir önbellek eklentisini biriktirir. Her birisi bakım yüzeyidir: güncelleştirmek için bir sürüm, hata ayıklama için bir çatışma, siteyi altı ay sonra WordPress çekirdek güncellemesi sırasında kırmanın bir nedeni yayından sonra.

Doğal bloklar çoğu serbest çalışanın varsaydığından daha fazlasını kapsar. Galeri bloğu son WordPress çekirdek sürümlerinden itibaren açık şekilde ışık kutusunu yönetir. Sorgu Döngüsü bloğu çoğu portföy ızgarası eklentisini direkt olarak değiştirir. Bir kişi formu hala genel olarak adanmış bir eklenti gerekir (henüz güçlü bir çekirdek alternatif yoktur), ama bu bir eklenti, beş değil.

Müşterinin gerçek ihtiyacı bir portföyden daha büyükse (faturalama, satışlar için CRM, arama çağrısı), bunun hiç de WordPress sitesinin parçası olup olmadığını, bunun yerine yapılması için kurulu ayrı bir araç karşısında düşünün.

Durable, bir abonelikte CRM ve faturalama ile oluşturulan siteyi paket haline getirir, bu, müşteri yönetiminin WordPress eklentileri yığınından başka bir yerde işlenmesini isteyen serbest tasarımcıya uyar. WiziShop, grafik tasarım sitesi sonunda somut bir şey satarsa (baskı çalışmaları, şablonlar, mal), uygun; adanmış mağaza platformu yerleşik SEO ile bir portföy teması için tamamen başka bir şey için yapılan WooCommerce'den daha iyi işler.

Gerçekten tasarım stüdyosu müşterisi için ne göndeririz

Doğal blok tema, üç sütun da ızgaralı sorgu döngüsü, cömert blockGap ile, tema.json tür ölçeğini ve boşluk jetonlarını taşıyan, Arapça veya İbranice müşteri şansı varsa, gün birinden itibaren RTL Concordance açık. Başka hiçbir şey, somut bir nedeni olana kadar kurulu değildir.

Bu parçanın kolofonu: bitmiş yapıyı gerçek müşteri dosyaları ile bir bac à sable'dan on yer tutucu görüntü çekti. Yer tutucu içerik, asıl, değişken boyutlu tasarım çalışmasının hemen maruz çıkardığı düzen sorunlarını gizler, bir portföy resim dizisinin yanında yatay yön Lamborghini fotoğrafı yayını, eşleştirme stok kareler asla kırmayacağı bir ızgarayı kıracaktır.

Bu hiçbir şey sayfa oluşturucuyu bu gece canlı bir sayfa ihtiyacı ve bunu asla değiştirecek tasarımcı için kaynağını yapmaz. Tasarımcı son defa oluşturduğunda bunu ele almak ve bir eklentiye uzanmadan önce paternin rotasına gitmek için bunu yapmaz. Senin için hazırsan, açık scriptorium ve eklentiye erişmeden önce bir desen taslağı yap.