Разработка методики создания графического интерфейса веб-сайтов

Размещено на http://www.allbest.ru/

Разработка методики создания графического интерфейса веб-сайтов

Введение

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

Стремительное развитие веб-дизайна влечет за собой появление на рынке множества различных вариантов и стилевых решений внешнего оформления веб-сайта, основной целью которого является привлечение и удержание внимания пользователя на странице [1, 2]. Задачу привлечения посетителя на сайт решает графическое оформление. В свою очередь, удобство и простота пользования позволяют удерживать посетителя и заставляют его возвращаться на сайт вновь и вновь. Прослеживая развитие отечественных сайтов, стоит заметить, что не все они совершенны по своей структуре, удобству и графическому оформлению. Большое внимание следует уделять не только внешнему виду, но и логике, и строению сайта. Все должно быть интуитивно понятно начиная с переходов от страницы к странице, заканчивая функционалом сайта [3].

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

1. Анализ литературных данных и постановка проблемы

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

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

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

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

Еще один важный момент-это понятие ритма. Работа с различными материалами, текстурой и фактурой становится особенно важной сейчас, когда material design набирает все большую популярность. При разработке сайта в этом стиле важно как умение работать с материалами, так и знание принципов плакатного печатного дизайна [5].

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

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

Стоит отметить, что не существует методик по созданию сайта в конкретном стиле, а существуют лишь общие руководства по созданию макетов сайтов [3, 4].

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

2. Цель и задачи исследования

веб сайт графический интерфейс

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

Для достижения поставленной цели необходимо решить следующие задачи:

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

- исследовать инструменты и методики создания графического интерфейса веб-сайтов;

- определить проблемы создания макета вебсайта;

- определить критерии эффективности разработки графического интерфейса;

- разработать эффективную методику создания графического интерфейса;

- осуществить практическую реализацию методики в виде веб-сайта;

- провести сравнительный анализ эффективности методик создания графического интерфейса.

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

Предмет исследования - инструменты и методы создания графического интерфейса веб-сайтов [6].

3. Анализ процесса разработки дизайна сайта

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

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

Схема, в соответствие с которой чаще всего действуют веб-дизайнеры, разрабатывая макет сайта, представлена на рис. 1.

Рис. 1. Схема типового процесса создания дизайна сайта

Fira Sans

Fira Sans Ultra Bold - для основного заголовка, логотипа, который будет на всех страницах, 60 pt

Fira Sans

Fira Sans Book - для меню, 17pt

Fira Sans

Fira Sans Light - для ценников, с подчеркиванием, 15 pt

$400

Fira Sans Medium - для цены, 15 pt

Fira Sans

Fira Sans Light - основной текст, 13 pt

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

На следующем этапе следует сделать дизайн и для остальных страниц сайта. И с этим могут возникнуть проблемы. Дизайнер создает новую страницу, пытается воссоздать на ней стиль предыдущей, однако этому разделу выбранное расположение меню, компоновка основных элементов или сам дизайн может не подходить. Может понадобиться изменить цветовую палитру или выбранный шрифт. Дизайнер вынужден возвращаться назад и переделывать уже готовую страницу [7].

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

4. Разработка эффективной методики создания графического интерфейса сайта

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

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

Предлагаемая методика является линейной и предполагает последовательное выполнение ряда шагов.

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

Так, на первом шаге необходимо провести глубокое исследование и сделать наброски. Важно глубоко вникнуть в тему, исследовать и проанализировать все достоинства и недостатки аналогичных по теме сайтов. На этом шаге дизайнер предпринимает мозговой штурм, ищет вдохновение, осуществляет бенчмаркинг, делает различные наброски, заметки, записи своих идей [8]. Результатом работы на текущем этапе является эскиз будущего сайта (рис. 3).

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

Создается дизайн следующей страницы

Рис. 2. Схема оптимального процесса создания дизайна сайта

Рис. 3. Эскиз разрабатываемого сайта, бенчмаркинг

Следующий шаг - это разработка прототипа всех страниц сайта. На этом этапе принимается множество важных решений, в частности, о расположении меню навигации [9]. Результатом работы на этом этапе является прототип страниц сайта (рис. 5)

TURE

Рис. 5. Пример прототипа страницы сайта

И, наконец, на заключительном шаге осуществляется финальная разработка дизайна всего сайта (рис. 6).

Рис. 6. Пример разработанного дизайна веб-сайта

Таким образом, разработана линейная методика создания графического интерфейса веб-сайтов, позволяющая сократить время, отведенное на разработку дизайна и повысить продуктивность сайта за счет увеличения количества посещений и его конкурентоспособности [10].

Выводы

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

Литература

1. Вин, Ч. Как спроектировать современный сайт: профессиональный веб-дизайн на основе сетки [Текст] /Ч.Вин. - Москва: Питер, 2011. - 192 с.

2. Андерсон, С. Приманка для пользователей: создаем привлекательный сайт [Текст] / С. Андерсон. - Москва: Питер, 2013. - 234 с.

3. Уильямс, Р. Не дизайнерская книга о дизайне [Текст] / Р. Уильямс. - М.: Гелла-принт, 2002. - C. 240.

4. Дакетт, Д. HTML и CSS. Разработка и дизайн вебсайтов [Текст] / Д. Дакет. - Москва, 2013. - 480 c.

5. Рязанцева, Л. Что нам стоит сайт построить [Текст] / Л. Рязанцева // Библиополе. - 2008. - № 8. - С. 20-21.

6. Густавсон, А. Адаптивный веб-дизайн [Текст] / А. Густавсон. - Easy Readers, 2011. - 98 с.

7. Фрэин, Б. Отзывчивый дизайн при помощи HTML5 и CSS3 [Текст] / Б. Фреин. - Packt Publishing Ltd., 2012. - 105 с.

8. Маркотт, И. Отзывчивый веб-дизайн [Текст] / И. Маркотт. - A Book Apart, 2011. - C. 72.

9. Роблевски, Л. Дизайн веб форм: Заполнение форм [Текст] / Л. Роблевски. - Розенфельд Медиа, 2008. - 30 с.

10. Джонсон, С. Откуда берутся хорошие идеи [Текст] / С. Джонсон. - Риверхэд, 2011. - 45 с.

Размещено на Allbest.ru