Web Sitesi Tasarım Tesliminizi İyileştirmek İçin İpuçları

Yayınlanan: 2020-12-17

Bir web sitesi oluşturma sürecinde gerçekleşen birkaç aşama vardır. Basitleştirecek ve standart bir web sitesine bakacak olsaydık, aşamalar şöyle olurdu:

  1. İhtiyaç - Birisi bir sebepten dolayı bir web sitesine ihtiyaç duyar.
  2. Beyin fırtınası - Genel yapıya, hedeflere ve daha fazlasına karar vermek.
  3. Teklif - Müşteri, siteyi inşa ettirecek bir serbest çalışan veya bir ajans bulur.
  4. İçerik - Açılış sayfalarında, site haritalarında vb. Bulunabilecek makaleler, resimler vb.
  5. Tasarım - Bir kişi / ekip, içeriğe göre tasarım ve düzen üzerinde çalışır.
  6. Geliştirme - Bir kişi / ekip, tasarıma dayalı olarak sitenin işlevsel bölümünü geliştirir.

Çoğu zaman burada karıştırabilirsiniz. Yapılan işlerin sırasını değiştirebilirsiniz ve ekip yine de harika sonuçlar üretebilir. Bununla birlikte, aynı proje üzerinde çalışan farklı kurumlardan insanlar olduğunda bu zor olabilir; bu, her şeyle ilgilenebilecek çok yönlü bir ajansı seçmenin ana nedenidir.

Bu makale için, 5. adım olan Tasarımdan 6. adıma, Geliştirme'ye geçiyoruz. Bu, gelişimi yavaşlatarak ve planlama sürecinde daha önce kararlaştırılanları bozarak işlerin ters gidebileceği yerdir.

Bir Tasarımcının Dikkate Alması Gereken Şeyler

"Tasarımcılar kodlamayı bilmeli mi?" yaygın bir sorudur ve çok mantıklı bir sorudur. Bir tasarımcı arkasındaki kodu anlarsa ve ideal olarak bunu (belirli bir dereceye kadar) üretebilirlerse, projeyi daha hızlı tamamlamaları için tüm ekibe yardım edebilir.

Tasarımcılar kodlamayı bilmeli mi?

İşte bunun böyle olmasının birkaç nedeni:

1 - Sonunda, hepsi tarayıcıda sona eriyor.

Figma, Adobe vb.'de oluşturduğunuz tüm tasarımlar tarayıcıda görünecektir. Tüm Tarayıcılar, bir sayfayı oluşturmak için HTML / CSS olarak bilinen bir tür programlama dili kullanır. Javascript kullanılıyorsa tasarımlarınızı interaktif hale getirebilirsiniz.

Buradan alınacak önemli not, herhangi bir tasarımın HTML / CSS'de yapılabilir olmasıdır. Birçok yetenekli ön uç geliştiricisi, teknoloji izin verdiği sürece neredeyse her şeyi uygulayabilir. Ama unutmayın, - her zaman "Yapabilir misin?" İle ilgili değil, "İyi yapabilir misin ve bakımını yapabilir misin?" İle ilgili.

2 - Tutarlılık

Sürdürülebilir olmak, başarılı bir projenin sırrıdır. Kod tabanı bir karmaşa olduğu için mevcut site öğelerini değiştirip yenilerini ekleyerek saatler harcamak istemezsiniz. Bazen yeniden kullanılabilir bileşenlerin çok az olduğu veya hiç olmadığı son derece karmaşık tasarımlar karmaşa içinde sonuçlanır.

Tek bir stili korumaya çalışın

