Good Contents Are Everywhere, But Here, We Deliver The Best of The Best.Please Hold on!
Data is Loading...
Your address will show here +12 34 56 78
Blog, Tasarım
Oyunlar artık hayatımızda giderek daha fazla yer alan bir uğraşlar bütünü haline geldi. Bunun nedenlerinden birisi artık herkesin cebinde oyunlara uygun platformların bulunması ve topluluğa giderek – konuya uzak kişilerin de dahil olup – daha fazla kullanıcı akışı bulunması diyebiliriz. Fakat bu duruma asıl sebep son zamanlarda sık duymaya başladığımız gamification (oyunlaştırma) kavramıdır. Bu kavram eğitimden pazarlamaya, yönetimsel süreçlerden deneyimsel aktivitelerinize kadar pek çok alanda, artık sıkıcı ve baskıcı gelen geleneksel yaklaşımlar yerine çok daha etkili bir alternatif sunuyor.

Oyunlaştırma (Gamification) nedir?

Kelimenin kökenini düşünecek olursak “oyun” kavramı ile başlamamız gerekli. Fakat dil filozofu olan Wittgenstein dilin sınırlılığı hakkındaki çalışmalarında oyunun tarif edilemez oluşunu söylemiştir. Bir de dilimizi bu kelime bazında etkilemesi muhtemel İngilizceyi düşünecek olursak elimizde “Play” (Eğlence haricinde bir amaç taşımayan kuralsız davranışlar) ve “Game” kavramları kalmaktadır. Biz “Game” kısmı ile ilgileniyoruz ki yazının devamında “Oyun” denildiğinde akla gelmesi gereken kavram budur. [testimonial_slider autorotate=””] [testimonial name=”Bernard Suits” quote=”Oyun, gereksiz bazı engelleri göze alıp bunları gönüllü olarak aşmaktır. Temel özellikleri; amacı, kuralları olması ve oyuncu bir tavır içermesidir.” id=”t1″] [/testimonial_slider] Oyunlaştırma (Gamification) ise kelime babası olan Gabe Zicherman ve Christopher Cunningham tarafından “Oyundaki düşünce biçiminin ve oyun kurallarının, kullanıcıların ilgisini çekmek ve problem çözmek amacıyla kullanılması” olarak tanımlanmaktadır. Yani iki tanım arasındaki farkı düşünecek olursak, oyun kendisi bir uygulamalar dizisi iken, oyunlaştırma etkileşimi arttırılmak istenen uygulamaya eklenen süreçler bütünüdür. Oyunlaştırma uygulanırken, oyun mekanikleri kullanıldığından dolayı, gerçeklenen uygulama oyunu andırır ve kullanıcıya oyun oynuyor hissiyatı vererek, kullanıcı kısa sürede sisteme entegre olur.

Neden Oyunlaştırma?

Yeni nesil, teknoloji ile ilişkisi arttıkça, geleneksel sistemleri yaratanların düşünsel yapısından da uzaklaşıyor ve günümüz dünyası artık bu yöntemleri içselleştiremiyor. Herhangi bir ögeyi oyunlaştırmak, o ögeye karşı olan algıyı değiştirerek içsel bir tetikleme yaratıyor ve onu daha cazip bir hale getiriyor. [testimonial_slider autorotate=””] [testimonial name=”Daniel H. Pink – Drive” quote=”İş, birinin yapmaya mecbur olduğudur, Oyun ise birinin yapmaya mecbur olmadığıdır.” id=”t1″] [/testimonial_slider] drive-kitap-alinti Tüm bunlardan hareketle, 88.4 Milyar USD 2015 gelirine ulaşan ve 2016’da 95.2 Milyar USD, 2017’de 102.9 Milyar USD gelire ulaşması tahmin edilen bir sektörün, gücünü nereden aldığını anlamış bulunuyoruz.  Newzoo şirketinin 2013 araştırmasına göre dünya üzerinde 1.6 Milyar oyuncu var. Ve insanlar haftanın en az 40 saatini oyun oynamaya harcıyor. Bu süre ise “Bir iPhone Kaç Pomodoro” isimli yazıda belirttiğim gibi bir şeyleri satın alırken ya da onların ücretlerini öderken harcadığımız, çalıştığımız haftalık toplam zamana denk geliyor. Ve insanlar bunu isteyerek yapıyor. Oyunlarsa kişiye boş vakitlerinde bir eğlence, hedef, aşması gereken bir engel sunuyor.

