Веб верстка: Как сверстать веб-страницу. Часть 1 / Хабр

Чему вы научитесь

• Установка и работа с редактором кода Visual Studio Code
• Основы HTML и CSS
• Структура HTML-документа, базовые теги, атрибуты
• Подключение CSS-стилей, селекторы, свойства
• Работа с текстом, ссылками, изображениями и другими элементами страницы
• Верстка веб-страниц по макетам, как верстать страницы именно так, как было задумано дизайнером
• Блочная верстка
• Семантическая и валидная верстка
• Адаптив (верстка под разные устройства) и кроссбраузерность
• Анимации и трансформации
• Методология БЭМ
• Современный подход в верстке FlexBox
• Препроцессор SASS/SCSS
• Bootstrap 4 — работа с сеткой и использование компонентов Bootstrap на практике
• Нарезка макетов Photoshop, Figma, Zeplin
• JavaScript для верстальщика
• Создание слайдера, модального окна, табов, фильтра карточек на практике
• Использование js-библиотек — jQuery, галерея, анимации, параллакс-эффект, слайдер и др.

• Начинающие веб-разработчики
• Те, кто когда-то изучал верстку и хочет актуализировать знания и стать профессионалом
• Кто уже работает, но отстал от технологий или не мог ранее освоить JS

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

Мы собрали отзывы учеников, прошедших онлайн курс. Оставьте свой отзыв после прохождения Курса Верстальщик 2020 — HTML 5, CSS 3, Bootstrap 4, JavaScript.

Михаил Непомнящий

О преподавателе курса

• Профессиональный практик-преподаватель
• По образованию — прикладной информатик
• Работал и сотрудничал с крупными международными и российскими образовательными проектами

«Преподаю людям разных возрастов — от 8-ми лет до 60-ти. Любимая дисциплина — создание web-сайтов.

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

Вёрстка веб-страниц — Википедия с видео // WIKI 2

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

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

Процесс сложен и имеет творческую основу, ни один из способов не является каноничным и принятым как основа^[2]. Все подходы к вёрстке имеют как преимущества, так и недостатки.

Работы по верстке сайта могут быть включены в этап сборки сайта.

Энциклопедичный YouTube

• 1/5

  Просмотров:

  11 177

  52 732

  7 030

  224 816

  35 096

• ✪ Видеокурс HTML & CSS. Урок 8. Верстка веб-страницы.

• ✪ Верстка сайта с нуля. Начало, шапка сайта.

• ✪ HTML верстка сайта. Урок 5. Делаем внутренние страницы сайта

• ✪ Как правильно и быстро верстать сайты

• ✪ HTML верстка сайта. Урок 1. Настройка рабочего места

Содержание

История развития верстки веб-страниц

Тим Бернерс-Ли, работая в Европейском институте физики частиц придумал язык, который концентрировался не на средствах оформления, а на логике разметки текста. Некоторое время страницы оформлялись в так называемом «академическом дизайне», например, lib.ru^[3].

С появлением браузера Netscape ситуация изменилась. Разработчики браузера внедряли нестандартные для html теги, призванные улучшить внешний вид документа^[3]. Браузер был настолько распространённым, что нестандартные теги не вызывали беспокойств: нет смысла беспокоиться о том, что другие браузеры не поддерживают эти теги, когда только 10 % посетителей пользуется другими браузерами^[3]. Сайты перестали разрабатываться в «академическом» стиле^[3]. Над дизайном стали задумываться, а значит, потребовалась более сложная верстка^[3].

С середины 1990-х MS Internet Explorer захватывал всё большую часть потребителей^[3]. Подходы разработчиков браузеров различались, отличался и набор поддерживаемых технологий^[3]. Всё это лишь добавляло неудобств для разработчиков сайтов — увеличивая время разработки сайта^[3].

Во время борьбы за рынок на смену устаревающим и плохо поддерживающим стандарты Netscape 4 и Internet Explorer 4 (IE 4) пришли пятые версии браузеров^[4]. IE 5 должна была не просто исправить ошибки предшественника, а улучшить поддержку стандартов CSS^[4]. На этот шаг Майкрософт была обречена хотя бы потому, что вошла в группу W3C^[4]. В процессе разработки разница в отображении сайтов стала настолько значительной (а часть сайтов вовсе не работали), что разработчикам пришлось создать специальный «режим совместимости»^[4]. В таком режиме браузер работал «по старинке»^[4]. Для того, чтобы использовать режим поддержки стандартов необходимо было в html-код добавить элемент <!DOCTYPE>^[4]. Идея с режимом совместимости позднее перешла в остальные браузеры (например, Mozilla, Safari, Opera и т. д.)^[4]. С развитием технологий разновидностей doctype оказалось слишком много, только к пятой версии html W3C предложили использовать короткую запись унифицировав стандарт^[4].

