İyi yanıt veren web tasarımı, doğası gereği, çevrimiçi içerik tüketenlere fark edilmeden geçer. Birisi yeni bir web sitesi istediğinde, genellikle günlük olarak deneyimlemesine rağmen konseptin tamamen farkında değiller. Yine de, duyarlı web sitesi tasarımı artık sektör genelinde standart uygulama olarak kabul ediliyor.
Duyarlı web siteleri oluşturmak, tam sayfaların maketlerini oluşturmaktan, yeniden kullanılabilir bileşenlerin ve düzenlerin kütüphanelerinin oluşturulmasına kadar süreçlerimizi değiştirdi.
düzen içerik odaklı ve stilleri marka odaklı
Son zamanlarda web sitelerini sorumlu bir şekilde yeniden tasarlamak için mevcut bir müşteri tarafından ele alındı. Daha önce sert bir şelale süreci kullanarak onlarla çalıştık. Çevik bir iş akışına geçerek, projenin herhangi bir noktasında değişimi kucaklayabildik.
Süreç boyunca, içeriğin içerik odaklı olduğu ve stillerin marka odaklı olduğu felsefesine bağlı kaldık.
Şartname belgeleri, bir sitenin sahip olması gereken tüm işlevleri listelemek için harika çalışır. Ama müşterinin ihtiyacı olan şey bu mu? Bu özellikleri yerinde görselleştirmek çok zordur. Dolayısıyla sonuç, şartname belgelerinin genellikle şişirilmiş istek listelerine dönüşmesidir. Bu, müşteriye, tasarımcılara veya nihai web sitesine yardımcı olmaz.
Şartname belgeleri yerine tel çerçevelerini kullanmayı tercih ettik. Projenin ilk adımı, her sayfa için tel çerçeveler oluşturmayı içeriyordu. Bu, overkill gibi görünebilir, ancak tel çerçeveleri, her sayfanın içeriği ve özellikleriyle ilgili ilk tartışmalara yol açtı. Daha önce hiç düşünmediğimiz özelliklerin eklendiğini, birçoğunun kaldırıldığını bulduk.
Tel çerçeveler, her sayfada içerik ve işlevselliklerin nasıl önceliklendirilmesi gerektiğine dair net ve görsel bir sunum yaptı. Bu tel çerçeveleri daha sonra bir şartname belgesinin yerini alarak bir referans noktası haline geldi.
Anahtar teslim paket: şartname belgelerinin yerine tel çerçeveler üretmek herkesin temel özellikleri ve içeriğin önemi üzerine odaklanır.
Tel çerçevelerini denetlemek, tüm ortak bileşenlerin bir listesini oluşturmamızı sağlar. Tek bir site genelinde, her sayfada çok benzer olan düzinelerce küçük bölüm olacaktır. Bu bileşenler daha sonra kullanılacak olan kapsamlı bir liste halinde toplanabilir.
Bu aşamada üç ana fayda vardır:
Anahtar teslim paket: Bir projenin ön uç gelişmesine nasıl yaklaşılacağını planlamak, sürdürülebilir, yalın bir kod tabanı oluşturmak için önemlidir.
Desen kitaplıkları, bir web sitesinde kullanılan ortak öğeler topluluğudur. Ön uç gelişimini sayfalara bağımlı olmayan bileşenler oluşturma üzerine odaklayarak, kod ek yükünü azaltabilir ve tutarlılığı artırabiliriz.
Denetim aşamasında harmanladığımız bileşenlerin listesini kullanarak Sass'ımızı yönetilebilir bir dosya koleksiyonuna yapılandırabiliriz.
Desen kütüphanelerini birkaç projede kullandık, ancak her zaman adlandırma kuralları, özellikle de klasör yapısı ile uğraştık: stillerinizi bu müzik çalara, bileşenlere veya kısmi parçalara nereye koydunuz?
Daha önce, Sass dosyalarımızı düzenlemek için kısmi bileşenler ve bileşenler gibi bir terminoloji kullanıyorduk. Bunlar tamamen meşru isimlendirme kuralları gibi görünse de, yoruma açıklar. Bir proje üzerinde çalışan birden fazla geliştirici olduğunda, kod tabanının organizasyonunun yorumlanmaya açık hale getirilmesi, örgütlenmemiş CSS'ye yol açar.
BEM (Blok, Eleman, Değiştirici), bizi takip etmek için ortak bir sözleşme sunar ve ön uç geliştiriciler arasında bir anlayış oluşturur. Eski yol, bireysel geliştiricilere, herhangi bir anlamın anlaşılması için çok yüksek seviyedeki sınıf isimleriyle gelmek için bırakıldı. Neyse ki gördüğümüz için şanslıydık Brad Frost onun desen kütüphanesi hakkında Upfront Konferansı Manchester'da. Pattern Lab, kütüphaneyi oluşturan bileşenleri tanımlamak için kimyadan terminolojiyi ödünç verir. Bir sayfadaki bileşenler arasındaki farklılıkları tanımlamak için atomları, molekülleri ve organizmaları kullanmak, konseptin projeye yeni olan geliştiricilere açıklanmasına yardımcı olur.
Atomik tasarım kullanıcı arayüzleri içindir: http://t.co/eEZSYeK5VF Atomik tasarımı, Instagram gibi herhangi bir UI'ye uygulayabilirsiniz pic.twitter.com/BrztgtRoGU
- Brad Frost (@brad_frost) Instagram Profilini Görüntüle 10 Temmuz 2015
Doğada, atomlar en küçük değerlerdir (kuarklara ve elektronlara bakmadıkça). Web geliştirmede, atomlar HTML'nin en temel öğeleridir. Tüm niyet ve amaçlara göre, kendi başlarına pek bir şey yapmazlar. Bunlar başlıkları, paragrafları, girişleri, düğmeleri, listeleri içerir… Fikri alırsınız.
Bunlar bir sonraki katman. Kimyada, moleküller atomlardan oluşur ve aynısı CSS'nin yapısı için de geçerlidir. Moleküller, web sitesinde bunları oluşturmak için atom kullanan bileşenlerdir.
Bir molekülün iyi bir örneği bir arama kutusu. Bu 3 atom içerir: bir etiket, giriş ve düğme. Molekül tabakası, web sitesinde kullanabileceğimiz bazı unsurları oluşturmaya başlar. Tüm bu molekülleri ölçeklendirmek önemlidir. Sitenin herhangi bir yerinde kullanılabilecekleri fikriyle tasarlanmalıdırlar. CSS'yi olabildiğince esnek ve tekrar kullanılabilir hale getirme hedefimiz.
Adından da anlaşılacağı gibi, organizmalar molekül gruplandırmasıdır. Bunların bazı örnekleri bir başlık, altbilgi veya ürün listesi içerir.
Bir başlık örneğini alırsak, bu bir logo, arama ve gezinme içerir. Bunların hepsi molekül olarak yaratıldı ve bir üst organizma oluşturmak için birleştirildi.
Biyokimya benzerliği burada bitiyor. Brad'in dediği gibi, “müşterilere ve nihai çıktıya daha anlamlı gelen bir dile gir” . Şablonlar bir web sitesinin yapıştırıcısıdır. Bunlar, oluşturduğumuz tüm organizmaları web sitesindeki bir sayfaya uygulanabilecek bir düzende birleştiriyor.
Bir örnek blog listesi olabilir. Bu şablon bir başlık, altbilgi, blog öğelerinin bir listesi ve bir kenar çubuğu içerir. Şablonlar genellikle sadece düzeni içeren yapısaldır.
Son bölüm sayfalar. Bu şablonları gerçek verilerle test edebilirsiniz. Sayfalar bir şablonun belirli örnekleridir. Bu bölüm önemlidir, çünkü atomların, moleküllerin, organizmaların ve şablonların ne kadar başarılı olduğunu görmemizi sağlar.
Web sitesini oluştururken bazı senaryoların gözden kaçırılması kaçınılmazdır. Klasik örnek uzun başlıklar ya da farklı para birimleri ve diller için yemek.
Anahtar paket servisi: Adlandırma kuralları önemlidir. Katman CSS, olabildiğince küçük olandan çalışmak için temiz bir kod tabanı oluşturur.
Tasarım desenleri zordur. Bir haber öğesi gibi izole bir desen tasarlayamaz ve sayfanın geri kalanına sığmasını beklemezsiniz. Web siteleri kurma biçimimiz ve onları tasarlama şeklimiz farklı.
İmzalama yapıp yapmamamız fark etmeksizin tasarımlar değişebilir… İmzalama, süreçte her iki tarafa da baskı uygulayan alakasız bir adım oldu.
Bu tarz bileşenlerle yerinde tel çerçevelerinin maketlerini oluşturmak için Photoshop'u kullandık. Tasarımların görünümü ve hissi ile mutlu olduktan sonra, her bileşenin izole edilmesine geçtik. Bu, her bileşenin web sitesinde herhangi bir yerde çalışmak için yeterince esnek olmasını sağladı.
Herhangi bir tasarım çalışmasında imza alamadığımız için çok bilinçliyiz. Tasarım kaydı, tasarımcının taşa yerleştirilecek bir şey yaratmak için baskı altında hissettiği bir bariyer oluşturur. İmzalama yapıp yapmamamız fark etmeksizin tasarımlar değişebilir. Genel olarak, proje zaman çizelgesindeki herhangi bir noktada herhangi bir değişikliği sağlamaktan memnuniyet duyarız. İşten çıkarılma, sürecin her iki tarafına da sadece ilişkilerin zararına baskı yapan alakasız bir adım oldu.
Photoshop'tan kodlara ne zaman taşınacağını bilmek önemlidir. Bu adım, iki nedenden ötürü kullandığımızdan çok daha erken:
Photoshop'ta ek zaman harcamak yerine, zamana kod olarak yatırım yapmayı tercih ettik. Eğer bir şeyi mükemmelleştirmeliysek, tüm web sitesi kullanıcıları tarafından kullanılacak ve görülecek olan kod olmalı. Bizim için Photoshop, web sitesinde kullanılabilecek bir tasarım stili oluşturmak için bir araçtı.
Tasarım, ekipteki herkes arasındaki işbirliği hakkında çok daha fazla. Mockup'lar, sürecin çok önemli bir parçasıydı ve müşterinin sitenin nasıl görüneceğini görselleştirmesine yardımcı oldu. Eğer tasarımın genel yönüyle hep memnun olsaydık, onu kodlara taşırdık. Photoshop belgelerinde değişiklik yapmak için geriye ve ileriye giderken zaman harcadık.
Paket servis: Photoshop, tasarım konseptleri oluşturmak için harika bir araçtır. En kısa zamanda kodlamaya geçmek önemlidir. Kodu mükemmel değil, Photoshop'ta değil.
Bu iş akışının güzelliği, web sitesini incelemek ve iyileştirmek için pek çok yer var.
Bunların proje sürecimizde gevşek adımlar olduğunu belirtmek önemlidir. Proje sırasında yeni bir şeye ihtiyacımız olursa, genellikle web sitesine düşebilecek ve sitenin tasarım temasını benimseyebilecek, bağımsız, modüler bir bileşen olarak ele alacağız.
Bu adımların her biri, çalışmamızı şu ana kadar gözden geçirebileceğimiz bir nokta sunuyor. Ayrıca, yeni bir göz setinin farklı bir bakış açısından şeyleri görmesini sağlar.
Bu aşamalardan herhangi birinde, bazı kısımların beklendiği kadar iyi çalışmadığını fark edebiliriz. Tamamdır. Aslında bu iyi. Kötü kullanılabilirliği erken yakalamak başarılı bir web sitesinin anahtarıdır. Geri dönüp sitenin bu bölümlerini tel çerçevelemek, projeyi hayata geçirdiğinde daha iyi hale getirecek.
Anahtar paket servisi: Bir şeyin iyileştirilmesi gerekiyorsa, başlangıç olarak geri dönmek için korkmayın. Bunları erken yakalamak, projeyi hayata geçirdiğinde daha iyi hale getirecektir.
Web sitesinin her bölümünün yüksek standartta tamamlandığından emin olmak için birlikte çalışarak geçirdik. Tarama deneyiminin tutarlı olmasını sağlayarak mümkün olduğunca çok senaryoyu test ettik.
Veriler web sitesinde olduğunda, web sitesini tamamen test edebiliyoruz. Bir projeyi tam olarak test etmeden canlı olarak ayarlamak genellikle çok kolaydır. Hızı, seyir kolaylığı ve en önemlisi satın alma akışını kontrol edebiliriz.
Herkes mükemmeliyetçi olduğu için Apple'dan bahseder ama eminim ki ilk girişimleri mükemmel olmaktan uzaktı. Bugün sevdiğimiz ürünleri bize vermek için son gelişmeleri yapmak zaman ve özveri gerektirir. Popüler cihazların ve platformların çoğunu içeren cihaz laboratuvarımızı kullanarak, deneyimin mümkün olan en yeni platform ve ekran boyutlarında optimize edilmesini sağladık.
Her projeden öğrenme önemlidir, böylece daha iyi web sitelerine yol açan süreçleri sürekli olarak geliştirebiliriz.
Bu proje, projeler arasındaki tutarlılığı teşvik eden kendi kurum içi kitaplık kütüphanemizin doğuşunu gördü. Bir ajansta çalışırken, şu an geliştirilmekte olan düzinelerce projemiz olabilir. Herhangi bir projede çalışan herkes için yetenek önemlidir.
Hepimizin üzerinde çalışabileceğimiz bir temel oluşturmak, bu hedefe katkıda bulunmaya yardımcı olacaktır.
Web sitesinin performansı sadece projenin sonuna doğru değerlendirildi. Başarılı bir yanıt veren web sitesinin yalın ve hızlı olması gerekir. Geniş cihaz yelpazesi ve özellikleri, yepyeni Mac bilgisayarlardan eski akıllı telefonlara büyük ölçüde değişmektedir. Medya açısından zengin bir web sitesi oluştururken, özellikle de geriye dönük olarak iyileştirmeye çalışırken, performansı yönetmek çok zor olabilir.
Manchester'da Upfront Konferansı'nda gördük Yesenia Perez Cruz tasarım dahil olmak üzere bir projenin her aşamasında performans değerlendirmesi hakkında konuşabilir. Geçmişte, bu uygulamamız gereken bir şey. Birden fazla tasarımcının, geliştiricinin ve ön uç geliştiricilerinden oluşan bir ekip olarak, genel büyüklüğü ve performansı (özellikle algılanan performansı) yönetmek daha büyük bir önceliğe sahip olmalıdır.
Bir sayfadaki her şeyin performans maliyeti vardır. Neyin önemli olduğunu önceliklendirmek, web sitesinin sadece hızlı değil, daha fazla cihaz için erişilebilir olmasını sağlar. Bazı eski cihazlarda, web sitesinin yalnızca tarayıcıyı değil tüm cihazını daralttığını gördük. Web sitesini hızlandırmaya çalışmak, web sitesini olabildiğince hızlı yapamadığımız anlamına geliyordu.
Bir dahaki sefere, performansın sürecin her aşamasında olgunlaşmasını sağlayacağız, bu yüzden de bir süre sonra gerçekleşmeyecek.