Bu makalede Canva Nedir? Nasıl Kullanılır? sorusuna detaylı biçimde yanıt sunacağım. Canva, görsel içerik oluşturma sürecini kolaylaştıran bir çevrimiçi grafik tasarım aracıdır. Hem profesyonel tasarımcılar hem de tasarıma yeni başlayanlar için kullanımı kolay bir platform sunar. Canva’nın sunduğu geniş seçeneklerle afişler, sunumlar, sosyal medya grafikleri, infografikler, broşürler ve daha pek çok tasarım oluşturabilirsiniz. Eğer Canva kullanmak istiyorsanız hemen buradan üye ücretsiz üye olabilirsiniz. 

Canva Nasıl Kullanılır?

İşte Canva’yı kullanmaya başlamak için izlemeniz gereken adımlar:

1. Hesap Oluşturma: Canva’yı kullanmaya başlamak için ilk adım bir hesap oluşturmaktır. Canva’ya web sitesinden veya mobil uygulamalarından birini kullanarak üye olabilirsiniz. E-posta adresinizle kaydolabileceğiniz gibi, Google veya Facebook hesabınızı da kullanabilirsiniz.
2. Tasarım Türünü Seçme: Hesabınıza giriş yaptıktan sonra Canva size farklı tasarım türleri sunacaktır. Örneğin sosyal medya grafikleri, posterler, kartlar, infografikler gibi seçenekler bulunmaktadır. İhtiyaçlarınıza uygun olan tasarım türünü seçin.
3. Şablon Seçme: Tasarım türünü seçtikten sonra Canva size bir dizi şablon sunacaktır. Şablonlar, tasarımlarınızı başlatmanıza yardımcı olacak önceden tasarlanmış düzenlerdir. İlgilendiğiniz bir şablon seçin veya boş bir sayfadan başlayabilirsiniz.
4. Tasarımı Düzenleme: Seçtiğiniz şablon veya boş sayfa üzerinde tasarımınızı düzenlemeye başlayabilirsiniz. Canva size birçok özelliğe sahip araçlar sunar. Metinler ekleyebilir, renkleri değiştirebilir, şekiller ekleyebilir, görseller yükleyebilir, arka planları düzenleyebilir ve daha fazlasını yapabilirsiniz. Sol tarafta yer alan menüden ihtiyaçlarınıza uygun öğeleri seçip tasarımınıza ekleyebilirsiniz.
5. Görsel Öğeler Eklemek: Canva, kullanıcılarına birçok ücretsiz ve ücretli görsel öğe sunar. Örneğin, fotoğraflar, vektör grafikler, simgeler, çizimler ve arka planlar gibi öğeleri kullanabilirsiniz. İlgilendiğiniz görsel öğeleri aramak ve seçmek için “Öğe Ekle” butonuna tıklayın. Ücretsiz ve ücretli öğeler arasından seçim yapabilirsiniz.

Canva Nedir? Nasıl Kullanılır? – Tüm Detaylarıyla yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.

Selam dijital alemin vatandaşları. Uzun bir zamandan sonra yeniden elime klavye alarak blog yazısı giriyorum. Kelimelere dans ettirmeyi özlemişim.  Evet bu fazla iddialı oldu ama var bizim de kendi çapımızda bir şeklimiz.    Bu yazımda yapay zeka tabanlı görsel oluşturma platformları olan Midjourney ve Dall.E-2 ile ilgili tecrübelerimden bahsedeceğim ve yaptığım çalışmaları paylaşacağım. Öncelikle bu noktaya nasıl geldiğimizi bir özetleyeyim.

2017 yılından beri çevrimiçi olan bir web sitesi var. Adı WILL ROBOTS TAKE MY JOB?.  Yani  ROBOTLAR İŞİMİ ELİMDEN ALACAK MI?. Bu sitedeki arama alanına mesleğinizi yazdığınızda size mesleğinizin yapay zeka veya robotlar tarafından ele geçirilme olasılığını yüzdelik dilim halinde gösteriyor.  Bu hesaplamayı belirli kriterleri kullanarak yapıyorlar. Bu sitede Grafik Tasarım mesleğine baktığımızda yapay zeka tarafından ele geçirilme olasılığı %4 görünüyor. Çünkü bu mesleği iyi biçimde yapabilmek için özgün olmak, yüksek sosyal algıya ve sanatsal bakış açısına sahip olmak gerekiyor. Siteye göre bu özellikler bir yapay zeka’da bulunamaz.  Çok acı ama bu web sitenin basit hesaplama algoritması yanılıyor.

