Scroll to top

Mercen’ s Yaşam Alanı Teknolojisi; site, otel, AVM vb. gibi yerlerin profesyonel yönetiminin yanında muadillerinden farklı olarak ‘’Online Sipariş’’ ve ‘’Teknik Saha Desteği’’ hizmetlerini de tek bir platformda sunmaya hazırlanan yeni bir proje.

Mercen’ s markası, reel dünyada profesyonel site yöneticiliği alanında hizmet veren ve burada gördüğü sorunları çözmek, insanların konfor alanlarını geliştirmek, yaşam alanlarında kolaylık sağlamak ve zaman ayırmakta zorlandığımız işleri bizim yerimize yapmak için bir asistan olması için ortaya çıkmış bir platform.

Dynaside Creative Agency olarak bu projeye Web Tasarım, Kullanıcı Deneyimi ve Ara Yüzü Tasarımı, Web Yazılım, Siber Güvenlik, Proje Planlama, İçerik Çalışması, Logo Çalışması ve Kurumsal Kimlik Tasarımı hizmetlerini sağlıyoruz. Web Uygulama çalışmasının bitmesinden sonra ise Dijital Pazarlama ve Growth Hacking alanlarında çalışma yapmaya devam edeceğiz.

Not: Dynaside Creative Agency, kalite prensipleri ve ilkeleri gereği, yaptığı tüm web projelerinde; Kullanıcı Deneyimi(UX), İçerik Hiyerarşisi Planlama, Sayfa Hızı (web site optimizasyonu), Mobil, Tablet ve PC’ de Aynı Görünüm(Responsive), SEO Uyumluluğu, Standart Güvenlik Paketi gibi olguları bir standart olarak kullanır ve uygular.

(Bilgi: Dünyada sayfa açılma hızında kabul edilen normal seviye 4 saniyedir. Dynaside Creative Agency’ nin tüm web projelerinde bu seviye 3 saniye veya daha altıdır.)

Not: Örnek çalışma yazısı, web sitenin tüm sayfalarının anlatımını kapsamaz. Neler yapıldığı ile ilgili genel anlatımdır. Web sitesini görmek için: www.mercens.com

Neler Yapıldı?

(Not: Bu örnek çalışma yazısında, teknik arka plana (kodlar, raw htlm, php vb.) girmeden, herkesin anlayabileceği bir anlatım yapılmıştır.)

Dynaside, sadece kreatif bir ajans olmadığı, aynı zamanda yönetim, insan psikolojisi ve davranışları, veri toplama, işleme ve hikayeciliği alanında da çalışmalar yaptığı için Mercen’ s Yaşam Alanı Teknolojisi yetkilileri ile yapılan uzun soluklu görüşmeler ile projede nasıl bir yol izleneceğiyle ilgili gerek dijital tarafta gerek fiziki tarafta ayrıntılı bir yol haritası çıkarıldı. Her bir plan için stratejik planlar, aksiyon planları ve taktik planlar belirlendi. Projenin dijitaldeki süreci ise genel itibari ile 3 ana başlığa ayrıldı: web site yapım, web uygulama alt yapısının planlanması ve web uygulamanın yapım aşamaları.

Bilgi: Firmaların web sitelerinde gördüğümüz en önemli eksiklik ve yanlışlardan da biri de günümüz marka ve insan algısına hitap edemeyen tasarımların yanında, içeriklerin de önemsenmemesidir. Oysa, modern ve estetik bir tasarımla birlikte; insan psikolojisi ve algısına hitap eden ve buna göre kurgulanmış içerikler ile bütünleşmiş bir web sitesi potansiyelinin üzerinde fayda sağlar.

Dynaside, dijital görünürlük ve tasarım anlayışının tamamında dünya standartlarını ve trendlerini referans alırken, kreatif bakış açısıyla sektöre ve topluluklara ilham kaynağı olacak yeni tasarım konseptleri ve projeler geliştirir.

Planlama Aşaması

(Bilgi:Planlama aşamasından önce, bir Dynaside Creative Agency standardı olarak müşterilerin rakiplerinden hangi konularda ayrıldığı, insanların sektör davranışları ve alışkanlıkları gibi konularda sektör analiz yapılır.)

