Что такое дизайн web – кто это такой, что он делает, чем занимается на работе и сколько зарабатывает, кому подходит профессия, и где на нее учат

WEB дизайн и WEB разработка в чём разница и отличие

Привет, Друзья! Сегодня мы поговорим о том, что такое WEB дизайн и WEB разработка и в чём между ними разница. Итак поехали!

WEB дизайн и WEB разработка в чём разница и отличие

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

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

Что такое WEB дизайн

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

Инструменты и профессиональные навыки, которые отличают WEB-дизайнера от веб-разработчика:

1. Выполнение многоэтапного и сложного графического дизайна.
2. Размещение различных кнопок, всплывающих окон, рекламных баннеров и форм для подписки на сайте.
3. Применение для проектирования профессионального программного обеспечения (Photoshop, Illustrator).
4. Использование готовых стилей и компонентов для создания уникального внешнего вида сайта.
5. Брендинг, развитие корпоративного стиля, формирование запоминающегося дизайна логотипа.
6. Создание макетов, каркасов и раскадровок отдельных веб-страниц.
7. Добавление анимированных компонентов.
8. Адаптивный дизайн, обеспечивающий комфортный просмотр сайта на различных устройствах.

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

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

Что такое WEB разработка

WEB-разработка (web development) – это процесс профессионального программирования сайта, который регулирует все последующие этапы, связанные с формированием HTML-кода, добавлением различных функциональных компонентов и скриптов, влияющих на показатели юзабилити и технической стабильности. Задачей разработчика считается создание инфраструктуры для реализации оптимального функционала сайта, на который в будущем крепятся визуальные компоненты, обеспечивающие интерактивные возможности.

Процесс WEB-программирования можно разделить на две категории:

1. Внешняя или клиентская разработка (front-end) – это код, отвечающий за определение того, как веб-сайт будет фактически отображать разработанные дизайнером макеты и выбранные графические компоненты.
2. Внутренняя или серверная разработка (back-end) – отвечает за управление базами данных. Благодаря правильному программированию сайт будет открывать доступ к определенному контенту, обеспечивая получение и передачу данных на внешний интерфейс для последующего отображения.

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

В своей работе WEB-разработчики используют:

1. Технологии по кодированию с применением HTML и языков программирования.
2. Таблицы стилей CSS для формирования внешнего вида документов.
3. Объектно-ориентированный язык программирования JavaScript.
4. Препроцессоры CSS (Less, Stylus или Sass).
5. Фреймворки и библиотеки стилей (AngularJS, JQuery, ReactJS, Ember).
6. Распределённые системы управления версиями Git и GitHub.
7. Разнообразные тактовые редакторы, а также расширения и плагины для браузеров.

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

WEB-дизайн или WEB-разработка что выбрать

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

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

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

Обучение SEO

Более подробно о том, как выводить сайты в ТОП 10 поисковых систем Яндекс и Google, я рассказываю на своих онлайн-уроках . Все свои интернет-проекты я вывел на посещаемость более 1000 человек в сутки и могу научить этому Вас. Кому интересно обращайтесь!

На этом всё, всем удачи и до новых встреч!

hozyindachi.ru

Что такое веб-дизайн | Интересный блог

25.09.2015 в 18:56

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

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

Механизмы вэб-дизайна

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

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

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

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

Задачи вэб-дизайна

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

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

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

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

Принимайте участие в обсуждениях статьи и делитесь своим мнением!

adamovna.ru

Веб дизайн – это… Что такое Веб дизайн?

Пример веб-страницы, использующей CSS лейаут

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

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

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

Объяснение термина

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

[1], а также кроссплатформенность ^[2] вёрстки ресурса. Также непосредственно с дизайном сайтов смежны маркетинг в интернете (интернет-маркетинг), то есть, продвижение и реклама созданного ресурса, поисковая оптимизация. Таким образом визуальными средствами решаются самые разнообразные задачи, такие как, повышение продаж, укрепление доверия, создание определенного имиджа и другие.

Формулировка задачи веб-дизайна

Создание технического задания

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

Этапы проектирования

• Дизайн основной и типовых страниц сайта