Son yıllarda özellikle yapay zeka tabanlı görüntü işleme alanında hızlı ilerleme ve etkili sonuçlar gözlemliyoruz.  Google Imagen, Dall.E-2 ve Midjourney platformları, kelime odaklı basit tanımlamalarla harika görseller oluşturuyor. Sadece neyi görmek istediğinizi yazmanız yeterli.  Bu platformlarda çok pratik yaptığınızda ve komut deneyiminizi arttırdığınızda, yani yapay zekanın algı biçimini daha iyi anladığınızda muhteşem tasarımlar oluşturabiliyorsunuz. Yağlı boya tablolardan 3 boyutlu karakterlere, fantastik figürlerden, gerçekçi görüntülere kadar geniş bir yelpazede ve farklı stillerde çıktı elde edebiliyorsunuz. Ek olarak daha fazla insan kullandıkça ve farklı şeyler denedikçe bu platformlar yeni şeyler öğrenerek kendilerini geliştiriyorlar ve her geçen gün daha iyi hale geliyorlar.

Yapay zeka tam olarak ne zaman tasarımcıların yerine geçer bilmiyorum ama, ben bir tasarımcı olarak yapay zekadan faydalanmaya başladım. Çünkü çizerek, tasarlayarak, oluşturarak saatler, günler, haftalar sürecek çalışmaları bu platformlar sayesinde birkaç dakikada tamamlayabiliyorum.  İşte yapay zeka platformlarında oluşturduğum görseller. (Görsellerden sonra bunları nasıl yaptığıma ilişkin bilgileri paylaştığım Youtube videolarım bulunuyor.)

MidJourney Yapay Zeka Çizim Çalışmalarım – AI Art

Dall.E-2 Yapay Zeka Çizim Çalışmalarım – AI Art

 YAPAY ZEKA ÇİZİM İLE İLGİLİ YOUTUBE VİDEOLARIM

YAPAY ZEKA ÇİZİM ÇALIŞMALARIM – AI ART yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.

GOOGLE ANALYTICS SAYFA BULUNAMADI HATASI ÇÖZÜMÜ yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.

background-image: url(images/bg.jpg); background-repeat Arka plan resminin hangi yönlerde döşenerek tekrarlanacağı.

Repeat-x, repeat-y, no-repeat, repeat background-position Arka plan resminin sayfa içinde döşenmeye, nereden başlanacağı. Center center, top center gibi… background-attachment Arkaplan resminin sayfayla birlikte nasıl hareket edeceği. Fixed yaparsak sabitlenir ve sayfa kaysa da resim kaymaz.

EN ÇOK KULLANILAN CSS STİLLERİ yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.

HTML NEDİR?

Web sayfaları oluşturmak için kullanılan standart biçimlendirme dilidir.  HTML, HyperText Markup Language  tanımının kısaltmasıdır. Pek çok blog yazarının ezbere dile getirdiği üzere Türkçe anlamı “köprü metni işaretleme dili” değildir. Doğru çevirisi  yüksek metin işaretleme dili‘dir. Hiper kelimesinin ötesinde” ya da “üzerinde” gibi bir anlamı vardır. Yani hiper metinin standart metinin ötesinde özelliklere sahip olduğunu ifade eder.

HMTL BİR SAYFA NASIL OLUŞTURULUR?

HTML sayfa oluşturmak için  öncelikle Sublime Text yada Notepad++ gibi bir editör gerekmektedir. Eğer editörünüz yoksa windows işletim sisteminde bulunan not defterini (metin belgesi) de kullanabilirsiniz. Temel kodları yazıp kaydettikten sonra metin belgenizin .txt uzantısını .html yapmanız ilk sayfanızı oluşturmanız için yeterli.