1- İnsanlardan görüş ve geri dönüşler almak için projeyi anlatan, fonksiyonel olmayan bir web sitesi yapmak (yapıldı)

      • İlk etapta bu aşama için nasıl bir web site alt yapısı olacak? Örneğin, sıfırdan yapım mı yoksa içerik yönetim sistemi mi kullanılacak gibi.
      • Marka renkleri neler olacak
      • Marka yazı fontu ne olacak
      • Web site içeriklerinin oluşturulması
      • İçerik hiyerarşisinin kurgulanması
      • Web site ara yüzünün ve iyi bir kullanıcı deneyiminin planlanması ve tasarımının yapılması
      • Logo tasarımının yapılması
      • Kartvizit ve broşür tasarımlarının yapılması

 

2- Proje(Web Uygulama) alt yapısının planlanması (yapıldı)

      • Platform hangi hizmetleri, nasıl sunacak? Örneğin, sisteme üyelik nasıl olacak, adres ve site veri tabanı nasıl sağlanacak, ödemeler nasıl olacak gibi.
      • Web uygulama süreci kaç aşamadan oluşacak ve her aşamada hangi hizmetler sunulacak? Örneğin, 1. aşamada online sipariş hizmeti sunulmayacak, 2. aşamada sunulacak gibi.
      • Web uygulama hangi dil ile yazılacak? Avantajlarımız ve dezavantajlarımız neler olacak?
      • Nasıl bir kullanıcı ara yüzü sunulacak?
      • Proje nasıl bir ekip ile yürütülecek, kaynak dağılımı nasıl olacak?
      • Proje yapım aşaması ne kadar sürecek?
      • Nasıl bir sunucu-server sistemi kullanılacak?
      • Sistemin güvenliği nasıl sağlanacak?
      • Kişisel veriler nasıl korunacak?
      • Sistemin periyodik bakımları nasıl yapılacak?
      • Sistemin testleri nasıl yapılacak? Neler test edilecek?
      • Sistemin sürekliliği, minimum hata payı ile nasıl sağlanacak?
      • Olası sistem çökmesinde en hızlı şekilde nasıl müdahale edilecek?

 

3- Web uygulama’ nın yapımı. (yapılıyor..)

      • Yapılan tüm planların artık işlevsel hale getirilmesi aşaması.

Web Site Yapım Aşaması

Web site yapımında ilk etapta CMS sistemi kullanılmasına karar verildi ve tasarım olarak da modern, aynı zamanda da sade  bir ara yüz tasarımı olması planlandı. Alt yapısı bu aşamadaki ihtiyacı giderecek şekilde kaliteli olan bir tema seçildi. (Firma olarak CMS sistemi kullansak dahi kullandığımız sistemin arka planına kodlarla müdahale ederek alt yapının %60-80’ ini değiştiriyor, görsel ve tasarımlarının %90’ını biz tasarlıyoruz.)

Öncelikle, web site içerik hiyerarşisi ve tasarım planlaması yapıldı. Buna uygun içerikler üretildi.  Web uygulama ara yüz ve tasarımı çalışmalarının da devam etmesi ile beta ara yüz görüntülerini kullanarak web sitenin yapımı işlemine geçildi.

Burası giriş sayfası. 1 numaralı alan H1 başlığı. ‘’Yaşam Alanı Teknolojisi’’ insanlar arasında kullanılmadığından veya bilinmediğinden, ilk defa bu siteye girecek ziyaretçiler de düşünülerek platformun ismi başlık olarak seçildi. 2. Numaralı alan ise artık platformu genel olarak açıklandığı bölüm.

Ancak burada en çok dikkat edilen ve üzerinde durulan nokta teknik ve karmaşık bilgiden uzak, platformun fayda-değer’ ini açıklayan cümleler olması.

İnsanlar bir sistemin, ürünün veya hizmetin öncelikle fayda-değerine odaklanırlar. Teknik özelliklerine değil. Bir web sitesi planlama aşamasında, mutlaka hizmetin veya ürünün insanlara nasıl bir katma değer yaratacağının sorulması gerekir. (Kilit nokta).

