Web Arayüz Tasarımı(UI) Nasıl Yapılır?

UI, kullanıcı deneyimi odaklı yazılımın arayüz tasarımıdır. Kullanıcı ve kullanılan yazılım arasında etkileşimi sağlar. İyi bir arayüz tasarımı siteyi ziyaret eden kişinin ziyaret amacına kolaylıkla hizmet eder ve ihtiyacını karşılamasını sağlar. Web Arayüz Tasarımı(UI) Nasıl Yapılır? içeriğimizi okumaya başlamadan önce  Web Arayüz Tasarımı (UI) Ve Uygulamaları Nedir? içeriğimizi inceleyerek daha detaylı bilgiye sahip olabilirsiniz.

Web arayüz tasarımı için öncelikle bilgisayarımızda Adobe Photoshop ya da dengi bir grafik yazılımının yüklü olması gerekiyor. Daha sonrasında ise arayüz tasarım çalışmalarımıza başlıyoruz. Arayüz tasarım aşaması aslında kafanızdaki web sitesinin hem eskiz halini hem de esas halini ortaya çıkarabileceğiniz bir aşama olarak nitelendirilebilir.

Arayüz tasarımlarda genel genişlik 2000 px standartlarındadır. Arkaplan 2000px dolaylarında hazırlanır ve esas site içerikleri bu piksel ölçümünü ortalayacak şekilde minimum 1024px genişliğinde hazırlanır. Bunun en büyük nedeni web sitesinin tüm monitörlerde ortalı görülmesi ve CSS entegrasyon aşamasında yazılımcıya sıkıntı yaratmamasıdır.

Bu ölçümler sonrasında kafanızdaki web sitesi yapısını araçlar ile oluşturmaya başlıyorsunuz. Photoshop sizlere araçlar ile alanlar oluşturma, sıfırdan çizim yapabilme, özel style paketleri ve renklendirmeler oluşturarak kendinize özel bir yapı kurabilmenin imkanını sunuyor. Araçlar yardımı ile web sitelerinizi oluşturuyorsunuz.

Web Arayüz Tasarımı Nasıl Yapılır?Frontend ve Backend

Bu iki terim, aslında “web tasarımı” ve “web geliştirme” olarak da adlandırılabilir. Bu iki terim genelde sektörün dışından olanlarda kafa karışıklığı yaratıyor gibi görünse de aslında aralarındaki farkı açıklamak nispeten kolay. Bunu en basit tabirle açıklamak gerekirse; frontend, bir web sitesine girdiğinizde etkileşime girdiğiniz arayüzün tasarım ve geliştirmesine; backend, bu web sitesinin perde arkasında yer alan, yazılım geliştirme işine verilen adlardır.

Frontend

Frontend, web sitenizin görüp etkileşime girebildiğiniz kısımlarına verilen addır. Frontend genellikle web tasarımı ve web sitenizin ön yüzünün geliştirilmesini kapsar. Web tasarımı dendiğinde; Adobe XD, Photoshop ve Sketch gibi tasarım programlarını kullanabilen, aynı zamanda da HTML, CSS, JavaScript ve JQuery ile kod yazabilen tasarımcılardan bahsedilir. Bir web sitesini kullanırken gördüğünüz her şey; HTML, CSS ve JavaScript’in, kullandığınız web tarayıcı tarafından kontrol edilmesidir. Bunun içinde de fontlar, açılır menüler, geçişler, sliderlar, iletişim formları vb. tasarımsal işler yer alır.
Frontend’de yer alan bu öğelere eklenen bilgilerin depolanabilmesi, yani kısaca frontend’in hayata geçebilmesi için gereken alt yapı ve teknolojiyi sağlayan ise backend’dir.

Backend

Backend genellikle bir sunucu, bir uygulama ve bir veri tabanından oluşur. Sistemin mimarisini oluşturulan, frontend’den bilgi gelmesini sağlayan ve hatta gelen bilgiyi yorumlayarak ayrıştıran arka plan uygulamalarının tümü backend olarak adlandırılır. Backend’in vermiş olduğumuz örneklerin çok daha ötesinde olduğunu unutmamak gerek. Backend’de oluştrulan kodsal yapının arka planda sistematik olarak işlemesi ile frontend olarak adlandırdığımız önyüzde verimli bir şekilde çalışıyoruz. Örneğin bir havayolu veya otobüs firmasının web sitesine girerek bilet aldığınızda frontend ile etkileşime girmiş olursunuz. ancak sizin bilgilerinizi ayrıştıran, depolayan ve yorumlayan taraf backend’dir.

Marker Groupe’un sağladığı hizmetler hakkında bilgi edinmek için bizimle MarkerGroupe.com web sitesi üzerinden veya hello@markergroupe.com e-mail adresi üzerinden iletişime geçebilirsiniz.

Benzer İçerikler