Модулни модуси
( статията е публикувана в брой 175 на списание .net)
/ Борил Караиванов за.../ Модулни модуси
Борил Караиванов е дизайн директор на BSH
( www.bsh.bg )
Въпреки че историята на модулния дизайн е стара, колкото опитите на човека да обедини красотата и науката, напоследък стана модерно да се говори за уебдизайн, основан на скрита решетъчна структура.
Без претенции за изчерпателност ще се опитам да предложа подход за проектиране на уебинтерфейс, като наблегна на три основополагащи композиционни проблема: пространство, вертикална и хоризонтална структура.
Пространство
- Побира ли се съдържанието на вашия уебсайт в по-малък екран?
- Използвате ли ефективно допълнителното пространство на мониторите с по-висока резолюция?
В последно време мобилните телефони все по-активно използват интернет, а мониторите достигат немислими допреди няколко години екранни резолюции. Днес да направиш уебсайт по мярка за повечето монитори е въпрос на живот и смърт.
Ето и няколко препоръки за ефективно използване на екранното пространство:
Интересувайте се от екранната резолюция на аудиторията на вашия уебсайт, както и от тенденциите за развитие в близко бъдеще!
Ориентирайте се към най-използваните екрани, като използвате еластичен дизайн за по-малки и по-големи екранни резолюции!
Бъдете реалисти и ограничете еластичността на композицията с минимален и максимален размер на употреба!
Вертикална структура
Използването на текст в колони налага да се съобразите с два проблема на четивността:
- Тясната колона прекъсва смислово текста на множество редове.
- Широката колона пречи при пренасянето на погледа на нов ред.
Тъй като еластичният дизайн променя динамично ширината на текста, е важно да контролирате четивността в минималната и максималната екранна резолюция на употреба.
Често в различните страници на един и същи уебсайт се налага да бъдат използвани композиции с 2, 3, 4, 5, 6 или повече колони. Обикновено клетъчна структура с 12 колони ефективно решава повечето проблеми, свързани с вертикалната композиция на уебсайта. Въпреки това е необходимо при всеки проект да се вземат предвид неговите особености и да не се търсят лесни решения.
Разработвайки вертикална структура на вашия уебсайт, имайте предвид следните препоръки:
- Определете ширината на колоните, като предвидите ширината на реклами, графики и други задължителни за съдържанието елементи с фиксиран размер!
- Ако използвате еластичен дизайн, съобразете възможните промени в ширините на колоните, разстоянията между тях и крайните отстояния на съдържанието от екрана!
- Използвайте гъвкави като размери текстове и илюстрации, адаптирани за различни екранни резолюции!
Хоризонтална структура
При текстовото съдържание трябва да се има предвид една особеност на екранните шрифтове. За да бъде облекчена четивността, те се създават с отворени начертания, което води до по-големи редовни букви. Тази особеност трябва да се има предвид и да се увеличава разредката между редовете, за да се запази четивността на текста.
Друга особеност на хоризонталната структура е, че тя може да се влияе пряко от вертикалната. Пример за това e разполагането на 12 продукта в уебсайт за електронна търговия. При минимална екранна резолюция е вероятно да имаме три вертикални колони и 4 реда с по 3 продукта във всеки. От друга страна, същата структура може да позволи при максимална екранна резолюция разполагане на продуктите в 4 и дори 6 колони, съответно на 3 и 2 реда.
Ето някои препоръки за ефективно използване на хоризонталната структура на вашия уебсайт:
- Определете основните хоризонтални блокове от информация и ги реализирайте така, че да се влияят от различни екранни резолюции.
- Бъдете гъвкави към съдържанието на всеки основен блок, като позволите пренареждане на елементите, които го изграждат.
- Отразете в структурата си оптическите особености при работа с текст, като вземете предвид шрифта, който ще използвате.
При разработването на решетъчна композиционна структура на уебсайт може да имате предвид и някои общи препоръки за работа:
- Скицирайте идеите си на хартия и не посягайте към мишката, докато не намерите решение за детайлите в композицията на бъдещия уебсайт.
- Оставете съдържанието да води формата, като подреждате, групирате и рационализирате пространството и съдържанието.
- Направете дизайн за разположение на съдържанието в основната, минималната и максималната екранна резолюция, която очаквате да ползва вашата аудитория.
- Нарушавайте решетъчната структура, за да подчертаете най-важните за композицията функционални и комуникационни елементи.