Oyunlaştırma Örnekleri

Piyano merdivenleri “Yürüyen merdivenlere binmek yerine normal merdivenleri kullanın ve kendinizi daha iyi hissedin” gibi sözleri sık sık duyar ya da Pazar gazetelerinde okuruz. Bu tavsiyeye aslında çok az insan kulak verir. Daha çok insanı yürüyen merdivene binmek yerine normal merdivenleri kullanmaya teşvik edebilir miyiz? Sonuçlarına buradan bakın dediler.  [one_whole boxed=”true” centered_text=”true”][milestone symbol_position=”after” color=”Accent-Color” symbol_alignment=”Default” number=”66″ subject=”Daha fazla sayıda insan normal merdivenleri kullanmayı tercih etti.” symbol=”%” number_font_size=”” symbol_font_size=””] [/one_whole]   Dünyanın En Derin Çöp Kutusu Çöpü yere atmak yerine çöp kutusuna atmak o kadar zor olmamalı. Pek çok insan hala bunu yapmayı başaramıyor. Daha fazla insanı çöplerini yere atmak yerine çöp kutusuna atmaya bunu eğlenceli hale getirerek teşvik edebilir miyiz? Sonuçlarına buradan bakın dediler. [one_whole boxed=”true” centered_text=”true”][milestone symbol_position=”after” color=”Accent-Color” symbol_alignment=”Default” number=”132″ subject=”Oranında daha fazla çöp toplandı.” symbol=”%” number_font_size=”” symbol_font_size=””] [/one_whole]   Hız Kamerası Piyangosu Fun Theory Ödülü’nü kazanan fikir. (Kevin Richardson, ABD) Daha fazla insanı hız sınırlarına uymaya nasıl teşvik edebiliriz? Kevin’ın cevapladığı soru buydu. Volkswagen İsveç Ulusal Yol Güvenliği Kurumu ile birlikte bu yenilikçi fikri İsveç, Stockholm’de resmen hayata geçirdi. [one_whole boxed=”true” centered_text=”true”][milestone symbol_position=”after” color=”Accent-Color” symbol_alignment=”Default” number=”22″ subject=”Hız azalması sağlandı.” symbol=”%” number_font_size=”” symbol_font_size=””] [/one_whole]   Bottle Bank Arcade Pek çoğumuz plastik şişeleri ve kutuları iade ediyoruz. Cam şişelerin geri dönüşümünü ise çok az insan sağlıyor. Bunun sebebi belki de plastik ve kutu şişelerde olduğu gibi cam şişe karşılığında para almamamızdır. Camın geri dönüşümünü eğlenceli hale getirerek bu tavrı değiştiremez miyiz? Sadece vicdanınızı rahatlatmaz aynı zamanda “smile” da alırsınız. Sonuçlarına buradan bakın dediler.  [one_whole boxed=”true” centered_text=”true”][milestone symbol_position=”after” color=”Accent-Color” symbol_alignment=”Default” number=”50″ subject=”Daha fazla şişe geri dönüşümü sağlandı.” symbol=”x” number_font_size=”” symbol_font_size=””] [/one_whole]   Swarm Hepimizin bildiği Foursquare tarafından geliştirilen Swarm uygulamasında Mayor’luk, Sticker’lar, Badge gibi ögelerin belirli görevlerden sonra kullanıcıya sunulması, kullanıcıların skor tablosunda üst sıralarda yer almak için arkadaşlarıyla yarışması gibi özellikleriyle içerisinde fazla miktarda gamification barındıran bir uygulama. swarm Dualingo E-öğrenmenin en iyi örneklerinden biri olan Duolingo, oyunlaştırma öğelerini yoğun şekilde kullanan uygulamalardan. Yabancı dil öğrenme eylemini olabilecek en eğlenceli şekilde sunuyor ve her çözdüğünüz sınav ve soru için size puanlar, bonuslar veriyor. duolingo1  

Oyunlaştırma nasıl uygulanıyor?

