Привет всем, меня зовут Андрей и меня тут попросили напечатать пару строк о том, как я работаю и вообще, как это, работать в большой компании и делать сайты для клиентов, которых порой нельзя разглашать.
Любое создание сайта начинается с того что тебе ставят задачу в виде ТЗ и еще пары непонятных комментариев от того, кто терпел общался с клиентом. Ты начинаешь читать и вникать в мелочи и суть проекта, смотришь похожие проекты на 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 достаточно просто скинуть с папкой шрифтов, которые использовались в этом проекте ну или ссылкой на официальный сайт шрифта.
Когда вам скажет спасибо клиент и верстальщик знайте – это означает что вы хороший дизайнер.
Автор статьи: Веб-Дизайнер Андрей Палий
