4. 1С-Битрикс

1С-Битрикс – это система управления контентом сайта, которая создана для поддержки и развития web-проектов.

БД

Ядро

Модули

Компоненты

Вывод информации

Структура системы делится на 5 частей:

• БД (база данных) – это основная часть, в которой хранятся все данные системы ее настройки, пользователи и т.д.

• В ядре находятся функции по управлению базой данных. С помощью ядра можно управлять настройками системы и файловым менеджером (редактирование страниц, создание страниц).

• Модули – это набор скриптов и классов, которые позволяют управлять базой данных. Также модули при их загрузке и создании могут создавать собственные таблицы и имеют собственные функции, которые этими таблицами управляют. Самые основные модули в системе – это модули инфо-блоков, на котором строится практически 90% задач, либо модуль интернет-магазин.

• Компоненты представляют из себя часть системы, в которой сочетаются функции из разных модулей. Они реализуют логику решения задачи.

• Вывод информации – внешний вид, в котором выдается информация на внешнюю часть сайта.

4. UMI

UMI – это система управления сайтами. Она позволяет создавать, редактировать и поддерживать сайты. Этой системой могут пользоваться как люди, не обладающие специальными навыками, так и опытные разработчики сайтов.

Пользователь со средним знанием компьютера без труда сможет установить систему на сервер и настроить необходимые параметры, подобрать подходящий шаблон и размещать на сайте информацию. К каждому этапу существует инструкция, и при необходимости пользователь может обратиться в службу поддержки.

UMI– это иерархическое приложение, состоящее из следующих компонентов:

Рис. 1

5. Основы дизайнаweb-сайта

1.6.3 Дизайн сайта

Для того чтобы составить грамотный дизайн сайта, следует соблюдать некоторую последовательность разработки:

• Исследование. Перед началом любого проекта стоит произвести исследование, посмотреть аналоги, проанализировать конкурентные проекты, получить как можно больше знаний о проектируемой области.

• Человек. Все, что делает дизайнер должно быть направлено на человека, и очень важно понимать, для кого именно создается дизайн, следует сформулировать несколько таких персонажей.

• Путь. Весь проект существует для какой-то цели, и человек должен пройти по сайту какой-то путь, например, главная страница – просмотр контента – переход на следующую страницу и т.д. Этот путь важно продумать на этапе проектирования.

• Скетч и прототип. Первые наброски дизайна сайта на бумаге, примерное расположение блоков и других элементов, чтобы понять, как будет выглядеть сайт на структурном уровне. Это позволит избежать ошибок в будущем, на уровне разработки.

• Интерактивный прототип. Для web-дизайна в настоящее время недостаточно статического макета, так как он не отображает путь. Дизайнер должен уметь показать взаимодействие человека с проектом.

• Дизайн. На этом этапе прорабатываются детали, уточняются нюансы и утверждается проект.

Используя современные тенденции в дизайне и разработке web-сайтов можно получить профессионально выполненный продукт, для этого стоит следовать некоторым правилам.

Сущности не должны множиться без необходимости.

Рис. 2

Каждый элемент сайта можно назвать сущностью. И в различных случаях, при разных действиях и разном дизайне эти сущности могут иметь различный внешний вид. На рисунке (Рис. 2) представлена кнопка с текстом внутри, далее кнопка масштабируется под разные варианты интерфейса. Например, кнопка действия выделяется ярко-зеленым цветом, представлена кнопка с иконкой, эта же сущность может быть в виде переключателя (комбинация сущностей), в виде ползунка, в виде checkbox. Во всех случаях общий дизайн сущности не меняется, это делает интуитивно понятным возможность совершить действие при нажатии данной кнопки.

Исключение элементов.

При создании проекта очень часто стоит вопрос о том, как его улучшить и что добавить, чтобы сделать его оригинальным и более полезным. Если же наоборот убирать ненужные элементы – это может поспособствовать облегчению и, следовательно, улучшению дизайна.

Самую важную информацию следует размещать на первом экране.

