Има моменти, когато трябва да проектирате нещо в движение, а уеб дизайнерите не са ни под ръка. Във времена като тези ние не можем да седнем и да се тюхкаме – ние трябва да създадем дизайна.

Ето няколко добри съвета за дизайн на WordPress, които ще донесат на всеки разработчик успех, дори и да ви натиска крайния срок.

Изберете Вашите настройки разумно

Ако бързате, намерете WordPress тема с предварително проектирани оформление и демо страници. Използвайте визуални строители, като Elementor или Beaver Builder, за бързо подреждане и оформяне на оформлението и добавяне на вече съществуващи елементи. По този начин можете да имате функционален сайт, работещ за няколко часа. Да, може да изглежда малко генерично, ако не сте внимателни, но ще работи. Помислете за добавяне на персонализиран дизайн и анимации, за да му придадете индивидуализъм.

Elementor Beaver Builder

Бъдете изтънчени

Това вероятно е един от най-важните съвети, които всеки може да ви даде.

Дизайнерите, които имат очи за естетика и дизайн, могат да се побъркват от време на време. Въпреки това, ако не сте родени с вродената способност да назовете 6 версии на синия цвят, е по-безопасно да останете елегантно минималистични. Опитайте с минималистичен дизайн с пъстри цветни акценти и няколко фини анимации тук или там.

Примери за страхотен минималистичен дизайн

За да работи минималистичния стил, трябва да включите повече  подробности . За щастие за вас подробностите, за които говоря, могат да бъдат оформени с помощта на нещо, с което сте най-добре запознати – кода.

Не използвайте Photoshop или Illustrator, ако знаете, че не сте добри в него

Използвал съм Photoshop активно в продължение на 10+ години и все още имам едва „C“ в теста Upwork Photoshop. Представете си изненадата ми, когато разбрах, че активно използвам само 30% от функционалностите на Photoshop. Същото важи и за AI. Това, което искам да кажа е, ако сте добър с кода и CSS, използвайте CSS. Това ще ви спести много време.

Използвайте приложения и инструменти, с които се чувствате добре. Това ще ви помогне да проектирате по-бързо и по-ефективно. Някои хора намират Canva много просто и интуитивно решение.

Научете Sass или Less

Sass и Less са CSS разширителни езици. Те добавят допълнителни полезни функции и функционалност към CSS, като променливи, функции, гнездене, аритметични операции. Вижте техните официални уебсайтове за подробна информация и документация.

https://sass-lang.com/

Sass

http://lesscss.org/

Less

Това наистина не е нещо, което ще направите след няколко дни разучаване, знам, но си заслужава да се помисли за бъдещето. След като научите някое от тези разширения, ще подобрите драстично работния си поток.

Адаптирайте кода на други разработчици към вашите нужди

Има много невероятни хора в нета, които споделят кода си безплатно. Ако сте в моментна криза, промяната на съществуващия дизайн може да бъде отговорът на вашите молитви. Мястото им е Design Patterns на Codepen. Ще намерите предварително кодирани бутони, акордеони, плъзгачи, оформления и много други.

Използвайте SVG изображения, когато е възможно

SVG изображенията са мащабируеми векторни графики. Използвайте ги за логото, иконите и другите графични изображения на вашия сайт. Те няма да загубят качеството дори когато сте увеличили изображението.

Обърнете внимание на пълната сила на SVG:

  • SVG изображенията могат да се създават и редактират с всеки текстов редактор
  • SVG изображенията могат да бъдат търсени, индексирани, сценирани и компресирани
  • SVG изображенията са мащабируеми
  • SVG изображенията могат да бъдат отпечатани с високо качество при всяка разделителна способност
  • SVG графиките НЕ губят каквато и да е качество, ако са мащабирани или преоразмерени
  • SVG е отворен стандарт
  • SVG файловете са чисти XML

Използвайте Javascript библиотеки и рамки

Искрено се надявам, че не сте един от тези програмисти на WordPress, които все още използват PHP изключително. JavaScript е езикът за програмиране на тази епоха по няколко причини.

Част от причината, поради която JavaScript е толкова популярен, е, че има голям брой библиотеки с отворен код, рамки и разширения . Възползването от тези безплатни ресурси ще ви накара да работите по-бързо, по-добре и по-ефективно.

Ето списъка с библиотеки JS на трети страни, които вече са включени в WordPress. Можете да ги използвате веднага, без да ги залагате.

  • js
  • CodeMirror
  • косач
  • JQuery
  • imageareaselect
  • Jcrop
  • jQueryUI
  • swfupload (отхвърлен)
  • ThickBox
  • TinyMCE

