Designmodo'nun (2021) Başlangıç Çerçevesinde Çalışan En İyi 20 Site Örneği
Yayınlanan: 2021-11-04Aralarından seçim yapabileceğiniz pek çok farklı web sitesi oluşturucu ile hangisinin sizin için doğru olduğunu bilmek zor olabilir. Bazen, tasarımın aradığınız şeyle uyuşup uyuşmadığını görmek için bunlarla oluşturulmuş mevcut site örneklerine bakmak yardımcı olur. Bunu akılda tutarak, Designmodo tarafından Startup Framework üzerinde çalışan 20 site örneğinin bir listesini derledik.
Aşağıdaki örnekler, Designmodo'nun Startup Bootstrap oluşturucusunun neler yapabileceğine dair bir fikir vermenize yardımcı olacaktır ve umarım, tasarım ilhamı da sağlar!
Ama önce, Startup Framework'ün tam olarak ne olduğuna daha yakından bakalım.
Başlangıç Çerçevesi nedir?
Startup, Designmodo'nun Bootstrap ön uç çerçevesi üzerine inşa edilmiş tarayıcı tabanlı bir tema oluşturucusudur. Piyasadaki en güçlü web sitesi oluşturma araçlarından biridir ve yeni girişimlerin web sitelerini oluşturmasını ve hızlı bir şekilde kullanıma hazır hale getirmesini kolaylaştırır.
Herhangi bir kodlama olmadan güzel, profesyonelce tasarlanmış bir web sitesi oluşturmak için Başlangıç Çerçevesini kullanabilirsiniz. Sezgisel bir sürükle ve bırak arayüzü ve önceden tasarlanmış 300'den fazla blok/öğe kullanarak her sayfayı tamamen ön uçta sıfırdan oluşturabilirsiniz.
Aralarından seçim yapabileceğiniz çok çeşitli şablonlar ve neredeyse sonsuz özelleştirme seçenekleri vardır, böylece web sitenizin tasarımında tam istediğiniz özelliklere göre ince ayar yapabilirsiniz.
Sürükle ve bırak aracı çok başlangıç dostudur, dışa aktarma hızlı ve kolaydır ve tek tıklamayla global stil değişiklikleri yapabilirsiniz. Bileşenler tutarlı bir stil ve Designmodo'nun popüler Flat UI'sini kullanır
En İyi Designmodo Başlangıç Çerçevesi Web Sitesi Örnekleri
Pekala, listeye geçelim. Designmodo tarafından Startup Framework ile oluşturulmuş 20 site örneği.
1. Sanal

Sanal asistanlık sitesi Zirtual'a bir göz atarak işe başlayalım. Multimedya ve metin arasında iyi bir denge ile düzgün, profesyonel görünümlü bir web sitesini bir araya getirmek için başlangıç çerçevesini kullandılar. Ana sayfa net bölümler halinde düzenlenmiştir.
Sayfada çok fazla boş alan ve minimum dağınıklık var, bu nedenle oradaki öğeler göze çarpıyor. Yeşil CTA düğmeleri, sayfadaki diğer renklerle tam bir zıtlık içindedir, bu da onları gözden kaçırmayı imkansız hale getirir ve TO'ları iyileştirir.
2. Piksel toplamı

Sırada, Pixelsum. Bu bir web tasarım ajansının web sitesidir, bu yüzden iyi olacağını bilirsiniz. İki Designmodo ürünü kullanılarak oluşturuldu: Başlangıç ve Slaytlar. İşte en çok sevdiğimiz şey bu.
Öncelikle, okunabilirliğe yardımcı olan ve web sitesi ziyaretçilerinin dikkatini istediğiniz yere yönlendirmeye yardımcı olan bol miktarda beyaz alan var. Sayfayı aşağı kaydırdıkça resimler ve metinler yavaş yavaş yüklenir. Harika görünmenin ve sayfaya bir etkileşim unsuru eklemenin yanı sıra, bu aynı zamanda sayfa yükleme hızlarına da yardımcı olur.
Ekranın altındaki öğeler yalnızca kullanıcı aşağı kaydırdığında yüklendiğinden, sayfanın daha hızlı yüklenebilmesi için ilk sayfa boyutunu minimumda tutmaya yardımcı olur, böylece SEO'yu artırır ve kullanıcı deneyimini geliştirir.
Çizimler güzel tasarlanmış ve marka kişiliğini aktarmaya yardımcı oluyor ve tüm site hem masaüstü hem de mobil cihazlarda harika görünüyor.
3. Edurio