Bu konuda farklı tasarım adımları bulunsa da Gamification Uzmanı Yu-Kai Chou’nun kişisel sitesinde de Gamification ile ilgili ele aldığı “Octalysis” adında tasarım çerçevesi bazlı “8 Core Drives” bu konuda geniş bir yapı sunuyor. Octalysis-Main-Website-image.001-e1423688569412 Sekizgen şekilde görüldüğü üzere Gamification Tasarım Çerçevesinde ele alınan 8 adımda yer alan Meaning (Anlam), Empowerment (Güçlendirme), Social Influence (Sosyal Etki), Unpredictability (Tahmin edilemezlik),  Avoidance (Kaçınma), Scarcity (Azlık), Ownership (Sahiplik) ve Accomplishment (Başarı) ana başlıkları dahilinde oluşturulmuş insan motivasyonunu esas alan Octalysis Tasarım Çerçevesi bu konuda oldukça kullanışlı. Detayları için belki birazcık araştırma ya da uzmanından yardım alma yollarını deneyebilirsiniz. Görünen o ki gelecekte bu kavramı daha çok duyacağız. Peki ya siz hayatınızı oyunların çemberinde geçirmekten memnun musunuz?  
0

Adobe Muse, Tasarım
[one_whole boxed=”true” centered_text=”true” animation=”Fade In From Bottom” delay=””][icon color=”Accent-Color” size=”regular” image=”fa-video-camera”]  Sizler için Adobe Muse’da neden web fonts kullanmanız gerektiği ve bunu nasıl kullanabileceğiniz hakkında bir video oluşturdum. [/one_whole]   [one_whole boxed=”true” centered_text=”true” animation=”Fade In From Bottom” delay=””]Youtube Kanalıma Abone Olarak İçeriklere Daha Hızlı Ulaşın
[/one_whole] [one_whole] [/one_whole] [one_whole boxed=”true” centered_text=”true” animation=”Fade In From Bottom” delay=””]Youtube Kanalıma Abone Olarak İçeriklere Daha Hızlı Ulaşın
[/one_whole]   [one_whole boxed=”true” centered_text=”true” animation=”Grow In” delay=””][icon color=”Accent-Color” size=”regular” image=”fa-forward”]  Adobe Muse ile ilgili diğer yazımızda, Muse’da basit bir şekilde web sitesi nasıl oluşturulur buna değineceğiz. [/one_whole]
0

Bootstrap, Tasarım
[one_whole boxed=”true” centered_text=”true” animation=”Fade In From Bottom” delay=””][icon color=”Accent-Color” size=”regular” image=”fa-video-camera”] Sizlere site tasarımlarınızda Twitter Bootstrap kullanımını nasıl gerçekleştirebileceğiniz hakkında bir video oluşturdum. Elimden geldiğince sıkıcı bir anlatım olmamasına gayet ettim, umarım öğrettiklerim işinize yarar. [/one_whole] [one_whole boxed=”true” centered_text=”true” animation=”Fade In From Bottom” delay=””]Youtube Kanalıma Abone Olarak İçeriklere Daha Hızlı Ulaşın
[/one_whole] [one_whole animation=”Fade In From Bottom” delay=””] [/one_whole][one_whole boxed=”true” centered_text=”true” animation=”Fade In From Bottom” delay=””]Youtube Kanalıma Abone Olarak İçeriklere Daha Hızlı Ulaşın
[/one_whole]

Bootstrap kullanımı için ana HTML dosyanıza eklemeniz gerekenler

Stylesheet

[one_whole boxed=”true” animation=”Fade In From Bottom” delay=””]<link rel=”stylesheet” href=”DosyaKonumunuz/css/bootstrap.css”> [/one_whole]

jQuery

[one_whole boxed=”true” animation=”Fade In From Bottom” delay=””]<script src=”http://code.jquery.com/jquery-latest.min.js”></script>[/one_whole] [one_whole boxed=”true” centered_text=”true” animation=”Grow In” delay=””][icon color=”Accent-Color” size=”regular” image=”fa-forward”] Twitter Bootstrap ile ilgili diğer yazımda, Bootsrap ile basit bir tema oluşturmaya çalışacağız. [/one_whole]
0

