Web Geliştirme ve Tasarım 101

web_development_101Web Geliştirme ve Tasarımın temellerini bilmek ister misiniz? Korku veren …


Ama bu düşünce tarzı ile ilgili bir sorun var, ya da aslında bir dizi …

  • Bir web sitesine sahip olmanın amacı nedir? Herkesin gerçekten birine ihtiyacı var mı?
  • Öyleyse, kaliteli bir web sitesini nasıl oluşturursunuz? Başka bir deyişle, bu kaliteli web sitesini kendiniz oluşturmanıza izin verecek temel web geliştirme ve tasarımını nasıl öğrenirsiniz??
  • Daha da önemlisi, İLK denemenizde kaliteli bir web sitesi oluşturabilir misiniz?? Yoksa korkunç bir sonuç beklemeden önce arkanızda yılların deneyimine mi ihtiyacınız var??

Bunların hepsine cevap verelim yeni başlayanlar için web geliştirme ve tasarım kılavuzu.

[Spoiler uyarısı. Evet, ilk denemenizde kaliteli bir web sitesi oluşturabilirsiniz.]

Bu Kılavuzda Neler Var??

Tamam, ilk önce, okumaya devam ettiğiniz ve web geliştirmeyi denemeye karar verdiğiniz için mutluyuz! İşte nasıl oynanacağı:

Bölümler çok basit bir şekilde, ana içerik solda ve eyleme geçirilebilir öğelerle birlikte sunulmaktadır. Şöyle ki:

Kılavuz tanıtımı: Bölüm 1

Şimdi, nasıl devam edilir:

  • İlk okurken: Her şeyi yukarıdan aşağıya okumanızı öneririz. Bu, konuyla ilgili 10.000 feet’lik iyi bir görünüm sağlar ve konunun en önemli kısımlarını anlamanıza yardımcı olur. Ayrıca, bireysel görevleri nasıl ele alacağınıza dair temel araçlar ve yöntemler de sağlayacaktır..
  • 2. okurken ve daha ileri: İçindekiler’i kullanın ve sizi en çok ilgilendiren kısma atlayın. Ayrıca, her bölümün yanındaki paylaşım düğmelerini kullanmaktan çekinmeyin ve bağlantıları kendinize veya ilginizi çekebilecek arkadaşlarınıza / takipçilerinize gönderin.

Hazır? Bölüm 1’e gidelim.

Bu Kılavuz Kimler İçin?

Temel web geliştirme ve tasarımını öğrenmek istiyorsanız, bu kılavuz tam size göre. Motivasyonunuz ne olursa olsun.

Ayrıca, başlamak için önceden herhangi bir teknik bilgiye ihtiyacınız yoktur (temel “web becerileri” dışında). Bu kılavuzun amacı, web siteleri oluşturmak ve web geliştirmeyi öğrenmek isteyen herkes için bir tür “101” kursu olmaktır..

İlginizi çekebilecek bazı yaygın nedenler şunlardır:

  • 1. İşletmeniz için bir web sitesine ihtiyacınız var (ve kendiniz inşa edip edemeyeceğinizi görmek istiyorsunuz).
  • 2. Web geliştirmeyi tutku veya geçici ilgi alanı dışında ÖĞRENMEK istersiniz (bu konuda kötü bir şey yok).
  • 3. Okul için bir web sitesine ihtiyacınız var.
  • 4. Web sitelerini çevrimiçi hale getirmek için bir arkadaşınıza veya aile üyenize YARDIMCI OLURSUNUZ.

Bize Yol Gösterecek Ana Fikir

Bu önemli! Ve bunu okuyan gelişmiş bir web geliştiricisiyseniz lütfen bize kızmayın, ancak tüm bu web geliştirme ve tasarım 101 kaynağı boyunca bize rehberlik edecek ana fikir:

“En Az Direnç Yaklaşımı”

En az direnç yaklaşımının üç ilkesi:

  • bizler moleküler seviyede bir şeyleri yıkmamak. Yani programlama dillerinin nasıl çalıştığının veya bir web sunucusunun nasıl çalıştığının en altına inmeyeceğiz.
  • bizler tekerleği yeniden icat etmemek. Yani Birisi belirli bir sorunu zaten çözmüş ve çözümü kullanıma sunmuşsa, onu kullanacağız.
  • bizler basit bir çözümü harika yapmak, karmaşık ve görünüşte daha işlevsel bir çözüm yerine buggy ve anlaşılmaz değil.

BÖLÜM 1: Plan

Fikriniz, web sitesi türü, alan adı ve barındırma.

Bir Web Sitesi Kurmadan Önce Bir Plana İhtiyacınız Var

Kulağa garip gelebilir – 80’lerdeki hit “A Takımı” bize öğretti, iyi bir plan bir başarının anahtarı.

Bir süredir içinizde bir web siteniz varsa, o zaman kesinlikle başkalarının okuması ve göz atması için dışarı çıkma fikrinden heyecan duyuyorsunuz..

Web sitenizin harika olmasını istiyorsunuz. Muhtemelen bir dereceye kadar nasıl görüneceğini biliyorsunuzdur. Ya da belki de mükemmel logonuz hazırdır.

Fakat…

Bu hiç başlamanız gereken bir yer değil. Önceden belirlenmiş beklentilerle başlarsanız, bu sizi sadece yol boyunca çok fazla karışıklığa ve sonunda bir par..

