{"id":40425,"date":"2021-06-16T09:33:53","date_gmt":"2021-06-16T06:33:53","guid":{"rendered":"https:\/\/www.turhost.com/blog\/?p=40425"},"modified":"2023-07-18T17:23:08","modified_gmt":"2023-07-18T14:23:08","slug":"web-tasarimi-nasil-ogrenilir","status":"publish","type":"post","link":"https:\/\/www.turhost.com/blog\/web-tasarimi-nasil-ogrenilir\/","title":{"rendered":"Web Tasar\u0131m\u0131 Nas\u0131l \u00d6\u011frenilir?"},"content":{"rendered":"\n

Web tasar\u0131m\u0131 bir web sitesinin g\u00f6rsel y\u00f6n\u00fcne i\u015faret etse de ger\u00e7ekte web geli\u015ftirme s\u00fcreciyle \u00f6rt\u00fc\u015ft\u00fc\u011f\u00fcnden Web Tasar\u0131m\u0131 Nas\u0131l \u00d6\u011frenilir? sorusunu yan\u0131tlamaya; \u00f6n u\u00e7 -arka u\u00e7, HTML, CSS, JavaScript, UX, UI gibi kavramlar\u0131 a\u00e7\u0131klayarak ba\u015flamak \u00f6nemlidir.<\/p>\n\n\n\n

Kodlama dillerine a\u015fina de\u011filseniz web sitesi tasarlamay\u0131 \u00f6\u011frenmenin zor oldu\u011funu d\u00fc\u015f\u00fcnebilirsiniz. Ancak y\u00f6nelmeniz gereken en temel becerileri geli\u015ftirmeye ba\u015flad\u0131\u011f\u0131n\u0131zda bir-iki y\u0131l i\u00e7inde kendinize yepyeni bir uzmanl\u0131k alan\u0131 in\u015fa edebilirsiniz.<\/p>\n\n\n\n

Pandemiyle birlikte bilgi alma, al\u0131\u015fveri\u015f yapma ve \u00e7al\u0131\u015fma \u015feklimiz her zamankinden daha fazla teknolojiyle sar\u0131lm\u0131\u015fken, yeni ger\u00e7ekli\u011fimizin ve D\u00fcnya ekonomisinin gelece\u011finde internetin b\u00fcy\u00fck rol oynayaca\u011f\u0131n\u0131 \u00f6ng\u00f6rmek zor de\u011fildir. Karantina ve izolasyon nedeniyle insanl\u0131\u011f\u0131n adapte olmaya \u00e7al\u0131\u015ft\u0131\u011f\u0131 bu d\u00f6nemde \u00f6nemli oranda talep art\u0131\u015f\u0131 g\u00f6r\u00fclen sekt\u00f6rlerden biri olan web tasar\u0131m\u0131n\u0131n, nas\u0131l yap\u0131ld\u0131\u011f\u0131n\u0131 \u00f6\u011frenmeniz gelece\u011finizi de\u011fi\u015ftirebilir.<\/p>\n\n\n\n

Web Tasar\u0131m\u0131 Nedir? Nas\u0131l \u00d6\u011frenilir?<\/h2>\n\n\n
\n
\"Web
Web tasar\u0131m\u0131 kullan\u0131c\u0131lar ve web sayfas\u0131 aras\u0131ndaki ileti\u015fimi kolayla\u015ft\u0131rmay\u0131 hedefler.<\/figcaption><\/figure>\n<\/div>\n\n\n

Web tasar\u0131m\u0131 kullan\u0131c\u0131 aray\u00fcz\u00fcnden yerle\u015fime, gezinme ergonomisinden tipografiye \u00e7e\u015fitli \u00f6zelliklerin planlanmas\u0131n\u0131 ve \u00e7e\u015fitli \u00f6gelerin sayfaya dahil edilmesini i\u00e7eren web sitesi olu\u015fturma s\u00fcreci olarak tan\u0131mlanabilir. <\/p>\n\n\n\n

Web tasar\u0131m\u0131 kullan\u0131c\u0131lar ve web sayfas\u0131 aras\u0131ndaki ileti\u015fimi kolayla\u015ft\u0131rmay\u0131 hedefler. Hem yarat\u0131c\u0131l\u0131k hem de analitik beceri gerektirdi\u011finden standartla\u015ft\u0131r\u0131lm\u0131\u015f kodlar\u0131 bilmek, kullan\u0131c\u0131 deneyimini \u00f6nemsemek, SEO’yu (arama motoru optimizasyonu) dikkate almak ve grafik tasar\u0131mdan yararlanmak web tasar\u0131m\u0131n\u0131n olmazsa olmazlar\u0131 aras\u0131ndad\u0131r.<\/p>\n\n\n\n

Asl\u0131nda web tasar\u0131mc\u0131lar\u0131n\u0131n yapt\u0131\u011f\u0131 kavramsal olan\u0131 al\u0131p g\u00f6rsellere \u00e7evirerek fikirlerin iletilmesini sa\u011flayacak i\u015flevsel bir ortam olu\u015fturmakt\u0131r. <\/p>\n\n\n\n

Web tasar\u0131m\u0131 \u00f6\u011frenme yolculu\u011funa HTML, CSS gibi kodlama bilgileri edinerek ba\u015flanmas\u0131 tavsiye edilir. Bu tip tasar\u0131m becerilerini \u00f6\u011frenmek i\u00e7in online kurslara kat\u0131labilir, ilham verici tasar\u0131m podcast’leri dinleyebilir, web tasar\u0131m\u0131yla ilgili pratik k\u0131lavuzlardan olu\u015fan kitaplara, bloglara ve YouTube videolar\u0131na y\u00f6nelebilirsiniz. W3Schools<\/a>, bu kodlar\u0131n ne oldu\u011funu ve tam olarak nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6rmek i\u00e7in denemeler yapabilece\u011finiz sa\u011flam bir ba\u015flang\u0131\u00e7 noktas\u0131 olabilir.<\/p>\n\n\n\n

Web sitesi tasarlamay\u0131 \u00f6\u011frenirken en \u00e7ok ihtiya\u00e7 duyulan bile\u015fenleri ve bilinmesi gereken kavramlar\u0131 \u015fu \u015fekilde s\u0131ralayabiliriz:<\/p>\n\n\n\n

\u00d6n U\u00e7 – Arka U\u00e7<\/h3>\n\n\n
\n
\"\u00d6n
\u00d6n u\u00e7 istemci taraf\u0131, arka u\u00e7 sunucu taraf\u0131 olarak kabul edilir.<\/figcaption><\/figure>\n<\/div>\n\n\n

\u00d6n u\u00e7 (front-end) ve arka u\u00e7 (back-end) web geli\u015ftirmede kullan\u0131lan en pop\u00fcler terimlerdendir. \u00d6n u\u00e7; taray\u0131c\u0131da g\u00f6rebilece\u011finiz, arka u\u00e7 ise web sitesinin ger\u00e7ekten g\u00f6remedi\u011finiz k\u0131sm\u0131d\u0131r. \u00d6n u\u00e7 istemci taraf\u0131<\/span>, arka u\u00e7 sunucu<\/a> taraf\u0131<\/span> olarak kabul edilir. <\/p>\n\n\n\n

\u00d6n u\u00e7, HTML ve CSS gibi dosyalardan olu\u015fan ve web tasar\u0131m\u0131n\u0131n kullan\u0131c\u0131lar taraf\u0131ndan etkile\u015fim kurulan bir par\u00e7as\u0131d\u0131r. Bu dosyalar, istemci taraf\u0131nda taray\u0131c\u0131ya y\u00fcklenen dosyalard\u0131r.<\/p>\n\n\n\n

Arka u\u00e7, bir web sitesini g\u00f6r\u00fcnt\u00fclerken arka planda \u00e7al\u0131\u015fan sunucular\u0131, uygulamalar\u0131 ve veritabanlar\u0131n\u0131 kapsar. Web tasar\u0131m\u0131 \u00f6\u011frenmeye \u00e7al\u0131\u015f\u0131rken arka u\u00e7 konusunda derinlemesine bilgi edinmenize gerek yoktur<\/span> ancak en az\u0131ndan amac\u0131n\u0131 anlaman\u0131z \u00f6nemlidir. Arka u\u00e7la ilgili k\u0131saca \u015funlar\u0131 s\u00f6yleyebiliriz:<\/p>\n\n\n\n

Sunucular web sitelerinin dosyalar\u0131n\u0131n depoland\u0131\u011f\u0131, kesintisiz \u00e7al\u0131\u015fan, s\u00fcrekli internet ba\u011flant\u0131s\u0131 olan geli\u015fmi\u015f bilgisayarlard\u0131r. Linux veya Windows gibi i\u015fletim sistemlerinde \u00e7al\u0131\u015f\u0131rlar. Sunucudaki uygulaman\u0131n i\u015flevleri i\u00e7in PHP, Python, Ruby, C # ve Java gibi bir programlama dilleri kullan\u0131l\u0131r. \u00d6rne\u011fin PHP, WordPress’i destekleyen dildir. Python, veri bilimi ve makine \u00f6\u011freniminde kullan\u0131l\u0131r. En \u00e7ok talep g\u00f6ren program dillerinin art\u0131lar\u0131n\u0131, eksilerini ve kullan\u0131m alanlar\u0131n\u0131 En Pop\u00fcler Programlama Dilleri<\/a> adl\u0131 yaz\u0131m\u0131zdan \u00f6\u011frenebilirsiniz.<\/p>\n\n\n\n

Arka u\u00e7 bile\u015fenlerinden biri olan veritabanlar\u0131, ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi web siteniz i\u00e7in bilgileri depolad\u0131\u011f\u0131n\u0131z yerdir. \u00c7o\u011fu veritaban\u0131, “Yap\u0131land\u0131r\u0131lm\u0131\u015f Sorgu Dili” anlam\u0131na gelen SQL adl\u0131 bir dil kullan\u0131r. Veritabanlar\u0131; Windows sunucularda Microsoft SQL Server \u00fczerinde, Linux i\u00e7in ise MySQL \u00fczerinde \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r.<\/p>\n\n\n\n

Sunucu taraf\u0131 dilleriyle kullanabilece\u011finiz \u00e7er\u00e7eveler (frameworks); web uygulamalar\u0131 olu\u015fturmay\u0131 \u00e7ok daha h\u0131zl\u0131 hale getiren yard\u0131mc\u0131 ara\u00e7lard\u0131r. Web tasar\u0131m\u0131nda ilerledik\u00e7e React veya Bootstrap gibi \u00e7er\u00e7evelerle \u00e7al\u0131\u015fmaya ba\u015flayabilir veya jQuery ile daha derine inebilirsiniz. Bunlar i\u00e7in ba\u015flang\u0131\u00e7ta \u00e7ok fazla endi\u015felenmeniz gereksizdir.<\/span><\/p>\n\n\n\n

\u015eimdi \u00f6n u\u00e7 web geli\u015ftirmenin temel yap\u0131 ta\u015flar\u0131 olan HTML, CSS ve JavaScript’i a\u00e7\u0131klayarak ilerleyelim.<\/p>\n\n\n\n

HTML <\/h3>\n\n\n
\n
\"HTML
Bir web sitesini g\u00f6r\u00fcnt\u00fclemek i\u00e7in taray\u0131c\u0131n\u0131za y\u00fcklenen ana dosya t\u00fcr\u00fc olan HTML dosyas\u0131, sitenin nas\u0131l g\u00f6r\u00fcnt\u00fclenece\u011fine ili\u015fkin y\u00f6nergeler sa\u011flar.<\/figcaption><\/figure>\n<\/div>\n\n\n

HTML (HyperText Markup Language) K\u00f6pr\u00fc Metni Bi\u00e7imlendirme Dili anlam\u0131na gelir, t\u00fcm web sitelerinin temelidir. <\/p>\n\n\n\n

Yeni ba\u015flayanlar i\u00e7in bir web sitesini kodlaman\u0131n en kolay yolu HTML kullanmakt\u0131r. HTML, bir web sitesinin yap\u0131s\u0131n\u0131 olu\u015fturmaya yard\u0131mc\u0131 olan iskelettir, bu dili \u00f6\u011frendi\u011finizde web tasar\u0131m \u00e7ok daha anlaml\u0131 hale gelecektir.<\/p>\n\n\n\n

HTML; <title> gibi etiketlerle ba\u015fl\u0131klar, paragraflar, listeler ve g\u00f6rseller dahil t\u00fcm \u00f6gelerin bir web sayfas\u0131na yerle\u015ftirilmesi i\u00e7in kullan\u0131l\u0131r. B\u00f6ylece bir web sitesini g\u00f6r\u00fcnt\u00fclemek i\u00e7in taray\u0131c\u0131n\u0131za y\u00fcklenen ana dosya t\u00fcr\u00fc olan HTML dosyas\u0131 sitenin nas\u0131l g\u00f6r\u00fcnt\u00fclenece\u011fine ili\u015fkin y\u00f6nergeler sa\u011flar.<\/p>\n\n\n\n

\u00d6zellikle H1, H2 ve H3 etiketleri gibi ba\u015fl\u0131k etiketlerinin i\u00e7erik hiyerar\u015fisi i\u00e7in nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 bilmeniz \u00f6nemlidir. HTML<\/a> \u00f6\u011frenmek siteniz \u00fczerinde kontrol sahibi olman\u0131z\u0131 ve web hakk\u0131nda \u00e7ok daha derin bir anlay\u0131\u015f geli\u015ftirmenizi sa\u011flayacakt\u0131r.<\/p>\n\n\n\n

CSS<\/h3>\n\n\n
\n
\"CSS,
CSS ile renkler, \u00f6zel yaz\u0131 tipleri ekleyebilir, web sitenizin \u00f6\u011felerini g\u00f6r\u00fcnmelerini istedi\u011finiz \u015fekilde d\u00fczenleyebilir, animasyonlar olu\u015fturabilirsiniz<\/figcaption><\/figure>\n<\/div>\n\n\n

CSS (Basamakl\u0131 Stil Sayfalar\u0131), taray\u0131c\u0131lara bir web sayfas\u0131 i\u00e7in HTML’yi nas\u0131l bi\u00e7imlendireceklerini ve stilize edeceklerini s\u00f6yleyen koddur. HTML i\u00e7eri\u011fini daha \u00e7ekici g\u00f6r\u00fcnecek \u015fekilde bi\u00e7imlendirmenize olanak tan\u0131r. <\/p>\n\n\n\n

\u00d6n u\u00e7ta uzmanla\u015fmak istiyorsan\u0131z, sa\u011flam CSS becerilerine sahip olman\u0131z \u00e7ok \u00f6nemlidir. CSS’nin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 bilmek benzersiz web siteleri olu\u015fturman\u0131z\u0131 ve mevcut \u015fablonlar\u0131 \u00f6zelle\u015ftirmenizi sa\u011flar.<\/p>\n\n\n\n

CSS ile renkler, \u00f6zel yaz\u0131 tipleri ekleyebilir, web sitenizin \u00f6\u011felerini g\u00f6r\u00fcnmelerini istedi\u011finiz \u015fekilde d\u00fczenleyebilir, animasyonlar olu\u015fturabilirsiniz (Stratejik olarak ve \u00f6l\u00e7\u00fcl\u00fc olarak kullan\u0131ld\u0131\u011f\u0131nda animasyon s\u0131k\u0131c\u0131, d\u00fcz veya hareketsiz bir tasar\u0131m\u0131 y\u00fckseltebilir, a\u015f\u0131r\u0131ya ka\u00e7maman\u0131z \u00f6nerilir).<\/p>\n\n\n\n

Sayfa i\u00e7eri\u011fini maksimum etki i\u00e7in d\u00fczenlemenizi sa\u011flayan CSS’in nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 CSS Nedir? CSS Kodlar\u0131 Nelerdir?<\/a> adl\u0131 yaz\u0131m\u0131zdan \u00f6\u011frenebilirsiniz.<\/p>\n\n\n\n

JavaScript<\/h3>\n\n\n\n

Tasar\u0131mlar\u0131n\u0131z\u0131 yaln\u0131zca HTML ve CSS kullanarak kodlayabilirsiniz, ancak JavaScript de kullan\u0131rsan\u0131z b\u00fcy\u00fck bir avantaj elde etmi\u015f olursunuz \u00e7\u00fcnk\u00fc JavaScript, sitenizdeki statik \u00f6\u011feleri etkile\u015fimli hale getirmenize olanak tan\u0131r. \u00d6rne\u011fin kullan\u0131c\u0131y\u0131 sayfan\u0131n \u00fcst k\u0131sm\u0131na g\u00f6t\u00fcrecek bir “Ba\u015fa D\u00f6n” butonu veya kullan\u0131c\u0131n\u0131n konumuna g\u00f6re hava durumunu g\u00f6steren bir widget olu\u015fturabilirsiniz.<\/p>\n\n\n\n

JavaScript, taray\u0131c\u0131da \u00e7al\u0131\u015fmak \u00fczere tasarlanm\u0131\u015f bir programlama dilidir. <\/p>\n\n\n\n

JavaScript \u00e7er\u00e7eveleri s\u0131f\u0131rdan ba\u015flamak yerine \u00f6nceden olu\u015fturulmu\u015f yap\u0131lar ve bile\u015fenlerle daha h\u0131zl\u0131 tasar\u0131mlar olu\u015fturman\u0131za yarar. Vanilya JavaScript’in temellerini \u00f6\u011frendikten sonra, React, Angular ve Vue adl\u0131 JavaScript \u00e7er\u00e7evelerini de \u00f6\u011frenmeye \u00e7al\u0131\u015fabilirsiniz. Google taraf\u0131ndan olu\u015fturulan Angular, ilk b\u00fcy\u00fck JavaScript \u00e7er\u00e7evesidir. React, Facebook taraf\u0131ndan olu\u015fturulan ve \u015fu anda en pop\u00fcler olan JavaScript \u00e7er\u00e7evesidir. Vue ise eski bir Angular geli\u015ftiricisi olan Evan You taraf\u0131ndan olu\u015fturulan daha yeni bir \u00e7er\u00e7evedir. <\/p>\n\n\n\n

S\u00fcr\u00fcm Kontrol Sistemi<\/h3>\n\n\n\n

Hem \u00f6n u\u00e7 tasar\u0131mc\u0131lar\u0131 hem de arka u\u00e7 geli\u015ftiricilerinin s\u00fcr\u00fcm kontrol sistemlerini tan\u0131mas\u0131 gerekir. S\u00fcr\u00fcm kontrol sistemleri, kodda yap\u0131lan de\u011fi\u015fiklikleri izlemenize olanak tan\u0131yarak birden fazla ki\u015finin ayn\u0131 anda kod \u00fczerinde \u00e7al\u0131\u015fmas\u0131n\u0131 m\u00fcmk\u00fcn k\u0131lar. En pop\u00fcler s\u00fcr\u00fcm kontrol sistemi Git’tir. <\/p>\n\n\n\n

S\u00fcr\u00fcm kontrol sistemleri, dosyalar\u0131n\u0131z\u0131n birden \u00e7ok s\u00fcr\u00fcm\u00fcn\u00fc kaydetmenizi ve daha sonra bunlara eri\u015fmenizi sa\u011flar. En iyi s\u00fcr\u00fcm kontrol sistemleri, ekiplerin dosyalar\u0131n\u0131 senkronize etmelerine izin verir, b\u00f6ylece herkes en g\u00fcncel dosyalara an\u0131nda eri\u015febilir ve as\u0131l kaynak da korunmu\u015f olur.<\/p>\n\n\n\n

Web Tasar\u0131m Programlar\u0131<\/h3>\n\n\n
\n
\"Web
Web tasar\u0131m programlar\u0131n\u0131 bir arada kullanmak dinamik ve etkile\u015fimli web siteleri tasarlamay\u0131 kolayla\u015ft\u0131r\u0131r.<\/figcaption><\/figure>\n<\/div>\n\n\n

Neredeyse t\u00fcm tasar\u0131mc\u0131lar\u0131n kulland\u0131\u011f\u0131 Adobe Photoshop <\/span>ve<\/span> Illustrator<\/span> gibi ara\u00e7lar, daha da dinamik ve etkile\u015fimli web siteleri tasarlamay\u0131 kolayla\u015ft\u0131rmaktad\u0131r. Tasar\u0131mda en pop\u00fcler yaz\u0131l\u0131m Photoshop’t\u0131r ancak s\u0131f\u0131rdan ba\u015fl\u0131yorsan\u0131z ve daha \u00f6nce tasar\u0131m ara\u00e7lar\u0131n\u0131 hi\u00e7 kullanmad\u0131ysan\u0131z; Figma, Sketch <\/span>veya<\/span> Adobe XD <\/span>ile ba\u015flaman\u0131z \u00f6nerilir. \u00dc\u00e7\u00fc de Photoshop’tan daha \u00e7ok web tasar\u0131m\u0131 odakl\u0131d\u0131r ve \u00e7ok daha kolayd\u0131r. Figma, k\u0131s\u0131tlama olmaks\u0131z\u0131n \u00fccretsiz bir hesap sundu\u011fu i\u00e7in tasar\u0131ma yeni ba\u015flayanlar i\u00e7in en uygun ara\u00e7lardan biridir. Zaman zaman, benzersiz web siteleri olu\u015fturmak i\u00e7in birka\u00e7 program\u0131 bir arada kullanmay\u0131 da tercih edebilirsiniz.<\/p>\n\n\n\n

Bir web sitesi olu\u015fturdu\u011funuzda, kullanaca\u011f\u0131n\u0131z en \u00f6nemli ara\u00e7 web sitesini olu\u015fturacak kodu yazman\u0131za olanak tan\u0131yan kod d\u00fczenleyicisidir. En pop\u00fcler kod d\u00fczenleyici<\/span> VS Code’dur. VS Code, Microsoft\u2019un Visual Studio’sunun daha hafif bir s\u00fcr\u00fcm\u00fcd\u00fcr. H\u0131zl\u0131d\u0131r, \u00fccretsizdir, kullan\u0131m\u0131 kolayd\u0131r ve temalar ve uzant\u0131larla \u00f6zelle\u015ftirilebilir. Bunun d\u0131\u015f\u0131nda Sublime Text, Atom ve Vim gibi kod edit\u00f6rleri de kullan\u0131labilir.<\/p>\n\n\n\n

Dilerseniz deneyimli ya da deneyimsiz herkesin web sitesi olu\u015fturmas\u0131n\u0131 kolayla\u015ft\u0131ran yaz\u0131l\u0131mlar\u0131, i\u00e7erik y\u00f6netim sistemlerini ve platformlar\u0131 tan\u0131tt\u0131\u011f\u0131m\u0131z Web Tasar\u0131m\u0131 \u0130\u00e7in Kullan\u0131lan Programlar<\/a> adl\u0131 yaz\u0131m\u0131za g\u00f6z atabilirsiniz.<\/p>\n\n\n\n

G\u00f6rsel Tasar\u0131m<\/h3>\n\n\n
\n
\"G\u00f6rsel
Metin, foto\u011fraf ve grafikleri m\u00fckemmel \u015fekilde dengeleyen bir tasar\u0131m olu\u015fturmak i\u00e7in beyaz alan\u0131n uygun kullan\u0131m\u0131 \u00e7ok \u00f6nemlidir.<\/figcaption><\/figure>\n<\/div>\n\n\n

G\u00f6rsel tasar\u0131mda \u00e7izgiler, \u015fekiller<\/span>, dokular, renkler gibi bile\u015fenleri kullan\u0131rken ama\u00e7lad\u0131\u011f\u0131n\u0131z etkiyi ortaya \u00e7\u0131karacak kompozisyon kurallar\u0131n\u0131 bilmek, tasar\u0131m ilkelerini ve temel kavramlar\u0131n\u0131 \u00f6\u011frenmek \u00f6nemlidir. \u00d6rne\u011fin g\u00f6rsel tasar\u0131mda kareler ve dikd\u00f6rtgenler i\u00e7erik bloklar\u0131 i\u00e7in, daireler butonlar i\u00e7in, \u00fc\u00e7genler genellikle \u00f6nemli bir mesaja veya harekete ge\u00e7irme ifadesine e\u015flik eden simgeler i\u00e7in kullan\u0131l\u0131r. <\/p>\n\n\n\n

Kareler g\u00fc\u00e7le ili\u015fkilendirilirken daireler uyum ve rahatl\u0131\u011f\u0131, \u00fc\u00e7genler ise \u00f6nem ve eylemi vurgulamaya yarar. <\/p>\n\n\n\n

\u0130letmeye \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131z mesajlar\u0131n de\u011ferini azaltan a\u015f\u0131r\u0131 uyar\u0131c\u0131 bir web sitesinden ka\u00e7\u0131nmak i\u00e7in metniniz, grafikleriniz, multimedya ve renk d\u00fczeniniz aras\u0131nda bir denge<\/span> sa\u011flamak \u00f6nemlidir. Y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc g\u00f6rsellere, uygun ve net i\u00e7eri\u011fe sahip, basit, temiz bir tasar\u0131m, kullan\u0131c\u0131lar\u0131n daha fazla ilgisini \u00e7ekecektir. Uyumlu renkleri ve \u015fekilleri birle\u015ftirmek, site ziyaret\u00e7ilerinizin odaklanmas\u0131na yard\u0131mc\u0131 olabilir ve sitenizin genel ak\u0131\u015f\u0131na katk\u0131da bulunabilir.<\/p>\n\n\n\n

G\u00f6z\u00fc yormayan tasar\u0131mlar yaratmak i\u00e7in renk teorisi<\/span> konusunda bilgi sahibi olman\u0131z, tamamlay\u0131c\u0131 renkleri, z\u0131t renkleri ve bunlar\u0131n ili\u015fkilendirildi\u011fi duygular\u0131 \u00f6\u011frenmeniz \u00f6nerilir. Ba\u015flang\u0131\u00e7ta renk kullan\u0131m\u0131nda 60-30-10 kural\u0131 gibi kurallara ba\u011fl\u0131 kalmak tasar\u0131m\u0131n\u0131zda denge duygusu yaratacakt\u0131r; ana renk % 60, ikincil renk % 30 ve vurgu rengi % 10.<\/p>\n\n\n\n

Modern web tasar\u0131mc\u0131lar\u0131n\u0131n \u00f6nceli\u011fi olan bo\u015fluk<\/span>, g\u00f6rsel olarak ho\u015f ve gezinmesi kolay web siteleri olu\u015fturmada kritik bir unsurdur. Metin, foto\u011fraf ve grafikleri m\u00fckemmel \u015fekilde dengeleyen bir tasar\u0131m olu\u015fturmak i\u00e7in beyaz alan\u0131n uygun kullan\u0131m\u0131 \u00e7ok \u00f6nemlidir. Sayfalar\u0131n\u0131z\u0131n her pikselini bir \u015feyle doldurmaya \u00e7al\u0131\u015fmak yerine beyaz alan b\u0131rakarak, ziyaret\u00e7ilerinizin dikkatini odaklanmalar\u0131n\u0131 istedi\u011finiz alanlara \u00e7ekmeye \u00e7al\u0131\u015f\u0131n. Unutmay\u0131n bo\u015fluklar sitenizin daha temiz ve d\u00fczenli g\u00f6r\u00fcnmesine de yard\u0131mc\u0131 olur.<\/p>\n\n\n\n

G\u00fc\u00e7l\u00fc g\u00f6rseller ve simgelerin kullan\u0131m\u0131yla tasar\u0131mlar bir\u00e7ok bilgiyi sadece birka\u00e7 saniye i\u00e7inde iletebilir ancak do\u011fru kullan\u0131ld\u0131\u011f\u0131nda videolar<\/span> da metin veya resim yoluyla d\u00fczg\u00fcn \u015fekilde aktar\u0131lamayan bir mesaj\u0131 kullan\u0131c\u0131lar\u0131n daha kolay anlamas\u0131na yard\u0131mc\u0131 olacakt\u0131r. Bu konuda dikkat etmeniz gereken videolar\u0131n\u0131z\u0131n tasar\u0131mdaki di\u011fer \u00f6nemli unsurlarla rekabet etmiyor veya bu unsurlar\u0131n de\u011ferini d\u00fc\u015f\u00fcrm\u00fcyor olmas\u0131d\u0131r.<\/p>\n\n\n\n

UX<\/h3>\n\n\n
\n
\"UX,
Bir web sitesi kullan\u0131c\u0131 deneyimine odakland\u0131\u011f\u0131nda; tasar\u0131mda gezinmek ve iletilmek istenen mesaj\u0131 anlamak kolayla\u015f\u0131r. <\/figcaption><\/figure>\n<\/div>\n\n\n

UX, kullan\u0131c\u0131 deneyimi anlam\u0131na gelir, tasar\u0131mlar\u0131n\u0131za kullan\u0131c\u0131lar\u0131n bak\u0131\u015f a\u00e7\u0131s\u0131yla yakla\u015fman\u0131z\u0131 vurgulayan bir tasar\u0131m terimidir. Web sitesi tasar\u0131m\u0131nda hep akl\u0131n\u0131zda tutman\u0131z gereken en \u00f6nemli detayd\u0131r \u00e7\u00fcnk\u00fc ihmal etti\u011finizde sitenin arama motoru s\u0131ralamalar\u0131n\u0131n d\u00fc\u015f\u00fck olmas\u0131na neden olur. <\/p>\n\n\n\n

UX, kullan\u0131c\u0131lar\u0131n tam olarak ihtiya\u00e7 duyduklar\u0131n\u0131 elde etmelerine yard\u0131mc\u0131 olacak tasar\u0131ma odaklanman\u0131z\u0131, tasar\u0131m\u0131n\u0131z\u0131 hedef kitlenizin g\u00f6z\u00fcnden g\u00f6rmeyi gerektirir. Bunu yapmak i\u00e7in, kullan\u0131c\u0131lar\u0131n sitenizle etkile\u015fimini izlemeniz, kritik b\u00f6l\u00fcmleri \u00f6ne \u00e7\u0131karman\u0131za yard\u0131mc\u0131 olur.<\/p>\n\n\n\n

Burada dikkat etmeniz gereken kullan\u0131labilirlik pahas\u0131na becerilerinizi sergilemenin cazibesine direnebilmenizdir. Kitleniz hakk\u0131nda bilgi edinmek de onlar\u0131n istek ve ihtiya\u00e7lar\u0131na g\u00f6re uyarlanm\u0131\u015f bir tasar\u0131m olu\u015fturman\u0131z\u0131 sa\u011flayacakt\u0131r.<\/p>\n\n\n\n

Bir web sitesi kullan\u0131c\u0131 deneyimi merkezli oldu\u011funda, tasar\u0131mda gezinmek ve iletilmek istenen mesaj\u0131 anlamak kolayla\u015f\u0131r. Bu, kullan\u0131c\u0131lar\u0131n sitede kalmas\u0131n\u0131, daha fazla i\u015flem yapmas\u0131n\u0131, trafi\u011finizi ve m\u00fc\u015fteri taban\u0131n\u0131z\u0131 art\u0131rman\u0131z\u0131, rakipleriniz kar\u015f\u0131s\u0131nda \u00f6ne \u00e7\u0131kman\u0131z\u0131 da kolayla\u015ft\u0131r\u0131r.<\/p>\n\n\n\n

UI<\/h3>\n\n\n\n

UI, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn k\u0131saltmas\u0131d\u0131r. Arabirim olarak da adland\u0131r\u0131l\u0131r ve bir kullan\u0131c\u0131n\u0131n programla ileti\u015fim kurmas\u0131na yard\u0131mc\u0131 olan bir dizi komut veya men\u00fcy\u00fc ifade eder. <\/p>\n\n\n\n

Kullan\u0131c\u0131 aray\u00fcz\u00fc, bir web sitesindeki \u00f6\u011feler arac\u0131l\u0131\u011f\u0131yla kullan\u0131c\u0131n\u0131n eylemlerine izin verir ve sitenizde yapmas\u0131 gerekenleri ne kadar kolay ve sezgisel olarak yapabilece\u011fini belirler. Ayr\u0131ca, kullan\u0131c\u0131 aray\u00fcz\u00fc, tasar\u0131m\u0131 keyifli ve e\u011flenceli hale getirmekle de ilgilidir.<\/p>\n\n\n\n

Sezgisel tasar\u0131m ve basitlik dikkat edilmesi gereken iki temel kullan\u0131c\u0131 aray\u00fcz\u00fc ilkesidir. Bir web sitesiyle etkile\u015fim tutarl\u0131 ve tekrarlanabilir kal\u0131plar i\u00e7erdi\u011finde sezgisel oldu\u011fundan bahsedebiliriz; web sitesine girenler gezinirken mevcut sistemi kolayl\u0131kla anlamal\u0131d\u0131r. Tasar\u0131mda kullan\u0131labilirli\u011fi art\u0131rmak i\u00e7in gezinme s\u00fcrecinin h\u0131zland\u0131r\u0131lmas\u0131 ve eri\u015filebilirli\u011fi kolayla\u015ft\u0131ran \u00f6\u011felerin entegre edilmesi gibi unsurlara odaklan\u0131lmal\u0131d\u0131r.<\/p>\n\n\n\n

Yerle\u015fim (Layout)<\/h3>\n\n\n
\n
\"Yerle\u015fim
Z deseni; bol miktarda negatif alana sahip tasar\u0131mlar i\u00e7in web sitesinde gezinmeyi verimli k\u0131lar. F deseni ise yo\u011fun i\u00e7erik bloklar\u0131na sahip tasar\u0131mlar i\u00e7in uygundur.<\/figcaption><\/figure>\n<\/div>\n\n\n

Yerle\u015fimin yap\u0131s\u0131 g\u00f6rsel bir hiyerar\u015fi izlemelidir. \u0130nsanlar\u0131n bir web sitesini okurken kulland\u0131klar\u0131 g\u00f6z hareketleri dikkate al\u0131narak belirlenen ortak kal\u0131plara ba\u011fl\u0131 kalmak \u00f6nemlidir. Her internet kullan\u0131c\u0131s\u0131 nereye bakaca\u011f\u0131n\u0131 sezgisel olarak bilir \u00e7\u00fcnk\u00fc hayat\u0131 boyunca internette ayn\u0131 kal\u0131plar\u0131 defalarca g\u00f6rm\u00fc\u015ft\u00fcr. Tasar\u0131mda bu kal\u0131plar\u0131 bilmek, i\u00e7erik ve g\u00f6rseller i\u00e7in sorunsuz bir ak\u0131\u015fa sahip olmaya, kullan\u0131c\u0131n\u0131n kolayl\u0131kla izleyece\u011fi bir rota olu\u015fturmaya yard\u0131mc\u0131 olacakt\u0131r. Anlaman\u0131z gereken iki pop\u00fcler kal\u0131p, Z ve F desenleridir.<\/p>\n\n\n\n

Z deseni<\/mark>; kelime ve g\u00f6rsellerden olu\u015fan bir plana ve bol miktarda negatif alana sahip tasar\u0131mlar i\u00e7in, web sitesinde gezinmeyi verimli k\u0131lar. Bir\u00e7ok a\u00e7\u0131l\u0131\u015f sayfas\u0131 bu kal\u0131ba uyar. F deseni<\/mark> ise metin \u00fczerine yo\u011funla\u015fan tasar\u0131mlarda genellikle ekran\u0131n sol taraf\u0131nda, yay\u0131nlar\u0131n bir listesini i\u00e7eren ve sayfan\u0131n ana g\u00f6vdesinde, ilgili bilgilerin yer ald\u0131\u011f\u0131 tasar\u0131mlard\u0131r. \u0130nsanlar\u0131n sayfaya h\u0131zl\u0131ca g\u00f6z at\u0131p ihtiya\u00e7 duyduklar\u0131 bilgileri sa\u011flamay\u0131 hedefler. F modeli, yo\u011fun i\u00e7erik bloklar\u0131na sahip tasar\u0131mlarda yayg\u0131n olarak kullan\u0131l\u0131r.<\/p>\n\n\n\n

Tipografi<\/h3>\n\n\n\n

Tipografi, b\u00fcy\u00fck etki yaratabilecek kritik web tasar\u0131m \u00f6\u011felerindendir. Yaz\u0131 tipleri estetiksel i\u015fleve ve duygular\u0131 etkileme g\u00fcc\u00fcne sahiptir. \u00d6rne\u011fin, bir web sitesi el yap\u0131m\u0131 \u00fcr\u00fcnlere adanm\u0131\u015fsa, yaz\u0131 tiplerinin de ayn\u0131 zarif havay\u0131 vermesi etkileyicili\u011fini art\u0131racakt\u0131r. <\/p>\n\n\n\n

Tipografide sat\u0131r y\u00fcksekli\u011fini, karakter aral\u0131\u011f\u0131n\u0131 nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 bilmeniz \u00f6nemlidir ancak ba\u015flang\u0131\u00e7ta kendinizi ince ayarlara kapt\u0131rmay\u0131n. Okunabilir bir font ilk a\u015famada odaklanman\u0131z gereken noktad\u0131r.<\/p>\n\n\n\n

Ana yaz\u0131 tipiniz \u00e7ok say\u0131da k\u0131vr\u0131ml\u0131 \u015eerif i\u00e7eren bir yaz\u0131 tipiyse, daha basit yaz\u0131 tipleriyle e\u015fle\u015ftirip projenizi en iyi \u015fekilde tamamlayan kombinasyonu bulmaya \u00e7al\u0131\u015fabilirsiniz. Her proje i\u00e7in en fazla<\/em> iki veya \u00fc\u00e7 tane farkl\u0131 yaz\u0131 tipi kullan\u0131lmas\u0131 \u00f6nerilir.<\/p>\n\n\n\n

Duyarl\u0131 Tasar\u0131m<\/h3>\n\n\n
\n
\"Duyarl\u0131
Mobil trafik masa\u00fcst\u00fc trafi\u011fi geride b\u0131rakt\u0131\u011f\u0131ndan, sitenizin farkl\u0131 ekran boyutlar\u0131na yan\u0131t verecek \u015fekilde tasarlanm\u0131\u015f olmas\u0131 \u00f6nemlidir.<\/figcaption><\/figure>\n<\/div>\n\n\n

G\u00fc\u00e7l\u00fc bir tasar\u0131m t\u00fcm cihazlarda ve taray\u0131c\u0131larda etkileyici g\u00f6r\u00fcnmelidir. Duyarl\u0131 tasar\u0131m, sitenizin masa\u00fcst\u00fc bilgisayarlar, tabletler ve cep telefonlar\u0131 gibi farkl\u0131 ekran boyutlar\u0131na yan\u0131t verecek \u015fekilde otomatik olarak \u00f6l\u00e7eklendirilmesini sa\u011flar. Mobil trafik masa\u00fcst\u00fc trafi\u011fi geride b\u0131rakt\u0131\u011f\u0131ndan, web sitenizde bu konuya dikkat etmeniz \u00f6nemlidir. Sitenizi s\u0131f\u0131rdan olu\u015ftururken, taray\u0131c\u0131lar aras\u0131 bir test arac\u0131 kullanabilirsiniz. Daha geni\u015f a\u00e7\u0131klama i\u00e7in Responsive Tasar\u0131m Nedir?<\/a> adl\u0131 yaz\u0131m\u0131z\u0131 okuman\u0131z\u0131 \u00f6neririz.<\/p>\n\n\n\n

Di\u011fer Ara\u00e7lar<\/h3>\n\n\n\n

Yukar\u0131da da belirtti\u011fimiz gibi HTML, CSS ve JavaScript, \u00f6n u\u00e7 web geli\u015ftirmenin temel yap\u0131 ta\u015flar\u0131d\u0131r. Bunlara ek olarak, tasar\u0131mlar\u0131n\u0131zda i\u015finize yarayacak birka\u00e7 farkl\u0131 unsurdan da bahsedebiliriz:<\/p>\n\n\n\n