WINDOWS 10 DOSYA UZANTILARINI GÖSTERME

Dosyanızın uzantısını değiştirebilmeniz için uzantıları görebiliyor olmanız gerekir. Eğer göremiyorsanız Önce Bilgisayarım ‘ı açın. Sonra sol üstteki sekmelerden Görünüm sekmesine tıklayın. Bu sekmelerin hemen altındaki bölümün sağ tarafında bulunan dosya adı uzantıları seçeneğini işaretleyin. Artık uzantıları görebilirsiniz.

TEMEL HTML YAPISI

Aşağıdaki kodları .html uzantılı dosyanın içine kopyalayarak temel HTML sayfa yapınızı oluşturabilirsiniz.

<!DOCTYPE html>
<html>

<head>

Site Başlığı
</head>

<body>

<h1>Konu Başlığı</h1>
<p>Açıklama yazısı</p>

</body>
</html>

HTML İLE EN BASİT WEBSİTE YAPIMI videosunda anlattığım sitenin kodları ve açıklamaları;

<body style="text-align:center;  background-color:black;  color:#fff;  padding:30px"> :

text-align: stili; yazıların sağa (right), sola (left) yaslanmasını ya da ortalanmasını (center) sağlar.

background-color: Tanımlandığı kapsayıcının arka plan rengini değiştirir. Örneğin body etiketine tanımladığımızda tüm sitenin arka plan rengini değiştirebiliriz. Fakat body içindeki bir  etikete tanımladığımızda sadece o etiketin arka plan rengini değiştirir.

color: Atandığı kapsayıcının içindeki yazıların rengini değiştirir.

padding: Atandığı kapsayıcının içine, tanımlanan piksel(px) ve yön oranında boşluk verir. (padding-top:yukarı, padding-left: sola, padding-right: sağa, padding-bottom: aşağı, padding: her yöne)

—

<img src="serdar.jpg" style="margin-top:30px">

Resim yerleştirme kodudur. img src=”resim dosyası yolu ve dosya türü buraya yazılır“

margin: Atandığı kapsayıcının dışına, tanımlanan piksel(px) ve yön oranında boşluk verir. (margin-top:yukarı, margin-left: sola, margin-right: sağa, margin-bottom: aşağı, margin: her yöne)
—

<a href="http://www.serdarsezer.com/temel-html-yapisi/"  target="_blank" > Temel HTML yapısı için tıklayınız</a>

Link yerleştirme kodudur.  a href=”bağlantı buraya eklenir“.

target=”blank“: Linkin yeni bir sekmede açılmasını sağlar.

TEMEL HTML YAPISI yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.

WEB TASARIMDA MİNİMALİZM NEDİR?

Minimalizmin en net Türkçe karşılığı sadeciliktir. Her alanda uygulanış biçimi farklı olsa da temelde gereksizleri, fazlalıkları atmak işe yarayan şeyleri de birbirine uyumlu hale getirerek derleyip toplamaktır.  Eskiden kurumsal web sitelerde bile hava durumu, döviz kuru, günün sözü, tarihte bugün gibi  konuyla alakasız pek çok bölüm bulunurdu. Siteler saatli maarif takvimi gibiydi. Zaman ve gelişen mobil teknolojiyle birlikte arayüzler nihayet sadeleşti.

Web tasarımda “sadelik” kavramı “basitlik” gibi algılanabilmektedir. Oysa ki sade bir arayüz tasarlamak, realistik bir arayüz tasarlamaktan çok daha zordur. Çünkü az  tasarım öğesiyle tatmin edici görsellik yaratmanız gerekir. Eğitim kalitesi, kültür ve refah düzeyi daha yüksek olan toplumların her sınıfında benimsenmiş olan minimalizm, ülkemizde ise yeni yeni tanınmaktadır. Yani yapacağınız sade arayüz tasarımının kabul görebilmesi için müşterinizin de bunu anlayacak düzeyde olması önemlidir. Bana nasıl bir arayüz tasarlayacağımı soran müşterilerime “minimalist” dediğimde genellikle aldığım üç tepki var;

