![\"Image](\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*KPkNJ6zxonpkZetqK4u72Q.png\")
\nGiri\u015f:<\/span><\/strong><\/h2>\n
Uzun zamand\u0131r ara verdi\u011fimiz ara\u00e7lar yaz\u0131s\u0131na son vermek ad\u0131na tekrar sizler ile birlikteyim \ud83d\ude42 Yaz\u0131ma giri\u015fi, bir ka\u00e7 soru ile yapmak istiyorum. \u00d6ncelikli olarak uygulamalar\u0131n\u0131zda Grafiksel Kullan\u0131c\u0131 Aray\u00fcz\u00fc (GKA) elemanlar\u0131n\u0131z\u0131 nas\u0131l tasarl\u0131yorsunuz ya da dok\u00fcmante ediyorsunuz:<\/p>\n
- \n
- Yukar\u0131daki resimde oldu\u011fu gibi tahtaya \u00e7izerek :),<\/li>\n
- Herhangi bir \u00e7izim yapmadan, sadece s\u00f6zel gereksinimlerle,<\/li>\n
- GKA tasar\u0131mlar\u0131 i\u00e7in kullanaca\u011f\u0131m\u0131z geli\u015ftirme ara\u00e7lar\u0131n\u0131n kendilerini kullanarak sadece tasar\u0131m ama\u00e7l\u0131,<\/li>\n
- Ya da \u00e7e\u015fitli GKA k\u00fct\u00fcphanelerinin deste\u011fi ile kod ya da betik haz\u0131rlayarak,<\/li>\n
- \u00d6rnek \u00e7izimler ya da ill\u00fcstrasyonlar yaparak.<\/li>\n<\/ul>\n
GKA’n\u0131n tasar\u0131m\u0131 ve dok\u00fcmantasyonu yan\u0131nda, g\u00f6z \u00f6n\u00fcnde bulundurulmas\u0131 gereken bir di\u011fer konu da, bu tasar\u0131mlar\u0131 (\u00f6zellikle GKA’lar\u0131) di\u011fer tak\u0131m arkada\u015flar\u0131n\u0131zla, payda\u015flar\u0131n\u0131zla ya da m\u00fc\u015fteriniz ile nas\u0131l tart\u0131\u015f\u0131yorsunuz. \u00d6zellikle GKA a\u011f\u0131rl\u0131k uygulamalar i\u00e7in. Benim a\u00e7\u0131k\u00e7as\u0131 g\u00f6rd\u00fc\u011f\u00fcm kadar\u0131 ile geli\u015ftiriciler, a\u011f\u0131rl\u0131kl\u0131 olarak nihai GKA’lar\u0131 geli\u015ftirecekleri ara\u00e7lar\u0131 (\u00d6r. Visual Studio ya da Qt Designer) kullanmay\u0131 daha \u00e7ok tercih ediyorlar. Her ne kadar belki bunlar nihai yaz\u0131l\u0131mda kullan\u0131lmayacak olsa da. B\u00fct\u00fcn bunlar\u0131n sonucunda, genelde m\u00fc\u015fteriler, nihai aray\u00fczleri veya bu aray\u00fczlerin neye benzeyece\u011fini, geli\u015ftirme \u00e7al\u0131\u015fmalar\u0131 ba\u015flad\u0131ktan sonra g\u00f6rmeye ba\u015flarlar ki, bu a\u015famada yap\u0131lan de\u011fi\u015fikliklerin geri d\u00f6n\u00fc\u015f\u00fc (tabi ki bu de\u011fi\u015fikli\u011fe g\u00f6re) genelde daha maliyetli ve zaman kayb\u0131na sebep olabilmektedir.<\/p>\n
Bir miktar giri\u015f yapt\u0131ktan sonra, bu yaz\u0131m\u0131n oda\u011f\u0131nda i\u015fte bu tarz s\u0131k\u0131nt\u0131lar\u0131 bir miktara azaltabilece\u011fini d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcm ve benim de uzun s\u00fcredir kullanmakta oldu\u011fum, “Pencil” arac\u0131 \u00fczerine olacak. Burada oda\u011f\u0131m ara\u00e7 \u00fczerine olacak, genel GKA tasar\u0131m s\u00fcreci \u00fczerinde durmayaca\u011f\u0131m. Benzer \u015fekilde, genel aray\u00fcz tasar\u0131m prensipleri ya da pratiklerine de\u011finmeyece\u011fim. Ama hem bu konular hem de \u0130nsan Makine Aray\u00fcz\u00fc ‘ne ili\u015fkin bir yaz\u0131y\u0131 da olas\u0131 konular ba\u015fl\u0131\u011f\u0131 alt\u0131na ekliyorum \ud83d\ude09 Bu konulara hakk\u0131nda fikir almak i\u00e7in a\u015fa\u011f\u0131daki sitelere bir g\u00f6z atmak isteyebilirsiniz:<\/p>\n
- \n
- https:\/\/www.interaction-design.org\/literature\/topics\/ui-design<\/strong><\/span><\/a><\/li>\n
- http:\/\/groups.csail.mit.edu\/graphics\/classes\/6.893\/F03\/lectures\/L2.pdf<\/strong><\/span><\/a><\/li>\n
- https:\/\/www.google.com\/search?q=gui+design+process&rlz=1C1SQJL_trTR803TR803&oq=GUI+design+process<\/strong><\/span><\/a><\/li>\n<\/ul>\n
GKA Prototipleme:<\/span><\/strong><\/h2>\n
![\"Image](\"https:\/\/webdesignbeat.com\/wp-content\/uploads\/2014\/08\/balsamiq-wireframe-tool.jpg\")
\nPencil, “wireframe” olarak nitelendirilen bir GKA prototipleri ve \u00e7izimleri olu\u015fturulmas\u0131 i\u00e7in kullan\u0131lan bir ara\u00e7. Buna benzer \u015fekilde bir \u00e7ok uygulama var. Asl\u0131nda bu tarz uygulamalara ili\u015fkin bir s\u0131n\u0131fland\u0131rma da yap\u0131lm\u0131\u015f durumda. Bunlar asl\u0131nda fikir a\u015famas\u0131nda geli\u015ftirme noktas\u0131na kadarki a\u015famalar\u0131 da temsil ediyor.<\/p>\n\u0130lk tip uygulamalar asl\u0131nda karalama seviyesinde, fikir anlam\u0131nda ortaya \u00e7\u0131kan ve kolay bir \u015fekilde k\u00f6t\u00fc fikirlerin elenip, iyi fikirlerin ortaya \u00e7\u0131kar\u0131lmas\u0131na yard\u0131mc\u0131 olacak \u00e7izimle\/ara\u00e7lar. Pencil’in de i\u00e7erisinde bulundu\u011fu ikinci grup “Wireframes” uygulamalar\u0131, GKA arac\u0131l\u0131\u011f\u0131 ile g\u00f6sterilecek olan bilginin hiyerar\u015fisinin, grupland\u0131rmalar\u0131n\u0131n ve temel fonksiyonlar\u0131n\u0131n g\u00f6sterilmesi i\u00e7in ger\u00e7ekle\u015ftirilecek \u00e7izimlerde kullan\u0131lan ara\u00e7lar.\u00a0 \u00dc\u00e7\u00fcnc\u00fc a\u015fama olarak kabul edebilece\u011fimiz “Mockup” ara\u00e7lar\u0131 ise art\u0131k g\u00f6rsel detaylara da yer verecek (renk\/stil\/font) \u00e7izimlerin olu\u015fturulmas\u0131nda kullan\u0131lacak olan ara\u00e7lar\u0131 temsil ediyor. Son olarak da prototipler\/demo uygulamalar\u0131 ise art\u0131k g\u00f6rsel detaylar ile birlikte, ger\u00e7ek sistemde olmas\u0131 beklenen etkile\u015fimin bir k\u0131sm\u0131n\u0131 i\u00e7eren uygulamalar oluyor. Asl\u0131nda buradaki kapsama\/s\u0131n\u0131fland\u0131rmaya bakt\u0131\u011f\u0131m\u0131z zaman, bunlar\u0131 s\u00fcre\u00e7lere g\u00f6re de\u011ferlendirdi\u011fimizde, gittik\u00e7e detaylanan ve nihai \u00e7\u0131kt\u0131ya yakla\u015ft\u0131\u011f\u0131n\u0131 s\u00f6yleyebiliriz.<\/p>\n
Peki bu tarz uygulamalar\u0131 kullanman\u0131n bize ne gibi faydalar\u0131 olabilir. Bunlar\u0131 a\u015fa\u011f\u0131daki gibi \u00f6zetleyebiliriz:<\/p>\n
- \n
- \u00d6ncelikli olarak GKA tabanl\u0131 uygulamam\u0131z\u0131n genel yap\u0131s\u0131n\u0131 g\u00f6rselle\u015ftirmemize yard\u0131mc\u0131 olur,<\/li>\n
- GKA’lar\u0131n dok\u00fcmante edilerek, nihai GKA ara\u00e7 veya k\u00fct\u00fcphanelerinden ba\u011f\u0131ms\u0131z aray\u00fczler sunmam\u0131za olanak sa\u011flar,<\/li>\n
- Son kullan\u0131c\u0131 ve di\u011fer payda\u015flar ile olan ileti\u015fimimizi kolayla\u015ft\u0131r\u0131l\u0131r,<\/li>\n
- Tasar\u0131m de\u011fi\u015fiklikleri daha verimli bir \u015fekilde y\u00f6netilebilir,<\/li>\n
- Aray\u00fczlere ili\u015fkin tasar\u0131m kararlar\u0131n\u0131 daha a\u00e7\u0131k ve net bir \u015fekilde ifade etmemizi kolayla\u015ft\u0131r\u0131r,<\/li>\n
- Kullan\u0131labilirlik a\u00e7\u0131s\u0131ndan \u00f6n de\u011ferlendirme yapabilmemize olanak sa\u011flar,<\/li>\n
- \u0130\u00e7 i\u00e7e veya \u00e7oklu GKA’larda ak\u0131\u015f\u0131 g\u00f6sterebilmemize yard\u0131mc\u0131 olur,<\/li>\n
- Zaman ve eforu d\u00fc\u015f\u00fcr\u00fcr (tekrar tekrar d\u00fczeltmeleri veya \u00f6n \u00e7al\u0131\u015fmalar\u0131 bunlar \u00fczerinden yaparak),<\/li>\n<\/ul>\n
\u015eimdi de Pencil uygulamas\u0131n\u0131n temel kabiliyetlerine bakal\u0131m.<\/p>\n
Kabiliyetler:<\/span><\/strong><\/h2>\n
![](\"http:\/\/1.bp.blogspot.com\/-neb2MFbCRfQ\/UsYrYxeezfI\/AAAAAAAABZ8\/91XdvlMGCbg\/s1600\/Pencil+Prototype.jpg\")
<\/p>\n- \n
- Uygulaman\u0131n kendisi Windows, Linux ve Mac platformlar\u0131n\u0131 destekliyor,<\/li>\n
- Tamamen bedava ve kaynak kodlar\u0131 a\u00e7\u0131k<\/a>,<\/li>\n
- Genel aray\u00fcz a\u015fa\u011f\u0131daki gibi. Sol tarafta \u015fekillere ili\u015fkin sekmeler var, yukar\u0131 sol k\u0131s\u0131mda ana men\u00fc bulunuyor, yukar\u0131 tarafta ise temel d\u00fczenleme ara\u00e7lar\u0131 var ama \u00e7ok fazla de\u011fil. Sa\u011f tarafta ise se\u00e7ili nesnelerin \u00f6zelliklerinin g\u00f6sterildi\u011fi alan var,<\/li>\n<\/ul>\n
![](\"http:\/\/www.yazilimperver.com\/wp-content\/uploads\/2019\/02\/img_5c66d576e8f9e.png\")
<\/p>\n- \n
- A\u015fa\u011f\u0131da kullan\u0131ma sunulan \u015fekillerin bir k\u0131sm\u0131n\u0131 g\u00f6rebilirsiniz:<\/li>\n<\/ul>\n
![](\"https:\/\/pencil.evolus.vn\/images\/stencils.png\")
<\/p>\n- \n
- Boyutland\u0131rma yan\u0131nda, \u00e7evirme i\u00e7in ilgili nesneye fare ile tekrar t\u0131klay\u0131p, kenar d\u00fc\u011f\u00fcmlerinin k\u0131rm\u0131z\u0131 ve daire oldu\u011funu g\u00f6rd\u00fc\u011f\u00fcn\u00fczde \u00e7evirme i\u015fini yapabilirsiniz. Boyutland\u0131rma i\u00e7in bu d\u00fc\u011f\u00fcmler kare ve mavi renkte oluyor,<\/li>\n<\/ul>\n
![\"\"](\"http:\/\/www.yazilimperver.com\/wp-content\/uploads\/2019\/02\/img_5c67e526204f2.png\")
![\"\"](\"http:\/\/www.yazilimperver.com\/wp-content\/uploads\/2019\/02\/img_5c67e5391416a.png\")
<\/p>\n<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
- \n
- Se\u00e7ili \u015fekle ili\u015fkin \u00f6zellikler sa\u011fda bulunan sekmede g\u00f6steriliyor ama sa\u011f t\u0131klanarak a\u00e7\u0131lan men\u00fcde de bir \u00e7ok ayar mevcut,<\/li>\n
- Gruplama, \u00f6ne\/geriye alma, kilitleme (bunu hi\u00e7 kullanmad\u0131m a\u00e7\u0131k\u00e7as\u0131),<\/li>\n
- Se\u00e7ili elemanlar\u0131n imaj olarak \u00e7\u0131kt\u0131s\u0131n\u0131n al\u0131nmas\u0131,<\/li>\n
- Olu\u015fturdu\u011funuz tasar\u0131mlar\u0131 .png, web sayfas\u0131, .pdf, .svg, .odt (open office) ve yaz\u0131c\u0131ya g\u00f6nderebilirsiniz,<\/li>\n
- HTML, PDF ve ODT \u00e7\u0131kt\u0131lar\u0131n\u0131n \u015fablonunu belirleyebiliyorsunuz,<\/li>\n
- \u00c7izimler aras\u0131 hiyerar\u015fi tan\u0131mlanabiliyor. \u00d6rne\u011fin ana ekran, alt ekranlar ve benzeri aray\u00fczler aras\u0131nda,<\/li>\n
- \u015eekiller aras\u0131nda ba\u011flant\u0131 tan\u0131mlayabiliyorsunuz,<\/li>\n
- Bir tak\u0131m diyagramlar\u0131 da \u00e7izebilmeniz i\u00e7in ara\u00e7 ve \u015fekiller sunuluyor,<\/li>\n
- G\u00f6sterilen \u0131zgara \u00e7izgilerinin aral\u0131klar\u0131, bunlara nesneleri yap\u0131\u015ft\u0131rma, ayr\u0131ca .svg ve .bmp dosylar\u0131 i\u00e7in edit\u00f6r belirtebiliyorsunuz,<\/li>\n
- Kanvas boyutland\u0131rma se\u00e7enekleri sunuluyor. Bunlar \u015fekilleri i\u00e7ine alacak \u015fekilde, ekran\u0131n mevcut durumuna g\u00f6re ve bo\u015fluklar b\u0131rakarak i\u00e7erikleri gruplama. Bu se\u00e7eneklere de \u015fa\u011f t\u0131klayarak ula\u015f\u0131yorsunuz,<\/li>\n
- Pencil taraf\u0131ndan sunulan \u015fekillerin yan\u0131nda sol tarafta bulunan “Clipart” sekmesinden \u00e7e\u015fitli ikon ve resimler de ekleyebiliyorsunuz,<\/li>\n
- \u015eeklin formatsal \u00f6zelliklerinin, ba\u015fka \u015fekillere de uygulanmas\u0131 i\u00e7in bir ara\u00e7 var (\u00e7o\u011fu MS Office uygulamas\u0131nda mevcut), a\u015fa\u011f\u0131daki gibi ufak bir d\u00fc\u011fme ile g\u00f6sterilen. Bunu da unutmay\u0131n. “Copy shape format”,<\/li>\n<\/ul>\n
![](\"http:\/\/www.yazilimperver.com\/wp-content\/uploads\/2019\/02\/img_5c66d7c5653c8.png\")
<\/p>\nDe\u011ferlendirme:<\/strong><\/span><\/h2>\n
Herhangi bir ara\u00e7ta oldu\u011fu gibi, bu ara\u00e7ta da \u00f6nemli olan sizlerin ihtiyac\u0131n\u0131 ne kadar sa\u011flad\u0131\u011f\u0131d\u0131r. Kendi a\u00e7\u0131mdan, \u015fu ana kadar bir \u00e7ok ihtiyac\u0131m\u0131 bu ara\u00e7 ba\u015far\u0131l\u0131 \u015fekilde kar\u015f\u0131lad\u0131. Bunun ile birlikte, a\u00e7\u0131k\u00e7as\u0131 bu tarz uygulamalar\u0131 s\u00fcrekli geli\u015ftiriyor olsayd\u0131m \u00fccretli olan \u00fcr\u00fcnlerden birisini<\/a> (kaynaklarda buna ili\u015fkin bir ba\u011flant\u0131 verdim) al\u0131rd\u0131m ama Pencil’in bile size bir \u00e7ok fayda sa\u011flayaca\u011f\u0131na inan\u0131yorum.<\/p>\n
Bunlar\u0131n yan\u0131nda, ara\u00e7 ile ilgili deneyimlerimi, g\u00f6r\u00fc\u015flerimi ve baz\u0131 p\u00fcf noktalar\u0131, a\u015fa\u011f\u0131da k\u0131sa k\u0131sa sizlere aktarmaya \u00e7al\u0131\u015faca\u011f\u0131m:<\/p>\n
- \n
- \u00c7izdi\u011finiz \u015fekillere ili\u015fkin bir k\u0131s\u0131m ayarlar sa\u011f tarafta olan “Properties” sekmesinde, bir k\u0131sm\u0131 ise sa\u011f t\u0131klayarak a\u00e7\u0131lan men\u00fc i\u00e7erisinde. A\u00e7\u0131k\u00e7as\u0131 ben b\u00fct\u00fcn ayarlar\u0131n bu sekme alt\u0131nda olmas\u0131n\u0131 isterdim (\u00f6rne\u011fin, check box i\u015faretli ya da i\u015faretli olmamas\u0131 bu men\u00fc \u00fczerinden yap\u0131l\u0131yor),<\/li>\n
- A\u00e7\u0131k\u00e7as\u0131 aray\u00fcz elemanlar\u0131 gayet sade ve kullan\u0131labilir. \u0130lk ba\u015flarda al\u0131\u015fmak i\u00e7in kendinize biraz vakit tan\u0131y\u0131n,<\/li>\n
- \u015eekiller aras\u0131nda a\u00e7\u0131k\u00e7as\u0131 benim en \u00e7ok ho\u015fuma giden “Desktop – Sketchy GUI” \u015fekilleri oldu,<\/li>\n<\/ul>\n
![\"\"](\"http:\/\/www.yazilimperver.com\/wp-content\/uploads\/2019\/02\/img_5c67e851419ca.png\")
<\/p>\n- \n
- Boyutland\u0131rma ve temel \u015fekilsel i\u015flemler daha kolay olabilirdi,<\/li>\n
- Genel bir hiyerar\u015fik a\u011fa\u00e7 g\u00f6r\u00fcnt\u00fcs\u00fc de \u00e7ok iyi olabilirdi,<\/li>\n
- Bile\u015fen adetleri ticari \u00fcr\u00fcnler kadar fazla olmasa da bedava bir uygulama i\u00e7in olduk\u00e7a fazla ve yeterli. Kategorilendirme g\u00fczel,<\/li>\n
- \u00c7oklu se\u00e7ilen \u015fekillerin boyutland\u0131r\u0131l\u0131p, d\u00f6nd\u00fcr\u00fclememesi k\u00f6t\u00fc. Bunu yapabilmek i\u00e7in grupland\u0131rmay\u0131 kullanabilirsiniz. Grupland\u0131rd\u0131ktan sonra bunlar\u0131 yapabiliyorsunuz,<\/li>\n
- Kanvas\u0131n boyutland\u0131r\u0131lmas\u0131 ise yukar\u0131daki men\u00fclerden de\u011fil, yine sa\u011f t\u0131klanarak a\u00e7\u0131lan men\u00fcden yap\u0131l\u0131yor.<\/li>\n<\/ul>\n
Bunlar\u0131n yan\u0131nda di\u011fer benzer ara\u00e7lara ili\u015fkin kar\u015f\u0131la\u015ft\u0131rma i\u00e7in\u00a0https:\/\/www.mockplus.com\/blog\/post\/free-quick-wireframe-tools<\/a><\/strong><\/span> adresine bir g\u00f6z atabilirsiniz.<\/p>\n
Umar\u0131m faydal\u0131 bir yaz\u0131 olmu\u015ftur. Bir sonraki yaz\u0131ma kadar kendinize iyi bak\u0131n.<\/p>\n
Kaynaklar:<\/span><\/strong><\/h2>\n
- \n
- https:\/\/pencil.evolus.vn\/<\/span><\/strong><\/a><\/li>\n
- https:\/\/www.interaction-design.org\/literature\/topics\/ui-design<\/strong><\/span><\/a><\/li>\n
- http:\/\/groups.csail.mit.edu\/graphics\/classes\/6.893\/F03\/lectures\/L2.pdf<\/strong><\/span><\/a><\/li>\n
- https:\/\/www.google.com\/search?q=gui+design+process&rlz=1C1SQJL_trTR803TR803&oq=GUI+design+process<\/strong><\/span><\/a><\/li>\n
- https:\/\/media.readthedocs.org\/pdf\/pencil-prototyping\/develop\/pencil-prototyping.pdf<\/span><\/strong><\/a><\/li>\n
- https:\/\/www.mockplus.com\/blog\/post\/free-quick-wireframe-tools<\/span><\/strong><\/a><\/li>\n
- https:\/\/www.creativebloq.com\/wireframes\/top-wireframing-tools-11121302<\/span><\/strong><\/a><\/li>\n<\/ul>\n
<\/p>","protected":false},"excerpt":{"rendered":"
Giri\u015f: Uzun zamand\u0131r ara verdi\u011fimiz ara\u00e7lar yaz\u0131s\u0131na son vermek ad\u0131na tekrar sizler ile birlikteyim \ud83d\ude42 Yaz\u0131ma giri\u015fi, bir ka\u00e7 soru ile yapmak istiyorum. \u00d6ncelikli olarak uygulamalar\u0131n\u0131zda Grafiksel Kullan\u0131c\u0131 Aray\u00fcz\u00fc (GKA) elemanlar\u0131n\u0131z\u0131 nas\u0131l tasarl\u0131yorsunuz ya da dok\u00fcmante ediyorsunuz: Yukar\u0131daki resimde oldu\u011fu gibi tahtaya \u00e7izerek :), Herhangi bir \u00e7izim yapmadan, sadece s\u00f6zel gereksinimlerle, GKA tasar\u0131mlar\u0131 i\u00e7in… Continue reading
- https:\/\/www.interaction-design.org\/literature\/topics\/ui-design<\/strong><\/span><\/a><\/li>\n
- https:\/\/pencil.evolus.vn\/<\/span><\/strong><\/a><\/li>\n
- Boyutland\u0131rma yan\u0131nda, \u00e7evirme i\u00e7in ilgili nesneye fare ile tekrar t\u0131klay\u0131p, kenar d\u00fc\u011f\u00fcmlerinin k\u0131rm\u0131z\u0131 ve daire oldu\u011funu g\u00f6rd\u00fc\u011f\u00fcn\u00fczde \u00e7evirme i\u015fini yapabilirsiniz. Boyutland\u0131rma i\u00e7in bu d\u00fc\u011f\u00fcmler kare ve mavi renkte oluyor,<\/li>\n<\/ul>\n
- Genel aray\u00fcz a\u015fa\u011f\u0131daki gibi. Sol tarafta \u015fekillere ili\u015fkin sekmeler var, yukar\u0131 sol k\u0131s\u0131mda ana men\u00fc bulunuyor, yukar\u0131 tarafta ise temel d\u00fczenleme ara\u00e7lar\u0131 var ama \u00e7ok fazla de\u011fil. Sa\u011f tarafta ise se\u00e7ili nesnelerin \u00f6zelliklerinin g\u00f6sterildi\u011fi alan var,<\/li>\n<\/ul>\n
- http:\/\/groups.csail.mit.edu\/graphics\/classes\/6.893\/F03\/lectures\/L2.pdf<\/strong><\/span><\/a><\/li>\n
- https:\/\/www.interaction-design.org\/literature\/topics\/ui-design<\/strong><\/span><\/a><\/li>\n