Kodda Web Siteleri Oluşturmada Uzmanlaşma

Bu dersimde Squarespace konusunda çok yakından takip ettiğim web tasarımcılarından bazılarını sizlerle paylaşmak istiyorum. Ayrıca eğitim sürecimde bana çok yardımcı olan ve sıklıkla danışmaya devam ettiğim tasarım ve genel olarak web tasarımı ile ilgili bazı kitap ve blogları da size göstereceğim.

Etkiler | Mónica Durán

Bana her gün ilham verecek yaratıcı referanslara sahip olmak ve sürekli öğrenmek benim için çok önemli. Bu derste size bugün beni en çok hangi stüdyoların ve tasarımcıların büyülediğini göstereceğim.

Etkiler | Isa Macías

Modül 2

Hikaye anlatımının tasarımı nasıl şekillendirebileceğini görmeye hazır mısın? Google, Amazon ve YouTube deneyimine sahip Juan Mora, anlatı teknikleriyle basit bir açılış sayfasını nasıl unutulmaz bir deneyime dönüştürebileceğini gösteriyor. Figma ile uygulamalı çalış ve sadece güzel görünen değil, kullanıcılarla gerçekten bağ kuran tasarımlar oluşturmaya başla.

1 ders (1h 46m)

Açılış sayfası türleri

Bu derste farklı açılış sayfası türlerini öğreneceksiniz ve ben de size gerçekleştireceğiniz proje için hangisinin en uygun olduğunu nasıl belirleyeceğinizi öğreteceğim.

İyi bir açılış sayfası nedir?

Şimdi size etkili bir web sitesini oluşturan unsurların nasıl belirleneceğini birkaç örnekle açıklayacağım.

İçerikte hiyerarşi nedir?

Bu derste size içeriğin nasıl önceliklendirileceğini ve bir açılış sayfasının hikaye anlatımındaki önemini anlatacağım.

Kontrast, görsel denge ve 3 saniye kuralı

Son olarak, bir yükleme sayfasında gezinmede kontrast ve dengenin oynadığı rolü analiz edeceğiz. Ayrıca 3 saniye kuralını kendi avantajımıza nasıl kullanabileceğimizi de göreceğiz.

Özet ve nasıl araştırılacağı

Özet, müşterinin ihtiyaçlarını anlamamıza yardımcı olan belgedir. Bu derste size bir brifingi yorumlayarak nasıl araştırma yapacağınızı öğreteceğim.

Açılış sayfasının içerik yapısı

Şimdi size daha önce yapılan araştırmalara dayanarak bir hikaye anlatmak için içeriği nasıl düzenleyeceğinizi öğreteceğim.

Bir ruh hali panosu nasıl yapılır

Bu derste analiz, ilham ve hata ayıklama aracı olarak ruh hali panosunun nasıl oluşturulacağını göreceğiz.

Doğru tipografi

Son olarak sizinle tipografinin öneminden bahsedeceğim ve elinizdeki projeye en iyi şekilde uyacak şekilde tipografiyi nasıl seçeceğinizi açıklayacağım.

Tarih oluşturma

Bu derste insanların bir ürün, sistem veya hizmetle etkileşime girdiklerinde davranışlarını dikkate almayı öğreneceksiniz. Ayrıca bu bilgiyi, planlamada önerilen yapıyla birlikte hikayenizi düzenlemek için bir temel olarak nasıl kullanacağınızı da öğrenin.

Tüm malzemeyi tuvalin üzerine koyun!

Açılış sayfanızın tasarımına başlamak için kurs sırasında topladığınız tüm unsurları tuval üzerine yerleştirmenin zamanı geldi. Bu derste bunun nasıl yapılacağını açıklayacağım.

Açılış sayfanız için ihtiyaç duyduğunuz varlıkları oluşturun

Son olarak internette bulduğunuz materyallerden kendi varlıklarınızı nasıl yaratacağınızı anlatacağım. Ayrıca onları nerede arayacağınızı da tavsiye edeceğim.

