Begum G.
Begum G.
8 Ocak 2023 15:15 Tarihinde gönderildi

PROJE HAKKINDA

Eşimin babası Brugge ve Zwin bölgesinde uzmanlaşmış bir tur rehberi. Onun için bilgi alma amaçlı, basit, sade bir websitesi hazırlamak istedim.

DESTEK TALEBİ

Websitenin mobile look kısmı neredeyse hazır gibi. Prototypeleri da neredeyse hazır, onu hemen link olarak paylaşabilirim:

https://www.figma.com/proto/91PbcIxKSJQcC2CHxqE18u/Zwin%26Zwaan?page-id=1%3A9&node-id=24%3A1043&viewport=-733%2C301%2C0.5&scaling=scale-down&starting-point-node-id=8%3A160

Fakat websitesinin laptop homepage görünüşü beni oldukça zorluyor. Fotoğraf ve illustration kombinasyonu benim için zor bir şey. Fakat sanki bir yürüyen insan illustrationu da güzel duracak diye de düşünüyorum. Bu kombinasyon hakkındaki düşüncelerinizi merak ediyorum.

Bir yandan Mobile look un acılışında bir video-amination yer almakta, dolayısıyla o efekti büyük bir ekranda nasıl yaratabilirim, öyle bir efekt büyük ekranda çok fazla mı olur, o kısmından da emin olamıyorum. Bu konuda bir öneriniz varsa çok sevinirim.

Not1: Prototype da Tours kısmını daha dolduracağız. O kısım henüz bitmedi, onu bildirmek istedim.

Not2: Beni şu ana kadar en çok zorlayan şey video-animation kısmı oldu. Prototypeta da göreceksiniz ki muhteşem (hızı, bittiği yer vs) bir durumda değil. Bittiği yerler birbirini tutmuyor ama beynimin artık %99 unu kullandığım için, pes edip öyle bıraktım bunu dün bu şekilde :) Bu kısım için henüz ayrıntılı bir araştırma yapmadım. Dün, sadece bir plug-in ile kendi kendime bir şeylere tıklayarak böyle bir şey denedim. Bu hafta bu animation-video kısmını daha ayrıntılı bir şekilde araştıracağım. Dolayısıyla bundan daha iyi olacağını düşünüyorum, umut ediyorum :)

Not3: Ekte Laptop görünümünün gidişatını görebilirsiniz. Hala bir karar veremedim. Örnekler kötüden iyiye göre numaralandırılmış durumda. Dolayısıyla 8-9un en iyi alternatifler olduğunu düşünüyorum. Seçtiğim görselin renginden dolayı, logonun arkasına beyaz bir fon koymak şart gibi sanki okunurlugunu arttırmak için.
Bu projede en çok yardımınızı alabileceğim alan burası sanırım. Örnek websitesi araştırması yaptım fakat pek bir şey de bulamadım. O yüzden bir şeyleri hayal etmem oldukça zor oldu benim için bu laptop görünümünde.

Yardımınız için şimdiden çok teşekkürler!
Yorumlarınızı heyecanla bekliyorum! :)

İyi günler dilerim.

Begüm.

Eray Karayel
Eray Karayel
10 Ocak 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Merhabalar.

Öncelikle detaylı açıklamalarınız için teşekkür ederim ve ellerinize sağlık.

Sorularınızı cevaplamadan önce kısaca figma linki üzerindeki mobil tasarımla başlamak isterim.

Aslında bir web sitesini tasarlarken öncelikle teknik olarak desktop'ı tasarlamak çok yararlıdır. Onu daha sonra mobile uyarlamak hem tasarım açısından hemde teknik açıdan çok daha kolaydır. Tavsiye ederim ama bu konularda tek doğru yoktur.

Mobil görünümden önce vazgeçtim buradaki desktop tasarımlarından başlamaya karar verdim.

Nedeni şu; Arayüz tasarımı yaparken objeleri yerleştireceğimiz alanları kısıtlamak çoğunlukla bize hareket alanı katar. Bu nedenden ötürü kullandığınız alana dikkat etmek en temel unsurlardandır.

Ne demek istiyorum? Arkaplan hariç olmak üzere mesela 1000px'lik bir genişliği hedefleyerek siteyi tam ortada bu 1000px'lik alana sığdırmanız yararlı olabilir. Bu ölçü değişken olmakla birlikte hem hizalama sorunlarının önüne geçer hemde daha optimize bir görünüm elde edilmesini sağlar. Yani tasarım yaparken bir broşür gibi alanın her yerini rastgele doldurmamız teknik olarakta çok kolay bir şey değil.

Bu örneği biraz açalım. En sondaki desktop tasarımı üzerinden tek tek anlatıyorum;

-Arkaplandaki maskeli görsel aynı şekilde yerleştirilir.

-Header dediğimiz logo ve menünün olduğu yer daha derli toplu ve dolu görünmesi için hayali bir 1000 px içerisine düzenli bir şekilde yerleştirilir.

- İçerideki metinleri, arkaplanı olan bir kutu ya da tasarım zevkinize göre farklı bir şekilde daha içi dolu bir şekilde yerleştirebilirsiniz. (Yine 1000px eninde ortalayarak.)

-Footerın da body içerisindeki renkten ayrı olarak negatif renkler olması başarılı bir düşünce.

