Web Sitesi Tasarım Sürecine Tarayıcıdan Yaklaşma

"Çılgınlara, uyumsuzlara, isyancılara, baş belası olanlara, kare deliklerdeki yuvarlak çivilere... Olaylara farklı bakanlara - kurallardan hoşlanmayanlara... Onlardan alıntı yapabilir, onlara katılmayabilir, onları yüceltebilir ya da övebilirsiniz. onları karalayın, ancak yapamayacağınız tek şey onları görmezden gelmek çünkü onlar bir şeyleri değiştiriyor…” — Apple'ın Farklı Düşün kampanyası, Steve Jobs, 1997.

Tasarımcılar çoğu zaman, web sitesi tasarım sürecinde geleneksel tasarım araçlarını kullanarak ekranların statik maketlerini oluşturmaya devam ediyor. Ancak bazı tasarımcılar dev bir adım atıyor ve onları atlıyor, doğrudan kodlamaya gidiyor, tasarımları tarayıcıda oluşturup ayarlıyor ve tasarımlarını insanlara gerçek zamanlı olarak göründükleri gibi test ediyor. Çılgınlar mı, uyumsuzlar mı, isyancılar mı?

Tipik olarak, geleneksel web sitesi geliştirme süreci, planlama, içerik stratejisi, tasarım, tel çerçeve oluşturma, prototip oluşturma, test etme, geliştirme, yayınlama vb. dahil olmak üzere birçok aşamayı içerir. Ancak tasarım aşamasında, "piksel mükemmelliği" duyarlı site tasarımları üretmenin ve tasarım araçlarını tamamen atlamanın başka bir yolu olabilir mi?

Duyarlı tasarımın yükselişi ve kullanımdaki cihazların çeşitliliği (cep telefonları, tabletler, dizüstü bilgisayarlar, masaüstü bilgisayarlar, saatler) ile her şeyi tutarlı tutmak çok daha zor - ve dikkate alınması gereken daha fazla hareketli parça ile web siteleri ve arayüz tasarlama yaklaşımı değişiyor.

Bir tasarımcının uzman bir kodlayıcı olması gerekli olmasa da, bir çözüm, tasarımcıların bir web sitesini yönlendiren kodla doğrudan çalışmaya başlamasıdır. Sadece biraz HTML ve CSS ile kod yazabilen tasarımcılar, kendilerini herhangi bir takım için harika bir varlık olarak görecek ve genel olarak büyük bir avantaja sahip olacaklardır.

Niye ya? Tasarımcılar, tüm karmaşıklıklarıyla uyumlu bir web sitesi tasarımı projesiyle uğraşırken, tipik olarak, 10 farklı çözünürlük ve görünüm alanında bir bileşenin (örneğin bir üstbilgi veya altbilgi) statik bir tasarımını oluşturmaya zamanları olmaz. Yalnızca en popüler cihazlar için tasarım yapsalar bile, yine de farklı en boy oranlarına, ekran yoğunluğuna ve ekran boyutlarına sahip 4-5 ekranı dikkate almaları gerekecek. Az söylemek küçük bir görev yok.

Web Sitesi Tasarımı Zorluklarını Önce Kalem ve Kağıtla Çözmek

Farklı bir web sitesi tasarım yaklaşımı ve planlama sürecini keşfedelim.

İlk aşama, iş perspektifinden genel proje hedefleri, hedef kitle, dönüşüm stratejileri, çeşitli performans beklentileri vb. hakkında sorular soran bir müşteri anketi ile başlar. Bu, müşterinin ihtiyaçlarını ve genel olarak projeyi daha iyi anlamak ve hatta daha verimli olmak için gerçek tasarım aşaması başlatılmadan önce yapılır.

Bir sonraki adım, özetin anlaşıldığını doğrulamak için projenin bir taslağını yazmaktır. Bu, fazla deneyime veya uzmanlığa sahip olmayabileceğiniz bir alanda projeler üzerinde çalışırken yararlıdır. İşlevsel bir özellik olarak adlandırın - ancak daha az teknik.

Bu, terminolojileri, anahtar kelimeleri ve süreçleri tanımlamaya yardımcı olur. Projenin karmaşıklığına bağlı olarak, birkaç senaryo ve kullanıcı akışı yapmak iyi bir fikirdir - tipik olarak, işe alım akışı, bir sitede arama ve gezinme veya bir e-Ticaret sitesiyse "sepete ekleme" ve ödeme akışı.

Tel Çerçeveleme ve Prototipleme

