Bu yazımızda size günlük hayatta bize rehberlik edip hoş vakit geçirmemizi sağlayan, bir yandan haberlere ulaşıp, diğer yandan başkalarıyla etkileşimde bulunduğumuz web sitelerini şekillendiren Web Tasarımcıları ( Web Designer ) ve onları geliştiren, özellik ve işlev kazandıran Web Geliştiricilerinden ( Web Developer ) bahsedeceğiz. 

Web tasarımına tarihsel olarak bakarsak ilk olarak CERN mühendislerinden Sör Tim Berner-LEE 1989 yılında HTML ( Hyper Text Markup Language) dilini geliştirerek şimdiki web sitelerinin temelini atmış oldu. Kendisi aynı zamanda WWW  (World Wide Web) ’in de fikir babası ve (World Wide Web Consortium) W3C’ nin kurucusudur.

1990 yılında ilk web tarayıcısını geliştirmiştir. Bilimsel yayınların birçok kişi tarafından ulaşılabilir olması fikri üzerine geliştirilen web siteleri günümüzde her türlü amaçla kullanılabiliyor.

Önceleri tasarım işi bir bütün olarak tek kişi tarafından geliştirilmekteydi. Web siteleri daha çok metin ağırlıklıydı ve tasarımlar basitti. 

Sonrasında zaman geçtikçe ve ihtiyaçlar, talepler gelişip şekillendikçe web sitelerinin tasarımları ve şekilleri değişmeye, çeşitlenmeye ve zenginleşmeye başladı.

Bu aşamadan sonra artık işin tek elden çıkması zorlaşınca; iş bölümü, uzmanlaşma ihtiyacı ve güvenlik gibi nedenlerle web tasarımı, web geliştirme işleri birbirinden ayrılmaya başladı.

Web Tasarımı Nedir? Web Tasarımcısı Ne İş Yapar?

İnternet Sitesi tasarımı, bir sitenin son kullanıcıya nasıl görüneceğinin ele alındığı ve şekillendirildiği işler bütünüdür.

 Web tasarımcısı ( Web Designer), HTML ( Hyper Text Markup Language), CSS ( Cascading Style Sheets) , Javascript  vs gibi kodlama dilleri yardımıyla ziyaret ettiğimiz sitenin görsel olarak nasıl görüneceğini belirleyen, sitenin kullanım amacına göre ana hatlarını şekillendiren ve bir forma sokan kişidir. 

Web Tasarım Araçları

Aynı zamanda temel grafik tasarım bilgisine sahip olmalı ve tasarım araçlarını, Adobe Photoshop, Adobe Illustrator vb kullanabilmesi gerekmektedir.

Görsel sanatlar ve grafik tasarım eğitimi almış bir web tasarımcısı görsel olarak iyi işler ortaya çıkacaktır. 

 Web sitesinin kullanım amacı, tasarımı ve özellikleri açısından süreçleri tamamıyla etkileyen en önemli şeydir.

Tasarımı yapılacak web sitesinde satış mı yapılacak, bilgilendirme, haber, sosyal medya amaçlı mı olacak veya sadece fotoğraf mı sergilenecek,  bu soruların cevabı ve web sitesi yayın amacımız belliyse, bir forma sokulma aşamasına geçilebilir.

 Bu yüzden web tasarımcısı, müşterinin taleplerini net olarak anlamalıdır. Amaç ve varsa görsel bazı istekler netleştirildikten sonra tasarımcı yaratıcılığına katarak ortaya görünür bir şey çıkartmaya çalışır.

Web Tasarımcıları ikiye ayrılır;

UI ( User Interface ) Web Designer ( Web Tasarımcısı )

Kullanıcı Arayüzü Web Tasarımcısı ( UI Web Designer), adı üstünde son kullanıcı arayüzü tasarımı ile ilgilenen kişidir. İlgi alanları renkler, menülerin tasarımı, ekranda ziyaretçi tarafından görülen şeylerin tamamıdır aslında.

Örneğin, Android ve IOS işletim sisteminde kullanılan menü ve aplikasyon imajları, diziliş şekli ve menülerin açılma şekilleri, iki sistem arasındaki ara yüz farklılıkları olarak kolayca ayrılır.

UI Web Designer aynen bu şekilde web sitesine özel bir ara yüz tasarımı yapar. Tasarım belli bir uyum gerektirdiği için tasarımcı renk, yazı stili ve fontların seçiminde kendi tarzını yansıtacaktır.

Renkli ve hareketli bir tasarım veya daha ciddi ve stabil tasarımlar, ihtiyaca ve amaca yönelik belirlenerek, UI Web Tasarımcısı tarafından hayata geçirilir.

