Web Tasarım Günlüğü arşiv sayfasına hoş geldiniz!
Mobilya üretimi yapan yerli bir firmaya ait web sitesi çalışmamdan bir bölüm.
Hizmetler bölümü için 2 farklı tarz önerdim. İlkinde her kategorideki bütün görseller gözüküyor. Diğerinde ise fare ile üzerine gelinen bölümün görseli gözüküyor. Fakat mobil için, mobilde fare ile üzerine gelme özelliği olmadığından ilk tarzı uygulamak doğru değil.
Bu tür bölümler ile, web sitenizi ziyaret edenlerin, sayfalarınızda gezinirken sizinle iletişim kurma ihtimalleri artar.
Her sayfanın sonunda, firmanın ihtiyacına göre e-posta, arama veya WhatsApp’a ya da sunulan hizmetler gibi bölümlere yönlendirme yaparım.
Bu web sitesi çalışmamda her sayfanın sonunda İletişim Formu kullandım.
YOUR VISION yazısı için farklı bir font kullanarak tasarımı güzelleştirmeye çalıştım.
Ayrıca YOUR VISION hitabını kullandığım için, İletişim Formu’nda Your Name, Your Phone or Email, Your Message şeklinde hitap ettik.
Mimarlık, mobilya, tadilat vb. hizmetler veren işletmelerin ve profesyonellerin web sitelerinde mutlaka GALERİ bölümü olmalı.
Geçmişte tamamlanan projelerin fotoğrafları burada paylaşılmalı.
Ve bu bölüm Fotoğraf Galerisi şeklinde olmalı; tıklanabilir olmalı. Fotoğraflara tıklandığında galeride sağa sola kaydırılabilmeli, kullanıcılar için kolaylık sağlanmalı.
Bazen web sitelerde görseller tıklanarak büyütülmüyor. Tıklanabilir olduğunda da oklar ve kaydırma yöntemi ile galeride gezilemiyor. Tıklanan görsel aynı veya ayrı sayfada açılıyor ve o sayfayı kapatmak veya geri gitmek, diğer görsele aynı işlemi uygulamak gerekiyor. Bu çok yanlış.
Şimdi ben bu web sitede Lightbox ile açılan bir galeri yapacağım. Oklar ile veya mobilde kaydırma yöntemi ile galeride gezilebilecek. İlerleyen günlerde onu da paylaşacağım.
El emeği örgü ürün satışı yapan bir emekçiye ait web site çalışması.
Ana Sayfa’daki Hero bölümü için böyle bir deneme çalışması yapıyorum.
İlk olarak bu bölümü ikiye bölüp sol tarafta yazılı olan kısmı, sağ tarafta ise görsel olan kısmı kullanmayı düşünüyorum.
Aklımda farklı fikirler de var, onları da deneyeceğim ve burada paylaşacağım.
Hizmetlerimiz bölümünün içeriği müşterim tarafından gönderildi. Şu anda her hizmet kategorisi için bir görsel kulanılması istenmiyor. Onun yerine arka planda bir bisiklet fotoğrafı kullandım.
Hizmet açıklamalarının bazıları 3, bazılar 4 satır. Şu an için değiştirilmesi istenmedi ama 3 satır olan kategorilere birkaç kelime ekleyerek dengeyi sağlamak daha doğru olacak.
Masaüstü görünümde ekranı kaplayacak uzunluk sağlanamadı fakat mobil görünümde arka plandaki görseli sabit tutarak hizmet kategorilerinin kaymasını sağlayacağım.
Web site çalışmalarımda 3 farklı Ana Sayfa tasarımı sunuyorum.
Bunu kendi adıma yorucu olarak görmüyorum. Aksine, müşterilerimle olan bağımı güçlendirdiğine inanıyorum.
Bir web sitesi için bana ödenen bir para var. Bunun karşılığında da hizmet bekleniyor. Bu şekilde tasarım alternatifleri ile, müşterilerime tasarımı beğenme zorunluluğundan ziyade, tasarım alternatifleri sunmanın doğru bir davranış olduğuna inanıyorum.
Aşağıda son web sitesi çalışmalarımdan birisine ait SERVİSLER bölümünün tasarım alternatiflerimi sunuyorum.
Tabi müşterime 3 farklı Ana Sayfa tasarımını bir bütün olarak sundum. Burada Web Tasarım Günlüğü‘mde sizinle parça parça paylaşıyorum.
İlk tasarımda görselleri siyah beyaz olarak kullandım. Mouse ile üstüne gelindiğinde renklenecek. Mobilde de tıklandığında renklenerek ilgili sayfaya gidecek.
İkinci tasarımda oldukça sade bir tasarım düşündüm. Fakat biraz daha güzelleştirmek adına ana başlıkların altında kesik çizgiler kullandım.
Üçüncü tasarımda ise daha farklı ve daha hareketli bir tasarım düşündüm. Mouse ile hangi bölümün üstüne gelinirse o bölümün başlığı animasyon ile yukarıda gözükecek ve tüm bölüm o görsel ile dolacak.
Teslim etmek üzere olduğum bir web site çalışmam.
PROJELER bölümünde proje dosyaları paylaşılmak istendi fakat hem Google Drive’ı kullanmak hem de içeriği şifre ile korumak istendi. Sadece ilgili kişiler bu içeriklere erişebilecek.
Müşterimin Google Drive hesabına Full Access verildi ve her proje için oluşturulan Google Drive klasörü o projeye tanımlandı.
Projeye tıklandığında şifre ekranı bizi karşılıyor ve her projeye özel olan şifre girildiğinde Google Drive klasörüne erişilip dosyalar görülebiliyor.
Kanada‘dan bir inşaat firması için yapmış olduğum web site çalışmamdan “TESTIMONIALS” bölümü.
Bu bölüm için müşterimden şöyle bir istek geldi:
Sayfa kaydırıldığında görsel ekranda sabit olarak duruyor ve müşteri değerlendirmeleri bölümleri bu görsel üzerinde hareket ediyor.
Tasarım Eleştiri web sitemde web sitelerini eleştirirken, burada kendi tasarladığım web siteyi de eleştirmek istiyorum.
Hizmetlerimiz sayfasını aşağıda paylaştığım şekilde oluşturdum.
Bir web sitesi projesine başlarken, aşağıdaki bilgileri (konumuzla alakalı birkaçını yazacağım) karşı firmadan temin etmem gerekiyor:
Eğer görseller ve yazılar tarafımca oluşturulacaksa da, mutlaka kendilerinden beni bilgilendirici kısa yazılar talep etmeliyim.
Bu bilgiler bana eksik geldiğinde, web sitesinin içeriği de eksik kalacak ve bu durum web sitesinin tasarımını da olumsuz etkileyecektir.
Ben web sitelerde HİZMETLERİMİZ bölümlerinin çoğunlukla eksik bırakıldığını görüyorum. Sunulan hizmetlere yönelik, her hizmet için ayrı bir sayfa olması gerektiğini düşünüyorum. Tabi bu bilgiler firma yetkilileri tarafından hazırlanmalı. Zorunda olmadıkça stok görsel kullanılmamalı. Ve bu bilgiler bize iletilmeli, bizim tarafımızca web sitesi kusursuz bir biçimde tamamlanmalı.
Tasarladığım web sitelerde modern bir tasarımın yanı sıra, kullanıcı deneyimini de önemsiyorum.
İletişim sayfasında olması gerekenler bir İletişim Formu, iletişim bilgileri ve konumdur.
Ve bu öğeleri doğru konumlandırmaktır.
Yerli bir firma için tasarladığım web sitesinin İletişim sayfasını paylaşıyorum.
Geçen ay (Kasım ayında) tamamladığım web sitenin sayfalarının mobil görünümünü topluca paylaşıyorum.
Ana Sayfa’da Slider kullanıldı. Diğer sayfalarda her sayfanın üstünde farklı birer görsel kullanıldı.
Her sayfanın altında, ziyaretçileri İletişim sayfasına çekebilmek için siyah renkli CTA bölümü kullanıldı.
Masaüstü görünümden başlayarak, mobil görünüme kadar her bölüm titizlikle ayarlandı.
Son web site çalışmalarımdan birisine ait SERVICES sayfasındaki bir bölümü paylaşmak istiyorum.
Sayfada şimdilik çok fazla içerik yok. Ben bu tarz HİZMETLERİMİZ sayfalarında, her hizmet kategorisi için detaylı yazı olması ve en azından birkaç gerçek proje fotoğrafı paylaşılması gerektiğini düşünüyorum. Fakat tabi ki firma tarafından bu bilgilerin bana iletilmesi gerekiyor.
Firma tarafından onlarca proje fotoğrafı tarafıma iletildi. Onları PROJECTS sayfasında kullandık. Bu sebeple SERVICES sayfasında proje fotoğrafları kullanmamayı tercih ettik. İleride bu bölümdeki yazıları daha uzun ve detaylı biçimde yazabiliriz.
Görseller siyah beyaz olarak gözüküyor. Görsellerin üzerine gelindiğinde veya mobil cihazlarda tıklandığında renkleniyorlar.
Web siteyi yayına alsak da, ileride firmanın tercihine göre aşağıdaki renkli hâlini de kullanmayı tercih edebiliriz.
Müşterim el emeği ile yaptığı ürünleri web sitesinde tanıtmak istiyor. Bu ürünler örgü çanta, kıyafet gibi ürünler.
Aslında ilk düşüncesi, web sitesi üzerinden online satış yapabilmek ve ödeme alabilmekti. Fakat bir e-ticaret sitesi sahibi olabilmesi için en azından şahıs şirketi sahibi olabilmesi gerekliydi. Ayrıca e-ticaret web sitesi projesi için bütçesini çok daha fazla arttırması gerekecekti.
Aşağıya bir kanun maddesi ekliyorum:
Evlerde Üretilen Ürünlerin İnternet Üzerinden Satışında Esnaf Muaflığı:
193 sayılı Kanunun 9’uncu maddesine eklenen (10) numaralı bent ile, ayrı bir işyeri açmaksızın ve sanayi tipi veya seri üretim yapabilen makine ve alet kullanmaksızın oturdukları evlerde imal ettikleri malları, özellikle internet ve benzeri elektronik ortamlar üzerinden satanlar esnaf muaflığı kapsamına alındı.
Aldığı Esnaf Vergi Muafiyeti Belgesi ile evde ürettiği el emeği ürünlerini satabilecek fakat ödemeyi ya banka hesabına doğrudan alacak ya da Dolap, Shopier gibi uygulamalar aracılığıyla satış yapabilecek.
Web siteyi markalaşmak adına kurmak istedi. Dolap, Shopier gibi uygulamalar, tıpkı Instagram gibi kurallarını kendisi belirler. Satılan ürün oradan kalkar. Fakat web sitenizde hem kendinizi daha doğru tanıtırsınız hem de istediğiniz her şeyi paylaşabilirsiniz. Yani tüm kontrol sizdedir.
Web site üzerinden kendisi ile doğrudan iletişime geçebilecek ve Dolap, Shopier gibi satış yapmak istediği uygulamalardaki profiline yönlendirme yapılacak.
Projeye başlamadan önce müşterim için bir taslak hazırladım. Web sitesi projelerinde çoğu zaman, müşterilerinize yol göstermelisiniz. Sizinle iletişime geçip ürünlerini tanıtmak istediklerini söylediklerinde bu proje hakkında zaman ayırıp, oturup düşünmeli ve neler yapabileceğinizi not almalı ve bunu müşterinizle paylaşmalısınız.
Ben şimdi bu web sitesi projesinde bu taslağı hazırladım. Hâlâ da üzerinde düşünüyorum. eklenecek ve çıkarılacak çok fazla yer var. Müşterime seçenekler sunacağım.
Olabildiğince basit bir web site isteniyor. Sadece ürettiği ürünlerin ön planda olmasını ve gözükmesini istiyor.
Mesela benim ona sunacağım şöyle bir özellik olacak:
Yeni bir web site projesi.
Grafik tasarımcı için kişisel web sitesi çalışmasına başladım.
Tasarımcılar Behance, Dribbble vb. platformları aktif olarak kullanırlar ve çoğunlukla kişisel web sitesine ihtiyaç duymadıklarını söylerler.
Bu konuda böyle düşünenlerin çok yanlış düşündüklerini söylemeliyim. Bu durum, bazı işletme sahiplerinin Instagram hesaplarını yeterli görmeleri ve web sitesine ihtiyaç duymadıklarını söylemeleri ile hemen hemen aynıdır.
Grafik tasarımcılar, mimarlar, illüstratörler vb. meslek sahipleri müşterileri ile çoğu zaman e-posta üzerinden iletişim kurarlar. Burada alan adlarına ait e-posta adresine sahip olmaları bile onları bir değil birkaç adım öne çıkarır.
Tabi alan adını kaydetmeleri ve sadece bu alan adı üzerinden e-posta adresi kullanmaları tek başına yeterli olmayacaktır. Müşteriniz veya müşteri adayınız, e-posta adresinizin uzantısını (alan adınızı) gördüğünde web sitenizi de görmek isteyecek ve web site adresinizi yazdığında bir web siteye ulaşamazsa bu da kişisel markanızı çok olumsuz etkileyecektir.
Bu “Web Site Tasarımı & Geliştirme” projesinden bahsetmem gerekirse, sitede kişisel bilgiler, sunulan hizmetler, yapılan tasarımlar ve iletişim bilgileri yer alacak.
Behance, Dribbble ve LinkedIn hesaplarına yönlendirme yapılacak. Yani web site sahibi zaten web sitem var diye düşünerek Behance, Dribbble, LinkedIn gibi platformları bırakmayacak. Oralarda da paylaşım yapmaya devam edecek. Web sitesi bu anlamda, kişisel markasını-ismini güçlendirecek. Daha profesyonel gözükmesini sağlayacak.
Kanada’da faaliyet gösteren bir firma için “Logo Tasarımı” ve “Web Site Tasarımı & Geliştirme” projesini tamamladım ve web siteyi yayına aldım.
Çalışma Masası Günlüğü’mde bu konu ile ilgili daha detaylı açıklamalar yaptım.
Web sitedeki sayfaları sizinle paylaşmak istiyorum.
Yayına aldığım bir web sitesi. Bu siteye Google Drive entegre ettik ve burada, istenen klasörleri gösteriyoruz.
Bu sitedeki kullanım amacı şu: Firma, inşaat firması. PROJECTS sayfasında projeleri var ve her projeye özel sayfa açtık.
Her proje sayfasının içinde o projeye özel dosyaların paylaşılması istendi ama bunu hem Google Drive ile yapmak hem de o bölümün şifre ile korunması istendi.
Bu sayfalar, müşterileriyle paylaşılacak ve müşteriler, kendilerine iletilen şifreler ile proje dosyalarına ulaşılabilecekler.
Tabi her projeye özel birer şifre belirlendi.
Ayrıca PREVIEW ve DOWNLOAD özellikleri de eklendi. Dosyalar tarayıcı üzerinden görüntülenebiliyor veya doğrudan indirilebiliyor. Bu yetki, kişiden kişiye göre değiştirilebilir, ayarlanabilir de.
Bisiklet tamiri ve satışı yapan işletmenin web sitesindeki İletişim sayfasını biraz renklendirmek istedim.
Sayfa içeriğini biraz daha arttırarak tam sayfayı doldurabilmesini sağlayacağım.
Mobil görünümde ise kaydırma yapılırken arka plandaki görseli sabit tutmayı düşünüyorum. İki farklı tarzı deneyerek müşterime sunacağım ve hangisini seçerse onu kullanacağım.
WHY US bölümünün altında 3 ikon ve 3 başlık kullandım. İçerikler biraz kısa ama müşteriniz tarafından size hangi içerikler iletildiyse onları kullanmak zorunda kalıyorsunuz.
İçerik az olduğu için PARTNER LOGO bölümünü bu bölümün altına ekledim. Oraya biraz hareket katacağım. Logoların sayısı daha fazla olduğu için otomatik olarak kayacak o bölüm. Yakında video olarak paylaşacağım.
Firma logosu turuncu renkte ve web sitede butonlarda turuncu renkler kullandığımız için; ayrıca web sitede beyaz arka planlı içerik de çok fazla olduğu için biraz renklendirmek gerekli diye düşündüm ve bu sebeple turuncu arka plan kullandım.
Dün tamamladığımdan bahsettiğim web sitenin Header bölümünden bahsetmek istiyorum.
Firmanın sunduğu hizmet ile uyumlu olması açısından menüde aktif olan sayfada aşağıdaki şekilde bir arka plan rengi uyguladım. Aynı şekilde hover efekti olarak (fare ile üzerine gelindiğinde) da bunu uyguladım.
Ayrıca Header bölümünde biraz farklı bir stil denedim. Kenarlarda boşluk bıraktım. Sayfa aşağı indirildiğinde de sayfanın üstüne sabitleniyor.
Geçen ay başladığım web sitesi projemi tamamlamanın mutluluğunu yaşıyorum. 🎉
Web site, firmanın alan adında henüz yayınlanmadı. Kendilerinden son bir onay bekleniyor.
Geçen ay bu web site çalışmam ile alakalı paylaşım yapmıştım. Birkaç değişiklik yapıldı tasarımda.
Ayrıca firmaya logo tasarımı çalışması da yaptım.
Güzel bir web site oldu. Diğer sayfaları da ilerleyen günlerde paylaşayım.
Yeni fabrikası inşa edilen bir firma için öncelikli olarak logo tasarımı ve araç giydirme tasarımı çalışmam olacak.
Ağırlıklı olarak “Web Site Tasarımı & Geliştirme” üzerine çalışsam da, tasarımcı olarak uzun yıllar çalıştığım için, firmaların ihtiyaçları doğrultusunda tasarım hizmeti de veriyorum.
Bu projeler tamamlandıktan sonra firmanın web sitesini de yapacağım. Sonrasında da kurumsal kimlik tasarımı üzerine çalışacağız.
Fakat firma, öncelikli olarak logo tasarımını seçmeyi istiyor.
Çalışma ortamımdan bir fotoğraf paylaşıyorum. 😊
Tamamladığım web sitesi çalışmalarımdan birini daha paylaşmak istiyorum.
ABD ve Kanada’da endüstriyel makine satışı yapan bir firmanın web sitesi.
Web sitede farklı ürün kategorileri için sayfalar var. Ayrıca her makine için ayrı bir sayfa mevcut. Bu her sayfada, o makinenin teknik özellikleri yer almakta.
Tamamladığım web sitesi projelerimden birisi.
HİZMETLERİMİZ bölümü. Firma tarafından sadece Asansörlü Taşıma bölümü için bir görsel temin edildi. Bu sebeple diğer bölümlerde stok görsel kullanmak durumunda kaldım.
Özellikle bir ili, ilçeyi veya birkaç ilçeyi hedefleyen firmaların stok fotoğraf kullanmasını doğru bulmuyorum. Firmaya ait gerçek fotoğraflar, potansiyel müşteri ile daha sıcak bir bağ kurulmasını kolaylaştıracaktır.
Dün de paylaştığım, mobilya üretimi yapan yerli bir firmaya ait web sitesi çalışmam.
Ana Sayfa’nın en alt bölümünde Müşteri Yorumlarımız ve İletişim bölümüne de yer verdik. Müşteri Yorumlarımız bölümü, daha fazla müşteri değerlendirmesi ile Hakkımızda sayfasında da bulunacak.
Belki Ana Sayfa’da daha fazla müşteri değerlendirmesi gösterebilirim. Sağa ve sola ok ekleyerek ve otomatik oynatma ile sağdan sola doğru birkaç saniyede bir yeni müşteri değerlendirmesinin gözükmesi sağlanabilir. Bu 2 seçeneği müşterime sunacağım ve o hangisini tercih ederse onu kullanacağım.
İletişim sayfasında ise bu sayfadaki iletişim bilgileri ve haritaya ek olarak İletişim Formu bulunacak.
Mobilya üretimi yapan yerli bir firmaya ait web sitesi çalışmamda Ana Sayfa’da bizi karşılayan Hero görselinin hemen altında sunulan hizmetlerle ilgili bir bölüm düşünüyorum.
İlk düşüncem, siyah veya kahverengi bir arka plan üzerinde beyaz yazılar idi. Fakat mobil görünümü düşündüğümde, mobilde 2 veya 3 satır olması gerekeceğinden dolayı tasarım anlamında kötü bir görünüm olabileceğini düşündüm.
Bu sebeple yazıların sağdan sola doğru kayarak gelmesi daha doğru olacak gibi gözüküyor.
Bu web sitesi çalışmamızda müşterimiz tarafından OUR PARTNERS bölümündeki logoların siyah beyaz olması ve fare ile üzerine gelindiğinde renkli olarak gözükmesi istendi.
Logo sayısı ekranda görünenden fazla. Bu sebeple otomatik olarak oynatma aktif. Her 5 saniyede bir sola doğru kayıyor ve diğer logolar gözüküyor.
Müşterimin isteği üzerine, fare ile üstüne gelindiğinde renklenmesi sağlandı ama ben özellikle mobil görünümler için bunu çok fazla önermiyorum.
Mobilde fare imleci olmadığı için, tıklandığı zaman renklenme sağlanacak. Bu da mobil ziyaretçiler için çok fazla kullanılan bir şey değil.
Ama istek üzerine bu şekilde yapmak durumunda kaldım.
Dün paylaştığım inşaat firması web sitesinin CONTACT sayfası.
Şimdilik sadece İletişim Formu eklendi.
Diğer iletişim bilgileri ve harita daha sonra eklenecek.
Her sayfanın en üstünde kullandığımız görseller için bu sayfada İletişim sayfası ile uyumlu olabileceğini düşündüğüm bir görsel kullandım.
Kanada merkezli bir inşaat firması için tasarladığım ve geliştirdiğim web sitenin SERVICES sayfasını paylaşmak istiyorum.
Web sitede gereksiz detaylardan uzak duruldu. Olabildiğince sade, minimal bir tasarım tercih ettik.
SERVICES sayfasında 4 bölüm bulunmakta. Her servis bölümü için 1 görsel tercih edildi. Ayrıca her servis bölümü için tarafıma sağlanan yazıların uzunluğunu ve madde madde yazıların da olduğunu hesaba katarak bu tasarımı uygun gördüm ve firma tarafından da beğenildi.
Sayfanın tamamını görmek için aşağıda görsele tıklayabilirsiniz.OCAK