Tasarımcınız orada olmadığında geliştiriciler için 15+ tasarım ipucu

Aceleyle bir şey tasarlamanız gereken zamanlar vardır ve tasarımcılar hiçbir yerde bulunamaz. Böyle zamanlarda oturup ağlayamayız – tasarımı hacklemeliyiz. İşte acil bir son tarih olsa bile, herhangi bir geliştiriciyi başarı için hazırlayacak bazı rahat WordPress tasarım ipuçları. Acele ediyorsanız ayarlarınızı akıllıca seçin, daha önce tasarlanmış olan düzen ve demo sayfasıyla WordPress temasını bulun. Düzeni hızlı bir şekilde ayarlamak ve düzenlemek ve mevcut bir öğe eklemek için elementorlar veya kunduz üreticileri gibi görsel yapımcıları kullanın. Böylece, fonksiyonel sitelere sahip olabilir ve birkaç saat içinde çalışabilirsiniz. Evet, dikkatli değilseniz, ancak başarılı olursa bu oldukça yaygın görünebilir. Sizin yapmak için özel tasarımlar ve animasyonlar eklemeyi düşünün.
İnce olun Bu, herkesin size verebileceği en önemli ipuçlarından biri olabilir. Estetik ve tasarıma dikkat eden tasarımcılar ara sıra delirebilir. Bununla birlikte, doğuştan gelen 6 mavi versiyondan bahsetme yeteneğiyle doğmazsanız, pürüzsüz kalması daha güvenlidir. Burada veya orada renkli sıçramalar ve bazı ince animasyonlarla minimalist bir tasarım deneyin. Minimalist tarzın başarılı olması için iyi bir minimalist tasarım örnekleri, ayrıntılara ekstra çaba göstermelisiniz. Neyse ki sizin için, bahsettiğim detaylar en çok bildiğiniz bir şey kullanılarak düzenlenebilir.
Yapmakta iyi olmadığınızı biliyorsanız Photoshop veya Illustrator kullanmayın, bu yüzden Photoshop’u 10+ yıldır aktif olarak kullandım ve Photoshop Upwork testinde hala “C” alıyorum. Photoshop işlevinin sadece% 30’unu aktif olarak kullandığımı öğrendiğimde sürprizimi hayal edin. Aynı şey AI için de geçerlidir. Söylemek istediğim – Kod ve CSS konusunda yetkinseniz – CSS kullanın. Bu çok zaman kazandıracak. Sizin için rahat olan uygulamaları ve araçları kullanın. Daha hızlı ve daha verimli bir şekilde tasarlamanıza yardımcı olacaktır. Bazı insanlar Canva’yı çok basit ve sezgisel bir çözüm olarak görür. Sass veya Sass eksikliğini öğrenin ve daha azı CSS uzatma dilidir. CSS’ye değişkenler, işlevler, yuvalama, aritmetik işlemler ve karışım gibi ekstra özellikler ve işlevsellik eklediler. Ayrıntılı bilgi ve belgeler için resmi web sitelerine bakın. https://sass-lang.com/ http://lesscss.org/ Birkaç gün içinde gerçekten yapacağınız bir şey değil, biliyorum, ama bu gelecek için düşünmeye değer. Bu dilin uzantılarından birini inceledikten sonra, iş akışınızı büyük ölçüde geliştirecek ve hızlandıracaksınız. Diğer kişilerin kodunu ihtiyaçlarınızla ayarlayın, kodlarını ücretsiz olarak paylaşan birçok olağanüstü insan vardır. Bir zaman krizindeyseniz, mevcut tasarımı değiştirmek dualarınızın cevabı olabilir. Hedefim Codepen’de bir tasarım deseni. Ön kod düğmelerini, Chordeons’u, vardiyaları, düzenleri ve daha fazlasını bulacaksınız.
Mümkünse SVG görüntüleri kullanın SVG görüntüleri boşaltılabilen vektör grafikleridir. Sitenizdeki logolar, simgeler ve diğer grafik görüntüleri için kullanın. Büyütüldüğünde bile kaliteyi kaybetmeyeceklerdir. SVG Tam Güç: SVG görüntüleri herhangi bir metin düzenleyicisiyle yapılabilir ve düzenlenebilir
SVG görüntüleri aranabilir, endekslenebilir, senaryo ve sıkıştırılabilir
SVG görüntüleri taburcu edilebilir
SVG görüntüleri herhangi bir çözünürlükte yüksek kalitede yazdırılabilir
SVG görüntüsü büyütülebilir
SVG grafikleri büyütülürse veya boyut olarak değiştirilirse herhangi bir kaliteyi kaybetmez
SVG açık bir standarttır
SVG dosyası saf XML
Kütüphane ve JavaScript Framework’ü kullanın Umarım PHP’yi hala kullanan WordPress geliştiricilerinden biri değilsiniz. JavaScript bu dönemin ve bir nedenden dolayı bir programlama dilidir.
JavaScript’in çok popüler olmasının nedenlerinden bazıları, birçok kütüphaneye, çerçeveye ve açık kaynak genişlemesine sahip olmasıdır. Bu ücretsiz kaynağı kullanmak, daha hızlı, daha iyi ve daha verimli çalışmanızı sağlayacaktır. WordPress’e doğru şekilde nasıl bir kütüphane ekleyeceğinizi bilmek ister misiniz? Neyse ki, sizin için doğru olana sahibiz – WordPress’te JavaScript’i nasıl sıralayacağınız konusunda öğretici. Aşağıda, WordPress’e dahil edilen 3. taraf JS kütüphanesinin bir listesi bulunmaktadır. Sıraya ihtiyaç duymadan doğrudan kullanabilirsiniz.
Omurga.js
Kodemirror
çöküş
jQuery
jquery.imageareaselect
jquery.jcrop
jqueryui
Swfupload (artık kullanılmıyor)
kalın kutu
Smallmce
2 Renk Seçin Birbiriyle eşleşen birincil ve ikincil renkleri seçin. Bu görevi yapmanıza yardımcı olmak için malzeme paletleri ve renk hesap makineleri gibi uygulamaları kullanın. Birincil ve ikincil renklerinizi, renkleri sıçramak istediğiniz tüm öğelerde tutarlı bir şekilde kullanın. Düzenin ve metnin arka planı için paletinize nötr bir renk ekleyin. Karışıma çok fazla renk eklemeyin. Minimal kalın. 2 Tipografi Seçin Web sitenizde kullanacağınız iki övgü yazı tipi ailesi seçin. Sans-Serif başlık ve başlıklar için daha iyidir, serif yazı tipleri metinsel içerik için daha iyidir. Önceki yazımda bir ortak harf ve renk paleti seçme hakkında daha fazla bilgi yazdım. Bunu size iletmek için üzgün logo için ödeme yapın, ancak logoyu tasarlamak, kendiniz yapmaya çalışmanız gereken bir şey değildir. Logo, her şirketin en önemli görsel unsurudur. Bu şirketinizin görsel kimliği ve doğru bir şekilde yapılmasını istiyorsunuz. Genel bir logo üreticisi kullanmaktan kaçının ve bir tasarımcı için ödeme yapın. Gerekirse serbest çalışan kiralayın. Sorun para ise, taze fikirlerle dolu ancak çok daha ucuz ücret alabilen tasarım öğrencilerini bulmaya çalışın.
Kaliteli bir fotoğraf ve video stoğu seçin ve müşteriniz size web sitesi için bir fotoğraf vermiyor mu? Ya da belki böyle, ama odaklanmış, pikselli ve gerçekten korkunç değiller, değil mi? Hepimiz oradaydık. En basit çözüm, yüksek kaliteli stok görüntüleri kullanmaktır. Aralarından seçim yapabileceğiniz birçok ücretsiz ve premium hisse senedi kütüphanesi vardır. Kişisel favorim ücretsiz fotoğraf stoğu için unsplash ve her türlü kaynak için freepic. 2 En popüler ve en büyük ücretsiz fotoğraf stok kütüphanesi https://www.pexels.com/ ve https://stocksnap.io/ Bu sitedeki birçok fotoğraf stoku WordPress temasında demo içeriği olarak kullanılır. Gördüğünüz fotoğrafları kullanmaktan kaçının çünkü siteniz yaygın görünecektir. Belirli ve çok eski olmayan bir şey arıyorsanız, https://www.reshot.com/ gibi kendi fotoğraflarını seçmeyen kendi fotoğraflarını seçen bir site öneririm. Başka bir seçenek, halka açık arşivlerden vintage fotoğraflar içeren ve telif hakkı sınırları olmadan kullanılabilen https://nos.twnsnd.co/’dir.
Premium fotoğraf ve video stoğu için ilk durağınız: https://www.shutterstock.com/ ve https://www.gettyimages.com/ Bu Alman sitesi de görmeye değer. com Mükemmel stoklar ararken ucuz olmayın. Mükemmel premium stok görüntüsünü veya video – ödeme bulursanız. Bu çok değerli olacak. WordPress fotoğraf stokunuzu ve sitenizi daha da geliştirmek için bir CSS görüntü filtresi kullanabilirsiniz. Optimize Görüntüler Web için resimleri optimize etmeyi unutmayın. Stok fotoğraflarını indirdiğinizde, WordPress’e yüklemeden önce boyutu kullanacağınız boyuta indirin. Smushing ve daha fazla optimizasyon için, Smush eklentisini öneririm. Mükemmel fotoğraflara Photoshop veya benzeri bir araç kullanıyorsanız, Web için Kaydet seçeneğini kullandığınızdan emin olun. Fotoğrafları ve resimleri .jpg dosyaları olarak birçok renkle kaydedin ve grafikleri PNG biçiminde kaydedin. Web için kaydederken, JPG ve PNG dosya kalitesini seçme seçeneğiniz vardır. Bunun için gerçek bir kural yoktur – önizleme ekranını kullanın ve kaydedmeden önce görüntü kalitenize tam olarak zarar vermediğinizden emin olun. Net bir CTA Davetine (CTA) sahip olmak, kullanıcıyla etkileşim kurma şeklinizdir. Bir anlamda, kullanıcılar CTA’yı tıklarsa, web sitesinin hedeflerine ulaşırlar.
Bu nedenle CTA düğmesinin açıkça görünür, okunması ve okunduğundan emin olmanız gerekir.Düğmenizi düzenlemekle tutarlı.CTA nereye yerleştirilir?Pazarlamacıların bunun için tüm bilimsel yöntemleri var.Bu açıkça sitenizin içeriğine bağlıdır, tek tavsiyem öne çıkmaktır.Mobil kullanıcınızı unutmayın.Aynı CTA kuralları hücresel ve masaüstü için geçerli değildir.CTA hücresel için en iyi uygulamayı görün.Doğru yapılırsa havalı animasyon basit CSS veya JavaScript animasyonları tasarımınızı gerçekten geliştirebilir ve pürüzsüz ve profesyonel görünmesini sağlayabilir.Sır, bir kez daha ince olmak ve aşırı değil.İyi bir örnek: https://www.monogranofelicetti.it/en/ https://affinity.pt/en/about/ örnek “Yapabileceğiniz en kötü şey”
: https://www.lingscars.com/ simgesi – İkonların büyük bir rolüne sahip küçük oyuncular, özellikle tavsiyemi dinlediyseniz ve minimalist bir tasarım seçtiyseniz, web sitenizin çok önemli bir parçasıdır. Zarif simgeler, webınızın tüm tasarımını etkili bir şekilde geliştirebilir. Bir geliştirici olarak, iyi bir simgenin yapılması oldukça zor olduğunu fark etmelisiniz. Başından beri asla yapmayı düşünmeyin. İkon kitaplığında https://www.fraticon.com/ veya https://icons8.com/ gibi bazı ücretsiz simgeler bulun, çünkü aynı yazardan simge paketleri bulabilirsiniz. Web sitenizin logosuyla veya stiliyle eşleşen bir simge paketi bulun ve birçok sorundan tasarruf edecektir. Asla farklı paketlerden simgeleri karıştırmayın – sadece profesyonelce görünmez. Ekstra stil noktaları için SVG simgesini canlandırmayı düşünün. Bunu yapmanın en iyi yolu, SVG grafiğini canlandırmak amacıyla yapılan SNAP, JavaScript kütüphanesidir. Herhangi bir nedenle, bir kod yapmak istemiyorsanız, SVGATOR uygulamasını kullanabilirsiniz. Bu, bir ay boyunca ücretsiz deneme ile ücretli bir başvurudur ve denemeye değer. Detaylı Şeytan:
Böylece minimalist stil iyi görünüyor, kollarınızı açmanız ve önemli ayrıntılarda ekstra işler yapmanız gerekir.Bunların hepsi kod kullanılarak yapılabilir.Hepsi siyah beyaz değildir, saf siyah #000 veya saf beyaz #fff kaçının.Gözlere çok kaba davranıyorlar.Beyaz ciltler için #FEFEF ve #181818 gibi siyahtan biraz daha yumuşak bir varyant kullanın.Sınır, eski bir okuldur, öğedeki sınırlar yerine Box-Shadow CSS özelliğini kullanmaya çalışır.Bu, tasarımınızı daha düzgün ve pürüzsüz hale getirecektir.1 piksel veya 2px’lik katı sınırı bazı tasarımlarda serin ve retro görünebilir.Ancak, asla noktalı veya kırık sınırlar kullanmayın.Stil