Adobe Muse, Tasarım
[one_whole boxed=”true” centered_text=”true” animation=”Fade In From Bottom” delay=””][icon color=”Accent-Color” size=”regular” image=”fa-video-camera”]  Sizler için Adobe Muse arayüzünde içerik oluşturmanız için sunulmuş olan araçları inceleyen bir video oluşturdum. Umarım Adobe Muse arayüzünü tanımanız açısından yeterli bir kaynak oluşturmuşumdur. [/one_whole]   [one_whole boxed=”true” centered_text=”true” animation=”Fade In From Bottom” delay=””]Youtube Kanalıma Abone Olarak İçeriklere Daha Hızlı Ulaşın  
[/one_whole] [one_whole] [/one_whole] [one_whole boxed=”true” centered_text=”true” animation=”Fade In From Bottom” delay=””]Youtube Kanalıma Abone Olarak İçeriklere Daha Hızlı Ulaşın
[/one_whole]   [one_whole boxed=”true” centered_text=”true” animation=”Grow In” delay=””][icon color=”Accent-Color” size=”regular” image=”fa-forward”]  Adobe Muse ile ilgili diğer yazımızda, Muse’da font ekleme ve typekit kullanımı konusunu işleyeceğiz. [/one_whole]
0

Adobe Muse, Tasarım
[one_whole boxed=”true” centered_text=”true” animation=”Fade In From Bottom” delay=””]Muse tasarımcılar için hiç kod kullanmadan web sitesi oluşturmaları amacıyla Adobe firması tarafından oluşturulmuş bir paket programdır. [/one_whole] [divider line_type=”Full Width Line” custom_height=””] [one_whole animation=”Fade In From Bottom” delay=””]Bu açıdan bakıldığında Muse gerek görünüş, gerek hissiyat anlamında diğer Adobe ürünlerine benzemekte ve tasarımcıların aşina olduğu bir arayüz ile gelmektedir. (Photoshop, Indesign ve Illustrator) [/one_whole] [one_whole animation=”Fade In From Bottom” delay=””]Eğer diğer Adobe ürünlerine aşina iseniz, Muse sizin için web sitesi oluşturma aşamasında iyi bir yardımcınız olacaktır. Diğer yandan, eğer Adone ürünlerine aşina değilseniz (bu durumda size biraz korkutucu gelebilir), Muse belkide sizin kullanımınız için uygun değildir. [/one_whole]

[divider line_type=”Full Width Line” custom_height=””]

[icon color=”Accent-Color” size=”regular” image=”fa-terminal”]  Kod bilmeden kendi web sitenizi yapın!

[one_whole animation=”Fade In From Bottom” delay=””]Muse programında temel anlamda her şey sizin en kısa ve en rahat yoldan bir web sitesi tasarlamanız üzerine kurulmuştur. Modern web tarayıcılarının desteklediği HTML5 ve CSS3 dahil olmak üzere en son web standartlarını bir zıplama rampası olarak kullanan Muse, kusursuz tasarım ve yaratım özgürlüğü ile sizi baş başa bırakarak son derece etkileyici web siteleri ortaya çıkartmanıza olanak sağlıyor. [/one_whole] [one_whole animation=”Fade In From Bottom” delay=””]Düşünün, InDesign programında ya da Photoshop’ta sayfa düzeni oluşturmak kadar rahat web sitesi oluşturmak ve bunu son derece sezgisel ve güçlü bir program ile yapmak, yaratıcılığınızın kat be kat artmasını sağlayacaktır. [/one_whole] [one_whole animation=”Fade In From Bottom” delay=””]Şu konuda da ayrı bir parantez açmak gerekirse Muse programı Dreamveawer gibi devasa bir program değil. Kendi açısından bakıldığında gayet başarılı ve profesyonel anlamda bizlere pratik çözümler sunuyor. Örneğin Adobe Muse ile site yapmaya başladığınızda, program size CSS ve HTML kodlarını göstermiyor ki, bu da Dreamveawer ile mantık anlayışı arasındaki farkı gözler önüne seriyor. Tabiki isterseniz yapmış olduğunuz siteyi daha sonra HTML olarak alabiliyorsunuz fakat kodlar ile oynama gibi bir bölüm programın içerisinde bulunmuyor. Muse size şu konuda da yardımcı olabilir, eğer ASP.NET veya PHP ortamında web sitesi yapmak istiyor fakat tasarım bilginiz zayıf ise, Muse programında tasarımı oluşturduktan sonra dosyalarınızı alarak kodlamaya girişebilirsiniz. [/one_whole] [divider line_type=”Full Width Line” custom_height=””]