1. Minimalist nedir?
2. Güzel .
3. Çok da küçük görünmesin.

Üçüncü tepki beni benden alır. Minimalistin mini’sinden yola çıkan müşteri arayüz görünüşünün küçük olacağını zannetmiştir. Bunun boyutla  ilgili olmadığını sade bir tasarım yapacağımı söylediğimde de karşılaştığım iki tepki şöyle;

1. Güzel .
2. Çok da basit olmasın.

Hadi buyurun!  Aşağı tükürsem “küçük”, yukarı tükürsem “basit”…

Bu noktada artık tasarımsal ve teknik konuları anlatmaya başlar, daha önce yaptığım işleri gösteririm. Bizim işin %70’i laf anlatma, %30’u uygulamadır.

WEB TASARIMDA MİNİMALİZM ÖRNEKLERİ

Uygulama kısmını daha iyi kavrayabilmeniz için bir kaç örnek hazırladım. Mesela web sitenin en üstünde yer alan ve genellikle içinde logo, menü gibi elemanlar barındıran header kısmını ele alalım.

Minimalist olmayan bir header’da aranan ve aranmayan her şey bulunur. Salı pazarı gibidir. Duyan gelmiştir.

Minimalist  header’da ise tüm elemanlar, en sağdaki hamburger menüye tıklandığında açılan şık bir listeye eklenmiştir. Hamburger menü yerine başlık sayısı azaltılmış bir menü de kullanabilirsiniz.

Bu sadelik sayesinde ziyaretçi site içeriğine çok daha iyi odaklanabilmektedir. Ek olarak site hızını da hatırı sayılır oranda arttırmaktadır.

Verdiğim örneği slider, content, footer alanlarında da uygulayabilirsiniz. Evet bunlar için örnek hazırlamaya üşendim. Fakat hazır yapılmışlarından göstereceğim.

MİNİMALİST WEB TASARIM ÖRNEKLERİ

Aşağıdaki tasarımları sindire sindire incelemenizi tavsiye ederim. Siteleri açmak için görsellerin üzerine tıklayın.

http://www.serdarsezer.com/web-tasarimda-minimalizm-2/

WEB TASARIMDA MİNİMALİZM yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.

Web sitelerin temel amacı bilgi sağlamaktır. Fakat bu bilgiyi edinmek için siteleri ziyaret eden insanlar veri işlemcileri değillerdir. Duygusaldırlar ve görsel düşünürler. Dolayısıyla ana bilgi, görsellik kullanılarak belirli bir önem sırasında ve farklılaştırılarak sunulmalıdır. Farklılaştırma; yerleşim sırası, hizalama, renk, kontrast, boşluk, gruplama, boyut, tipografi, stil gibi özellikler kullanılarak gerçekleştirilir.

Bu özelliklerin ayrı ve birlikte kullanımları ile sayısız farklılaştırma biçimi uygulanabilir.

Tabi duygulara hitap etmeyi de unutmamak gerekir.

Bir restauranta gittiğinizde iyi bir yemekten daha fazlasını beklersiniz. Ortam dekorasyonunun, yemeğin sunumunun yani genel ambiyansın iyi olmasını istersiniz. Arayüz tasarımı farklı değildir. Örneğin bir restaurant  markası için  arayüz tasarlıyorsanız, ziyaretçi tıpkı fiziksel ortamdaki gibi rahat hissetmeli, güven duymalı, beğenmeli ve etkilenmelidir.

Örneğin; İskender İskenderoğlu için geliştirdiğim tasarımda, markanın tarihinden ve kültürel mirasından dolayı özelikle “duygulara hitap etmesini”  sağlamaya çalıştım.

İnsan gözü otomatik olarak belirli ilgi noktalarına çekilir. Bunlardan bazıları kişiye bağlı olsa da, çoğunluk, bir web sayfasını görüntüleme biçimi de dahil olmak üzere belirli bir eğilimi takip eder.

