admin
Admin
Efsane Tasarımcı
Merhaba tasarımcılar! Bu rehberde Affinity Designer kullanarak mobil uygulama wireframe’lerinizi nasıl hızlıca oluşturacağınızı ve görselleştireceğinizi adım adım ele alacağız. Hem temel araçlar hem de iş akışınızı hızlandıracak püf noktaları burada bulacaksınız.
1. Doküman ve Artboard Ayarları
- Yeni Dosya Oluşturma:
File > New…yolunu izleyerek iPhone veya Android boyutlarına (örneğin 1080×1920 px) uygun artboard ayarlayın. - Grid ve Kılavuzlar:
View > Show GridveView > Guides Managerile 8-pt grid sistemini etkinleştirin.
2. Temel Wireframe Bileşenleri
| Bileşen | Araç / Panel | Açıklama |
|---|---|---|
| Header | Rectangle Tool (M) | Başlık çubuğu için yükseklik 56 px önerilir. |
| Navigation Bar | Ellipse + Icon Assets | Alt gezinme çubuğu ikonlarını Assets panelinden sürükleyin. |
| Content Placeholder | Rectangle Tool + Text Tool | Metin ve görsel alanları için geçici kutular oluşturun. |
| Button | Rounded Rectangle + Text | Köşe yarıçapını 8 px yapın, renk için swatch seçin. |
3. Hızlı Kısayollar ve İpuçları
- Seçim Araçları: V tuşuyla Move Tool, A tuşuyla Node Tool arasında hızla geçiş yapın.
- Kopyalama:
Alt + Dragile objeleri çoğaltın; sonraCtrl + Gile gruplandırın. - Renk Kodları: Hex kodlarını doğrudan renk paneline yapıştırarak tutarlılığı koruyun.
4. İnteraktif Prototip Hazırlığı
<details> <summary>Prototip Butonları ve Linkler</summary>- Symbols Panel: Tek bir buton sembolü oluşturun, tüm artboard’larda aynı sembolü kullanarak güncellemeyi kolaylaştırın.
- Hyperlink Yer İmleri: Wireframe içinde ‘Placeholder’ alanları için not almak adına
Text Toolile köprü ekleyin. - Export Sırası: Önce artboard’ları
File > Export Personaüzerinden PNG olarak dışa aktarın, sonra prototip araçlarına aktarın (örneğin Figma veya InVision).
5. Faydalı Kaynaklar
- Affinity Designer Öğrenme Merkezi
- Official Affinity Forumları – Designer Kategorisi
- YouTube: UI Wireframe Eğitimi
Çok faydalı bilgiler.