İşte okul anket platformu Edurio'dan Startup Framework üzerinde çalışan bir sitenin harika bir örneği. Pixelsum'da olduğu gibi, siz aşağı kaydırdıkça sayfadaki farklı öğeler kaybolur ve platform hakkında azar azar daha fazla bilgi ortaya çıkar. Tam genişlikte bloklar, net kenarlıklar ve yeşil ve beyaz renk şeması, onu düzenli ve profesyonel görünmesini sağlar.
4. Zaman gözü

Timeneye, ekibinizin üretkenliğini izlemeyi kolaylaştıran bir zaman izleme yazılımı sağlayıcısıdır. Web siteleri Designmodo'nun Başlangıç Çerçevesi ile oluşturulmuştur ve ürünlerini sergilemek için harika bir iş çıkarır.
Yazılımlarının ekstra büyük görüntüsü ana sayfanın ön planında yer alır ve ekrana hakim olur, kullanıcının dikkatini hızla çeker ve ürünü ön plana çıkarır.
5. Rıza

Rezi, web sitesini hayata geçirmek için Başlangıç Çerçevesini kullanan, yapay zeka destekli bir ATS özgeçmiş oluşturucusudur. Başarılarının bir kısmını inşaatçıya atfediyorlar ve buna 'şirketimiz için inanılmaz bir katma değer' diyorlar.
Ana sayfa, ürünü çalışırken gösteren bir otomatik oynatma videosu, zarif fiyatlandırma tabloları, referanslar ve ekranın alt kısmında bir ızgara düzenine göre düzenlenmiş harika bir şablon seçimi ile güzel bir şekilde düzenlenmiştir.
Web sitesi tamamen duyarlı, dönüşümler için optimize edilmiş ve tüm cihazlarda harika görünüyor. Ve en iyi yanı, Başlangıç Çerçevesi sayesinde, yaratıcılar herhangi bir kodlama deneyimi olmadan bunu oluşturabildiler.
6. 450 GSM

Baskı şirketi 450 GSM, Startup Framework'ü burada harika bir şekilde kullandı. Tasarımcı, markasına mükemmel şekilde uyan hoş bir estetik yaratmak için bol miktarda beyaz alan, minimalist bir renkli ekran ve çokgen grafiklerin hoş bir kombinasyonunu kullanmış.
7. Yisual

Yisual, her türlü promosyon materyalini yapmak için kullanılabilecek güçlü bir düzenleme aracı sunan Hollandalı bir web sitesidir. Ana sayfanın üst kısmındaki tam genişlikte resim kaydırıcı, Yisual'ın tüm avantajlarını ziyaretçilere tek tek tanıtmak için birkaç saniyede bir farklı promosyon mesajları arasında otomatik olarak geçiş yapar.
Düz tasarım harika görünüyor, yapı net ve yüksek oranda okunabilir ve gezinme sorunsuz. Farenizi üzerine getirdiğinizde animasyonlu logonun hareket etme şekli de hoş bir dokunuş.
8. Dijital Faktör

İşte Başlangıç Çerçevesini kullanarak güzel bir web sitesini bir araya getiren başka bir Hollandalı şirket. Yenilikçi bir faturalandırma aracı sunuyorlar ve bunu açılış sayfalarında satarak harika bir iş çıkardılar.
Ana sayfanın üst kısmında, değer önermelerini gösteren bir başlık ve ziyaretçinin e-posta adresini alıp posta listesine almak için tasarlanmış bir CTA/form alanı hakimdir.
Aşağı kaydırdığınızda, göreceğiniz ilk şey, müşterinin görmek istediği tüm özellikleri vurgulayan bir Digitale Factuur faturasının büyük, açıklamalı bir görüntüsüdür. Ardından, Akıllı Telefon uygulamasının en önemli özelliklerinin tümünün etiketlendiği, açıklamalı başka bir büyük resmi.
Bu tür görsel görseller, ziyaretçinin metin duvarlarını okumak zorunda kalmadan şirket ve ürün hakkında daha fazla bilgi edinmesini kolaylaştırır. Bunun yerine, bilmeleri gereken her şeyi öğrenmek için güzelce düzenlenmiş resimlere bakabilirler.
9. Evrensel Medya