Bu derste size açılış sayfanızı şekillendirecek stil kılavuzunu nasıl oluşturacağınızı öğreteceğim. Tasarıma tutarlılık ve birlik kazandırmak için grafik ve tipografik unsurları tanımlamamız gerekecek.

Tasarım tanımı

Tasarımınızı güzelleştirin: geri bildirim

Şu ana kadar yaptıklarımız hakkında geri bildirim almanın zamanı geldi. Bu şekilde kurs projesinin son tasarımını elde etmek için gerekli detayları ayarlayabiliriz.

Müşteri sunumu

Bu dersimizde projenizi müşterinize nasıl sunacağınızı ve ne yaptığınızı göstermek için aldığınız kararları açıklarken nelere dikkat etmeniz gerektiğini göstereceğim.

Modül 3

Yaratıcı çalışma sürecin çok çabuk dağınık hâle mi geliyor? Projelerine netlik ve tutarlılık kazandırmak için bu senin fırsatın. Tasarım sistemlerinin sürecini nasıl sadeleştireceğini ve web tasarımlarını nasıl geliştireceğini keşfet. Ana aracın olarak Figma ile, zaman kazandıran ve işini parlatan akıllı yapıları inceleyeceksin.

1 ders (4h 51m)

Tasarım Sistemlerine Giriş

Bu derste tasarım sistemlerinin ne olduğuna ve bunların tipik olarak nasıl kullanıldığına dair kısa bir genel bakış sunacağım. Ayrıca sürecimin tam olarak nasıl işlediğini ve benim için neden faydalı olduğunu da anlatacağım.

Tasarım Sistemleri İş Akışınızı Hızlandırmanıza Nasıl Yardımcı Olabilir?

Daha sonra, küresel tarzların ve bileşenlerin ne kadar yararlı olduğunu gözden geçirerek, tasarım sistemlerinin verimliliğinizi artırmanıza nasıl yardımcı olabileceğine dair bazı kısa örnekler vereceğim.

Projeye Giriş ve Yaklaşım

Şimdi üzerinde çalışacağımız projeye geçelim! Başarılı bir başlangıç yapabilmek için neye ihtiyacımız olduğuna dair genel bir döküm oluşturacağım.

Figma Dosyasının Kurulumu ve İlk Araştırmalara Başlamak 1

Öncelikle Figma'da tasarım sistemlerinin nasıl oluşturulabileceğine değineceğim. Daha sonra ilk keşiflere başlayacağım ve bazı başlangıç bileşenlerini toplayacağım.

Figma Dosyasını Kurmak ve İlk Araştırmalara Başlamak 2

Bu ilk tasarım araştırmalarıyla aklımıza gelen tüm fikirlerle oynayabiliriz. Biraz daha görelim!

Keşif ve Tasarım Sisteminin Genişletilmesi 1

Tasarımlarımı ve mizanpajlarımı ve ayrıca tasarım sisteminin kendisini genişletmeye devam edeceğim. Bileşenleri ve otomatik düzenleri nasıl kullandığımı göreceksiniz, böylece nasıl çalıştığına dair biraz fikir sahibi olacaksınız.

Keşif ve Tasarım Sisteminin Genişletilmesi 2

Projeyi hangi yöne götürmeyi tercih edeceğimize dair daha net bir fikre sahip olduğumuzda, başlangıçtaki seçimlerimizden bazılarını gözden geçirir ve mizanpajlar boyunca genel stillerimizi güncelleriz. Bakalım projem nasıl gelişecek!

Tasarım Sistemi Sayfalarının Düzenlenmesi 1

Bu derste, oluşturduğum bileşenlerin ve stillerin üzerinden geçeceğim ve yapı hakkında ilk fikir edinmek için bunları özel sayfalara yerleştirmeye başlayacağım.

Tasarım Sistemi Sayfalarının Düzenlenmesi 2

Tasarım sistemi dosyalarımı geliştirmeye devam edeceğim. Bir tasarım sistemi kütüphanesini bu erken aşamalarda hassaslaştırabilmenin, projenin sonunda, son devir için her şeyi hazırlarken harcayacağı süreyi azaltabileceğini unutmayın.

Bileşenleri Oluştururken Değişkenleri Keşfetmek

