SlideShare a Scribd company logo
1 of 26
WEB TASARIMI-I
Bilge Narin
narinbilge@gmail.com
@bilgenarin
SORUMLULUKLAR
Ara Sınav
(Test)
Vize Ödevi
Kendi Web
Sayfanız
Final Ödevi
Grup Proje
A journalist by day and a coder by night
NELER
ÖĞRENECEĞİZ?▸ HTML
▸ CSS
▸ BOOTSTRAP
▸ JAVASCRIPT (?)
▸ KURAM: EVRENSEL TASARIM
İLKELERİ, KULLANICI DENEYİMİ
TASARIMI, AÇIK KAYNAK,
TOPLUM İÇİN TEKNOLOJİ
4
NEDEN
ÖĞRENMELİYİZ?
5
ÜRÜN/ÇIKTI?
www.bilgenarin.com gibi kişisel
bir web sitesinin kodlarını yazıp
düzenleyebileceğiz.
Hızlı, erişilebilir ve optimize
edilmiş bir web sitesi
WordPress / Joomla / Drupal
=içerik yönetim sistemi
İKİ GÖNÜLLÜ ÖĞRENCİ
▸ Facebook Grubu
▸TRT ve diğer kurumların
internet sayfası ödüllerini
kontrol
FRONT-END BACK-END?
FULL STACK
Front-End Web Tasarımcısı
Back-End Web Yazılımcı
İki tarafı da bilirseniz Full Stack
olursunuz.
Estetik yönünüzü de geliştirmeniz
gerekir.
FRONT-END TASARIMCI
Web tasarımcısı belli bir şablona
göre web siteyi tasarlar. Şablon onay
alırsa, siteyi tasarlar.
Estetik yönü iyi olmalıdır.
Renk uyumu, tipografiden
anlamalıdır.
BACK-END YAZILIMCI
Sitenin ihtiyacına göre veri tabanı
oluşturur, veritabanını yönetecek
CMS paneli geliştirir. Siteyi ziyaret
edecek olası ziyaretçi sayısına göre
performanslı yazılım yapar.
Kimler admin, parolarlar ne olacak
belirler.
BACK-END YAZILIMCI
Back-end için veritabanı tasarımı bile
bazen aylarca sürer.
Sitenin ziyaretçi sayısına göre
performanslı bir şekilde kodlanması
gerekir.
Facebook ve Google’ın asıl omurgası
arka plan kodlamadır. Önyüzde ise
neredeyse hiç tasarım yoktur.
FRONT-END VS BACK-END
WEB TASARIMI
▸Online yaratıcılık gerektirir.
▸Günümüzde web sitesi olmayan
kişi ve kurum neredeyse yok.
WEB TASARIMI – GENEL İLKELER
▸Yazı karakteri olarak, çoğunlukla
tırnaksız /serifsiz karakterlerden
Arial, Verdana ve Tahoma yazı
aileleri tercih edilmektedir.
▸Sitenin bütünlüğü açısından, tüm
sayfalarda aynı yazı karakterlerinin
kullanılması gerekmektedir.
WEB TASARIMI – GENEL İLKELER
▸Comic Sans ya da Papyrus
kullanmayınız.
WEB TASARIMI – GENEL İLKELER
▸ Web sayfalarında italik, BÜYÜK HARF
gibi yazı biçimlerinin kullanılmaması
gereklidir. Ekranlardaki görüntü
ayarlarının farklılığı nedeniyle italik ve
büyük harf yazılar okurları fazlasıyla
yormakta ve metinden
uzaklaştırmaktadır.
WEB TASARIMI – GENEL İLKELER
▸Basitlik ve Beyaz Alan: Çok
fazla içerik yükleyerek ana
mesajı veremezsiniz.
WEB TASARIMI – GENEL İLKELER
İlerici ve Sürdürülebilir Teknikler
Kullanma:
▸Bugün çok iyi bildiğiniz ve çok
popüler olan bir teknoloji,
bundan birkaç yıl sonra artık
kullanılmayan bir araç haline
gelebilir.
WEB TASARIMI – GENEL İLKELER
Büyük Düşünün:
▸Büyük resim, az metin.
Multimedya Deneyimi:
▸ Zengin medya içeriği.
▸ HTML Canvas ile animasyon
eklenebilir. Canlı ve sıkıcılıktan
uzak sayfalar.
WEB TASARIMI – PARALAKS ETKİSİ
▸Son yıllarda moda olmuştur.
▸Temel prensip tüm içeriği tek sayfada toplamak.
▸Küçük çaplı sitelerde başarılı sonuçlar verir (şahsi
portfolyo ya da şirket tanıtımı gibi)
▸Hedef aşağı-yukarı mouse hareketidir. Tık değildir.
Mouse oynatıldığında 3D derinlik kazandırır.
▸https://www.youtube.com/watch?v=tb_Bk00NKnE
WEB TASARIMI – GENEL İLKELER
Sade ve Zarif Tasarım:
▸Eskiden çok fazla efekt
kullanılırdı.
▸İnsanlar artık siteye
girdiklerinde içeriği anında
görmek istiyorlar.
▸Gölgeli, çerçeveli butonlar
yoruyor.
Responsive Design
Duyarlı Tasarım / Esnek Tasarım
Geniş ekran, dar ekran, mobile ekranda
farklı görünüm: Tüm ekranlarda sorunsuz
çalışma.
Responsive Design
Duyarlı Tasarım / Esnek Tasarım
Geniş ekran, dar ekran, mobile ekranda
farklı görünüm.
RESPONSIVE VS NON-RESPONSIVE
KAYNAKLAR?
▸ Ders Notları
▸W3Schools
▸ Codecademy
▸Udemy
▸SoloLearn
▸Linux Yaz Kampı
▸Çok tekrar!!!!
KAYNAKLAR?
▸ Farklı kaynaklardan pratik
yapılması çok önemli
▸ Kod yazarken öğrendiğimizi
zannederiz ama kullanmadıkça
unuturuz.
▸Rubber duck debugging