Через некоторое время работать блоками стало слишком неудобно, так как поддержки CSS у браузеров фактически не было, приходилось вставлять стили прямо в блоки, что усложняло разработку^[3]. В это время для разработки стали применяться таблицы с невидимой границей, где многие стили не требовались — они были по умолчанию^[3].

В 1998 году появляется спецификация Cascading Style Sheets Level 2 (CSS2), а потом и CSS2.1, что позволило выносить код оформления блоков в отдельные файлы и использовать на всех страницах сайта и даже кэшировать этот файл, а значит ускорять загрузку страниц^[3]. Развитие этой технологии и поддержка со стороны браузеров привела к использованию блочной вёрстки, вместо таблиц^[3].

Этапы вёрстки

Почему прямоугольники?

Прямоугольник получил исключительное значение благодаря способности делиться на любое число прямоугольников любых пропорций^[5].

Как правило верстальщик получает от дизайнера утверждённый дизайн-макет страницы^[2]. Далее, верстальщик анализирует полученный макет^[2]. Разбивает его на горизонтальные линии (полосы) — «этажи». Далее, каждый «этаж» анализируется отдельно и разбивается на прямоугольные блоки — колонки.

Далее происходит рекурсивный процесс вёрстки этих отдельных строк, а в них столбцов^[2].

После вёрстки страница проверяется на кросс-платформенность. В общем случае можно отвечать на следующие вопросы^[2]:

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

Критические исправления вносятся в документ, и проверка повторяется с самого начала^[2].

Верстка создаётся для шаблонов

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

Ограничения

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

Многообразие форматов

Распространение веба тотально. На момент 2010 года веб-ресурс может быть открыт на любом мониторе от телевизора с предустановленным браузером до мобильного телефона. Возможности по отображению цветов на всех устройствах также различаются. Однако, основным вопросом в верстке является — отображение при различной ширине рабочего пространства^[6].

Верстка отличается различными подходами к этому вопросу^[6]:

• Фиксированная ширина — сайт отображается с одинаковой шириной вне зависимости от ширины окна браузера. Соответственно, на широкоформатных браузерах такие сайты имеют большие поля по краям, а на мелких экранах смартфонов показывают горизонтальную прокрутку.
• «Резиновая» ширина — полосы сайта растягиваются на весь экран, занимая место пропорционально настройкам верстальщика.

Исторически сложилось, что сайт — вертикальный формат, который занимает не более чем ширину экрана, чтобы избежать горизонтальной прокрутки^[6]. Все возможности по управлению положения сайта (клавиатурные комбинации и полоса прокрутки и колесо мыши) настроены непосредственно на вертикальное передвижение^[6].

Модульность и виды подходов к вёрстке

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

Модульная сетка структурно разбивает материал на отдельные блоки, для упрощения добавления новых элементов на страницу^[7]. Некоторые верстальщики могут уйти от правил верстки, ради определённого проекта, но необходимость простого добавления вновь появляющихся элементов на странице обострит необходимость возврата к этим правилам^[7].

Модульная сетка — набор направляющих, которые выравниваются относительно друг друга и делят собой макет на квадраты^[7]. Позволяют, таким образом, независимо от остальной части сайта изменять единицу информации^[7].

Основными инструментами для вёрстки являются фреймы, таблицы и div. В стандарте HTML5 фреймы больше не поддерживаются^[8], а для работы стали доступны «семантические» блоки: header, main, nav, section, article, aside, footer. Однако блоки не дают определённых преимуществ, а являются лишь «синтаксическим сахаром».

Табличный подход

Таблицы являются удобным инструментом для выравнивания блоков. В html таблица делится на строки, которые в свою очередь делятся на ячейки, таким образом можно создавать неограниченное количество строк с неограниченным числом ячеек в каждой. Ячейки таблицы имеют особые настройки выравнивания, которые не встречаются более в других элементах. Это значит, что некоторые элементы дизайна крайне сложно сверстать без использования таблиц^[9].

В деловом мире таблицы используется для сравнения данных, а также для наглядности^[9].

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

На момент 2011 года табличная верстка считается устаревшей^[9].

Вёрстка слоями

Слой (от имени тега <layer>) — разработка компании Netscape, использованная в браузере Netscape Navigator^[10]. Тег позволял показывать или скрывать его содержимое, устанавливать положение относительно окна браузера, накладывать слои друг на друга и включать содержимое блока из файла^[10]. В спецификацию HTML не был включён^[10].

Блочная вёрстка

Блочная вёрстка — верстка с помощью тега <div> и описывающего их множество таблицы стилей (CSS)^[10]. Тег появился вследствие сознательного отказа консорциума «CSS Positioning (CSS-P)» от тега <layer>, чтобы создать аналогичный тег, но с поддержкой CSS в духе остальных тегов^[10]. С помощью блочной верстки реализуют концепцию семантической вёрстки.