Bunun yerine aşağıdakileri düşünün:

  1. Kendinizi olabilecek teknik hedeflerden ayırın. Örneğin, web sitesi teknolojilerini veya belirli web sitesi yazılımlarını öğrenme hedefi gibi.
  2. Kendinize bir ana soru sorun: “Siteye ne için ihtiyacım var?”

Bu seninle ilgili değil, bu sitenin hedefi ile ilgili.

Web sitenizi kurmadan önce kendinize sormanız gereken sorular

  1. Sitenin neyi başarması gerektiği?
  2. Site üzerinden sunulan ana “şey” ne olacak? (ör. işletmeniz, ürününüz, blog yayınlarınız vb.)
  3. Web sitesinin özel bir amacı olacak mı? (ör. bir e-Ticaret mağazası, bir fotoğrafçının portföyü vb.)
  4. Hedef kitle kim??
  5. Neden sitenin konusuyla ilgileniyorlar??
  6. Site, bireysel kitle üyeleri için hangi acıyı çözüyor??

Bu son 3 soru hakkında bir dakika dinleyiciden konuşalım…

Web sitesi oluşturmak için 2 ana kural vardır. Kural 1:

 Okuyucu / ziyaretçi önce gelir.Web sitenizin memnun etmesi gereken ana kişi onlar.

Bir bakıma, web siteniz size ait değil. Bu onların.

