Семь способов прокачать насмотренность
Вдохновляйтесь, а не копируйте.
Крутым инструментом для вашей креативности послужит следующее упражнение.
Выберите экран сайта, для этого подойдет ресурс Pinterest, и обдумайте как бы выглядел остальной сайт. И Вы научитесь развивать с одного экрана визуализацию всего сайта.
Собирайте мудборды
Такие библиотеки могут спровоцировать Ваш творческий процесс. Можно подойти креативно, и сохранять в разные подборки: главные экраны, кнопки. В любой момент можно будет вернуться к данным подборкам.
Следите за смежными отраслями.
Веб- дизайн - сфера новая, которая пришла на смену устоявшимся постерам, книгам, газетам.
К примеру, у полиграфического дизайна есть чему научиться. Сетки с полиграфического дизайна можно применять и тут, вдохновившись ими на решения.
Не нужно ограничивать себя только другими веб-дизайнами.
Следите за новостями в социальных сетях.
В социальных сетях подпишитесь на тех, кто связан с дизайном, создателей контента. Сможете проводить время в социальных сетях с пользой и тренировать свою насмотренность.
Вдохновляйтесь, а не копируйте.
Крутым инструментом для вашей креативности послужит следующее упражнение.
Выберите экран сайта, для этого подойдет ресурс Pinterest, и обдумайте как бы выглядел остальной сайт. И Вы научитесь развивать с одного экрана визуализацию всего сайта.
Собирайте мудборды
Такие библиотеки могут спровоцировать Ваш творческий процесс. Можно подойти креативно, и сохранять в разные подборки: главные экраны, кнопки. В любой момент можно будет вернуться к данным подборкам.
Следите за смежными отраслями.
Веб- дизайн - сфера новая, которая пришла на смену устоявшимся постерам, книгам, газетам.
К примеру, у полиграфического дизайна есть чему научиться. Сетки с полиграфического дизайна можно применять и тут, вдохновившись ими на решения.
Не нужно ограничивать себя только другими веб-дизайнами.
Следите за новостями в социальных сетях.
В социальных сетях подпишитесь на тех, кто связан с дизайном, создателей контента. Сможете проводить время в социальных сетях с пользой и тренировать свою насмотренность.
Основные правила веб-дизайна
Дизайн должен быть единым, независимо от платформы.
Сайт могут посетить с разных устройств: телефон, ноутбук, планшет. Работая над UX заключается в предоставление для всех людей одинаковой версии сайта на разных устройствах.
Сайт должно быть удобно использовать с разных устройств.
Просто и понятно
Пользователи должны легко разбираться в твоем сайте.
Структура сайта должна быть простая, а навигация очевидной.
Цвет ссылок
Ссылки это ключевой элемент в процессе навигации. Нужно менять цвет посещенной ссылки, чтобы пользователь случайно не зашел снова по той же ссылке.
Ссылки нужно проверять
Пользователь может потерять доверие к сайту если ссылка будет выдавать ошибку 404.
Простой поиск по страницам
Впервые когда пользователь открывает сайт и смотрит лишь глазами, не читая текст. Пользователь ищет решение своей проблемы, а дизайнер должен помочь ему в решение проблемы чем правильную визуальную иерархию.
Визуальная иерархия - расстановка элементов по их важности.
Дизайн должен быть единым, независимо от платформы.
Сайт могут посетить с разных устройств: телефон, ноутбук, планшет. Работая над UX заключается в предоставление для всех людей одинаковой версии сайта на разных устройствах.
Сайт должно быть удобно использовать с разных устройств.
Просто и понятно
Пользователи должны легко разбираться в твоем сайте.
Структура сайта должна быть простая, а навигация очевидной.
Цвет ссылок
Ссылки это ключевой элемент в процессе навигации. Нужно менять цвет посещенной ссылки, чтобы пользователь случайно не зашел снова по той же ссылке.
Ссылки нужно проверять
Пользователь может потерять доверие к сайту если ссылка будет выдавать ошибку 404.
Простой поиск по страницам
Впервые когда пользователь открывает сайт и смотрит лишь глазами, не читая текст. Пользователь ищет решение своей проблемы, а дизайнер должен помочь ему в решение проблемы чем правильную визуальную иерархию.
Визуальная иерархия - расстановка элементов по их важности.
Редизайн дешевле?
Бывают заказчики которые в ответ на названную стоимость дизайна отвечают фразой " А что если редизайн?" Ожидая, что сумма будет меньше.
Примерно каждый третий дизайнер выставляет за работу по редизайну сайта сумму меньше, чем за дизайн с нуля.
Давайте лучше разберемся с ТЗ.
Техническое задание
Круто, если дизайнер сразу попадает в ожидания клиента. ТЗ должно состоять из двух частей:
Бриф + Прототип/ схема
Как сделать Что сделать
1. Бриф
Смысл брифа в том, чтобы понять, что нравится заказчику: какие кнопки, закругленные углы, заливка, градиент, пастельные тона, какая цветовая гамма и т.д.
2. Прототип или схема
Может выглядеть как угодно. Тут главное, сразу можно увидеть объем работы. Этого достаточно чтобы назначить стоимость заказчику.
А что же с редизайном?
В таком ТЗ тоже должен быть бриф. Текущий сайт заказчика будет являться прототипом. С данного прототипа мы будем брать контент, также от него нужно отталкиваться по изменениям.
Редизайн = дизайн с нуля
Процесс наших действий одинаковый!
Работа происходит в одной и той же программе, нужно собрать такие же блоки. И время выходит в итоге одинаковое и на дизайн и на редизайн. Исходя из этого редизайн не должен стоить дешевле.
Бывают заказчики которые в ответ на названную стоимость дизайна отвечают фразой " А что если редизайн?" Ожидая, что сумма будет меньше.
Примерно каждый третий дизайнер выставляет за работу по редизайну сайта сумму меньше, чем за дизайн с нуля.
Давайте лучше разберемся с ТЗ.
Техническое задание
Круто, если дизайнер сразу попадает в ожидания клиента. ТЗ должно состоять из двух частей:
Бриф + Прототип/ схема
Как сделать Что сделать
1. Бриф
Смысл брифа в том, чтобы понять, что нравится заказчику: какие кнопки, закругленные углы, заливка, градиент, пастельные тона, какая цветовая гамма и т.д.
2. Прототип или схема
Может выглядеть как угодно. Тут главное, сразу можно увидеть объем работы. Этого достаточно чтобы назначить стоимость заказчику.
А что же с редизайном?
В таком ТЗ тоже должен быть бриф. Текущий сайт заказчика будет являться прототипом. С данного прототипа мы будем брать контент, также от него нужно отталкиваться по изменениям.
Редизайн = дизайн с нуля
Процесс наших действий одинаковый!
Работа происходит в одной и той же программе, нужно собрать такие же блоки. И время выходит в итоге одинаковое и на дизайн и на редизайн. Исходя из этого редизайн не должен стоить дешевле.
Подборка крутых плагинов Figma, которые спасают жизнь
👍Mesh Gradient
Создавайте красивейшие Mesh-градиенты, не выходя из Figma.
👍Ul Faces
Тысячи аватаров! Легко можно отфильтровать поп полу, возрасту, эмоциям и т.д.
👍Easometric
С ним вы можете быстро создавать изометрические виды сверху, слева, справа.
👍Mapsicle
Добавляйте Google карты в ваш макет. Можно настроить стиль, локацию, наклон и другое.
👍Filter
Плагин, для того чтобы подобрать какой-то интересный эффект своим фотографиям или фону проекта.
👍 Geometric
Дает возможность создавать прикольные фигуры для дизайна
👍Mesh Gradient
Создавайте красивейшие Mesh-градиенты, не выходя из Figma.
👍Ul Faces
Тысячи аватаров! Легко можно отфильтровать поп полу, возрасту, эмоциям и т.д.
👍Easometric
С ним вы можете быстро создавать изометрические виды сверху, слева, справа.
👍Mapsicle
Добавляйте Google карты в ваш макет. Можно настроить стиль, локацию, наклон и другое.
👍Filter
Плагин, для того чтобы подобрать какой-то интересный эффект своим фотографиям или фону проекта.
👍 Geometric
Дает возможность создавать прикольные фигуры для дизайна
Как красиво показать дизайн. Работа с мокапами
Мокап — картинка с помощью которой заказчик увидит, как дизайн будет выглядеть в реальности. Например, макет дизайна сайта вставляется в экран ноутбука, дизайн фирменного стиля (лого, упаковка товара и тд) помещается на предмет.
⠀
Мокап подбирается после создания дизайна. Также они понадобятся при оформлении портфолио.
⠀
Какие бывают мокапы:
✓бесплатные;
✓ платные;
✓ самостоятельно созданные, если владеете программой Cinema 4D.
⠀
Где найти бесплатные красивые мокапы?
В гугле.
А вот подборка, чтобы не искать:
- mockuuups.studio
- www.ls.graphics
- cssauthor.com
- Smartmockups
- Freepik
⠀
Где редактировать мокапы:
1️⃣Фотошоп
Большинство мокапов созданы для фотошопа.
➕Можно воспользоваться любым мокапом из интернета.
⠀
2️⃣Фигма
В фигме есть бесплатные плагины, которые позволяют поместить изображение в мокап. ⠀
Плагины с мокапами для фигмы:
- Mockup
- Angle Mockups
- Clay Mockups 3D
⠀
➕Удобство размещения изображения под улом
➖Ограниченная библиотека
Мокап — картинка с помощью которой заказчик увидит, как дизайн будет выглядеть в реальности. Например, макет дизайна сайта вставляется в экран ноутбука, дизайн фирменного стиля (лого, упаковка товара и тд) помещается на предмет.
⠀
Мокап подбирается после создания дизайна. Также они понадобятся при оформлении портфолио.
⠀
Какие бывают мокапы:
✓бесплатные;
✓ платные;
✓ самостоятельно созданные, если владеете программой Cinema 4D.
⠀
Где найти бесплатные красивые мокапы?
В гугле.
А вот подборка, чтобы не искать:
- mockuuups.studio
- www.ls.graphics
- cssauthor.com
- Smartmockups
- Freepik
⠀
Где редактировать мокапы:
1️⃣Фотошоп
Большинство мокапов созданы для фотошопа.
➕Можно воспользоваться любым мокапом из интернета.
⠀
2️⃣Фигма
В фигме есть бесплатные плагины, которые позволяют поместить изображение в мокап. ⠀
Плагины с мокапами для фигмы:
- Mockup
- Angle Mockups
- Clay Mockups 3D
⠀
➕Удобство размещения изображения под улом
➖Ограниченная библиотека