Bu bağlamda desktop içeriğinin sadeden ziyade olmadığı görüşündeyim. Burada içerik çalışması çok önemli. Belki 3. tasarımınızdaki gibi bir arkaplanın altında bu belirttiğiniz yerlerin harita üzerinde zaman tüneli gibi kaydırdıkça özet farklı hikayelerinin olduğu, insanların ilgisini çekecek içerikleri de sunmak yararlı olabilir. Sonuçta burada anlatılacak hikaye kırıntıları, insanların daha çok ilgisini çekecek. Burada "Bunları yazdıktan sonra bana ne gerek var" gibi bir düşünce oluşabilir. Ancak şöyle düşünün. Kitaptan uyarlama filmlerin akabinde kitap satışları da fazlasıyla artmakta. Başka bir deyişle özellikle kişisel gelişim alanındaki seminerleri tüm detaylarıyla kitaplaştıran kişilerin seminerlerine çok daha fazla kişi katılmakta... Bu yüzden içerik paylaşmaktan korkmamanız tasarım içni de önemli bir adımdır. Bu nedenle sadece tasarıma bu aşamada yorum yapmak çok doğru değil.

Eray Karayel
Eray Karayel
10 Ocak 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Figma bağlantısındaki mobil görünüme baktığımız zaman ise yine alan kullanımıyla alakalı bir kaç şeyden bahsetmek istiyorum.

Öncelikle mobil görünüm'e geçildiğinde sadece özellik ve içeriklerin istenilen en ölçüsüne optimize edilme olayı olarak bakmak mümkündür. Elbette deneyim noktasında çok daha derinlikler mevcut fakat hepsini bir arada sıkıştırırsak sorun olabilir.

Bu bağlamda mobildeki ilk başta çıkan animasyon olayı oldukça tatlı. Elinize sağlık. Bu yapıyı masaüstü görünümde de sağlayacaksanız o zaman sorunumuz yok.

Diğer yandan header ve footer kullanımı mobil görünümde oldukça farklı bir hal alır.

Header'da logo, menü, ikonlar gibi detaylar olabilirken footer genellikle mobil görünümde gizlenmesi tercih edilir. Gizlenmiyor bile olsa footer ekranın altına yapıştırılması tercih edilmez çünkü o alan o kadar önemli değildir. Diğer anlamda bu kadar ön plana çıkmasını istemeyiz. Eğer sayfanın altına yapışmasını istediğimiz bir bölüm varsa bunu da menü şeklinde kolay ılaşılailecek ikonlar yerleştirerek yapabilirsiniz. Buna zaten mobile navbar diyoruz. Bu şekilde bir tercihiniz de olabilir.

Diğer taraftan mobildeki logoya tıkladığımızda beklenen hareket menünün açılması değil anasayfaya gitmektir. Ayrıca menünün açıldığı 3 çizgi (hamburger menü) konum olarak mavi alanda yer alabilir. Bu anlamda logoyu sola yaslamak ya da ortada bırakmak, sola farklı bir özellik eklemek gibi detayları üzerinde kararlaştırabilirsiniz.

Sayfanın içeriklerinin yerleştirilmesi tamamen tasarım mantığınızla alakalı çözebileceğiniz bir sorundur. Sağ üst tarafta "Home" vb konumu belirten menü başllığı görünümünden ziyade daha yerleşik ve başlık şeklinde kullanıcının bulunduğu sayfayı betimleyebilirsiniz. (anasayfaya anasayfa diye bir başlık yerleştirmeyin tabi)

Bunun haricinde oldukça tatlı bir çizgi yakalamışsınız elinize sağlık.

Eray Karayel
Eray Karayel
10 Ocak 2023
Durum Güncellendi Geliştirmek Gerekiyor

USTANIN YORUMU

Sorularınızın üzerinden tekrar geçmek gerekirse;

- Fotoğraf / İllustrasyon uyumu her zaman mümkündür. Yeter ki arasındaki ilişkiyi tasarımsal anlamda kurun. Fakat buradaki asıl zorlandığınız şey bence içerik. Önceki mesajlarımda ayrıca içerik konusundan bahsetmiştim. Bu nedenle içerikte nelerin olmasını istediğinizi normal bir word dökümanına bile yazarak çalışmanız ilk adım olarak çok yararlı olacaktır.

- Mobil görünümdeki hareketi masaüstü görünümde de kolaylıkla oluşturulabilir hiç bir sıkıntı yok. Bu tamamen tercihlerinize bağlı bir şeydir ve görülmedik bir şey de değil özellikle. O animasyonu video olarak değil javascript ve css ile oluşturulmasını sağlarsanız çok daha stabil olacaktır. Dolayısıyla sizin bu tasarımı hayata geçireceğiniz noktada front end yazılımcı arkadaşa hayalinizi tasarlayıp göstermeniz yeterlidir. Kendisi teknik olarak bu aşamaları çözecektir.

- Desktop görünümü konusunda da bahsettiğim gibi içerik konusuna odaklandığınızda muhtemelen sorunun büyük kısmını çözeceğinizi düşünüyorum. İçerik çıktıktan sonra bunları sayfaya yerleştirmek çok daha eğlenceli ve kolay olacaktır.

Elinize sağlık kolaylıklar dilerim. V2'yi sabırsızlıkla bekliyorum.

Görüşmek üzere.

Begum G.
Begum G.
10 Ocak 2023
Durum Güncellendi Yorum Gerekiyor

MESAJ

Merhaba Eray Bey, çok teşekkürler yorumlarınız için. Evet laptop görünümünden sonra mobile görünümünü yapmak daha mantıklıymış. Ben mobile da böyle bir şey aklıma gelince dayanamayıp bundan başladım ama dedikleri gibi de oldu, bu sefer laptop görünümünü kurmak sıkıntı oldu. Dediklerinize göre biraz daha düzenleme yapıp yine size göstereceğim. Tekrardan çok teşekkürler, iyi akşamlar dilerim.

Proje Adı Zwin&Zwaan
Son Durum Yorum Gerekiyor
V1
pintool info
Begum G.
Zwin&Zwaan
Begum G.