80% людей смотрят первый экран и уходят со страницы, только 20% людей просматривают остальную часть страницы. Это можно проследить с помощью инструмента, показывающего карту скроллинга. Наиболее популярное место сайта окрашено в красный. Следовательно, всю важную информацию нужно размещать именно на первом экране.

Отказ от креатива в пользу функциональности.

В большинстве сфер бизнеса креативный дизайн только мешает. Люди не понимают, как работает то, что они ранее не видели и не пробовали. Отличным примером, который сработал при появлении интернет-магазинов была корзина. Дизайнеры провели параллель, которая была людям интуитивно понятна. Человек пользуется корзиной в реальном магазине, и при переносе на сайт человек сразу замечает элемент, который приведет его на страницу оформления заказа.

Использование простых элементов.

Люди понимают и принимают лучше то, к чему уже привыкли, поэтому следует использовать те элементы, которые уже устоялись в данной сфере.

Наладка обратной связи.

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

Однородность элементов.

Элементы, которые одинаково работают, должны одинаково выглядеть. Если это кнопки должно быть единство дизайна, однородность формы, по которым пользователь поймет, что данные элементы интерактивны.

Микротипографика и макротипографика.

Микротипографика - это совокупность методов улучшения читаемости и внешнего вида текстов, особенно выровненных по ширине. Посредством этих методов уменьшается количество слишком широких расстояний между словами и сдвигаются некоторые строки для более равномерного распределения текста по странице. (ссылка на википедию). Микротипографика изучает буквы, интерлиньяж, межстрочное расстояние, работу с текстом и текстовыми блоками.

Основные методы, используемые в микротипографике:

• модульная сетка (помогает выровнять текст при наборе);

• выравнивание (элементов относительно друг друга);

• иерархия (правильное распределение линий сплошного массива текста, абзацного отступа и т.д.);

• навигация (расположение на странице вспомогательных элементов, помогающих ориентироваться человеку, например, колонэлементы);

• приводка строк (выравнивание строк относительно друг друга, как по вертикальным направляющим, так и по горизонтальным);

• выравнивание многоколонного набора (правильное согласование между соседними колонками и по нижней основе);

• соответствие текста и изображения (применение основ выравнивания между строк для правильного расположения иллюстраций);

• нешрифтовые элементы набора (использование в текстовой композиции нешрифтовых элементов, например, таких как плашки, рамки, линейки).

Макротипографика – структура текста в контексте общего дизайна.

Основные параметры: формат проекта, формат полос, их расположение на листе (экране) с учетом полей, формат строки и способ выключки, количество колонок и наличие специальных зон, предназначенных для дополнительного текста или иллюстраций.

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

Текст и иллюстрации. Определение схемы построения текстового и иллюстрированного материала и установление взаимосвязи между ними.

Зонирование. Правильное распределение не только основного текста, но и сносок, примечаний, изображений, таблиц и т.д.

Построение композиционных схем. Единство всех страниц с применением основных принципов построения. Доминирование, гармония, контраст, равновесие, группировка, динамика, ритм.

Проектирование макроструктуры. Базовое разделение страницы, формирование ее скелета.

Шрифты.

Не все шрифты в сочетании друг с другом выглядят гармонично. Следует подобрать набор шрифтов, которые друг с другом хорошо сочетаются, обычно это шрифтовая пара и на протяжении всего дизайна проекта использовать подобранные шрифты.

Следует использовать самые безопасные и эффективные комбинации: гротескные и нейтральные шрифты. Существуют наборы шрифтовых пар, которые признаны и уже используются долгое время (например, “Helvetica” – заголовок, “Bodoni” – основной текст).

В шрифтовой паре должен быть достаточный контраст. Сочетание старых гарнитур с современными шрифтами. Комбинирование выделительных шрифтов со шрифтами без засечек, разные размеры и стили.

Следует обращать внимание на различия выбранных шрифтов – они должны отличаться друг от друга. Если выбранные шрифты слишком похожи между собой, это будет дизайнерской ошибкой.