(Kural # 2, bir dakika içinde tartışacağız.)

Bu basit kılavuzu unutmak, etrafınızdaki herkese kafa karıştırıcı bir web sitesi ile kendinizi bulduğunuz noktaya kadar sizi tamamen yanlış bir şekilde yönlendirebilir..

“Öf İnsanlar bu sitenin ne hakkında olduğunu anlamıyorlar. Nasıl bu kadar cahil olabilirler ?! ” – sonunda düşünürsün. Ama ortaya çıktığı gibi, cahil olan sensin.

Bundan kaçınmanın tek yolu, web sitenizi okuyucudan akılda tutarak hemen.

Yani… şu kağıdı alın ve yukarıdaki tüm soruları yanıtlayın.

İşiniz bittiğinde, web sitenizde çalışırken uygulayacağınız nihai yönergeler kümesine sahipsiniz..

Siz ilerledikçe bu cevaplar son derece güçlü bir araç olacaktır. Web sitenizle ilgili bir kararla karşılaştığınızda onlara geri dönebileceksiniz..

* Bunu * veya * bunu * yapmalı mısınız? Cevap sayfasına gidin ve öğrenin. Geniş veya dar bir kenar çubuğu mı kullanmalısınız? Cevaplara gidin, hangisinin hedef okuyucu ile rezonansa girme olasılığının daha yüksek olduğunu öğrenin. Ve benzeri.

Alan Adları ve Web Hosting

Bir web sitesi sahibi olmak istiyorsanız, bir alan adına ve bir web barındırıcısına ihtiyacınız vardır.

Tamam, teknik olarak, kendi bilgisayarınızda bir test web sitesi oluşturabilir ve daha sonra yerel bir web sunucusundan (bilgisayarınıza yazılım olarak da yüklenebilir) çalıştırabilirsiniz, ancak bu% 99 için kullanılabilir bir çözüm olmaz. durumlarda, onu atlayalım.

Yani, bir ev sahibi ve bir alan…

Buradaki kötü haber, ikisinin de paraya mal olması.

İyi haber… şeylerin büyük düzeninde çok fazla para değil. Ayrıca, öğrenirken, tek bir alan adında ve tek bir web barındırıcısı altında birden fazla küçük web sitesi bile başlatabilirsiniz.

Ama en baştan başlayalım.

Web barındırıcıları:

  • Basit bir ifadeyle, bir web barındırma web sitenizin oturduğu ve ziyaretçilerin bulabileceği yerdir. Bir şekilde, web siteleri için web barındırma insanlar için daire gibidir. Başlık altında, web barındırma sunucuları para karşılığında kiralayan şirketlerdir (… web siteleriniz için küçük daireler).
  • Başlamak için standart bir paylaşılan barındırma planı yapılacaktır. Bunları ayda 3 $ gibi düşük bir ücretle alabilirsiniz. İşte popüler web barındırıcılarının güzel bir karşılaştırması. Bir göz atın ve bu şirketlerden hangisinin size en uygun olduğuna karar verin. Ancak önerilerimiz SiteGround, A2 Hosting ve Dreamhost için geçerlidir.

Alan adları:

  • Bir web barındırıcısı bir daire ise, o zaman alan adı o dairenin adresidir. Örneğin, bu web sitesinin alanı hostingfacts.com.
  • Başlamanın yolu, istediğiniz alan adını seçmek ve ardından bir kayıt kuruluşundan satın almaktır. Alan adı satın alma konusunda kapsamlı bir kılavuz ve alan adı üreticilerinin listesi.

 

Alan Adı Seçimi İçin Öneriler ve İpuçları

Tamam, bu yüzden bazı alan adı kayıt sitelerine gitmek ve aslında alan adını satın almak bir şeydir, ancak doğru alan adını nasıl seçersiniz??

Birkaç okul var:

  • Markalı alan adları. Bunlar, var olmayan kelimelerden oluşan alanlardır. Google.com veya Yahoo.com gibi şeyler düşünün. Bu şirketler gelmeden önce, bu kelimeler hiçbir şey ifade etmiyordu. Markalı bir alan adının tersi, iyi, son derece brandable, unutulmaz ve sitenizi diğerlerinden ayırt etmenin kolay olmasıdır.
  • Anahtar kelime tabanlı adlar. Bunlar, sitenin amacını açıklayan bir sıraya konan mevcut kelimelerden oluşur. Pizza.com veya StartBloggingOnline.com gibi şeyleri düşünün. Bunun gibi bir alan adıyla, ziyaretçileriniz hemen hemen ziyaret etmek üzere oldukları web sitesinin türünü doğru bir şekilde tahmin edebileceklerdir. Dezavantajı, bu alanların genellikle daha az brandable olmasıdır.
  • Birleşik isimler. Bunlar markalı alanlar ve bir araya getirilen anahtar kelime tabanlı alanlardır. Think, Facebook.com veya Copyblogger.com. Bu tür adlar, web sitesinin doğasının bir kısmını ziyaretçiye “gösteriyor”, ancak yine de oldukça brandabil.

Seçtiğiniz alan adı türünden bağımsız olarak bazı genel yönergeler:

  • Alan adının ezberlenmesini kolaylaştırın.
  • Kısa ve basit hale getirin. Alan ne kadar uzun olursa, o kadar kafa karıştırıcı olur.
  • Bir .com edinin (mümkünse). .Com mevcut ana “üst düzey alan adıdır”. Başka hiçbir şeye razı olma.
  • Tirelerden kaçınmaya çalışın. Adınızı “cake-recipes.com” yerine “cakerecipes.com” gibi tek damla şeklinde alın

Bu bölümden sonra hazır olması gerekenler:

  • Alan adı.
  • Bir web barındırıcısı.
  • Yanıtlarınız – sitenizin hedefleri ve kitleye nasıl sunulacağı.

Daha fazla yardıma mı ihtiyacınız var? İşte size daha fazla okuma:

  • Neden barındırma paylaşıldı? Ana sunucu türleri karşılaştırıldı
  • Bir web barındırma iyi yapan 10 şey
  • Doğru alan adını seçmek için 12 kural
  • Kapsamlı bir web sitesi planlama kılavuzu

BÖLÜM 2: Tasarım ve Tel Çerçeveleme

Web sitenizin yapısı ile birlikte bir kağıt ve kalem alın ve çizin

Tamam, tasarım aşamasına geçelim.

İlk olarak, işte burada çalışacağımız iş ahlakı:

  • Kalem ve kağıdı olabildiğince uzun süre kullanıyoruz ve ancak o zaman bilgisayara geçiyoruz. İnanın, kağıt üzerinde tasarımınız üzerinde çalışmak için harcanan her dakika, bilgisayardaki şeyleri ayarlamaya başladığınızda bir saat tasarruf sağlar.
  • Yinelemeli çalışmalar yapıyoruz… Sonuçları »kontrol edin» geliştirin »sonuçları kontrol edin» yapılana kadar tekrarlayın.

Bölüm 1’de, web sitesi oluşturmanın 1. kuralı dediğimiz bir şeyden bahsettik. Şimdi kural 2’nin zamanı:

Web sitesi oluşturmanın 2. kuralı:

Önce içeriği düşünün.

Bir web sitesinde önemli olan içeriktir. Tasarım değil. içerik.

İnsanlar içerik için geliyor. Tasarım için gelmiyorlar. Tasarım sadece içeriği sağlayan bir araçtır.

Asla web sitenizin görünüşüyle ​​başlamayın. İçerikle başlayın. İçerik. İçerik. içerik.

Peki “içerik” ile ne kastediyoruz? Kısacası, insanların web sitenizden almak istedikleri şey budur. Blog gönderileri, mağazadaki ürünler, bir forum oluşturuyorsanız forum konuları, haber makaleleri, iş teklifiniz vb..

“Gerçekten mi? Görünüm gerçekten önemli değil mi? ” – Sen sor.

Bunu yenmek yerine, şu sayfaya göz atın:

Basit web sitesi

Bu basit web sayfası, tasarımın ne olduğu ve çevrimiçi olarak hangi amaca hizmet ettiğinin en iyi açıklamasıdır..

Unutmayın, önce içerik!

Web Sitesi İçeriği ve Yapısı

Tamam, bu yüzden içerik en önemli şey olduğundan, önceden çoğunu hazır bulundurmanız gerekir. Ya da en azından, ne kadar içerik olacağını ve hangi biçimde olacağını iyi bir şekilde bilmeniz gerekir..

Not. Bu kısmın zor olabileceğini biliyoruz. İçerikle başlamak web sitesi tasarımı için oldukça doğal görünmüyor, ancak sonuçta mükemmel bir sonuç almanın en iyi yolu gerçekten. Bu nedenle okuyucu ile paylaşmak istediğiniz içeriği ve nasıl sunmak istediğinizi düşünün.

Bir sonraki adım, ihtiyacınız olacak tek tek sayfa türlerini (ana sayfa, ürün sayfası, kategori sayfası, yaklaşık sayfa, iletişim sayfası, ana satış sayfası, bazı bülten aboneliği açılış sayfası, ana blog listesi, bireysel yayınlar, belki de bir mağaza ve başka ne gerekiyorsa).

Web sitenizde içeriğinizi düzenlemenin en etkili yolu olduğunu düşünün?

Tüm bunları kağıt üzerinde yapın. Sizin için bir parça grafik çizim yazılımı öğrenmekten daha kolay ve hızlı olacaktır..

Misal:

İçerik-yapı

Bir Tel Kafesi Birlikte Çizin

Web tasarımında bir tel kafes basitçe bir sayfa şeması veya planıdır – bir web sitesinin çerçevesini temsil eden görsel bir rehberdir (Wikipedia bize söyler).

Tel çerçeveler harika! Onları çevrimiçi görünmek için yaptığımız çoğu şey için kullanıyoruz. Örneğin, işte bu kılavuz için bir tel kafes:

Bir tel çerçeveyi birlikte çizin

Gördüğünüz gibi, yine kağıt üzerinde. Bu tür işler için birden fazla uygulama olmasına rağmen, aslında bunları kullanmanızı önermiyoruz. Profesyonel tasarımcılar için harika olabilirler, ancak yeni başlayanlar veya ara bir kişi onları öğrenirken sadece zaman kaybedecek ve sonunda kalem ve kağıtla elde edecekleri konusunda çok fazla iyileşme elde etmeyecekler.

Peki, tel kafes nasıl?

Yeni başlayan biriyseniz iki yaklaşım vardır:

  • Güçlü hissediyorsanız akışa devam edin ve sadece çekin (her zaman mükemmel bir çözüm değil).
  • Tel çerçevenin düzgün bir şekilde nasıl yapılacağı hakkında hızlı bilgi edinin (genellikle daha iyi).

İkincisi için buraya gidin – harika bir rehber.

(Önceki adımda listelediğiniz her önemli sayfa türünden bir tel kafes oluşturduğunuzdan emin olun.)

Bu bölümden sonra hazır olması gerekenler:

  • Sitenin içeriğinin çoğu veya en azından birçoğu tahmin edildi (örneğin, kullanıcı tarafından oluşturulan içeriğe güveniyorsanız, önceden buna sahip olmak zordur).
  • Web sitenizin grafik olarak hazırlanmış içerik yapısı.
  • İhtiyacınız olacak tek tek sayfa türlerinin bir tel çerçevesi.

Daha fazla okuma:

  • Web sitesi içeriğini planlamak için 9 adım
  • Web tasarımında yeni misiniz? Buradan başlayın.

BÖLÜM 3: UX ve UI

Kullanıcı deneyiminin ve kullanıcı arayüzünün önemini asla küçümsemeyin

Olduğu gibi, Kullanıcı Deneyimi ve Kullanıcı Arayüzü.

WebDesignerDepot bize bu ikisinin oldukça şiirsel bir tanımını veriyor:

Kullanıcı arayüzü eyer, üzengi ve hükümdarlıktır.

UX, ata binebileceğiniz ve sığırlarınızı ipe alabileceğiniz hissidir..

Daha pratik bir tanım için:

  • Kullanıcı arayüzü, kullanıcının sitenize baktığında gördüğü şeydir.
  • UX bu konuda nasıl hissediyorlar.

Çift ve ne kadar iyi yürütüldüğü temel olarak web sitenizin son kullanıcı / ziyaretçi için yararlılığını tanımlar.

Hem UX hem de UI tasarımı kendi içinde büyük konulardır ve nihai sonuçta rol oynayan çok daha küçük öğeler var.

Kısacası, yolculuğunuza yeni başlıyorsanız öğreneceğiniz çok şey var.

Bu yüzden burada tüm bir UX ve UI tasarım kursunu sıkıştırmaya çalışmak yerine, birkaç önemli unsuru işaret edelim ve daha sonra sizi daha fazla okumak için başka bir yere gönderelim.

Kullanıcı Hedefleri

UX kullanıcı hedefleri hakkında… Hedefleriniz kadar değil… Kullanıcı hedefleri.

Tamam, bu ne anlama geliyor? Her şeyden önce, önceki bölümlerde üzerinde çalıştığınız şey olan web sitenizin amacına geri dönün. Web sitesini oluşturma nedeniniz ve sitenin kullanıcıya / ziyaretçiye nasıl yardımcı olduğu.

Ziyaretçinin hedefine nasıl dönüşür? … Ziyaretçinin sitenize geldiğinde elde etmek veya elde etmek istediği tek şey nedir? Amaçları bu.

Bu Hedeflere Ulaşmak Ne Kadar Kolay??

Ardından, aşağıdaki soruya odaklanın:

  • Ziyaretçi kolayca hedefe ulaşabilir mi? – Basit bir şekilde geldikleri bilgiye ulaşabilirler mi??

Bunu cevaplamak için tel kafesinize, içerik yapınıza geri dönmeniz ve şeyleri iki kez kontrol etmeniz gerekiyor.

İçerik yapısının ve düşündüğünüz sayfaların kullanıcının bakış açısından anlamlı olduğundan emin olun. Önemli sayfalar arasında serbestçe ve kafa karıştırıcı olmayan bir şekilde gezinme olasılığının olduğundan emin olun.

Esasen, burada, web sitesinin ziyaretçilerinize değer verdiğinden emin oluyoruz.

Bunları kendi başınıza çözmek zor, değil mi??

Bu bölümün “daha ​​fazla okuma” bölümünde listelenen kaynaklara göz atmanız önemle tavsiye edilir… ancak konuşmak için “hack” i de deneyebilirsiniz.

Yani, oluşturmak istediğiniz web sitesine benzeyen web sitelerini ziyaret ettiğinizde sizi neyin sinirlendirdiğini düşünün. Belki ulaşılması gerçekten zor bazı bilgiler veya siteyi kafa karıştırıcı yapan bazı arayüz öğeleri vardır.

Web sitenizle not alın, sonuçlara varın, aynı hataları yapmayın.

Duyguları Araç Olarak Kullanma

Sitenizin kullanıcı arayüzü ve kullanıcı arayüzü üzerinde çalışırken, temel olarak hedeflediğiniz şey ziyaretçinizde belirli bir duygu uyandırmaktır.

Belirli bir şekilde hissetmelerini istersiniz, bu da onları belirli bir şekilde hareket etmeye ikna eder. Böylece, web sitenizi gerçekten yararlı hale getirmek.

İşin duygusal kısmı üzerinde çalışmak için en iyi araçlardan biri renk.

Renklerin farklı kültürlerde farklı anlamları vardır. Bu farklılıkları anlamak çalışmanızı daha kolay hale getirebilir. İşte güzel bir hile sayfası.

Hangi renkleri kullanmak istediğinizin (muhtemelen) basketbol sahasına girdikten sonra, renkle çalışırken birkaç genel kural aşağıda verilmiştir:

  • Birlikte iyi giden birkaç renkten oluşan bir ana renk şeması seçin. İşte harika bir renk şeması üreticisi.
  • Vurgu renginiz olacak bir renk seçin – işlem düğmeleri, satın alma düğmeleri vb. İçin kullanılacak renk. Temel olarak, kullanıcının dikkatini gerektiren her şey.

matbaacılık

Çoğu durumda, tipografi web sitesi oluşturma oyununu kazandığınız (veya kaybettiğiniz) yerdir.

Tipografiyi tamamen unutmak ve sadece Arial’ı her şey için kullanmak çok kolay.

Tavsiye edilmez.

Bu günlerde, özel yazı tipleriyle çalışmak çok kolay ve sitenizde bu özel yazı tiplerini etkinleştirmek için teknik bir şey yapmanız bile gerekmiyor.

Büyük, büyük tipografi bugünlerde çok moda ve aynı zamanda bir tasarımcının çalışmasını – özellikle de yeni başlayan bir tasarımcının çalışmasını – çok daha kolay hale getiriyor.

Bu siteyi inceleyin, örneğin:

bonobolar

Bir şey fark ettiniz mi? Evet, yazı tipleri çok büyük ve harika görünüyorlar!

Bunun üzerinde nasıl çalışacağınız aşağıda açıklanmıştır:

  • Genel olarak, her web sitesi tasarımı iki tür metin gerektirir: başlıkları ve paragraflar. Çoğu durumda, her biri için yalnızca bir yazı tipi kullanılır.
  • Google’ın web sitenizde kullanabileceğiniz kendi ücretsiz yazı tipi kütüphanesi olan Google Yazı Tipleri’ne gidin ve gerçekten keyif aldığınız bir başlık yazı tipi arayın.
  • Ardından, bu yazı tipinin adını alın ve Yazı Tipi Çifti’nde arayın – birlikte iyi giden önceden hazırlanmış yazı tipi eşleştirmeleri kütüphanesi.
  • Harika görünen bir eşleme seçin.
  • Her iki yazı tipinin adlarını not alın, daha sonra bunlara ihtiyacınız olacak.

Bu şekilde yapmak işleminizi hızlandıracak ve yine de size harika bir sonuç verecektir..

Örnek olarak, Google Fonts’ta Bree Serif adında bir yazı tipi bulduk:

Bree-Serif

Sonra, bunu Font Pair’e aldık ve site Bree Serif’in Open Sans ile iyi gittiğini önerdi. Mükemmel:

Bree-Serif-açık-sans

Nihai Yapı

Son olarak, son adım!

Bu bölümün tüm amacı, siteniz için kullanacağınız bir son düzene / yapıya inmektir. Bu noktada, tasarımınız ve kullanıcı arayüzünüzle yapmak istediğiniz şeylerden tam olarak emin olmalısınız.

Bu bölümden sonra hazır olması gerekenler:

  • Kullanıcı hedefleriniz açıkça listelenmiştir.
  • Bu hedeflerin kafa karıştırıcı olmadığından emin olmak için tel kafesiniz iki kez kontrol edildi.
  • Seçilen renk şeması.
  • Tipografi anlaşıldı.
  • Web sitenizin tüm site düzeni / yapısı / organizasyonu.

Daha fazla okuma: 

  • UX Dergisi
  • UX Kabini
  • Web tasarımında renk arkasındaki psikoloji ve duygu
  • Kullanıcı deneyimi tasarımı nedir? Genel bakış, araçlar ve kaynaklar
  • Bir web sitesi için akıllı işletme hedefleri belirleme
  • Etkili tipografi oluşturmak için 8 kural

BÖLÜM 4: WordPress, HTML veya Şablonlar?

Hangi rotaya gideceğinize karar verin – içerik yönetim sistemleri veya sıfırdan kodlama

İşte gerçek, eller kirli, kaput altı işin başladığı yer!

Bu aynı zamanda muhtemelen sürecin en korkunç kısmıdır (itiraf et!).

Bir kez, kalem ve kağıdı bir kenara koyup bazı yazılımlarla çalışmaya başlama zamanı.

Ve hemen kapının önünde bir sürü soru var …

  • HTML öğrenmeli miyim?
  • CSS ne olacak??
  • Hazır HTML web sitesi şablonları benim için hile yapacak mı?
  • PHP gibi bir programlama dili öğrenmem gerekiyor mu?
  • WordPress’in bugünlerde bir site oluşturmanın yolu olduğunu duydum.
  • Squarespace Super Bowl reklamını gördüm. Bunun nesi var??
  • Joomla denen şey nedir? veya Drupal?
  • ve tekrar tekrar.

Bunların cevabı evet.

İçinde olduğu gibi, evet, bu şeylerden birini veya tümünü yapabilirsiniz ve hangi yolu seçeceğinize karar vermek size kalmış.

Söylemeye çalıştığımız şey, burada en iyi # 1 yaklaşımın olmaması. Her şey, web geliştirme ile ne kadar ilgilenmek istediğinize, web sitesi oluşturma temellerinin ne kadarını öğrenmek istediğinize, kaliteli bir siteye ne kadar hızlı bir şekilde ihtiyacınız olduğuna ve daha sonra ne kadar özelleştirilebilir olmasını istediğinize bağlıdır..

İşte bu bölümden ileriye doğru ilerleyeceğiz. İlk, sizi en iyi tanımlayan kişiyi seçin:

  • a) Web geliştirmenin ne hakkında olduğunu, bir web sitesinin tüm temel çalışmalarını ve bir web sitesinin çalışmasını sağlayan tüm mekanizmaları öğrenmek istiyorum..
  • b) Ağır kaldırmanın çoğunu benim için yapacak güvenilir bir web sitesi oluşturucusunun nasıl kullanılacağını öğrenmek istiyorum.
  • c) Ne yapacağımı bilmiyorum. Sadece kendimi kurabileceğim ve düzgün çalışacak bir web sitesi istiyorum.

