Дизайн макет сайта: Разработка дизайна сайта макет структуры сайта – В каком разрешении нужно делать макет сайта? — Хабр Q&A

Разработка дизайна сайта макет структуры сайта

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

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

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

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

Задать вопрос

Структура сайта – тщательно проработанное расположение всех элементов, с учетом принципов будущей верстки.  Есть 2 основных вида структуры :

• «резиновый  сайт» — все элементы сайта наполняют весь монитор по ширине и «тянутся»  при ее увеличении.
• «центрированный сайт» — все элементы расположены по центру на ширине 980px, на более широких мониторах расширяется только фон.

 

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

!	Компания OKsoft предлагает комплексную работу — разработка структуры сайта и создание дизайн-макета. На наш взгляд это оптимально.

Пример структуры сайта:

 

Пример дизайна, разработанного на основе данной структуры:

Вариант макета сайта – макет с одной схемой расположения элементов сайта, повторяющихся на каждой странице.

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

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

Сколько разрабатывается макетов?

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

 

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

 

Когда мы предоставим созданный макет сайта?

Сроки работ – первый макет мы предоставляем через 7-10 рабочих дней после урегулирования организационных моментов, таких как подписание договоров, проведение расчетов, предоставление материалов. Разработка каждого последующего  макета занимает 5-7 рабочих дней в зависимости от количества внесенных рекомендаций.

Как создается грамотный дизайн сайта?

• Задача на разработку дизайна должна быть конкретной и детально проработанной. В нашей компании создана анкета (бриф), который заполняет клиент;
• Исходные материалы должны быть хорошего качества. Материалы предоставляются клиентом или создаются дополнительно. Графические и фотоизображения при необходимости приобретаются в фотобанках. Текстовые материалы желательно готовить заранее с привлечением профессионалов по теме;
• При создании сайта мы всегда думаем о том, как он будет в дальнейшем использоваться, кто будет его посещать, кто  размещать  информацию. Дизайн сайта — это отражение компании в интернете, и мы всегда стремимся, чтобы сайт приносил заметные  результаты.

 

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

Основные виды сайтов, которые мы разрабатываем:

 

• Сайт-визитка. Удобный формат для небольшой или  стартующей компании.  Разработка такого сайта, как правило, стоит недорого, времени затрачивает немного, и дает возможность владельцу сформулировать вектор дальнейшего развития собственного представительства в сети Интернет;
• Сайт компании. Предполагает множество страниц информационного содержания, каталог продукции или описание услуг, фотогалерею, портфолио, новостной и другие разделы. Сайты компаний могут быть довольно объемными и требовать серьезной технической поддержки и проработки отдельного дизайна для внутренних страниц;
• Интернет-магазин. Мы разрабатываем сайты с интернет-магазинами различного объема и функционала. Собственная разработка OKsoft позволяет работать с товарной базой быстро и удобно.  Мы можем сделать интернет-магазин как открытым, так и в закрытой зоне сайта, с дифференцированными ценами и другим функционалом.

 

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

 

20 правил создания качественного макета сайта

Перевод статьи дизайнера Claudio Guglieri с описанием процесса проектирования макета сайта от начала до конца.

---

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

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

1. Перенесите свои мысли на бумагу

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

2. Создавайте зарисовки высшего уровня

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

3. Добавьте сетку вашему PSD-файлу

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

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

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

5. Выберите цветовую гамму

На протяжении всего рабочего процесса выбора шрифтов, вы должны работать над цветовой гаммой всего пользовательского интерфейса (цвет фона, текста и пр.). Цвета нужно выбирать в зависимости от функциональности элемента. Обратите внимание на такие сайты как Facebook, Twitter, Quora, или Vimeo.

6. Разделите макет

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

7. Реорганизация установлена

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

8. Бросьте себе вызов

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

9. Обращайте внимание на детали

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

10. Отнеситесь к каждому компоненту так, будто вы представляете его на конкурсе

Должен признать, этот совет не мой. Я слышал это на Fantasy Interactive и был потрясен тем, на сколько четко и правдиво он прозвучал. Каждая деталь должна быть спроектирована как самая лучшая.

11. Оттачивайте свою работу

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

12. Убирайте свои PSD

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

13. Работайте, надеясь на лучшее, но будьте готовы к худшему

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

14. Будьте зацикленными на дизайне, пока не возненавидите его.

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

15. Не тратьте много времени на концепции до того, как поделитесь ими с клиентами

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

16. Дизайнер! Будь лучшим другом разработчика!

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

17. Растолкуйте все, как будто я четырехлетний ребенок

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

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

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

