{"id":8749,"date":"2016-10-19T13:13:03","date_gmt":"2016-10-19T11:13:03","guid":{"rendered":"https:\/\/ihs.com.tr\/blog\/?p=8749"},"modified":"2020-03-31T09:13:05","modified_gmt":"2020-03-31T07:13:05","slug":"13-material-design-tavsiyesi","status":"publish","type":"post","link":"https:\/\/www.ihs.com.tr\/blog\/13-material-design-tavsiyesi\/","title":{"rendered":"13 Material Design Tavsiyesi"},"content":{"rendered":"

Google, 2014 y\u0131l\u0131nda kendi tasar\u0131m dili olan Material Design<\/strong>‘\u0131 piyasaya s\u00fcrece\u011fini duyurdu. Bu \u00fcr\u00fcn ile birlikte Google’\u0131n as\u0131l hedefi, Android cihazlar\u0131n uygulama tasar\u0131mlar\u0131n\u0131 ele almakt\u0131. Ger\u00e7ek \u015fu ki, flat design daha k\u00fc\u00e7\u00fck ekranlar i\u00e7in \u00e7ok da uygun de\u011fildir. \u00c7\u00fcnk\u00fc flat design k\u00fc\u00e7\u00fck ekranlarda, mobil kullan\u0131c\u0131lar\u0131n yeteneklerini sergilemelerine olanak tan\u0131yan a\u00e7\u0131k bir \u00e7al\u0131\u015fma alan\u0131ndan yoksunmu\u015f gibi bir tasar\u0131m hissi veriyor.<\/span><\/p>\n

Google’\u0131n tasar\u0131m genel m\u00fcd\u00fcr yard\u0131mc\u0131s\u0131 Matias Duarte’nin konuyla ilgili a\u00e7\u0131klamalar\u0131 \u015fu \u015fekilde:<\/span><\/p>\n

\u201cGer\u00e7ek ka\u011f\u0131ttan farkl\u0131 olarak kulland\u0131\u011f\u0131m\u0131z dijital materyallerimiz, geli\u015febilir ve yeniden d\u00fczenlenebilir. Bu materyallerimizin fiziksel y\u00fczeyleri ve kenarlar\u0131 var. Buna ek olarak, mevcut olan g\u00f6lgeler, dokundu\u011funuz zaman neler olaca\u011f\u0131n\u0131 anlaman\u0131z\u0131 sa\u011fl\u0131yor.\u201d<\/em><\/span><\/p>\n

Yani material design’in temeli, tasar\u0131m \u00f6\u011felerinin dokunmatik bir \u015fekilde g\u00f6r\u00fcnmesidir.<\/span><\/p>\n

Bu yeni tasar\u0131m dilini ve bu dilin y\u00f6nergelerini piyasaya sunarak Google, Android uygulama kullan\u0131c\u0131lar\u0131n\u0131n UX sorunlar\u0131n\u0131 ve kar\u0131\u015f\u0131kl\u0131klar\u0131n\u0131 \u00e7\u00f6zmeyi umuyordu. Fakat 2 y\u0131l sonra, Google’\u0131n tasar\u0131m dili mobil uygulamalarla s\u0131n\u0131rl\u0131 kalmad\u0131 ve art\u0131k bu dil d\u00fczenli olarak web tasar\u0131mlar\u0131nda da kullan\u0131lmaya ba\u015fland\u0131.<\/span><\/p>\n

13 Material Design Tavsiyesi<\/strong><\/span><\/p>\n

Material design\u0131n yarat\u0131c\u0131s\u0131 olarak Google’\u0131n kendi \u00f6zellikleri, muhtemelen mevcut olan material design \u00f6rneklerinin en iyisidir. Fakat bunun d\u0131\u015f\u0131nda konuyla ili\u015fkili s\u00fcrpriz say\u0131da ilham verici ba\u015fka web siteleri<\/a> de mevcut. \u0130\u015fte bu web sitelerinin aras\u0131ndan sizin i\u00e7in se\u00e7ti\u011fimiz birka\u00e7 tanesi:<\/span><\/p>\n

    \n
  1. Behance<\/strong><\/span><\/li>\n<\/ol>\n

    \"Behance\"<\/p>\n

    Behance, dan\u0131\u015fabilece\u011finiz say\u0131s\u0131z pano \u00f6rnekleri ile ilham kayna\u011f\u0131 olan harika bir web sitesi \u00f6rne\u011fidir. Behance ayr\u0131ca, direkt olarak dikkati toplamak i\u00e7in bulunan g\u00f6lgeli arkaplanlar\u0131 ve t\u0131klanabilir eylemler i\u00e7in bulunan net g\u00f6stergeleri ile, material designdan da faydalanarak harika bir se\u00e7enek haline geliyor.<\/span><\/p>\n

      \n
    1. CodePen<\/strong><\/span><\/li>\n<\/ol>\n

      \"CodePen\"<\/p>\n

      “Webin \u00f6n taraf\u0131n\u0131n oyun alan\u0131” olarak kendisini tan\u0131mlayan CodePen, material design s\u00f6z konusu oldu\u011fu zaman geli\u015ftiriciler i\u00e7in tam bir hazinedir. CodePen ile material design\u0131n baz\u0131 harika \u00f6rneklerini g\u00f6rebilirsiniz ve bununla birlikte sitenin temelindeki CSS’i, HTML’yi ve tasar\u0131mc\u0131lar\u0131n tasar\u0131m ya da animasyon olu\u015fturmak i\u00e7in kulland\u0131klar\u0131 JavaScript’i g\u00f6rebilirsiniz.<\/span><\/p>\n

        \n
      1. Dribble<\/strong><\/span><\/li>\n<\/ol>\n

        \"Dribble\"<\/p>\n

        E\u011fer konuya a\u015fina de\u011filseniz, Dribble; tasar\u0131mc\u0131lar, geli\u015ftiriciler, sanat\u00e7\u0131lar ve di\u011fer g\u00f6rsel yarat\u0131c\u0131 \u015fah\u0131slar i\u00e7in olu\u015fturulmu\u015f bir sosyal a\u011fd\u0131r. Bu sitede “material design” i\u00e7in bir ara\u015ft\u0131rma yapt\u0131\u011f\u0131n\u0131zda, material design’\u0131n hem web hem de uygulama tasar\u0131m\u0131 konusunda ger\u00e7ekten ne kadar yayg\u0131n oldu\u011funu g\u00f6rebilirsiniz. Bir web tasar\u0131m\u0131 ile ilgili olan, bir icon kadar basit \u015feyleri bile Dribble \u00fczerinde bulabilirsiniz.<\/span><\/p>\n

          \n
        1. Google Design\u2019\u0131n Material Design \u00d6d\u00fclleri<\/strong><\/span><\/li>\n<\/ol>\n

          \"Google-Design-Awards\"<\/p>\n

          Google’\u0131n Material Design’\u0131 duyurmas\u0131ndan bir y\u0131l sonra, s\u0131n\u0131f\u0131n\u0131n en iyi alt\u0131 uygulamas\u0131 Google taraf\u0131ndan Material Design \u00d6d\u00fcllerinde onurland\u0131r\u0131ld\u0131. \u00d6d\u00fclleri kazananlar\u0131 g\u00f6rd\u00fc\u011f\u00fcn\u00fcz zaman siz de muhtemelen hak vereceksiniz. E\u011fer hak vermezseniz ya da \u015fu anda aktif olarak bu uygulamalar\u0131 kullanm\u0131yorsan\u0131z, \u015fiddetle bu listeye bir g\u00f6z atman\u0131z\u0131 \u00f6neriyoruz. E\u011fer Google bir uygulamay\u0131 yenilik\u00e7i olarak adland\u0131r\u0131yor ise bu uygulama kesinlikle g\u00f6z atman\u0131za de\u011fecektir.<\/span><\/p>\n

          \u0130\u015fte 2015\u2019in kazananlar\u0131:<\/span><\/p>\n

          [efsflexvideo type=”youtube” url=”https:\/\/www.youtube.com\/watch?v=Xtu7ZOQScrI” allowfullscreen=”yes” widescreen=”yes” width=”420″ height=”315″\/]<\/p>\n

            \n
          1. Made with Material<\/strong><\/span><\/li>\n<\/ol>\n

            \"Made-with-Material\"<\/p>\n

            Kas\u0131m 2014’ten beri var olan bu web sitesi, material design i\u00e7in harika bir ilham kayna\u011f\u0131 olarak hizmet vermektedir. Site esasen genel olarak web sitelerinin ve material design tekniklerini kullanan mobil uygulamalar\u0131n ekran g\u00f6r\u00fcnt\u00fclerini y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc olarak sergiliyor. Bu ilhan verici \u00f6rnekler aras\u0131nda kaybolmak son derece m\u00fcmk\u00fcn, bu y\u00fczden kenar \u00e7ubu\u011funun sa\u011f \u00fcst k\u0131sm\u0131ndaki yer alan, geli\u015ftiriciler i\u00e7in olu\u015fturulmu\u015f materyal tavsiyelerini kontrol etmeyi unutmamal\u0131s\u0131n\u0131z. Bu ad\u0131mlar\u0131 do\u011fru \u015fekilde takip etmeniz sizin i\u00e7in son derece yararl\u0131 olacakt\u0131r.<\/span><\/p>\n

              \n
            1. Material Design Blogu<\/strong><\/span><\/li>\n<\/ol>\n

              \"Material-Design-Blog\"<\/p>\n

              Bu blog, ilginizi \u00e7ekebilecek t\u00fcm ara\u00e7lar\u0131 ve konular\u0131 kapsad\u0131\u011f\u0131 i\u00e7in bizim favori sitelerimizden bir tanesidir. Fakat blog sadece bununla kalm\u0131yor, ayn\u0131 zamanda tasar\u0131m tekniklerini b\u00fcnyesinde bulundurarak harika bir i\u015f \u00e7\u0131kar\u0131yor. E\u011fer hen\u00fcz sitenin animasyonlar\u0131n\u0131 inceleme \u015fans\u0131 bulamad\u0131ysan\u0131z, ilk f\u0131rsatta siteyi ziyaret edin ve sitenin blo\u011funda yer alan herhangi bir g\u00f6nderiyi t\u0131klay\u0131p inceleyin.<\/span><\/p>\n

                \n
              1. MaterialUp<\/strong><\/span><\/li>\n<\/ol>\n

                \"MaterialUp\"<\/p>\n

                Uplabs ailesinin web sitelerinden biri olan MaterialUp, yaln\u0131zca material design ile ili\u015fkili olan web site \u00f6rnekleri, mobil uygulama ekran g\u00f6r\u00fcnt\u00fcleri, ara\u00e7lar, ipu\u00e7lar\u0131 gibi konulara odaklan\u0131r. \u015eu anda akl\u0131n\u0131zda herhangi bir \u015fey olmasa bile MaterialUp’\u0131n web sitesinin tasar\u0131m\u0131na bakabilirsiniz. Sitenin d\u00fczeni ve g\u00f6r\u00fcn\u00fcm\u00fc Google Drive’\u0131 an\u0131msat\u0131yor de\u011fil mi? E\u011fer g\u00fcvenebilece\u011finiz bir kaynak ar\u0131yorsan\u0131z, ilgili tasar\u0131m ilkelerini kendisi y\u00fcr\u00fcten bir web sitesinden daha iyi bir se\u00e7enek olabilir mi?<\/span><\/p>\n

                  \n
                1. Pinterest<\/strong><\/span><\/li>\n<\/ol>\n

                  \"Pinterest\"<\/p>\n

                  E\u011fer tasar\u0131m konusunda ilham vermesi gereken bir resim koleksiyonu sitesi \u00f6d\u00fcllendirilecek olsayd\u0131, muhtemelen bu onuru Pinterest ve Behance birlikte payla\u015f\u0131rd\u0131. “Material design” konusunda yap\u0131lacak h\u0131zl\u0131 bir ara\u015ft\u0131rma ile web sitelerinin g\u00f6r\u00fcnt\u00fclerine ve videolar\u0131na an\u0131nda eri\u015fim sa\u011flayabilirsiniz.<\/span><\/p>\n

                    \n
                  1. Reddit<\/strong><\/span><\/li>\n<\/ol>\n

                    \"Reddit\"<\/p>\n

                    Reddit muhtemelen tasar\u0131m konusunda ilham ararken g\u00f6z atmay\u0131 d\u00fc\u015f\u00fcnece\u011finiz sitelerden bir tanesi de\u011fildi. Buradaki g\u00f6nderilerin a\u015fa\u011f\u0131 yukar\u0131 yar\u0131s\u0131, insanlar\u0131n material design\u0131 geli\u015ftirmek i\u00e7in yapt\u0131klar\u0131 ile ilgilidir. Di\u011fer yar\u0131s\u0131 da geri bildirim almay\u0131 hedefleyen \u00f6zg\u00fcn tasar\u0131m \u00f6nerileri ilgilidir. E\u011fer material design ile ciddi \u015fekilde ilgileniyorsan\u0131z, buras\u0131 di\u011fer tasar\u0131mlar\u0131 g\u00f6zden ge\u00e7irmek ve sizinle ayn\u0131 d\u00fc\u015f\u00fcnceler i\u00e7in orada bulunan di\u011fer tasar\u0131mc\u0131lar ile tart\u0131\u015fmak i\u00e7in harika bir yer.<\/span><\/p>\n

                      \n
                    1. Tumblr \u2013 Material Design<\/strong><\/span><\/li>\n<\/ol>\n

                      \"MateSign\"<\/p>\n

                      Android uygulamalar\u0131 olsun, iOS uygulamalar\u0131 olsun, web sitelerini ya da herhangi bir \u015feyi tasarlamak olsun e\u011fer material design ile \u00e7al\u0131\u015fmak konusunda bilgiler \u00f6\u011frenmek istiyorsan\u0131z, bu site g\u00f6z atman\u0131za de\u011fecek bir kaynakt\u0131r. Bu siteye bir g\u00f6z at\u0131n ve bir sonraki projeniz i\u00e7in size ilham verebilecek her t\u00fcrden i\u00e7erik \u00f6rne\u011fini bulun.<\/span><\/p>\n

                        \n
                      1. Tumblr \u2013 Material Patterns<\/strong><\/span><\/li>\n<\/ol>\n

                        \"Material-Patterns\"<\/p>\n

                        Tumblr’\u0131n bir ba\u015fka ilham verici kayna\u011f\u0131 olan Material Patterns, g\u00f6rmeye al\u0131\u015ft\u0131\u011f\u0131m\u0131z kaynaklardan \u00e7ok daha fazla \u00e7e\u015fitlilik g\u00f6steriyor. Material Patterns, seyahat rezervasyonu uygulamas\u0131ndan m\u00fczik playerlara, sosyal medya sayfalar\u0131ndan harita uygulamalar\u0131na kadar merakl\u0131 olabilece\u011finiz her t\u00fcrl\u00fc konu i\u00e7in m\u00fckemmel bir kaynakt\u0131r. Ayr\u0131ca bu sitede \u00e7ok fazla renk, fantastik animasyonlar ve harika bir i\u00e7erik \u00e7e\u015fitlili\u011fi de mevcut.<\/span><\/p>\n

                          \n
                        1. Material Palette (bonus kaynak)<\/strong><\/span><\/li>\n<\/ol>\n

                          \"Material-Palette\"<\/p>\n

                          Material Design s\u00f6z konusu oldu\u011funda Material Palette’ye bir ilham kayna\u011f\u0131 diyecek kadar ileri gidemeyiz. Fakat bu kaynak material design\u0131n\u0131z\u0131n ihtiyac\u0131 olan parlak renk paletini bulabilece\u011finiz harika bir kaynakt\u0131r. Bu kaynak ile herhangi iki rengi se\u00e7ebilirsiniz ve daha sonra material design\u0131n en iyi uygulamalar\u0131na ba\u011fl\u0131 olarak web siteniz i\u00e7in yeni bir renk paleti olu\u015fturabilirsiniz.<\/span><\/p>\n

                            \n
                          1. Google\u2019s Material Design Kaynaklar\u0131 (bonus kaynak)<\/strong><\/span><\/li>\n<\/ol>\n

                            \"Google-Resource\"<\/p>\n

                            T\u00fcm material design ihtiya\u00e7lar\u0131n\u0131z\u0131 kar\u015f\u0131layabilecek ba\u015fka bir bonus kayna\u011f\u0131m\u0131z da Google Design. \u015e\u00fcphesiz ki Google Design web sitesi harika bir material design \u00f6rne\u011fidir. Bu kayna\u011f\u0131n en \u00f6nemli \u00f6zelli\u011fi, t\u00fcm Google kaynaklar\u0131n\u0131n Google tasar\u0131mc\u0131lar\u0131na ve geli\u015ftiricelerine, web sitelerinde ve uygulamalar\u0131nda harika material design\u0131 olu\u015fturmalar\u0131 i\u00e7in yard\u0131mc\u0131 olmas\u0131 ve destek sa\u011flamas\u0131d\u0131r.<\/span><\/p>\n

                            Sonu\u00e7<\/strong><\/span><\/p>\n

                            Google 2014 y\u0131l\u0131nda Material Design dilini duyurdu, kendi misyonlar\u0131 gere\u011fi her zaman son kullan\u0131c\u0131 \u00f6n planda tutuldu. Uygulama (daha sonradan web) tasar\u0131m\u0131 nas\u0131l geli\u015ftirilirse navigasyon ve UX sezgisel bir hal al\u0131rd\u0131? Google i\u00e7in \u00e7\u00f6z\u00fcm son derece basitti: ge\u00e7mi\u015fte yapt\u0131klar\u0131n\u0131 unutma ve \u00fczerine g\u00fcncel hayattaki kaliteyi ekle.<\/span><\/p>\n

                            Yeni bir \u00e7al\u0131\u015fmaya ba\u015flamaya haz\u0131r oldu\u011funuz zaman, Google’\u0131n esaslar\u0131na ve teknik \u00f6zelliklerine biraz zaman ay\u0131r\u0131n. Bunu yapt\u0131\u011f\u0131n\u0131z zaman \u00e7al\u0131\u015fmak i\u00e7in sa\u011flam bir temeleniz olacakt\u0131r. Bunun ard\u0131ndan s\u0131ra tasar\u0131m\u0131n\u0131za geldi\u011finde, yukar\u0131daki material design kaynaklar\u0131n\u0131 kullanabilirsiniz. B\u00f6ylelikle tasar\u0131m s\u00fcreciniz i\u00e7in ilham alm\u0131\u015f olursunuz ve kendi material design\u0131n\u0131z\u0131 benzersiz bir y\u00f6ne \u00e7evirmi\u015f olursunuz.<\/span><\/p>\n

                            Sizce material design kal\u0131c\u0131 m\u0131 olacak, yoksa sadece ge\u00e7ici bir heves mi? L\u00fctfen d\u00fc\u015f\u00fcncelerinizi a\u015fa\u011f\u0131daki yorum b\u00f6l\u00fcm\u00fcnde bizimle payla\u015f\u0131n.<\/strong><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

                            Google, 2014 y\u0131l\u0131nda kendi tasar\u0131m dili olan Material Design‘\u0131 piyasaya s\u00fcrece\u011fini duyurdu. Bu \u00fcr\u00fcn ile birlikte Google’\u0131n as\u0131l hedefi, Android cihazlar\u0131n uygulama…<\/p>\n","protected":false},"author":3,"featured_media":8763,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,401],"tags":[],"class_list":["post-8749","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\/8749","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=8749"}],"version-history":[{"count":2,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts\/8749\/revisions"}],"predecessor-version":[{"id":13082,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/posts\/8749\/revisions\/13082"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/media\/8763"}],"wp:attachment":[{"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/media?parent=8749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/categories?post=8749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ihs.com.tr\/blog\/wp-json\/wp\/v2\/tags?post=8749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}