Bazı web tasarımcısı ipuçları:

  • Bileşenler göz önünde bulundurularak tasarım yapın. Çoğu araç artık bu işlevi sağlamaktadır (Figma, Adobe XD, Sketch). Artık can sıkıcı olmayana kadar kendinizi onları daha sık kullanmaya zorlayın.
  • Öğeleri iyi hizalayın. Benzer bölümler arasında aynı mesafe olmalıdır. Örneğin 80px, korunması için iyi bir ayrımdır. Bölümleri burada 80, orada 86, üçte birinde 92 ve diğerinde 78 kullanarak rastgele boşluk bırakmayın. Düzenli ve düzenli tutun.
  • Bir ızgara kullanın! Tüm araçlar bir ızgara sistemi sağlar. İdeal olarak 12 sütun ızgarası seçin.
  • Tasarımınızı geniş ekranlarda (1920 piksel veya üzeri) sergileyin. Bu, geliştiricilerin her bölümün ve arka planlarının nasıl çalıştığını anlamalarına yardımcı olur.

3 - Sitenin ağırlığı

Hepimiz hızlı bir web sitesi istiyoruz, değil mi? Tasarımcı da bunun bir parçası. Şunu düşünün: 8 büyük yüksek çözünürlüklü görsel, dört video ve animasyonlu öğeler içeren bir web sitesi. . Bunu zamanında optimize etmede iyi şanslar. Mümkün olsa da, görüntüleri ve videoları tembel yükleme, yükleme sırasında medyayı optimize etme, daha iyi görüntü dosyası formatlarını destekleme ve yüksek performans için akıllı animasyon yaklaşımları ekleme ek geliştirme süresi ve teknikleri alacaktır.

Geliştiriciler çok deneyimli değilse veya hız konusunda endişelenmiyorsa, web siteniz düşük ve orta seviye akıllı telefonlarda ve dizüstü bilgisayarlarda aşırı derecede gecikebilir.

Geliştiricilere Nasıl Yardım Edilir?

Bir tasarımcı olarak aklınızda tutmanız gereken hedeflerden biri, sitenin görünümünü ve hissini korurken geliştirmeyi daha kolay ve daha hızlı hale getirmektir.

Web'de nelerin kolayca yapılabileceğini düşünmelisiniz.

  • Kutular - Hepsi kutular. Bazı köşeleri yuvarlayabilirsiniz, evet, elipsler (bir kutu içinde tanımlanan) ve daha fazlasını yapabilirsiniz. Ancak, düzen ile etkileşime giren daha karmaşık şekillerle gittiğinizde işler zorlaşır.
  • Doğru bir konumu canlandırmak zordur - Bir görüntüyü tıklayıp ardından metnin diğer tarafına taşımak istediğinizi düşünün. Kulağa "kolay" geliyor ama değil. Görüntünün taşınacağı konum, görüntü alanına ve daha fazlasına göre değişen site kapsayıcısına göre kalmalıdır. Ve sonra görüntü daha büyükse ne olur?
  • Kutu boyutlarının canlandırılması düzeni etkiler. Bu, bir animasyon sırasında öğelerin nasıl sıralanacağına ilişkin herhangi bir değişikliği ifade eder. Bu, tarayıcı için aşırı derecede ağır olabilir ve genellikle büyük gecikmelere neden olur.

Farklı içeriği düşünün!

Metin 2x ile tasarım nasıl görünür? Veya yatay resim yerine portre resmi olarak mı? Editör ekibinin ne yükleyeceğini asla bilemezsiniz. Görüntü oranı veya hatta görüntülerin kenarları gibi kısıtlamalar olmalı mı? Yapabiliyorsanız, bunu tasarımda sergileyin.

Tasarım uzunluğu ve içeriği

Tasarımlarınızı Zeplin gibi araçlarla sağlayın

Figma veya Adobe XD gibi çoğu tasarım aracının tasarımları geliştiricilerle "paylaşmanın" bir yolu vardır. Oradan, ön uç ekibi katmanların renklerini, tipografi ayarlarını, aralıklarını ve diğer görsel özelliklerini inceleyebilir ve bu da onların tasarımlara çok yakın yapışmasını sağlar.

Yazı tipleri veya videolar gibi diğer varlıkları sağlayın

