Web siteniz nasıl görünecek? kod yazmadan önce web siteniz için yapmanız gereken planlama ve tasarım çalışmalarını ele alacağız; “Web sitem hangi bilgileri sunuyor?”, “Hangi yazı tiplerini ve renkleri istiyorum?” ve “Sitem ne yapıyor?”
İlk olarak: planlama
Bir şey yapmadan önce bazı fikirlere ihtiyacınız var. Web siteniz gerçekte ne yapmalı? Bir web sitesi temelde her şeyi yapabilir, ancak ilk denemeniz için işleri basit tutmalısınız. Başlık, resim ve birkaç paragraf içeren basit bir web sayfası oluşturarak başlayacağız.
Başlamak için şu soruları cevaplamalısın:
- Web siteniz ne hakkında? Köpekleri, New York’u mu yoksa Pac-Man’i mi seversin?
- Konuyla ilgili hangi bilgileri sunuyorsunuz? Bir başlık ve birkaç paragraf yazın ve sayfanızda göstermek istediğiniz bir resim düşünün.
- Web siteniz nasıl görünüyor? Arka plan rengi nedir? Ne tür bir yazı tipi uygundur: resmi, karikatürik, cesur ve gürültülü, ince?
Not:Karmaşık projeler, renklerin, yazı tiplerinin, sayfadaki öğeler arasındaki aralığın, uygun yazma stilinin vb. tüm ayrıntılarına giren ayrıntılı yönergelere ihtiyaç duyar. Buna bazen tasarım kılavuzu, tasarım sistemi veya marka kitabı denir: Bir örneğini Firefox Foton Tasarım Sistemi‘nde görebilirsiniz.
Tasarımınızı çizme
Ardından, kalem ve kağıdı alın ve sitenizin nasıl görünmesini istediğinizi kabaca çizin. İlk basit web sayfanız için, çizecek çok fazla şey yok, ancak bunu şimdi yapma alışkanlığı edinmelisiniz. Gerçekten yardımcı oluyor – Bu arada, Van Gogh olmak zorunda değilsiniz!
Not: Gerçek, karmaşık web sitelerinde bile, tasarım ekipleri genellikle kağıt üzerinde kaba çizimlerle başlar ve daha sonra bir grafik editörü veya web teknolojileri kullanarak dijital mockup’lar oluşturur.
Web ekipleri genellikle hem grafik tasarımcı hem de kullanıcı deneyimi (UX) tasarımcısı içerir. Grafik tasarımcılar web sitesinin görsellerini bir araya getirirler. UX tasarımcıları, kullanıcıların web sitesini nasıl deneyimleyeceklerini ve web sitesiyle nasıl etkileşimde olacaklarını ele almada biraz daha soyut bir role sahiptir.
Varlıklarınızı seçme
Bu noktada, sonunda web sayfanızda görünecek içeriği bir araya getirmek iyidir.
Metin
Paragraflarınız ve başlığınızı hazırlamıştınız. Bunları yakınlarda tutun.
Tema rengi
Renk seçmek için Renk Seçici’ye gidin ve beğendiğiniz bir rengi bulun. Bir renge tıkladığınızda, #660066 gibi garip bir altı karakterli kod görürsünüz. Buna onaltılık kod (hex code) denir ve renginizi temsil eder. Kodu şimdilik güvenli bir yere kopyalayalım.
Görüntü
Resim seçmek için Google Görsellerde uygun bir şey arayın.
- İstediğiniz resmi bulduğunuzda, genişlemiş bir görünüm elde etmek için resme tıklayın.
- Görüntüye sağ tıklatın (Ctrl + Mac’e tıklayın), Görüntüyü Farklı Kaydet… öğesini seçin ve görüntünüzü kaydetmek için güvenli bir yer seçin. Alternatif olarak, daha sonra kullanmak üzere görüntünün web adresini tarayıcınızın adres çubuğundan kopyalayın.
Google Görseller de dahil olmak üzere web’deki çoğu görselin telif hakkına sahip olduğunu unutmayın. Telif hakkını ihlal etme olasılığınızı azaltmak için Google’ın lisans filtresini kullanabilirsiniz. Araçlar düğmesine ve ardından aşağıda görünen sonuç Kullanım hakları seçeneğine tıklayın. Creative Commons lisansları seçeneğini seçmelisiniz.
Yazı tipi
Yazı tipi seçmek için:
- Google Fontlar‘a gidin ve beğendiğiniz birini bulana kadar listeyi aşağı kaydırın. Sonuçları daha fazla filtrelemek için sağdaki denetimleri de kullanabilirsiniz.
- İstediğiniz yazı tipinin yanındaki “artı” (Ekle) simgesini tıklatın.
- Sayfanın altındaki panelde “* Family Selected” düğmesini tıklatın (“*” kaç yazı tipi seçtiğinize bağlıdır).
- Açılır kutuda, Google’ın daha sonra kaydetmek için size verdiği kod satırlarını görebilir ve metin düzenleyicinize kopyalayabilirsiniz.