Yanıtlandı a)? Bölüm 5’e gidin.

Yanıtlandı b)? Bölüm 6’ya gidin.

Yanıtlandı c)? Bu makaleye göz atın ve sonra tekrar gelin (mükemmel yolu seçmenize yardımcı olmalıdır):

  • İncelenen en iyi 8 blog ve web sitesi oluşturma platformu… Her platform kendi avantajları ve dezavantajları ile birlikte açıklanır ve kaynak ayrıca özel ihtiyaçlarınıza en uygun seçeneği (Wix veya SB) önerir.

Onu okudun mu? Harika! Yani yukarıdaki kişilerden hangisi sizi en iyi tanımlar – A veya b)?

Yol boyunca kullanışlı olabilecek araçlar:

  • Ekran Kartı: Paint.NET, Gimp, Pixlr.
  • Kod yazma: Notepad ++, TextWrangler, SublimeText.
  • İş yönetimi: Trello.
  • Tasarım: renk şemaları, Google Yazı Tipleri, buradan araçlar.
  • Fotoğrafçılık: Unsplash, AllTheFreeStock

BÖLÜM 5: HTML’ye Giriş, CSS & JavaScript

Web siteleri nasıl yerleşik bir gerçekliktir?

Bu bölümde, web geliştirmenin temel temellerini göstereceğiz, en önemli terimleri açıklayacağız ve daha sonra bilgi ve becerilerinizi daha da geliştirebileceğiniz bazı belirli kaynaklara göndereceğiz..

