Как да създадем уеб дизайн?
Как да създадем уеб дизайн?
Всеки собственик на сайта сънува уникален дизайн за своя ресурс. Всеки знае, че хората са посрещнати от дрехи. Същото важи и за сайта, защото първото нещо, което посетителят обръща внимание, е дизайна на проекта, а след това и съдържанието. Ако дизайнът е прекалено ярък или обратно тъп, потребителят скоро ще напусне ресурса. Не преливайте интернет сайта и ненужните елементи, защото често уеб ресурси с минималистичен дизайн изглеждат много по-интересно. Как да създадете уеб дизайн?
Всъщност целият процес на проектиране може да бъде разделен на три етапа: създаване на скица, създаване на оформление в графичен редактор, дизайн на оформлението. Очертанието на дизайна може да бъде изчертано в обикновен фоторедактор или стандартен молив върху лист хартия. Що се отнася до оформлението, основно дизайнерите използват Photoshop като най-мощния графичен редактор от съществуващите. За дизайна на оформлението се нуждаете от познаване на езика на хипертекстовото маркиране и CSS. Преди да създадете свой собствен дизайн, задайте си няколко прости въпроса: Знам ли HTML и CSS и също така мога да работя с графичен редактор?
Ако отговорите отрицателно, тогава първият етап от процеса на проектиране няма да отиде никъде. Не е трудно да се направи скица, но не всеки потребител може да направи оформление и готов дизайн. В резултат на това, се препоръчва да се започне реша на основите на HTML | CSS, както и да преглеждате някои видеофилми за обучение Photoshop, за да се знае къде всеки инструмент, как да се прилагат филтри и др.
Преди да започнете скицирането, създайте образ на бъдещия дизайн в главата си. Имайте предвид, че всеки проект се състои от следните компоненти:
- "шапка" на сайта - горната част на който и да е проект, включително и, като правило, логото, името на сайта и няколко копчета (контакти, за автора). Капачката може да има различни височини, но обикновено този параметър не надвишава 300 пиксела. Често в горната част на сайта има формуляри за търсене и рекламни банери.кликнете върху снимката за уголемяване
- "Sidebar" - страничното меню на сайта. В страничната лента поставена вторична информация и допълнителни елементи: блок с пресни продукти, форма за търсене, различни проучвания и календари, връзки, реклама, навигационни елементи на ресурса. В дизайна на обекта могат да се използват няколко странични ленти, но има проекти без странични колони.
- "Сутерен" - долната част на обекта. Тя обикновено съдържа връзка към основния ресурс и авторското право в стила "(c) 2014 Най-добрият сайт." Но през последните години концепцията за "сутерен" част от дизайна се промени с навлизането на мобилните устройства. В "сутерен" елементи започват да се утаяват, които обикновено се намират в страничната лента.кликнете върху изображението, за да уголемите
- "Основната част от" - единица, в която се помещава основното съдържание. Повечето дизайнери поставят основната част от сайта в центъра, за да е по-удобно да се прочете материалът.кликнете върху изображението за уголемяване
Така че, сега знаете от кои блокове се състои сайтът. Време е да започнете решаването на въпроса как да създадете сами дизайна на уеб сайтове. Отворете най-простия фоторедактор (достатъчно и Paint) и създайте нов шаблон с резолюция 1280 × 1024. Струва си да се припомни, че метричните измервания не се използват при създаването на сайтове.Всички блокове се "измерват" в пиксели.
Например, решихте да скицирате с една странична лента. Маркирайте в графичния редактор границите на мазето, шаблоните и страничната лента.
Кликнете върху изображението, за да го уголемитеИмате ли идея да направите няколко странични колони и да поставите съдържанието в центъра? Добре, но с маркировката, помислете за широчината на страничните ленти и пространството под основното съдържание. Страничните колони не трябва да са твърде широки (не повече от 300 пиксела), а под основното съдържание трябва да оставите поне 500 пиксела, в противен случай текстът ще бъде неудобен за четене.
Щракнете върху снимката, за да уголемитеКогато основните етикети са разположени на разстояние, е време да завършите дизайнерския скица с елементи. Добавете авторско право в мазето, блок с формуляр за търсене, заглавие и т.н. Скицата на дизайна ще стане по-интересна и няма да представлява набор от геометрични форми.
Щракнете върху картинката, за да уголемитеАко сте се научили да работите във Photoshop, тогава е време да преобразувате скицата в оформление. Но преди това, решете цветовете на сайта. За сайтове за новини, цвят на бял фон, черен цвят на текста и син цвят на връзките са по-подходящи. Ако дизайнът е създаден за женски или туристически сайт, използвайте по-ярки цветове. В този случай не правете коледно дърво от дизайна, защото изобилието от цветове пречи на възприемането на основното съдържание.
Започнете да запълвате всеки блок на оформлението с графики. Експериментирайте с цветове и фонове, създайте свои собствени елементи и бутони. Въпреки това, в интернет има огромен брой различни фонове, бутони за създаване на дизайн.
Щракнете върху картинката, за да уголемитеКогато оформлението е готово, го изрежете на блокове и направете дизайн от нея.В този случай подпишете всеки слой, така че да е по-лесно да го направите.
При появата на мобилни устройства популярността на адаптивните "гумени" дизайни се е увеличила. Всеки потребител може да създаде тема за неговия сайт, но само реален дизайнер може да го адаптира към всички устройства. В началото на дизайна си "кариера" се старайте да започнете с обикновен шаблон.
Запомнете трите прости правила за "отличен дизайн":
- текстът трябва да се чете добре, дори когато снимките са деактивирани в браузъра;
- Опитайте се да не използвате "verviglaznye" цветове;
- Създайте удобна навигация на сайта.
След като създадете дизайна и го прехвърлите на сайта, не забравяйте да го тествате в различни браузъри. Привличайте приятели и познати да тестват, защото критиката на някой друг положително засяга човек. Помнете основното правило: дизайнът на уеб сайтове не бива да ви харесва само вие, но и други потребители. Затова винаги слушайте мнението на посетителите на вашия проект.