Ön Yüz Tasarımı (Frontend) Nedir?

Ön yüz tasarımı, bir web sitesi, mobil uygulama ya da herhangi bir programda, kullanıcıların tıkladığı ve etkileşime girdiği tüm alanların tasarlanması ve kodlanmasıdır. Yani ön yüz tasarımı, kullanıcıların gözleriyle gördüğü ve etkileşime geçtiği sadece görünen kısımların yapılmasıdır.

Ön Yüz Tasarımı Ne Demektir?

• Kullanıcı nereye tıklayacak?
• Renk uyumu nasıl olmalı?
• Mobilde nasıl görünmeli?
• Hangi bilgi önce, hangi bilgi sonra?
• Basit, anlaşılır arayüz mü var?

Bu tür düşüncelerle yapılan tasarıma UI (Kullanıcı Arayüzü) Tasarımı, kullanıcı deneyimi düşünülerek yapılan yapıya da UX (Kullanıcı Deneyimi) denir.

Ön Yüzde Neler Yapılabilir?

• Masaüstü Uygulamalar: Word, Photoshop gibi programların arayüzleri.
• Mobil Uygulamalar: Instagram, WhatsApp gibi telefon uygulamalarının kullanıcıya görünen kısımları.
• Web Uygulamalar: YouTube gibi siteler ya da şu an bu yazıyı okuduğun web sitesinin tasarımı.
• Dokunmatik Ekranlı Sistemler: ATM gibi cihazlardaki kullanıcı arayüzleri.

Hepsinin bir ön yüz tasarımı vardır yani kullanıcı girdiği uygulamada ne gördüyse odur.

Hangi Tür Uygulamalarda Ön Yüz Vardır?

1. Web Uygulamalarında
   • HTML (HyperText Markup Language)
     • Web sayfasının iskeletidir. Yazı, başlık, resim gibi içerikleri oluşturur.
   • CSS (Cascading Style Sheets)
     • Web sayfasına renk, şekil, yazı tipi, konum gibi görsel tasarımı verir.
   • JavaScript
     • Sayfayı hareketli, etkileşimli hale getirir. (örnek: butona tıklayınca işlem yapma)
   • Bootstrap
     • Hazır CSS ve JS sınıfları sunan kütüphane. Responsive (mobil uyumlu) tasarımlar kolaylaşır.
   • React
     • Facebook tarafından geliştirilen, web sayfalarında hızlı ve dinamik bileşenler (component) yapmanı sağlar.
   • Vue.js
     • Basit öğrenilen, hafif ve hızlı bir JavaScript framework’üdür. Dinamik web uygulamaları için kullanılır.
   • Angular
     • Google tarafından geliştirilmiştir. Büyük ve karmaşık web uygulamaları için güçlü bir yapıdır.

1. Masaüstü Uygulamaları
   • C# Windows Forms
     • Windows için basit masaüstü uygulamaları yapmanı sağlar. Form tasarımı sürükle-bırak şeklindedir.
   • C# WPF (Windows Presentation Foundation)
     • Windows Forms’tan daha gelişmiş grafik ve tasarım destekli masaüstü uygulama framework’ü.
   • Java Swing
     • Java ile masaüstü arayüz (buton, panel vs.) geliştirmek için kullanılan eski bir GUI aracıdır.
   • JavaFX
     • Swing’in gelişmiş hali. Daha modern ve zengin arayüzler sunar.
   • Electron
     • Web teknolojileri (HTML, CSS, JS) ile masaüstü uygulaması yapmanı sağlar. (Örnek: Discord, VS Code)

1. Mobil Uygulamalar
   • Flutter (Dart dili)
     • Google tarafından geliştirilmiştir. Tek kodla hem Android hem iOS uygulaması yazmanı sağlar.
   • React Native
     • JavaScript ve React kullanarak hem iOS hem Android için mobil uygulamalar geliştirebilirsin.
   • Swift
     • Apple tarafından geliştirilen, iOS (iPhone, iPad) uygulamaları yazmak için kullanılan dildir.
   • Kotlin
     • Android uygulamaları geliştirmek için kullanılan modern ve sade bir programlama dilidir. Java’nın yerini almıştır.