Bir yazılım projesi yapmak istiyorsunuz ama nereden başlayacağınızı bilmiyor musunuz? İşte işinizi kolaylaştıracak ipuçları...
Wireframe nedir? Nasıl olmalıdır?
Wireframe projenin kurgusu ve işlevselliği anlamında müşteriye ve yazılımcıya fikir sahibi olması açısından çizilen ekran tasarımlarıdır. Wireframe'ler tasarım değildir. Programın işlevi hakkında fikir verme amacıyla çizilir. Sayfada bulunacak olan butonları, text alanlarını örnek olarak gösteren çizimlerdir. Sistemi daha iyi anlamanızı sağlar. Wireframe çizdiğinizde yapacağınız programı daha iyi görebilir, analizini daha iyi çıkarabilirsiniz. O yüzden bir projenin analizini yapmada çok önemli bir rol oynarlar.
Wireframe çizimi yapmak için internet üzerinde bir çok uygulama bulacaksınız. En yaygın kullanılanları Visio ve Balsamiq olmakla birlikte, kolay yoldan kendiniz için hazırlıyorsanız, Powerpoint kullanarak da sayfalarınızın en basit tasarımlarını çıkarabilirsiniz. Mesela kafanızda bir projeniz var ama bir türlü tam oturtamıyorsanız açın bir Powerpoint dokümanı aşağıdaki gibi bir login ekranı çizmekle işe başlayın. Gerisinin ne kadar kolay geldiğini siz de göreceksiniz.
Wireframe çizerken yukarıdaki iki örnekte olduğu gibi de çizim yapabilirsiniz. Bu çizimlerinizin tasarımda böyle görüneceği anlamına gelmez. Sadece sayfada ne olacağını görmek ve gösterebilmek için bu tasarımları hazırlıyoruz. (Siz yine de sağ tarafta olduğu gibi çizmeyin, ben tasarım amacı olmadığını anlatmak için çizdim. )
Tasarımdan sonra kullanacağınız ekran tasarımınıza göre değişiklik gösterecektir. Yukarıdaki wireframe çizimlerinden sonra uygulanmış iki tasarım örneğini aşağıda paylaşıyorum.
Wireframe projenin kurgusu ve işlevselliği anlamında müşteriye ve yazılımcıya fikir sahibi olması açısından çizilen ekran tasarımlarıdır. Wireframe'ler tasarım değildir. Programın işlevi hakkında fikir verme amacıyla çizilir. Sayfada bulunacak olan butonları, text alanlarını örnek olarak gösteren çizimlerdir. Sistemi daha iyi anlamanızı sağlar. Wireframe çizdiğinizde yapacağınız programı daha iyi görebilir, analizini daha iyi çıkarabilirsiniz. O yüzden bir projenin analizini yapmada çok önemli bir rol oynarlar.
Wireframe çizimi yapmak için internet üzerinde bir çok uygulama bulacaksınız. En yaygın kullanılanları Visio ve Balsamiq olmakla birlikte, kolay yoldan kendiniz için hazırlıyorsanız, Powerpoint kullanarak da sayfalarınızın en basit tasarımlarını çıkarabilirsiniz. Mesela kafanızda bir projeniz var ama bir türlü tam oturtamıyorsanız açın bir Powerpoint dokümanı aşağıdaki gibi bir login ekranı çizmekle işe başlayın. Gerisinin ne kadar kolay geldiğini siz de göreceksiniz.
Wireframe çizerken yukarıdaki iki örnekte olduğu gibi de çizim yapabilirsiniz. Bu çizimlerinizin tasarımda böyle görüneceği anlamına gelmez. Sadece sayfada ne olacağını görmek ve gösterebilmek için bu tasarımları hazırlıyoruz. (Siz yine de sağ tarafta olduğu gibi çizmeyin, ben tasarım amacı olmadığını anlatmak için çizdim. )
Tasarımdan sonra kullanacağınız ekran tasarımınıza göre değişiklik gösterecektir. Yukarıdaki wireframe çizimlerinden sonra uygulanmış iki tasarım örneğini aşağıda paylaşıyorum.
Tabi ki projenizi oluşturmak için sadece wireframe dokümanları yeterli değildir. Aynı zamanda bir Proje Beratı da oluşturmanız gerek ama o kadar teknik ayrıntıya giremem diyorsanız. En kolayından kendinizi anlatmanıza yetecek veya projenizin boyutunu görebileceğiniz bir doküman hazırlayabilirsiniz.
Bu dokümanda önce projenizin adı, dokümanın oluşturulma tarihi ve isterseniz versiyonu olan bir kapak hazırlayabilirsiniz. Kapak hazırladıktan sonra Genel başlığı altında projenizle ilgili genel ve önemli bilgileri maddeler halinde yazabilirsiniz. Örnek olarak;
- Projenin ana dili İngilizce olmalıdır.
- Türkçe dil desteği bulunmalıdır.
- Projeye kaydedilen hiç bir bilgi silinmemeli, silinmesi talep ediliyorsa veritabanında aktiflik durumu "false" yapılmalıdır.
Şeklinde projenize göre genel ayrıntıları yazabilirsiniz.
Daha sonra oluşturacağınız başlıkları oluşturduğunuz wireframe'leri göz önünde bulundurarak verebilirsiniz. Mesela Giriş Sayfası (Login), Ana Sayfa, Bildirimler, Ayarlar gibi başlıklar oluşturabilirsiniz. Bu başlıkların altına sayfaların özellikleri, önemli ayrıntıları amacı gibi bilgileri yazabilirsiniz.
Login
- Kullanıcı Adı her kullanıcıya özel (unique) olmalıdır.
- Kullanıcı Adı veya e-posta adresi ile giriş yapılabilmelidir.
- Şifre en az 1 büyük harf, 1 küçük harf ve 1 rakam içermelidir.
- Giriş Yap butonuna basıldığında kullanıcı adı ve şifre uyuşuyor ise Ana Sayfa'ya yönlendirme olmalıdır.
- Giriş Yap butonuna basıldığında Kullanıcı Adı ve/veya Şifre yanlış ise "Kullanıcı Adı veya Şifre hatalı. Lütfen tekrar deneyiniz." uyarısı vermelidir.
- Şifremi Unuttum butonuna tıklandığında Şifremi Unuttum Sayfası açılmalıdır.
- Üye Ol butonuna basıldığında Üye Ol sayfası açılmalıdır.
Ana Sayfa
- Bu sayfada takip edilen kullanıcıların paylaşımları listelenecektir.
- Her bir paylaşımda Kullanıcı Adı, Açıklama, Görsel, Ayrıntılar butonu, Beğen, Yorum Yap butonu olmalıdır.
Kullanıcı Adı: Üyenin siteye üye olurken seçtiği Kullanıcı Adı bilgisindir. (Burada veritabanı tablolarını da yazabilirsiniz.)
Açıklama: Kullanıcının paylaşım eklerken, doldurduğu açıklama alanında bulunan yazıdır. (Veritabanında bulunduğu tablo adı, alan adı yazılabilir.)
Görsel: Kullanıcının paylaşım yaparken eklediği görseldir.
Ayrıntılar Butonu: Yapılan paylaşımlarda bulunan Ayrıntıları gösteren butondur. Bu butona basıldığında Sosyal Medya hesaplarında (Facebook, Twitter, Google+ vb.) paylaş, Şikayet Et, Bağlantı Adresini Kopyala ayrıntıları gözükmelidir.
(Burada ayrıca Sosyal Medya hesaplarında (Facebook, Twitter, Google+ vb.) paylaş, Şikayet Et, Bağlantı Adresini Kopyala'nın yapacağı işlemler de yazmalıdır.)
Beğen: Beğen butonuna basıldığında görsel altında bulunan kalp ikonunun rengi değişmelidir. Ayrıca Beğen ikonu yanında bulunan rakamlara tıklandığında beğenen kişi sayısı ve kişiler listelenen Beğen sayfasına yönelmelidir.
Yorum Yap: Yorum Yap ikonu bulunmalıdır. Kullanıcıların paylaşımlar hakkında yaptığı yorumların sayısı Yorum Yap ikonunun yanında gösterilmelidir. Yorum sayısına basıldığında yorum yapan kişilerin ve yaptığı yorumların listelendiği Yorum Ayrıntı sayfasına yönlenmelidir. Görsel altına yorum eklenmesi durumunda, maksimum 2 yorum görüntülenmelidir. 2'den fazla yorum varsa yorumların altında "Tümünü Oku" ikonu olmalıdır. Bu linke tıklandığında Yorum Ayrıntı Sayfası'na gitmelidir.
- Sayfanın üzerinde uygulama ikonu olmalıdır.
Yukarıda Instagram gibi bir uygulamanın Login ve Ana sayfa analizini kısaca açıklamaya çalıştım. Projenizde bulunan sayfaları tek tek ve daha ayrıntılı bir şekilde açıklamalısınız.
Önemli Notlar:
- Kullanıcı güvenliği açısından kullanıcı bilgileri yazıldığında kullanıcı adının mı, şifrenin mi yanlış olduğu bilgisi verilmemelidir. Kullanıcı adı da şifre de yanlış olsa "Kullanıcı Adı veya Şifre hatalı uyarısı" verilmelidir.
- Kullanıcılarla ilgili yaşayabileceğiniz problemler olacağından (tecrübe ile sabittir) sisteme kaydedilen bir bilgiyi mümkün olduğunca silmeyin, sadece aktif olma durumunu "false" yapın. Bu cümle açıklayıcı olmadı ise ayrıntılı bir şekilde Veritabanı İpuçları yazımda anlattım.
(Kanunen bir bilgiyi tutma süreniz de olabilir. Bilgi güvenliği konusunu da projenizin ileride ki aşamalarda incelemeyi unutmayın.)
- Kullanıcı güvenliği açısından kullanıcı bilgileri yazıldığında kullanıcı adının mı, şifrenin mi yanlış olduğu bilgisi verilmemelidir. Kullanıcı adı da şifre de yanlış olsa "Kullanıcı Adı veya Şifre hatalı uyarısı" verilmelidir.
- Kullanıcılarla ilgili yaşayabileceğiniz problemler olacağından (tecrübe ile sabittir) sisteme kaydedilen bir bilgiyi mümkün olduğunca silmeyin, sadece aktif olma durumunu "false" yapın. Bu cümle açıklayıcı olmadı ise ayrıntılı bir şekilde Veritabanı İpuçları yazımda anlattım.
(Kanunen bir bilgiyi tutma süreniz de olabilir. Bilgi güvenliği konusunu da projenizin ileride ki aşamalarda incelemeyi unutmayın.)