Universal Media tarafından hazırlanan bu web sitesinin tasarımı çok ilginç. Sayfayı birkaç farklı bölüme ayıran yenilikçi bir sayfa düzeni kullandılar. Ziyaretçiler, sorunsuz bir şekilde aşağı kaydırmak yerine sayfa blokları arasında hareket eder. Kaydırmaya çalışmak, kullanıcıyı otomatik olarak büyük bir parçadan sonraki bölüme taşır.

Paralaks kayan arka plan resimleri ve çarpıcı tam genişlikteki tasarımları, bu sayfayı bu listedeki en yaratıcı görünen sayfalardan biri haline getiriyor.
10. Hediye Kapalı

USP: çok hareketli site. Sayfayı aşağı kaydırdıkça, animasyonlar gözlerinizin önünde açılıyor. Örneğin sayaç
GiftOff'un Startup destekli web sitesi eğlenceli, etkileşimli ve yaratıcıdır. Daha dinamik ve etkileşimli hissettirmek için, hareketli bir müşteri sayacı gibi ince gradyanlar ve şık animasyonlu öğeler kullanır. Çok fazla boş alan var, bu yüzden dağınıklık hissi vermiyor ve genel yapı harika. Tamamen duyarlı ve masaüstü bilgisayarlarda olduğu kadar mobil ve tablet cihazlarda da iyi görünüyor.
11. Oyun

Vyte, Başlangıç Çerçevesi ile oluşturulmuş mükemmel bir açılış sayfası örneğidir. Akıllı, hepsi bir arada planlama uygulamalarını sergilemek ve satmak için sitelerini kullanıyorlar.
Web sitesi basit ve temiz, beyaz bir arka plan ve basit çizimlerin yanı sıra ana özellikleri vurgulamak için az miktarda metin var. Mesajını kısa ve öz bir şekilde iletir ve doğrudan konuya girer.
12. KırkAU

Startup Framework, FortyAU'daki tasarım ekibinin, markalarını pazarlamak için bu mükemmel web sitesini oluşturmasına izin verdi. Sayfanın üst kısmındaki dinamik başlık metni, müşterilere FortyAU geliştirici ekibinin oluşturabileceği her şeyi anlatmak için farklı kelimeler arasında geçiş yapar.
Web sitesi kullanıcılarının dikkatini çekmek ve dikkatlerini istedikleri yere yönlendirmek için CTA düğmeleri ve temel özellikler gibi en önemli unsurlara markalarının sarı tonunun sıçraması ile ağırlıklı olarak siyah ve beyaz bir renk paleti kullanırlar.
13. Gıda astarı

Foodliner, Belarus'ta faaliyet gösteren önemli bir gıda tedarikçisidir. Web siteleri Startup Framework ile oluşturulmuştur ve ağız sulandıran gıda ürünlerinin büyük resimlerinden oluşan kayan bir atlıkarınca içerir. Baktıkça acıkıyorum!
Web sitesi tasarımcısı, güzel bir fotoğraf ve basit tuval karışımıyla harika bir web sitesi oluşturdu. Dağınık veya dağınık hissetmiyor ve beyaz alanın cömert kullanımı okumayı kolaylaştırıyor.
14. Giacomo Golinelli

İşte kültürel antropolog ve web tasarımcısı Giacomo Golinelli'den harika bir web sitesi daha. Kişisel web sitesi, düzgün renk kombinasyonları ve temiz düz çizgi düzeni ile harika görünüyor.
Farenizi farklı web sitesi şeritlerinin üzerine getirdiğinizde, arka plan kaybolur ve metnin rengi beyazdan siyaha değişir. Bu, onu çok duyarlı ve etkileşimli hissettirir ve ayrıca okunabilirliğe yardımcı olur.
15. Ekim