Butonlar nerede duracak, butonların şekli, rengi nasıl olacak, font seçimi, boyutları gibi detaylar burada devreye girecektir.

UX ( User Experience ) Web Designer ( Web Tasarımcısı )

 Kullanıcı Deneyimi Web Tasarımcısı ( UX Web Designer), ara yüzden ziyade kullanıcı deneyimine odaklanır. Ziyaretçinin web sitesiyle nasıl deneyimleyeceğini tasarlar.

Bunu yapabilmek için de iyi bir hayal gücüne sahip olmalı ve kullanıcının ne beklediğini, o siteyi deneyimlerken aklından neler geçeceğini önceden düşünür. Yaşayabileceği olumlu veya olumsuz durumlara göre tasarımını şekillendirir. 

 Burada yine deneyim devreye giriyor. Kuşaklar arasında kullanım alışkanlıkları ve beğenileri farklılıklar gösterdiği için ziyaretçi profili çok iyi çıkarılmış olmalıdır.

Ağırlıklı bir profil çıktıysa ( kadın, erkek, genç, yaşlı, çocuk vs) ona göre bir tasarım oluşturulabilir. 

Tasarım Aşamaları

Müşteri Taleplerinin Alınması

Müsterinin temel olarak ne istediğini anlamaya çalışmak işin en önemli aşamalarından biridir. Eğer bu aşamada bir hata yaptıysanız uzun çalışma saatlerinin boşa geçme ihtimali çok yüksektir.

Wireframe veya Taslak Oluşturmak

Tasarımın bu aşamasında wireframe denilen bir kavram ortaya çıkıyor.  Wireframe ( Tel Çerçeve), bir web sitesinin kağıt üzerinde iskeletinin çıkarılarak, kabaca nasıl görüneceğinin şematize edilmesi, taslak oluşturulması işidir. 

Örnek bir Wireframe çalışması.

Tasarımcı, balsamiq, mockup vb. gibi ücretli veya ücretsiz uygulamalar kullanarak web sitesinin bir taslağını oluşturur.

Müşteri ile bu taslak üzerinden konuşmak, düzenlemeler yapmak, daha detaylı kodlama çalışmalarına girmeye gerek kalmadan, ana hatlar hakkında tasarımcı ve işverenin hemfikir olmasını kolaylaştırır.

Kodlamaya Başlamak

Bu aşamada oluşan ilave fikir ve talepler alındıktan sonra işin kodlama kısmına geçilebilir. Daha önce bahsettiğimiz HTML, CSS, Javascript dilleriyle oluşturulan taslak ete kemiğe bürünmeye başlar.

 Eğer kullanıcı ile web sitesi hiçbir etkileşime girmeyecek ise yani web sitesinde en basit bir form doldurmayacak veya mesaj, yorum özelliği olmayacaksa web developer ( Web Geliştiricisi) a gerek kalmadan web sitesi yayına geçebilir.

Web Developer ( Web Geliştiricisi ) Nedir? Ne İş Yapar?

Web Developer ( Web Geliştiricisi ) tasarımcının oluşturduğu siteye ait resmi ele alıp, web tasarımcısının kullandığı HTML CSS dillerinin yanısıra PHP, ASP, MySQL, .NET, SQL, Python gibi çeşitli kodlama dilleri ve frameworklerin vasıtasıyla işlevsellik kazandıran kişidir.

Web Developing Araçları

Developer, tasarımın arka planda nasıl çalışacağını planlar ve düzenlemeleri yapar. Web sitesinin sunucuda barındırılması ve sunucu ile tarayıcı arasındaki iletişimin planlanması süreci de yine Web Developer’ın görevlerindendir.

Geliştirme işinde de zaman geçtikçe, tasarım aşamasında olduğu gibi süreçler ve görev dağılımları oluşmuştur. Geliştiriciler frontend ve backend şeklinde ayrışmışlardır.

Front-end Developer Ne İş Yapar?

Web sitesinin tarayıcı yönünde görünen kısımlarıyla Front-end Developer ilgilenir. Web tasarımcısının oluşturduğu kısmı yani ara yüzün geliştirilmesi ve işlevsel kazanmasını sağlar. HTML, CSS, Javascript dillerine hakimdir ve tarayıcıda bizim gördüğümüz ara yüzün geliştirilmesinde çalışır.  

Web Designer’ dan farklı olarak frontend developer, bir grafik tasarımcısı değildir. Tasarımcı tarafından oluşturulan grafiklerin kodları üzerinde çalışır. Ancak hem web tasarımcılık, hem de frontend developer işlerini yürütebilecek kişiler de olabilir.

Back-end Developer Ne İş Yapar?

