Виды макетов. Что дальше? Макетируем

Макеты мобильных устройств идеально подходят для представления демо-версий приложений. Они также позволяют дизайнерам редактировать экран устройств в приложениях, добавлять/убирать элементы интерфейса, создавать фотографии готовой работы. Но одновременно с этим, не сказать что часто, но макеты устройств используются и в веб-дизайне, особенно при работе с заголовками страниц (page header). За последнее время можно было увидеть достаточно много таких сайтов и они продолжают появляться, а потому мы решили посмотреть повнимательнее на данную тенденцию и попрактиковаться в работе с Photoshop.

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

Стандартный вид

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

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

Такой вариант несложен в создании в Photoshop, но удобен для дизайна и работы с контентом. Поэтому чаще всего мы и видим именно этот вариант или вариант в перспективе. Особенно интересным представляется вариант дизайна проекта Spendee . Здесь веб-мастера решили использовать своеобразный слайдер, дабы нагляднее продемонстрировать творение разработчиков для систем iOS и Android. При прокрутке страницы можно увидеть, что каждый раздел сайта использует свой оригинальный макет мобильного устройства.

Перспектива

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

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

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

PSD макеты

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

В тоже время команда Ramotion представила сборку реалистичных высококачественных макетов iPhone Clay PSD , которые позволяют настраивать цветовую гамму на свой вкус. В библиотеке находятся самые разные макеты моделей Android-смартфонов и версий iPhone. Но если и в интернете найти такое можно, то отличие данной сборки - в открытых PSD файлах, которые можно редактировать, как душе угодно. Качество изображений достаточно велико и создано в векторе с использованием смарт-объектов. Но набор небесплатен, увы.

Dribbble

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

А еще можно потратить от 30 минут своего свободного времени и найти идеальный макет для своего сайта просто в поиске Yandex/Google. Но Dribbble удобен тем, что предлагает дополнительно предварительный просмотр и более точный поиск.

Photoshop

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

Как вставить картинку на экран, многие знают, но что еще можно придумать и какие фантазии создают дизайнеры?

Вариант 1

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

Затем перейдем к инструменту Кисть и создадим кисточку с эффектом нажима и тонкими краями.

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

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

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

Таким образом, если есть темное изображение, то можно применить и эффект неона к нему. Все, разумеется, зависит от фантазии.

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

Вариант 2

Другим интересным примером может послужить 3D . Для основы возьмем всё ту же фотографию и используем разные объекты, от готового изображения до скрап-набора. Располагая их поверх основного рисунка и создавая подсвечивание (если нужно по тематике), можно создать интересные композиции.

Сами объекты не должны быть в 3D. С помощью перспективы и правильного поворота макета смартфона (планшета и пр.) иллюзия объемности создастся автоматически.

Не забывайте работать по маске и создавать отдельные слои для всего. Лишние детали линий или объектов удаляйте ластиком. И вот что получается создать.

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

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

Заключение

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

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

Фантазии, фантазии… творчество.

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

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

макет интерьера из бумаги и картона

Макеты бывают Разные:

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

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

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

В каком масштабе делать макет?

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

Какие нужны инструменты для создания макета?

Инструменты понадобятся обязательно, хорошими инструментами будет работать легко и приятно.

Макетный нож Купить можно в магазине или лучше сразу купить запасные лезвия для ножа, потому что они быстро тупятся и ломаются. Или можно подтачивать лезвие, наклейки на кусочек ДВП шкурку нулевку, когда весь абразив сотрется у вас получится отлично правило для макетного ножа.
Коврик для резки, удобно резать и на таком коврике вы не сломаете кончик макетного ножа
Клей, вам обязательно нужен будет клей, можно взять пва или момент. , Всё-таки используют клеей ПВА.
Железная линейка по которой вы будете резать ровно детали вашего макета. Также, возможно вам понадобиться металлический угольник.

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

Порой бывают ситуации, когда не требуется создавать сайт с нуля, тщательно прорабатывая его концепцию. Сегодня в интернете можно найти множество бесплатных шаблонов, используя которые можно быстро создать красивый и современный сайт. Проектирование веб-страниц не стоит на месте – в нем регулярно появляются новые тенденции, которые оказывают серьезное влияние на результаты работы дизайнеров. Очень радует, что многие дизайнеры не жадничают и делятся плодами своего труда, выкладывая мокапы и шаблоны в свободный доступ. FreelanceToday предлагает вашему вниманию 15 бесплатных PSD-макетов сайтов, которые можно использовать как в личных, так и в коммерческих проектах

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