Начинается работа с создания дизайна, обычно в графическом редакторе. Дизайнер создает один или несколько вариантов дизайна, в соответствии с техническим заданием. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции). Собственно “дизайн страницы” представляет собой графический файл, слоеный рисунок, состоящий из наиболее мелких картинок-слоев элементов общего рисунка.

При этом дизайнер должен учитывать ограничения стандартов html (не создавать дизайн, который затем не сможет быть реализован стандартными средствами html). Исключение составляет Flash-дизайн.

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

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

В небольших студиях, html-кодированием занимается веб-дизайнер.

Далее html-кодер передает HTML-файлы программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS «движком».

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

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

• Завершающим этапом разработки сайта под ключ является конечно же тестирование.

Вебдизайн сайта должен адекватно выглядть в различных браузерах, особенно в браузерах IE 6 (Интернет-эксплорер) и Opera.

Упомянутый IE 6 слишком по-своему видит HTML стандарты – отголоски старой борьбы за лидерство с Netscape. На данное время это морально устаревший браузер, создает много проблем для вебдизайнера, и его хотели чуть ли не объявить вне закона. Но поскольку он в стандартной поставке Windows XP, и стоит на более чем половине всех компьютеров, – никуда не дется, приходится в нем тестировать обязательно. Далее тестируется вид с увеличенными шрифтами, при отсутствующем флешь-плеере и тому подобное. Обнаруженные ошибки отправляются на исправление до тех пор пока не будут устранены.

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

Файлы сайта размещают на сервере провайдера и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей.

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

• Внутренняя SEO-оптимизация.

Связана с некоторыми изменениями самого сайта. Начинается она с определения т.н. семантического ядра (У SEОшников своя феня:)). Здесь определяются такие ключевые слова, которые привлекут наиболее заинтересованных посетителей, по которым выиграть конкуренцию проще. Затем эти слова вносятся на сайт. Тексты, ссылки, другие теги адаптируются так, что бы поисковые системы могли их успешно находить по ключевым словам.

• Внешняя SEO-оптимизация.

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

• Сдача проекта

Заказчик или его доверенное лицо просматривают готовый проект и в случае, если все устраивает, то подписывают документы о сдаче проекта.

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

Процесс и результат

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

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

Конечным продуктом работы веб-дизайнера является дизайн-макет: картинка, представляющая предполагаемый будущий внешний вид страниц сайта, размером приблизительно 960х640 px (пикселей) — размер, соответствующий среднему стандарту, связанный с необходимостью дальнейшей привязки к разным разрешениям экрана монитора. Картинка эта является многослойной, где, на усмотрение дизайнера, почти каждая деталь — отдельный слой, приложенный к другим слоям-картинкам, за счёт чего может легко выполняться доработка, замена, перекомпоновку и другие задачи. В зависимости от идеи и целей макет может включать фотографии, сложные коллажи, иллюстрации, текстовые слои, уникальные иконки.
Для главной страницы и внутренних иногда рисуются отдельные макеты с дополнениями или изменениями в соответствии с тематикой страницы.

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

Для демонстрации клиенту изображение обычно переводится в простой однослойный и привычный формат изображений.

Примечания

Ссылки

Литература

• Якоб Нильсен Веб-дизайн. — СПб: Символ-Плюс, 2003. — 512 с. — ISBN 5-93286-004-9

• Якоб Нильсен, Хоа Лоранжер Web-дизайн: удобство использования Web-сайтов = Prioritizing Web Usability. — М.: «Вильямс», 2007. — С. 368. — ISBN 0-321-35031-6
• Роббинс Д. Web-дизайн. Справочник.. — “КУДИЦ-ПРЕСС”, 2008. — С. 816. — ISBN : 978-5-91136-039-9

• Гончаров А. Ю. Web-дизайн: HTML, JavaScript и CSS. Карманный справочник.. — “КУДИЦ-ПРЕСС”, 2007. — С. 320. — ISBN : 978-5-91136-024-5

См. также

Wikimedia Foundation. 2010.

dic.academic.ru

Что такое веб дизайн?: Агентство веб дизайна