Yine, 1 numaralı alan da fayda-değer tabanlı, platformu anlatan bir başlık belirlendi.  Amaç, insanların ilgisini çekerek merak etmelerini sağlamak ve tek bir yerden ihtiyaçlarını giderebilecekleri mesajını vermek.

Her iki resimde de 3 numaralı alanlar, çalışması devam etmekte olan Mercen’ s web uygulaması’ nın beta ara yüz görüntülerinin kullanıldığı, ‘’Slider Revolution’’ ile animasyon verilen illüstrasyon tabanlı görsel alanlar.

4 numaralı alanda geçen ‘’Türkiye’ de bir ilk’’ cümlesi ise yazının başında belirtildiği gibi muadillerinden ‘’Online Sipariş’’ ve ‘’Teknik Saha Desteği’’ hizmetleri ile ayrılmasından geliyor.

Ama tek neden bu değil. Aynı zamanda, insanlar ‘’ilk, tek’’ gibi ibarelerden etkilenirler ve bir güven bağı kurarlar. İçerik planlaması ve çalışması yaparken, amacımız hizmet ve ürünleri insanlara en iyi şekilde anlatırken ürün veya hizmet ile de aralarında güven bağını kurmaya sağlamak.

Web uygulama beta ara yüzlerden birinin kullanıldığı bu alanda, ziyaretçilere artık net bir şekilde Mercen’ s Y.A.T.’ nin ne olduğu verildi. Bunun dışında marka için oluşturulan renk paletlerinden faydalanılarak sayfa tasarımı, geometrik şekiller kullanılarak, sadelikten ödün vermeden ve basit de durmayan; şık bir tasarım yapıldı.

Telefon içindeki ara yüz çalışmasından da görüleceği üzere uyumu yakalanması için küçük daireler ile sayfa süslendi. Sayfa geçişinde ise sert bir geçişten kaçınmak için Photoshop tasarımı ile sayfanın son çalışmasını bitirildi.

Birinci sayfadan sonra, mouse aşağıya kaydırılmaya başlandığında ortaya çıkan, üstteki ve bundan sonraki resimlerde de görebileceğiniz gibi, sayfaların sağ alt tarafına turuncu bir ok butonu koyuldu. Kullanıcı deneyimi’ ni en üst seviyeye çıkarmak için web site çalışmalarında kullandığımız standart butonlardan bir tanesi. Amaç kullanıcıların tek bir tıklama ile yukarıya gitmelerini kolaylaştırmak.

Bu bölümde platformun ana özellikleri yine teknik bilgiye girilmeden kullanıcıya sağlayacağı değer, modern ve minimalist bir tasarım ile gösterildi.

Örneğin, platform muhasebe hizmetini sunarken burada gelir-gider takibi denilerek işlevi daha kolay anlatan bir başlık seçildi. Yine aynı şekilde teknik saha desteği hizmetine burada kısaca arıza çözüm denilerek platformun sağlayacağı değeri ilk olarak akılda canlandırılması sağlandı.

Web sitesinde ilerledikçe artık açıklamaların netliği de artırıldı. İçerik hiyerarşisini oluşturmamızdaki amaç; kullanıcıya/ziyaretçiye öncelikle platformun fayda-değerini anlatmak, daha sonra bu fayda değeri daha açıklayıcı bir şekilde ilerleterek kullanıcı aklında soru işareti bırakmamak. Bu süreçte ise ziyaretçiyi yakalayabilmek.

Bu bölüm ise platformun sağladığı değerlerin açıklandığı alan.

Peki şu ana kadar ne yapılmış oldu?

Önce platformun ne olduğu, daha sonra ne sağladığı ve burada da platformun sağladığı fayda-değerlerin açıklamaları yapılmış oldu.

Sayfa tasarımı tarafında ise yazıların sırayla gelmesi için, yazılara ve çizgilere minimal bir animasyon verildi. Iconlar için Corel Draw ve Photoshop çalışmaları yapıldı.