Красивый и стильный шаблон, разработанный дизайнером Орканом Сепом. Главное отличие этого одностраничника – приятная цветовая гамма и использование шестиугольников как основного элемента дизайна.

Данный макет может использоваться как основа для создания сайта-портфолио для фотографов и иллюстраторов.

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

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

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

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

Еще одна работа, которую выложила в свободный доступ студия PixelMustashe. Шаблон состоит из 8 легко редактируемых PSD-файлов – это макеты главной и внутренних страниц.

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

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

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

Хотите создать стильный блог? Скачайте этот бесплатный шаблон с уникальным дизайном, который произведет большое впечатление на посетителей.

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

Шаблон cLand представляет собой посадочную страницу с очень простым и чистым дизайном. Идеально подойдет для создания лендинга с небольшим количеством контента.

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

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

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

Рисунок 1.6 – Рабочий (эскизный макет)

После утверждения окончательного варианта объемно-пространственного решения может быть выполнен чистовой – экспозиционный макет (рисунок 1.7).

Рисунок 1.7 – Демонстрационный макет жилого комплекса

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

2 Изготовление макета

2.1 Порядок выполнения макета

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

1. Определение конструктивных особенностей макета.

2. Разбивка макета на простые в изготовлении составные элементы.

3. Разметка разверток-заготовок на материале макета.

4. Вырезание заготовок.

5. Сборка и выклеивание объемных элементов макета.

6. Окончательное склеивание из отдельных элементов.

Приведенному порядку макетирования предшествует подготовительный этап, который представляется: анализом исходного проекта (идеи); определением материалов, инструментов, выбором масштаба и степени деталировки.

2.2 Выбор масштаба макета

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

Для макетов в учебном процессе архитектурного проектирования рекомендуются следующие масштабы:

Малые архитектурные формы (микросквер, детская площадка, въездной знак) – 1: 10, 1: 20, 1:25 (рисунок 2.1);

Рисунок 2.1 – Макет монумента

Индивидуальные, блокированные жилые дома малой этажности – 1: 25, 1:50;

Небольшие общественные здания (интерьер павильона) – 1: 20, 1: 25, 1: 50;

Здание средней этажности (жилой дом, гараж)- 1: 100, 1: 200.

3 Основные приемы и техники макетирования

3.1 Изготовление подмакетника

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

Рисунок 3.1 – Склеивание подмакетника

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

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

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

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

После изготовления прочного основания выклеивается подмакетник (рисунок 3.2).

Рисунок 3.2 - Изготовление подмакетника с рельефом местности

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

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

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

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

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

После подготовки подмакетника приступают к изготовлению макета объекта

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

Планирование.
Азы верстки или как она делается.
Типографика.
Правильный выбор цветов для проекта.
Юзабилити.
Продуманный интерактив (навигация, кнопки, ссылки и т.д.).
Оформление содержания.
Порядок в исходнике макета.

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

Макет сайта – создание или как создать макет сайта

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

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

Азы верстки или как она делается , тут я думаю, нет особого смысла расписывать, скажу, что наиболее важным тут являются следующие особенности, которые нужно учесть:

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

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

Что это за такие шрифты? Это шрифты, которые есть и существуют на компьютере любого пользователя независимо от операционной системы. Как пример шрифты Arial, Georgia, Tahoma, Verdana и другие. При создании дизайна желательно использовать два вида шрифта, иногда конечно бывает и больше, но основа всегда два это шрифт для акцентов (заголовков) и базовый для всего контента.

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

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

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

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

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

Что дает порядок в макете сайта? Для дизайнера и верстальщика быстрый ориентир что к чему относится и что где находится. Это как логическая схема элемент один дизайн (файл psd) он разложен на папки группам, тело, подвал, конечно, бывает еще и слайдер. А вот уже в свою очередь эти группы подразделяются на подгруппы при необходимости а в них лежат слои с названием того или иного слоя. Правильная иерархия Вам же самим поможет, если придется править, что-то гораздо легче найти, чем рыться в куче групп со слоями без имен, да и верстальщик быстрее все сообразит и сверстает. Это что касалось иерархии. Еще один важный момент, о котором меня, по крайней мере, несколько раз просили совершить, и после этого вошло у меня в привычку, убирайте за собой направляющие, чтобы верстальщик не тратил время и не приводил макет сайта за вами в порядок.