Web siteniz nasıl görünecek?

507 2 dakika okuma süresi

Önceki Ders : Web Tasarım İçin Gerekli Olan Temel Yazılımları Yüklemek

Web siteniz nasıl görünecek? “Web sitem hangi bilgileri sunuyor?”, “Hangi yazı tipleri ve renkler istiyorum?” ve “Sitem ne yapıyor?” dahil olmak üzere kod yazmadan önce web siteniz için yapmanız gereken planlama ve tasarım çalışmalarını tartışır.

İlk önce: 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ığı, resmi ve birkaç paragrafı olan basit bir web sayfası oluşturarak başlayacağız.

Başlamak için şu soruları cevaplamanız gerekir:

Web siteniz ne hakkında? Köpekleri, New York’u veya Pac-Man’ı seviyor musun?
Bu konuda hangi bilgileri sunuyorsunuz? Bir başlık ve birkaç paragraf yazın ve sayfanızda göstermek istediğiniz bir resmi düşünün.
Web siteniz basit üst düzey terimlerle nasıl görünüyor? Arka plan rengi nedir? Ne tür bir yazı tipi uygundur: resmi, çizgi film, kalın ve yüksek, ince?

Not : Karmaşık projeler, renklerin, yazı tiplerinin, sayfadaki öğeler arasındaki boşluğun, 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 ve Firefox Photon Tasarım Sisteminde bir örnek görebilirsiniz .

Tasarımınızı eskizlemek

Ardından, kalem ve kağıt alın ve kabaca sitenizin nasıl görünmesini istediğinizi çizin. İlk basit web sayfanız için, çizilecek çok şey yok, ancak bunu şimdi yapma alışkanlığına sahip olmalısınız. Gerçekten yardımcı oluyor – Van Gogh olmanıza gerek yok!

Not : Gerçek, karmaşık web sitelerinde bile, tasarım ekipleri genellikle kağıt üzerinde kaba taslaklarla başlar ve daha sonra bir grafik düzenleyici veya web teknolojileri kullanarak dijital maketler oluştururlar.

Web ekipleri genellikle bir grafik tasarımcı ve bir kullanıcı deneyimi (UX) tasarımcısı içerir. Grafik tasarımcıları web sitesinin görsellerini bir araya getirdi. UX tasarımcıları, kullanıcıların web sitesini nasıl deneyimleyecekleri ve web siteleriyle nasıl etkileşime gireceklerini 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 getirmeye başlamak iyidir.

Metin

Paragraflarınız ve başlığınız daha önceye ait olmalıdır. Bunları yakın tutun.

Tema rengi

Bir renk seçmek için Renk Seçici’ye gidin ve istediğiniz rengi bulun. Bir rengi tıkladığınızda, altı karakter gibi garip bir kod görürsünüz #660066. Buna onaltılık kod denir (onaltılık için kısadır) ve renginizi temsil eder. Kodu şimdilik güvenli bir yere kopyalayın.

Görüntüler

Bir resim seçmek için Google Görseller’e gidin ve uygun bir şey arayın.

İstediğiniz görüntüyü bulduğunuzda, görüntüyü büyütülmüş olarak görmek için üzerine tıklayın.
Görüntüyü sağ tıklayın (Mac’te Ctrl + tıklama), Görüntüyü Farklı Kaydet … ‘i 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 görüntülerin çoğunun 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. Tıklayın Araçlar çıkan daha sonra, düğme Kullanım hakları altında görünür seçeneği. Yeniden kullanım için etiketli gibi bir seçenek seçmelisiniz .

Yazı tipi

Bir yazı tipi seçmek için:

Git Google Fonts’tan Hoşlandığınız bir bulana kadar listede aşağı ve kaydırma. Sonuçları daha fazla filtrelemek için sağdaki kontrolleri de kullanabilirsiniz.
İstediğiniz yazı tipinin yanındaki “artı” (Ekle) simgesini tıklayın.
Sayfanın altındaki panelde “* Aile Seçildi” düğmesini tıklayın (“*” seçtiğiniz yazı tipine bağlıdır).
Açılır kutuda, Google’ın daha sonra kaydetmek üzere size verdiği kod satırlarını metin düzenleyicinize görebilir ve kopyalayabilirsiniz.