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

Дизайн сайта

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

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

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

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

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

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

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

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

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

Рис. 2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шрифты.

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

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

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

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

Дизайн логотипа

Важной частью web-сайта и всего фирменного стиля является логотип. Он располагается в начале сайта, и задает весь стиль в дальнейшем.

Логотип – это уникальный символ или знак, который используются для увеличения узнаваемости компании среди общества и других компаний. Данный термин появился в XIX веке и первоначально он составлялся из нескольких, соединенных между собой знаков.

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

В логотипе должно сочетаться несколько параметров:

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

Форма и цвет являются основными элементами при восприятии и для них можно выделить отдельные параметры, которые применяются при создании логотипа.

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

- Естественность (применение таких приемов как объем, тени, полутона, отражения и т.д.).

- Сбалансированность (правильное расположение композиции, структуры изображения, использование геометрических законов).

- Простота (логотип должен быть простым, но передавать максимальное количество информации о компании).

- Динамичность (сочетание различных размеров, использование различных штрихов, направленных форм, наклон элементов)

Вывод по разделу 1

Сайт – это носитель информации сети интернет. Файловая система сайта располагается на удаленном сервере. Сайт имеет доменное имя. Сайт имеет ряд страниц статичных, либо динамичных.

По содержанию сайт бывает статичный и динамичный. По виду web-сайты делятся:

- сайт визитка;

- посадочная страница;

- блог;

- интернет-магазин;

- web-сервис.

Основными языками web-программирования являются: HTML, CSS, PHP, JavaScrit, XML, XSL.

CMS (Content Management System - система управления контентом) – это программа, которая управляет всем контентом сайта и позволяет работать с ним.

    CMS делятся на студийные, бесплатные и коммерческие. Основные CMS – Joomla, WordPress, 1С-Битрикс, UMI.

При разработке дизайна сайта важно придерживаться некоторой последовательности:

- исследование;

- человек;

- путь;

- скетч и прототип;

- интерактивный прототип;

- дизайн.

Одной из важнейших деталей является дизайн логотипа, в котором должны сочетаться:

- гармоничность;

- естественность;

- сбалансированность;

- простота;

- динамичность.