Вёрстка фреймами

Вёрстка фреймами — верстка с помощью одноимённого тега <frame>, который имеет иной способ позиционирования, а внутри себя включает отдельные html-страницы^[11].

Фреймы просты в применении, поскольку необходимо заботиться только об отображении и перерисовке части окна браузера — одного фрейма, — остальные части находятся в другом фрейме и не перерисовываются без взаимодействия с ними^[11]. Также возможно открытие ссылки в другом фрейме, что удобно при использовании главного меню в отдельном фрейме^[11]. Страницы поделённые на фреймы имеют меньше кода, вследствие отсутствия повторяемых частей, которые не перезагружаются^[11]. Они размещаются точно в нужном месте окна браузера^[11].

Фреймы плохо индексируются поисковыми системами, поскольку на страницах с содержимым нет ссылок на другие страницы сайта и наоборот, в навигационной странице нет никакого содержимого^[11]. Переход из поисковой страницы происходит на одну страницу, без загрузки других фреймов — навигации и логотипа^[11]. Внутренние страницы нельзя добавить в закладки, потому что браузер не показывает изменения в адресной строке, отображая всегда только адрес сайта^[11]. Совместимость между браузерами противоречива^[11]. Одни и те же параметры интерпретируются браузерами всегда по-своему^[11].

Разметка страницы

По принципам использования средств разметки HTML различают логическую разметку и презентационную (физическую).

Например, курсивный текст можно получить как с помощью тега <i>, так и с помощью тега <em>.

В первом случае курсив задаётся явным образом, а во втором на текст производится логическое ударение, которое обычно отображается курсивом.

Иными словами, при первом подходе ориентируются на внешний вид, а во втором — на логическое предназначение.

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

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

Типы макетов

Все сайты по макету вёрстки можно разделить на 5 групп^[12]:

• фиксированные (статические, имеющие фиксированную ширину),
• резиновые (проценты),
• эластичные (em),
• адаптивные,
• комбинированные.

Адаптивный

Адаптивная вёрстка/тип макета — дизайн, который подстраивается (адаптируется) под размер экрана, в том числе может происходить перестройка блоков с одного места на другое, или их замена блоками отображаемыми только при определённом разрешении. Адаптивная вёрстка пришла на смену идеи создания специальных мобильных версий сайта, «живущих» на отдельных поддоменах (например, m.wikipedia.org).

Адаптивная вёрстка

Преимущества:

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

Недостатки:

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

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

Табличная вёрстка

Преимущества и недостатки

Браузеры преднамеренно расценивают таблицу как один объект, из-за чего содержимое таблицы не отображается до тех пор, пока оно целиком не будет загружено на локальный компьютер.^[13]

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

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

Кроме того, использование таблиц для целей оформления не соответствует концепции семантичной вёрстки, подразумевающей использование элементов (тегов) в соответствии с их смыслом, семантическим значением. Элемент <table> и сопутствующие (<tr>,<th>,<td> и др.) предназначены для разметки табличной информации (то есть такой, в которой имеется смысловая связь между элементами, принадлежащими одному столбцу или одной строке). W3C, как разработчик языка HTML, призывает использовать HTML для логической разметки информации, а оформление (в том числе позиционирование различных блоков) описывать отдельно от (X)HTML-разметки (с помощью CSS, например).

Распорки

При использовании таблиц широко известным приёмом стало применение распорок — прозрачных изображений высотой в один пиксель. Само изображение не отображается на веб-странице, но его можно масштабировать в любых пределах. Получается невидимая палочка определённой ширины или высоты, которая не дает ячейкам таблицы сблизиться меньше, чем на заданное расстояние. Распорки особенно были актуальны для браузера Netscape, который не показывал фон ячейки, если в ней ничего не размещалось. Чтобы избавиться от указанной особенности, и помещали в ячейку маленький прозрачный рисунок в формате GIF.

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

Блочная вёрстка

Слои представляют собой структурные элементы, которые можно размещать на веб-странице путём наложения их друг на друга с точностью до пикселя. В HTML 4 и XHTML слой — это элемент веб-страницы, созданный с помощью тега <div>, к которому применяется стилевое оформление.^[14]

При этом придерживаются следующих принципов:

• Разделение содержимого и оформления;
• Активное применение тега <div>;
• Таблицы применяются только для представления табличных данных.

Слои можно размещать в окне браузера с точностью до пикселя. Положение слоя задаётся двумя координатами относительно любого угла окна браузера, родительского элемента или документа.

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

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

Более современные версии браузеров стали строже придерживаться стандартов и содержать средства по работе со слоями.

Преимущества и недостатки

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

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

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

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