19. Следите за дизайном в ходе процесса

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

20. Следите за своим прогрессом

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

Автор: Claudio Guglieri
Источник: lopart
Фото на обложке: ShutterStock

Что не забыть, принимая макет сайта от дизайнера, или мелочей не бывает — CMS Magazine

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

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

Необходим сайт, мобильное приложение, услуги по SEO или контекстной рекламе?

Тендерная площадка WORKSPACE поможет выбрать оптимального исполнителя. База проекта насчитывает более 10 500 агентств. Сервис БЕСПЛАТЕН для заказчиков.

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

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

И начинаются взаимные претензии — «я разработчик, а не дизайнер», «а мне не сказали, что это надо отрисовать», «этого нет в макете», «это же и так очевидно» и т.д. Страдают в итоге как нервы менеджера и клиента, так и разрабатываемый проект.

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

Итак, берем высланный дизайнером макет (сайта, страницы, приложения — нужное подчеркнуть), включаем режим «зануда» и поехали:

Что проверяем в макете сайта, принимая его от дизайнера

Файлы макета

Если говорить кратко, их должно быть несколько. Один-единственный PSD-файл в папке с макетом — подозрительно. Но допустимо, если вы заказывали дизайн одной страницы (или вообще одного блока) без адаптивности и особых «изысков».

В остальных же случаях папка с готовым дизайном содержит много интересного и нужного:

Здесь мы видим не только PSD-шник, но и сопутствующие файлы — пока просто перечислим их, а затем пройдемся по каждому пункту:

• Макеты для всех необходимых страниц

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

• Макеты для адаптивности

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

• Макеты в формате JPG (или PNG)

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

• Шрифты

  Если в макете используются нестандартные шрифты (читай «которых нет в Google Fonts»), то здесь должна быть папка с файлами этих шрифтов в форматах ttf, eot, woff. Также здесь может храниться шрифт с используемыми на сайте иконками (например, с IcoMoon).

• Иконки в SVG

  SVG — это векторная графика для веба, такие иконки одинаково хорошо смотрятся как на десктопах, так и на мобильных (обычные растровые иконки в форматах jpg/png будут «размыты» на мобильных).

• Дополнительные картинки и логотипы

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

• Фавикон

  Если в ТЗ дизайнеру было оговорено создание favicon — проверьте его наличие.

• Пояснительная записка

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

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

• Гид по стилям (style guide)

  Style Guide — это дополнительный PSD-файл, в котором собраны все элементы разрабатываемого сайта (интерфейса), например, заголовки, кнопки, поля ввода, выпадающие меню, таблицы и т.д.

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

Теперь идем по этим пунктам подробно.

В макете для каждой страницы:

2.1. Прорисовано поведение элементов при действиях с ними

Что это за элементы:

• Ссылки

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

  

• Кнопки

  Обычное состояние, наведение мыши, нажатие кнопки (и так для каждого вида кнопок):

  

• Меню

  Обычное состояние пунктов меню, при наведении мыши, активный пункт, выпадающее меню:

  

• Табы (вкладки)

  Аналогично меню — обычное состояние, наведение мыши, открытый таб:

  

• Разворачивающиеся списки или блоки

  Обычное состояние и развернутое; если кнопка «Развернуть» меняется — оба ее состояния:

  

• Всплывающие подсказки

  Знак, обозначающий наличие подсказки, и сама подсказка:

  

2.2. Прорисованы всплывающие (модальные) окна

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

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

2.3. Прорисованы необходимые элементы форм

• Основные элементы форм

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

  

  Проверьте, чтобы для элементов форм были прорисованы основные состояния:

  • Для текстовых полей: состояние по умолчанию и при фокусе (курсор в поле)

  • Для чекбоксов и радиокнопок: состояние по умолчанию и с выставленной галочкой

  • Для кнопок: по умолчанию, наведение, нажатие

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

• Сообщения об ошибках

  Будут показываться, если не заполнено обязательное поле или поле заполнено с ошибкой — их тоже нужно отрисовать.

  

• Сообщения после отправки форм

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

  

Все эти элементы и их поведение дизайнер размещает в скрытых слоях в макете для конкретной страницы. Если вы проверяете макеты в формате JPG (а не в фотошопе), попросите дизайнера дополнительно сохранить макеты, где поведение элементов показано.

2.4. Блоки страницы не завязаны строго на длину контента

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

Например, здесь дизайнер вынес категории каталога товаров в горизонтальное меню:

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

Такую ситуацию стоит продумать сразу — либо убрать категории в вертикальное меню, либо предусмотреть ссылку «Еще».

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