Web sitelerde genel olarak ana sayfa yerleşim sıralaması; en üstte ana kategoriler, ortada öne çıkan içerikler ve altbilgide ayrıntılı kategoriler yer almalıdır. Benzer öğeler gruplandırılmalı ve gruplar ayrıştırılmalıdır.

Amaç kullanışlı ve keyifli bir deneyim sunmaktır,

Örneğin, Themeforest’ta yer alan Orva isimli kurumsal arayüz tasarımım, kullanışlı ve keyif verici bir kurumsal site örneğidir.

Akışa dikkat ederseniz, bir şirket ile ilgili önemli bilgileri içeren alanların düzgünce sıralandığını ve ilgili bölümlerin önce çıkarıldığını görebilirsiniz.

Çok sevdiğim sitelerden biri olan Lexusls‘de hem ihtiyacınız olan bilgiye kolay ulaşabildiğiniz hem de bunu yaparken keyif aldığınız bir yapıya sahip.

Arayüz tasarımınız mutlaka şu üç soruya kolayca yanıt vermelidir.
1. Kullanışlı mısın?
2. Nasıl kullanılıyorsun?
3. Neden seni tercih etmeliyim?

Bu sorulara objektif ve olumlu cevaplar alabildiğinizde görsel hiyerarşi konusunu çözmüşsünüz demektir.

WEB TASARIMDA GÖRSEL HİYERARŞİ yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.

GÖRSEL TASARIM İÇİN ADOBE PHOTOSHOP CC

Web Tasarım Programları Görsel Tasarım

Photoshop’un en güncel sürümüdür. Günümüzde web site arayüzlerinin imajları genellikle bu programla oluşturulur. (Hala bazı bloglarda ve web tasarım kursu müfredatlarında Fireworks ve Freehand yazdığını gördükçe “ya sabır” çekiyorum.)  Photoshop ilkin fotoğrafçılar için resim düzenleme programı olarak düşünülmüşse de  kullanım alanı genişledikçe özellikleri de artmıştır.  Bugün Photoshop ile başarılı gif, video, vektörel illüstrasyon ve 3d çalışmaları yapabilmek de mümkündür.  Web tasarım arayüz imaj tasarımında da en etkili ve gerekli programdır. Web ortamına uygun 72 piksel/inç ve RGB renk formatı ile çalışıp, görsellerinizin Ctrl+Alt+Shift+S ile çıktısını alıp kullanabilirsiniz.

KODLAMA İÇİN NOTEPAD + +

Web Tasarım Programları Kodlama

Notepad + +  editörü, hepimizin bilgisayarında olan bildiğimiz notepad programının gelişmiş versiyonudur. Ücretsizdir. Doğru eklentileri kullanırsanız HTML, CSS, PHP ve Java Script kodlarını bununla gayet güzel biçimde oluşturabilirsiniz. Çoğu eklenti “plugin manager” bölümünde listeleniyor.  Örneğin hızlı kodlar oluşturmanızı sağlayan Emmet ya da Zen Coding‘i veya div taglarını seçerek işinizi kolaylaştıran Html Tag gibi eklentileri kolayca yükleyebilir ve kullanabilirsiniz.  Ayrıca Notepad++ editörü FTP  ile sitelere bağlanarak, kod dosyalarını düzenlememize de imkan verir.

HTML arayüz çalışmaları için yukarıdaki iki program işinizi görür. Çünkü HTML dosyalarını, bilgisayarınızda da olsa herhangi bir web tarayıcısında kolaylıkla görüntüleyebilirsiniz. Fakat bunları PHP’ye dönüştürdüğünüzde görüntüleyebilmeniz için bir yerel sunucuya (localhost) ihtiyacınız olur.

YEREL SUNUCU İÇİN APPSERV

Web Tasarım Programları Yerel Sunucu

AppServ ile (Windows işletim sistemi kullanıyorsanız) PHP dili için ihtiyaç duyduğunuz Apache, MySQL ve phpMyAdmin‘i paket halinde bilgisayarınıza kurabiliyorsunuz. Ücretsiz, pratik ve kullanışlı bir localhost programıdır. Kurulumu ve kullanımına ilişkin bolca Türkçe kaynak bulunmaktadır.