More Related Content

Similar to Web Tasarımı 1

Atif Unaldi - Adim Adim Web (Ankara)
Atif Unaldi - Adim Adim Web (Ankara)Atif Unaldi - Adim Adim Web (Ankara)
Atif Unaldi - Adim Adim Web (Ankara)
Atıf ÜNALDI
 
Asp özel ders
Asp özel dersAsp özel ders
Asp özel ders
meryem01
 
Asp özel ders
Asp özel dersAsp özel ders
Asp özel ders
meryem02
 
Admbl
AdmblAdmbl
Admbl
onurn
 
Asp özel ders beykoz
Asp özel ders beykozAsp özel ders beykoz
Asp özel ders beykoz
meryem02
 

Similar to Web Tasarımı 1 (20)

Atif Unaldi - Adim Adim Web (Ankara)
Atif Unaldi - Adim Adim Web (Ankara)Atif Unaldi - Adim Adim Web (Ankara)
Atif Unaldi - Adim Adim Web (Ankara)
 
Sunum.1.2
Sunum.1.2Sunum.1.2
Sunum.1.2
 
12factor apps
12factor apps12factor apps
12factor apps
 
Ürünümüz Hakkında
Ürünümüz Hakkında Ürünümüz Hakkında
Ürünümüz Hakkında
 
OPENSHIFT KONTEYNER PLATFORM İLE GELİŞTİRMEYE HIZLI BAŞLANGIÇ - Webinar-Aug2017
OPENSHIFT KONTEYNER PLATFORM İLE GELİŞTİRMEYE HIZLI BAŞLANGIÇ - Webinar-Aug2017OPENSHIFT KONTEYNER PLATFORM İLE GELİŞTİRMEYE HIZLI BAŞLANGIÇ - Webinar-Aug2017
OPENSHIFT KONTEYNER PLATFORM İLE GELİŞTİRMEYE HIZLI BAŞLANGIÇ - Webinar-Aug2017
 
Web Programlama
Web ProgramlamaWeb Programlama
Web Programlama
 
Asp özel ders
Asp özel dersAsp özel ders
Asp özel ders
 
Asp özel ders
Asp özel dersAsp özel ders
Asp özel ders
 
React native 101
React native 101React native 101
React native 101
 
Çok Kapsamlı SEO Rehberi - Dijitalzade
Çok Kapsamlı SEO Rehberi - DijitalzadeÇok Kapsamlı SEO Rehberi - Dijitalzade
Çok Kapsamlı SEO Rehberi - Dijitalzade
 
Web geliştirmeye başlamak
Web geliştirmeye başlamakWeb geliştirmeye başlamak
Web geliştirmeye başlamak
 