[icon color=”Accent-Color” size=”regular” image=”fa-bolt”]  Neden Adobe Muse?

[one_whole animation=”Fade In From Bottom” delay=””][icon color=”Accent-Color” size=”tiny” image=”fa-code”]  Tek satır kod bilmeden ve yazmadan, sadece görsel olarak web sitesi oluşturabilirsiniz. [/one_whole] [one_whole animation=”Fade In From Bottom” delay=””][icon color=”Accent-Color” size=”tiny” image=”fa-keyboard-o”]  Tek tık ile sayfa ekleme, çıkarma gibi fonksiyonları gerçekleştirebilirsiniz. Aynı şeklide kendi içerisinde barındırdığı flowchart biçimli site haritası sayesinde oklar ile sayfaları birbirine bağlayarak otomatik menüler oluşturabilirsiniz. [/one_whole] [one_whole animation=”Fade In From Bottom” delay=””][icon color=”Accent-Color” size=”tiny” image=”fa-desktop”]  Sayfa ölçülerini CSS bilginiz olmadan tamamen kendi değerlerinizle oluşturabilirsiniz. [/one_whole] [one_whole animation=”Fade In From Bottom” delay=””][icon color=”Accent-Color” size=”tiny” image=”fa-clipboard”]  Oluşturduğunuz tasarımları kolayca Photoshop ortamında düzenleyip, tekrar web sitenize entegre edebilirsiniz. [/one_whole] [icon color=”Accent-Color” size=”tiny” image=”fa-thumbs-o-up”]  Pek çok hazır kaynağı içinde barındıran Muse sayesinde Google Maps, YouTube ve Facebook ürünlerini sitenize entegre bir şekilde kullanabilirsiniz. [one_whole animation=”Fade In From Bottom” delay=””][icon color=”Accent-Color” size=”tiny” image=”fa-puzzle-piece”]  Son olarak yapmış olduğunuz tüm siteler tüm web tarayıcılarına uyumlu olacaktır. [/one_whole]   [one_whole boxed=”true” centered_text=”true” animation=”Grow In” delay=””][icon color=”Accent-Color” size=”regular” image=”fa-forward”]   Umarım sizler için yararlı bilgiler vermişimdir. Adobe Muse ile ilgili diğer yazımızda, Muse kullanımda ne gibi araçlara sahip ufak bir giriş yapacağız. [/one_whole]
0

Bootstrap, Tasarım

[one_whole boxed=”true” centered_text=”true” animation=”Fade In From Bottom” delay=””]Twitter Bootstrap içerisinde HTML, CSS ve JavaScript ekipmanlarının pek çoğunu hazır bir şekilde barındıran web ve kullanıcı arayüzü tasarım aracıdır. [/one_whole]

[divider line_type=”Full Width Line” custom_height=””]

[icon color=”Accent-Color” size=”regular” image=”fa-twitter”]  Twitter Bootstrap Nedir?

[one_whole animation=”Fade In From Bottom” delay=””]Bootstrap front-end ekipmanlarını web tabanlı olarak çok kolay ve hızlı bir şekilde geliştirmenizi sağlayan hazır kodlara sahip bir pakettir. İçerisinde kullanıcı arayüzü oluştururken çoğunlukla kullanılan (Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel ve daha fazlası) ekipmanları HTML ve CSS tabanlı olarak geliştiricilere sunar. Ayrıca opsiyonel olarak JavaScript eklentilerde mevcuttur. Bootstrap’ın en büyük avantajlarından birisi de daha az emek sarf ederek kolayca responsive tasarımlar oluşturmanıza olanak sağlamasıdır. [/one_whole] [divider line_type=”Full Width Line” custom_height=””]

[icon color=”Accent-Color” size=”regular” image=”fa-paper-plane”]  Twitter Bootstrap’ın Avantajları