Backend Developer ise web sitesinin sunucu tarafında nasıl çalışacağı, sunucuda hangi koşullarda saklanacağı ve tarayıcı ile arasındaki bağın nasıl oluşturulacağını; ASP,  .NET, SQL, MySQL, PHP, Python, gibi vb. programlama dilleri kullanarak oluşturan ve kodlayan kişidir.

Örneğin bir web sitesinde satış gerçekleşecek ise tarayıcıda gördüğümüz sepetin görseli frontend developer tarafından geliştirilirken, ürünle sepetin nasıl bağ kuracağını, sunucuda hangi dosyada nasıl kayıt altına alınacağı, sepetteki ürünün satış aşamasında banka ve kredi kartı modülünün API koduyla bağlantısının kurulması ve satış işlemlerinin nasıl oluşacağı gibi süreçler backend developer tarafından yürütülür.

Full Stack Developer Kimdir?

Hem frontend, hem de backend programlama dillerine hakim iki süreci de rahatlıkla yürütebilen kişiler Full Stack Developer olarak tanımlanmıştır. 

Bu aşamadan sonra yine başka bir kavram ortaya çıkıyor. Süreçler ayrıştırılırken bir takım çalışma ve iş yönetim modelleri gelişmiştir.

MVC ( Model View Controller) iş modeli bunlardan biridir. Bu modeli oluşturmak için yaygın olarak Laravel, Codeigniter, Symfony, Yii gibi PHP tabanlı frameworkler kullanılır.

MVC ( Model View Controller ) Nedir? Nasıl Çalışır?

Model View Controller ( MVC ), projeye ait çalışmaları yürütülürken birimlerin, birbirlerinin yaptığı işlere etki etmemesi veya hataya neden olmaması için, etki alanlarının birbirinden ayrılması fikri sonucu ortaya çıkmış bir iş akış biçimidir.

 Örneğin Frontend Developer’a sadece ara yüze ait dosyalara ve kodlara erişim imkanı tanınır. Frontend Developer sadece kendi etki alanında çalışırken, Backend Developer diğer alanlarda çalışır.

Birbirlerinin çalışmalarına müdahale etmedikleri için rahatça çalışabilirler, bu sayede işler hem sorunsuz bir şekilde devam eder hem de hızlıca tamamlanır.

Model

Uygulama içerisindeki nesneler bütününe denir, bir veya birçok katmandan oluşabilir. Verilerin taleplere göre işlenmesi bu katmanda gerçekleşir. Özetle bütün veritabanı CRUD (create, read, update, delete) isteklerini karşılayan katmandır.

View

Tarayıcı tarafında görebildiğimiz gezinebildiğimiz, etkileşimde bulunabildiğimiz ( kullanıcı oluşturma, yorum ekleme, form doldurma v.b) ve projeye ait ara yüzün kendisine verilen addır.

Değişik platformlarda ( Pc, Mobil vs) çalışacak şekilde tasarlanan web sitesinin düzenlendiği kısım bu alana girer. Projeye ait diğer verilerden ve alanlardan bağımsız olarak, Frontend Developer bu iş yönetim sisteminde sadece bu alanın geliştirilmesi için çalışacaktır.  

Controller

 İş akışını idare eden ve veri akışını kontrol eden kısım burasıdır. Tüm işlemleri controller yapar. Veri alışverişleri, hesaplama ve izinler controller tarafından gerçekleştirilir.

 Tarayıcı üzerinden oluşturulacak bir istek Controller’ın kendisine verdiği izin ölçüsünde modele ulaşır. Model ile veritabanı üzerinde oluşturulmak istenen değişiklik veya etkinin oluşturulmasını sağlanır ve yapılan istek veya değişiklik gerçekleştirilerek controller tarafından view da görüntülenir. Bu iş akışı, döngü olarak sürekli olarak devam eder.

İş akış döngüsü

 Bu şekilde oluşturulan iş modeli, kodların bir düzen dahilinde kayıt edilip, birbirleri içinde karışmasını engeller. Böylece spagetti kod denilen birbiri içine girmiş ve karışmış kod sorunları oluşmamış olur.

 Aynı zamanda güvenlik sorunlarının da önüne geçen bir çalışma sistemdir. Son zamanlarda sık kullanılan çalışma deseni olan MVC iş akış görseli aşağıdaki gibi olacaktır.  

MVC modeli iş akış şeması

Tüm bunların haricinde WordPress gibi binlerce tema desteği sağlayan CMS ( Content Management System) gibi içerik yönetim sistemleri veya hazır site örnekleri kullanılarak kendi başınıza hiç bir kod bilgisine sahip olmadan web sitesi tasarlanabilmektedir. 

Konuyla ilgili hazır site oluşturma makalesini okuyarak siz de kendi web sitenizi tasarlayabilirsiniz.