TAVSİYE EKLENTİ: FIREBUG

Web Tasarım Programları Eklenti

Firebug Mozilla Firefox tarayıcısı eklentisidir. HTML, CSS, DOM ve Javascript’i incelemek ve hataları ayıklamak amacı ile yaratılmıştır. Bu eklenti sayesinde yayındaki ya da lokaldeki bir site arayüzünde bölüm seçerek CSS değişikliği yapabilir, yaptığınız değişikliği çift monitöre ihtiyaç duymadan eşzamanlı olarak görebilir ve hoşunuza giderse kopyalayıp kod dizinine yapıştırabilirsiniz. Kod tamamlama özelliği de olan Firebug, editör gibi kullanılabilmektedir. Firebug’ın  ‘lite’ sürümü Chrom, IE, Safari, Opera gibi diğer tarayıcılarda da kısıtlı özelliklerle çalışıyor.

Serdar SEZER

WEB TASARIM PROGRAMLARI yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.

1. YÖNLENDİRME (NAVİGASYON)

Yönlendirme kullanışlılık açısında önemli bir öğedir.  Kullanıcı hızlı ve kolay bir biçimde aradığını bulabilmelidir.  Daha önce yapılan çalışmalarda kullanıcıların karmaşık yapıları kullanmaya istekli olmadığını göstermiştir.

Yapılmaması gereken navigasyon hataları şunlardır;

Bulunması zor yönlendirme:  Menü başlıkları, sekmeler, banner alanları görünür olmalıdır. Çünkü kullanıcı bunları bulmak için bir Indiana Jones macerası yaşamaya hevesli değildir.

Garip kısaltmalı bağlantı isimleri: Bağlantı başlıklarını alandan kazanmak için kısaltmamak gerekir. Bize göre anlaşılır olan bir kısaltma kullanıcıya anlamsız gelebilir.

Çok fazla sayıda alt menü: Sanılanın aksine alt menüler çoğu zaman kullanıcı düşmanıdır. Bazen menü ağacı, sarmaşık haline gelir fakat kullanıcı Tarzan değildir.  Onu sitede tutmanın yolu açılır menü gruplarını sadeleştirmektir. Hatta kategorileri doğrudan açılan sayfada göstermektir.

Arama kutusu olmaması: Siteniz başarılı bir yönlendirme düzenlemesine sahip değilse arama kutusu işleri biraz daha kolaylaştırır. O da yoksa kullanıcıya yardımcı olması için bir turist rehberiyle anlaşmalısınız.

2. OKUNABİLİRLİK

Okunabirlik kullanıcı dostluğu açısından diğer bir önemli faktördür.  Kullanıcının sitenizdeki içeriği hızlıca ve kolayca kavraması gerekmektedir. Nielsen Norman Group araştırmasına göre ziyaretçi bir web sitedeki içeriğin sadece %28’ini okumaktadır.  Okumasını zorlaştırarak bu oranı daha da düşürmeyin. Okunabilirlik için en önemli tasarım faktörleri;

Renk: Yazı fontunun rengi, arkplanla kontrast oluşturmalıdır. Örneğin beyaz bir arkaplan üzerine yazılacak yazının beyaz, açık gri gibi tonlarda olması kullanıcının gözlerini bozmak dışında bir işe yaramaz.

Font: Kolay okunabilir ve anlaşılabilir olmalıdır. Özellikle uzun yazıların bulunduğu alanlarda el yazısı türü fontlar kullanılmamalıdır. Serif ve Sans Serif yazı fontları tasarımlar için idealdir. Örneğin ben Open Sans’a bayılırım. Üşenmesem adımı Open Sans olarak değiştireceğim. O derece yani…

Biçimlendirme:  Okunabilirliğin yüksek olması için renk ve font dışında yazıyı nasıl kullandığımızda önemlidir.  Başlıklar kalın ve büyük, satır araları ne çok geniş ne çok dar, vurgulanan alanlar altı çizili ya da farklı renkte olmalı. Paragraf boşlukları vermek de önemli.