Web
WebWeb
Web
 
Wireframing Sunum
Wireframing SunumWireframing Sunum
Wireframing Sunum
 
Mobilci - biz bize mobilize
Mobilci - biz bize mobilizeMobilci - biz bize mobilize
Mobilci - biz bize mobilize
 
Web tasarimi ilkeleri
Web tasarimi ilkeleriWeb tasarimi ilkeleri
Web tasarimi ilkeleri
 
Internet ve Reklam
Internet ve ReklamInternet ve Reklam
Internet ve Reklam
 
Admbl
AdmblAdmbl
Admbl
 
Wordpress nedir
Wordpress nedirWordpress nedir
Wordpress nedir
 
Ali Kaan SİBAY - Yeni medyada dijital ve kurumsal kimlik (Digital and Instit...
Ali Kaan SİBAY - Yeni medyada dijital ve kurumsal kimlik  (Digital and Instit...Ali Kaan SİBAY - Yeni medyada dijital ve kurumsal kimlik  (Digital and Instit...
Ali Kaan SİBAY - Yeni medyada dijital ve kurumsal kimlik (Digital and Instit...
 
Asp özel ders beykoz
Asp özel ders beykozAsp özel ders beykoz
Asp özel ders beykoz
 

More from Bilge Narin (9)

Web Tasarimi 5
Web Tasarimi 5Web Tasarimi 5
Web Tasarimi 5
 
Webtasarimi4
Webtasarimi4Webtasarimi4
Webtasarimi4
 
Web Tasarimi 3
Web Tasarimi 3Web Tasarimi 3
Web Tasarimi 3
 
Web Tasarımı 2
Web Tasarımı 2Web Tasarımı 2
Web Tasarımı 2
 
Bilgisayar Oyunları ve Cinsiyetçilik
Bilgisayar Oyunları ve CinsiyetçilikBilgisayar Oyunları ve Cinsiyetçilik
Bilgisayar Oyunları ve Cinsiyetçilik
 
What to cite? #metu
What to cite?  #metuWhat to cite?  #metu
What to cite? #metu
 
Big data 24 mart 2015
Big data 24 mart 2015Big data 24 mart 2015
Big data 24 mart 2015
 
ICT4D (Kalkınmada Enformasyon ve İletişim Teknolojileri) - Latin Amerika Örneği
ICT4D (Kalkınmada Enformasyon ve İletişim Teknolojileri) - Latin Amerika ÖrneğiICT4D (Kalkınmada Enformasyon ve İletişim Teknolojileri) - Latin Amerika Örneği
ICT4D (Kalkınmada Enformasyon ve İletişim Teknolojileri) - Latin Amerika Örneği
 
Sayısal Uçurum / Digital Divide
Sayısal Uçurum / Digital DivideSayısal Uçurum / Digital Divide
Sayısal Uçurum / Digital Divide
 

Web Tasarımı 1

  • 2. SORUMLULUKLAR Ara Sınav (Test) Vize Ödevi Kendi Web Sayfanız Final Ödevi Grup Proje
  • 3. A journalist by day and a coder by night
  • 4. NELER ÖĞRENECEĞİZ?▸ HTML ▸ CSS ▸ BOOTSTRAP ▸ JAVASCRIPT (?) ▸ KURAM: EVRENSEL TASARIM İLKELERİ, KULLANICI DENEYİMİ TASARIMI, AÇIK KAYNAK, TOPLUM İÇİN TEKNOLOJİ 4
  • 6. ÜRÜN/ÇIKTI? www.bilgenarin.com gibi kişisel bir web sitesinin kodlarını yazıp düzenleyebileceğiz. Hızlı, erişilebilir ve optimize edilmiş bir web sitesi WordPress / Joomla / Drupal =içerik yönetim sistemi
  • 7. İKİ GÖNÜLLÜ ÖĞRENCİ ▸ Facebook Grubu ▸TRT ve diğer kurumların internet sayfası ödüllerini kontrol
  • 8. FRONT-END BACK-END? FULL STACK Front-End Web Tasarımcısı Back-End Web Yazılımcı İki tarafı da bilirseniz Full Stack olursunuz. Estetik yönünüzü de geliştirmeniz gerekir.
  • 9. FRONT-END TASARIMCI Web tasarımcısı belli bir şablona göre web siteyi tasarlar. Şablon onay alırsa, siteyi tasarlar. Estetik yönü iyi olmalıdır. Renk uyumu, tipografiden anlamalıdır.
  • 10. BACK-END YAZILIMCI Sitenin ihtiyacına göre veri tabanı oluşturur, veritabanını yönetecek CMS paneli geliştirir. Siteyi ziyaret edecek olası ziyaretçi sayısına göre performanslı yazılım yapar. Kimler admin, parolarlar ne olacak belirler.
  • 11. BACK-END YAZILIMCI Back-end için veritabanı tasarımı bile bazen aylarca sürer. Sitenin ziyaretçi sayısına göre performanslı bir şekilde kodlanması gerekir. Facebook ve Google’ın asıl omurgası arka plan kodlamadır. Önyüzde ise neredeyse hiç tasarım yoktur.
  • 13. WEB TASARIMI ▸Online yaratıcılık gerektirir. ▸Günümüzde web sitesi olmayan kişi ve kurum neredeyse yok.
  • 14. WEB TASARIMI – GENEL İLKELER ▸Yazı karakteri olarak, çoğunlukla tırnaksız /serifsiz karakterlerden Arial, Verdana ve Tahoma yazı aileleri tercih edilmektedir. ▸Sitenin bütünlüğü açısından, tüm sayfalarda aynı yazı karakterlerinin kullanılması gerekmektedir.
  • 15. WEB TASARIMI – GENEL İLKELER ▸Comic Sans ya da Papyrus kullanmayınız.
  • 16. WEB TASARIMI – GENEL İLKELER ▸ Web sayfalarında italik, BÜYÜK HARF gibi yazı biçimlerinin kullanılmaması gereklidir. Ekranlardaki görüntü ayarlarının farklılığı nedeniyle italik ve büyük harf yazılar okurları fazlasıyla yormakta ve metinden uzaklaştırmaktadır.
  • 17. WEB TASARIMI – GENEL İLKELER ▸Basitlik ve Beyaz Alan: Çok fazla içerik yükleyerek ana mesajı veremezsiniz.
  • 18. WEB TASARIMI – GENEL İLKELER İlerici ve Sürdürülebilir Teknikler Kullanma: ▸Bugün çok iyi bildiğiniz ve çok popüler olan bir teknoloji, bundan birkaç yıl sonra artık kullanılmayan bir araç haline gelebilir.
  • 19. WEB TASARIMI – GENEL İLKELER Büyük Düşünün: ▸Büyük resim, az metin. Multimedya Deneyimi: ▸ Zengin medya içeriği. ▸ HTML Canvas ile animasyon eklenebilir. Canlı ve sıkıcılıktan uzak sayfalar.
  • 20. WEB TASARIMI – PARALAKS ETKİSİ ▸Son yıllarda moda olmuştur. ▸Temel prensip tüm içeriği tek sayfada toplamak. ▸Küçük çaplı sitelerde başarılı sonuçlar verir (şahsi portfolyo ya da şirket tanıtımı gibi) ▸Hedef aşağı-yukarı mouse hareketidir. Tık değildir. Mouse oynatıldığında 3D derinlik kazandırır. ▸https://www.youtube.com/watch?v=tb_Bk00NKnE
  • 21. WEB TASARIMI – GENEL İLKELER Sade ve Zarif Tasarım: ▸Eskiden çok fazla efekt kullanılırdı. ▸İnsanlar artık siteye girdiklerinde içeriği anında görmek istiyorlar. ▸Gölgeli, çerçeveli butonlar yoruyor.
  • 22. Responsive Design Duyarlı Tasarım / Esnek Tasarım Geniş ekran, dar ekran, mobile ekranda farklı görünüm: Tüm ekranlarda sorunsuz çalışma.
  • 23. Responsive Design Duyarlı Tasarım / Esnek Tasarım Geniş ekran, dar ekran, mobile ekranda farklı görünüm.
  • 25. KAYNAKLAR? ▸ Ders Notları ▸W3Schools ▸ Codecademy ▸Udemy ▸SoloLearn ▸Linux Yaz Kampı ▸Çok tekrar!!!!
  • 26. KAYNAKLAR? ▸ Farklı kaynaklardan pratik yapılması çok önemli ▸ Kod yazarken öğrendiğimizi zannederiz ama kullanmadıkça unuturuz. ▸Rubber duck debugging