HTML

HTML, web sitelerinin dilidir. Her web sayfası bir noktada oluşturulur veya HTML’ye dönüştürülür.

Örneğin, burada okumakta olduğunuz bu rehberin HTML yapısını görmek için klavyenizdeki “Ctrl + U” tuşlarına basmanız yeterlidir.

HTML, bir web sayfasında gördüğünüz her bloğu tanımlar. Günün sonunda, bir web sayfasında herhangi bir şey görüntülemek için HTML’ye dönüştürülmesi gerekir.

HTML’yi etkili bir şekilde öğrenmek için, web’de bulunan (ücretsiz veya ücretli) kurslardan birine kaydolmanızı öneririz. En iyilerden bazıları Codeacademy veya Treehouse’da bulunabilir..

Örneğin, HTML ve CSS ile ilgili Codeacademy ile ilgili belirli bir bölüm.

CodeCademy ana sayfası

HTML’ye kapsamlı yaklaşım budur.

CSS

CSS – sıkıcı teknik ayrıntıları atlamak – bir web sayfasında görünen her şeyi şekillendirmekten sorumludur.

CSS HTML etiketlerini alır ve daha sonra bunları biçimlendirir ve şekillendirir. Kalın metin, renk ayarlamaları, gölgeler, düzenler, hatta animasyonlar gibi şeyler artık esas olarak CSS ile yapılıyor.