Зачем нужен веб дизайн веб страницам в интеренете? Да, зачем? Что это вообще такое вэб да еще и дизан? С чем его едят?

В переводе с английского, слово web имеет несколько значений — сеть, паутина, перепонка. Думаю, те, кто разработал данную технологию, подразумевали как раз первое значение, на нем и остановимся. Слово design означает — проектировать, чертить, проект, план, рисунок.

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

Зачем применеять веб дизайн к веб страницам?

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

Заходя на Яndex, я не обращаю внимания на его web оформление вообще, т.к. даже если бы это был сайт по принципу — «белый фон + черный текст» и больше ничего, я все равно бы пользовался Яndex, т.к. мое субъективное мнение мне подсказывает, что это лучшая поисковая система.

Итак зачем же все таки нужно оформлять web страницы, и как это лучше делать? Часто приходится встречать на сайтах дизайн ради дизайна. Когда разработчик жертвует всем (и временем загрузки, и ограниченностью функциональности многих браузеров, и драгоценным трафиком), ради красоты. Я бы сказал так: дизайн страницы разрабатывается ради информации на сайте, а не ради дизайна. Не будет информации необходимой читателю, каким бы ни был сайт — посетители не задержатся долго.

И все же оформление должно быть на сайте. Но оно должно быть лаконичным, удобным и понятным. На многих сайтах приходится очень долго искать раздел «контактная информация», т.к. он замаскирован в эксклюзивном графическом или flash дизайне. Одним из понятий в web-дизайне является понятие «юзабельность» (use пользоваться) — удобство пользования управлением сайта. Иными словами, когда меню навигации по сайту расположено удобно так что у тебя все под рукой и тебе не придется искать на сайте ссылку которую ты случайно видел на этом месте вчера.

Какая нужна графика для веб дизайна?

Графика должна быть оптимизирована для web, то есть при хорошем качестве она должна занимать как можно меньше места, экономя время загрузки и трафик. Мое мнение страница должна занимать не более 50 Килобайт. Web дизайнерам на заметку: двух, трехцветные картинки занимают меньше места в формате GIF чем в JPEG, поэтому их следует сохранять в этом формате.

Нужна ли анимация хорошему веб дизайну?

Я допускаю анимацию на сайте лишь в том случае, если это рекламный баннер, но никак не часть дизайна web страницы. Анимация на сайте, как правило, привлекает больше внимания, чем статические изображения, однако она быстро надоедает, поэтому разработчики, серьезно относящиеся к web оформлению не используют в верстке анимацию. Примеры таких сайтов: yandex.ru, rambler.ru, mail.ru и пр.

parasolya.com

дизайн – это… Что такое Веб-дизайн?

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

Веб-дизайн — вид графического дизайна, направленный на разработку и оформление объектов информационной среды интернета, призванный обеспечить им высокие потребительские свойства и эстетические качества. Подобная трактовка отделяет веб-дизайн от веб-программирования, подчеркивает специфику предметной деятельности веб-дизайнера, позиционирует веб-дизайн как вид графического дизайна^[1].

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

Веб-дизайнер — сравнительно молодая профессия, и профессиональное образование в области веб-дизайна в России пока не распространено. В связи с увеличением спроса на интернет, растет и спрос на дизайн сайтов, увеличивается количество веб-дизайнеров.

Объяснение термина

В настоящее время под термином веб-дизайн понимают именно проектирование структуры веб-ресурса, обеспечение удобства пользования ресурсом для пользователей. Немаловажной частью проектирования ресурса в последнее время стало приведение ресурса в соответствие стандартам W3C, что обеспечивает доступность содержания для людей с ограниченными физическими возможностями и пользователей портативных устройств^[2], а также кроссплатформенность^[3] вёрстки ресурса. Также непосредственно с дизайном сайтов смежны маркетинг в Интернете (интернет-маркетинг), то есть, продвижение и реклама созданного ресурса, поисковая оптимизация.

Формулировка задачи веб-дизайна

Создание технического задания

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

Этапы проектирования

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

• Дизайн основной и типовых страниц сайта

