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


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

Стандартна ширина на сайта в пиксели за runet

До разработването на адаптивно оформление, масовото явление беше развитието на сайт с ширина от хиляда пиксела. Тази цифра е избрана по една проста причина - така че сайтът да бъде поставен във всеки екран. И това има своя собствена логика, но нека предположим, че все още човек има поне HD монитор на работния плот. В този случай оформлението ви ще изглежда като малка лента в средата на екрана, където всичко се подрежда на една купчина, иот двете страни има огромно неизползвано пространство. Сега нека предположим, че човек е дошъл на вашия сайт с екран с ширина 800 пиксела, а в настройките има квадратче "Показвай пълната версия на сайта". В този случай сайтът ви също ще се показва неправилно, тъй като той просто не се придържа към екрана.


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

Оформления за всички случаи

Ако решите да създадете оформление за всички размери на екрани, присъстващи на пазара, тогава вашият сайт ще стане най-уникалният в интернет. Днес е просто невъзможно да се достигне пълната гама устройства, опитвайки се да направим точната настройка за всяка опция. Но ако се фокусирате върху най-популярната резолюция на мониторите и екраните на устройствата, идеята не е лоша. Единственият му минус са финансовите разходи. В крайна сметка, когато дизайнерът на интерфейси, дизайнер и монтьор ще бъде принуден да изпълнява една и съща работа 5 или 6 пъти, проектът ще струва много повече от първоначално зададеното в бюджета. Следователно, похвала на голям брой версии под различни екрани може да бъде като сайтове с една страница, чиято цел е да продадат един продукт и задължително да го направят добре. Е, ако нямате една от тези целеви страници и сайт с няколко страници, трябва да помислите по-нататък.

Най-популярни сайтове

Компромисът между двете крайности е за изграждане на оформлениетри или четири размера на екрана. Между тях трябва непременно да има подвижно разположение. Останалите трябва да бъдат адаптирани за малките, средните и големите десктоп екрани. Как да изберем ширината на сайта? По-долу ще намерите статистиката за услугата HotLog за май 2017 г., която ни показва разпределението на популярността на различните резолюции на екраните на устройствата, както и динамиката на промяната на този индикатор.
От таблицата можете да научите как да определите размера на сайта, който искате да използвате. Освен това можем да заключим, че най-често срещаният днес формат е екранът 1366 с 768 точки. Такива екрани са инсталирани в бюджетни лаптопи, така че тяхната популярност е естествена. Следващата популярност е Full HD мониторът, който е златен стандарт за видео, игри и следователно за създаване на оформления на сайтове. Следващата таблица показва разделителната способност на мобилните устройства 360 на 640 точки, както и различни варианти на настолни и мобилни екрани след него.

Проектиране на оформление

Така че, след като анализираме статистиката, можем да заключим, че оптималната ширина на сайта има 4 варианта:

Версия за лаптопи с ширина от 1366 пиксела.

Full HD версия.

Размер на оформлението 800 пиксела в ширина за показване на малки настолни монитори.

Мобилната версия на сайта е с ширина 360 пиксела.

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

Ние правим гъвкаво оформление

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

Какво представлява златната секция и как мога да я приложа към оформлението на уеб страницата? Дори в епохата на Възраждането много архитекти и художници се опитват да дадат на своите произведения идеална форма и пропорция. Отговаряйки на въпроса за значението на такава пропорция, те се обърнаха към кралицата на всички науки - математика. От времето на древността е измислено съотношението, което нашето око възприема като най-естествено и изтънчено, защото е навсякъде в природата. Откривателят на формулата за такава връзка е талантлив френски архитект на име Фидум. Той изчисли, че ако голяма част от съотношението е по-малко подходящо, отколкото цялото се отнася за по-голямото, тогава тази пропорция ще изглежда най-добре. Но това е така, ако искате да разделите обекта асиметрично. Този процент по-късно стана известен като "златната част, която все още не надценява нейното значение за световната културна история."

Върнете се към уеб дизайна

Всичко е много просто -златна секция, можете да проектирате страници, които ще бъдат възможно най-приятни за човешкото око. Чрез изчисляване на формулата на златната секция получаваме ирационален номер от 16180339887, но за удобство можете да използвате закръглена стойност от 162. Това ще означава, че блоковете на нашата страница трябва да бъдат 62% и 38% от цялото, независимо от размера на генерирания източник за сайта използват Пример за това може да се види в следната схема:

Използване на нови технологии

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

Как да се увеличи работното пространство на сайта

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

Най-добър уебсайт - Адаптивен

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