{"id":154,"date":"2024-03-08T15:02:05","date_gmt":"2024-03-08T12:02:05","guid":{"rendered":"https:\/\/demo.webbankasi.com\/1\/?p=154"},"modified":"2024-03-08T15:02:05","modified_gmt":"2024-03-08T12:02:05","slug":"web-tasarim-nedir","status":"publish","type":"post","link":"https:\/\/demo.webbankasi.com\/1\/web-tasarim-nedir\/","title":{"rendered":"Web Tasar\u0131m"},"content":{"rendered":"

WEB TASARIMI NED\u0130R?<\/strong><\/h2>\n

Web Tasar\u0131m\u0131, web sitelerinin tasar\u0131m\u0131n\u0131 ifade eder.<\/p>\n

Genellikle yaz\u0131l\u0131m geli\u015ftirmenin de\u011fil, web sitesi geli\u015ftirmenin kullan\u0131c\u0131 deneyimi y\u00f6nlerini ifade eder. Web tasar\u0131m\u0131, masa\u00fcst\u00fc taray\u0131c\u0131lar\u0131 i\u00e7in web sitelerinin tasar\u0131m\u0131yla ilgilenirken, 2010’lar\u0131n ortalar\u0131ndan itibaren mobil ve tablet taray\u0131c\u0131lar\u0131 i\u00e7in tasar\u0131m giderek daha \u00f6nemli hale gelmi\u015ftir.<\/p>\n

Bir web tasar\u0131mc\u0131s\u0131 bir web sitesinin g\u00f6r\u00fcn\u00fcm\u00fc, d\u00fczeni ve baz\u0131 durumlarda i\u00e7eri\u011fi \u00fczerinde \u00e7al\u0131\u015f\u0131r.<\/p>\n

G\u00f6r\u00fcn\u00fcm, kullan\u0131lan renkler, tipografi ve g\u00f6r\u00fcnt\u00fclerle ilgilidir.<\/p>\n

D\u00fczen, bilgilerin nas\u0131l yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131 ve kategorize edildi\u011fiyle ilgilidir. \u0130yi bir web tasar\u0131m\u0131, kullan\u0131m\u0131 kolay, estetik olarak ho\u015f ve web sitesinin hedef kitlesine ve markas\u0131na uygun olmal\u0131d\u0131r.<\/p>\n

\u0130yi tasarlanm\u0131\u015f bir web sitesi, kullan\u0131c\u0131lar\u0131 kafa kar\u0131\u015f\u0131kl\u0131\u011f\u0131na u\u011fratmamak i\u00e7in a\u00e7\u0131k bir \u015fekilde ileti\u015fim kurar. Hedef kitle g\u00fcvenini kazan\u0131r ve destekler, m\u00fcmk\u00fcn oldu\u011funca \u00e7ok say\u0131da potansiyel kullan\u0131c\u0131yla ilgili sorunlar\u0131 ortadan kald\u0131r\u0131r.<\/p>\n

Adaptive ve Responsive tasar\u0131m, hem masa\u00fcst\u00fc hem de mobil cihazlarda iyi \u00e7al\u0131\u015fan web siteleri tasarlamak i\u00e7in yayg\u0131n olarak kullan\u0131lan iki y\u00f6ntemdir.<\/p>\n

Responsive Web Tasar\u0131m\u0131 Nedir?<\/h2>\n

\"\"<\/h2>\n
    \n
  • Responsive Web Tasar\u0131m i\u00e7eri\u011fin cihaz taraf\u0131ndan belirlenen \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011fe bak\u0131lmaks\u0131z\u0131n g\u00f6r\u00fcnd\u00fc\u011f\u00fc bir web i\u00e7eri\u011fi tasarlama yakla\u015f\u0131m\u0131d\u0131r. Genellikle g\u00f6r\u00fcnt\u00fcleme, i\u00e7eri\u011fin istenen g\u00f6r\u00fcn\u00fcme \u00f6l\u00e7eklendi\u011fi \u00e7\u00f6z\u00fcn\u00fcrl\u00fck kesimleriyle ger\u00e7ekle\u015ftirilir. G\u00f6r\u00fcnt\u00fcleme noktalar\u0131 mant\u0131kl\u0131 bir \u015fekilde tabletler, telefonlar ve herhangi bir \u00e7\u00f6z\u00fcn\u00fcrl\u00fckteki masa\u00fcstleri i\u00e7in ayr\u0131ca ayarlanmal\u0131d\u0131r.<\/li>\n
  • Responsive tasar\u0131mda, i\u00e7eri\u011fin nas\u0131l akaca\u011f\u0131 ve d\u00fczenin ekran boyutu aral\u0131\u011f\u0131na g\u00f6re nas\u0131l de\u011fi\u015fece\u011fi gibi kurallar\u0131 tan\u0131mlayabilirsiniz.<\/li>\n
  • Responsive tasar\u0131mlar, taray\u0131c\u0131 geni\u015fli\u011findeki de\u011fi\u015fikliklere yan\u0131t olarak tasar\u0131m \u00f6\u011felerinin yerle\u015fimini ayarlayarak mevcut alan\u0131n i\u00e7ine s\u0131\u011facak \u015fekilde kendilerini dinamik olarak yeniden d\u00fczenler. Bir duyarl\u0131 siteyi masa\u00fcst\u00fcnde a\u00e7arsan\u0131z ve taray\u0131c\u0131 penceresinin boyutunu de\u011fi\u015ftirirseniz, i\u00e7erik taray\u0131c\u0131 penceresine s\u0131\u011facak \u015fekilde dinamik olarak yeniden d\u00fczenlenir. Site, mobil telefonlardaki mevcut alan\u0131 kontrol eder ve ard\u0131ndan kendisini ideal d\u00fczenlemeyle sunar.<\/li>\n<\/ul>\n

     <\/p>\n

    Responsive Tasar\u0131m i\u00e7in En \u0130yi Tasar\u0131mlar ve Y\u00f6ntemler<\/h2>\n
      \n
    • Responsive tasar\u0131m ile her cihazdan esneklik i\u00e7in tasar\u0131m yapars\u0131n\u0131z. Bu nedenle:<\/li>\n
    • Mobil odakl\u0131 yakla\u015f\u0131m\u0131 benimseyin. \u00dcr\u00fcn tasar\u0131m s\u00fcrecine masa\u00fcst\u00fc cihazlardan \u00f6nce mobil cihazlar\u0131n tasar\u0131m\u0131yla ba\u015flay\u0131n.<\/li>\n
    • \u00d6l\u00e7eklenebilir Vekt\u00f6r Grafiklerin (SVG’lerin) kullan\u0131m\u0131na \u00f6zen g\u00f6sterin. Bunlar, 2D grafikler i\u00e7in XML tabanl\u0131 bir g\u00f6r\u00fcnt\u00fcleme bi\u00e7imidir. SVG’ler\u00a0 kullan\u0131c\u0131 etkile\u015fimini ve animasyonlar\u0131 destekler.<\/li>\n
    • \u00dc\u00e7 veya daha fazla cihaz i\u00e7in d\u00fczenleme se\u00e7ene\u011fi ekleyin.<\/li>\n
    • Kullan\u0131c\u0131lar\u0131n isteklerine uygun i\u00e7erik haz\u0131rlanmas\u0131 i\u00e7in \u00f6ne \u00e7\u0131kmas\u0131n\u0131 istedi\u011finiz i\u00e7erikleri belirleyin ve istek d\u0131\u015f\u0131 i\u00e7erikleri mobilde gizleyin. \u00d6ne \u00e7\u0131kmas\u0131n\u0131 istedi\u011finiz g\u00f6rselleri belirleyin ve kullan\u0131c\u0131lara gerekli \u00f6\u011feleri belirleyerek, kullan\u0131c\u0131lar\u0131n ihtiya\u00e7 duydu\u011fu \u00f6\u011feleri ilk \u00f6nce sunun. Gereksiz \u00f6\u011feleri ikincil tutun.<\/li>\n
    • Tasar\u0131mda minimalizmi hedefleyin.<\/li>\n
    • Kullan\u0131c\u0131lar\u0131n istekleri ba\u011flam\u0131nda kullan\u0131m kolayl\u0131\u011f\u0131n\u0131 maksimize etmek ve onlar\u0131n al\u0131\u015fkanl\u0131klar\u0131n\u0131 h\u0131zland\u0131rmak i\u00e7in tasar\u0131m kal\u0131plar\u0131 uygulay\u0131n: \u00f6rne\u011fin, a\u00e7\u0131l\u0131\u015f\u00a0 ekran\u0131nda s\u00fctun d\u00fc\u015fme efekti bir\u00e7ok ekran tipine s\u0131\u011far ve g\u00f6r\u00fcnt\u00fc mobile uyumlu \u00e7al\u0131\u015f\u0131r.<\/li>\n<\/ul>\n

       <\/p>\n

       <\/p>\n

      Adaptive Web Tasar\u0131m\u0131 Nedir?<\/h2>\n

      \"\"<\/p>\n

      Adaptive tasar\u0131m, Responsive tasar\u0131ma benzer. Her ikisi de \u00e7e\u015fitli cihazlarda tasar\u0131m yapma yakla\u015f\u0131mlar\u0131d\u0131r; fark, i\u00e7eri\u011fin \u015fekillendirilme \u015feklinde yatar.<\/p>\n

      Responsive tasar\u0131mda, t\u00fcm i\u00e7erik ve i\u015flevsellik her cihaz i\u00e7in ayn\u0131d\u0131r. Bu nedenle, b\u00fcy\u00fck ekranl\u0131 bir masa\u00fcst\u00fc ve ak\u0131ll\u0131 telefon taray\u0131c\u0131s\u0131 ayn\u0131 i\u00e7eri\u011fi g\u00f6sterir. Tek fark i\u00e7eri\u011fin d\u00fczenindedir.<\/p>\n

      Adaptive tasar\u0131m, duyarl\u0131l\u0131\u011f\u0131 bir ad\u0131m \u00f6teye ta\u015f\u0131r. Responsive tasar\u0131m sadece cihaza odaklan\u0131rken, Adaptive tasar\u0131m hem cihaz\u0131 hem de kullan\u0131c\u0131n\u0131n ba\u011flam\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcr. Bu, ba\u011flamda cihazdan cihaza de\u011fi\u015fen m\u00fc\u015fteri kitlesine duyarl\u0131 sayfalar tasarlayabilirsiniz.<\/p>\n

      \u00d6rne\u011fin, bir Responsive tasar\u0131m, d\u00fc\u015f\u00fck bant geni\u015fli\u011fini alg\u0131larsa veya kullan\u0131c\u0131 bir mobil cihazdan bir masa\u00fcst\u00fc cihaz g\u00f6r\u00fcnt\u00fcs\u00fc elde etmek isterse, istedi\u011fi b\u00fcy\u00fck g\u00f6r\u00fcnt\u00fcy\u00fc y\u00fcklemeyebilir. Bunun yerine, foto\u011fraf i\u00e7in daha k\u00fc\u00e7\u00fck bir \u00f6zet s\u00fcr\u00fcm\u00fcn\u00fc g\u00f6sterebilir.<\/p>\n

      Ba\u015fka bir \u00f6rnek, cihaz\u0131n daha k\u00fc\u00e7\u00fck bir ekrana sahip eski bir telefon olup olmad\u0131\u011f\u0131n\u0131 alg\u0131lamakt\u0131r. Web sitesi, telefonun ekran\u0131ndan daha b\u00fcy\u00fck bir g\u00f6r\u00fcnt\u00fcye sahip i\u00e7erik g\u00f6sterebilir.<\/p>\n

       <\/p>\n

      Web Tasar\u0131m\u0131 i\u00e7in Eri\u015filebilirlik<\/strong><\/p>\n

      Web eri\u015filebilirli\u011fi, de\u011fi\u015fen yetenek ve engellere sahip farkl\u0131 gruplardan insanlar i\u00e7in web sitelerini ve teknolojiyi kullan\u0131labilir hale getirme anlam\u0131na gelir. Eri\u015filebilir bir web sitesi, t\u00fcm kullan\u0131c\u0131lar\u0131n, yeteneklerinden ba\u011f\u0131ms\u0131z olarak, sayfan\u0131n i\u00e7eriklerini ve kullan\u0131\u015f\u0131n\u0131 alg\u0131layabilir, anlayabilir, gezinebilir ve etkile\u015fim kurabilir.<\/p>\n

      W3C World Wide Web Konsorsiyumu Nedir?<\/h2>\n

      Herkes \u0130\u00e7in Web ve Her \u015eey \u00dczerine Web:\u00a0<\/strong>W3C, Web’i herkes i\u00e7in eri\u015filebilir ve engelsiz hale getirmek i\u00e7in standartlar (RFC’ler, Yorum Talebi) sa\u011flar.<\/p>\n

      WWW, insanlar aras\u0131nda ileti\u015fimi, ticareti ve bilgi al\u0131\u015fveri\u015fini sa\u011flar ve bunlar, donan\u0131m, yaz\u0131l\u0131m, dil ve k\u00fclt\u00fcr ne olursa olsun herkes taraf\u0131ndan kullan\u0131labilir olmal\u0131d\u0131r. W3C’nin vizyonu, her yerden, her zaman ve herhangi bir cihazdan web eri\u015fimi sa\u011flamakt\u0131r.<\/p>\n

      W3C Standartlar\u0131na Uyum<\/h2>\n

      \u00d6n ve arka plan aras\u0131nda yeterli kontrast sa\u011flay\u0131n<\/strong>.<\/p>\n

      \u00d6rne\u011fin, siyah veya koyu gri metinlerin beyaz arka plan \u00fczerinde okunmas\u0131 gri metinlerin daha a\u00e7\u0131k bir gri tonu \u00fczerinde okunmas\u0131ndan daha kolayd\u0131r. Metin ve arka plan renkleri aras\u0131ndaki kontrast ayarlar\u0131n\u0131 kontrol etmek i\u00e7in renk kontrast\u0131 ayarlar\u0131n\u0131 kullanarak i\u00e7eri\u011finizi kullan\u0131c\u0131lar\u0131n kolayca g\u00f6rebilmesini sa\u011flay\u0131n.<\/p>\n

        \n
      • Bilgi aktar\u0131m\u0131 i\u00e7in sadece foto\u011fraf ya da renk kullanmay\u0131n. \u00d6rne\u011fin, renk k\u00f6r\u00fc olan ki\u015filerin bile aktarmak istedi\u011finiz i\u00e7eri\u011fi tan\u0131mas\u0131n\u0131 sa\u011flamak i\u00e7in renklerle birlikte alt a\u00e7\u0131klamalar kullan\u0131n.<\/li>\n
      • Etkile\u015fimli \u00f6\u011felerin kolayl\u0131kla anla\u015f\u0131labilir olmas\u0131n\u0131 sa\u011flay\u0131n. \u00d6rne\u011fin, kullan\u0131c\u0131 site \u00fczerindeki ba\u011flant\u0131lar\u0131n \u00fczerine geldi\u011finde veya klavye kullanarak bir i\u00e7eri\u011fe odakland\u0131\u011f\u0131nda farkl\u0131 stiller g\u00f6stererek i\u00e7eri\u011fi \u00f6ne \u00e7\u0131kar\u0131n.<\/li>\n
      • Net ve tutarl\u0131 gezinme se\u00e7enekleri sa\u011flay\u0131n. Kar\u0131\u015f\u0131kl\u0131\u011f\u0131 \u00f6nlemek i\u00e7in men\u00fc \u00f6\u011feleri aras\u0131nda tutarl\u0131 adland\u0131rmalar ve d\u00fczenlemeler yap\u0131n. \u00d6rne\u011fin, ana men\u00fcde olmas\u0131 gereken ara\u00e7lar\u0131 standartlara uygun hale getirin ve ana sayfada nerede konumland\u0131rd\u0131ysan\u0131z, web sayfas\u0131n\u0131n di\u011fer sekmelerinde de tutarl\u0131 bir \u015fekilde ayn\u0131 pozisyonda oldu\u011fundan emin olun.<\/li>\n
      • Post ve g\u00f6nderi \u00f6\u011felerinin etiketlerini a\u00e7\u0131k\u00e7a i\u00e7erikle ili\u015fkilendirilmi\u015f olmas\u0131n\u0131 sa\u011flay\u0131n.<\/li>\n
      • Kullan\u0131c\u0131lar\u0131 ilgilendiren geri bildirimleri sa\u011flay\u0131n. Geri bildirimler (\u00f6rne\u011fin, hata mesajlar\u0131) ince yaz\u0131 veya tek bir renkse, d\u00fc\u015f\u00fck g\u00f6r\u00fc\u015fe sahip veya renk k\u00f6r\u00fc ki\u015filerin web sitesini kullanmas\u0131n\u0131 zorla\u015ft\u0131rabilir.<\/li>\n
      • \u0130lgili i\u00e7erikleri ba\u015fl\u0131klar ve aral\u0131klar kullanarak grupland\u0131r\u0131n. \u0130yi bir g\u00f6rsel hiyerar\u015fi (tipografi, bo\u015fluk ve \u0131zgara d\u00fczenleri arac\u0131l\u0131\u011f\u0131yla) i\u00e7eri\u011fi taranmas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/li>\n
      • Farkl\u0131 g\u00f6r\u00fcnt\u00fcleme boyutlar\u0131 i\u00e7in tasar\u0131mlar olu\u015fturun. \u0130\u00e7eri\u011finizin b\u00fcy\u00fck cihazlara (daha b\u00fcy\u00fck cihazlara) ve k\u00fc\u00e7\u00fck ekranlara s\u0131\u011fmas\u0131 i\u00e7in tasar\u0131m\u0131 yap\u0131land\u0131r\u0131n. Duyarl\u0131 web siteleri tasarlay\u0131n ve bunlar\u0131 dikkatlice test edin.<\/li>\n
      • Tasar\u0131m\u0131n\u0131zda resim ve medya alternatifi olarak; i\u00e7erik,\u00a0 Ses ve video alternatifi olarak; transkriptler,\u00a0 Resimler i\u00e7in metin alternatifleri sa\u011flay\u0131n. Resimlerdeki alternatif metnin i\u00e7eri\u011fi anlatt\u0131\u011f\u0131ndan ve sadece resmi tan\u0131mlamad\u0131\u011f\u0131ndan emin olun. PDF’ler kullan\u0131yorsan\u0131z, bunlar\u0131n da eri\u015filebilir oldu\u011fundan emin olun.<\/li>\n
      • Otomatik olarak \u00fcretilen i\u00e7erikler i\u00e7in kontroller sa\u011flay\u0131n. Kullan\u0131c\u0131lara otomatik olarak oynayan animasyonlar\u0131n veya video i\u00e7eri\u011finin duraklatmas\u0131 i\u00e7in butonlar ekleyin.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

        WEB TASARIMI NED\u0130R? Web Tasar\u0131m\u0131, web sitelerinin tasar\u0131m\u0131n\u0131 ifade eder. Genellikle yaz\u0131l\u0131m geli\u015ftirmenin de\u011fil, web sitesi geli\u015ftirmenin kullan\u0131c\u0131 deneyimi y\u00f6nlerini ifade eder. Web tasar\u0131m\u0131, masa\u00fcst\u00fc taray\u0131c\u0131lar\u0131 i\u00e7in web sitelerinin tasar\u0131m\u0131yla ilgilenirken, 2010’lar\u0131n ortalar\u0131ndan itibaren mobil ve tablet taray\u0131c\u0131lar\u0131 i\u00e7in tasar\u0131m giderek daha \u00f6nemli hale gelmi\u015ftir. Bir web tasar\u0131mc\u0131s\u0131 bir web sitesinin g\u00f6r\u00fcn\u00fcm\u00fc, d\u00fczeni ve baz\u0131 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-154","post","type-post","status-publish","format-standard","hentry","category-genel"],"_links":{"self":[{"href":"https:\/\/demo.webbankasi.com\/1\/wp-json\/wp\/v2\/posts\/154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.webbankasi.com\/1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demo.webbankasi.com\/1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demo.webbankasi.com\/1\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.webbankasi.com\/1\/wp-json\/wp\/v2\/comments?post=154"}],"version-history":[{"count":2,"href":"https:\/\/demo.webbankasi.com\/1\/wp-json\/wp\/v2\/posts\/154\/revisions"}],"predecessor-version":[{"id":161,"href":"https:\/\/demo.webbankasi.com\/1\/wp-json\/wp\/v2\/posts\/154\/revisions\/161"}],"wp:attachment":[{"href":"https:\/\/demo.webbankasi.com\/1\/wp-json\/wp\/v2\/media?parent=154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demo.webbankasi.com\/1\/wp-json\/wp\/v2\/categories?post=154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demo.webbankasi.com\/1\/wp-json\/wp\/v2\/tags?post=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}