Prototipleme, web sitesi tasarım sürecindeki bir sonraki aşamadır. Sayfa düzeni, işlevler ve site sayfalarının farklı cihazlarda nasıl görüneceği hakkında konuşmak için hızlı tel çerçeveler oluşturmak iyi bir başlangıçtır. Farklı şablon ve bileşenlerden oluşan düzinelerce tel kafes oluşturmak fazla zaman almaz. Bunlardan basit bir web sitesi prototipi oluşturulabilir ve projenin karmaşıklığına bağlı olarak InVision, Adobe XD, Balsamiq, Moqups veya Axure gibi prototipleme araçları kullanılabilir.

Mood Panoları ve Arayüz Envanteri

Bir sonraki adım bir ruh hali panosu oluşturmaktır: tasarımcının, müşterinin ve diğer paydaşların diğer web sitelerinde beğenebilecekleri şeylerin bir koleksiyonu—düzenler, görünüm ve his, renkler veya yazı tipleri, simgeler, resimler vb. Bu, sitenin genel görünümünü ve hissini tanımlamaya yardımcı olacaktır. Müşterinin bir marka oluşturma stil kılavuzu varsa, bu dikkate alınmalı ve yeni site tasarımına dahil edilmelidir.

Çeşitli eserler (tel çerçeveler, prototipler, maketler, ruh hali panoları vb.) onaylandıktan sonra bir arayüz envanteri yapmak iyi bir fikirdir.

Bir arayüz envanteri, arayüzünüzü oluşturan parçaların kapsamlı bir koleksiyonudur.

Brad Frost

Sıfırdan duyarlı web tasarımı yapıyorsanız, projenin oluşturulacağı tüm bileşenleri ve öğeleri yazarak başlayın. Sırasız bir liste gayet iyi iş görür ve kesinlikle hiç yoktan iyidir. Örneğin tablolar, düğmeler, resimler, tipografi, medya, formlar, gezinme, bileşenler vb.

Tarayıcıda Tasarım

"Tarayıcıda tasarım" , duyarlı web tasarımının yükselişiyle popüler hale gelen bir terimdir. Sketch gibi tasarım programlarında harcanan saatleri en aza indirmek için tasarımcılardan tasarım aşamasını tarayıcıya taşımaları ve düzen ve stil için CSS kullanmaları istendi. Bu web sitesi tasarımı yaklaşımı, birçok adımı kestiği için daha verimli olduğunu kanıtlıyor.

HTML modeline odaklanarak ve tasarım fikirlerini "tarayıcıda" CSS ile test ederek, genellikle Sketch gibi diğer tasarım araçlarında sayfaların statik maketlerini oluşturmak için harcanan zamandan tasarruf edilebilir. Tasarımcıların iyi bir kod düzenleyiciye sahip olmaları ve değişiklikleri gerçek zamanlı olarak görebilmeleri için iyi bir tarayıcı yenileme yöntemi bulmaları iyi bir fikirdir. Örneğin Sublime Text ve Codekit harika bir kombinasyon.

Olduğu gibi yapılandırılmış HTML ve CSS, sizi kalıplar hakkında düşünmeye zorlar ve sizi kontrol altında tutar. Aynı yapıyı korurken kolayca kopyalanabilen, çoğaltılabilen ve dinamik verilerle doldurulabilen HTML bileşenleri oluştururken modülerlik hakkında düşünmek daha kolaydır. Belirli bir değişiklik oluşturmak istiyorsanız, o öğeyi açıkça hedeflemeniz veya başka bir CSS sınıfı eklemeniz gerekir.

Başlıklara stil eklediğinizde, geçersiz kılınmadıkları sürece site genelinde tutarlı olacaklardır. Aynı şey diğer elementler için de geçerli. Bu tür bir düşünce sizi standartlaştırmaya, ortak öğeleri bir arada gruplandırmaya, önceden biçimlendirilmiş öğeleri mümkün olduğunca yeniden kullanmaya ve en önemlisi her şeyi modüler tutmaya zorlar.

Tek bir CSS bildirimi ile daha iyi dokunma hedefleri için düğmelerdeki dolguyu değiştirebilir ve doğrudan bir cep telefonu, tablet ve masaüstünde test edebilirsiniz. Bu, Photoshop veya Sketch'te kolayca yapılmaz çünkü diğer öğeler mizanpajda birbirinin farkında değildir ve bir şeyi her yeniden boyutlandırdığınızda nesneleri yeniden düzenlemeniz gerekir.