Bunun tam olarak nasıl çalıştığını daha iyi anlamak için Codeacademy’deki bu hızlı kursa geçin.

Daha ayrıntılı öğrenme için Codeacademy veya Treehouse’daki CSS bölümlerini de kontrol edin.

JavaScript, jQuery, Önyükleme vb..

JavaScript, web sitenize bazı dinamik eylemler sunmanıza olanak tanıyan bir programlama dilidir. Örneğin, bulundukları sayfayı yeniden yüklemek zorunda kalmadan web formlarını doğrulama veya kullanıcıyla daha akıcı bir şekilde etkileşimde bulunma gibi şeyler yapabilirsiniz. İşte w3schools’un güzel bir öğreticisi.

Bunu göz önünde bulundurarak, jQuery, daha az kodlamayla gelişmiş şeyler oluşturmanıza izin veren bir JavaScript kütüphanesidir. Bir web geliştiricisi için çok kullanışlı. Buradan daha fazla bilgi edinin.

Son olarak, Bootstrap çok ilginç bir buluş. Başlangıçta Twitter tarafından tanıtılan bu, temel olarak önceden oluşturulmuş ortak site öğelerinin çoğunu sunarak bir web sitesi oluşturma sürecini hızlandıran bir ön uç ortamdır. Kulağa karmaşık geliyor, değil mi?