Bu dersimizde bileşenlere biraz daha derinden bakacağız; Araç setimizi daha da genişletmek için varyantları nasıl kullanabileceğimizi anlayacaksınız. Ayrıca Figma'da adlandırma kurallarının nasıl devreye girdiğini ve hangi özellikleri vurgulamak ve bunlara kolay erişim sağlamak istediğinizi nerede keşfedebileceğinizi daha iyi anlayacaksınız.

Tasarım Sisteminin Birleştirilmiş Bir Şekilde Geliştirilmesi Sayfa 1

Bu dersimizde daha da geliştirilmiş bir tasarımı ele alacağız. Şimdi bu aşamada keşiflerimde birkaç tekrardan geçtim ve oldukça memnun olduğum bir yöne indim. Buradan itibaren bileşenler ve otomatik düzenler oluşturmaya daha derinlemesine bakacağız. Ayrıca bu araçları birleştirmenin daha dinamik akışlar ve düzenler oluşturmamıza nasıl yardımcı olabileceğine de bakacağız.

Tasarım Sisteminin Montajlı Bir Şekilde Geliştirilmesi Sayfa 2

Tasarım sistemini geliştirmeye devam edeceğim. Genel olarak çok sayıda yinelenen içeriğe, içerik indeksine veya arşive sahip web siteleriyle çalışırken birden fazla otomatik düzeni, bileşeni ve örneği iç içe yerleştirmenin son derece yararlı olduğunu düşünüyorum.

Tasarım Sisteminin Montajlı Bir Şekilde Geliştirilmesi Sayfa 3

Bileşenler ve otomatik düzen ile tek bir düzen oluşturmak için biraz daha fazla zaman harcamak, farklı içerik formatlarının farklı durumlarda nasıl çalışabileceğini görmenize yardımcı olacaktır. Birkaç ince ayardan sonra üzerinde çalıştığımız içeriğin aslında başlangıçtaki vizyonumuzla uyuşmadığını fark edersek, konseptimizin nasıl olduğunu daha iyi anlayabilmek için farklı içerik parçalarının birden fazla örneğini aynı anda değiştirebiliriz. gerçek dünya ortamında kullanılabilir. Bakalım bu tasarım sistemi ve web sitesi nasıl yapılandırılacak.

15m

Eksiksiz Tasarım Sistemiyle Yeni Sayfalar Oluşturma 1

Şimdi web tasarımlarını yeni sayfalarla genişleteceğim: blog arşivi, iletişim sayfası ve ürün galerisi. Bir sonraki adım, tasarım sistemini teste tabi tutmak ve hangi öğelerin çalıştığını, nelerin değiştirilmesi gerektiğini ve nelerin eklenmesi gerektiğini görmek olacaktır.

Eksiksiz Tasarım Sistemi 2 ile Yeni Sayfalar Oluşturma

Blog arşivi ve blog yazısı oluşturduktan sonra size nasıl iletişim sayfası oluşturulacağını göstereceğim. Bu, yarattığımız tasarım sisteminin bu yeni unsurları hızlı bir şekilde oluşturmamıza nasıl yardımcı olabileceğini görmemizi sağlar.

Eksiksiz Tasarım Sistemi 3 ile Yeni Sayfalar Oluşturma

Burada, mağaza sayfası veya ürün galerisi olan son ek sayfayı nasıl oluşturduğumu göreceksiniz.

Tasarım Sistemine İlişkin Dokümantasyon Oluşturmaya Nasıl Yaklaşılmalı?

Bu derste, Notion ve Zeroheight kullanarak bir tasarım sistemi için dokümantasyon oluşturmaya yönelik iki örneği ele alacağım.

Otomatik Düzeni Temizleme ve Kullanma

Bu son aşamalarda web sitesini ve tasarım sistemini gözden geçirmek ve her şeyin doğru şekilde ayarlandığından ve standart notlarımızı kullandığından emin olmak için biraz zaman ayıracağız.

Tasarımın Diğer Marka Unsurlarında Kullanılması

