Дизайн на страниците

"Дизайн" може да означава много неща, но в тази статия ще разгледам два аспекта от дизайна на страниците на един сайт:

1. Разбираемост и достъпност: лесно ли се възприема написаното; доколко лесно потребителите се ориентират в страниците на сайта;
2. Художествено оформление: какви са основните принципи на графичния дизайн.

Разбираемост и достъпност

Можете да направите текста на посланието си по-лесен за възприемане, следвайки няколко прости правила:

• Правете обобщения

  Основната мисъл на страницата трябва да става ясна от самото начало. В повечето случаи не можете да изисквате търпение от посетителя да прочете половината страница, за да разбере за какво става дума.

• Избягвайте прекалено дългите изречения.

  Стилът на четене на книга и на интернет страница значително се различава. Самата структура на интернет подканя много интернет потребители да преглеждат само набързо всяка отделна страница, за да могат (безуспешно разбира се) да наваксат с океана от останали страници. На подобен стил на четене повече прилягат кратки, лесни за възприемане изречения.

• Разделете страницата на няколко колони или задайте приемлива широчина на страницата.

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

• По възможност избягвайте прекалено дългите страници.

  Ако все пак се наложи да напишете такава, добавете в края на подобна страница линк към началото - хората не обичат да скролират.

• В тази връзка, не слагайте текст в малка рамка.

  Да накарате посетителите си да превъртат текст като хамстери - колело, е един от най-сигурните начини да ги раздразните.

• Добавете подходяща навигация - менюта и линкове.

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

• Поставете поле за търсене по ключови думи

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

• Слагайте подходящи alt обяснения за всички изображения на страницата.

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

  С подходящ alt текст ще удовлетворите не само моралните и юридически изисквания (в някои страни се изисква интернет страниците да бъдат достъпни за хора с увреждания), но и едно от условията за по-добро класиране на страницата от интернет търсачки, които индексират думите в alt обясненията

• Илюстрирайте със схема или картинка трудните за обяснение или възприемане идеи.

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

Художествено оформление - основни принципи на графичния дизайн

За интернет страниците важат универсалните принципи на графичния дизайн:

Баланс

Балансирането има за задача подходящото разположение на елементите на страницата. Различават се три вида балансиране:

• симетрично

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

• асиметрично

  някои елемент умишлено е оставен да вземе превес над останалите. Използва се за привличане на вниманието или за създаване на напрегнато усещане.

• радиално

  елементите се групират в кръг около някакъв център.

Правило на третите (rule of thirds)

Това е често използван принцип във фотографията - ако мислено снимката се раздели хоризонтално и вертикално с по две линии на по три равни части, най-важнните елементи трябва да се поставят на пресечната точка на тези линии.

Разстояние

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

Подравняване

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

• хоризонтално

  лявата и дясната граница са видимо еднакви. Не е необходимо подравняването да е за цялата страница - хоризонтално подравнени могат да бъдат примерно и отделните вертикални колони.

• вертикално

  горната и долната граница са видимо (приблизително) еднакви. Вертикално подравнена може да е цялата страница или само част от нея.

• краево

  елементите се подравняват по техния ляв, десен, горен или долен край.

• централно

  Частен случай на хоризонтално и/или вертикално подравняване.

• оптично

  използва се за създаване усещане за подреденост, когато всъщност елементите не са точно подредени.

Повторение

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

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

Контраст

Контрастът представлява разликата между два елемента. Тази разлика може да бъде по цвят, интензивност, форма или големина. Колкото по-голяма е разликата, толкова по-голям е контрастът и толкова по-силен е ефекта.

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

Често срещана грешка е прекомерното използване на ярки цветове или примерно използване повсеместно на главни букви. Понеже всичко изглежда еднакво ярко, липсва контраст и важните елементи се изгубват.

Празно пространство

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

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

Още няколко детайла

След като сте написали интересен и лесен за възприемане текст, можете да направите страницата по-изискана с няколко малки детайла:

• Направете си лого, което да стои в началото на всяка страница.

  То обединява страниците на сайта ви около някаква централна идея и служи за лесно разпознаване на сайта ви от посетителите. Логото ви може да съдържа някакъв символ или просто украсен текст - послание. Можете лесно да си направите лого с някоя програма за изображения, като например Photoshop или безплатния му еквивалент GIMP.

• Създайте си фавикон.

  Това е малката иконка, която стои до името на страницата ви в адресното поле на браузъра. Когато потребителите ви запазват някоя страница от сайта ви като bookmark, фавиконът ще бъде съхранен заедно със заглавието на страницата. Ако имате лесно запомнящ се фавикон, ще помогнете на посетителите си бързо да открият показалеца за вашата страница и да се върнат към нея. Фавикон можете да направите напр. от снимка с редактора GIMP или да ползвате безплатни интернет редактори:
  фавикон-генератор-от-файл: този фавикон генератор ще превърне посочен от вас графичен файл (JPEG, GIF, PNG) във формата за фавикон .ico
  фавикон-художник: на тази страница можете да създадете фавикона си пиксел по пиксел (не е чак толкова много - фавиконите са с ограничен размер: 16x16 пиксела).

начало на страницата