Pencil Project ile Wireframe Oluşturma

Wireframe, web tasarım şablonları tasarlanırken yapılması gereken ilk aşamalardandır. Bir projeyi yapmaya başlamadan önce onu taslak halinde belli bir görünüme kavuşturma işlemi diyebiliriz. Kısacası bir blueprint işlemidir.Wireframe aynı zamanda uygulamalar ve farklı cihazlar içinde kullanılabilir. Wireframe sayesinde tasarımın yerleşim düzeni ayarlanmış oluyor.

Wireframe oluşturmak için Pencil Project adında ücretsiz ve açık kaynak bir program kullanılacak. İster programı bilgisayara indirip kurun, isterseniz de Firefox tarayısından eklenti olarak kullanın, seçim size kalmış. 

Pencil Project Kullanımı

Pencil Project'i açtıktan sonra New Document (Ctrl+N) yapın. Sonrasında Ctrl+S ile projeyi istediğiniz bir isimle kaydedin. Ben belgeyi index olarak adlandırdım. index yazılı kısma sağ klik yaptıktan sonra New Page... seçenğine tıklanır.
Pencil Project ile Wireframe Oluşturma
Açılan pencerede ise sayfa başlığını body olarak belirledik, kullanıcı istediği ismi koyabilir. Sayfa boyutunu ise 1920x1080 boyutlarında bir standart olarak belirledim. Arkaplan rengini ise taslak içindeki öğeler belli olsun diye gri renk tonu seçildi. Sonrasında Create butonuna tıklanır:
Pencil Project ile Wireframe Oluşturma
 Taslak oluşturma sırasında gerekli tüm araçlar ve şekiller sol panelde yer almakta. Sadece Basic Web Elements kısmını kullanabiliriz gibi bir şart yok hatta tasarımı yaparken Common Shapes kısmından daha çok şey kullanacağız diyebiliriz:
Pencil Project ile Wireframe Oluşturma
Örneğin taslağın container kısmını Common Shapes'e ait Rectangle ile ekledik ve resimde olduğu gibi bazı özellikler verdik:
Pencil Project ile Wireframe Oluşturma
Şimdi bu şablona bazı ana bölümler ekleyeceğiz. Bunlar header, sidebar, main ve footer kısımları olacak:
Pencil Project ile Wireframe Oluşturma
Bunları ekledikten sonra Ctrl+A yapıp tüm eklediklerimizi seçmeliyiz. Sonrasında sağ klik ile bu yapıyı kilitlemeliyiz. Bu sayede sabit bir şekilde duracaklar ve üstlerine başka şeyler eklenebilecek. Sol panelde yer alan şekilleri kullanarak aşağıdaki gibi basit bir taslak oluşturdum:
Pencil Project ile Wireframe Oluşturma
Bu şekilde çok farklı taslaklar oluşturarak tasarımı planlı ve hızlı bir şekilde gerçekleştirebilirsiniz 

Hiç yorum yok:

Yorum Gönderme