Web Tasarım Önerileri - Bir Tasarım Nasıl Olmalı ? - Püf Noktaları ve Altın Kuralları

Web Tasarım Önerileri - Bir Tasarım Nasıl Olmalı ? - Püf Noktaları ve Altın Kuralları

Yazan MD   00:19:00   Hiç yorum yok:

Web Tasarım Önerileri - Bir Tasarım Nasıl Olmalı ? - Püf Noktaları ve Altın Kuralları

Bu yazımızda Web tasarım ile uğraşan arkadaşlarımız için püf noktaları ve altın kurallarını yazacağız.

Haydi Başlayalım!

Web Tasarım Nedir ?

Türkçe olarak Web dizayn adı altında yapılan tasarımlardır.

Bu tasarımlar nedir?

İnternet siteleri yani web siteleri için hazırlanan tasarımlardır.

Web Tasarımın En Önemli Püf Noktaları ve Altın Kuralları ;

1. Madde : Tasarımınız göze hitap etmelidir. Bu konuyu biraz daha derinleştirmek istersek, Yaptığınız tasarımlar mutlaka göze hoş gelmelidir. Bunu öğrenmenin bir yolu, çevrenizde ki insanlara yaptığınız tasarımı göstermek ve fikirlerini almaktır. Kötü eleşti alırsanız sakın hayal kırıklığına uğramayın. Unutmayın, bir yerden başlamak, bitirmenin %50'sidir.

2. Madde : Renk seçeneklerinizi uyumlu bir şekilde yapınız. Yani kısacası, Tasarımınıza uyguladığınız renk tonları, birbiri ile uyumlu olmalıdır. Eğer renk uyumu yapamıyor iseniz, Arama motorlarını kullanarak uyumlu renk kombinlerine ulaşabilirsiniz.

3. Madde : Tasarımızda kullanacağınız Yazı tipleri (font) mutlaka göze güzel ve okunabilirlik açısından iyi durumda olmalıdır. Türkçe karakterlere uyumsuz olan Yazı tiplerini kullanmayınız. Uyumsuz yazı tipleri, tasarımın kalitesini ve görselliğini bozar. 

4. Madde : Tasarım yaparken mutlaka, Başka bir göz ile yaklaşın. Bu durumda EGO'nuzu bir kenara bırakın ve Tasarımınızı derinden inceleyin. Tasarımınızın iyi ve kötü taraflarını inceleyin ve geliştirmeye odaklanın.

5. Madde : Tasarımınıza çeşitli süsler ekleyin.

Web Tasarım Hakkında ki Yazımız burada bitmiştir. Fakat değerli takipçilerimiz için BONUS BİLGİ Ekleyeceğim.

BONUS BİLGİ :

Tasarımınızı yaptınız ve web sitenizde yayınladınız fakat çok yavaş açılıyorsa, bu da demek ki çok fazla gereksiz kod parçacığı bulunuyor. Sayfanızın kod bölümünü açın ve gereksiz olan kod parçacıklarını silin. Sayfa açılış hızı, kullanıcılar için çok önemlidir. Hiç bir kullanıcı girdiği sitenin hızının düşük olmasını istemez. Daha doğrusu sitenize girmekten vazgeçebilir.

Etiketler: Web Tasarım, Web Tasarım önerileri, Bir tasarım nasıl olmalı ? , Web tasarımın altın kuralları, Web Tasarımın püf noktaları, Web dizayn, Web dizayn nedir ? , Web tasarım nedir ? , Web Tasarım Önerileri - Bir Tasarım Nasıl Olmalı ? - Püf Noktaları ve Altın Kuralları, Maddeler halinde öneriler, Web tasarım renk kombinleri, Renk kombinleri

Devamını Oku

Webmaster Araçları - Işıkları Söndür Kodu - To Turn Off The Lights Code

Webmaster Araçları - Işıkları Söndür Kodu - To Turn Off The Lights Code

Yazan Furkan   20:02:00   Hiç yorum yok:

Bu kod video veya film siteleri için çok yararlı bir özelliktir. Bu kod sayesinde ziyaretçilerinizin veya kullanıcılarınız sitenizde sinema keyfi çekmesi için videolar ve filmler hariç tüm siteniz kararacak. Ziyaretçileriniz veya kullanıcılarınız sayfanın sağ üstünde bulunandüğmeyi kullanarak sitenizdeki lambayı kapatıp açabilecek.

• Önizle
• Kodlar

ekle kodu, karartma kodu, kodu, lamba ekle, site karartma, sitene lamba, siteni karart, video sitesi kodları

Devamını Oku

Webmaster Araçları - Adblock Engelleme Kodu - Adblock Block Code

Webmaster Araçları - Adblock Engelleme Kodu - Adblock Block Code

Yazan Furkan   17:54:00   Hiç yorum yok:

Bir çok site sahibi sitesiyle masraflarını karşılamak için reklam koyuyor ve kazanç sağlıyor. Adblock Chrome eklentisi sayesinde sitede dolaşırken reklamlara rastlamıyor buda site sahibine masraflarını karşılayamaması anlamına geliyor buda sitenin kapanması gibi bir durum alıyor. 

Ama bu kod sayesinde hazırlanmış olan tüm popüler reklam önleyici eklentilerini/programlarını tespit ederek siteye giriş yapmamasını sağlıyor. Eklentileri/programları kullananları tespit ederek uyarı mesajı gösteriyor. Ve bu sayede site sahibi eklediği reklamlarını gösterebilecek ve kazanç sağlayarak masraflarını karşılayacaktır. 

• Önizle
• Kodlar

sitene adblock, adblocker engelleme, Ghostery engelle, adblocker, adblock reklam, reklam engelleyici, tespit edildi, uyarı,

Devamını Oku

Blogger Temalar - #3 - G Vusion 2 Update Muhteşem Tema (Template) - 2016

Blogger Temalar - #3 - G Vusion 2 Update Muhteşem Tema (Template) - 2016

Yazan Furkan   16:08:00   Hiç yorum yok:

Blogger Temalar - #3 - G Vusion 2 Update Responsive Muhteşem Tema (Template) - 2016

Bu yazımızda  paylaşayacağımız tema, muhteşem bir temadır. şahsen oyun hilesi paylaştığımız sitemizde kullanıyoruz. 

Tema tamamen SEO dostudur.

Responsive uyumludur.

Blogger Adsense uyumludur.

Duyarlı reklam alanlıdır.

Sade Tasarım.

Kişisel blog teması için uygundur.

Turucu Renklidir.

Mavi ve Beyazın muhteşem uyumu.

Disqus yorum sistemi vardır.

Sınırsız sayfa numarası vardır.

• Demo
• Download

Devamını Oku

Blogger Temalar - #2 - SEO - Invision Responsive Uyumlu Muhteşem Tema (Template) - 2016

Blogger Temalar - #2 - SEO - Invision Responsive Uyumlu Muhteşem Tema (Template) - 2016

Yazan Furkan   13:20:00   Hiç yorum yok:

Blogger Temalar - #2 - SEO ve Invision Responsive Uyumlu Muhteşem Tema (Template) - 2016

Bu yazımızda  paylaşayacağımız tema, muhteşem bir temadır. şahsen oyun hilesi paylaştığımız sitemizde kullanıyoruz. 

Tema tamamen SEO dostudur.
Responsive uyumludur.
Blogger Adsense uyumludur.
Sade Tasarım.
Kişisel blog teması için uygundur.
Turucu Renklidir.
Mavi ve Beyazın muhteşem uyumu.
Disqus yorum sistemi vardır.

• Demo
• Download

Devamını Oku

Bloggercı'lar İçin Üretilmiş HTML Ve CSS ile yapılan muhteşem kategorilendirme widget kodları

Bloggercı'lar İçin Üretilmiş HTML Ve CSS ile yapılan muhteşem kategorilendirme widget kodları

Yazan Unknown   10:59:00   Hiç yorum yok:

Bloggercı'lar  İçin Üretilmiş HTML Ve CSS ile yapılan muhteşem kategorilendirme widget kodları

http://i.resimyukle.xyz/Ha9c.png

Canlı DEMO ULAŞMAK İÇİN TIKLAYINIZ...

HTML KODLARI : 