Изберете 2 цвята

Изберете един основен и един вторичен цвят, които вървят добре помежду си. Използвайте приложения като палитра за материали и цветен калкулатор, за да си помогнете с тази задача. Използвайте основния и вторичния си цветове последователно върху всички елементи, които искате да имате цветна гама. За фонове на оформлението и текст добавете неутрални към вашата палитра съответно. Не добавяйте твърде много цветове в сместа. Придържайте се към минимализма.

Изберете 2 шрифта

Изберете две комплиментационни шрифтови семейства, които ще използвате на уебсайта си. Sans-serifs са по-подходящи за заглавия, докато serif шрифтовете са по-подходящи за текстово съдържание.

Платете за изработка на лого

Съжалявам, че ви разбих, но проектирането на лого не е нещо, което трябва да се опитате да направите сами. Логото е най-важният визуален елемент на всяка компания. Това е визуалната идентичност на фирмата ви и бихте искали тя да бъде изпълнена правилно. Въздържайте се от използването на генерични създатели на лого и платете на дизайнер. Наемете свободна практика, ако трябва. Ако парите са проблем, опитайте се да намерите дизайнерски студент, който е пълен със свежи идеи и най-вероятно ще му платите значително по-малко.

Изберете снимки и видеоклипове с високо качество

Клиентът не ви предостави снимки за уебсайта? Или пък ви предостави, но те бяха извън фокус, пикселирани и просто бяха ужасни, нали?

Всички сме изпадали в подобна ситуация. Най-простото решение е използването на висококачествени стокови изображения. Има изобилие от безплатни и премиум библиотеки от които можете да избирате.

Моят личен фаворит е Unsplash за безплатни снимки и Freepik за всякакви ресурси.

Двете най-популярни и вероятно най-големи безплатни библиотеки за снимки са https://www.pexels.com/ и https://stocksnap.io/

Много от снимките на тези места се използват като демонстрационно съдържание в WordPress теми. Избягвайте да използвате снимките, които сте виждали наоколо, защото сайтът Ви ще изглежда твърде общ. Ако търсите нещо конкретно и по-малко „износено“, препоръчвам сайтове като https://www.reshot.com/, които са подбрали неподлежащи на задържане снимки. Друга опция е https://nos.twnsnd.co/,  която съдържа реколта от публични архиви и може да се използва без ограничения за авторски права.

За първокласни снимки и видеоклипове, първите ви спирки трябва да са:  https://www.shutterstock.com/  и https://www.gettyimages.com/

Този германски сайт също си струва да се проверява:  https://www.photocase.com

Не бъдете евтини, когато търсите безупречни ресурси. Ако намерите перфектно изображение или видеозапис – плащайте за него. Ще си струва.

Можете да използвате CSS филтрите за изображения, за да подобрите още повече своите стокови снимки.

Оптимизирайте изображенията

Не забравяйте да оптимизирате изображенията за мрежата. Когато изтегляте снимки, задължително я намалете до размера, който ще използвате, преди да я качите в WordPress. За по-нататъшно изглаждане и оптимизация препоръчвам  Smush plugin.

Ако използвате Photoshop или подобни инструменти за редакция на снимки, не забравяйте да използвате опцията  Запис за уеб . Запазете снимки и изображения с много цветове като .jpg файлове и запишете графики във формат png. Когато запазвате за мрежата, имате възможност да изберете качеството на файл jpg и png. За това няма реално правило – използвайте екрана за предварителен преглед и се уверете, че не сте разрушили напълно качеството на изображението си, преди да го запазите.

Имайте ясна CTA

Покана към действия (CTA) са вашият начин да взаимодействате с потребителя. В известен смисъл, ако потребителите кликнат върху CTA, те изпълняват целта на даден уебсайт.

Ето защо трябва да се уверите, че бутоните за CTA са ясно видими, четливи и четими.

Къде да сложите CTA? Търговците имат цял  научен метод към него. Очевидно зависи от съдържанието на сайта Ви, единственият ми съвет е да го направите отличителен.

Не забравяйте мобилните си потребители. Същите правила за CTA не важат за мобилни и настолни компютри. Вижте най-добрите практики за Mobile CTA .

Анимациите са готини, когато се извършват правилно