Tasarım sistemimizin bir web sitesinde durması gerekmiyor. Bu derste size sosyal medya gönderileri ve kırtasiye gibi ek marka unsurları oluşturmada başlangıç noktası olarak oluşturduğum tasarım sistemini kullanmanın birkaç örneğini göstereceğim.

Ve bu bir sarma! Bu derste, tüm bu süreçle ilgili birkaç ek düşüncenin üzerinden geçeceğim.

Son düşünceler

Modül 4

Kod satırlarını unut — Webflow, sadece görsel tasarımla şık ve işlevsel web siteleri oluşturmanın kapılarını açıyor. Jan Losert rehberliğinde, boş bir sayfadan tamamen geliştirilmiş bir pazarlama sitesine geçecek ve kod gerektirmeyen sezgisel araçlarla her marka için dikkat çekici dijital deneyimler oluşturmayı öğreneceksin.

1 ders (5h 0m)

No-Code'a Giriş

Bu derste web sitelerinin nasıl oluşturulduğunu anlatacağım ve siz Webflow'u ve Webflow Üniversitesi'ndeki kaynaklar kütüphanesini keşfedeceksiniz.

Web Akışı Temel Özellikleri

Webflow'un sağladığı tüm panelleri ve özellikleri inceleyelim ve bu kursun yaratıcı yolculuğunu başlatmak için boş bir proje oluşturalım.

Tasarıma bakacağız ve proje başlamadan önce neye odaklanılması gerektiğini tartışacağız. Daha sonra projeniz için telifsiz görselleri nereden alabileceğinizi ele alacağım.

Tasarım

Stil rehberi

Bu dersimde neden her projenin başlangıcında bir temel kurup boş projeye font eklemem gerektiğini anlatacağım.

Stil Kılavuzu Oluşturma 1

Bu derste yaratmaya başlıyoruz! İlk olarak düğmeler ve tipografi gibi tüm başlangıç öğelerini ayarlayacağız.

Stil Kılavuzu Oluşturma 2

Şimdi bazı düğmeleri ve birleşik sınıfları keşfetmeye devam edeceğiz.

Web sitemizin üst bölümünü bir telefon ve bir dizi görselle oluşturarak başlayalım.

Kahraman Bölümü

Bu derste size web sitesi için gezinme menüsünün oluşturulması ve bunun nasıl duyarlı hale getirileceği hakkında konuşacağım. Navbar adlı bileşenin stilini oluşturacağız.

Navigasyon

Vaka Çalışması Bölümleri 1

Şimdi stüdyonun örnek olay incelemelerini ve bir işletmenin istatistiklerini içeren bölümleri temsil eden resim kartları oluşturacağız.

Örnek Olay İncelemesi Bölüm 2

Örnek olay bloğuna öğeler eklemeye devam edeceğiz.

Bu derste size resimler ve referanslardan oluşan bir kolaj bölümünün nasıl oluşturulacağını öğreteceğim.

Kolaj Bölüm 1

İşletmenin temel değerleriyle bir blok oluşturmak için üç sütunlu bölümü yeniden kullanacağız.

Kolaj Bölüm 2

Müşteriler Bölümü ve Basit Bülten Formu

Bu derste "birlikte çalıştık" müşteriler bölümü oluşturmaya bakacağız.

Sitenin son bölümünü (alt bilgi) oluşturmanın zamanı geldi.

Altbilgi

Bu derste tablet görünümünden başlayarak siteyi daha küçük görünüm alanları için hazırlayacağız. Ayrıca kap ve sarma sınıfımızın genişliği konusunda daha katı kurallar kullanarak hayatınızı kolaylaştıracak bazı ipuçları da paylaşacağım.

Tablet Görünümü

Mobil Yatay ve Portre Görünümü

Her şeyi daha da daraltacağız ve sitenin mobil portre ve yatayda harika görünmesini sağlayacağız.

Formları daha da derinlemesine inceleyeceğiz ve başarı ve hata durumlarını şekillendireceğiz. Daha sonra size gönderilen formları nerede bulacağınızı ve bunlarla neler yapabileceğinizi göstereceğim.

Test Formları

Etkileşimler