Platformun ana hizmetlerinden olan ve platformu muadillerinden ayıran en önemli hizmet Teknik Destek ve Saha Desteği’ nin daha iyi vurgulanması ve hemen farkedilmesi için bu hizmete ayrı bir sayfa ayrıldı. Hatırlarsanız, ‘’Mercen’ s Ne Sağlar?’’ bölümünde bu hizmetin fayda değerini arıza çözüm olarak vermiştik.

Soldaki illüstrasyon çalışması ise 1 çerçeve ve 2 farklı illüstrasyonun birleşiminden oluşan tam bir Adobe Photoshop çalışması. Arka plandaki transparan illüstrasyon üzerinde silme-birleştirme işlemleri uygulandıktan çerçeve eklendi. Son olarak insan illüstrasyonunun da eklenmesi ile renk çalışması yapıldı.

Web site tasarım ve içerik hiyerarşi planlamasında önemli bir yeri olan, platformun kullanılma nedenlerinin veya neden kullanılması gerektiğinin ziyaretçiye aktarıldığı bölüm.

Evet..

Şu ana kadar platformun ne olduğu, değerleri, neler sağladığı, bunları nasıl sağladığını ve neden kullanılması gerektiği ziyaretçiye empoze edilmiş oldu.  Biraz da olsa platformun kimler için olduğundan yüzeysel olarak bahsedildi. Bu bölüm ise artık net bir şekilde kimler için olduğunu ve kime hangi özellikleri verdiğinin sade bir şekilde gösterildiği bölüm.

Çünkü burada amaç tasarım göstermek değil, bilgiyi net bir şekilde göstermek.

Mercen’ s yetkililerinden platformu anlatan bir blog yazısı yazmalarını istedik. Alınan blog yazısı revize edilerek hem içerik hem de görsel olarak hikayeleştirilmiş bir yapıya getirildi ve ana sayfanın sonlarına gelirken bu hikayeleştirilmiş içerik eklendi.Yazının dikkat çekerek okunmasını sağlamak için ortaya büyük punto başlık ile eklendi.

Bu içeriğin iki amacı vardı; buraya kadar gelen kullanıcının yazıyı okumasını sağlayarak sisteme dahil olmaya hazır hale gelmesi veya buraya kadar gelen ancak tam olarak cezbedilemeyen ziyaretçinin bu yazı ile cezbedilmesi.

Ana sayfa iletişim formu. E-posta almak isteyen veya e-posta almak istemeyip telefon araması almak isteyenler için form ikiye ayrıldı. Amaç; görüşlerini bildirmek isteyen veya iletişime geçmek isteyenlere kolaylık sağlamak.

Ayrıca, daha hızlı bir iletişim kurmak isteyenler için ise Whatsapp butonu sitenin sol alt kısmına koyuldu. Bu buton ile hızlı bir şekilde Mercen’ s yetkililerinin Whatsapp sohbet penceresini kullanıcılar açabiliyor. Sağdaki resim ise 4 farklı illüstrasyon çiziminden ve renk çalışmalarından oluşan bir tasarım.

Hakkımızda sayfasında Mercen’ s Yaşam Alanı Teknolojisi’ nin ne olduğu, nasıl ortaya çıktığı, ne sağladığı, hangi alanlarda ne hedefi olduğu ve yine neden kullanılması gerektiği gösterildi. Turuncu bölümdeki yapraklara ”Slider Revolution” ile döngü(loop) animasyonu verildi.

Hakkımızda sayfasının devamında ise kimler için bölümünü ayırıp yönlendirmesi ise ‘’Nasıl Çalışır’’ sayfasına yapıldı.

Daha iyi bir kullanıcı deneyimi sunma amacıyla ”Yöneticiler İçin” butonu, Nasıl Çalışır sayfasında ikinci sırada olan Yöneticiler İçin bölümüne yönlendirildi. Yani sayfada birinci sırada Site Sakinleri İçin varken, Yöneticiler İçin sayfanın ortasında. Butona tıklandığında sayfa başına değil ortasına yönlendiriliyor.

Nasıl çalışır bölümü ise akordiyonlardan(accordion) oluşuyor. Sayfayı yazıyla doldurmak yerine açılır kapanır butonlar ile istenildiğinde açılan ve ilk etapta sadece başlıkları görünen bir tasarım benimsendi.

