ALLE.BG - РЪКОВОДСТВО ЗА СЪЗДАВАНЕ НА УЕБСАЙТ

Дизайн

Добре дошли в третата част от ръководството и поздравления за положените усилия до момента!

След като вече сте добавили съдържанието, сега е моментът да направите така, че то да се възприема максимално ефективно.

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

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

Минимализъм

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

Ако се загледате в сайтовете на големите компании, които инвестират сериозни бюджети в изработката на своите сайтове, ще видите че техните дизайни са точно такива. Те знаят, че тези дизайни работят.
Дизайн на уебсайт (ръководство за създаване на уебсайт)
Не се притеснявайте, ако не се чувствате уверени, че можете да направите дори и добър минималистичен дизайн за своя уебсайт. Това не е никак сложно, защото разполагате с вече готови дизайни, които можете да персонализирате лесно, за да постигнете уникална визия.
Дизайн на уебсайт (ръководство за създаване на уебсайт)

Части на дизайна

Три са основните частите, от което е изграден един дизайн и това, което го прави различен визуално от всички останали:
  1. Цветовете, които могат да помогнат за създаване на търсената емоция
  2. Шрифтовете, от които зависи изгледът на текстовото съдържание
  3. Изображенията в сайта, които са част от съдържанието или фона

Комбинацията от тях е това, с което ще ви идентифицират вашите посетители и клиенти. Това е вашият стил.

Цветове

Всеки цвят има някакво значение и ако се възползваме от него, можем да се улесним при създаването на търсената емоцията.
Червено
Асоциира се с енергия, страст, внимание и вълнение
Подходящ за продажби, храна, здраве, спорт и забавления

Оранжево
Асоциира се с забава, приключения, оптимизъм и креативност
Подходящ за изкуство, забавления, храна, спорт, технологии и транспорт

Жълто
Асоциира се със щастие, позитивизъм, възможност
Подходящ за храна, почивки и спорт

Зелено
Асоциира се с хармония, баланс и доброта
Подходящ за теми свързани с природата, банки или образование

Синьо
Асоциира се с честност, стабилност, лоялност и отговорност
Подходящ за технологии, финанси, сигурност

Лилаво
Асоциира се с доверие, въображение, мистерии, лукс и качество
Подходящ за технологии, финанси и здраве

Розово
Асоциира се с любов, игра, състрадание и топлина
Подходящ за продажби, мода и играчки

Кафяво
Асоциира се с стабилност, комфорт и природа
Подходящ за строитество, транспорт, мода и храна

Бяло
Асоциира се с чистота, простота и яснота
Подходящ за здраве, технологии и медицина и се комбинира добре с другите цветове

Черно
Асоциира се с сила, елегантност и авторитет
Подходящ за мода, финанси, автомобили и се комбинира добре с другите с другите цветове

Изберете един или няколко цвята, с които искате да се асоциирате.

Къде се използват?

Нека да видим местата във вашия уебсайт, на които този цвят може да се вижда. Това са:
  1. Логото като, можем да използваме цвета като част от неговия фон или част от символите.
  2. Заглавията
  3. Илюстрациите
  4. Връзките
  5. Иконката на вашия сайт

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

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

На следния адрес можете да видите логата на популярни компании, които са базирали своя избор на цвят на по-горните асоциации:
canva.com/learn/color-psychology-the-logo-color-tricks-used-by-top-companies/

Различни идеи за приложение на всеки цвят:
canva.com/learn/color-meanings-symbolism/
smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/

Цветови комбинации

Дизайн на уебсайт (ръководство за създаване на уебсайт)
Ако желаете да правите цветови комбинации, разгледайте инструмента “цветно колело”, с което можете да видите добри комбинации от допълващи и аналогични цветове. Вижте го на canva.com/colors/color-wheel/

Други сайтове, които може да ви бъдат полезни:
coolors.co
colorhunt.co
colourlovers.com

Шрифтове

Шрифтът е изгледът на текста. Можем да разделим шрифтовете на 3 групи:

Серифни

Дизайн на уебсайт (ръководство за създаване на уебсайт)
Те се характеризират с това, че в края на някои от буквите има малки линийки. Тези шрифтове са подходящи, когато искате да демонстрирате класа, качество или дълга история. Може да ги използвате за вашето лого или заглавията във вашия уебсайт.

Безсерифни

Дизайн на уебсайт (ръководство за създаване на уебсайт)
Те нямат малките линийки накрая. През последните години те са предпочитаният избор за съдържание в Интернет. Дори Google през 2015г. направи промяна в логото си и започна да използва именно безсерифен шрифт. Тези шрифтове са модерни, минималистични и текстът е лесно четим дори и когато е с малък размер.

Други

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

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

Изображения

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

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

Сайтове за изображения

В Интернет има много сайтове, от които може да свалите безплатни изображения за вашия сайт. Това е списък с едни от най-популярните:
pexels.com
stocksnap.io
pixabay.com
unsplash.com
picjumbo.com
negativespace.co
visualhunt.com
publicdomainpictures.net
freerangestock.com

Програми за обработка на изображения

Ако ви трябва програма, с която да обработвате изображения, препоръчваме Canva и Gimp, като и двете са безплатни.

С Canva (canva.com) можете лесно да комбинирате различни елементи, текст и снимки, които да запазите като файл, който после да добавите във вашия уебсайт.

Gimp (gimp.org) пък ви дава възможност да изрязвате и да променяте размера на дадено изображение, да прилагате филтри и запазвате файлове в различни формати.

Лого

Логото е текст, знак, символ или друг графичен елемент, който се асоциира с вас и вашата дейност. Това са логата на няколко популярни компании:
Дизайн на уебсайт (ръководство за създаване на уебсайт)
Тенденциите през последните години са логата да включват името на компанията (или марката) и да са сравнително минималистични. Това дава възможност да бъдат по-лесно разпознаваеми и да изглеждат добре във всякакви контексти и всякакви реклами материали.

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

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

Основни принципи

Има няколко основни принципа, които е хубаво да не нарушавате:

Групиране

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

Подредба

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

Контраст

Дизайн на уебсайт (ръководство за създаване на уебсайт)
Контрастът е разликата между два или повече обекта. Разликата в размера на два обекта ни показва кой е по-важният, а разлика в цвета на текста и неговия фон го прави по-четим.

Консистентност

Дизайн на уебсайт (ръководство за създаване на уебсайт)
Еднаквите неща трябва да изглеждат еднакво. Това важи за заглавията, текстът, бутоните и снимките. Alle.bg се грижи в голяма степен за тази консистентност като вие разполагате с възможност за индивидуални настройки на визията на отделните елементи.
Благодарение на тези принципи ще улесните посетителя и насочите неговото внимание към местата, който смятате за важни.

Настройки на дизайна

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

Съдържанието е част от дизайна

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

Мобилни устройства

Днес, по-голямата част от потребителите на Интернет (над 60%) използват мобилни устройства с малки екрани, за да търсят и достъпват информация. Това е причината в началото на тази част да споменем думата минимализъм.

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

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

Задачи

Задачата ви за в края на тази част от ръководството е:

Дизайн на уебсайт (ръководство за създаване на уебсайт)

Настройте дизайна на вашия уебсайт и вашето съдържание

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