Създаването на прости CSS или JavaScript анимации може наистина да издигне твоя дизайн и да го направи изглеждат полиран и професионален. Тайната е, отново, да бъдеш изтънчен и да не я прекаляваш.

Добри примери:

https://www.monogranofelicetti.it/en/

https://affinity.pt/en/about/

„Най-лошото нещо, което може да направите“ например:

https://www.lingscars.com/

Икони – малки играчи с големи роли

Иконите са изключително важна част от уебсайта Ви, особено ако сте се вслушали в моите съвети и сте отишли ​​към минималистичен дизайн. Елегантните икони могат ефективно да подобрят целия ви уеб дизайн.

Като разработчик трябва да сте наясно, че добрите икони са доста трудни за създаване. Не мислете дори да ги направите от нулата. Намерете безплатни икони в библиотеките с икони като https://www.flaticon.com/или  https://icons8.com/

Намерете един пакет икони, който съответства на стила ви на логото или уебсайта и ще си спестите много труд и усилия. Никога не смесвайте икони от различни пакети – то просто ще изглежда непрофесионално.

За допълнителни стилови точки, помислете за анимирането на иконите на SVG. Най-добрият начин да направите това е с  Snap – javascript библиотека, създадена с цел анимиране на SVG графики. Ако по някаква причина изобщо не искате да кодирате , можете да използвате  приложението SVGator . Това е платено приложение с едномесечен безплатен пробен период и си заслужава да се пробва.

Дяволът е в подробностите:

За минималистичен стил, който да изглежда добре, трябва да запретнете ръкавите си и да вложите допълнителна работа в детайлите, които са от значение. Това може да се направи с код.

Не всичко е черно-бяло

Избягвайте чист черен # 000 или чисто бял #FFF цвят. Те са твърде тежки за окото. Използвайте леко по-меки варианти като #EFEFEF за белите и # 181818 вместо черни.

Границите са old-school

Опитайте се да използвате CSS box-shadow property  вместо граница на елемент. Това ще направи вашия дизайн по-хлъзгав и фин.

Твърдите 1px или 2px граници могат да изглеждат хладно и ретро на някои дизайни. И моля ви, никога не използвайте пунктирани линии или пунктирани граници, моля!

Стил на разделителите <hr>

Разделителите обикновено са скучни елементи, които могат да окажат реално положително въздействие, ако добавите малко кодиране към тях.

Elementor Builder има много готина функция за разделители за стилизиране.

Правоъгълниците са скучни. Не бъдете правоъгълник.

Неравномерните стругове привличат повече внимание. Използвайте ги умерено за CTA или бутони с висока йерархия.

Стил на менюто „хамбургер“

Менютата тип хамбургер са задължителни за мобилните устройства, но те също могат да изглеждат яко и на широки екрани. Намерих една колекция от хамбургерски менюта на CodePen, която бих искал да споделя с вас. Ако не знаете как да направите меню за хамбургери, прочетете урок в тази статия .

Използвайте градиенти

Вместо да използвате един цвят на фона, защо да не пробвате с градиенти? Можете лесно да създавате свои собствени градиенти с редактор заградиент на colorzilla  и просто да копирате CSS кода във вашия WordPress сайт.

Не прекалявайте с броя на цветовете в градиента и внимавайте да не се омажете тотално. Ако имате проблеми с създаването на собствена комбинация от цветове или не знаете какво работи добре, винаги можете да изберете да използвате свободни предварително създадени градиенти .

Градиентите могат да се използват и като наслагване за фонова снимка, икони, бутони и други дизайнерски елементи. Това е много чист трик за създаване на последователност. Ако искате да покриете градиент над фоново изображение, използвайте &:before property (SASS), за да добавите градиента си и просто да намалите непрозрачността му до 60 – 70%. Ето как изглежда:

В заключение

Винаги е по-добре да наемете професионален дизайнер, но понякога се налага да се справим сами.

Ако бързате, изберете настройките си разумно. Инсталирайте бърза минималистична тема и импортирайте демо за нея. Стилизирайте подробностите, за да направите дизайна си по-професионален и по-малко генеричен. Използвайте своите силни страни (кода) колкото е възможно повече. Винаги избирайте тествани цветови комбинации и висококачествени изображения и видео материали. Не забравяйте да използвате пакетите с икони от един и същ автор и в един и същ общ стил. Платете за лого. Най-важното е, че не забравяйте да сте последователни и фини с вашия дизайн.

Успех в дизайна и кодирането!

Pin It on Pinterest

Share This