<div class="container">
<div id="feed-list-container"></div><div style="clear:both;"></div>
</div>

CSS KODLARI

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
  background: #f1f1f1 none repeat scroll top left;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}

a,
a:visited {
  color: #555;
  outline: none;
  text-decoration: none;
}

a:hover,
a:focus,
a:visited:hover {
  color: #22a1c4;
  text-decoration: none;
}

.container {
  max-width: 810px;
  margin: 5% auto;
  color: #95a5a6;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  line-height: normal;
}

Devamını Oku

TemplateToaster 5 Pro Tam Sürümü Bugün İçin Ücretsiz! Tam Sürüm Kodu ve İndirme Bağlantısı

TemplateToaster 5 Pro Tam Sürümü Bugün İçin Ücretsiz! Tam Sürüm Kodu ve İndirme Bağlantısı

Yazan MD   18:54:00   2 yorum:

TemplateToaster 5 Pro Tam Sürümü Bugün İçin Ücretsiz! Tam Sürüm Kodu ve İndirme Bağlantısı

Webmasterların vazgeçemediği TemplaToaster 5 Pro Bugün için ücretsiz!

TemplateToaster 5 Pro Sahibi Olmak için Yapmanız gerekenler çok basit!

Bu Bağlantıya tıklayarak, TemplateToaster 5 Pro Tam Sürüm Aktivasyon Kodunuzu Alabilirsiniz.

TemplateToaser Yazılımı ne işe yarar ? 

Kolay yoldan Dinamik Web Siteleri tasarlayabilirsiniz.

Template Toaster 5 PRO Sürümünü İndirmek İçin Bu Bağlantıya Tıklayınız.

Devamını Oku

HTML ve CSS Kullanılarak Hazırlanmış 4 Bildirim Mesajı | Web Tasarım

HTML ve CSS Kullanılarak Hazırlanmış 4 Bildirim Mesajı | Web Tasarım

Yazan MD   18:42:00   Hiç yorum yok:

Bildirim Formlarımızı Blockquote üzerinden tasarlayacağız.

CSS Kodlarımız:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin,latin-ext' rel='stylesheet' type='text/css'> blockquote{ -webkit-transition: all 500ms ease-out ; -moz-transition: all 500ms ease-out ; -o-transition: all 500ms ease-out ; transition: all 500ms ease-out ; font:16px 'Open Sans'; padding:15px; } blockquote span{font-weight:600;} blockquote #close{float:right; color:inherit; text-decoration:none;} Evet. Genel CSSlerimizi belirttik. Şimdi Gelelim Önizleme ve HTML Kodlarına. Bildirim 1 ; Dikkat. CSS Kodlarımız : blockquote#danger{ background-color:tomato; border-left:7px #dc3d21 solid; color:white; } HTML Kodumuz :  <blockquote id="danger"> <a id="close" title="Close"  href="#"onClick="document.getElementById('danger').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a> <span>Dikkat!</span> Bu bir hata mesajıdır. </blockquote> Bildiri 2 : Uyarı CSS Kodları blockquote#warning{ background-color:#ecdfb0; border-left:7px #e5c693 solid; color:#6b6d31; } HTML Kodları <blockquote id="warning"> <a id="close" title="Close"  href="#"onClick="document.getElementById('warning').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a> <span>Uyarı!</span> Bu bir uyarı mesajıdır. </blockquote> Bildiri 3 : Bilgi CSS Kodları blockquote#info{ background-color:#bde9f7; border-left:7px #8bdaf4 solid; color:#3c7e94; } HTML Kodları <blockquote id="info"> <a id="close" title="Close"  href="#"onClick="document.getElementById('info').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a> <span>Bilgi!</span> Bu bir bilgi mesajıdır. </blockquote> Bildiri 4 : Başarı CSS Kodları blockquote#success{ background-color:#cee0cf; border-left:7px #8eb589 solid; color:#296829; } HTML Kodları <blockquote id="success"> <a id="close" title="Close"  href="#"onClick="document.getElementById('success').setAttribute('style','opacity:0; visibility:hidden;');">&times;</a> <span>Tebrikler!</span> Bu bir onay mesajıdır. </blockquote>

Devamını Oku