Son olarak kahraman bölümü için incelikli etkileşimler ekleyerek siteyi daha eğlenceli hale getirelim. Ardından, "Sayfa Yükleme" ile "Görünümde Kaydırma" etkileşimleri arasındaki farkı ele alacağım.

SEO Optimizasyonu ve Barındırma

Bu derste, SEO etiketlerinizi favicon olarak ayarlamaya ve ardından sitemizi bir Webflow barındırma planıyla yayına sokmaya bakacağız.

Bakım, Editör ve Varlıklar Paneli

Bakım hakkında konuşalım. Gelecekte daha fazla kişiyle çalışmak ve projenizi düzenli ve düzenli tutmak istiyorsanız siteyi nasıl hazırlamanız gerektiğini size göstereceğim.

CMS'yi keşfedin

Basit bir blogda size CMS'nin Webflow araç setinde nasıl çalıştığını göstereceğim. Daha sonra koleksiyonların nasıl oluşturulacağını ve statik sayfalardaki dinamik verilerin koleksiyon şablonlarına karşı nasıl kullanılacağını tartışacağım.

Web sitemizin amacını ve yapısını tanımlamak P1

Modül 5

Renk, yapı ve strateji bir araya geliyor; Mónica Durán, Squarespace ile kendi web siteni oluşturmanın yaratıcı özgürlüğünde sana rehberlik ediyor. Onun yönlendirmesiyle, kişisel ve profesyonel hissettiren dijital bir alan oluşturmayı keşfedeceksin — üstelik kod yazmadan. Çalışmalarını yansıtan ve doğru kitleyi çeken bir portföy tasarlamak için araçları ve teknikleri öğren.

1 ders (6h 13m)

İşlevsel (aynı zamanda çekici) bir web sitesi tasarlamak için, hangi hedefe ulaşmamıza yardımcı olmasını istediğimiz konusunda çok net olmak önemlidir, çünkü buna dayanarak web sitesinin yapısını ve sayfaların her birini organize edeceğiz.

Web sitemizin amacını ve yapısını tanımlamak P2

Bu derste, bu hedeflerin web sitesi içindeki tasarım kararlarıyla nasıl örtüştüğüne ve tasarımımıza dahil etmeye karar verdiğimiz unsurlara (hangilerini ve nasıl) ilişkin örnekleri göreceğiz.

Artık web sitemizin yapısını oluşturduğumuza göre, sahip olmasını istediğimiz görsel stili geniş anlamda tanımlayacağız. Yazı tiplerini ve renkleri nasıl birleştireceğinizi çok basit bir şekilde göreceğiz ve web siteniz için görsel bir stil oluşturmak için bunları nasıl kullanabileceğinize dair örnekler vereceğim. Ayrıca size ilham arayabileceğiniz bazı kaynaklar da vereceğim.

Sitemizin genel tarzı

Grafik dosyalarının oluşturulması, düzenlenmesi ve hazırlanması

Web sitemizde kullanacağımız tüm grafik kaynaklarına ve her sayfanın tasarımının genel taslağına zaten sahibiz... şimdi kullanacağımız tüm dosyaları, web sitesinde kullanım için optimize edilecek şekilde hazırlamanın zamanı geldi. Web'de ve Squarespace'te tasarım yaparken kolayca bulabileceğimiz şekilde düzenlenmiş.

Squarespace içerik bloğu arayüzünde yapılan değişiklikler

Bu derste Squarespce'de yapılan bazı son değişiklikleri kısaca açıklayacağım, böylece sonraki derslerde arayüzde göreceğiniz şeyler ile Squarespace sitenizi oluştururken göreceğiniz arayüz arasındaki farkları bilirsiniz.

Web siteniz için şablon nasıl seçilir

Bu dersimizde, yeni bir web sitesi oluşturacağımız zaman Squarespace'te bulacağımız farklı şablonları inceleyeceğiz. Projeniz için doğru olanı seçerken hangi özelliklere sahip olduklarını ve neleri dikkate almanız gerektiğini göreceğiz.

Squarespace'teki başlangıç ayarları

