Web sitesi tasarlamak

sumeyra gokbas
May 22, 2019 · 4 min read

Web sitesi tasarımı yapmaya 10 yıl önce başladım. O zamanlar bir bakış açımın olduğunu sanmıyorum :) işi zamanında teslim etmek ve eli yüzü düzgün bir site çıkarmak tek prensibimdi.

Birkaç sene sonra responsive tasarımlar, typography, butonların konumunu ve renkleri doğru kullanmaya başladım. UI ‘ı başarılı bir çalışma çıkarsam da hep bir sorun vardı, içime sinmiyordu.

sene çok eskiler Sümeyra Gökbaş

Hiçbir işlevi olmayan soldaki o yuvarlağın ne işi vardı orada, neden menü kocaman bir slider ın altındaydı? Müşteri memnun, öyle istemiş ben de kafa sallamışım. Ne a b testi yapılacaktı ne de UX açısından yanlış olan yerler konuşulacaktı, işi kendimce batırmıştım.

Bir kaç ay sonra.. Co-founder o olduğum bir projenin web sitesini tasarlamaya başladım ancak bir türlü bitiremiyorum çünkü ortaklarım her defasında ‘evet çok güzel tasarım ama bunun burda ne işi var’ diyordu ki haklıydılar. Ancak daha sonradan anladığım bir konuda çok eksiktik.

Bir site tasarlamak, kullanacağınız program her ne ise bir artboard oluşturup boş sayfaya bakarak başlamıyor.

Öncelikle proje dosyası oluşturmak gerekiyor ya da bir şirket için çalışıyorsanız o dosyayı istemek gerek.

Proje dosyasında;

  • Projenin funnel ına ihtiyacınız var
  • Kullanıcı kitlesi ve hatta bu kitlenin demografik özellikleri
  • Girmek istedikleri piyasadaki rakip firmalar
  • Projenin tam detaylı tanımı, fazlara ayrılmış gelişim planı
  • En çok neyi amaçlıyor proje, ney, göstermek istiyor

Evet O, bir müşteri yada kocaman bir şirket ama sen tasarımcısın. İşin bu! Araştırmak ve doğru olanı yapmak, o yüzden lütfen konusunda hakim olmayan bir kişiyi bu işe karıştırma.


Tek başına çok güzel işler çıkardığını düşünebilirsin, ancak yanında bir ekip olduğunda çıkarılan iş çok daha özel olacak unutma. Bu yüzden ekibin ile senkronize şekilde çalışmalısın. Peki web sitesi yaparken biz tasarımcıları hangi adımlar bekliyor?


İlk adım araştırma

Araştırma, tek bir kelimeden oluşsada çok detaylı ve işin en büyük kısmını oluşturuyor aslında. İlgi alanın olmayan ve hiç dikkatini çekmemiş bir konuda da tasarım yapabiliyor olmak için bu adıma çok dikkat etmek gerekiyor. Zaman ve emek istiyor bu adım gerçekten. Analiz okumak, rakip tanımak, projeyi anlamak hep bu sürecin içerisinde geçiyor. Henüz anlamadığın bir projenin sitesini sadece yapmak için yapmak ileride utanç sebebiniz olabilir.

Araştırmanın da elbette adımları var. Ekibinde bir UX designer varsa yükünü çok rahat alabilir ancak, artık çoğu firma her ikisinin de yetisine sahip tasarımcılar arıyor. Böyle olunca iş sana kalacak.

Analitik düşünebilen ve bu işe merakı olan, devamlı okuyan ve gelişmeleri takip eden her tasarımcı UX designer olabilir.

Projeyi sindirdin, funnel ı gördün, kitleye hakimsin son olarak gelişim planını da çıkardın o halde..

İkinci adım wireframe oluşturmak

Wireframe daha çok UX çalışmasıdır. Herhangi bir sitil eklenmeden tasarımcının kafasındakileri kağıda ya da çizim için kullandığı programa aktarmasıdır. Burada kullanıcı alışkanlıklarını gözetmesi ve kolay ve anlaşılabilir bir tasarım ortaya çıkarması gerekmektedir.

by Unfold in Sweet (wireframe çalışması)

3.adım wireframe Ui giydirmesi yapılır

Elbette bu adımda yine bir araştırma yapmak gerekiyor. Renk çok önemli bir kriter. Tek renk çalışmak yerine;

  • Birincil renk
  • İkincil renk
  • Ve bu iki rengin açık ve koyu varyasyonları

olmalı. Renkleri seçerken canlı, dikkat çekici ve akılda kalıcı renkler kullanmak önemlidir. Trendleri takip etmek ve başarılı tasarımcıların çalışmalarına göz atmak, belki biraz pinterest ya da dribbble kaybolmak gerekiyor. bundan 5–6 yıl öncesine kadar kullanılan butonlar artık kullanılmamalı mesela..

2013 yılı butonları (soldaki) — günümüz butonları (sağdaki)

Elbette Ui giydirmesi yapılırken herkesi memnun etmek mümkün olmayacak. Çünkü o kısımda biraz sanat konuşuyor olacak. Ama siz yine de yeni trendleri takip edin ve en önemlisi bunları yaparken kullacıyı lütfen düşünerek tasarlayın çalışmanızı.

4.adım prototipleme

Ui kısmı çok uğraştırıcı ve uzun projelerde, ben bu kısmı wireframe den sonra da yapıyorum aslında. İki adet prototipleme çıkarıyorum çoğu zaman.

Ben çok şanslıydım, hep en başarılı yazılımcılar ile çalıştım, hepsi aşırı anlayışlı ve işini seven çocuklardı. Çok da kaliteliydiler ancak onlara işkence yapmadığım zamanlar olmadı değil. Şimdiki bölüm hem sizin hem de hatta en de ‘developer guys’ lara yardımcı olacak bir adım.

Prototipleme aslında tasarımcının ‘ben işi bitirdim hadi test edelim’ dediği o an. Daha içeriye kod girmeden müşteriye ve en önemlisi user a ilk gidecek kısım. Burada a-b testleri coşar, UX konuşur, tasarım değişir ama sadece bu durumdan sen etkilenirsin. Benim en sevdiğim kısım. Tasarlarken göremediğin her şey burada hop önünde duracak. Hatta aramızda kalsın ilk tester olarak hep kendimi seçerim, daha prototipi kimseye göstermeden hatalarımı görüp düzeltmeler yaparım bu noktada.

5.adım gönül rahatlığı

Her şey review edildikten sonra dirsek temasında bulunacağın yazılımcı arkadaşlara işi teslim edebilirsin. Onları germe bırak işlerini yapsınlar..

Sumeyra Gokbas

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store