Начинается работа с создания дизайна, обычно в графическом редакторе. Дизайнер создает один или несколько вариантов дизайна, в соответствии с техническим заданием. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции). Собственно «дизайн страницы» представляет собой графический файл, слоеный рисунок, состоящий из наиболее мелких картинок-слоев элементов общего рисунка.

При этом дизайнер должен учитывать ограничения стандартов html (не создавать дизайн, который затем не сможет быть реализован стандартными средствами html). Исключение составляет Flash-дизайн.

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

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

В небольших студиях, html-кодированием занимается дизайнер, создавший макет сайта.

Далее готовые HTML-файлы передают программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS — системы управления сайтом. Веб-разработчики часто называют CMS «движком».

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

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

• Завершающим этапом разработки сайта под ключ является конечно же тестирование.

Веб-дизайн сайта должен адекватно выглядеть в различных браузерах, особенно в браузерах Internet Explorer, Firefox, Safari, Chrome и Opera.

Internet Explorer (версии 6) по-своему трактовал HTML-стандарты (отголоски старой борьбы за лидерство с Netscape). Этот морально устаревший браузер создавал много проблем для веб-дизайнеров. Многие разработчики даже предлагали отказаться от верстки под IE 6, однако наличие этого браузера в стандартной поставке Windows XP, а значит и его присутствие на многих пользовательских компьютерах, вынуждало веб-дизайнеров тестировать свои проекты в нём. По состоянию на лето 2012 года IE 6 используется на 6% пользователей, в основном за счёт Китая, где его используют 21% пользователей^[4].

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

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

Файлы сайта размещают на сервере провайдера и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей.

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

• Внутренняя SEO-оптимизация.

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

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

• Сдача проекта

Заказчик или его доверенное лицо просматривают готовый проект и в случае, если все устраивает, то подписывают документы о сдаче проекта.

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

Процесс и результат

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

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

Конечным продуктом работы веб-дизайнера является дизайн-макет: картинка, представляющая предполагаемый будущий внешний вид страниц сайта, размером приблизительно 960х640 px (пикселей) — размер, соответствующий среднему стандарту, связанный с необходимостью дальнейшей привязки к разным разрешениям экрана монитора. Картинка эта является многослойной, где, на усмотрение дизайнера, почти каждая деталь — отдельный слой, приложенный к другим слоям-картинкам, за счёт чего может легко выполняться доработка, замена, перекомпоновку и другие задачи. В зависимости от идеи и целей макет может включать фотографии, сложные коллажи, иллюстрации, текстовые слои, уникальные иконки.
Для главной страницы и внутренних иногда рисуются отдельные макеты с дополнениями или изменениями в соответствии с тематикой страницы.

Изображение первоначально может быть векторным или растровым, выполненным в Adobe Illustrator, Adobe Photoshop, GIMP или другом визуальном редакторе (например, Scribus или Inkscape), но для верстальщика изображение, как правило, переводится в растровый формат.

Для демонстрации клиенту изображение обычно переводится в простой однослойный и привычный формат изображений.

Примечания

Литература

• П. Макнейл Веб-дизайн. Идеи, секреты, советы = The Web Designer’s Idea Book, Vol. 2: More of the Best Themes, Trends and Styles in Website Design. — П.: «Питер», 2011. — С. 272. — ISBN 978-5-459-00650-6
• Дж. Берд Веб-дизайн. Руководство разработчика = The Principles of Beautiful Web Design, 2nd Edition. — П.: «Питер», 2012. — С. 224. — ISBN 978-5-459-00901-9
• Якоб Нильсен, Кара Перниче Веб-дизайн: анализ удобства использования веб-сайтов по движению глаз = Eyetracking Web Usability. — М.: «Вильямс», 2010. — С. 480. — ISBN 978-5-8459-1652-5
• Якоб Нильсен Веб-дизайн. — СПб.: Символ-Плюс, 2003. — 512 с. — ISBN 5-93286-004-9
• Якоб Нильсен, Хоа Лоранжер Web-дизайн: удобство использования Web-сайтов = Prioritizing Web Usability. — М.: «Вильямс», 2007. — С. 368. — ISBN 0-321-35031-6
• Роббинс Д. Web-дизайн. Справочник. — “КУДИЦ-ПРЕСС”, 2008. — С. 816. — ISBN 978-5-91136-039-9
• Гончаров А. Ю. Web-дизайн: HTML, JavaScript и CSS. Карманный справочник. — “КУДИЦ-ПРЕСС”, 2007. — С. 320. — ISBN 978-5-91136-024-5
• Бородаев Д. В. Веб-сайт как объект графического дизайна. Монография. — Х.: “Септима ЛТД”, 2006. — С. 288. — ISBN 996-674-026-5