Etkileyici pazarlama platformu Octoly'nin bu web sitesi tam olarak yapması gerekeni yapıyor: ziyaretçileri harekete geçmeye ikna ediyor. Ana sayfa harika görünen harika, yaratıcı özelliklerle dolu.
En üstte, kullanıcı tıklamak için iki düğme arasından seçim yapabilir: "Ben bir influencer'ım" veya "Ben bir markayım". Bu, onları anında iki farklı müşteri türüne ayırır ve onları doğrudan ihtiyaç duydukları bilgilerle birlikte ana sayfanın bölümüne götürür.
Ekranın hemen altındaki ızgara, sosyal kanıt olarak hizmet etmek üzere, Octoly'nin yardımcı olduğu marka/etkileyici işbirliklerinin sayısı gibi bazı önemli sayılara ziyaretçinin dikkatini çekmek için animasyonlu sayaçlar kullanır. Potansiyel bir müşterinin görmek isteyeceği her şeye sahiptir: özellikler ve avantajlar, vaka çalışmaları, referanslar ve daha fazlası.
16. Merkez Personeli

İşte Hubstaff'tan bir Designmodo Başlangıç Çerçevesi sitesinin harika bir örneği. Ana sayfanın çoğu için iki sütunlu bir yapı kullanır; bir taraf metin için, bir taraf resimler/video öğeleri için.
Sayfanın üst kısmında, bir video oynatıcı otomatik olarak oynatılarak kullanıcıya zaman izleme yazılımının çalışırkenki çekimlerini sunar. Bunun yanında, bir oynat düğmesi, kullanıcıyı daha fazla bilgi edinmek için tıklamaya davet eder. Tıkladıklarında, video oynatıcı, tam videoyu onlar için oynatmak için tam ekran açılır pencerede görünür.
Açık mavi ve beyaz tonlarının cömert kullanımıyla düzenli ve profesyonel renk paleti ve çok dinamik hissettiren bir dizi hareketli sayfa öğesi vardır.
17. SHN

SHN web sitesi, temel özellikleri ön plana çıkaran sade ve basit bir düzen kullanır. Tasarım net, temiz ve dikkat çekicidir ve odak içerik üzerindedir.
18. Apartman Dairesi

Apartable, sitesi Startup Framework ile oluşturulmuş bir emlak ajansıdır. Beklediğiniz gibi, sayfa doğrudan kovalamacaya girer ve müşterileri o bölgede daire bulmak için bir şehir veya posta kodu girmeye davet eden bir arama çubuğu tarafından yönetilir. Sayfanın hemen altında Apartable'ın ana avantajlarını vurgulayan 3 sütun dışında sayfada çok az şey var.
19. Jezierski

Polonyalı pencere üreticileri Jezierski, bu çarpıcı web sitesinde pencerelerini güzel bir şekilde sergiliyor. Sayfanın üst kısmındaki resim karuseli, ana faydaları vurgulayan metinlerle kaplanmış, pencerelerinin gerçek hayattan örneklerini gösterir.
20. kırıntıları

Son olarak, Startup from Crumbs ile oluşturulmuş son bir web sitesi örneği. Sadedir, zariftir, zariftir. Ve en önemlisi, ağız sulandıran yemek görüntüleriyle dolu. Daha söylenecek ne var?
Son düşünceler
İşte orada, Designmodo tarafından Startup Framework üzerinde çalışan 20 site örneği. Umarım, bu örneklerden yaratıcı bir ilham alabilmişsinizdir ve kendi web siteniz için bazı fikirler toplamışsınızdır.
Buradayken, diğer web sitesi oluşturucularla oluşturulmuş daha da fazla site örneği için diğer gönderilerimizden bazılarına göz atın.
Burada Webflow veya burada Weebly ile oluşturulmuş siteler listemizle başlamak isteyebilirsiniz.
Zevk almak!