3. SİTE HIZI

Bu maddeyi daha önceki yazılarımda belirtmiştim. Günümüzde hızın önemi oldukça yüksek.  Eğer sitenizin yüklenmesi 5 saniyeden uzun sürüyorsa tasarımınızın acayip şahane olmasının ya da kullanışlı olmasının pek fazla önemi kalmıyor. Çünkü ziyaretçi otobüs bekler gibi beklemiyor.   Ayrıca siteniz yavaş yükleniyorsa Google’da sizi ciddiye almıyor.  Bu yüzden yüklemeyi yavaşlatan video arkaplan gibi artistlik hareketlerden, hava durumu vb. gereksiz widgetlerden kaçınmanızı ve resimlerini jpeg mini ya daa tiny png gibi uygulamalarla kayıpsız sıkıştırdıktan sonra siteye yüklemenizi öneriyorum.  Google Page Speed Tool’da resimleri sıkıştırıyor fakat bunu yaparken resimlerin kalitesini bozduğu ve boyutlarını küçülttüğü için  pek bir işe yaramıyor.

4. MOBİL UYUMLULUK

Artık her web site mobil cihazlara da uyumlu olmak zorundadır.  Mobilde yüksek performans için esnek (responsive) yapı kullanmak gerekmektedir.  Esnek web sitelerin tasarımları da sade ve kullanışlı olmak zorundadırlar.  Flat style bu ihtiyaçlara cevap vermektedir.  Fakat ülkemizde  hala realistik akımın “dallı güllü, kabartmalı, gölgeli renk geçişli ” tasarımları sevildiği için bu stili tamamıyla uygulayamıyoruz. Bu yüzden ortasını bulmaya çalışıyoruz.  Mobilde biçimlenen arayüzün kullanıcıyı yormaması gerekmektedir. Masaüstü ekranda görünen bazı bölümleri mobilde kapatabillirsiniz. Ne de olsa menü aracılığıyla bu bölümlere ulaşılabilmektedir.  Kullanıcı çok fazla tıklama yapmadan sayfalar arasında gezinebilmelir.  Site mutlaka farklı marka telefon işletim sistemi, tablet ve tarayıcıda test edilmelidir. Çünkü kendi cihazımızda düzgün görünen arayüz diğer cihazlarda berbat görünebilir. Ayrıca en küçük font boyutu 14px olmalıdır. En önemli konulardan biri de formlardır.  Mobilde form doldurmak kullanıcı için işkencedir. Bu yüzden doldurulması gereken form alanları çok daha az olmalıdır.

” Kullanıcı dostu web tasarım ” kulağa güzel gelen bir kelime. Ancak arayüzünüz gerçekten kullanıcı dostu değilse ziyaretçiler sitenizi tanımlamak için güzel sözler kullanmazlar. Daha da kötüsü,  dönmemek üzere giderler .

Serdar SEZER

KULLANICI DOSTU WEB TASARIMIN 4 PÜF NOKTASI yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.

Yeni kurumsal Facebook kapak ölçüleri: 828px x 315px

Yaptığım testlerde yeni kapağın mobilde sağdan ve soldan 134’er piksel olmak üzere toplam 269px‘lik kısmının görünmez olduğunu tespit ettim. Özetle bundan böyle Facebook kapak görseli tasarımı yaparken, ortadaki 560px‘lik alanın dışına önemli bilgiler yerleştirmemenizi tavsiye ederim. Çünkü bu alanın dışına yerleştirdiğiniz bilgiler mobilde görünmeyecek.

Örnek:

Bu değişiklikten sonra özellikle Sosyal Medya alanında çalışan ve çok sayıda Facebook sayfasına destek veren tasarımcı arkadaşlara sabırlar dilerim.

Bu kadar sabrın sonu selamet değilse, olay çıkarırım benden söylemesi… (Anonim)

FACEBOOK KAPAK BOYUTU DEĞİŞTİ 2016 yazısı ilk önce Serdar Sezer üzerinde ortaya çıktı.