Направете страхотен уеб дизайн за сайта си?

69 начина да направите уникален сайт!

Ако имате нужда от един кратък и ясен списък с дейности, които да ви помогнат да направите перфектния уеб дизайн за сайта си, прегледайте това ръководство. То безспорно ще ви помогне!
В него са събрани обобщени съвети от хиляди експерти в областта на уеб дизайна и SEO оптимизацията на сайтове.

Обещавам ви, че ако направите всичко от нашия списък, ще имате един от най-добрите сайтове във вашата ниша, а защо не и най-добрия?

Страхотен Брандинг!

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

2. Направете малка икона – favicon, която се показва в таба на браузъра. Повечето сайтове имат такива малки 16 × 16 пиксела икони, които ги правят да се отличават от останалите отметки разположени в браузера ви и така се ориентирате по-лесно. За да направите такова изображение без да изглежда размазано използвайте X-Icon Editor.

3. Използвайте максимум 2-3 цвята в дизайна на темата на уеб сайта . Трябва ви цвят за фон на сайта, цвят за елементите предизвикващи действие и цвят за акцентиране. При избора на цветова палитра, започнете с допълващи се цветове или цветна триада. Добри цветови комбинации към един дизайн са тези, които доразказват текстовото съдържание.

4. Никога не използвайте истинско черно (# 000000),  защото е по-ярък нюанс от всеки друг цвят и изморява очите. Никога не използвайте неутрален сив ( #CCCCCC) цвят, ако искате вашия проект да има индивидуалност. Изключение може да се направи  само ако имате елемент, който искате да не се забелязва. Може да добавите оттенък на жълтото, за да осигурите топлина или червено за енергия, или синьо за създаване на доверие.

Страхотен типография!

5. Шрифта на текста ви е от изключителна важност, за потребителското изживяване. Казано е, че 95% от мрежата е типография. За препоръчване е да използвате безсерифни шрифтове, които са по-удобни за четене в Интернет. Може да си изберете шрифт, чрез библиотеките на Google font или Typekit .

6. По подобие на цветовата схема използвайте 2-3 шрифта максимум, защото иначе сайта изглежда разхвърлян и се забавя времето за зареждане. Трябва ви шрифт за заглавие и параграфен шрифт, най-много още един за специални случай.

7. Определете размера шрифта да е най-много 16px, но по –голямо от 12 px,  защото иначе е трудно за четене.
Изберете типографски мащаб за текста и заглавията H4, H3, H2, и H1 от рода на златното съотношение т.е. да се увеличават с 1,618 или „перфектната четворка“.

8. Помислете за дизайна на другите типографски елементи, като цитирането, оформлението на списъците и дори УРЛ адресите. Инсталиране потребителски икони, като Font Awesome вместо да използват изображения за общи елементи, като социални медии, лога, бутони за навигация, както и интерактивни графики.  Ако не искате да инсталирате повече разширения, друг вариант е да слагате HTML код на различни пиктографски елементи.

Цялостно оформление и потребителски интерфейс!

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

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

11. Използвайте големи, смели Екшън бутони ( приканващи към действие).  Уверете се, че бутонът не може да бъде пропуснат.

+Всяка страница трябва да завършва с някакво искане или Екшън бутон за приканване ъм действие!

12. Бъдете последователни със стиловете на форми, текстови полета, активен текст и т.н. Промяната на цвета на посетените връзки трябва да позволява на потребителите да знаят, че те са били на тази страница преди.

Незабравимо потребителско изживяване!

13. Добавете микро интерекшън бутони. Например, един бутон „Качване“ трябва да се промени на „Качено“ или „Обработка“ след кликване върху него.

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

15. Никога не използвайте Интро за „добре дошли“. При посещение на началната страница за първи път, потребителят очаква да види наистина начална страница с ценна информация.

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

17. Добавете описателен текст за всичките си форми, входове, както и падащи менюта. Ако искате някой да попълните поле по определен начин, трябва да им кажете.

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

19. Генериране и показване на оптимален размер на изображенията. Ако качите по-голямо изображение в блог пост и искате да се показва в страничната лента например, уверете се, че то излиза по-правилния начин в умален формат там, а не като изрязана версия.

20. Направете тест за съвместимост с различни браузъри , като се уверите че вашия сайт се показва правилно в Chrome, Firefox, Safari, Internet Explorer и други браузъри. По-старите версии на IE са изключително лоши при показване на уеб сайтове.

SEO оптимизация за търсачки

21. Уверете се, че вашият сайт е оптимизиран за мобилни устройства. Отваря се по подходящ начин и se зарежда достатъчно бързо. Това се отразява на класирането и на потребителското изживяване.

22. Добавете ALT таг и заглавие за всички изображения и връзки . Ако по някаква причина изображение не се зарежда, вашия сайт ще покаже ALT на неговото място.

23. Фиксирайте повредените HTML кодове. Когато копирате от някъде готово съдържание и го пействате направо в  редактор WYSIWYG (като визуалния изглед на WordPress), се добавят много ненужни кодове и стилове във вашия пост,  така текста ще стане нечетлив.

24. Деветдесет и девет процента от вашите стилове трябва да бъдат в един CSS файл, така че да можете да актуализирате всички случаи вместо страница по страница, ред по ред. Използвайте <strong> и <em> вместо <b> и <i>, за да удебелите и наклоните курсива на текст. Те имат същия ефект, но със съществена разлика <b> е стил. <strong> е показател за това как трябва да се разбира нещо.

25. Използвайте W3C Markup Validation Service , за да намерите основните грешки в HTML кода на сайта си. Имайте в предвид, че повечето сайтове не са с напълно валиден HTML. Това не е най-важният приоритет, но ще ви даде по-добро чувство, ако имате по-малко грешки.

26. Проверете сайта си за прекъснати връзки с BrokenLinkCheck.com. Фиксирайте ги, така че хората да не се сърдят, когато щракнат върху тях.

27. Използвайте линк към пермалинк, а не URL адреси. Например, когато се свързва с определена страница, вашият HTML трябва да се чете, <a href=“/vashata-stranica“> вместо <a href=“http://domain.com/vashata-stranica“> .  Същото важи и за източниците на изображения и CSS фонове.

28. Избирайте само по една ключова фраза на страница по която искате да се класирате. Съсредоточете се върху оптимизирането на всеки аспект на тази страница по избраната  ключова дума.  Задайте думата в УРЛ адреса, заглавието на страницата, подзаглавията, таговете и първата 1/3 от текста.

29. Ограничете заглавието до 55 символа, като включвате само по един H1 таг на страница. В повечето случаи, това е вашето заглавие.  Включи изобилие от H2 , H3 и H4 в рамките на съдържанието на страницата си, за да създадете подзаглавия и визуална йерархия.

30. Вашето мета описание на статията се показва в резултатите от търсенето, като описание под линка. Уверете се, че то също е оптимизирано по дадената ключова дума.

31. Като цяло, първите резултати в SERP (страницата с резултатите от търсенето на Google) по дадена ключова дума води към съдържание с повече от 2000 думи на страница. При писане на страница, която искате да се класира добре, опитайте се да бъде  най-малко 2000 думи.

32. Винаги създавайте карта на сайта,  като sitemap.xml файл и го сложите в главната директория, така той се показва като domain.com/sitemap.xml. В него казвате на Google, къде са всички ваши страници и той трябва да се  актуализира автоматично, когато добавяте ново съдържание. След като го направите го изпратете на Google, чрез Инструмент за уеб администратори.

33. Добави сайта си в  Webmaster Tools за да може да следите как Google индексира сайта ви и ако има някакви сериозни проблеми да реагирате навреме.

34. За да помогнете на класирането чрез изображения, винаги преименувате вашите снимки и други файлове, преди да ги качите на хостинга с описателни имена (например sazdavane-na-strahoten-webdisain.png).

35. Включете на robots.txt файл на вашия сайт, за да каже на уеб роботите кои страници трябва и кои не трябва да индексират.

36. Направете канонично пренасочване към точка от не-WWW до  WWW версия на уебсайта си, или обратното.

37. Направете проучване за LSI ключови думи (Скрито семантично индексиране) на всяка страница, за да помогне на основната ключова фраза. LSI ключови думи са фразите, които ви предлага Googlе когато пишете в нейното поле за търсене. Например, ако започнем да пишем думата “Уеб дизайн“, Google ще ни предложи с авто довършване фразите “Уеб дизайн София“, “Уеб дизайн уроци“, “Уеб дизайн цени“. Напишете текстове и за тях.

39. Нагласете навигацията на сайта. Всяка страница на вашия сайт трябва да бъде достъпна, чрез три или по-малко кликвания от началната страница.

40. Използвайте Schema Creator за генериране на структурирани данни.

Бърза скорост на зареждане на уебсайта

41. Проверете скоростта на зареждане на страниците и се уверите, че сте фиксирали всички често срещаните проблеми, които забавят скоростта. Колкото по-бързо се отваря, толкова по-добро класиране.
Дръжте страниците си под 2MB . Използвайте tools.pingdom.com да проверите техния размер. Всичко над 2MB е много тежко.

42. Дръжте заявките в страницата да са под 50 броя . Това е всеки файл, снимка и скрипт изграждащи визията като заявка за HTTP. Колкото по-малко заявки, толкова по-бързо ще се зареди. Средната уеб страницата разполага с 70 заявки. Използвайте инструмента GTmetrix да видите вашите заявки.

43. Правете дизайн елементите на страницата със CSS вместо с фонови изображения. Никога не използвайте изображения за да покажете бутон, форма или друг общ компонент на вашия сайт. CSS товари по-малко и е по-гъвкав за оформление.

44. Оптимизирайте изображенията, преди да ги качите в сайта си. Онлайн инструменти като TinyPNG или програмата FileOptimizer могат да намалят размерите на графичните файлове с 70-90%, без да губите резолюцията или качеството на изображението.

45. Минимизирайте JavaScript, HTML и CSS чрез компресиращи инструменти преди качване на файлове на вашия сайт. За JavaScript се използва Closure Compiler. За HTML прегледайте HTML Minifier. За CSS е YUI Compressor .

46. Друг трик е да преместите блокиращите JavaScript в долната част на страницата. Единствените скриптове, които трябва да се поставят в заглавната част са скриптовете, които веднага се отразяват на дизайна на страницата (например потребителските шрифтове).

47. Избягвайте пренасочвания на целевите страници. Пренасочва предизвика допълнителни заявки към HTTP, които забавят отварянето.

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

49. Активиране GZIP компресия в конфигурацията на сървъра. С това може да намалите времето за отговор от 90%.

Професионален  Графичен дизайн

50. Проектирането на потребителски графичен дизайн, лендинг страница за продажби или дори само една специално направена илюстрация е един лесен начин да направите вашия сайт по-запомнящ се.

51. Създаването на цяла серия от блог постове с един и същи графични дизайни или определен графичен елемент, който се разпространява във Facebook, Twitter, Pinterest и т.н. помагат на потребителите да разбират, че това е написано от вас. Например, червената лентичка горе в ляво на Postvai, която се поставя на сайта, блоговете ни и книгите, които предлагаме.

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

53. Използвайте инфографики , които показват данни и друго съдържание по визуален начин. От тях се получава повече трафик и хората обичат да ги споделят в Pinterest.

Погрижете се за сигурността на уеб сайта

54. В последно време инсталирането на сертификат SSL влезе като параметър за класирането в Google. Този сертификат дава възможност за защитена връзка от уеб сървъра към браузъра. Наложително е да се използва ако приемате плащания с кредитни карти или имате онлайн магазин.

55. Актуализирайте редовно вашата CMS система, разширения и плъгини до най-новата версия. Когато WordPress или всеки друг софтуер пуска ъпдейт, това е точно за да поправи намерена уязвимост. Ако не правите това ще бъде само въпрос на време да ви хакнат.

56. Повечето пробиви започват от страницата за вход, затова я подсигурете допълнително. Използвайте сигурна парола. Никога не оставяйте името за вход да е нещо като „admin“. Изтрийте администраторския акаунт по подразбиране и си създайте ново потребителско име.

57. Проверете и премахнете за зловреден софтуер . Понякога хакерите добавят допълнителни кодове в кода, които не са никак лесни за намиране. Ако не ги отстраните навреме Google ще предупреди хората, че вашия сайт е опасен и това ще доведе до отлив на трафик и спадане в ранглистата на класирането. За WordPress сайтове може да използвате WordFence Antivirus, която дори и в безплатния си вариант ще ви защити от много атаки.

58. Правете си редовно резервно копие на вашите бази данни и файлове на главната директория. Ако загубите вашия сайт, ще ви трябва не само обикновен бекъп на базата данни, а и всички файлове за да го възстановите.

Страхотно съдържание

59. Заглавната страницата на сайта безспорно е най-посещаваната на сайта поради това се убедете, че тя представя добре вашата компания.

60. Страницата за контакт помага на хората да се свържат с вас, но тя също така трябва да създава доверие у посетителите. Освен това ботовете ще намерят вашите телефони, имейл и адрес, което дава информация на Google, че сайта ви е надежден.

61. Създайте страница за грешка 404 показваща на посетителите, че търсят съдържание което не съществува. Използвайте това страницата 404 да ги насочи обратно към началната страница или да намерят подобно съдържание.

62. Хубаво е да има форма за имейл бюлетин, защото хората които се абонират създават най-голямото конвертиране и са потенциални клиенти. Когато някой изпрати имейла си не забравяйте да им напомните още на другия ден да потвърдят електронната си поща. Ако те не го направят веднага, могат да забравят за винаги. Това може да стане със създаването на благодарствена страница или предоставяне на някакъв безплатен промоционален продукт.

63. Вашият уеб сайт или тема трябва да имат целева, ландинг страница, която се използва при нужда потребителите да предприемат някакво действие. Тя е върха на фунията до която стигат сигурните клиенти. Ако продавате нещо, уверете се, че имате хубава страница за продажби . Започнете с едно хубаво заглавие. Добавете разяснително видео. Поставете екшън бутон в долната част на страницата.

Страхотни социални медии

64. Ограничете броя на бутоните за социални медии във вашите страници, защото във всеки бутон работи скрипт, който забавя скоростта на зареждане на страницата. Включете от 1 до 5 бутони, например Facebook, Twitter, LinkedIn, Pinterest, Google+.

65. Създайте медийни графики за вашите Facebook страници те правят веднага положително впечатление и насърчават потребителите да ги харесат.

66. Спазвайте Facebook Open Graph мета таговете  за да сте сигурни, че вашето съдържание се споделя правилно във  Facebook.  Използвайте Facebook Debugger да проверите началната си страница, публикациите и други страници, за да се видите как те ще се покажат във Facebook, когато някой сподели даденото URL.

67. Създавайте карти с  Twitter Cards за да прикачите автоматично снимки и видео клипове на вашите туитове, когато един URL на сайта ви е споделен.

68. Настройте Google+ Snippets да персонализирате, това което хората виждат, когато вашият сайт е споделен в Google+. Посочения инструмент ще ви помогне да генерирате кода.  Дори и ако сайтът ви не получи много споделяния и плюсове, Google ще знае, че тези данни имат някаква тежест.

69. Ако държите да имате връзка към вашите социални профили ги сложете в малки иконки най-долу на сайта. Целта на социалния медия маркетинг е да накараш хората да се движат към вашия сайт, а не обратно.

 

Това е, готово. Какво още липсва в списъка? Ще се радвам да споделите ако има още нещо полезно от вашата практика. Оставете коментар по-долу. А ако смятате, че списъка е полезен моля, да го споделите.

Автор: Петко Димов

Библиография:
1. Димов, П. (2011). Копирайтинг за Уеб ISBN 978-954-2952-17-6.
2. Димов, П. (2016) Оптимизация за български сайтове.