это UserInterface (дословно «пользовательский интерфейс») — то, как выглядит интерфейс и то, какие физические характеристики приобретает.Определяет, какого цвета будет ваше «изделие», удобно ли будет человеку попадать пальцем на кнопки, читабельным ли будет текст и тому подобное.UXэто понятие, которое применимо не только в веб-дизайне, но и в других областях. Опыт взаимодействия – это когда специалист на заводе управляет сложной техникой посредством нажатия пары кнопок, причем кнопка отключения имеет красный цвет и значительней крупнее. UX – это когда вы срезаете путь до дома тропинкой, хотя есть красивый и чистый тротуар, когда вы ставите стаканчик с кофе в специальные углубления на панели задач в салоне вашего авто, это когда педаль тормоза шире педали газа. Все перечисленное это опыт взаимодействия пользователя. Примеров может быть масса, но суть одна: UX – это способ достижения цели пользователем, максимально комфортным способом. И при создании веб-дизайна, надо продумывать пользовательское удобство. В результате работы над UXмы должны получить рабочий прототип. Так как речь идет о веб-дизайне, таким прототипом является готовый макет.UXв веб-дизайне – это фундамент, на котором строится дизайн веб-сайта или приложения. Это проектирование интерфейса с учетом потребностей людей, для которых вы создаете дизайн веб-сайта. Кто конечный пользователь, какие цели человек преследует, используя ваш интерфейс, как помочь ему максимально быстро и комфортно получить результат? Вот основные задачи, которые решает UX.Прямая обязанность UX/UI дизайнера — это, например, продать товар или услугу через интерфейс. Именно на основе работы UX/UI дизайнера пользователь принимает решение: «Быть или не быть?» Нравится или не нравится. Купить или не купить.Главная задача веб-дизайнера, максимально повысить уровень удовлетворенности конечного пользователя, от взаимодействия с продуктом.Под продуктом мы будем понимать любой объект взаимодействия с пользователем, будь то реальный продукт услуга веб-приложении или сайт.Специфическая задача веб-дизайнера заключается в том, чтобы уметь разработать стилевое оформление проекта с учетом специфики интернета. То есть, кроме того, чтобы оформление проекта было просто стильным, оно должно соответствовать стандартным требованиям, предъявляемым сетью. Графические элементы сайта при этом должны быть правильно оптимизированы: правильно определён цвет и шрифт. Также необходимо учитывать тот факт, что пользователь увидит графическое воплощение проекта на мониторе, а не на бумаге, а также будет непременно взаимодействовать с ним.
В начале своего исследования нужно пообщаться с заказчиком и обсудить детали работы бизнеса. Он является специалистом в своем продукте и у него есть опыт работы с клиентами, он знает свою аудиторию. Необходимо записать все ключевые моменты для дальнейшего анализа, также нужно изучить опыт аналогичных продуктов.После того как вы определили аудиторию, определили цели и ценности персон можно приступить к созданию прототипа сайта так называемому вайрфреймингу. Прототип нужен, для того чтобы сфокусироваться на смысле и продумать интерфейс на концептуальном уровне, прежде чем переходить к графическому оформлению. Хорошо составленный прототип является полноценным каркасом сайта, на который потом легко «надевается» веб-дизайн. Для создания каркаса можно воспользоваться специальным для этого сервисом или нарисовать от руки на бумаге в клеточку после чего отсканировать и положить в папку с материалами проекта. Отлично подходит онлайн-сервис wireframe.cc так как можно в реальном времени вносить правки и согласовываться клиентом, также прототип можно онлайн, передать клиенту для заполнения текстами. Нужно проработать все страницы веб-сайта или приложения и только после того как каркас всего веб-сайта готов, переходить к следующему шагу.После того как был проработан UX, сделан прототип блоков и написаны все текста можно переходить к UI. Визуализация — это прорисовка каркасов создание единого стиля, оформление контента. Другими словами, начинаем работу над UI. Чаще всего для визуализации используется Adobe Photoshop,Sketch.app, но лучше использовать редакторы, которые предназначены под текущую задачу, для этого подойдет Figma.В веб-дизайне есть правила хорошего тона. Разрабатывая дизайн веб-сайта, веб-дизайнер придерживается определенных негласных правил при оформлении. Межстрочный интервал отступы шрифты размеры элементов это все поддается измерению и есть откровенно плохие реализации. Поэтому можно составить свод правил, придерживаясь которых поможет не сделать плохую визуализацию вашего дизайна.
-
Создание прототипа веб-дизайна
Прототип веб-дизайна — это как правило образец, наброски расположения блоков будущего веб-дизайна, рисуется он в графических редакторах таких как Wireframe.cc, Marvel, Moqups. Создание прототипа является одним из главных этапов тестирования веб-дизайна. На этом этапе формируется внешний вид и добавляется все графика, уточняются все моменты и детали.
-
Создание веб-дизайна
На этом этапе происходит проектирование логический структуры веб-страниц по готовому прототипу, придумывание наиболее удобных решений для подачи информации в веб-дизайне, полное художественное оформление проекта. Рисуется веб-дизайн в графических редакторах таких как AdobePhotoshop, Sketch или более подходящим для этой задачи редактором, проектирования интересов Figma.
-
Верстка проекта
Макет веб-сайта, нарисованный в графическом редакторе нарезается на графические элементы, описывается структура сайта на языке HTML, далее по готовности скелета, описываются нужные стили для каждого блока на языке CSS, также для интерактивности макета при верстке могут быть использованы такие технологии, как javascript, если необходима некая динамическая погрузка или сложная анимация.
-
SEO оптимизация верстки
SEO (действия, направленные на повышение позиций сайта в выдаче поисковых систем), что ведет к увеличению посещаемости с поисковиков. К SEO можно также отнести работы над сайтом связанные с повышением таких показателей, тематический индекс цитирования Яндекса, PageRank, Google, траст сайта. Работа внутри веб-сайта, то есть внутренняя оптимизация, исправление ошибок, допущенных при разработке сайта, наполнение новым контентом, изменение HTMLкода страниц, перелинковка. Кроме того, необходимо учитывать специфику поисковых алгоритмов, SEOоптимизация веб-сайтов под Яндекс и под Googleотличается некоторыми нюансами.
-
Привязка домена и размещение веб-сайта на хостинге.
После приобретения домена и хостинга, нужно провести окончательный этап настройки работы сайта. При этом учитывая, что хостинг и домен могут быть оформлены у разных интернет регистраторов, панели управления могут сильно визуально отличаться.
Настройка работы сайта состоит из двух этапов:
-
добавить домен на сервер хостинга;
-
указать в домене IP адрес сервера хостинга.
1.5.1 Текстовые редакторы
Программы, которые необходимы для написания и редактирования текстовых документов. Для этой задачи подойдет даже самый простой «блокнот», но для удобства лучше воспользоваться специальными текстовыми редакторами, которые предназначены для написания HTMLкода. Такие программы подсвечивают теги, помогают находить ошибки в коде и лучше структурировать код. Также в них есть множество полезных функций, позволяющих ускорить процесс написания кода. Примеры таких программ:
-
notepad++;
-
aptana Studio;
-
sublime text;
-
brakets.
Для наших целей отлично подойдет Brakets, так как в нем можно быстро установить необходимые для работы плагины, также очень гибкая настойка и множество полезных функций позволяющий ускорить процесс верстки.
1.5.2 Графические редакторы
При создании прототипа и макета веб-сайта можно воспользоваться графическими редакторами это программы, позволяющие работать с графикой (создавать, редактировать различные изображения). Так же, как и текстовые редакторы, они бывают с различными функционалами и разным применением. К простому редактору в первую очередь относиться WindowsPains. К сложным графическим редакторам, которые работают с растровой графикой относятся AdobePhotoshop и Gimp. Для векторной графики используется AbodeIllustrator, Figma, CorelDraw. Также можно использовать онлайн-сервис wireframe.cc для создания прототипа веб-сайта. В нем можно набросать структуру веб-сайта, обозначиться расположение ключевых элементов их размеры, примерные цвета.
1.5.3 Локальные сервера
Локальный сервер — это набор программ, которые создают аналог хостинга непосредственно на вашем компьютере и позволяют создавать и тестировать динамические сайты с использованием серверных языков программирования и базы данных.Локальный сервер OpenServerPanel — это портативная серверная платформа и программная среда, созданная специально для веб-разработчиков с учётом их рекомендаций и пожеланий. Программный комплекс имеет богатый набор серверного программного обеспечения, удобный, многофункциональный продуманный интерфейс
, обладает мощными возможностями по администрированию и настройке компонентов. Платформа широко используется с целью разработки, отладки и тестирования веб-проектов, а также для предоставления веб-сервисов в локальных сетях.
Локальный сервер AMPPS — это сборник приложений, которые создают целую библиотеку для работы веб-мастера. Каждое приложение можно установить, протестировать и использовать в своих целях, причем делать это очень быстро. Данная сборка имеет свои плюсы и преимущества перед другими. Стоит отметить поддержку распространенных CMS, веб-форумов, блог-платформ, фотогалерей, досок объявлений и другое. Количество доступных приложений насчитывает более 200 штук.
Локальный сервер Denwer — это комфортные условия при удаленной работе сразу над несколькими независимыми проектами и возможность размещения на флеш-накопителе. Кроме того, эмулятор веб-сервера Denwer может быть использован для создания собственного хостинга, а также при создании баз данных для веб-сайтов, используя при этом язык SQL.