См.также: Tableless web design

Верстальщик

Вёрсткой веб-страниц занимаются верстальщики. В общем случае в задачу верстальщика входят:

• создание кода веб-страницы с помощью соответствующего языка разметки. Таковыми могут быть, например, HTML, XHTML, XML.
• оформление ранее созданного кода страницы с помощью встроенных средств языка разметки, либо же с помощью каскадных таблиц стилей CSS

Инструменты верстальщика

Верстальщик использует следующее ПО:

А также иногда прибегает к помощи:

• WYSIWYG редакторов, в которых пользователь располагает все элементы, которые должны были быть получены с помощью HTML, используя графический интерфейс пользователя. После чего программа преобразует визуальное представление в HTML код. В данном случае автору не обязательно обладать исчерпывающим знанием HTML.
• программы автоматической верстки сайтов, которые извлекают слои с изображениями и текстом из дизайн-макета, созданного в графическом редакторе Adobe Photoshop или ему подобном и формируют из этих слоёв HTML код. Таким образом создается базовый каркас веб страницы, готовый к последующей доработке.

Использование WYSIWYG редакторов и программ автоматической верстки часто осуждается^[15][16] из-за низкого качества получаемого кода. Тем не менее, зачастую для пользователей их использование удобнее ручного кодирования, а также не требуют глубокого знания HTML, и поэтому широко используются.

Валидность HTML-верстки

Валидность HTML-верстки — это её соответствие стандартам организации The World Wide Web Consortium (W3C). Отсутствие ошибок в вёрстке документа — один из основных показателей качества вёрстки. Автоматическая проверка вёрстки на ошибки может быть проведена как с помощью онлайн сервиса W3C, так и различными программами «валидаторами». Разные версии спецификации HTML предполагают различный синтаксис, поэтому тест верстки на валидность должен обязательно учитывать её Document Type.

Кроссбраузерность

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

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

См. также

Примечания

1. ↑ Клименко, Р. Веб-мастеринг на 100 %
2. ↑ ^{1 2 3 4 5 6 7 8 9 10 11} Влад Мержевич. Основы верстки (неопр.). htmlbook.ru (23.09.2010). Дата обращения 4 февраля 2016.
3. ↑ ^{1 2 3 4 5 6 7 8 9 10 11 12} Вёрстка сайтов
4. ↑ ^{1 2 3 4 5 6 7 8} Режимы браузеров (неопр.).
5. ↑ Что такое модульная вёрстка
6. ↑ ^{1 2 3 4} Особенности верстки
7. ↑ ^{1 2 3 4 5} Модульная сетка
8. ↑ HTML5 differences from HTML4
9. ↑ ^{1 2 3} Вёрстка с помощью таблиц (неопр.).
10. ↑ ^{1 2 3 4 5} Влад Мержевич. Блочная вёрстка (неопр.) (19.07.2011).
11. ↑ ^{1 2 3 4 5 6 7 8 9 10} Фреймы (неопр.).
12. ↑ Типовые макеты
13. ↑ Особенности таблиц //htmlbook.ru
14. ↑ Блочная вёрстка //htmlbook.ru, 19.07.2011
15. ↑ Sauer, C.: WYSIWIKI — Questioning WYSIWYG in the Internet Age. In: Wikimania (2006)
16. ↑ Spiesser, J., Kitchen, L.: Optimization of html automatically generated by WYSIWYG programs. In: 13th International Conference on World Wide Web, pp. 355—364. WWW ’04. ACM, New York, NY (New York, NY, U.S., May 17-20, 2004)

Литература

• Влад Мержевич. Вёрстка веб-страниц.

Ссылки

Получите идеальный макет сайта за 27 шагов

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

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

Все еще ищете хозяина? Взгляните на наш путеводитель по лучшим хостинговым услугам и лучшим разработчикам сайтов прямо сейчас.И это не рассматривается здесь, но не забывайте свои страницы ошибок! Взгляните на наш выбор лучших 404 страниц для вдохновения.

Начало работы

01. Определите, что означает успех

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

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

02. Понимание текущего сайта

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

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

03. Обменивайтесь дизайнами с клиентами на ранних этапах

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

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

Рабочий процесс проектирования

04. Сначала решите макет

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

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

05. Начните рисовать каркас верхнего уровня

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

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

06. Добавить сетку

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

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

07. Выберите типографику

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

08. Выберите свою цветовую тему

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

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

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

09. Упрощение макета

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

На самом деле не должно быть слишком много призывов к действию на странице — все должно сводиться к окончательному «Что я могу сделать здесь?»

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

10. Уточнение каждого компонента

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

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

11. Проведите клиентов через ваши решения

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

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

12. Думайте в движении

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

13. Прототип, прототип, прототип

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

Следующая страница: Проектный подход и завершение