{"id":7111,"date":"2016-03-10T13:35:38","date_gmt":"2016-03-10T11:35:38","guid":{"rendered":"https:\/\/ihs.com.tr\/blog\/?p=7111"},"modified":"2019-01-18T12:35:26","modified_gmt":"2019-01-18T10:35:26","slug":"10-arayuz-tasarim-kurali","status":"publish","type":"post","link":"https:\/\/www.ihs.com.tr\/blog\/10-arayuz-tasarim-kurali\/","title":{"rendered":"10 Aray\u00fcz Tasar\u0131m Kural\u0131"},"content":{"rendered":"<p><span style=\"font-size: 14pt;\">G\u00fcn\u00fcm\u00fczde herhangi bir proje \u00fczerinde \u00e7al\u0131\u015fmak isteyen bir tasar\u0131mc\u0131 bulmak, olduk\u00e7a kolayd\u0131r.\u00a0Fakat, aray\u00fcz tasar\u0131m\u0131 alan\u0131nda, tasar\u0131m \u015fablonlar\u0131na hakim olan bir profesyonel bulmak yine de zordur.\u00a0E\u011fer bu t\u00fcr pozisyonlar da bulunmak istiyorsan\u0131z, piyasadaki son geli\u015ftirmeler ile kendi bilgilerinizi g\u00fcncel tutmal\u0131s\u0131n\u0131z.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Her aray\u00fcz tasar\u0131m projesinde en iyi \u00e7\u00f6z\u00fcmleri bilip, bunlar\u0131 projede uygulamak, sizi bu yenilikleri dikkate almayan bir \u00e7ok adaydan \u00f6ne \u00e7\u0131kartacakt\u0131r.<br \/>\n<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Bu g\u00fcn, web projelerin aray\u00fcz tasar\u0131m\u0131 i\u00e7in uygulanabilen 10 adet \u00f6neriyi sizler i\u00e7in derledik, ve bunlar\u0131n ba\u015f\u0131nda aray\u00fcz tasar\u0131m\u0131nda yap\u0131lan en b\u00fcy\u00fck yan\u0131lg\u0131lar hakk\u0131nda konu\u015faca\u011f\u0131z.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>1. Aray\u00fcz Tasar\u0131m\u0131n\u0131n(UI) Kullan\u0131c\u0131 Deneyimi(UX) \u00dczerindeki Etkisini Anlamak<\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><img decoding=\"async\" class=\"alignnone size-full wp-image-7113\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/web-tasarim-kurallari1.png\" alt=\"web-tasarim-kurallari1\" width=\"600\" height=\"235\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/web-tasarim-kurallari1.png 600w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/web-tasarim-kurallari1-300x118.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">\u00d6ncelikle, <strong>UI\u2019\u0131n(Aray\u00fcz tasar\u0131m\u0131)<\/strong>, <strong>UX(Kullan\u0131c\u0131 Deneyimi)<\/strong> \u00fczerinde \u00f6nemli bir rol oynad\u0131\u011f\u0131n\u0131 bilmek \u00f6nemli olmas\u0131na ra\u011fmen, bazen bu terimler yanl\u0131\u015f olarak kullan\u0131lmaktad\u0131r. UX disiplininin \u00e7ok daha geni\u015f bir kapsam\u0131 vard\u0131r.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Bu, UI&#8217;\u0131n \u00f6nemli olmad\u0131\u011f\u0131 anlam\u0131na gelmez, hepimizin bildi\u011fi gibi aray\u00fcz tasar\u0131m\u0131 bir web sitesini yada bir uygulamay\u0131, \u00fcst s\u0131ralara \u00e7\u0131karabilir.\u00a0Ancak UX tasar\u0131mc\u0131lar\u0131 (ya da &#8216;mimarlar\u0131&#8217;), etkile\u015fim, mimari, metin yazarl\u0131\u011f\u0131, net s\u0131n\u0131fland\u0131rmalar\u0131n olu\u015fturulmas\u0131, tasar\u0131mc\u0131lar\u0131n ve yaz\u0131l\u0131mc\u0131lar\u0131n koordinasyonu gibi farkl\u0131 fakt\u00f6rleri g\u00f6z \u00f6n\u00fcnde bulundurmas\u0131 gerekir.\u00a0Ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi ba\u015ftan sona t\u00fcm deneyimlerin tasar\u0131m\u0131d\u0131r.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">M\u00fckemmel bir aray\u00fcz\u00fc olu\u015fturmak i\u00e7in, UI tasar\u0131mc\u0131lar, hangi problemlerin \u00e7\u00f6z\u00fclece\u011finin belirlenmesi, kullan\u0131c\u0131 ak\u0131\u015f\u0131n\u0131n nas\u0131l olaca\u011f\u0131, \u00f6nemli \u00fcr\u00fcn alanlar\u0131 ve hiyerar\u015filerinin belirlenmesi gibi, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan gelen bilgilere g\u00fcvenmeleri gerekir.\u00a0T\u00fcm bu bilgilere ula\u015ft\u0131ktan sonra, aray\u00fcz \u00fczerinde \u00e7al\u0131\u015f\u0131lmaya ba\u015flanmas\u0131, ard\u0131ndan taslaklar olu\u015fturulmas\u0131 ve <strong>UX tasar\u0131mc\u0131lar\u0131<\/strong> taraf\u0131ndan test edilmesi, ideal olan yoldur. Bu \u015fekilde \u00fcretilen projelerde daha sonradan b\u00fcy\u00fck de\u011fi\u015fiklikler yap\u0131lmas\u0131 gerekmez.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>2. Hedef Kitlenizi Tan\u0131y\u0131n<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-7114\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/hedef-kitlesi.png\" alt=\"hedef-kitlesi\" width=\"600\" height=\"235\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/hedef-kitlesi.png 600w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/hedef-kitlesi-300x118.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><br \/>\n<\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Nas\u0131l fantastik bir aray\u00fcz tasarlanmas\u0131 gerekti\u011fi bilgisi, kullan\u0131c\u0131lardan al\u0131n\u0131r ise sizin i\u00e7in bu istekler, ileride s\u00fcrpriz olmaz. E\u011fer bir web sitesi olu\u015fturma s\u00fcrecinin planlama safhas\u0131nda iseniz, gelecekteki hedef kitlenizin ne olaca\u011f\u0131 hakk\u0131nda bir fikre sahip olmal\u0131s\u0131n\u0131z, ama gereksiz ayr\u0131nt\u0131lar\u0131 da bertaraf etmelisiniz.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">\u0130nsanlar\u0131 \u00e7ekmek i\u00e7in nelerin gerekti\u011finin net bir resmine ve onlar\u0131 \u00e7ekmenizi sa\u011flayan bir tasar\u0131ma ihtiyac\u0131n\u0131z var.\u00a0Bu noktada biraz kaybolmu\u015f hissediyorsan\u0131z, rakiplere bakmak yarat\u0131c\u0131 bir proje ba\u015flatmak i\u00e7in iyi bir yol olabilir.\u00a0<strong>Hangi siteler sizin proje alan\u0131n\u0131za daha yak\u0131n?<\/strong> Benzer g\u00f6r\u00fcn\u00fcm ve renkleri mi kullan\u0131yorlar?\u00a0Ayn\u0131 stilleri mi kullan\u0131yorlar veya g\u00f6rsel olarak ayn\u0131 kitleye mi hitap ediyorlar?<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"> Tasar\u0131m \u015fablonlar\u0131n\u0131 kullanarak kendi ihtiya\u00e7lar\u0131n\u0131z ile onlar\u0131nkileri ay\u0131r\u0131p , kullan\u0131c\u0131lar\u0131n\u0131z\u0131n web sitenizi daha rahat kullanmas\u0131n\u0131 sa\u011flayabilirsiniz.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">\u0130lk olarak Hedef kitlenizi belirleyerek, onlara tasar\u0131m\u0131n\u0131z\u0131 test ettirip dikkatle geribildirimlerini almal\u0131s\u0131n\u0131z.\u00a0Hedef kitlenizden ald\u0131\u011f\u0131n\u0131z geribildirim, inan\u0131lmaz \u015fekilde de\u011ferli olabilir, bu y\u00fczden geri bildirimleri iyi de\u011ferlendirin.<br \/>\n<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>3. Basit ve Tutarl\u0131 Olun<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-7115\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/basit-ve-tutarli.png\" alt=\"basit-ve-tutarli\" width=\"600\" height=\"235\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/basit-ve-tutarli.png 600w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/basit-ve-tutarli-300x118.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">\u0130yi bir aray\u00fcz\u00fcn \u00f6zelli\u011fi, basitli\u011fidir.\u00a0Basitlikten kast\u0131m\u0131z, bir yada iki buton ve orda burada biraz animasyon kullanmak de\u011fil, tasar\u0131m\u0131n kolay anla\u015f\u0131labilir ve kullan\u0131labilir olmas\u0131d\u0131r.\u00a0Kullan\u0131c\u0131lar\u0131n\u0131z\u0131n, uygulaman\u0131z\u0131 veya web sitenizi dola\u015fmas\u0131 i\u00e7in bir haritaya ihtiyac\u0131 olmamas\u0131 gerekiyor ve onlara nereye gitmek istedikleri konusunda kurnaz bir \u015fekilde rehberlik etmek, aray\u00fcz tasar\u0131mc\u0131s\u0131 olarak, <strong>i\u015finizin bir par\u00e7as\u0131d\u0131r.<\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Daha sonra birer birer inceleyece\u011fimiz, renkler, yaz\u0131 stili, geribildirim mesajlar\u0131 ve g\u00f6rsel hiyerar\u015filer gibi fakt\u00f6rleri kullanarak bunu ba\u015farabilirsiniz.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Aray\u00fczlerin, t\u00fcm tasar\u0131m boyunca tutarl\u0131 olmas\u0131 gerekir.\u00a0Bu, projenizin her b\u00f6l\u00fcm\u00fcnde tekerle\u011fi tekrardan icat etmemeniz gerekti\u011fi ve her b\u00f6l\u00fcmde tasar\u0131m\u0131n\u0131z\u0131n en \u00f6nemli b\u00f6l\u00fcm\u00fcn\u00fc desteklemeniz gerekti\u011fi anlam\u0131na geliyor.\u00a0Kullan\u0131c\u0131lar tasar\u0131m\u0131n\u0131zda dola\u015ft\u0131k\u00e7a zamanla al\u0131\u015fmal\u0131 ve rahatlamal\u0131d\u0131rlar, kesinlikle sars\u0131c\u0131 tasar\u0131m de\u011fi\u015fiklikleri ile bu ak\u0131\u015f\u0131 bozmamal\u0131s\u0131n\u0131z.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>4. G\u00f6rsel Bir Hiyerar\u015fi Olu\u015fturun<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-7116\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/Gorsel-Hiyerarsi.png\" alt=\"Gorsel-Hiyerarsi\" width=\"600\" height=\"235\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/Gorsel-Hiyerarsi.png 600w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/Gorsel-Hiyerarsi-300x118.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><br \/>\n<\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Bir aray\u00fcz\u00fcn en \u00f6nemli \u00f6\u011feleri, kullan\u0131c\u0131lar\u0131n dikkatlerini \u00e7ekmek i\u00e7in vurgulanmal\u0131d\u0131r, bu efekti sa\u011flamak i\u00e7in neredeyse s\u0131n\u0131rs\u0131z metot bulunmaktad\u0131r.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Akla gelen en basit teknik bir \u00f6\u011feyi odak noktas\u0131na ta\u015f\u0131mak i\u00e7in di\u011ferlerinden daha b\u00fcy\u00fck hale getirmektir.(Bu sebepten herkes Godzilla&#8217;y\u0131 bilir.)\u00a0Netflix&#8217;i \u00f6rnek alacak olursak, ana sayfay\u0131 a\u00e7t\u0131\u011f\u0131n\u0131zda ka\u00e7\u0131rman\u0131z imkans\u0131z olan birka\u00e7 vurgulanm\u0131\u015f tavsiye g\u00f6z\u00fcn\u00fcze \u00e7arpacakt\u0131r:<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><img decoding=\"async\" class=\"alignnone size-full wp-image-7117\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/netflix.png\" alt=\"netflix\" width=\"600\" height=\"279\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/netflix.png 600w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/netflix-300x140.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Netflix&#8217;in ana sayfas\u0131 temiz bir g\u00f6rsel hiyerar\u015fi sunar. G\u00f6rsel hiyerar\u015fiyi uygulamak isterseniz, daha yeni bir \u00f6rnek olan, beyaz bo\u015fluklar kullanarak aray\u00fcz\u00fcn\u00fczdeki \u00f6nemli b\u00f6l\u00fcmleri vurgulayabilirsiniz.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><img decoding=\"async\" class=\"alignnone size-full wp-image-7118\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/kullanici-yuzu.png\" alt=\"kullanici-yuzu\" width=\"600\" height=\"343\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/kullanici-yuzu.png 600w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/kullanici-yuzu-300x172.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">UserApp &#8220;Try it for free&#8221; butonunu vurgulamak i\u00e7in beyaz bo\u015fluklardan yararlan\u0131yor.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Alternatif olarak, tasar\u0131m\u0131n\u0131z\u0131n d\u0131\u015f\u0131ndaki, beklenmeyen tarzda \u00f6\u011feler harikalar yaratabilir. \u00a0Daha \u00f6nce s\u00f6yledi\u011fimiz gibi tutarl\u0131l\u0131k bir aray\u00fcz i\u00e7in \u00e7ok \u00f6nemli, fakat bu noktada tekrara s\u0131n\u0131r koyabilirsiniz.\u00a0Bir \u015fey g\u00f6rsel kal\u0131plar\u0131 k\u0131rd\u0131\u011f\u0131 zaman, kullan\u0131c\u0131lar\u0131n\u0131z\u0131n dikkatini \u00e7ekecektir.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>5. Yaz\u0131 Stillerini \u0130yi Kullan\u0131n<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-7119\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/yazi-stilleri.png\" alt=\"yazi-stilleri\" width=\"600\" height=\"235\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/yazi-stilleri.png 600w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/yazi-stilleri-300x118.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><br \/>\n<\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">G\u00f6rsel hiyerar\u015fiyi sa\u011flamak i\u00e7in, bir ba\u015fka zarif yol ise yaz\u0131 stillerini kullanmakt\u0131r.\u00a0Bu y\u00f6ntem, g\u00fczel bir font se\u00e7mek ve t\u00fcm tasar\u0131m boyunca onu kullanmak gibi basit bir \u015fey de\u011fildir.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Yeni ba\u015flayanlar i\u00e7in, tabiri caizse her fontun bir ki\u015fili\u011fi vard\u0131r ve se\u00e7ti\u011finiz font hedef kitlenizi etkilemelidir, diyebiliriz.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><img decoding=\"async\" class=\"alignnone size-full wp-image-7120\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/ornek-yazi-tipi.png\" alt=\"ornek-yazi-tipi\" width=\"600\" height=\"235\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/ornek-yazi-tipi.png 600w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/ornek-yazi-tipi-300x118.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">IHS Blog&#8217;un t\u00fcm tasar\u0131m\u0131nda bu yaz\u0131lardaki ba\u015fl\u0131klar gibi \u00f6nemli bilgilerin vurguland\u0131\u011f\u0131n\u0131 g\u00f6rebilirsiniz.( Yaln\u0131z \u00e7ok fazla bilgiyi vurgulamamaya dikkat ediniz.)<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Ayr\u0131ca, arkaplan ile z\u0131tl\u0131k olu\u015fturmak metinlerin \u00f6n plana \u00e7\u0131kmas\u0131 i\u00e7in kullan\u0131labilir.\u00a0A\u015fa\u011f\u0131daki \u00f6rnekte, kullan\u0131c\u0131lar\u0131n hangi sayfay\u0131 g\u00f6r\u00fcnt\u00fcledi\u011fini g\u00f6rebilmesi i\u00e7in men\u00fc&#8217;de, farkl\u0131 arka plan renkleri kullan\u0131lm\u0131\u015ft\u0131r.(Ayn\u0131 zamanda, kullan\u0131c\u0131lar\u0131n site i\u00e7erisinde dola\u015fmas\u0131n\u0131 basitle\u015ftirmi\u015ftir.)<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><img decoding=\"async\" class=\"alignnone size-full wp-image-7121\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/example-menu.png\" alt=\"example-menu\" width=\"600\" height=\"253\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/example-menu.png 600w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/example-menu-300x127.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Smashing Magazin&#8217;in \u0130\u015f ilanlar\u0131 b\u00f6l\u00fcm\u00fcnden farkl\u0131 renk arka plan \u00f6rne\u011fi.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">K\u0131rm\u0131z\u0131 \u00fczerindeki mavi gibi, baz\u0131 renk kombinasyonlar\u0131 z\u0131t arka plan renkleri i\u00e7in \u00e7ok k\u00f6t\u00fc bir tercih olabilir, herhangi bir tasar\u0131mc\u0131 yetenekleriyle bu tuzaklardan uzak durabilir.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>6. Kontrast Renkleri Dikkatli Kullan\u0131n<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-7122\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/kontrast-renkleri.png\" alt=\"kontrast-renkleri\" width=\"600\" height=\"235\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/kontrast-renkleri.png 600w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/kontrast-renkleri-300x118.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><br \/>\n<\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Herhangi bir tasar\u0131m i\u00e7in do\u011fru renkleri se\u00e7mek ba\u015fl\u0131 ba\u015f\u0131na bir bilim dal\u0131d\u0131r. \u00c7arp\u0131c\u0131 aray\u00fcz tasar\u0131mlar\u0131nda renkleri kullanman\u0131n etkisinden bahsedece\u011fiz.\u00a0Renkler, g\u00f6rsel hiyerar\u015fiyi aktarmak, \u00f6\u011feler aras\u0131 ili\u015fki kurmak, genel olarak tasar\u0131m\u0131 y\u00fckseltmek ve kullan\u0131c\u0131lar\u0131n dikkatini \u00e7ekmek i\u00e7in kullan\u0131labilir.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Bir aray\u00fcz \u00fczerinde \u00e7al\u0131\u015f\u0131rken, g\u00f6rsel ipu\u00e7lar\u0131n\u0131 iletmek i\u00e7in, tekd\u00fczeli\u011fi korumak ve renk \u015femas\u0131n\u0131 birbirine yak\u0131n renklerden olu\u015fturmak isteyeceksiniz. (\u00c7ok fazla renk her zaman iyi de\u011fildir.)<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Bu yaz\u0131da kural be\u015fte de de\u011findi\u011fimiz, kontrast renklerin kullan\u0131c\u0131lar\u0131n dikkatlerinin \u00e7ekmek amac\u0131yla kullan\u0131labilece\u011fi anlat\u0131l\u0131yor.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><img decoding=\"async\" class=\"alignnone size-full wp-image-7123\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/jurassic-world-web.png\" alt=\"jurassic-world-web\" width=\"600\" height=\"210\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/jurassic-world-web.png 600w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/jurassic-world-web-300x105.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Jurassic World&#8217;\u00fcn \u0130spanyolca sitesi kontrast renklere g\u00fczel bir \u00f6rnek.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Aray\u00fcz \u00fczerinde, renkleri se\u00e7erken dikkat etmeniz gereken bir kural da, koyu renkler g\u00f6rsel a\u011f\u0131rl\u0131\u011f\u0131 ta\u015f\u0131maya e\u011filimlidir, ve bu renklerin kullan\u0131ld\u0131\u011f\u0131 \u00f6\u011feler daha a\u00e7\u0131k renkli \u00f6\u011feler ile dengeli olmas\u0131 gerekti\u011fidir.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>7. Geri Bildirim Mesajlar\u0131na Dikkat Edin<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-7124\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/geri-bildirim.png\" alt=\"geri-bildirim\" width=\"600\" height=\"235\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/geri-bildirim.png 600w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/geri-bildirim-300x118.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Aray\u00fczler kullan\u0131lmak i\u00e7in vard\u0131r ve bu, tasar\u0131m s\u00fcrecinde asla g\u00f6zden ka\u00e7\u0131rmaman\u0131z gereken bir\u015feydir.\u00a0Web projelerinin en b\u00fcy\u00fck avantajlar\u0131ndan biri de, kullan\u0131c\u0131lara \u00f6nemli bilgileri ta\u015f\u0131yan geribildirim mesajlar\u0131n\u0131 tasarlayabiliyor olman\u0131zd\u0131r.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>Bir\u015fey mi y\u00fckleniyor?<\/strong>\u00a0Neden geribildirim mesaj\u0131 olarak arkaplanda basit bir animasyon \u00e7al\u0131\u015ft\u0131rm\u0131yorsun?\u00a0Birisi, bir alan\u0131 yanl\u0131\u015f m\u0131 doldurdu?\u00a0Tam olarak neyin yanl\u0131\u015f oldu\u011fu bilgisini vermek i\u00e7in bir mesaj alan\u0131 tasarla.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><img decoding=\"async\" class=\"alignnone size-full wp-image-7125\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/twitter-geri-bildirim.png\" alt=\"twitter-geri-bildirim\" width=\"600\" height=\"111\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/twitter-geri-bildirim.png 600w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/twitter-geri-bildirim-300x56.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">\u0130nternetin en pop\u00fcler geribildirim mesajlar\u0131ndan biri.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">\u0130deal bir d\u00fcnyada, her aray\u00fcz sezgisel ve yeteri kadar h\u0131zl\u0131 olmal\u0131d\u0131r, fakat tarz \u015feyler pek ilk etapta olmaz.\u00a0Ama bize g\u00fcvenin, kullan\u0131c\u0131lar sitenizde bir \u015fekilde kaybolman\u0131n yolunu bulacakt\u0131r.\u00a0O anda ne oldu\u011fu hakk\u0131nda, an\u0131nda geri bildirimler sa\u011flamak, aray\u00fcz\u00fcn\u00fcz\u00fc sezgisel bir \u015fekilde kullanmalar\u0131n\u0131 \u00f6\u011fretmenin en iyi yoludur.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><img decoding=\"async\" class=\"alignnone size-full wp-image-7126\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/iletisim-formlari.png\" alt=\"iletisim-formlari\" width=\"600\" height=\"235\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/iletisim-formlari.png 600w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/iletisim-formlari-300x118.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Formlar, kullan\u0131c\u0131lar\u0131n web projeleri ile etkile\u015fime ge\u00e7meleri i\u00e7in ana y\u00f6ntemlerinden biridir.\u00a0Kullan\u0131c\u0131lar bazen bilgisayarlar\u0131nda bir \u015feye t\u0131klad\u0131klar\u0131nda d\u00fczg\u00fcn \u00e7al\u0131\u015fmazsa sinirlenebilirler.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Kullan\u0131c\u0131lar baz\u0131 nedenlerden dolay\u0131 <strong>formlardan<\/strong> \u00f6zellikle nefret ederler. G\u00f6revimiz kullan\u0131c\u0131lar\u0131n sayfan\u0131zdaki formlar\u0131 olabildi\u011fince problemsiz doldurarak hemen etkile\u015fime ge\u00e7mesini sa\u011flamakt\u0131r.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">\u00d6rne\u011fin, kendine &#8220;<strong>Bu form ger\u00e7ekten gerekli mi?<\/strong>&#8221; sorusunu sormakla ba\u015flayabilirsin.\u00a0Bir \u00e7ok durumda, kullan\u0131c\u0131lar kay\u0131t formlar\u0131nda zorlan\u0131rlar, e\u011fer bu formlar\u0131 kald\u0131rabilirsen, sende bunlar\u0131 tasarlamak zorunda kalmazs\u0131n. Bu durum iki taraf\u0131nda i\u015fine gelir.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Projen i\u00e7in kay\u0131t formu, bir gereklilik ise, neden olabildi\u011fince basit hale getirmeyesin?\u00a0Twitteri \u00f6rnek al\u0131n.\u00a0Kullan\u0131c\u0131lar\u0131n ayn\u0131 bilgiyi tekrar tekrar yaz\u0131p sinirlenmeye ba\u015flayacak kadar vakti olmayabilir.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><img decoding=\"async\" class=\"alignnone size-full wp-image-7127\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/twitter-ornegi.png\" alt=\"twitter-ornegi\" width=\"600\" height=\"547\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/twitter-ornegi.png 600w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/twitter-ornegi-300x274.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Twitter&#8217;\u0131n k\u0131sa ve tatl\u0131 kay\u0131t formu g\u00fczel bir \u00f6rnek.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>9. \u0130\u015fbirli\u011fi Sizi Ba\u015far\u0131ya G\u00f6t\u00fcr\u00fcr<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-7128\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/isbirligi.png\" alt=\"isbirligi\" width=\"600\" height=\"235\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/isbirligi.png 600w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/isbirligi-300x118.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><br \/>\n<\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Projenize ba\u011fl\u0131 olarak, baz\u0131 noktalarda kendinizi bir tak\u0131m\u0131n i\u00e7erisinde bulabilirsiniz , ve baz\u0131 durumlarda, kullan\u0131labilir ve \u00e7ekici bir aray\u00fcz olu\u015fturmak i\u00e7in ayn\u0131 bilgileri payla\u015fmak \u00e7ok \u00f6nemli olabilir.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Neyse ki ekibin rotada kalmas\u0131n\u0131 sa\u011flayan bir \u00e7ok ortak \u00e7al\u0131\u015fmay\u0131 sa\u011flayan uygulama bulunmaktad\u0131r.<br \/>\n<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>10. Her\u015feyi Birle\u015ftrimek<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-7132\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/herseyi-birlestirmek.png\" alt=\"herseyi-birlestirmek\" width=\"600\" height=\"235\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/herseyi-birlestirmek.png 600w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/03\/herseyi-birlestirmek-300x118.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><br \/>\n<\/strong><\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Bir aray\u00fcz tasar\u0131m\u0131 kolay olmayan bir g\u00f6rev.\u00a0Bir\u00e7ok disiplini g\u00f6z \u00f6n\u00fcnde bulundurup, hedef kitlenize y\u00f6nelik teknik bilgilerle kendinizi donatmal\u0131s\u0131n\u0131z ve onlar\u0131n ihtiya\u00e7lar\u0131n\u0131 \u00f6nceden g\u00f6r\u00fcp bunlar\u0131 kar\u015f\u0131layacak tasar\u0131m\u0131 olu\u015fturmal\u0131s\u0131n\u0131z.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Ayr\u0131ca, kullan\u0131c\u0131 deneyimi tasar\u0131m\u0131 ve aray\u00fcz tasar\u0131m\u0131 aras\u0131nda yak\u0131n bir ili\u015fki s\u00fcrd\u00fcrmek gerekir.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Ancak, bu makale boyunca ele ald\u0131\u011f\u0131m\u0131z, hayat\u0131n\u0131z\u0131 kolayla\u015ft\u0131racak konular\u0131n \u00e7o\u011fu sadece web tasar\u0131m projeleri ile s\u0131n\u0131rl\u0131 de\u011fildir.\u00a0Asl\u0131nda, daha \u00f6nceden tasar\u0131m deneyiminiz var ise, buraya kadar payla\u015ft\u0131\u011f\u0131m\u0131z \u00e7o\u011fu tavsiyeye a\u015fina oldu\u011funuza bahse gireriz. Biz sadece bunlar\u0131, aray\u00fcz tasar\u0131mlar\u0131 ile ili\u015fkilendirdik.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Bu tavsiyeleri dikkate alarak iyi bir aray\u00fcz tasar\u0131mc\u0131s\u0131 olma yolunda ilerleyece\u011finizden eminiz.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>Sonu\u00e7<br \/>\n<\/strong>Aray\u00fcz tasar\u0131m\u0131, korkutucu bir alan olmas\u0131n\u0131n yan\u0131nda size kendinizi tasar\u0131m alan\u0131nda kan\u0131tlamak i\u00e7in m\u00fckemmel bir f\u0131rsat yaratabilir.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Bunu d\u00fc\u015f\u00fcn\u00fcn.\u00a0Aray\u00fczleriniz kolay kullan\u0131labilmeli, basit bir \u015fekilde y\u00f6nlendirilmeli, hedef kitleniz i\u00e7in do\u011fru renkler kullan\u0131lmal\u0131, do\u011fru fontlar se\u00e7ilmeli, kullan\u0131\u015fl\u0131 geri bildirim mesajlar\u0131 ile etkile\u015fim sa\u011flanmal\u0131 ve hepsi birbiri ile tutarl\u0131 olmal\u0131d\u0131r.\u00a0Bir \u00e7ok fakt\u00f6r\u00fc dengeledi\u011finizde \u00e7ekici bir tasar\u0131m \u00fcretebilirsiniz. Belki de, sizin, bize baz\u0131 kurallar\u0131 \u00f6\u011fretmenizin zaman\u0131 geldi \ud83d\ude42<br \/>\n<\/span><\/p>\n<p><span style=\"font-size: 14pt;\"><strong>Bir de sizi dinleyelim.\u00a0Kullan\u0131c\u0131 aray\u00fczlerini tasarlarken herhangi bir ki\u015fisel kural\u0131n\u0131z var m\u0131?\u00a0Bildiklerinizi a\u015fa\u011f\u0131daki yorum b\u00f6l\u00fcm\u00fcnden herkes ile payla\u015f\u0131n!<\/strong><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>G\u00fcn\u00fcm\u00fczde herhangi bir proje \u00fczerinde \u00e7al\u0131\u015fmak isteyen bir tasar\u0131mc\u0131 bulmak, olduk\u00e7a kolayd\u0131r.\u00a0Fakat, aray\u00fcz tasar\u0131m\u0131 alan\u0131nda, tasar\u0131m \u015fablonlar\u0131na hakim olan bir profesyonel bulmak&hellip;<\/p>\n","protected":false},"author":3,"featured_media":7112,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,401],"tags":[],"class_list":["post-7111","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-haberler","category-web-tasarim"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts\/7111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/comments?post=7111"}],"version-history":[{"count":4,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts\/7111\/revisions"}],"predecessor-version":[{"id":7134,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts\/7111\/revisions\/7134"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/media\/7112"}],"wp:attachment":[{"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/media?parent=7111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/categories?post=7111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/tags?post=7111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}