1. Proje Planlama ve Hazırlık
- Amaç: Kullanıcı dostu, estetik bir mobil uygulama ekranı tasarlamak.
- Araçlar:
- Photoshop CC 2021 veya üzeri
- UI kit (Adobe XD UI kitinden indirebilirsiniz)
- Araç Çubuğu Düzeni:
- Window → Tools, Properties, Layers paneli açık
- Artboard Oluşturma:
- File → New… → Artboard: iPhone 13 Pro (1170×2532 px)
2. Wireframe ve Izgara Sistemi
| Özellik | Ayar/Ölçü | Açıklama |
|---|---|---|
| Columns | 4 sütun, Gutter 16 px | Mobile için okunabilir genlik |
| Margin | 24 px | Kenar boşlukları |
| Baseline Grid | 8 px satır aralığı | Yazı ve öğe hizalama |
- Wireframe Çizimi:
- Rectangle Tool (U) ile temel kutuları yerleştirin.
- Line Tool (U) ile bölümler arası boşlukları gösterin.
- Katman Yapısı:
- Grup:
Wireframe(Opacity %30) - Altında
UI Elementsgrubu
- Grup:
3. Renk ve Stil Rehberi Oluşturma
| Öğe | Renk Kodu | Kullanım Alanı |
|---|---|---|
| Primary | #4A90E2 | Buton, vurgular |
| Secondary | #50E3C2 | Linkler, alt butonlar |
| Background | #F9F9F9 | Ana arka plan |
| Text – Dark | #333333 | Başlık, önemli metin |
| Text – Light | #777777 | Yardımcı metin |
- Swatches Paneli: Renkleri kaydedin.
- Character Styles:
- H1: 24 pt, Bold, #333333
- Body: 16 pt, Regular, #777777
4. UI Öğeleri Tasarlama
- Buton:
- Rounded Rectangle Tool (Radius 12 px)
- Fill: Primary, Stroke: None
- Layer Style → Drop Shadow: Opacity %20, Distance 4 px, Size 8 px
- İkonlar:
- SVG veya font ikon kullanımı (File → Place Embedded)
- Boyut: 24×24 px
- Form Alanları:
- Input kutusu: Border 1 px, #CCCCCC, Radius 8 px
- Placeholder: 14 pt, Light #AAAAAA
5. Prototip ve Etkileşim Katmanları
- Oluşturulan Ekranları Photoshop’tan File → Export → Artboards to PDF ile tek dosyada dışa aktarın.
- Adobe XD’ye İçe Aktar: PDF’yi XD’ye sürükleyin, otomatik bağlantılar oluşturun.
- Hotspot Ekleme: XD’de buton üzerine prototip bağlantısı kurarak akışı test edin.
6. Varlıkları (Assets) Dışa Aktarma
| Tür | Format | Ölçü (px) | Not |
|---|---|---|---|
| PNG | PNG-24 | @1×, @2×, @3× (multiplier) | Retina desteği için |
| SVG | SVG | Ölçeklenebilir | Basit ikonlar için ideal |
| JPG | JPG-80% | Responsive arka plan | Fotoğraf tabanlı görseller |
- File → Export → Export As…
- Seçilen katmanları Quick Export as PNG ile dışa aktarın.
7. Son Kontrol Listesi ve İpuçları
- Alignment: Tüm öğeler 8 px grid’e hizalandı mı?
- Typography: Başlık ve paragraf stilleri tutarlı mı?
- Color Contrast: WCAG 2.1’e göre metin/arka plan kontrastı en az 4.5:1 mi?
- Naming Conventions: Katman ve grup adları açıklayıcı mı?
Kaynaklar
- Adobe Photoshop Help – Artboards Kullanımı:
https://helpx.adobe.com/photoshop/using/artboards.html - Adobe XD UI Kitler:
https://www.adobe.com/products/xd/resources.html - GuideGuide Eklentisi:
https://guideguide.me/ - WCAG Contrast Checker:
WebAIM: Contrast Checker
webaim.org