Oluşturulan hesapla tüm Squarespace yönetim panelini gezeceğiz, böylece farklı bölümlere aşina olursunuz: Sayfalar, Tasarım, Ticaret, Pazarlama, Analiz, Yorumlar, Yapılandırma ve Yardım. [textbox type=alert]Önemli not: Bu kursa ilişkin dersleri kaydettikten sonra Squarespace, yönetici panelinde Profiller veya Profiller olarak adlandırılan yeni bir bölüm başlattı. . Bu bölüm özellikle kurs içeriğiyle ilgili değildir ancak buradan profilleri görebileceğiniz ve yönetebileceğiniz için biraz incelemeye değer: - Müşteriler: kurulmuş bir çevrimiçi mağazanız varsa (ki bu kursta görmediğimiz bir şeydir) web sitenizden alışveriş yapan kişiler. - Aboneler: yerel Squarespace seçeneğini kullanırsanız posta listenize abone olan kişiler. Harici bir e-posta pazarlama aracı kullanıyorsanız (Mailchimp veya Mailerlite gibi), bunları buradan yönetemezsiniz. Squarespace yönetici panelinin bu yeni bölümü hakkında daha fazla bilgiyi bu bağlantıda bulabilirsiniz.[/textbox]

Squarespace'te Sayfa Oluşturma: Özellikleri ve Ayarları

Bu derste web sitesinin "mimarisini" oluşturmak için Squarespace'te sahip olduğumuz farklı türdeki öğeleri açıklayacağım: Her biri farklı işlevlere ve özelliklere sahip olduğundan Sayfalar, Koleksiyonlar (veya Koleksiyon Sayfaları), Klasörler ve Bağlantılar.

Squarespace'teki İçerik Blokları

Artık Squarespace'te bir web sitesinin genel yapısının nasıl çalıştığını bildiğinize göre, her sayfanın yapısının nasıl oluşturulduğunu göreceğiz ve bunu daha iyi açıklamak için farklı İçerik Blokları ekleyeceğimiz bir sayfa oluşturacağız. Squarespace'deki herhangi bir sayfanın tasarımını oluşturan öğelerdir.

Squarespace'deki Sayfa Bölümleri

Artık Squarespace'te hangi içerik bloklarının bulunduğunu bildiğimize göre, web sitesindeki sayfaların her birinin tasarımını oluşturmak için bunları sayfa bölümleriyle nasıl entegre edeceğimizi göreceğiz.

Ev, Hizmetler, Hakkımda ve İletişim sayfalarının tasarımı ve yapılandırılması P1

Ünite 2'de yaptığımız eskizlerden ve çalışma kitabımıza eklediğimiz içeriklerden tüm bölümleri, metinleri ve görselleriyle birlikte Ana Sayfa, Hakkımda, Hizmetlerim ve İletişim sayfalarını oluşturacağız.

Ev, Hizmetler, Hakkımda ve İletişim sayfalarının tasarımı ve yapılandırılması P2

Şimdilik renkler veya yazı tipleri konusunda endişelenmeyin, çünkü bunu daha sonra ayarlayacağız: şimdi önemli olan sayfaların yapısını oluşturmaktır.

Ev, Hizmetler, Hakkımda ve İletişim sayfalarının tasarımı ve yapılandırılması P3

İletişim sayfasında size nasıl form ekleyeceğinizi ve GDPR'ye (Genel Veri Koruma Yönetmeliği) uyum sağlamak için gerekli metni ve onay kutusunu eklemek için ne yapmanız gerektiğini göstereceğim.

P1 Portföy Sayfası Ayarları

Bu dersimizde web sitesine projeler içeren bir portföyün nasıl ekleneceğini göreceğiz. Ana portföy sayfanız için sahip olduğunuz farklı tasarım seçeneklerini, yeni projeleri nasıl ekleyeceğinizi ve belirli projelerde yapabileceğiniz farklı ayarlamaları size göstereceğim.

P2 Portföy Sayfası Ayarları

Şimdi web siteniz için bir Blogun nasıl yapılandırılacağını göreceğiz. Ana Blog sayfası için sahip olduğunuz farklı tasarım seçeneklerini, yeni gönderilerin nasıl ekleneceğini ve yayınlamadan önce her girişte yapmanız gereken farklı genel düzenlemeleri size öğreteceğim.