2.5. Слои в PSD-макете подписаны и структурированы

Если верстальщик получает PSD-файл с вот такой организацией слоев, его желание работать с макетом неизбежно стремится к нулю:

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

Если у вас нет фотошопа, то открыть psd-файл для проверки можно в онлайн-редакторе, например, в Photopea.

Макеты для всех необходимых страниц

Еще перед постановкой ТЗ дизайнеру определитесь, сколько макетов понадобится. Одного макета хватит только для лендинга (одностраничника).

В остальных случаях макетов будет как минимум два — главная страница и внутренняя (стандартная) страница.

В большинстве случаев макетов, конечно, получается больше. Для чего можно рисовать отдельные макеты (если не хотите, чтобы их оформление «додумывал» верстальщик):

• Каталог товаров — список категорий, список товаров, карточка товара

• Прочие страницы интернет-магазина: корзина, оформление заказа, личный кабинет покупателя

• Список услуг

• Список новостей и отдельная новость (аналогично статьи, акции)

• Страница 404-й ошибки

• Страница с результатами поиска и т.д.

Проверьте, что все оговоренные в ТЗ макеты присутствуют.

Макеты для адаптивности

Если доля посещений вашего сайта с мобильных устройств (планшетов и смартфонов) превышает 20-30% — без адаптивности вам уже не обойтись. Если сайт только разрабатывается, смотрите на целевую аудиторию — для людей до 35-40 лет выходить в сеть с мобильных (а иногда и только с них, вообще без десктопа) становится обыденностью.

В случае разработки адаптивного дизайна каждый макет будет в трех вариантах:

• для ширины экрана 320 пикселей (смартфоны, телефоны)

• для ширины экрана 768 пикселей (планшеты, ноутбуки)

• для ширины ширина экрана от 1200 пикселей (ноутбуки, компьютеры)

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

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

Шрифты

Удобнее брать свободные шрифты, например, с Google Fonts. Какие плюсы — они легко встраиваются на сайт и грузятся с серверов Гугла (с ближайшего к пользователю сервера, что иногда выходит быстрее, чем грузить шрифты с самого сайта). За минусы можно опять же посчитать то, что они грузятся с серверов Гугла — а вдруг с Гуглом что случится и шрифт не будет загружаться — но это все-таки маловероятно. Как компромисс — с Google Fonts можно скачать файлы шрифтов и разместить их на своем сервере.

Если дизайнер выбрал какие-то другие шрифты (и за платные лучше платить, а не пиратствовать) — нужно загрузить в отдельную папку файлы этих шрифтов в форматах ttf, eot и woff.

В случае использования в макете иконок из готового иконочного шрифта — его тоже нужно приложить к макету.

Иконки в SVG

Если на сайте будут использоваться иконки в обычном PNG-формате, то на многих мобильниках такие иконки окажутся «размытыми». Качество теряется из-за того, что мобильное устройство пытается увеличить картинку в несколько раз (это происходит из-за повышенной плотности пикселей экранов мобильных). Наиболее простой выход — использовать иконки в SVG-формате. Это векторный формат, поэтому он масштабируется без проблем.

Также svg-иконки можно сохранить в иконочный шрифт — в таком варианте тоже не будет проблем с размытостью.

Единственное замечание — использовать SVG стоит только для простой графики (иконки, логотипы), так как сложное изображение будет слишком много «весить».

Дополнительные изображения и логотипы

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

Например, в папке «Слайдер в шапке» четыре картинки, каждая картинка размером 1920 на 600 пикселей, с необходимой коррекцией яркости и пр. А в папке «Партнеры» все 30 логотипов партнеров для соответствующего слайдера (в макете их будет показано штуки 4, но верстальщику нужны они все).

Фавикон

Если заказываете разработку или редизайн сайта, не забудьте прописать в ТЗ создание favicon — иконки для вкладки в браузере. Иначе получите такую ситуацию:

Хорошо, если иконка будет в двух форматах:

• Стандартный favicon.ico (64 на 64 пикселя):

  

• Иконка для мобильных — apple-touch-icon-precomposed.png (114 на 114 пикселей):

  

Пояснительная записка

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

Также полезны комментарии вида:

• «Такие-то ссылки открываем в новом окне, а такие-то — в модальном»

• «После отправки формы выдаем такое-то сообщение»

• «По клику на этой кнопке прокручиваем страницу к вот этому блоку»

• «Подменю разворачиваем по наведению мыши на десктопах, а на мобильных — по клику» и т.п.