Sitede belirli bir yazı tipi kullandıysanız, bunu geliştiricilere sağlayın. Lisanslıysa ve belirli URL'ler aracılığıyla erişilebiliyorsa, bunu da paylaştığınızdan emin olun. Bir geliştiricinin ilk günden itibaren doğru yazı tipleriyle çalışması önemlidir. Video varsa - bunu da paylaştığınızdan emin olun! Videolar YouTube'da mı, Vimeo'da mı yoksa kendi kendine barındırılan mı?

"Piksel mükemmel" i seçmeyin

Sitenin son görünümünü tasarımla tamamen aynı tutma fikri, geliştirici ekibinizin sizden nefret etmesini sağlamanın kolay bir yoludur ve zamanında yayına başlama şansını yok edebilir. Hemen hemen her durumda tasarım mükemmel OLMAYACAKTIR. Her düğmeden önce tam olarak 18px aralığınızın olduğundan% 100 emin olmak imkansız mı? Ve 19px değil mi? Ya da her başlığın 37 piksel değil 38 piksel olduğunu? Ya da belki her kenarlığın #ddd olduğu ve siyah olmayan ancak% 15 opaklığa sahip bir kenarlığın olmadığı?

Geliştiriciler, site genelinde tutarlılığı sağlamak için burada ve burada küçük hatalar toplarlar. Aynı kuralları izleyen bileşenler oluştururlar. Belirli bir durumda açıkça kasıtlı bir değişiklik olmadığı sürece, bir öğenin panoda aynı olamayacağına dair bir neden olmamalıdır.

Sonunda, kodlanmış web sitesi tasarımın genel görünümünü ve hissini takip etmelidir.

Tasarımda yorum bırakın

Belirli bir öğenin sekmeler, akordeonlar, kaydırıcılar ve benzerleri gibi etkileşimli olmasını istiyorsanız, masaüstünde, mobil cihazda nasıl çalışması gerektiğini ve tek bir takas durumunda tıklanabilir olanı yazmak için birkaç saniye ayırın.

Bir kullanıcı gibi düşünün

İşiniz bittiğinde, bir saniye durun ve siteyi kullandığınızı hayal edin. Yukarıdan aşağıya doğru okuyun, aşağı kaydırın, daha fazlasını görmek için bir yere tıklayın. İş akışında eksik olabilecek herhangi bir şey var mı? Kullanıcı etkileşiminde değişen belirli bir unsurun görünümü var mı? Bu doğruysa ve tasarım yoksa, geliştiricilerinizden bunu çözmeye bırakıyorsunuz, bu da işi strese sokuyor .. Son teslim tarihleri ​​sıkışıksa, genel dosyaları ekibinizle paylaşabilir ve onlara bir birkaç "durum" görünümü geliyor (hangileri olduklarını belirttiğinizden emin olun).

Duyarlı görünümler

Masaüstünde 15 sayfa tasarlamak ve ardından bir mobil sürüm yapmak göz korkutucu. Bunun üzerine biraz farklı bir tablet sürümü yapmak daha da can sıkıcı. Bu yüzden bazı tasarımcılar onu eklemeyi görmezden geliyor. Ancak bu, geliştiricilerin bunu kodla yapması gerektiği anlamına geliyor. Ve bu yüzden kararlar verin. Karmaşık öğeler görürseniz, tüm siteyi yapmasanız bile ideal olarak tablet görünümlerini sergileyin.

Özetle

Tasarımcı, geliştiricinin hayatını bir kabusa veya çok iyi bir deneyime dönüştürebilir. İkincisini başarmanın anahtarı, kullanılan teknolojiyi, HTMl / CSS'yi, hangi etkileşimli öğelerin yapılabilir olduğunu vb. Daha iyi anlamaktır.

Geliştiricilerin etrafında olma şansınız varsa ve belirli öğeler hakkında endişeleniyorsanız, her şeye bir göz atmak için onları arayın. Neyin zor ve neyin kolay olduğu konusunda size kesinlikle ipuçları verecekler.