Ama değil. Codeacademy’deki bu başlangıç ​​kursuna göz atın (bu arada, aslında Bootstrap’ı bu şekilde öğrendik).

Bu bölümden sonra hazır olması gerekenler:

  • Temel olarak, HTML / CSS web sitenizin ilk taslağı tamamen oluşturulmuştur. Oradan, nihai sonucu tekrarlamaya ve geliştirmeye başlayabilirsiniz.

BÖLÜM 6: Web Sitesi Oluşturma Platformları

İlk sitenizi mi kuruyorsunuz? WordPress, Joomla veya Drupal gibi ücretsiz web sitesi platformlarını deneyin

Bölüm 6: Web Sitesi Oluşturma Platformları

  • Squarespace
  • WordPress
  • Joomla & Drupal

Orada bir sopa sallamak daha fazla web sitesi üreticileri vardır. (Eğer şeylere sopa sallayan bir insansanız.)

Tamam, şakalar bir yana.

Açıkçası, şeyleri elle nasıl kodlayacağınızı öğrenmek istemiyorsanız, kesinlikle size yardımcı olabilecek birden fazla çözümdür..

Not. Lütfen 1-4 bölümlerde tartıştığımız diğer her şeyin burada hala geçerli olduğunu unutmayın. Bir tür uygulama olan bir site oluşturma çözümüne sahip olsanız bile, nihai ürünü kullanıcılara dost hale getirmeye ve herkesin hedeflerine uyum sağlamaya dikkat etmeniz gerekir. Bu site oluşturma araçları tam olarak….

Kavraması en kolay olanlardan başlayarak:

Squarespace

Super Bowl sırasında reklam veren tek web sitesi platformu.

Kısacası, herkes tarafından kullanılabilecek çok kullanışlı bir çözüm. Önceden beceri gerekmez.

Klasik web siteleri, bloglar, hatta e-ticaret mağazaları oluşturmanıza izin verir, hatta onlar hakkında bir inceleme yazdık. Arayüzü ve tüm kullanım sürecini kavramak oldukça kolaydır, ayrıca Squarespace adamları birçok ilginç öğretici sağlar. Onları buradan kontrol edin.

WordPress

Dürüst olmak gerekirse, WordPress’i seviyoruz.

Çoğu zaman, bir web sitesi oluşturmak için mükemmel bir platformdur. Karmaşıklık ve kullanım kolaylığı arasında mükemmel bir dengeye sahiptir ve temel olarak sonsuz bir şekilde özelleştirilebilir.

WordPress animasyonu

Ayrıca, şu anda hepsinin en popüler web sitesi platformudur. WordPress yaratıcısı – Matt Mullenweg – WordPress’in paylaştığı gibi, şimdi tüm internetin% 25’ine güç veriyor. Bütün bu insanlar yanlış olabilir mi?

Tamam, bu yüzden WordPress ile başlamak için sadece alan adınıza ve barındırma işlemine ihtiyacınız var. WordPress yazılımının kendisi tamamen ücretsizdir.

Başlamak için şu yollardan birini takip etmekten çekinmeyin:

a) “Hızlı başlangıç ​​yolu”

  • WordPress’i yüklemenin ve sitenizi bir öğleden sonra başlatmanın basitleştirilmiş yolunu öğrenmek için buraya gidin.
  • Resmi dizinden ücretsiz bir tema seçin – sitenizin hedeflerine uygun olduğundan ve düzen / tasarımın istediğiniz yapıdan uzak olmadığından emin olun (biraz ayarlayacaksınız).
    • Mevcut bir temayı nasıl özelleştireceğinizi öğrenmek için bu iki kaynağı kontrol edin.
    • Alternatif olarak, kullanışlı bir kullanıcı arayüzü (kodlama gerektirmez) ile ayarlanabilen çok amaçlı premium bir tema seçebilirsiniz. X teması böyle bir şeyin güzel bir örneğidir.
  • Ekstra özellikler elde etmek için en popüler ve en iyi eklentilerden bazılarını yükleyin.

b) “Derinlemesine yol”

  • WordPress’i çevrimiçi bir kursla öğrenerek başlayın. Treehouse harika bir tane sunuyor.
  • Temanızı ve eklentilerinizi yukarıdaki gibi seçin. Alternatif olarak, baştan aşağı kendi temanızı oluşturun.