Farklı bir başlık renk şeması denemek ister misiniz? Sadece birkaç satırlık CSS kodu ile çalışarak, tüm HTML şablonlarında, tüm cihazlarda ve ekranlarda değişiklikler anında görülebilir. 20 statik maketiniz olduğunda bu tür bir esneklik kolayca taklit edilemez. Elbette, yeniden kullanılabilir bileşenler için Sketch veya Adobe XD'de "semboller" kullanabilirsiniz, ancak bunlar CSS kadar çok yönlü değildir.

Bu aşamada, çeşitli teknik kararların alınması gerekecektir. Cevaplanması gerekecek sorular şunlardır:

• Bir CSS ön işlemcisi kullanacak mısınız? (önerilen)
• Düzen için ne tür duyarlı ızgara kullanacaksınız?
• Kullanmak istediğiniz yazı tipleri satın alınabilir mi? Müşterinin premium web yazı tipleri için bütçesi var mı, yoksa mevcut ücretsiz web yazı tiplerini kullanmaya mı başlayacaksınız?
• Çok renkli mi yoksa tek renkli simgeler mi kullanacaksınız? Boyut site genelinde değişecek mi? Aşağıda, özel olarak çizilmiş simgelere mi yoksa zaten var olan bir simge paketine mi güveniyorsunuz? Simgelerinizin hangi boyutlara uyması gerekecek?

Yazı Tipleri ve Duyarlı Web Tasarımı Sorunu

Duyarlı bir web tasarım projesi için yazı tipi seçmek zor olabilir. Pek çok olasılık ve bir o kadar da tuzak var. Tasarım tarayıcıda kullanılacağından, bunları denemek için en iyi yer burasıdır. Yazı tipinin okunabilirliği boyuta, ağırlığa, renklere ve işlemeye bağlı olarak değişebilir, bu nedenle tasarımcılar yazı tiplerini doğrudan tarayıcıda deneyerek işlerin doğru göründüğünden ve istenen beklentilerin karşılandığından emin olabilirler.

Yazı tiplerini seçmek ve test etmek ve yazı tipi kombinasyonlarını denemek için birçok çevrimiçi araç vardır. Typetester ve Typecast'te çeşitli hizmetlerden ve dökümhanelerden farklı yazı tipleri bulunabilir ve test edilebilir. Tasarımcılar, Typekit veya Fonts.com gibi belirli bir yazı tipi abonelik hizmetiyle çalışırken, yazı tiplerini oluşturabilir ve doğrudan sayfa şablonlarında test edebilir. Yeni yazı tipleriyle bir Typekit paketi oluşturmak basit ve hızlıdır ve belirli yazı tiplerinin web sayfalarının performansını nasıl etkileyeceğini kolayca görebilirsiniz.

Marka Tarzına Uyan Simgeler

Özel simgeler çiziliyorsa, boyut, ızgara ve stilin tanımlanması gerekir. Örneğin, Illustrator'da çalışırken her çalışma yüzeyi bir simgeyi temsil eder. Simgeler, Illustrator'dan SVG veya PNG olarak kolayca dışa aktarılabilir ve daha sonra Icomoon gibi hizmetlerle bir simge yazı tipine dönüştürülebilir. Vektör simgelerinin (SVG) kullanılması önerilir, çünkü vektörler çözünürlükten bağımsızdır, bu nedenle yüksek tanımlı (Retina) ekranlarda nasıl göründükleriyle ilgili herhangi bir endişe yoktur.

Web Sitesi Tasarım Sürecini Kontrol Altında Tutmak için Bir Stil Rehberi ve CSS

Düzinelerce şablon ve bileşenle tarayıcıda tasarım yapsak bile, potansiyel olarak bir şeyin nerede ve ne şekilde kullanıldığının izini kaybedebiliriz. Merkezi bir depo olarak tüm bileşenlerin bir stil kılavuzunu oluşturmak iyi bir fikirdir. UI bileşenleri ve öğelerini web sayfalarında birleştirerek bu stil kılavuzundan belirli sayfa şablonları oluşturulacaktır.

UI bileşenleri, sayfalandırma, ürün listeleme, resim galerisi, kalıcı pencereler, form öğeleri vb. gibi şeyler olabilir ve şablonlar için yapı taşları olarak kullanılır. Belirli bir UI bileşeni oluşturmayı test etme zamanı geldiğinde her şeyi tek bir yerde tutmak gerçekten kullanışlıdır.