. Genellikle küçük bir kod eklerseniz gerçek bir olumlu etkiye sahip olabilen sıkıcı bir unsursınız. Element sayfası üreticisi ayrıca stil ayırıcı için çok harika özelliklere sahiptir. Sıkıcı kutu. Kare olma. Düzensiz şekillendirme daha fazla dikkat çeker. CTA veya yüksek hiyerarşik düğmeler için orta miktarlarda kullanın. Hamburger Menü Stili Hamburger menünüz mobil cihazlar için bir zorunluluktur, ancak büyük ekranda çok havalı görünebilir. Codepen’de sizinle paylaşmak istediğim kaygan bir Hamburger menü koleksiyonu buldum. Hamburger menüsünü nasıl yapacağınızı bilmiyorsanız, bu makaledeki öğreticiyi okuyun. Bir renk arka plan kullanmak yerine gradyanlar kullanın, neden gradyanları denemiyorsunuz? Colorzilla gradyan düzenleyicisi ile kendi gradyanınızı kolayca oluşturabilir ve CSS kodunu WordPress sitenize kopyalayabilirsiniz. Derecelerdeki renk sayısı konusunda deli olmayın ve renk tamamen çarpışmaması için dikkatli olun. Kendi rengin bir kombinasyonunu yaparak bir sorununuz varsa veya neyin iyi çalıştığını bilmiyorsanız, her zaman önceden yapılmış bir gradyan kullanmayı seçebilirsiniz. Degradeler, arka plan fotoğrafları, simgeler, düğmeler ve diğer tasarım öğeleri için bir esneme olarak da kullanılabilir. Bu, tutarlılık yaratmak için çok düzgün bir numara. Arka plan görüntüsünün üzerindeki gradyanı kaplamak istiyorsanız ve
: Gradyanızı eklemek ve opaklığı%60-70’e kadar daha düşük bir şekilde eklemek için mülk (SASS). Sonra görünüyor: özetleyelim, profesyonel bir tasarımcı kiralamak her zaman daha iyidir, ancak gerektiğinde yönetmeliyiz! Acele ediyorsanız, ayarlarınızı akıllıca seçin. Hızlı bir minimalist tema yükleyin ve bunun için demo içeriği içe aktarın. Tasarımınızın daha profesyonel ve çok yaygın görünmesini sağlamak için ayrıntılı stil. Mümkün olduğunca çok güçlü (kod) kullanın. Her zaman test edilmiş bir renk kombinasyonu ve yüksek kaliteli görüntüler ve video kayıtları seçin. Aynı yazar tarafından ve web sitenizle aynı genel tarzda bir simge paketi kullanmayı unutmayın. Logo için ödeme yapın. En önemlisi, tasarımınızla tutarlı ve pürüzsüz olmayı unutmayın. Kodu tasarladığınız için tebrikler! Umarım bu ipuçları gerektiğinde size yardımcı olur. Paylaşmak istediğiniz ek ipuçlarınız var mı? Belki bir veya iki sorunuz var? Aşağıdaki yorum bölümü sizi çağırıyor!
Etiket:
tasarım
WordPress Geliştiricileri
İpuçları
Web tasarımı
Web Tasarım Trendleri