[one_whole animation=”Fade In From Bottom” delay=””]Twitter Bootstrap kullanmanın en büyük avantajı Bootstrap’ın web tabanlı projelerde kullanacağınız pek çok ekipmanı size hazır bir şekilde ve responsive seçeneği ile sunuyor olmasıdır. Ek olarak Bootstrap API’lerini kullanarak, tek bir satır dahi JavaScript kodu yazmadan ileri arayüz bileşenleri oluşturabilirsiniz. (Scrollspy, Typeaheads gibi) [/one_whole] [divider line_type=”Full Width Line” custom_height=””]

[icon color=”Accent-Color” size=”regular” image=”fa-laptop”]  Neden Twitter Bootstrap kullanmalı?

[one_whole animation=”Fade In From Bottom” delay=””][icon color=”Accent-Color” size=”tiny” image=”fa-clock-o”]  Zaman Kazanın – Bootsrap’ın önceden hazırlanmış tasarım şablonlarını kullanarak daha az çaba ve zaman sarf edebilirsiniz, bu da size diğer geliştirme çalışmalarınıza odaklanmanız için zaman kazandıracaktır. [/one_whole] [one_whole animation=”Fade In From Bottom” delay=””][icon color=”Accent-Color” size=”tiny” image=”fa-mobile”]  Responsive Tasarım – Bootstrap kullanarak kolayca responsive tasarımlar oluşturabilirsiniz. Responsive özelliği sayesinde farklı ekran çözünürlüklerine sahip ekranlara uyumlu bir şekilde çalışan bir yapı yaratmış olursunuz. [/one_whole] [one_whole animation=”Fade In From Bottom” delay=””][icon color=”Accent-Color” size=”tiny” image=”fa-forward”]  Devamlılık – Tüm Bootstrap ekipmanları gelişimi süresince tek bir kütüphane altında bulunması dolayısıyla sürekli gelişen, değişen ve yenilenen ekipmanlara sahip bir yapı oluşturmaktadır. Dolayısıyla kullandığınız sistemleri kolayca güncelleyebilir, herhangi bir sorunda kolayca pek çok benzer kullanıcıya ulaşabilirsiniz. [/one_whole] [one_whole animation=”Fade In From Bottom” delay=””][icon color=”Accent-Color” size=”tiny” image=”fa-check-circle-o”]  Kolay Kullanım – Bootstrap’ı kullanmak oldukça kolaydır. Giriş seviyesinde HTML ve CSS bilen birisi iseniz, kolayca Twitter Bootstrap ekipmanlarını kullanarak geliştirmeler yapabilirsiniz. [/one_whole] [one_whole animation=”Fade In From Bottom” delay=””][icon color=”Accent-Color” size=”tiny” image=”fa-desktop”]  Tarayıcı Uyumu – Twitter Bootstrap yeni olması dolayısıyla modern tarayıcıların tümü ile uyumlu bir şekilde çalışmaktadır. Örneğin ; Mozilla Firefox, Google Chrome, Safari, Internet Explorer ve Opera. [/one_whole] [one_whole animation=”Fade In From Bottom” delay=””][icon color=”Accent-Color” size=”tiny” image=”fa-qq”]  Açık Kaynak – En iyi kısım ise Twitter Bootstrap’ın açık kaynak kodlu olması. Tamamen ücretsiz bir şekilde indirerek kullanabilirsiniz. [/one_whole] [one_whole animation=”Fade In From Bottom” delay=””][icon color=”Accent-Color” size=”tiny” image=”fa-bookmark”]  Not : Bazı CSS3 özellikleri dolayısıyla, (örneğin yuvarlak köşeler, gölgeler, bazı geçiş stilleri) Twitter Bootstrap birtakım eski web tarayıcılarını desteklememektedir. Özellikle de Internet Explorer’ı 🙂 (Zaten onu kim destekliyorsa? 🙂 ) [/one_whole] [one_whole boxed=”true” centered_text=”true” animation=”Grow In” delay=””][icon color=”Accent-Color” size=”regular” image=”fa-forward”]   Umarım sizler için yararlı bilgiler vermişimdir. Twitter Bootstrap ile ilgili diğer yazımızda, Bootstrap kullanımda ne gibi araçlara sahip ufak bir giriş yapacağız. [/one_whole]
0