Сайты с точки зрения дизайнера

Сайты с точки зрения дизайнера

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

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

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

Главная страница:

  • 1 час – прототип
  • 8 часов – дизайн
  • 7 часов – адаптивный дизайн

Новости:

  • 1 час – прототип
  • 4 часа – дизайн
  • 3 часа – адаптивный дизайн

В каждом случае все индивидуально, все зависит только от фантазии заказчика.

Терминология помогает оценить сайты оперативно, а основы маркетинга и usability помогают быстрее понимать клиента и коллег по работе. Поэтому я вам рекомендую учиться по тематике веба и читать макулатуру по специфике работы. Ну и конечно изучите хотя бы основы html и css, об сопутке по типу Adobe Photoshop Lightroom, Adobe After Effects и так далее, говорить не буду.

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

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

Sketch и Adobe Photoshop программы, которые создают уже конечное виденье дизайнера в совокупности с правками клиента, после этого этапа дизайн отдается гениальным верстальщикам, а порой и программистам в придачу, которые порой бьют в бубен для реализации гениальной фантазии веб-дизайнера (не в моем случае, (я надеюсь)). Иногда дизайн более похож на кино, которое просто необходимо оживить, показать, как будут выезжать окошки, модальники, как происходит анимация и продемонстрировать время появления блоков при скроле в низ, для всего этого я использую чаще всего Adobe After Effects, есть и другие варианты софта, но этот приелся и стал более приемлемым по крайне мере для меня.

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

Этот туториал про веб-дизайн, можно дополнить лишь тем что именовать слои в файлах проекта будет очень полезно, и верстальщик скажет вам спасибо, а еще лучше выгрузить все значки иконки и лого в формат svg, картинки в jpg, а все что в макете с прозрачным фоном из картинок и фигур в png, только не перетрудитесь такие вещи как font awesome достаточно просто скинуть с папкой шрифтов, которые использовались в этом проекте ну или ссылкой на официальный сайт шрифта.

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

Автор статьи: Веб-Дизайнер Андрей Палий

comments powered by HyperComments
ЗАКАЗАТЬ УСЛУГУ

Имя

Поле обязательно для заполнения

Телефон

E-mail

Поле обязательно для заполнения
Некорректный формат email

Комментарий

Отправить
Спасибо за обращение.
Мы скоро свяжемся с вами.

Имя

Поле обязательно для заполнения

E-mail

Поле обязательно для заполнения
Некорректный формат email

Вопрос

Поле обязательно для заполнения
Отправить
Спасибо за обращение.
Мы скоро ответим на Ваш вопрос.
Ваш заказ

* - поля обязательные для заполнения