Sonunda, WordPress muhtemelen piyasadaki en çok yönlü web sitesi platformudur. Bununla birlikte, sadece bloglar veya basit iş siteleri değil, hemen hemen her tür web sitesi oluşturabilirsiniz. İşte size düşünmenizi sağlamak için WordPress’i kullanmanın 47 (!) Farklı yolunun bir listesi.

Joomla ve Drupal

Birbirinden biraz farklı olmalarına rağmen, Joomla ve Drupal daha gelişmiş web projeleri için mükemmel içerik yönetim sistemleridir.

Tasarım açısından güçlü değiller, ancak son derece özelleştirilebilirler ve planınızdaki herhangi bir web sitesini idare edebilirler..

Bazen, projenizin karmaşıklığına bağlı olarak, ustalaşmak için çok daha fazla zaman ve daha fazla çaba gerektirebilirler..

Daha ayrıntılı eğitim için Lynda.com’da hem Joomla hem de Drupal için harika kurslar var.

Bu bölümden sonra hazır olması gerekenler:

  • WordPress veya başka bir platform kullanmaya karar verseniz de, web sitenizin ilk taslağı tamamen oluşturuldu.
  • İlk hedeflerinize, hedef kitleye uygun olduğundan ve iyi bir UX sağladığından emin olun.

BÖLÜM 7: Mobil Duyarlı Tasarım

İnsanların% 60’ından fazlası web’e göz atmak için cep telefonları ve tabletler kullanıyor

Mobil duyarlılık artık web sitesi oluşturmanın çok önemli bir yönü, muhtemelen hiç olmadığı kadar.

İşte tüm mesele hakkında:

Temel olarak, şu anda, web’e erişmek için her zamankinden daha fazla mobil cihaz kullanıyor. Aslında, artık masaüstü internet kullanıcılarından daha fazla mobil internet kullanıcısı olduğu tahmin edilmektedir (% 75,1’e karşı% 52,7).

Ama bir sorun var.

Her web sitesi tasarımı, doğrudan mobil cihazlarda görüntülenmek üzere optimize edilmeyecek.

Bazı yaygın sorunlar şunları içerir:

  • yazı tipleri çok küçük,
  • düzenin kendisi daha küçük bir ekrana ayarlanmıyor,
  • veya siteyi mobil cihazlarda bulunmayan şekilde oluşturmak için kullanılan teknoloji.

Mobil duyarlılık fikri burada devreye giriyor.

Duyarlı bir web sitesi, görüntülendiği ortama yanıt verir. Bir masaüstü bilgisayarsa, web sitesi belirli bir şekilde oluşturulur. Mobil bir cihazsa, başka bir şekilde.

İşte daha iyi bir açıklama: Heck Duyarlı Web Tasarım Nedir?

Şu anda yapılacak şey, web sitenizin mobil cihazlarda çalıştığından emin olmak ve kontrol etmek olacaktır. Bunu kontrol etmek için kendi cihazlarınızı kullanın, aynı zamanda Google’ın mobil testini deneyin veya Duyarlı Tasarım Test Aracı gibi bir araca atlayın.

Sorunlar varsa, bunları düzeltmeniz gerekir.

Bazı çözümler:

  • Duyarlı Web Tasarımı – nasıl yapılır
  • Web Sitesini Yaklaşık 15 Dakikada Duyarlı Yapma

BÖLÜM 8: Hepsini bir araya getirmek

Temelleri biliyorsunuz, şimdi sıra sizde

Bekle, neredeyse oradayız!

Bu oldukça uzun yolculuğumuzun son bölümü.

Bu noktada, ilk web sitenizi oluşturmalısınız … İster WordPress, elle inşa edilmiş HTML / CSS, bazı web sitesi oluşturucu veya iş için seçtiğiniz diğer araçlar olsun.

Kısacası tebrikler! Ama hala yapmaya değer birkaç şey var:

  • Bölüm 1 ve 2’de tartıştığımız şeyleri tekrar kontrol edin. Hedeflerin son kullanıcı için gerçekten işe yaradığından ve web sitesinin kafa karıştırıcı olmadığından emin olun.
  • W3C’nin biçimlendirme doğrulama hizmeti aracılığıyla kod yapınızı doğrulayın.
  • Siteyle ilgili herhangi bir güvenlik sorunu olup olmadığını kontrol edin. Bunun için Sucuri’nin tarayıcısını kullanın.
  • Topluluktan geri bildirim alın. Başkalarının işiniz hakkında ne düşündüğünü kontrol edin. Sitepoint’taki forumlar bunun için iyi olabilir.

Bu kaynağı ilk okuduysanız, birkaç kez geri dönmenizi ve daha sonraki eğitiminiz için bir referans dosyası olarak değerlendirmenizi gerçekten öneririz..

Başlangıçta söylediğimiz gibi, İçindekiler’i kullanmaktan çekinmeyin ve uygun gördüğünüzde bölümden bölüme ve kaynaktan kaynağa gidin.

Son olarak, merak ediyoruz… Web sitesi oluşturma, web geliştirme veya tasarım söz konusu olduğunda en büyük zorluğunuz nedir? Lütfen yorumlarda veya Twitter üzerinden paylaşın. Hepimiz kulakız!

Okuduğunuz için teşekkürler, harikasın!

  • Total116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map