Файл: Выпускная квалификационная работа разработка вебсайта для рекламного агентства rocont Погадаев Вячеслав Олегович.docx

отыскивать и править множество значений, достаточно изменить его в одном месте и значения везде заменятся автоматически.

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

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

Для того, что ускорить разработку, необходимо использовать БЭМ (блок, элемент, модификатор). БЭМ — это не только простое именование классов, это компонентный подход к работе. Компонентный подход — это когда мы делим разрабатываемый интерфейс на отдельные блоки. При надобности данный блок можем использовать в другой части сайта или приложения без дублирования стилей. Сейчас, конечно же, мало, что понятно, но мы будем разбирать примеры.

Основу БЭМ методологии составляют 3 составляющие:

1. 
   блок;
   
2. 
   элемент;
   
3. 
   модификатор.
   

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

Элемент — это составляющая блока, которая не может быть использована в отрыве от него. Именование элемента выглядит следующим образом: имя-блока__имя-элемента. То есть название элемента отделяется от имени блока двойным нижним подчеркиванием (__).

Модификатор — это БЭМ сущность, которая определяет вид, состояние или поведение блока, или элемента. Модификатор отделяется отназвания блока или элемента одинарным нижним подчеркиванием (_). Структура имени модификатора будет следующим, для блока: имя-блока_модификатор.

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

Преимущества библиотеки bootstrap:

1. 
   высокая скорость разработки макетов страниц сайта, bootstrap содержит огромный набор готовых решений и элементов;
   
2. 
   кроссбраузерность и адаптивность сайта,все элементы библиотеки адаптивны под все устройства и корректно отображаются во всех современных браузерах;
   
3. 
   легкость в использовании, даже человек, имеющий базовые знания о HTML и CSS, может свободно создавать веб-страницы с использованием библиотеки;
   
4. 
   простота в обучении, у bootstrap очень хорошая документация с большим количеством примеров готового кода.
   

---

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

JavaScript поддерживается всеми браузерами и интегрируется с ними. Однако возможности сценариев JavaScript небезграничные. Так, например, JS не выполняет кроссдоменные запросы, ему недоступны файлы, кроме cookie,

расположенные не на компьютере пользователя, не защищает страницу от копирования текста.

С помощью него доступны к исполнению следующие функции:

1. 
   возможность изменять страницы браузеров;
   
2. 
   добавление или удаление тегов;
   
3. 
   изменение стилей страницы;
   
4. 
   информация о действиях пользователя на странице;
   
5. 
   запрос доступа к случайной части исходного кода страницы;
   
6. 
   внесение изменений в этот код;
   
7. 
   выполнение действия с cookie-файлами.
   

1.3.2 Проектирование веб-дизайна

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

UX – это UserExperience (дословно «опыт пользователя»). То есть это то, какой опыт/впечатление получает пользователь от работы с вашим интерфейсом. Удается ли ему достичь цели и на сколько просто или сложно это сделать.

UI

---

это UserInterface (дословно «пользовательский интерфейс») — то, как выглядит интерфейс и то, какие физические характеристики приобретает.

Определяет, какого цвета будет ваше «изделие», удобно ли будет человеку попадать пальцем на кнопки, читабельным ли будет текст и тому подобное.

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

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

Прямая обязанность UX/UI дизайнера — это, например, продать товар или услугу через интерфейс. Именно на основе работы UX/UI дизайнера пользователь принимает решение: «Быть или не быть?» Нравится или не нравится. Купить или не купить.

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

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

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

---

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

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

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

После того как был проработан UX, сделан прототип блоков и написаны все текста можно переходить к UI. Визуализация — это прорисовка каркасов создание единого стиля, оформление контента. Другими словами, начинаем работу над UI. Чаще всего для визуализации используется Adobe Photoshop,Sketch.app, но лучше использовать редакторы, которые предназначены под текущую задачу, для этого подойдет Figma.

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

---

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

1. 
   Создание прототипа веб-дизайна
   

Прототип веб-дизайна — это как правило образец, наброски расположения блоков будущего веб-дизайна, рисуется он в графических редакторах таких как Wireframe.cc, Marvel, Moqups. Создание прототипа является одним из главных этапов тестирования веб-дизайна. На этом этапе формируется внешний вид и добавляется все графика, уточняются все моменты и детали.

2. 
   Создание веб-дизайна
   

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

3. 
   Верстка проекта
   

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

4. 
   SEO оптимизация верстки
   

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

5. 
   Привязка домена и размещение веб-сайта на хостинге.
   

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

---