См. также

Ссылки

.

dic.academic.ru

Веб-дизайн сайта – что это такое, его этапы и принципы создания

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

Но так ли это? Рассмотрим несколько этапов и принципов веб-дизайна сайта.

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

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

Этапы создания веб-дизайна

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

1. Техническое задание

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

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

2. Структурирование данных

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

3. Визуальное оформление

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

4. Верстка сайта

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

5. Вебмастеринг

Данный этап включает в себя действия по доставке и распространению сайта по сети. Сайт размечается на хостинге и подвергается поисковой оптимизации. Над этим работают админ и вебмастер.

Веб-дизайнер и основные принципы

Рассмотрим, кем является веб-дизайнер. Это человек, который может самостоятельно запустить сайт и выполнить все стадии производства сайта в одиночку.

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

Веб-дизайнер обязан являться профессиональным специалистом и понимать все нюансы веб-дизайна.

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

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

Основными принципами, как правило, считают: баланс и контраст, а также пропорции и единство.

Как научиться веб-дизайну

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

Сперва нужно углубиться в теоретическую часть. Однако лучше как можно скорее переходить к практике.

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

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

Главное не сдаваться, если что-то не получается, поскольку мастерство приходит с опытом.

seoslim.ru

Что такое веб-дизайн (дизайн сайтов)?

Что такое веб-дизайн?

Если говорить просто, веб-дизайн – это графическое оформление страниц сайта.

Дизайн (англ. design замысел, план, намерение, цель и от лат. designare отмерять, намечать)

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

Веб-дизайн определяет удобство подачи информации пользователям.

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

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

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

Что должен уметь веб-дизайнер, в чем заключается его работа?

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

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

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

Как работает опытный веб-дизайнер

• создает макеты по направляющим и модульной сетке
• использует правильный цветовой профиль (sRGB)
• группирует слои по папкам с понятными названиями
• умеет сочетать цвета и шрифты (знаком с типографикой, колористикой) и не использует много разных шрифтов в одном макете
• разрабатывает адаптивную версию дизайна (под экраны мобильных устройств) т.е. мыслит «динамически» и задумывается о том, как будет выглядеть сайт на разных устройствах.
• следит за тем, чтобы графические элементы вставленные в макет, например иконки – были векторными.

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

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

Хорошему веб-дизайнеру помимо рисования в Photoshop необходимо логично мыслить и понимать основы веб-технологий.

Какие программы используют веб-дизайнеры?

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

Но, уже достаточно давно дизайнеры рисуют дизайн сайтов в векторных редакторах. С появлением новых технологий (Retina дисплеи, дисплеи с высокой плотностью пикселей, 4K мониторы и т.д.) это можно сказать стало необходимостью. Конечно, многие до сих пор рисуют веб-дизайн в фотошопе и в этом нет ничего плохого, особенно если речь о промо сайтах. Грамотный верстальщик сможет сверстать любой макет. Но, если речь про дизайн пользовательского интерфейса – его лучше изначально разрабатывать в векторном формате.

Многие любители техники Apple рисуют веб-дизайн в Sketch. Есть также инструмент под названием Figma – отличный векторный редактор, который работает прямо в браузере. Также веб-дизайн можно разрабатывать и в Adobe Illustrator и в Adobe XD. В общем, с каждым годом появляется множество новых инструментов, но самые известные – перечислены выше.

Заключение

Веб-дизайн является сильным маркетинговым инструментом. Проще говоря, дизайн одних сайтов продаёт, а других – нет.

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

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

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

 

deaction.com