Bu sayfanın içerik hiyerarşisi ve planlamasındaki yeri ise kullanıcıların/ziyaretçilerin akıllarında soru işareti bırakmamak..

Logo

Dynaside Creative Agency’ de, logo yapımına başlanmadan önce, çalışma yapılacak firmanın hikayesi, değerleri ve hizmetlerinin niteliği incelenerek yapılacak logoya bir anlam yüklenir. Kısacası bir hikaye oluşturulur ve bunun sonucunda logo planlaması yapılır.

Tasarıma başlanmadan önce markanın hikayesi, platformun sağladığı değerler ve kurucuların isimleri göz önüne alınarak ortaya çıkan fikirler bir yerde toplandı.

Bu aşamadan sonra Corel Draw’da toplam 24 logo çizimi, vektörel olarak yapıldı ve bu logoda karar kılındı. Daha sonra AutoCAD versiyonu da üretildi.

(Bilgi:Projelerini geliştirirken web yazılım faaliyetlerinin ötesinde profesyonel mühendislik programlarını aktif olarak kullanabilir.)

Logonun hikayesi ise…

Platform 3 ana hizmet sunuyor. Birincisi profesyonel yönetim, ikincisi teknik saha desteği, üçüncüsü ise online sipariş. Yuvarlağın dışındaki iki halka online olarak hizmet verilen profesyonel yönetim ve online siparişi temsil ediyor. Teknik saha desteği de platforma düşülen arıza kaydı, saha destek talebi gibi taleplerden sonra Mercen’s ekiplerinin reel dünyada hizmet verdiği bir alan olduğu için üçüncü halkanın yeri Mercen’ s Yaşam Alanı Teknolojisi ile tamamlandı.

Yani, ortada bir daire var ve çevresi ise aslında üç halka ile tamamlanmış oldu. Daire; insanları, siteleri, otelleri, AVM’ leri vb. temsil ediyor, halkalar ise Mercen’ s Y.A.T.’ nin hizmetleri ile bunları kapsadığını temsil ediyor.

Dairenin ortasında ise M ve C harflerinin tasarımsal birleşimi var. M ve C hem kurucuların isimlerinin baş harfi hem de İngilizce’ deki Management ve Collaboration kelimelerinin baş harfleri. İki harfin birleşimi ise insanlar arasındaki bağlantıyı temsil ediyor.

Logonun farklı platformlarda görünümü ve teknik özellikleri..

(Bilgi: Dynaside; her projesinin tüm teknik alt yapısını titizlikle hazırlarken orijinal ve yaratıcı hatların tüm teknik özelliklerini detaylı bir şekilde vurgular.) 

Kartvizit Tasarımı

Öncelikle, web site yapımından önce ana marka renkleri mavi ve turuncu olarak belirlendi. Yan renkler olarak ise mavi ve turuncunun tonları ( örneğin, maviye yakın gri tonu-mercan rengi gibi.), beyaz ve kartvizit için ise siyah renkleri seçildi.

Not: Kartvizit tasarımında siyah renk kullanmak fazla önerilmez. Çünkü bilgisayar ortamında tasarlanmış bir rengin baskıda tutturulması çok zordur. Özellikle siyah renkte yaşanan bir durumdur. Bu yüzden baskıya hazır hale gelmesi RGB Palet yerine CMYK Palet kullanılması gerekir.

Ayrıca tasarımların baskı aşamasında yaşanan genel bir sorun da Renk Palet bilgisine sahip olmayan veya bilgisi zayıf olan tasarımcıların ortaya koyduğu tasarımlarda renklerin tutmamasıdır.

Kartvizit tasarımında standart olarak koyduğumuz QR Kod; istenildiğinde web sitesine yönlendiriyor, istenildiğinde arama yapmaya yönlendiriyor. Ve her an değiştirilebiliyor. Kartvizit tasarımında şık, modern ve minimal ilkelerinden faydalanıldı. Yine bir başka kartvizit tasarım standardımız olarak, kartviziti bilgiye boğmadan, önemli bilgiler koyuldu. Kartvizit Corel Draw ile tasarlandı.