Atom Atom, piyasadaki en iyi HTML editörlerden biridir ve bunun iyi sebepleri vardır. Bu açık kaynak kod düzenleyicisi, onları tamamen ücretsiz tutarken premium araçlar sunmayı amaçlamaktadır. Ayrıca GitHub topluluğu tarafından sağlanan açık kaynaklı paketlerle birlikte gelir. NotePadd++ NotePadd++ Windows tabanlı bilgisayarlar için geliştirilmiş olan açık kaynaklı ve ücretsiz bir Html Editörü olmaktadır. Program basit bir kullanıcı arayüzüne sahiptir. Kullanıcıların hareket halindeyken Windows’a yüklemeden kod yazabilmeleri için bir online sürümü mevcuttur. Sublime Text Sublime Text tıpkı Notepad ++’a benzeyen bir HTML editörüdür. Windows, Linux ve Mac tabanlı sistemlerde bulunan ve platformlar arası destek sağlayan bir metin editörüdür. Freemium kategorisindedir dolayısıyla kullanıcılar Sublime’ı belirli özelliklerini ücretsiz kullanabilir fakat tüm özelliklerini kullanmak isterlerse lisans satın almaları gerekir. Adobe Dreamweaver CC Adobe Dreamweaver CC, açık kaynaklı ve ücretsiz bir HTML editörüdür. Bu çerçeve sayesinde kullanıcılar Windows, Mac ve Linux ile uyumlu cihazları ile HTML, Cssve JavaScript kullanarak projeler oluşturabilirle Visuel Studio Code Bu çok kodlu ücretsiz HTML düzenleme aracı, çok çeşitli özelleştirilebilir özelliklerle kullanıma hazır olarak gelir. Akıllı otomatik tamamlama ve diğer akıllı sözdizimi yanıtları ile gurur duyuyor. Visual Studio Code, çok dilli ve çok platformlu bir programdır. Geliştirme ortamı HTML, Python ve diğer popüler programlama dilleriyle birlikte çalışır. Froala Froala, kullanıcılarına optimize edilmiş performans sunmak için tasarlanan bir ön uç WYSIWYG HTML düzenleyicisidir. Yalnızca mobil cihazlar için optimize edilmiş olan yazılım Android ve iOS cihazlarla uyumludur. Froala zengin bir HTML editörüdür ve çoklu dil desteği sunar CaffeCup CoffeeCup, birçok çeşitli özelliğe ve işleve sahip olan bir başka HTML editörüdür. Kullanıcıların birden çok sayfaya web öğeleri ekleyebildikleri bir bileşen kitaplığı vardır. Her sayfayı manuel olarak güncellemek yerine basitçe belirli kitaplık öğelerini değiştirirler. Ayrıca bir web sitesinin yayınlanmadan ön izlemesini yapma imkanı ve ekranı bölerek yan yana kodlama yapma olanağı sunar İnfografik Nedir? infografik, İngilizce “information” ve “graphic” kelimelerinin birleşiminden oluşur. İnformation Türkçede bilgi, graphic ise grafik anlamına gelir. Kısaca infografiği, bilgi grafiği olarak tanımlayabiliriz. İnfografikler, içerik bağlamında hazırlanan çalışmalardır. Harita, sembol, tablo ve şema gibi çeşitli ögelerin birleşiminden oluşur. Renk, leke dengesi ve tipografi gibi temel grafik unsurları da infografik tasarım aşamasında önemlidir. Birden fazla konuyu ve uygulama alanını bir araya getirerek karşı tarafa daha anlaşılır bir şekilde aktarabilmenize yardımcı olur. Bilgi grafiği, temel olarak giriş, ana mesaj ve sonuç olmak üzere üç parçadan oluşur. Giriş bölümü, okuyucuya infografik hakkında bilgi verir. Ana mesajın verildiği alan görsel ögenin en çok kullanıldığı yerdir. Bu bölümde infografiğin temel amacı ifade edilir. Sonuç kısmında ise okuyucuya verilmek istenen mesajı özetlenir. İnfografik Ne İçin Kullanılır? Yönlendirme ve harekete geçirmek için kullanabileceğiniz infografikler ile ofis sunumlarınızı ikna edici bir hale getirebilirsiniz. Yazılı ve uzun metinleri görsel olarak okuyucuya sunabilme imkânı veren grafiklerle bilgilerin akılda kalıcılığını artırabilirsiniz. Karmaşık ve yoğun verileri sadeleştirebilir, birden fazla konuyu çeşitli grafiklerle karşılaştırabilirsiniz. Bilgileri kısa süre içinde karşı tarafa aktarabilmenizi sağlayan infografikler ile anlatım biçiminizi eğlenceli bir hale getirebilirsiniz. Sözel ve görsel öğelerin kesişim noktasında yer alan görsellerle tek başına bir metinin verebileceği bilgiyi daha ayrıntılı sunabilirsiniz. Tarihi Tarih öncesindeki insanlar ilk bilgi grafiklerini mağara resimlerinde ve haritalarda oluşturdular. Harita yapımı yazı bulunmazdan binlerce yıl önce M.Ö 7500 yıllarında Çatalhöyük’te başladı. Daha sonraları büyükbaş hayvan ve stokları kayıt altına almak için kullanıldı. Mezo Amerikan yerlileri geçmişteki yolculukları tasvir etmek için kullandılar. Okunamayan hikâye ve anıların anlatımı için açıklayıcı ve destekleyici unsur oldular. 1626 yılında Christopher Scheiner’in yayınladığı güneşi incelediği astrolojik araştırma kitabı Rosa Ursina sive Sol’da çeşitli grafikleri kullanmıştır. Güneşin zaman içindeki dönüş rotasını açıklamak için resim serilerini(güneş izlerini takip ederek) kullanmıştır. Ücretsiz İnfografik Hazırlanabilecek Siteler  Canva: Ücretsiz infografik siteleri arasında yer alan Canva, infografiklerinizi dakikalar içinde hazırlayabilme imkânı sunar. İçerisinde pek çok şablon bulunduran platform, sahip olduğu binlerce illüstrasyon ile açık ve kolay hatırlanabilir görseller oluşturabilmenize yardımcı olur.  Venngage: Birçok konuya özel olarak tasarlanan ücretsiz infografik şablonları ile tasarım işlemlerinizi kolaylaştıran Venngage, Türkçe bir arayüze sahiptir. Bu platform ile 3 basit tema üzerinden çeşitli grafikler tasarlayabilirsiniz.  Piktochart: Online infografik hazırlama siteleri arasında yer alan Piktochart, özel araçlarıyla birbirinden renkli görseller tasarlayabilme imkânı sunar. Ayrıca pek çok şablona sahip olan platform, birkaç adımda çeşitli grafikler hazırlayıp indirebilme olanağı tanır. Piktochart’ın “İnfografik nasıl yapılır?” bölümüne göz atarak haritalama ve benzeri görsel araçları daha iyi kullanabilirsiniz. 5 Adımda Nasıl İnfografik Yapılır? İyi infografik oluşturmak için tasarımcı olmanız gerekiyor, değil mi? YANLIŞ! Herkes bir infografik oluşturabilir. Tek ihtiyacınız olan bir fikir, biraz veri ve doğru infografik tasarım araçları. Bu infografik tasarım kılavuzu, beyin fırtınası yapmak ve bir infografik oluşturmak için 5 adımda size yol gösterir: 1. İnfografiğinizin hedeflerini özetleyin. 2. İnfografiğiniz için veri toplayın. 3. İnfografiğiniz için verileri görselleştirin. 4. Bir infografik şablonu kullanarak infografiğinizi düzenleyin. 5. İnfografik tasarımınıza stil ekleyin. Bu 5 adımı takip ederek çok kolay ve doğru şekilde infografik oluşturabilirsiniz. Wireframe Wireframe, bir projenin kurgusu, ürün ve hizmetin son kullanıcıyla sunulması planlanan özellikleri hakkında müşteriye ve geliştirici ekibe fikir edinme imkanı sunan, tasarım ekibinin ise bilgi hiyerarşisini tanımlamalarını ve planlamalarını sağlayan bir ön hazırlık uygulaması, tasarım çözümlemesi ve bilgi mimarisi eskizidir. Geçmişi 1970’lere kadar uzanan wireframe’e Türkçe karşılık olarak web sitesi şeması yakıştırılsa da, sınırlandırma olmaksızın web ve mobil uygulamalar başta olmak üzere kullanıcı arayüzüne sahip tüm ürünler için kullanılması mümkün. Bu nedenle, şema tasarımı gibi bir genel ifadenin daha doğru olacağını düşünüyorum. Wireframe Neden Önemli? 1. En doğru tasarım akışını bulmanızı sağlar. 2. Daha doğru iletişim kurmanızı sağlar. 3. Fikirlerinizi hızlıca test etmenizi sağlar. 4. Zamandan ve efordan tasarruf etmenizi sağlar. Low-fidelity Kaba bir taslak veya hızlı bir mock-up’a benzeyen, düşük detaylara sahiptirler. Bu tür wireframe’ler takım içerisinde soyut fikirlerin netleştirilmesi ve yeni fikirlerin sürece dahil edilebilmesi amacıyla basit grafik elemanlarla (kareler, etiketler, lorem ipsum metinler gibi) tasarlanırlar. Bağımlı kalma zorunluluğu düşüktür, yani süreç içerisinde wireframe elemanları sıklıkla değişikliğe uğrar. High-fidelity High-fidelity wireframe’ler dokümantasyon amacıyla kullanılırlar ve son ürüne (web veya mobil uygulama, web sayfası vb.) en yakın görüntüyü yansıtırlar. Bağımlı kalma zorunluluğu yüksektir. Bu tür wireframe’lerin üretimi ürün detayına bağlı olarak oldukça zaman alır. Wireframe Elemanları Bir web sitesinin iskelet (skeleton) planı üç bileşene ayrılabilir: • Bilgi tasarımı (information design), • Navigasyon tasarımı (navigation design), • Arayüz tasarımı (interface design). En İyi WireFrame Araçları Wireframe süreci eskiz (sketch) aşamasından sonra ve mockup aşamasından önce gelir ve eskizlerin daha anlaşılır şekilde ifade edilebilmesini, notlar ve akış çizgileri ile sıralanabilmesini sağlar. Bu işlem yine el çizimi ile yapılabileceği gibi MockPlus, UXpin, Whimsical ve Balsamiq gibi uygulamalarla da yürütülebilir. • UXPin, The Guide to Wireframing (e-book), @uxpin • The Definitive Guide: How To Create Your First Wireframe • Website wireframe, @Wikipedia • Concerning Fidelity in Design, @uxbooth • UX/UI For The Modern Web Developer • Smart UX: High¬-Fidelity Wireframes • The UK government’s design principles • Universal Principles Of User Experience Design www.schemecolor.com paletton.com , colorhunt.co Tipgrafi nedir sorusunun yanıtını artık biliyorsunuz. Satır boşlukları, harf boşlukları gibi kelimelerin her birinin bir terimi var ve şimdi bunları inceleyelim. Bu terimleri ve önemlerini bilmeniz tipografi tasarımı aşamasında faydalı olur. Tipografi terimlerini inceleyim; Leading: Satırlar arasındaki boşluğa verilen isimdir. Leading’in tasarımdaki önemi yazıların çok karışık durmasını önler ve okuyucunun daha rahat bir okuma yapmasını sağlar. Yukarıdaki görselde leading’in tanımlandığı yeri görebilirsiniz. Espas: Kelimeler ve paragraflar arasındaki boşluktur. Kelimelerin birbirine çok yakın olması okunamayan, net olmayan bir yazı olmasına sebep olur. İSTE ÖRKNEKLERİ: https://alistapart.com/ http://madeby.basheertome.com/ http://kurppahosk.com/ https://mailchimp.com/2012/ AnaSayfa İletişim Bilgileri …………………………………………. …………………………………………. …………………………………………. …………………………………………. Okulumuz Kadromuz Galeri İletişim