Web (İnternet) Projeleri İçin Nasıl Taslak Oluşturulur?

Web (İnternet) Projeleri İçin Nasıl Taslak Oluşturulur?

Web (İnternet) Projeleri İçin Nasıl Taslak Oluşturulur?

Web (İnternet) Projeleri İçin Nasıl Taslak Oluşturulur?

Gerçekleştirmek istediğiniz bir web projenizin amacını ve özelliklerini belirledikten sonra tasarım aşamasına geçmeden önce her sayfayla ilgili bir taslak çizim yapmanızda fayda vardır. Bu sayede hem web sitesi gözünüzde şekillenir hem de tasarımcınıza ne istediğinizi kolaylıkla anlatabilirsiniz. Aynı zamanda sitenin kullanıcı deneyimini de projeye başlamadan iyileştirme şansınız olacaktır.Balzamic Mockup

Bir sitenin taslak çizimini (mockup) oluşturmak için gerek web üzerinde çevrimiçi çalışan gerekse de bilgisayara yüklenerek kullanılan birçok araç mevcuttur. Biz bu araçlardan en popüler olan Balzamic Mockup isimli programı tercih ettik. Programı http://www.balsamiq.com/products/mockups adresinden indirebilirsiniz.

Sitede dilerseniz Try Web Demo seçeneğiyle programı indirmeden deneyebilirsiniz. Tabii bu demonun süre ve taslak sayısı limitler olacaktır. Programı bütün özellikleriyle kullanmak için Download sekmesini tıklayınız. Programın kullanım ücreti tek kullanıcı için 79 dolardır. Dilerseniz programı herhangi bir ücret ödemeden 7 gün boyunca kullanabilirsiniz.

İndirme sayfasında işletim sisteminiz tespit edilecek ve size uygun dosya belirecektir. Download the Installer düğmesine basarak indirme işlemine başlayabilirsiniz. Eğer başka bir işletim sistemi için yükleme yapacaksanız Other Download Links altındaki linklerden size uygun olanını seçmeniz gerekir. Program bilgisayarınıza indirildikten sonra yükleme işlemini başlatınız.

Eğer kurulumu Windows işletim sistemi üzerinde gerçekleştiriyorsanız Adobe Air kurmanız gerekmektedir. Kurulumu tamamladıktan sonra program çalışacaktır.adobe_air

Balzamic Mockup programı oldukça basit bir ara yüze sahiptir. Karelerle çizilmiş alan taslağımızı oluşturacağımız bölgedir. Yukarıdaki sekmeler ise sık kullanılan görsel öğeleri barındırır. All seçeneği seçildiğinde kullanılabilecek bütün öğeler listelenecektir. Sekmelerin yukarısında ise kayıt etme, kopyalama gibi düzenleme işlemlerine ait kısa yollar bulunur.

Herhangi bir öğeyi ekrana sürükledikten sonra üzerine tıkladığınızda ekranda siyah bir pencere belirir. Bu pencere öğe ile ilgili özellikleri belirtir. Öğelere göre değişkenlik gösterse de bu pencerede temel olarak aşağıda özellikler bulunur;

  1. Editing: Öğeye ait kopyalama, yapıştırma, kilitleme gibi temel düzenleme işlemleri buradan yapılır.
  2. Layering: Öğenin diğer öğelere göre z indeksini belirler. Eğer öğeniz başka bir öğenin arkasındaysa ve siz bunu öne taşımak istiyorsanız bu seçenek altında Bring to Front (öne getir) düğmesini tıklamanız gerekir. Buradaki seçeneklerle öğelerin derinlik sıralamasını değiştirebilirsiniz.
  3. Color: Her öğede yer almamakla beraber renk değişimi buradan yapılır.

Böylece ilk sayfamızı oluşturmuş olduk. Bunun bir giriş (login) ekranı olduğunu varsayarak kullanıcıdan kullanıcı adı ve şifre sorulacağını varsayalım. Bu amaçla ekrana iki adet metin kutusu (Text Input) ve metin (Label of text) sürükleyelim.

Sürüklediğiniz öğelerdeki metin değerlerini değiştirmek için öğenin üzerine çift tıklamanız yeterli olacaktır. Burada Text Label öğelerindeki değerleri Kullanıcı Adı ve Şifre olarak değiştirdik.

Böylece basit bir giriş sayfası tasarımını tamamlamış olduk. Bu şekilde siz de diğer öğeleri kullanarak hayalinizdeki web sayfasını programlamaya geçmeden önce canlandırabilirsiniz. Projeniz bittikten sonra File menüsü altında bulunan Export seçeneklerinden biriyle taslağınızı herkes tarafından okunabilecek bir formatta kayıt edebilirsiniz.

 

Bu gönderiyi paylaş

Bir cevap yazın