Как да създадем уеб дизайн?

Anonim

Как да създадем уеб дизайн?

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

Всъщност целият процес на проектиране може да бъде разделен на три етапа: създаване на скица, създаване на оформление в графичен редактор, дизайн на оформлението. Очертанието на дизайна може да бъде изчертано в обикновен фоторедактор или стандартен молив върху лист хартия. Що се отнася до оформлението, основно дизайнерите използват Photoshop като най-мощния графичен редактор от съществуващите. За дизайна на оформлението се нуждаете от познаване на езика на хипертекстовото маркиране и CSS. Преди да създадете свой собствен дизайн, задайте си няколко прости въпроса: Знам ли HTML и CSS и също така мога да работя с графичен редактор?

Ако отговорите отрицателно, тогава първият етап от процеса на проектиране няма да отиде никъде. Не е трудно да се направи скица, но не всеки потребител може да направи оформление и готов дизайн. В резултат на това, се препоръчва да се започне реша на основите на HTML | CSS, както и да преглеждате някои видеофилми за обучение Photoshop, за да се знае къде всеки инструмент, как да се прилагат филтри и др.

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

  • "шапка" на сайта - горната част на който и да е проект, включително и, като правило, логото, името на сайта и няколко копчета (контакти, за автора). Капачката може да има различни височини, но обикновено този параметър не надвишава 300 пиксела. Често в горната част на сайта има формуляри за търсене и рекламни банери.

    кликнете върху снимката за уголемяване

  • "Sidebar" - страничното меню на сайта. В страничната лента поставена вторична информация и допълнителни елементи: блок с пресни продукти, форма за търсене, различни проучвания и календари, връзки, реклама, навигационни елементи на ресурса. В дизайна на обекта могат да се използват няколко странични ленти, но има проекти без странични колони.

  • "Сутерен" - долната част на обекта. Тя обикновено съдържа връзка към основния ресурс и авторското право в стила "(c) 2014 Най-добрият сайт." Но през последните години концепцията за "сутерен" част от дизайна се промени с навлизането на мобилните устройства. В "сутерен" елементи започват да се утаяват, които обикновено се намират в страничната лента.

    кликнете върху изображението, за да уголемите

  • "Основната част от" - единица, в която се помещава основното съдържание. Повечето дизайнери поставят основната част от сайта в центъра, за да е по-удобно да се прочете материалът.

    кликнете върху изображението за уголемяване

Така че, сега знаете от кои блокове се състои сайтът. Време е да започнете решаването на въпроса как да създадете сами дизайна на уеб сайтове. Отворете най-простия фоторедактор (достатъчно и Paint) и създайте нов шаблон с резолюция 1280 × 1024. Струва си да се припомни, че метричните измервания не се използват при създаването на сайтове.Всички блокове се "измерват" в пиксели.

Например, решихте да скицирате с една странична лента. Маркирайте в графичния редактор границите на мазето, шаблоните и страничната лента.

Кликнете върху изображението, за да го уголемите

Имате ли идея да направите няколко странични колони и да поставите съдържанието в центъра? Добре, но с маркировката, помислете за широчината на страничните ленти и пространството под основното съдържание. Страничните колони не трябва да са твърде широки (не повече от 300 пиксела), а под основното съдържание трябва да оставите поне 500 пиксела, в противен случай текстът ще бъде неудобен за четене.

Щракнете върху снимката, за да уголемите

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

Щракнете върху картинката, за да уголемите

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

Започнете да запълвате всеки блок на оформлението с графики. Експериментирайте с цветове и фонове, създайте свои собствени елементи и бутони. Въпреки това, в интернет има огромен брой различни фонове, бутони за създаване на дизайн.

Щракнете върху картинката, за да уголемите

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

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

Запомнете трите прости правила за "отличен дизайн":

  • текстът трябва да се чете добре, дори когато снимките са деактивирани в браузъра;
  • Опитайте се да не използвате "verviglaznye" цветове;
  • Създайте удобна навигация на сайта.

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