попандер

четверг, 10 декабря 2015 г.

Дизайн современного сайта, проблемы и новинки

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


Интернет находится в постоянной трансформации,
как по причине развития самой инфраструктуры сети,
обеспечивающей все большие скорости и объемы об-
мена информацией, так и увеличивающей проникновение
сети вовсе более бедные и отдаленные уголки планеты;
так и по причине появления инновационных устройств со-
здания и потребления контента. Так если, всего 5–6 лет
назад, основная масса устройств, подключенных к сети
интернет представляла собой стационарные компью-
теры, то уже сегодня это место заняли разнообразные мо-
бильные устройства.
Основные направления создания и потребления
контента в сети Интернет подвержены Моде. И развива-
ются по ее законам. Когда-то это были форумы, потом им
на смену пришли блоги, сегодня это социальные сети.
Так же к числу основных контентных направлений
можно отнести разнообразные новостные ресурсы,


а также ресурсы интернет-коммерции (различные мага-
зины и торговые площадки — агрегаторы), а также по-
исковые ресурсы.
Вместе с тем, существуют и разнообразные ни-
шевые направления, имеющие определенную ауди-
торию. Например, онлайн-библиотеки, игровые порталы,
научные порталы и так далее.
Кроме того, не надо забывать о многочисленных ре-
сурсах, имеющих место быть в корпоративных сетях (так
называемых Интранет-ресурсах). [3, с. 36]
Первое, что объединяет все эти ресурсы — это необхо-
димость постоянного добавления и обновления контента.
Это является как правом, так и обязанностью распростра-
нителя контента. Правом, поскольку любое, изменение
значимого для ресурса контекста, может быть отражено.
Обязанность, заключается в необходимости поддержания
ресурса в актуальном состоянии. Поскольку, только ак-
туальные ресурсы в современном информационном мире
посещаются и выигрывают в конкурентной борьбе за ре-
сурсы пользователей.
Второе, это вопросы удобства использования инфор-
мационных ресурсов, поскольку в наше время, даже зако-
стенелому физику будет крайне непривычно использовать
сайт с интерфейсом 20-ти летней давности.
Третье, это проблемы жизненного цикла ресурса,
от его появления на свет, через развитие, к расцвету
и увеличению числа пользователей.
Таким образом, современный сетевой информаци-
онный ресурс или веб-сайт, должен обладать набором ха-
рактеристик, обеспечивающих ему необходимые и доста-
точные условия для существования и успешной работы.
Другими словами, современный веб-сайт должен иметь
профессиональный дизайн в широком смысле этого слова.
Помимо внешней, интерфейсной части, которая обычно
понимается под дизайном, включающей в себя, систему
компоновки контента, и навигацию, дизайн информаци-
онной системы включает в себя и невидимую для пользо-
вателей, серверную инфраструктуру.
Современная парадигма дизайна информационных
систем, подразумевает четкое разделение на три вза-
имодействующих составляющих: внешняя визуальная
часть, предназначенная для взаимодействия с конеч-
ными пользователями (или в общем случае с внешними
информационными системами), подсистему хранения
данных, а также подсистему промежуточного слоя, при-
званную обеспечивать интерфейс между визуальной ча-
стью и хранимыми данными, собственно контентом. Эта
часть представлена бизнес-логикой системы. Вышена-
званная парадигма обозначается как MVC (Model-View-
Controller).

Появление данной парадигмы, а затем активное вне-
дрение в практику создания и эксплуатации информаци-
онных систем, в том числе и веб-ресурсов, было связано
в первую очередь с необходимостью создания и поддер-
жания в работоспособном состоянии высоконагруженных
систем, с достаточно длительным сроком жизни. При этом
подразумевается, что в течении жизненного цикла, си-
стема будет подвержена постоянным эволюционным из-
менениям. [5]
Рассмотрим типичный жизненный цикл веб-сайта:
1. Формирование идеи веб-сайта — на этом этапе
происходит разработка концепции ресурса, определение
аудитории, формируются общие принципы контентного
наполнения
2. Разработка бета-версии (или прототипа веб-
сайта). На этом этапе апробируются концепции и идеи
первого этапа. Одной из наиболее важных задач дан-
ного этапа, является быстрое создание системы, выпол-
няющей базовые и наиболее важные для разрабатыва-
емого сайта функции. Предполагаемая, на этом этапе,
нагрузка на систему — невысока, инвестиции на данном
этапе так же скромные, поэтому, как правило использу-
ются бесплатные системы разработки, системы хранения
данных и т. п.
3. Продвижение созданного веб-сайта (рекламные
усилия, продвижение через социальные сети и т. п.). На-
ращивание функционала, устранение существующих
проблем и ошибок
4. Успех веб-сайта, резкое повышение нагрузки.
Как следствие, редизайн системы хранения данных и до-
ступа к данным, с сохранением пользовательских интер-
фейсов (модернизация подсистем хранения данных и под-
системы реализации бизнес — логики)
5. Модернизация визуальной подсистемы в соответ-
ствии с последними трендами. [8]
Все вышеперечисленные этапы в некоторой степени
являются идеализированной моделью. В реальности, все
три слоя дизайна развивающегося и популярного веб-
сайта, находятся в постоянном развитии. При этом, раз-
деление не три независимых функциональных части поз-
воляет оптимальным образом разделять работы между
различными группами разработчиков. Так, обычно раз-
деляют разработчиков, занимающихся пользователь-
скими интерфейсами (front side) и разработкой серверной
части — бизнес-логикой и хранением данных (server side).
В наиболее нагруженных проектах, так же отдельно выде-
ляются группы разработчиков ответственные за поддер-
жание и оптимизацию баз данных.
Описанная выше модель дизайна веб-ресурсов сегодня
используется повсеместно, как в коммерческих веб-
проектах, так и в многочисленных решениях предна-
значенных для создания индивидуальных веб-ресурсов,
например, таких, как система ведения блогов WordPress
и многих других.
Вместе с тем, большинство пользователей веб-ре-
сурсов сегодня даже не догадывается, о внутренних ме-