Гид по стилям (style guide)

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

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

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

Итог

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

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

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

Перечень статей раздела Разработка дизайн-макета:

2016-10-18

Определяем способ создания дизайн-макета

• Какие существуют варианты дизайна
• Дизайн на заказ
• Дизайн на основе платных готовых шаблонов
• Дизайн на основе бесплатных шаблонов
• Самостоятельное выполнение дизайна

Здравствуйте уважаемый посетитель!

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

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

1. дизайн на заказ;
2. использование платных готовых шаблонов;
3. использование бесплатных шаблонов;
4. самостоятельная разработка.

В зависимости от того, по какому пути пойти, в большой степени будут зависеть все последующие действия…

2016-10-20

Делаем эскиз и готовим картинки для дизайн-макета

• Рисуем эскиз сайта
• Подбираем необходимые элементы
• Выполняем разметку макета

Здравствуйте уважаемый посетитель!

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

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

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

2016-10-24

Создаем новый документ в фотошопе и переносим на него картинки

• Создаем новый документ композиции шапки дизайн-макета сайта
• Переносим картинки заготовок

Здравствуйте уважаемый посетитель!

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

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

Это можно сделать, используя размещенные в сети интернет различные обучающие материалы по работе с графическими редакторами, а также воспользоваться, имеющимися здесь, на сайте бесплатными видеокурсами, для Adobe Photoshop — Фотошоп для начинающих (бесплатная версия)», для GIMP — Видеосамоучитель GIMP.

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

2016-10-26

Создаем композицию шапки дизайн-макета сайта

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

Здравствуйте уважаемый посетитель!

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

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

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

2016-11-02

Создаем дизайн-макет веб-страницы

• Меню
• Ротатор
• Основное содержание и сайдбар
• Подвал
• Исходные файлы сайта

Здравствуйте уважаемый посетитель!

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

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

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

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

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

2017-03-07

Создаем и размещаем фавикон

• Выбор способа создания фавикона
• Установка плагина в Фотошоп
• Дизайн фавикона
• Сохранение на сайте
• Подключение к страницам сайта
• Исходные файлы сайта

Здравствуйте уважаемый посетитель!

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

О том, зачем нужен фавикон — уникальный значок (иконка) сайта, говорилось ранее в разделе Что такое фавикон и для чего он нужен одной из статей на этапе верстки сайта. Где для формирования шапки мы временно разместили на его место небольшую фигуру в виде фиолетового кружка.

Поэтому, для подтверждения необходимости использования этого значка здесь можно лишь привести скриншот одного из вариантов результатов поиска Яндекса, как показано ниже…

макет — это… Виды, создание и разработка

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

Определение

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

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

Характеристики

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

• понятность;
• читабельность;
• гармоничность композиции;
• интересы заказчика, его ключевая идея;
• иметь необходимые технические характеристики.

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

Целостность дизайн-макета создается с помощью следующих инструментов:

• линии и формы;
• цвет и тон;
• текстура;
• размер;
• перспектива.

Указанные элементы создают конструкцию для воплощения идеи. При создании дизайн-макета необходимо соблюдать следующие принципы:

• пропорциональность;
• уравновешенность конструкции;
• четкие акценты;
• целостность и единство элементов.

Виды

По сфере назначения макеты делятся на архитектурные и рекламные.

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

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

Для прессы

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

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

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

Макет сайта

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

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

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

Полиграфия

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

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

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

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

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

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

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

дизайн — Макет сайта / Фотошоп-мастер

Только с 29 по 31 января в первые три дня продаж, запись 2-х дней мастер-класса «Учимся рисовать стикеры в Photoshop» будет доступна со скидкой -30%

166 0

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

471 0

Выпускница наших курсов Оксана Силивончик записала для вас рабочий процесс создания арта с пчелами.

2917 7

​Время подводить итоги. Давайте узнаем, кто получает статус «Master» + безлимитную загрузку работ в портфолио + возможность участвовать в подборке среди мастеров и профессионалов.

1706 11

дизайн — Макет сайта / Фотошоп-мастер

Только с 29 по 31 января в первые три дня продаж, запись 2-х дней мастер-класса «Учимся рисовать стикеры в Photoshop» будет доступна со скидкой -30%

169 0

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

471 0

Выпускница наших курсов Оксана Силивончик записала для вас рабочий процесс создания арта с пчелами.

2926 7

​Время подводить итоги. Давайте узнаем, кто получает статус «Master» + безлимитную загрузку работ в портфолио + возможность участвовать в подборке среди мастеров и профессионалов.

1716 11