Основни правила за уеб дизайн
Откъде започва разработката на уебсайт? Точно така, с външния дизайн или дизайн. Дизайнът е първото нещо, което посетителите виждат, когато посещават уебсайт. Ето защо на дизайна при неговото развитие трябва да се обърне специално внимание.
Ето основните правила, които дизайнерът трябва да спазва, когато проектира оформление на уебсайт. Пиша това сам, като кодер. Кой, кой, и наборчикът знае тези правила със сигурност.
Уважаеми уеб дизайнер, ако четете тази статия, моля, вземете сериозно всичко, което е посочено по-долу и тогава ще имате шанс да останете неухапани от разярен дизайнер на оформление.
Правила за дизайн на уебсайт
Техническо задание (ТЗ)
Винаги помнете, че уеб дизайнерът трябва да работи в тясно сътрудничество с дизайнера на оформление, така че да не се случват различни инциденти.
Уважаеми дизайнер! Ако имате скъп тридесет инчов монитор, това изобщо не означава, че трябва да начертаете оформление с ширина 3000 px. Трябва да разберете, че все още сте в малцинството. Лъвският дял от посетителите, които идват на сайта, ще имат разделителна способност на екрана от 1024 - 1920px. Вярно е, че днес пазарът на устройства на интернет потребителите е завладян от мобилни устройства, те вече надхвърлиха 50%. Тук има някои правила и стандарти.
Ние определяме ширината на оформлението на основния блок (контейнер) на сайта. Обикновено ширината на оформлението се настройва към най-често срещаната разделителна способност на екрана. Напоследък молех дизайнер да начертае дизайна върху модулната мрежа на twitter bootstrap framework, широка 1170px. Когато дизайнът е начертан стриктно върху мрежа, това значително опростява оформлението.
Винаги се придържайте стриктно към размерите на блоковете пиксел по пиксел. Разберете, че тези няколко десетки неотчетени пиксела в крайна сметка могат да доведат до сериознипоследствия.
Ако сайтът е фиксиран, тогава не забравяйте да посочите ширината на платното малко по-широка от ширината на основния блок (контейнер) на сайта и задайте фона - фонът може да бъде изображение, или просто градиент, или плътно запълване. За предисторията обаче ще говорим по-късно.
Всички слоеве в оформлението трябва да бъдат внимателно групирани и подписани с подходящи имена. Запомнете това правило:"Ако един елемент в оформлението има повече от два слоя, тогава той трябва да бъде затворен в обща група". Ето например в сайта има различни модули. Всеки модул има заглавка. И така, заглавието в оформлението има два слоя: самият текст на заглавието и фонът. По този начин ние комбинираме тези два слоя в обща група и ги наричаме например "Header" или "Title". Тази група може да бъде и в родителската група с името на модула, т.е. в групата на модул "Новини" има подгрупа "Заглавие на новината". Въз основа на горното трябва да има някаква йерархия на групите слоеве. Това групиране значително опростява живота на дизайнера на оформление. Също така не забравяйте да подпишете самите слоеве, така че да няма "Layer1" или "Layer2" там ...
Слоевете никога не трябва да се залепват, по-добре е да ги комбинирате в група и там дизайнерът на оформлението ще разбере дали да ги залепи или не.
Също така обърнете специално внимание на режима на наслагване, така че да не изключвате всички слоеве, освен този, от който се нуждаете, и той променя цвета си - пребоядисан от червено в бяло.
По-добре е да не оставяте деактивирани слоеве и да ги изтриете, когато прехвърляте оформлението към дизайнера на оформление. В слоевете не трябва да има нищо излишно, т.к. Кодерът може лесно да се обърка.
Фон на уебсайта
Фонът е основният проблем за начинаещите дизайнери, или по-скоро този проблем е изправен пред дизайнера на оформление. Дизайнерът трябва да разбере, че оформлението на сайта ене просто красива картина, това е сложен и динамичен сайт, който може да се разтяга и свива както вертикално, така и хоризонтално.
Ако нарисувате картина на заден план и я поставите в центъра, тогава в никакъв случай не трябва да има изрязани ръбове. И все пак на заден план винаги трябва да има някакъв фрагмент от хомогенен фон, който дизайнерът на оформление може да повтори. Този фрагмент може да бъде или равномерно запълване, или градиент. Краищата на картината трябва плавно да преминават към "не". Тук имаме предвид прехода към някакъв хомогенен фон.
Ако текстура се използва като фон, не забравяйте да запазите един повтарящ се фрагмент за дизайнера на оформление като отделен файл във формат jpg, png или gif.
Стандартните шрифтове са онези шрифтове, които са инсталирани в операционната система по подразбиране. Можете да намерите списък със стандартни шрифтове за уеб дизайн в интернет - няма много от тях. Можете да ги напишете и да ги запазите като измамен лист.
Персонализирани шрифтове са шрифтове, които не са инсталирани в операционната система. Обикновено нестандартните шрифтове се зареждат в шаблона на сайта с помощта на правилото за лицето на шрифта. Трябва да се има предвид, че използването на няколко нестандартни шрифта е нежелателно, т.к нестандартните шрифтове увеличават времето за зареждане на уеб страница (документ). Те могат да тежат много по-тежки от стандартните шрифтове. Зависи и какви стилове на шрифтове използва дизайнерът – колкото повече стилове, толкова по-тежък е шрифтът. Препоръчително е да не използвате платени шрифтове, т.к. тогава има проблеми с конвертирането им за WEB. За да търсите шрифт, е напълно възможно да се справите с безплатни шрифтове на Google.
Ако по-ранните дизайнери бяха ограничени до стандартни шрифтове, днес, когато дните на браузърите IE6 отминаха -IE8, дизайнерите получават пълна свобода в полета на фантазията при избора на шрифтове. Ако оформлението използва нестандартни шрифтове, не забравяйте да ги прикачите отделно към оформлението на сайта или дайте връзка към шрифтовете на Google.
Размерите на шрифта (размер в точка) трябва да бъдат посочени като цели числа, размери като 19,82 px и други подобни не са разрешени. Излишно не използвайте никакви трансформации и подигравки на шрифтове. Добавете малко главоболие към кодера.
Препоръчително е да не запълвате цвета на шрифта с градиент. Възможно е, но само без фанатизъм. Най-добре е обаче да използвате плътен цвят.
Едно последно нещо за шрифтовете, никогаРастерни текстови блокове. За тази постъпка със сигурност ще ти откъснат главата, не буквално разбира се.
Относно цветовете
Избягвайте използването на нестандартни цветови профили. Това в крайна сметка води до факта, че някой ще започне да крещи и да хвърля чехли, че в дизайна има други цветове. И, разбира се, всички претенции ще паднат върху главата на наборчика. Написах отделна статия за това как правилно да настроя цветен профил във Photoshop, препоръчвам да я прочетете.
Активни елементи
Обобщавайки всичко по-горе
Това, което бих искал да отбележа с последната точка е, че всеки уеб дизайнер трябва да е и малко програмист, за да разбере какви трудности може да има един програмист.
Това е всичко. Да, публикацията се оказа дълга, но мисля, че ще бъде полезна за много, които са решили да завладеят основите на уеб дизайна.
Ще се видим в следващите публикации. Късмет.
Заур Магомедов
Оформител с богат опит. Създавам уебсайтове от 2009 г. Постоянно се уча и подобрявам уменията си. Водя собствени проекти, включително този блог.