Основно съдържание
Дизайн на уеб страницата
Показахме ти как да правиш уеб страници, но не сме ти показали как страниците ти да изглеждат добре. Разбира се, красотата е в очите на този, който гледа, затова ти - и твоите потебители - трябва да решите дали страницата изглежда добре. Все пак можем да ти дадем някои съвети!
Освен да изглежда добре, вероятно ще искаш твоята уеб страница да се отличава от останалите, за да изпъква през потребителите.
Това често е трудната част — страницата да изглежда добре и в същото време да се отличава. Можеш да я направиш ужасно отличаваща се като покриеш всичко с ивици на зебра и използваш шрифт с размер 64 пиксела, но дали ще го направиш? Вероятно не.
Избиране на подходящи шрифтове
По подразбиране браузърите дават на уеб страниците стандартен serif шрифт, който носи на уеб страницата по-формален изглед. Може да искате да промените този стандартен шрифт със sans-serif, или да изберете конкретен шрифт, който може да се намери на компютрите на повечето потребители, като Garamond или Helvetica.
За да дадеш на своята уеб страница по-отличителен вид, можеш да използваш и различен шрифт. Например в Кан Академия използваме Lato за всички наши страници, приятен sans-serif шрифт:
Когато използваш уеб шрифт, браузърът на потребителя трябва да го свали файла на шрифта, за да можеш да се обръщаш към този файл в CSS-а. Това едопълнителен трафик за браузъра, затова не трябва да използваш прекалено много такива прифтове. Един чудесен източник на безплатни уеб шрифтове е Google Web Fonts. Разгледай тази примерна страница в Кан Академия, която използва два Google Web шрифта.
От където и да взимаш шрифтовете си, трябва да внимаваш да не прекалиш. Като цяло не трябва да използваш повече от два или треи шрифта, а те трябва да си подхождат. Ето един помощен уеб сайт, който дава примери за шрифтове Google Web, които си подхождат.
Избиране на подходящи цветове
Когато правиш дизайн на уеб страница, често искаш да използваш цветна палитра - цветове, които си подхождат и могат да бъдат използвани за различни части от уеб страницата. Тези цветове могат да се базират на фирменото лого, да са свързани с темата на страницата или просто да изглеждат добре заедно.
Имаш нужда от помощ при избора на палитра? Ако вече знаеш някои от цветовете, на които искаш да се базира палитрата, можеш да се обърнеш към Paletton, инструмент, който ти позволява да визуализираш различни палитри - едноцветни, триади, съседни цветове и четворни цветове.
Ако започваш от нулата, можеш да разгледаш палитри в COLOURLovers, общество от хора, които обичат цветовете и работят заедно за цветове, палитри и идеи за шаблони. Ето една палитра, наречена Giant Goldfish (Гигантска Златна рибка):
След като имаш избраната палитра ида трудната част: да решиш какъв цвят да бъде всеки от компонентите на страницата. Какъв цвят трябва да са заглавията? Връзките? Текста? Фонът? Най-хубавото на Paletton е това, че ти дава примерна страница, която използва палитрата:
След като решиш как ще прехвърлиш палитрата си в CSS, помисли за няколко неща:
- Ако промениш стила на връзките прекалено много, потребителите може вече да не ги разпознаватю.
- Цветовете на текста на преден план и на фона на текстовете трябва да са достатъно контрастни, за да не се налага потребителите да се взират. Провери цветовете си в тази проверка за контраста.
- Много хора не различават цветовете. Нкои цветови комбинации няма да са достатъчно контрастни за тях. Провери цветовете си в този симулатор за далтонизъм.
Ако се колебаеш за начина, по койот да използваш палитрата, можеш да изпратиш на приятели и да попиташ за тяхното мнение. Могат ли да прочетат всичко? Знаят ли куде могат да кликнат? Дали някои цветове не ги карат да сбърчат нос? Кои цветове харесват?
Разумно използване на празното пространство
Веднъж попитай един колега - който е дизайнер в Google - каква е неговата тайна за страхотен дизайн. Отговорът му? Празно пространство!
Празното пространство се отнася до всяко пространство между елементи, а в света на CSS обикновено се отнася до свойства като padding, margin и line-height.
Моят приятел е прав - празното пространство има голям ефект върху това колко добре изглежда уеб страницата и дали е лесно четима. Мои приятели дизайнери понякога прекарват часове в нагласяне на празното пространство, за да бъде точно, защото знаят колко важно е това.
За краен пример ето едно сравенение на сайдбара на нашата страница със и без празно пространство:
Какво означава това за теб? Трудно е да ти дадем твърди и бързи правила за празното пространство; просто го имай предвид. Винаги когато имаш елемент, който е до друг елемент, помисли какво поле трябва да има между тях. Ако имаш елемент с фон или контур, помисли какъв отстъп трябва да имат. Когато създаваш параграфи и списъци, имай предвид, че допълнителното пространство на височина ще направи текста по-четим.
Започване от шаблони и технологични рамки
Всички тези насоки може да те сплашат, особено ако не считаш, че дизайнът е твоята силна страна. Не се притеснявай, не е нужно да си експерт по дизайн, за да създадеш чудесна уеб страница. Вместо това можеш да започнеш от шаблон или фреймуърк и да се възползваш от работата на други дизайнери.
Шаблон е HTML и CSS код, който изглежда като завършена уеб страница, често попълнен с примерно съдържание. Можеш да намериш шаблони в W3Schools или да потърсиш в мрежата за "free webpage templates" (безплатни темплейти за уеб страници) — и да се надяваш, че тези, които намериш, са наистина безплатни! След като свалиш един шаблон, можеш да заместиш съдържанието и да продължиш да променяш CSS-а, за да стане такъв, какъвто искаш.
CSS рамките са колекции от CSS правила, които ти дават отлично начало за добър уебсайт. Има много популярни CSS рамки, коиот улеснявт създаването на красиво стилизирани сайтове — Twitter Bootstrap, ZURB Foundation, Pure CSS, Topcoat и многодруги. Можеш да разгледаш нашите примери за Twitter Bootstrap и ZURB foundation тук в Кан Академия.
След като свалиш CSS фреймуърка, можеш да разгледаш неговата документация, за да намериш примери – в тях често има и шаблони! – и да разбереш кои имена на CSS класове ще постигнат това, което ти трябва.
Когато използваш шаблони или рамки, рискуваш твоят уебсайт да изглежда точно като друг уебсайт и така да не изпъква толкова в ума на потребителя. За да избегнеш това, добави свое лого и промени ключови елементи като шрифта или цвета на фона.
Искаш ли да се присъединиш към разговора?
Все още няма публикации.