facebook mail marker

Навигация

Разработка дизайна сайта

  • Posted by
  • разработка, разработка дизайна, дизайн
  • Comments: 7

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

Проектирование сайта и разработка прототипа

Всегда разработка сайта начинается с разработки прототипов и технического задания. О премудростях написания технического задания для разрабатываемого сайта мы подробно рассказываем в статье “Техническое задание на разработку сайта”.

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

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

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

С точки зрения структурного построения страниц существует ряд современных тенденций:

  • Фиксированная центральная колонка
  • Закрепленная боковая навигация
  • Колонки с разной длинной
  • Горизонтальный скролл 

О каждом из них читайте в нашем материале: “Структура и проектирование страниц сайта”

Разработка концепции дизайна сайта

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

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

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

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

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

  • Material дизайн
  • Flat дизайн
  • Minimalism
  • Скевомофизм
  • Metro стиль

О каждом из этих направлений мы довольно подробно написали соответствующий материал на нашем сайте: “Тенденции современного web-дизайна”

Разработка дизайна типовых страниц сайта

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

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

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

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

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

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

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

Разработка дизайна для динамических элементов сайта 

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

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

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

Кросплатфоменность

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

Подготовка макетов к верстке 

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

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

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

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

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

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

Последние публикации

Фронтенд vs Бэкенд

Обращаясь в компанию занимающуюся разработкой сайта, Вы наверняка услышите эти слова, но что они обозначают и для чего нужны? Давайте разберемся!

Разработка дизайна сайта

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

Техническое задание на разработку сайта

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

Тенденции современного web-дизайна

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

Структура и проектирование страниц сайта

Для любого сайта правильное проектирование и грамотная структура - залог его эффективности, после "продашена". Данная статья показывает, как сделать ваш сайт удобным и понятным с точки зрения его структуры не только для пользователя, но и для поисковой системы.
Оставить комментарий
kuhninazakaz.info 01 Jun 2018 в 22:11 #
маленькая кухня Электросталь

http://kuhninazakaz.info/page/malenkaya-kuhnya-elektrostal/
.
gepatitu-c.net 23 May 2018 в 08:52 #
Лечение гепатита с викейра пак с рибавирином


http://gepatitu-c.net/page/lechenie-gepatita-s-vikejra-pak-s-ribavirin om/

.
taxi-vovrema.info 22 May 2018 в 22:05 #
заказ такси в котельники

http://taxi-vovrema.info/page/zakaz-taksi-v-kotelniki/
.
Laytriklew 10 Mar 2018 в 08:27 #
vientre de alquiler es muy renombrado en todas partes del mundo. La motivo principal de eso es que una mujer se hace madre para neonato despues su alubramiento. Un monton de madres seria una mami, pero cualquiera de ellas no tiene la posibilidad. Por este motivo en los ultimos anos un dato novedoso presento – gestacion subrogada.

Cuando gestacion es medicamente irrealizable, hay solo una metodo para ser una madre. Esto es gestacion subrogada. En principio, en estos casos se usa indemnizacion monetaria. En realidad, para buscar una mujer sana hay que hallar apoyo que brinda este tipo de ayuda.

Recomendamos usar estea <a href=https://maternidad-subrogada-centro.es/coste.php>el costo madres subrogadas </a> centro. En estea centro ucranianoa mucha gente de EUA, Reino Unido y otras ciudades se hacen mamas subrogadas. De acuerdo con la ley maternidad subrogada es juridico. La licitud y precio de gestacion subrogada son muy diferentes. Depende de region, religion, color de pelo, etc. En nuestrosas centros puedes tomar una eleccion sobre un tipo de subrogacion.

Recomendamos a todos nuestros usuarios usar subrogacion habitual. Pero nuestro servicio contiene tambien la gestacion subrogada. En loslas agencias de Feskov son designaciones por vientre de alquiler. Cuando ingresa a nuestrosas clinicas situadosas en Ucrania – una parte de Feskov Human Reproduction Group, tiene un consultor. El consultor se aconsejara sobre cosas diferentes desde el principio hasta el fin. Por lo general maternidad subrogada continua 7 meses.

Entonces el administrador elabora todos los documentos necesarios y Usted puede llevar al nino. Por lo general, el administrador consulta su familia proximos meses. Si tiene que obtener un nino, aconsejamos ir alli mother-surrogate.com. Gerentes que trabajan alli son muy inteligentes.

Ellos contestaran a todas las solicitudes. Si necesita algun cuidado, ellos se ayudaran. Tambien ellos proporcionaran contratos antes este proceso. En el sitio web Usted puede observar contactos. Tambien puede descubrir costas y apoyo.

Asesoramiento tecnico pueden responder en idiomas diferentes. Usted puede tomar decision por eso. Si podria obtener recomendacion sobre vientre de alquiler como un proceso, doctor Feskov asesorara para Usted.
Markozsep 22 Feb 2018 в 04:57 #
Сегодня такое время, что не всегда возможно решить вопрос быстро и спокойно. В разных ситуациях надо воспользоваться консультацией адвокатов, которые работают в юридической сфере. Эти фирмы понимают в разнообразных нюансах и смогут оказать вам юридическую консультацию.

Находится фирма в СПБ и участвует в правовом сопровождении. Просмотреть более детальную информацию об обслуживании фирмы <a href=http://jurist-piter.ru/uslugi-dlya-grazhdan/vzyskanie-neustojki-p o-ddu/iskovoe-zayavlenie-o-vzyskanii-neustojki-po-ddu.html>исковое заявление о взыскании неустойки с застройщика</a> реально здесь.

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

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

С помощью jurist-piter.ru вы можете устранить юридические вопросы в бизнесе, с покупкой авто или продажей жилья.
MascarAlmof 21 Feb 2018 в 09:23 #
Вы в ищите компанию, которая соорудит вам автомойку самообслуживания под ключ? Есть интерес разработать моющую станцию, которую смело можно обозначить startup? Тогда вы на нужном пути!

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

Обслуживание не стоит на месте. У вас тоже есть шанс начать использовать инфо услуги. Для этого вы имеете шанс обратиться в фирму WASHERCAR, которая поможет в <a href=http://washercar.com/>мойка самообслуживания под ключ цена в украине</a> . У фирмы присутствует огромный опыт работы.

Администраторы имеют шанс предоставить вам вероятность сделать выбор: приобрести готовую мойку самообслуживания или построить мойку самообслуживания под определённые запросы.
Бесконтактные мойки самообслуживания – это высоколиквидное направление, которое захватит будущее в этой отрасли. Компания, которую вы можете выбрать на washercar.com, может предложить вам франшизу.
GlennManna 03 Jan 2018 в 18:27 #
заказать оптимизация сайтов раскрутка сайта логин в скайпе SEO PRO1

Присоединяйтесь к нам в социальных сетях

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