P1 Blog Yapılandırması

P2 Blog Yapılandırması

P3 Blog Yapılandırması

Altbilginin oluşturulması ve ana gezinmede ayarlamalar

Bu derste size web sitesinin altbilgisini (alt bilgi) Ünite 2'de tanımladığımız her şeyi içerecek şekilde nasıl yapılandıracağınızı öğreteceğim. Altbilgide değişiklik yapmanın çok basit ve çok esnek olduğunu göreceksiniz. Artık Squarespace'in bölümleri ve içerik blokları konusunda oldukça bilgili olduğunuza göre siteniz.

P1 sitesi yazı tipi ve renk yapılandırması

Bu derste size sitenin başlıklarının, alt başlıklarının ve gövde metninin stilini tanımlamanız gereken farklı seçenekleri göstereceğim. Varsayılan şablonla birlikte gelen yazı tiplerini nasıl değiştireceğinizi ve stilleri varsayılandan farklı şekilde değiştirmek için bazı ek ayarlamalar yapmayı öğreneceksiniz.

P2 sitesi yazı tipi ve renk yapılandırması

Görüntü ayarları ve diğer ayarlar

Renkler ve yazı tipleri hazır olduğundan, artık diğerlerinin yanı sıra genel site animasyonları, aralıklar, düğmeler, tarayıcı simgesi (favicon), sosyal ağlar için görsel, özel sayfa stilleri gibi görsel ayarlamaları ve diğer ayrıntıları yapmaya bakacağız.

Bonus: Squarespace 7.0'daki Web Sitesi Stilleri

Bu ders yalnızca Squarespace 7.0 sürümüne sahip olanlara yöneliktir. Burada Squarespace'in eski sürümünde tasarlanmış bir sitede yazı tiplerinde, renklerde ve diğer web öğelerinde nasıl ayarlamalar yapacağımızı göreceğiz.

Squarespace Marketing panelinde sahip olduğumuz öğeleri görelim ve size web sitesi için bir reklam çubuğunun yanı sıra bazı bilgileri tanıtmak veya abone çekmek için kullanabileceğiniz bir açılır pencerenin nasıl yapılandırılacağını öğreteceğim.

Pazarlama düzenlemeleri

Bu derste size sitenin yasal sayfalarını nasıl oluşturacağınızı ve bunları altbilgiye nasıl bağlayacağınızı öğreteceğim. Ayrıca size çerez başlık çubuğunu nasıl yapılandıracağınızı ve yapmanız gereken ayarları da göstereceğim ve web sitenize ek çerezler yükleyecekseniz daha gelişmiş bir çerez çubuğuna ihtiyaç duymanız durumunda size alternatif bir seçenek sunacağım. .

Genel gizlilik ayarları

Siteyi herkese açık hale getirelim P1

Son olarak web sitenizi herkese açık hale getirmek için gerekli adımları göreceğiz: Squarespace'in sahip olduğu farklı ödeme planları, özellikleri ve derste yapacağımız gibi bir web sitesi için hangisini önereceğim.

Siteyi herkese açık hale getirelim P2

Site Analizi Takibi

Son olarak sitenin Analytics panelini inceleyeceğiz: Size bölümlerine dair bir tur sunacağım ve siteden en iyi şekilde yararlanmanız için önerilerimi sunacağım.

Görsel referanslar: ilham almak için nereye bakmalı

Modül 6

Fikirlerini kişilik ve amaçla çevrimiçi ortama taşı; Isa Macías seni web tasarımına dair yaratıcı yaklaşımıyla yönlendirsin. Figma ile başlayıp Elementor eklentisiyle WordPress’e geçerek, stilini yansıtan ama aynı zamanda pratik ve kolay yönetilebilir kodsuz dinamik siteler oluşturmayı öğreneceksin.

1 ders (3h 23m)

Bu dersimde size bir web tasarım projesi geliştirirken ilham kaynağı olacak görsel referanslar aramanın benim için ne kadar önemli olduğunu anlatmak istiyorum. Ayrıca bu referansları nerede bulduğumu ve sakladığımı da anlatacağım, böylece tüm site tasarım süreci boyunca onları her zaman aklımda tutacağım.

