{"id":6764,"date":"2016-02-15T10:24:53","date_gmt":"2016-02-15T08:24:53","guid":{"rendered":"https:\/\/ihs.com.tr\/blog\/?p=6764"},"modified":"2019-01-18T12:31:23","modified_gmt":"2019-01-18T10:31:23","slug":"2016-web-tasarim-trendleri","status":"publish","type":"post","link":"https:\/\/www.ihs.com.tr\/blog\/2016-web-tasarim-trendleri\/","title":{"rendered":"2016 Web Tasar\u0131m Trendleri"},"content":{"rendered":"<p><span style=\"font-size: 14pt;\">Web tasar\u0131m\u0131 trendleri h\u0131zla de\u011fi\u015fiyor. Web siteleri art\u0131k ge\u00e7en senelere k\u0131yasla \u00e7ok daha farkl\u0131 trendleri takip ediyor. Web tasar\u0131mc\u0131lar\u0131n\u0131n mevcut ve gelecekteki trendleri takip etmesinde her zaman fayda var. Bu tasar\u0131mc\u0131lar\u0131 rekabette bir ad\u0131m \u00f6ne \u00e7\u0131karabildi\u011fi gibi m\u00fc\u015fterilerinin ihtiya\u00e7lar\u0131n\u0131 kar\u015f\u0131lamalar\u0131n\u0131 da kolayla\u015ft\u0131rabilir. \u201cTrend\u201d kelimesinin \u201cyeni\u201d anlam\u0131na gelmedi\u011fini de unutmamak gerekiyor.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Yeni web tasar\u0131m\u0131 trendleri\u00a0tasar\u0131mc\u0131lar\u0131n ve kullan\u0131c\u0131lar\u0131n zevkleri ve tercihleri sonucunda ortaya \u00e7\u0131kar. Bu de\u011fi\u015fimleri m\u00fcmk\u00fcn k\u0131lan \u015fey ise teknolojideki geli\u015fmelerdir. Teknoloji en \u00f6nemli itici g\u00fc\u00e7t\u00fcr ve tasar\u0131m\u0131n ilerlemesini sa\u011flar.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Tasar\u0131m\u0131n nereye gitti\u011fini anlamak i\u00e7in \u00f6nce nereden geldi\u011fini g\u00f6relim.<\/span><\/p>\n<p><strong><span style=\"font-size: 14pt;\">Web Tasar\u0131m\u0131 Bug\u00fcnlere Nereden Geldi<\/span><\/strong><\/p>\n<p><span style=\"font-size: 14pt;\">Ge\u00e7ti\u011fimiz y\u0131llar\u0131n trendlerleri a\u015fa\u011f\u0131daki gibiydi.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">&#8211; Minimal<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">&#8211; D\u00fcz<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">&#8211; Video slaytlar\u0131<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">&#8211; Arka plan videolar\u0131<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">&#8211; CSS animasyon<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">&#8211; Uzun scrollar<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">&#8211; Kahraman g\u00f6rselleri<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">&#8211; Yatay men\u00fcler<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">&#8211; T\u00fcm elektronik cihazlara uyumlu<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">&#8211; Mobil \u00f6ncelikli<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">&#8211; Haber popup\u2019lar\u0131<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">&#8211; \u00d6n u\u00e7 \u00e7er\u00e7eveleri<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">\u00d6n\u00fcm\u00fczdeki g\u00fcnlerde bu trendlerin \u00e7o\u011fu daha fazla olacak baz\u0131lar\u0131n\u0131nn yerini daha iyi alternatifler alacak. Arka plan videolar\u0131 gibi baz\u0131lar\u0131 ise de\u011fi\u015fiklilkler yap\u0131larak kullan\u0131lacak.<\/span><\/p>\n<p><strong><span style=\"font-size: 14pt;\">Web Tasar\u0131m\u0131 Trendleri Nereye Gidiyor<\/span><\/strong><\/p>\n<p><span style=\"font-size: 14pt;\">2016 y\u0131l\u0131ndaki web tasar\u0131m\u0131 trendleri iki harfle \u00f6zetlenebilir: U ve X. Buna belki bir de mobil kelimesi eklenebilir. Bu trendler i\u00e7in UX ve mobil platformlara y\u00f6nelik uygulamalar belirleyici olacak. UX ve mobil kavramlar\u0131 son birka\u00e7 y\u0131ld\u0131r zaten \u00e7ok pop\u00fclerdi ama art\u0131k iyice \u00f6ne \u00e7\u0131k\u0131p merkezi bir hal ald\u0131lar ve sade UI\u2019lar\u0131n oldu\u011fu web tasar\u0131mlar\u0131 i\u00e7in ana hedef oldular.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Bu y\u0131l ise mevcut trendler rafa kald\u0131r\u0131lacak gibi duruyor ve olduk\u00e7a standartla\u015facak. Konseptlerin sadece bir fikir olmaktan \u00e7\u0131k\u0131p standart halini al\u0131\u015f\u0131na \u015fahit olaca\u011f\u0131z.<\/span><\/p>\n<p><strong><span style=\"font-size: 14pt;\">Materyal Tasar\u0131m<\/span><\/strong><\/p>\n<p><a href=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/materyal-tasar\u0131m.png\" data-rel=\"penci-gallery-image-content\" rel=\"attachment wp-att-6775\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-6775\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/materyal-tasar\u0131m-300x296.png\" alt=\"materyal tasar\u0131m\" width=\"300\" height=\"296\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/materyal-tasar\u0131m-300x296.png 300w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/materyal-tasar\u0131m.png 600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><span style=\"font-size: 14pt;\"><a href=\"https:\/\/www.google.com\/design\/spec\/material-design\/introduction.html\" target=\"_blank\" rel=\"nofollow\">Materyal Tasar\u0131m<\/a> d\u00fcz tasar\u0131ma bir alternatiftir. Unsurlar\u0131 imaj editleme yaz\u0131l\u0131mlar\u0131nda bulunan katmanlar konseptini kullanarak birbirinden ay\u0131ran bir dizi Google tasar\u0131m standard\u0131d\u0131r. Unsurlar\u0131 ihtiyaca g\u00f6re birle\u015ftirip ay\u0131rabilir. B\u00fcnyesinde normalde elle olu\u015fturulmas\u0131 gereken animasyonlar bile vard\u0131r.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Varsay\u0131mlara dayal\u0131 \u00e7al\u0131\u015fmalar\u0131 ortadan kald\u0131ran spesifik bir dizi ilkenin oldu\u011fu bir tasar\u0131m dilidir. Ortaya \u00e7\u0131kan sonu\u00e7lar genellikle birbirine benzer. Bu standartlar da Google taraf\u0131ndan belirlendi\u011fi i\u00e7in \u00e7ok geni\u015f bir deste\u011fe sahiptir.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Tabii kat\u0131 ilkelere ba\u011fl\u0131 kalman\u0131n yarat\u0131c\u0131l\u0131\u011fa ket vurdu\u011fu da \u00f6ne s\u00fcr\u00fclebilir. Bunu ilkeler dahilinde yarat\u0131c\u0131l\u0131\u011f\u0131 geli\u015ftiren bir zorluk olarak yorumlamak da m\u00fcmk\u00fcnd\u00fcr.<\/span><\/p>\n<p><strong><span style=\"font-size: 14pt;\">D\u00fcz Tasar\u0131mla Kar\u015f\u0131la\u015ft\u0131rma<\/span><\/strong><\/p>\n<p><a href=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/d\u00fcz-tasar\u0131m.jpg\" data-rel=\"penci-gallery-image-content\" rel=\"attachment wp-att-6772\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-6772\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/d\u00fcz-tasar\u0131m-300x154.jpg\" alt=\"d\u00fcz tasar\u0131m\" width=\"300\" height=\"154\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/d\u00fcz-tasar\u0131m-300x154.jpg 300w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/d\u00fcz-tasar\u0131m.jpg 600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><span style=\"font-size: 14pt;\">Materyal tasar\u0131m d\u00fcz tasar\u0131mdan farkl\u0131d\u0131r. D\u00fcz tasar\u0131m UI ve grafik unsurlar\u0131 sunmaya y\u00f6nelik bir tasar\u0131m temelidir. G\u00f6rselleri al\u0131p temeline indirger ve yuvarlak k\u00f6\u015feler, tekst\u00fcrler, g\u00f6lgeler vs gibi tasar\u0131mlarla ger\u00e7ek d\u00fcnyay\u0131 taklit etmeye \u00e7al\u0131\u015fan g\u00f6rselleri ortadan kald\u0131r\u0131r. Hikayeye olan ilgiyi da\u011f\u0131tan g\u00f6steri\u015fli \u015feyleri en aza indirip okurlar\u0131 daha az bilgiyle muhatap eder. D\u00fcz renkler, keskin k\u00f6\u015feler ve ince \u00e7izgilerle olu\u015fturulur.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">D\u00fcz tasar\u0131m mobil cihazlara daha uygundur ve daha kolay okunur. Pratiktir ve iyi i\u015fler. H\u0131zl\u0131 y\u00fcklenir. Tek sorun g\u00f6r\u00fcn\u00fc\u015f\u00fcn ikinci planda olmas\u0131d\u0131r. Kullan\u0131labilecek renk miktar\u0131 k\u0131s\u0131tl\u0131d\u0131r ve renkler bazen jenerik g\u00f6z\u00fckebilir.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">D\u00fcz tasar\u0131m\u0131n modas\u0131 asla ge\u00e7meyecektir. Ayr\u0131ca t\u00fcm cihazlara uyumlu ve minimal olmas\u0131 bak\u0131m\u0131ndan materyal tasar\u0131mla da bir arada kullan\u0131labilir. Gerekli olmayan \u015feyleri \u00e7\u0131kart\u0131p gerekli olanlara odaklanma imkan\u0131 sunar. Bu y\u0131lki trend ikisi aras\u0131nda bir denge bulmaya y\u00f6nelik olacak. D\u00fcz tasar\u0131m s\u0131k\u0131c\u0131 olmak zorunda de\u011fil.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Materyal tasar\u0131m 3D\u2019ye y\u00f6neliktir. Stilize g\u00f6rsel tasar\u0131m isteyenler i\u00e7in daha iyi bir se\u00e7enektir. Materyal tasar\u0131m baz\u0131 tasar\u0131m unsurlar\u0131n\u0131 yeniden kullanma f\u0131rsat\u0131 sunar. Tasar\u0131mc\u0131 sadece d\u00fcz renkler kullanmak veya animasyon kullan\u0131m\u0131ndan ka\u00e7\u0131nmak zorunda de\u011fildir.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Materyal tasar\u0131m mobil cihazlara \u00f6ncelik verir \u00e7\u00fcnk\u00fc art\u0131k birincil cihaz olarak ak\u0131ll\u0131 telefonlar\u0131 veya tabletleri kullanan kullan\u0131c\u0131 say\u0131s\u0131 bir hayli artm\u0131\u015ft\u0131r. Web sitelerine modern bir g\u00f6r\u00fcn\u00fcm ve h\u0131z kazand\u0131r\u0131r. Materyal tasar\u0131m\u0131n web tasar\u0131m\u0131nda bir standart halini almas\u0131na haz\u0131r olmak gerekir.<\/span><\/p>\n<p><strong><span style=\"font-size: 14pt;\">Tipografi<\/span><\/strong><\/p>\n<p><a href=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/tipgrafi.png\" data-rel=\"penci-gallery-image-content\" rel=\"attachment wp-att-6779\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-6779\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/tipgrafi-300x189.png\" alt=\"tipgrafi\" width=\"300\" height=\"189\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/tipgrafi-300x189.png 300w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/tipgrafi.png 600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><span style=\"font-size: 14pt;\">Ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerinin artmas\u0131 ve t\u00fcm cihazlara uyumlu tasar\u0131mlar\u0131n ortaya \u00e7\u0131kmas\u0131 tipografinin de geli\u015fmesini sa\u011flad\u0131. Bu y\u00fczden tipografiye de web tasar\u0131m\u0131 trendleri aras\u0131nda yer vermek gerekiyor. Tipografi daha renkli ve g\u00f6z al\u0131c\u0131 olabilir. Bir ifade sunabilir. Tipografiyle ilgili iki mevcut trend serif ve el yaz\u0131s\u0131 kullan\u0131m\u0131. Her ikisinin de kendilerine \u00f6zg\u00fc kullan\u0131mlar\u0131 bulunmakta.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">&#8211; \u00a0<strong>Serif fontlar<\/strong> daha okunakl\u0131d\u0131r. Yak\u0131n zamana kadar d\u00fc\u015f\u00fck ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fckleri ve ekran boyutlar\u0131 nedeniyle pek kullan\u0131lmam\u0131\u015ft\u0131r. Fakat ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fckleri ve boyutlar\u0131 giderek artt\u0131\u011f\u0131ndan, ayr\u0131ca \u015fablon tasar\u0131mlar\u0131 art\u0131k daha temiz oldu\u011fundan ve daha zarif fontlar\u0131n kullan\u0131m\u0131n\u0131 m\u00fcmk\u00fcn k\u0131ld\u0131\u011f\u0131ndan serif fontlar\u0131n daha s\u0131k kullan\u0131lmaya ba\u015flanaca\u011f\u0131 \u00f6ng\u00f6r\u00fclebilir.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">&#8211; <strong>El yaz\u0131s\u0131<\/strong> ise daha ki\u015fiseldir. Do\u011fru uyguland\u0131\u011f\u0131 takdirde daha s\u0131cak g\u00f6r\u00fcn\u00fcr ve web sitelerine \u00f6zg\u00fcnl\u00fck katar. T\u0131pk\u0131 serif fontlarda oldu\u011fu gibi, i\u015fin zor k\u0131sm\u0131 bu stili k\u00fc\u00e7\u00fck ekranlarda okunakl\u0131 \u015fekilde uygulayabilmektir. El yaz\u0131s\u0131 daha ziyade logolarda, sayfa ba\u015fl\u0131klar\u0131nda, g\u00f6nderi ba\u015fl\u0131klar\u0131nda, men\u00fclerde, kartvizitlerde kullan\u0131lacakt\u0131r.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">G\u00f6z \u00f6n\u00fcnde bulundurulmas\u0131 gereken di\u011fer bir husus da i\u00e7erikleri mobil cihazlardan takip eden kullan\u0131c\u0131 say\u0131s\u0131n\u0131n giderek artacak olmas\u0131d\u0131r. Ne yaz\u0131k ki Fire HD 10 gibi alt u\u00e7 cihazlar\u0131n \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fc daha azd\u0131r. Bu durum b\u00fcy\u00fck ekranlarda daha fazla ortaya \u00e7\u0131kar \u00e7\u00fcnk\u00fc daha k\u00fc\u00e7\u00fck muadilleriyle ayn\u0131 \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011fe sahip olduklar\u0131 i\u00e7in bu cihazlar\u0131n piksel yo\u011funlu\u011fu daha d\u00fc\u015f\u00fck olur. Bunun \u00e7\u00f6z\u00fcmlerinden biri tipografiyi ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc baz alarak uygulamakt\u0131r. Yani serif ve el yaz\u0131s\u0131 fontlar y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc ekranlarda iyi g\u00f6r\u00fcnecekken, daha d\u00fc\u015f\u00fck \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc ekranlar i\u00e7in ba\u015fka fontlar kullanmak gerekir. Elbette sunucu h\u0131zlar\u0131n\u0131n ve y\u00fckleme s\u00fcresinin de g\u00f6z \u00f6n\u00fcnde bulundurulmas\u0131 gerekir.<\/span><\/p>\n<p><strong><span style=\"font-size: 14pt;\">Mobil UX<\/span><\/strong><\/p>\n<p><a href=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/mobil-UX-tasar\u0131m\u0131.png\" data-rel=\"penci-gallery-image-content\" rel=\"attachment wp-att-6776\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-6776\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/mobil-UX-tasar\u0131m\u0131-300x202.png\" alt=\"mobil UX tasar\u0131m\u0131\" width=\"300\" height=\"202\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/mobil-UX-tasar\u0131m\u0131-300x202.png 300w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/mobil-UX-tasar\u0131m\u0131-165x110.png 165w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/mobil-UX-tasar\u0131m\u0131.png 600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><span style=\"font-size: 14pt;\">Tipografi mobil ekranlar ve \u00e7\u00f6z\u00fcn\u00fcrl\u00fckleri i\u00e7in daha uygun bir hal almaya ba\u015flayaca\u011f\u0131 gibi, navigasyon, formlar, imajlar ve GPS gibi mobile \u00f6zg\u00fc \u00f6zellikler de tasar\u0131m\u0131n ilk unsurlar\u0131ndan biri haline gelecek. \u0130maj kullan\u0131m\u0131 bir miktar de\u011fi\u015fecek. Bug\u00fcne kadar efektler ve metin i\u00e7in imajlar kullan\u0131lm\u0131\u015fken, art\u0131k efektler i\u00e7in CSS ve s\u00fcsl\u00fc fontlar, metin i\u00e7inse sadece metin kullan\u0131lacak. Bu da sayfa y\u00fckleme s\u00fcrelerini ve sunucu y\u00fck\u00fcn\u00fc azaltacak.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Dokunmatik i\u015flemler daha fazla \u00f6nem kazanmaya ba\u015flad\u0131. Dokunma ve kayd\u0131rma gibi i\u015flemleri ele alan eklentileri kullanan site say\u0131s\u0131 giderek artmakta. Bu da web sitelerini sadece ekran boyutuna de\u011fil, ekran tipine, parmak boyutuna, kullan\u0131lan bast\u0131rma g\u00fcc\u00fc miktar\u0131na vs de ba\u011f\u0131ml\u0131 k\u0131l\u0131yor. Yanl\u0131\u015fl\u0131kla dokunmalar\u0131 engellemek i\u00e7in butonlar\u0131n ve bo\u015f alanlar\u0131n art\u0131k daha fazla olmas\u0131 gerekiyor. Bu noktada mobil \u015fablon konusuna geliyoruz.<\/span><\/p>\n<p><strong><span style=\"font-size: 14pt;\">Mobil \u015eablonlar<\/span><\/strong><\/p>\n<p><span style=\"font-size: 14pt;\">Minimalizm mobil cihazlarda her zaman iyi sonu\u00e7 verir. Baz\u0131 masa\u00fcst\u00fc unsurlar site mobil cihazlarda g\u00f6r\u00fcnt\u00fclendi\u011finde saklanabilir. Di\u011fer unsurlar ise ekran boyutuna ve tipine g\u00f6re ayarlanabilir veya de\u011fi\u015ftirilebilir. Bu da mesaj\u0131n ekrana s\u0131\u011fmas\u0131n\u0131 sa\u011flar. Daha \u00f6nemsiz unsurlar\u0131 kald\u0131r\u0131p tasar\u0131m\u0131 ekrana mesaj\u0131 kaybetmeden yerle\u015ftirmekte daima fayda vard\u0131r.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Slayt g\u00f6sterileri, imajlar, butonlar, unsurlar, men\u00fcler vs mutlaka mobil cihazlar da d\u00fc\u015f\u00fcn\u00fclerek olu\u015fturulmal\u0131. Neyse ki materyal tasar\u0131m sayesinde g\u00f6rsel unsurlar geri geldi de siteler art\u0131k mobil cihazlarda \u00e7ok sade g\u00f6r\u00fcnmekten kurtuldu. Ayr\u0131ca imajlar\u0131 ekran boyutuna g\u00f6re farkl\u0131 boyutlarda ve \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerde i\u015flemek m\u00fcmk\u00fcn. Bu da sayfa y\u00fckleme s\u00fcresini azaltan ve g\u00f6rsellerin mobil cihazlarda da g\u00fczel g\u00f6r\u00fcnmesini sa\u011flayan bir durum.<\/span><\/p>\n<p><strong><span style=\"font-size: 14pt;\">Daha Fazla G\u00f6rsel, Daha Az Metin<\/span><\/strong><\/p>\n<p><a href=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/daha-fazla-g\u00f6rsel.png\" data-rel=\"penci-gallery-image-content\" rel=\"attachment wp-att-6770\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-6770\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/daha-fazla-g\u00f6rsel-300x191.png\" alt=\"daha fazla g\u00f6rsel\" width=\"300\" height=\"191\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/daha-fazla-g\u00f6rsel-300x191.png 300w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/daha-fazla-g\u00f6rsel.png 599w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><span style=\"font-size: 14pt;\">T\u00fcketiciler art\u0131k foto\u011fraf ve videolara daha fazla, metinlere ise daha az bakar oldular. Bu da SEO ve UX aras\u0131nda bir denge yarat\u0131yor. Arama motorlar\u0131 indexleyece\u011fi metinleri tercih ediyor. Bu y\u00fczden daha fazla metin i\u00e7eren i\u00e7erikler alt sayfalarda, g\u00f6rsel bak\u0131m\u0131ndan zengin i\u00e7erikler ise ilk sayfalarda yer al\u0131yor. E\u011fer ana sayfada metin kullan\u0131lmas\u0131 gerekiyorsa, bu metinleri g\u00f6rsellerin alt\u0131nda kullanmakta fayda var. \u00d6nce kullan\u0131c\u0131lar, sonra arama motorlar\u0131 hedeflenmeli.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Web taray\u0131c\u0131lar\u0131 art\u0131k g\u00f6rsel i\u015fleme konusunda \u00e7ok daha h\u0131zl\u0131. Bu da g\u00f6rsellerin art\u0131k eskisine nazaran daha b\u00fcy\u00fck ve daha y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc olabilece\u011fi anlam\u0131na geliyor. Bu y\u0131l i\u00e7erisinde daha y\u00fcksek kalitede g\u00f6rseller ve sanat eserleri g\u00f6rece\u011fimizi \u00f6ng\u00f6rmek m\u00fcmk\u00fcn.<\/span><\/p>\n<p><strong><span style=\"font-size: 14pt;\">Listeleleme<\/span><\/strong><\/p>\n<p><a href=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/kartlar.png\" data-rel=\"penci-gallery-image-content\" rel=\"attachment wp-att-6773\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-6773\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/kartlar-300x217.png\" alt=\"kartlar\" width=\"300\" height=\"217\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/kartlar-300x217.png 300w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/kartlar.png 600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><span style=\"font-size: 14pt;\">2015 y\u0131l\u0131nda \u00e7ok say\u0131da liste tabanl\u0131 tasar\u0131m g\u00f6rd\u00fck. Bu tasar\u0131m\u0131n pop\u00fcler olmas\u0131nda Pinterest\u2019in de b\u00fcy\u00fck katk\u0131s\u0131 var. Listeleme i\u015flevsellik ve interaktiflik katarak bu tasar\u0131m bi\u00e7imini bir \u00fcst seviyeye \u00e7\u0131kart\u0131yor. \u0130mle\u00e7 g\u00f6rsellerin \u00fczerine getirildi\u011finde kartlar\u0131n d\u00f6nmesi, b\u00fcy\u00fcmesi vs sa\u011flanarak daha fazla bilgi sunmak m\u00fcmk\u00fcn. G\u00f6rsellere daha fazla odaklanan ve kullan\u0131labilir bir y\u00f6ntem sunarak i\u00e7eri\u011fin daha kolay g\u00f6r\u00fclmesini sa\u011flayan bir tasar\u0131m unsuru. \u0130\u00e7eri\u011fi minimize etti\u011fi gibi, grid \u015fablonlar\u0131 da olu\u015fturuyor.<\/span><\/p>\n<p><strong><span style=\"font-size: 14pt;\">Dinamik Hikaye Anlat\u0131m\u0131<\/span><\/strong><\/p>\n<p><a href=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/dinamik-hikaye-anlat\u0131m\u0131.png\" data-rel=\"penci-gallery-image-content\" rel=\"attachment wp-att-6771\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-6771\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/dinamik-hikaye-anlat\u0131m\u0131-169x300.png\" alt=\"dinamik hikaye anlat\u0131m\u0131\" width=\"169\" height=\"300\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/dinamik-hikaye-anlat\u0131m\u0131-169x300.png 169w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/dinamik-hikaye-anlat\u0131m\u0131-577x1024.png 577w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/dinamik-hikaye-anlat\u0131m\u0131.png 600w\" sizes=\"(max-width: 169px) 100vw, 169px\" \/><\/a><\/p>\n<p><span style=\"font-size: 14pt;\">Dinamik hikaye anlat\u0131m\u0131 bir hikayenin grafik unsurlarla ve metin deste\u011fi ile anlat\u0131lmas\u0131 anlam\u0131na geliyor. Son y\u0131llar\u0131n en pop\u00fcler web tasar\u0131m\u0131 trendleri aras\u0131nda yer al\u0131yor. Ziyaret\u00e7ileri bir d\u00fc\u015f\u00fcnce s\u00fcrecine ve zaman \u00e7izelgesine y\u00f6nlendiriyor. Bir \u00fcr\u00fcn\u00fcn veya hizmetin faydalar\u0131n\u0131, bir kurulu\u015fun tarih\u00e7esini ya da ziyaret\u00e7ilerin site sahibi ki\u015fi veya kurulu\u015fla ilgili her \u015feyi g\u00f6sterebiliyor. Bu ziyaret\u00e7ilerin ekrana t\u0131klayarak veya ekran\u0131 kayd\u0131rarak kendileri ilerletebilece\u011fi veya otomatik olarak ilerleyen bir video ya da sunum olabilir.<\/span><\/p>\n<p><span style=\"font-size: 14pt;\">Bu tip tasar\u0131m i\u00e7in \u00fcst d\u00fczey bir grafik yetene\u011fi olmas\u0131, tasar\u0131mlar\u0131n do\u011fru g\u00f6z\u00fckmesi i\u00e7in de titizlikle ve beceriyle yap\u0131lmas\u0131 gerekiyor. Bu y\u00fczden mutlaka storyboardlar haz\u0131rlamak, web sitesinin iletmek istedi\u011fi mesaja hakim olmak ve bu mesaj\u0131n nas\u0131l iletilece\u011fini bilmek gerek. \u0130\u00e7erikteki faydal\u0131 \u015feyler ve \u00f6zellikler olabildi\u011fince az ve \u00f6z \u015fekilde aktar\u0131lmal\u0131, grafik ve metin aras\u0131nda mutlaka bir denge yakalanmal\u0131. \u0130kisinden birinin fazla olmas\u0131 odaks\u0131z veya bo\u011fucu bir UX ortaya \u00e7\u0131kabilir.<\/span><\/p>\n<p><strong><span style=\"font-size: 14pt;\">Sosyal Medya Yorumlar\u0131na Daha Fazla A\u011f\u0131rl\u0131k Vermek<\/span><\/strong><\/p>\n<p><a href=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/sosyal-medya-yorumlar\u0131.png\" data-rel=\"penci-gallery-image-content\" rel=\"attachment wp-att-6778\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-6778\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/sosyal-medya-yorumlar\u0131-300x184.png\" alt=\"sosyal medya yorumlar\u0131\" width=\"300\" height=\"184\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/sosyal-medya-yorumlar\u0131-300x184.png 300w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/sosyal-medya-yorumlar\u0131.png 600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><span style=\"font-size: 14pt;\">WordPress\u2019in \u00e7ok iyi bir yorum sistemi var ama art\u0131k okurlar web sitelerinin kendisinden ziyade sosyal medya platformlar\u0131na yorum b\u0131rakmay\u0131 tercih ediyor. Bu y\u00fczden sosyal yorumlar\u0131 yakalamak i\u00e7in WordPress gibi site i\u00e7i yorum sistemlerinden ziyade sosyal medya yorum sistemlerine y\u00f6nelik bir trend s\u00f6z konusu. Bu sayede ziyaret\u00e7iler sosyal medya hesaplar\u0131n\u0131 kullanarak yorum yapabiliyor veya sosyal medyadaki mentionlar toplan\u0131p sitenin sa\u011f taraf\u0131nda yay\u0131nlanabiliyor.<\/span><\/p>\n<p><strong><span style=\"font-size: 14pt;\">\u0130\u00e7eri\u011fe Daha Fazla, Reklamlara Daha Az A\u011f\u0131rl\u0131k Vermek<\/span><\/strong><\/p>\n<p><span style=\"font-size: 14pt;\">Ge\u00e7en y\u0131llar i\u00e7erisinde okurlar yan \u00e7ubuklardaki reklamlar\u0131 daha fazla g\u00f6rmezden gelmeye ba\u015flad\u0131. Ana sayfalar i\u00e7erik ve reklamlar i\u00e7in birer banner olmaktan \u00e7\u0131k\u0131p g\u00fczel g\u00f6rsellerin oldu\u011fu g\u00f6z al\u0131c\u0131 hedef sayfalar halini ald\u0131. Art\u0131k bu sayfalarda metinden ziyade g\u00f6rsel bulunmakta ve reklamlar i\u00e7eri\u011fin i\u00e7ine ta\u015f\u0131nm\u0131\u015f durumda. Dolay\u0131s\u0131yla art\u0131k bu unsurlara daha fazla yer a\u00e7mak i\u00e7in \u00e7ok iyi bir \u015fablon olu\u015fturulmas\u0131 gerekiyor. Bu da bizi bir sonraki ba\u015fl\u0131\u011fa g\u00f6t\u00fcr\u00fcyor.<\/span><\/p>\n<p><strong><span style=\"font-size: 14pt;\">Makale \u015eablonlar\u0131na Daha Fazla A\u011f\u0131rl\u0131k Vermek<\/span><\/strong><\/p>\n<p><a href=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/makale-\u015fablonlar\u0131.png\" data-rel=\"penci-gallery-image-content\" rel=\"attachment wp-att-6774\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-6774\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/makale-\u015fablonlar\u0131-183x300.png\" alt=\"makale \u015fablonlar\u0131\" width=\"183\" height=\"300\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/makale-\u015fablonlar\u0131-183x300.png 183w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/makale-\u015fablonlar\u0131.png 597w\" sizes=\"(max-width: 183px) 100vw, 183px\" \/><\/a><\/p>\n<p><span style=\"font-size: 14pt;\">Ana sayfalar olu\u015fturmay\u0131 sa\u011flayan s\u00fcr\u00fckle ve b\u0131rak eklentileri mevcut ama g\u00f6nderiler i\u00e7in de bir \u015fablon tasar\u0131m\u0131 yap\u0131lmas\u0131 gerekiyor. G\u00f6nderi \u015fablonu tasar\u0131m\u0131n\u0131 m\u00fcmk\u00fcn k\u0131lan sistemler giderek daha pop\u00fcler olacak \u00e7\u00fcnk\u00fc kullan\u0131c\u0131lar bu sistemler sayesinde widget alanlar\u0131n\u0131n ve mod\u00fcllerinin oldu\u011fu \u015fablonlar olu\u015fturarak sitelerinin daha \u015f\u0131k g\u00f6r\u00fcnmesini sa\u011flayabilecek.<\/span><\/p>\n<p><strong><span style=\"font-size: 14pt;\">Tasar\u0131mc\u0131 Ara\u00e7lar\u0131<\/span><\/strong><\/p>\n<p><span style=\"font-size: 14pt;\">Tasar\u0131mc\u0131lar\u0131n web sitesi prototipleri yapmalar\u0131n\u0131 ve \u015fablon tasarlamalar\u0131n\u0131 kolayla\u015ft\u0131racak bir\u00e7ok ilgin\u00e7 ara\u00e7 ya yak\u0131n zamanda \u00e7\u0131kt\u0131 ya da muhtemelen bu y\u0131l i\u00e7erisinde \u00e7\u0131kacak. 2016 y\u0131l\u0131nda pop\u00fcler olmas\u0131 beklenen ara\u00e7lardan baz\u0131lar\u0131 \u015funlar.<\/span><\/p>\n<p><span style=\"text-decoration: underline;\"><span style=\"font-size: 14pt;\">Adobe Project Comet<\/span><\/span><\/p>\n<p><a href=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/adobe-project-comet.png\" data-rel=\"penci-gallery-image-content\" rel=\"attachment wp-att-6769\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-6769\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/adobe-project-comet-300x177.png\" alt=\"adobe project comet\" width=\"300\" height=\"177\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/adobe-project-comet-300x177.png 300w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/adobe-project-comet.png 600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><span style=\"font-size: 14pt;\">UX\u2019i ba\u015f\u0131ndan sonuna kadar tasarlamaya y\u00f6nelik bir uygulama olan Adobe Project Comet bu y\u0131l \u00e7\u0131k\u0131yor. \u0130\u00e7erisinde wireframing, g\u00f6rsel tasar\u0131m, interaksiyon tasar\u0131m\u0131, prototip \u00e7\u0131karma vs i\u00e7in ara\u00e7lar bulunmakta. Uygulama t\u00fcm cihazlar \u00fczerinden incelenebiliyor. Photoshop ve Illustrator ile \u00e7al\u0131\u015f\u0131yor ve kullan\u0131c\u0131lar\u0131n olu\u015fturdu\u011fu eklentiler vas\u0131tas\u0131yla geni\u015fletilebiliyor. Bu geli\u015ftirici arac\u0131n\u0131 takip etmekte fayda var.<\/span><\/p>\n<p><span style=\"text-decoration: underline;\"><span style=\"font-size: 14pt;\">Sketch<\/span><\/span><\/p>\n<p><a href=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/sketch.png\" data-rel=\"penci-gallery-image-content\" rel=\"attachment wp-att-6777\"><img decoding=\"async\" class=\"alignnone size-medium wp-image-6777\" src=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/sketch-300x154.png\" alt=\"sketch\" width=\"300\" height=\"154\" srcset=\"https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/sketch-300x154.png 300w, https:\/\/www.ihs.com.tr\/blog\/wp-content\/uploads\/2016\/02\/sketch.png 600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><span style=\"font-size: 14pt;\">Sketch Mac i\u00e7in geli\u015ftirilen ve bir\u00e7ok ki\u015finin Photoshop yerine kulland\u0131\u011f\u0131 bir uygulama. \u0130yi bir \u00e7al\u0131\u015fma ortam\u0131 var ve \u00f6zellikle web tasar\u0131mc\u0131lar\u0131 ve mobil tasar\u0131mc\u0131lar i\u00e7in geli\u015ftirilmi\u015f. Katman stilleri, metin efektleri, vekt\u00f6r unsurlar\u0131 olu\u015fturmaya yarayan ara\u00e7lar gibi \u00f6zelliklere sahip.<\/span><\/p>\n<p><strong><span style=\"font-size: 14pt;\">Son Yorumlar<\/span><\/strong><\/p>\n<p><span style=\"font-size: 14pt;\">Bunlar 2016 y\u0131l\u0131 i\u00e7erisinde \u00f6ne \u00e7\u0131kaca\u011f\u0131 d\u00fc\u015f\u00fcn\u00fclen web tasar\u0131m\u0131 trendleri aras\u0131ndan se\u00e7tiklerimizdi. Elbette bir trendin pop\u00fcler olmas\u0131 onun en iyi oldu\u011fu anlam\u0131na gelmiyor, fakat bu trendler ihtiya\u00e7 duyulan anlarda el alt\u0131nda bulundurmak i\u00e7in iyi ara\u00e7lar sunabiliyor. Ayr\u0131ca, rakiplerden s\u0131yr\u0131lmak i\u00e7in yeni y\u00f6ntemler bulma s\u00fcreci baz\u0131 trendlerin \u00f6ne \u00e7\u0131kmas\u0131na da neden olabiliyor.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web tasar\u0131m\u0131 trendleri h\u0131zla de\u011fi\u015fiyor. Web siteleri art\u0131k ge\u00e7en senelere k\u0131yasla \u00e7ok daha farkl\u0131 trendleri takip ediyor. Web tasar\u0131mc\u0131lar\u0131n\u0131n mevcut ve gelecekteki&hellip;<\/p>\n","protected":false},"author":3,"featured_media":6782,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,401],"tags":[],"class_list":["post-6764","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\/6764","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=6764"}],"version-history":[{"count":4,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts\/6764\/revisions"}],"predecessor-version":[{"id":6783,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts\/6764\/revisions\/6783"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/media\/6782"}],"wp:attachment":[{"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/media?parent=6764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/categories?post=6764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/tags?post=6764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}