{"id":34528,"date":"2022-06-01T17:42:04","date_gmt":"2022-06-01T14:42:04","guid":{"rendered":"https:\/\/thedigitalmarker.com\/?p=34528"},"modified":"2025-07-04T16:46:14","modified_gmt":"2025-07-04T13:46:14","slug":"web-arayuz-tasarimiui-nasil-yapilir","status":"publish","type":"post","link":"https:\/\/blog.markergroupe.com\/tr\/web-arayuz-tasarimiui-nasil-yapilir\/","title":{"rendered":"Web Aray\u00fcz Tasar\u0131m\u0131(UI) Nas\u0131l Yap\u0131l\u0131r?"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_78 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0130\u00e7indekiler<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blog.markergroupe.com\/tr\/web-arayuz-tasarimiui-nasil-yapilir\/#Frontend_ve_Backend\" >Frontend ve Backend<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blog.markergroupe.com\/tr\/web-arayuz-tasarimiui-nasil-yapilir\/#Frontend\" >Frontend<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blog.markergroupe.com\/tr\/web-arayuz-tasarimiui-nasil-yapilir\/#Backend\" >Backend<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>UI, kullan\u0131c\u0131 deneyimi odakl\u0131 yaz\u0131l\u0131m\u0131n aray\u00fcz tasar\u0131m\u0131d\u0131r. Kullan\u0131c\u0131 ve kullan\u0131lan yaz\u0131l\u0131m aras\u0131nda etkile\u015fimi sa\u011flar. \u0130yi bir aray\u00fcz tasar\u0131m\u0131 siteyi ziyaret eden ki\u015finin ziyaret amac\u0131na kolayl\u0131kla hizmet eder ve ihtiyac\u0131n\u0131 kar\u015f\u0131lamas\u0131n\u0131 sa\u011flar. Web Aray\u00fcz Tasar\u0131m\u0131(UI) Nas\u0131l Yap\u0131l\u0131r? i\u00e7eri\u011fimizi okumaya ba\u015flamadan \u00f6nce\u00a0 <a href=\"https:\/\/thedigitalmarker.com\/blog\/web-arayuz-tasarimi-ui-ve-uygulamalari-nedir\/\" target=\"_blank\" rel=\"noopener\">Web Aray\u00fcz Tasar\u0131m\u0131 (UI) Ve Uygulamalar\u0131 Nedir?<\/a> i\u00e7eri\u011fimizi inceleyerek daha detayl\u0131 bilgiye sahip olabilirsiniz.<\/strong><\/p>\n<p>Web aray\u00fcz tasar\u0131m\u0131 i\u00e7in \u00f6ncelikle bilgisayar\u0131m\u0131zda Adobe Photoshop ya da dengi bir grafik yaz\u0131l\u0131m\u0131n\u0131n y\u00fckl\u00fc olmas\u0131 gerekiyor. Daha sonras\u0131nda ise aray\u00fcz tasar\u0131m \u00e7al\u0131\u015fmalar\u0131m\u0131za ba\u015fl\u0131yoruz. Aray\u00fcz tasar\u0131m a\u015famas\u0131 asl\u0131nda kafan\u0131zdaki web sitesinin hem eskiz halini hem de esas halini ortaya \u00e7\u0131karabilece\u011finiz bir a\u015fama olarak nitelendirilebilir.<\/p>\n<p>Aray\u00fcz tasar\u0131mlarda genel geni\u015flik 2000 px standartlar\u0131ndad\u0131r. Arkaplan 2000px dolaylar\u0131nda haz\u0131rlan\u0131r ve esas site i\u00e7erikleri bu piksel \u00f6l\u00e7\u00fcm\u00fcn\u00fc ortalayacak \u015fekilde minimum 1024px geni\u015fli\u011finde haz\u0131rlan\u0131r. Bunun en b\u00fcy\u00fck nedeni web sitesinin t\u00fcm monit\u00f6rlerde ortal\u0131 g\u00f6r\u00fclmesi ve CSS entegrasyon a\u015famas\u0131nda yaz\u0131l\u0131mc\u0131ya s\u0131k\u0131nt\u0131 yaratmamas\u0131d\u0131r.<\/p>\n<p>Bu \u00f6l\u00e7\u00fcmler sonras\u0131nda kafan\u0131zdaki web sitesi yap\u0131s\u0131n\u0131 ara\u00e7lar ile olu\u015fturmaya ba\u015fl\u0131yorsunuz. Photoshop sizlere ara\u00e7lar ile alanlar olu\u015fturma, s\u0131f\u0131rdan \u00e7izim yapabilme, \u00f6zel style paketleri ve renklendirmeler olu\u015fturarak kendinize \u00f6zel bir yap\u0131 kurabilmenin imkan\u0131n\u0131 sunuyor. Ara\u00e7lar yard\u0131m\u0131 ile web sitelerinizi olu\u015fturuyorsunuz.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Frontend_ve_Backend\"><\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34529\" title=\"Web Aray\u00fcz Tasar\u0131m\u0131 Nas\u0131l Yap\u0131l\u0131r?\" src=\"https:\/\/blog.markergroupe.com\/wp-content\/uploads\/2022\/06\/ui-e1654094147558.jpg\" alt=\"Web Aray\u00fcz Tasar\u0131m\u0131 Nas\u0131l Yap\u0131l\u0131r?\" width=\"1500\" height=\"600\" \/>Frontend ve Backend<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bu iki terim, asl\u0131nda &#8220;web tasar\u0131m\u0131&#8221; ve &#8220;web geli\u015ftirme&#8221; olarak da adland\u0131r\u0131labilir. Bu iki terim genelde sekt\u00f6r\u00fcn d\u0131\u015f\u0131ndan olanlarda kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131 yarat\u0131yor gibi g\u00f6r\u00fcnse de asl\u0131nda aralar\u0131ndaki fark\u0131 a\u00e7\u0131klamak nispeten kolay. Bunu en basit tabirle a\u00e7\u0131klamak gerekirse; frontend, bir web sitesine girdi\u011finizde etkile\u015fime girdi\u011finiz aray\u00fcz\u00fcn tasar\u0131m ve geli\u015ftirmesine; backend, bu web sitesinin perde arkas\u0131nda yer alan, yaz\u0131l\u0131m geli\u015ftirme i\u015fine verilen adlard\u0131r.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Frontend\"><\/span>Frontend<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Frontend, web sitenizin g\u00f6r\u00fcp etkile\u015fime girebildi\u011finiz k\u0131s\u0131mlar\u0131na verilen add\u0131r. Frontend genellikle web tasar\u0131m\u0131 ve web sitenizin \u00f6n y\u00fcz\u00fcn\u00fcn geli\u015ftirilmesini kapsar. Web tasar\u0131m\u0131 dendi\u011finde; Adobe XD, Photoshop ve Sketch gibi tasar\u0131m programlar\u0131n\u0131 kullanabilen, ayn\u0131 zamanda da HTML, CSS, JavaScript ve JQuery ile kod yazabilen tasar\u0131mc\u0131lardan bahsedilir. Bir web sitesini kullan\u0131rken g\u00f6rd\u00fc\u011f\u00fcn\u00fcz her \u015fey; HTML, CSS ve JavaScript&#8217;in, kulland\u0131\u011f\u0131n\u0131z web taray\u0131c\u0131 taraf\u0131ndan kontrol edilmesidir. Bunun i\u00e7inde de fontlar, a\u00e7\u0131l\u0131r men\u00fcler, ge\u00e7i\u015fler, sliderlar, ileti\u015fim formlar\u0131 vb. tasar\u0131msal i\u015fler yer al\u0131r.<br \/>\nFrontend&#8217;de yer alan bu \u00f6\u011felere eklenen bilgilerin depolanabilmesi, yani k\u0131saca frontend&#8217;in hayata ge\u00e7ebilmesi i\u00e7in gereken alt yap\u0131 ve teknolojiyi sa\u011flayan ise backend&#8217;dir.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Backend\"><\/span>Backend<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Backend genellikle bir sunucu, bir uygulama ve bir veri taban\u0131ndan olu\u015fur. Sistemin mimarisini olu\u015fturulan, frontend&#8217;den bilgi gelmesini sa\u011flayan ve hatta gelen bilgiyi yorumlayarak ayr\u0131\u015ft\u0131ran arka plan uygulamalar\u0131n\u0131n t\u00fcm\u00fc backend olarak adland\u0131r\u0131l\u0131r. Backend&#8217;in vermi\u015f oldu\u011fumuz \u00f6rneklerin \u00e7ok daha \u00f6tesinde oldu\u011funu unutmamak gerek. Backend&#8217;de olu\u015ftrulan kodsal yap\u0131n\u0131n arka planda sistematik olarak i\u015flemesi ile frontend olarak adland\u0131rd\u0131\u011f\u0131m\u0131z \u00f6ny\u00fczde verimli bir \u015fekilde \u00e7al\u0131\u015f\u0131yoruz. \u00d6rne\u011fin bir havayolu veya otob\u00fcs firmas\u0131n\u0131n web sitesine girerek bilet ald\u0131\u011f\u0131n\u0131zda frontend ile etkile\u015fime girmi\u015f olursunuz. ancak sizin bilgilerinizi ayr\u0131\u015ft\u0131ran, depolayan ve yorumlayan taraf backend&#8217;dir.<\/p>\n<p><em>Marker Groupe&#8217;un sa\u011flad\u0131\u011f\u0131 hizmetler hakk\u0131nda bilgi edinmek i\u00e7in bizimle <a href=\"https:\/\/www.markergroupe.com\/iletisim\">MarkerGroupe.com<\/a> web sitesi \u00fczerinden veya hello@markergroupe.com e-mail adresi \u00fczerinden ileti\u015fime ge\u00e7ebilirsiniz.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>UI, kullan\u0131c\u0131 deneyimi odakl\u0131 yaz\u0131l\u0131m\u0131n aray\u00fcz tasar\u0131m\u0131d\u0131r. Kullan\u0131c\u0131 ve kullan\u0131lan yaz\u0131l\u0131m aras\u0131nda etkile\u015fimi sa\u011flar. \u0130yi bir aray\u00fcz tasar\u0131m\u0131 siteyi ziyaret eden ki\u015finin ziyaret amac\u0131na kolayl\u0131kla hizmet eder ve ihtiyac\u0131n\u0131 kar\u015f\u0131lamas\u0131n\u0131 sa\u011flar. Web Aray\u00fcz Tasar\u0131m\u0131(UI) Nas\u0131l Yap\u0131l\u0131r? i\u00e7eri\u011fimizi okumaya ba\u015flamadan \u00f6nce\u00a0 Web Aray\u00fcz Tasar\u0131m\u0131 (UI) Ve Uygulamalar\u0131 Nedir? i\u00e7eri\u011fimizi inceleyerek daha detayl\u0131 bilgiye sahip olabilirsiniz. Web [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":34955,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"","footnotes":""},"categories":[638,1477],"tags":[1391,1513],"class_list":["post-34528","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-tr","category-yazilim","tag-marker-creative","tag-web-arayuz-tasarimi"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/posts\/34528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/comments?post=34528"}],"version-history":[{"count":0,"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/posts\/34528\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/media\/34955"}],"wp:attachment":[{"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/media?parent=34528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/categories?post=34528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.markergroupe.com\/tr\/wp-json\/wp\/v2\/tags?post=34528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}