H O K K A
Haber Yazılımında Kampanya İncele
7 Ekim 2016

6 Adımda Mobil Uygulama Arayüzü tasarımı

Tasarım eğitiminde yeni yer bulan  ‘Kullanıcı Ara yüzü Tasarımı’ ders içerikleri önce web tasarımı üzerinden, ardından ise mobil uygulamalar ile gelişmeye başladı.

Bu özel tasarım, WordPress hegemonyası ile tasarımcılara daha geniş bir çalışma imkânı sunan mobil uygulamaların popülaritesini arttırmış durumda.

Şimdi sizlere madde madde tasarım sürecini aktarmaya çalışacağım.

1.Araştırma:

Uygulama yapacağınız konuda araştırma yapmakla işe başlamalısınız araştırma sayeinde daha önce yapılmış olan hataları tekrar etmeme açısından önem arz etmektedir. Bu özel tasarım ile kompozisyon, grid gibi tasarım fikirlerinizi güçlendirebilirsiniz. Sadece örnekleri incelemelisiniz kopya yapmamka gerek.

Araştırma sayesinde sistemdeki açıkları yakalayarak çok daha geliştirebilmek adına önemlidir.

2_Volodymyr Melnyk ( akış şeması)

Akış Şeması, sayesinde ekranlar arası geçişlerin kolayca sağlanmasını ve uygulama içinde bulunan  navigasyonel fikirlerin tasarım  aşaması  henüz başlamadan  düzenlemeye izin vermesidir. Bu sayede ekran tasarlama seçimlerinizi en baştan itibaren belirleyebiliyorsunuz.

Bir ekip işi üstlenerek editör, yazılımcı ve tüm çalışanlar ile akış şeması oluşturmanız gerekmektedir. Akış şeması oklar ile tüm geçişleri ve adımları bir bir ortaya koymaktadır. Bu adım yazılımcının işini bir hayli kolaylaştırmaktadır.

3_-June-Hyeong-Lee-JAEWOO-Anjpg (Logo Tasarımı)

3_DHNN Creative

Mobil uygulamanın ana ara yüzde kullanmayı düşündüğünüz logo tasarımı ile işe başlamak işinizi kolaylaştıracaktır. Diğer uygulama logolarıyla bir arada bulunacak ve telefon tablet gibi araçlarda  istenen duruşa sahip olacak bir logo tasarımı için renk, tipografi, çizim ve şekil gibi detayları iyi planlanmalıdır. Daha sade çizimler ve renkler kullanılarak boyut olarak 180×180 piksel aşılmamalıdır.

4_Grid-DHNN Creative (Şematik Plan)

4_WireFrame_I Am

Wireframe, ara yüz için uygulanan  şematik plandır. Wireframe ile görsel bir iskelet oraya çıkartılmaktadır. Elle ya da PC üzerinde rahatlıkla çizilebilmektedir.

Wireframe, sayesinde ara yüzdeki görsel elemanlar istenen şekilde yerleştirilerek  genel hatlar ortaya çıkmaktadır. Ara yüzde yapılan yerleştirmeler sırasında kompozisyon ve elemanlar arası konum, sıralama hiyerarşisi, kontrast, devamlılık, yakınlık, arka plan ve şekiller  gibi düzenlemeler en iyi biçimde tasarlanmalıdır.

5-Nassir Uddin (ikon seti tasarımı)

5-Milen-Miha

5-Yalantis Mobile_01

Kullanıcıların Ara yüzü tasarımlarında dikkat etmesi gereken diğer bir nokta  ikon seti tasarımı olmalıdır. Seti önceden tasarlanmış olan uygulamalarda logoya uygun bir tasarım yapılmalıdır.

İnternet üzerinde satın alınan ikon setleri kullanılarak özgün bir çalışmaya imza atmak isteyenler için iyi seçim olamayabilir. İkon setini tasarımı sırasında sise renk, kenar şekli, çerçeve, çizgi kalınlıkları, leke değerleri gibi çalışmalar en özel biçimde yapılmalıdır.

Tasarlanan yeni ikon seti diğer hazır setler ile kıyaslanarak artı ve eksiler değerlendirilmelidir. Tasarım sırasında zıt renkler ile çalışma güçlendirilmelidir.

6-Proto-JustInMind-mobile-tour-trial-computer

6- Abhinav Chhikara (Prototip yapma)

6_JerseyBoys Uygulaması

Tasarım farklı aşamalardan oluşan bir dönemdir. Ve teknoloji, ergonomi, estetik, kullanıcı deneyimi gibi faktörlerle sürekli gelişmektedir.

Bu nedenle mobil uygulamanın ara yüzünü hazırlarken hemen ardından bir prototipi çıkartılmalı ve kullanıcı deneyimine sunulmalıdır.

Kullanıcı deneyimi tasarımı (UX Design) terimi geçmişte kalan bir terim gibi akıllara gelse de tasarımın olmazsa olmaz aracıdır.

Tasarımcı tüm çalışmalarını kullanıcılar için yapar.

Bu kullanıcı herkes olabilir. ara yüz tasarımı son bulduğunda ise kolaylıkla bulunulabilecek ve kodlama bilmeyen herkes tarafından kullanılabilecek “Prototip yapma” programları aracılığıyla mobil cihazlara yüklenebilen bir prototip tasarlanır. Bu sayede hangi düğme ne işe yarar, Wireframe ve akış şemasını öne çıkartan bir çalışma yapmaktır. Bu süreç sonunda tasarımcı, kullanıcı, yazılımcı ve müşteriye her konuda açık bir şekilde bilgi verir.