ханизмах работы используемых систем. Вся их практика
сосредоточена на взаимодействии с визуальной подси-
стемой. И дизайн последней имеет огромное значение
для успешности веб-ресурса. Поэтому следующая часть
статьи, будет посвящена именно этому аспекту дизайна
веб-сайтов. [9]
Современные проблемы визуального дизайна сайтов
Проблемам создания «идеального» визуального ди-
зайна веб-интерфейсов, посвящено, множество статей.
Поэтому в здесь мы не будем касаться данного аспекта.
Поскольку на наш взгляд, сегодня, на первое место
выходит не проблема создания «правильного» визуаль-
ного дизайна веб ресурса, а скорее проблема создания
дизайна учитывающего новации пользовательского
опыта доступа к веб-ресурсам с использованием множе-
ства новых устройств, таких как планшеты, смартфоны,
смарт-телевизоры и другие устройства. Ключевой особен-
ностью пользовательского опыта доступа в сеть интернет
с этих устройств, является, то, что пользователи нахо-
дятся в сети постоянно, в любое время суток. В пределе
можно говорить о том, что они находятся в сети все 24
часа в сутки. Эта особенность коренным образом меняет
пользовательское поведение, поскольку если раньше, ак-
тивным пользователем сети интернет считался тот, кто,
хотя бы раз в неделю проверял свою почту, то теперь
это тот, кто проводит в сети все свободное время. Таким
образом, визуальный дизайн современных успешных
веб-ресурсов, в первую очередь должен быть ориенти-
рован на инновационные устройства. И должен учиты-
вать, как существующие ограничения (небольшой размер
экрана, ограниченность устройств ввода информации),
так и имеющиеся возможности (высокое разрешение
экранов устройств, наличие фото и видеокамер высокого
разрешения, наличие различных датчиков и т. п.). Таким
образом, одно из ключевых требований к дизайну совре-
менных веб сайтов — размещение всей важной функ-
циональности, в крайне ограниченном объеме, и макси-
мально полная поддержка инновационных возможностей
устройств. [4, с. 58]
При этом важно отметить, что сегодня в наличии
у веб-разработчиков имеются подходящие инструмен-
тальные средства, позволяющие реализовывать предъ-
являемые к веб-ресурсам требования. Например, язык
HTML 5 — позволяет реализовать все вышеперечис-
ленное и к тому же является гибкой и расширяемой спе-
цификацией, что гарантирует добавление новых возмож-
ностей, появляющихся вследствие развития технологий
в сфере пользовательских устройств. [6]
Новые вызовы для дизайна веб-сайтов
Непрерывное развитие техники, ставит перед созда-
телями веб-сайтов новые задачи. Так видится, что сле-
дующими за смартфонами и планшетами, массовыми

пользовательскими устройствами станут разнообразные
системы виртуальной реальности (VR). Прототипами этих
устройств сегодня являются очки Google Glass и прочие
подобные проекты.
Основой особенностью данных устройств, является
еще больший отход от современных парадигм ввода ин-
формации (клавиатуры и манипуляторы) в пользу ре-
чевого ввода информации, а также учет состояния раз-
личных датчиков (магнитометр, GPS датчик положения
головы). [7]
Выводы
В современном информационном мире веб-ресурсы
занимают все более важное место. Вследствие развития

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

Литература:
1. Макдональд, М. HTML5. Недостающее руководство, БХВ-Петербург, 2012, 480 с.
2. Мойнейро, М. Дизайн-это работа, М, Манн, Иванов и Фербер, 2012, 176с
3. Нильсен, Я. Mobile Usability. Как создавать идеально удобные приложения для мобильных устройств, М.,
Эксмо, 2013, 256с
4. Уолтер, А. Эмоциональный веб-дизайн, М, Манн, Иванов и Фербер, 2012, 340с
5. Responsive Design Problems and Fixes, [Электронный ресурс]. — URL: http://uxmag.com / articles / 10-responsive-
design-problems-and-Ъxes. (дата обращения: 15.12.2014)
6. Front-End Dev guidelines, http://tech.tmw.co.uk / code / TMW-frontend-guidelines / #section-css-preprocessors
7. WHAT WEB DESIGNERS CAN LEARN FROM GOOGLE'S MATERIAL DESIGN, http://www.webdesignerdepot.
com / 2014 / 10 / what-web-designers-can-learn-from-googles-material-design /
8. Дизайн под носимые устройства, http://www.dejurka.ru / web-design / wearable-design /
9. Как создать руководство по стилю для веб-дизайна, http://www.dejurka.ru / articless / web-design-style-guide /

Горностаева Екатерина Айдимеровна, магистрант
Российский государственный педагогический университет имени А. И. Герцена (г. Санкт-Петербург)

Комментариев нет:

Отправить комментарий