Site haritası ve stil kılavuzu

Şimdi size, kullanıcının web sitenize geldiğinde izleyeceği yolu nasıl takip edeceğinizi öğreteceğim.Bu, hangi sayfaları tasarlamanız gerektiği ve bunların birbirleriyle nasıl bağlantılı olduğu konusunda size daha net bir fikir verecektir. Ayrıca web sitesi için istediğimiz genel unsurları ve stilleri bir araya getirecek küçük bir stil rehberinin nasıl oluşturulacağını da göreceğiz.

Tasarım teklifinin hazırlanması 1

Web sitesinin tüm görsel konseptini oluşturduktan sonra tasarım teklifini hazırlayacağız, bu sürecin en heyecan verici kısımlarından biri! Üstbilgiyi, altbilgiyi ve ana sayfamı tasarlayarak başlayacağım.

Tasarım teklifinin hazırlanması 2

Web sitesi haritasında tanımladığım bölümlerin geri kalanını Figma'da tasarlamaya devam ediyorum. Bu süreçte referanslarınızı aklınızda tutmayı unutmayın!

Bu derste size WordPress'in nasıl kurulacağını ve temel işleyişinin ne olduğunu öğreteceğim. Bu şekilde bu yazılımın tüm potansiyelini tanıyabilirsiniz.

WordPress'e başlarken

Şimdi tek satır kod yazmamıza gerek kalmadan tüm web tasarımını oluşturacağımız araç olan Elementor'u kuracağız.

Elementor'u yükleyin

Elementor 1'i tanıma

Stil rehberinde tanımladığımız tüm elementleri ve genel stilleri Elementor'a aktaracağız. Rehberimizde zaten her şeyi düşündüğümüz ve tanımladığımız için süreç çok kolay olacak!

Elementor 2'yi tanıma

Şimdi size bir önceki videoda gösterdiğim konfigürasyonların kısa bir özetini yapacağım. Daha sonra yazı tipi seti gibi diğer seçenekleri yapılandırmaya ve özelleştirmeye devam edeceğiz.

Bu derste size Elementor tema oluşturucusunun ne olduğunu ve neden onun bu kadar hayranı olduğumu açıklayacağım. Ek olarak, web sitenizin başlığını tasarlamak için bunu nasıl kullanacağınızı da öğreteceğim.

Üstbilgi ve altbilgi 1

Şimdi size Elementor ile web sitemin altbilgisini nasıl oluşturduğumu göstereceğim. Bu programla çalışmanın ne kadar hızlı olduğunu görüyor musunuz?

Üstbilgi ve altbilgi 2

Web sitesinin ilk bölümünü tasarlamanın zamanı geldi. Ana sayfa muhtemelen sitenizde görecekleri ilk sayfadır, bu yüzden her zaman en yaratıcı ve görsel olmayı sevdiğim yer burasıdır.

Ana sayfa

Bu derste, bireysel proje sayfasının tasarımını oluşturmak için Elementor şablon seçenekleriyle çalışacağız. Ve bu arada portföyümdeki tüm projeleri de dahil edeceğim.

Projeler için şablon 1

Şimdi size proje şablonumun duyarlı sürümüyle nasıl çalışacağımı göstereceğim.

Projeler için şablon 2

Size nasıl tasarım yapılacağını öğreteceğim bir sonraki şey, web sitesine yüklediğimiz tüm projelerin arşivleneceği ana portföy sayfasıdır.

Proje arşivi

"Hakkında" ve "İletişim"

Son olarak herhangi bir web sitesindeki iki temel bölüm üzerinde çalışacağız: "Hakkında" sayfası ve "İletişim" sayfası.

15m

İkincil sayfalar: gizlilik, 404 ve bakım

Bu derste size sitenizin önceden görünmeyen ama hala orada olan bazı ikincil bölümlerinden bahsedeceğim. Ayrıca web sitenizi nasıl bakım moduna geçireceğinizi de öğreteceğim.