CSS ile bileşen stillerini ayrı dosyalara ayırmak en iyi uygulamadır. Örneğin, sayfalandırma stili _pagination.scss içinde, form öğeleri _form.scss içinde olacak ve tüm bu dosyalar, diğer dosyalarla (değişkenler, mixin, vb.) birlikte tek bir SCSS dosyasına dahil edilecek.

Birkaç kişi aynı proje üzerinde çalışırken style.scss düzinelerce “küçük dosyadan” oluşsa da, her şey daha küçük parçalara ayrılırsa değişiklikleri (kaynak kontrolü kullanarak veya kullanmayarak) takip etmek daha kolaydır. Ekibin her site bileşenini takip etmesi gerekeceğinden, web sitesi tasarım projesi üretime girdikten sonra stil kılavuzunu korumaya devam etmek önemlidir.

Stil Sayfalarını Kullanma – Modüler CSS

Geliştirme açısından, modüler CSS yazmak için birçok yaklaşım vardır. En bilinenleri SMACSS (CSS için Ölçeklenebilir ve Modüler Mimari), BEM (Blok, Öğe, Değiştirici) ve OOCSS'dir (Nesne Yönelimli CSS). Sonunda kendi yaklaşımınızı geliştirseniz bile öğrenecek çok şey var. Bu noktada, kolayca yeni web sayfaları oluşturmanızı sağlayacak güzel bir UI bileşenleri ve web sayfaları koleksiyonunuz olmalıdır. Stil kılavuzundan öğeleri kopyalayıp yapıştırabilir ve gerektiğinde yeniden düzenleyebilirsiniz.

Her şey modüler olduğu için tasarım ve kod tutarlılığı konusunda endişelenmenize gerek yok; ancak bir UI bileşenini sistem genelinde ayarlarsanız, stil kılavuzunu değişikliklerle güncellemeniz (veya yeni bileşeni eklemeniz) gerekeceğini unutmayın. Her şeyi düzenli tutmak için, Gulp veya Grunt gibi web sayfalarında çalışırken bir tür şablonlama/otomasyon yaklaşımı kullanmak en iyisidir.

Sıradaki ne? Tarayıcıda Tasarım

Artık UI bileşenlerinin, belgelenen her öğenin ve bu bileşenlerden oluşturulan web sayfalarının merkezi bir havuzuna sahipsiniz. Bu noktadan sonra, "tasarımın" çoğu doğrudan kodda yapılacağı ve tarayıcıda ön izlemesi yapılacağı için, tasarımcıların favori tasarım araçlarını açmaları gerekmeyecek gibi görünüyor.

Belirli bir değişikliğin tasarımı nasıl etkileyeceğinden emin değil misiniz? Artık bir başlıkta bir yazı tipinin nasıl değiştiğini veya bir düğmenin boyutunu ve rengini değiştirmenin tasarımı nasıl etkileyeceğini görmek için tasarımınızı farklı cihazlarda ve tarayıcılarda aynı anda önizleyebilirsiniz.

Özel web yazı tiplerini kullanırken, daha fazla yazı tipi ağırlığı eklemek sayfa yükleme performansını nasıl etkiler? WebPageTest gibi hizmetleri kullanarak devam eden web sayfası performansını test edebilir ve gerçek sonuçlar hakkında bilinçli kararlar verebiliriz. Bunu Photoshop veya Sketch'de kesinlikle yapamayız.

Bir web sitesi tasarım sürecinde HTML ve CSS ile çalışmak ve tarayıcıda çalışmak her tasarımcı için uygun olmayabilir. Ancak tasarımcılar, çalışmalarının çeşitli cihazlarda ve ekran boyutlarında nasıl göründüğüne gerçekten önem veriyorsa, her seferinde mükemmel olduğundan emin olmaları gerekir. Statik bir tasarım maketi olarak harika görünen bir şey, bir mobil cihazdaki bir web tarayıcısında görüntülendiğinde arzu edilenden daha az görünebilir. Web tasarımlarını herkesin göreceği bir ortamda… tarayıcıda oluşturmak ve test etmek, bilgili tasarımcıların işidir.

Toptal Tasarım Blogunda daha fazla okuma:

• Duyarlı Tasarım - En İyi Uygulamalar ve Hususlar
• Etkili Bir Açılış Sayfası Nasıl Tasarlanır
• E-Ticaret Web Sitesi Tasarımı İçin En İyi Kılavuz
• Web Sitesi Yeniden Tasarımının Temelleri – Bir Vaka Çalışması
• Tasarımın İtici Güçleri – Bir Web Sitesi Yeniden Tasarım Vaka Çalışması