Как инвалиду стать профессионалом без работы и денег? Часть четырнадцатая. Сайт фотобудок, работа над рекламой, развитие как web дизайнера.
Тринадцатая часть здесь:
Добрый день всем!
(осторожно здесь тяжелые картинки!)
Сегодня я вам расскажу, о том, как начать работать над сайтом, первые шаги при разработке сайта, проработка идеи и цвета, как взаимодействовать с клиентом, как найти подходящие иллюстрации и как можно было бы их переработать и о том как сделать из десктопной версии сайта мобильную и планшетную.
А так же сегодня я расскажу вам как работал над рекламой и какие бывают подводные камни и принципы создания рекламы.
И напоследок расскажу вам, о том что значит быть веб дизайнером и как можно развиваться дальше. Это сложно и это одновременно и интересно.
Итак начали.
Первое:
Неделю назад ко мне обратились ребята, которым требовался сайт о фотобудках.
Мне понравилась задача, и я захотел сделать этим ребятам, не просто обычный сайт, а интересный, цепляющий сайт, и именно таким каким его хотел заказчик.
Первое что мы сделали, это обговорили не стоимость, не время, а именно обговорили какие у них пожелания, и разработал для ребят специальный брифинг для того, чтобы сократить время первоначальных правок и первоначальных переговоров.
После чего мы проработали доску цветов и иллюстративную часть, которая показала бы максимум того что хочет заказчик.
И сейчас я расскажу как я работал дальше с сайтом.
Первым делом я разработал прототип, который описывал максимально точно как информационное взаимодействие с посетителями, так и иллюстративное оформление, которое было призвано дополнить информацию.
Как вы видите, я разобрал каждый элемент сайта так, чтобы они имели максимальную вариативность для заказчика, и так было удобно обсуждать его с друг другом в режиме реального времени и изменять его. Очень советую тем, кто начинает путь в веб дизайне, научиться взаимодействовать с заказчиком с его помощью. Это сильно сократит вам время перед началом непосредственной работы.
Прикладываю прямую ссылку, на сам сайт, чтобы посмотреть какой был прототип и какие там были комментарии в работе над ним. И вы можете сами спокойно начать пробовать работать с сайтами и прототипами в нем.=)
После чего мы начали собственно работу над сайтом.
Перед тем как показать сам сайт вам, я хотел бы еще затронуть такие моменты как решение проблемы заказчика и его задач.
Специально для вас я создал небольшие объясняющие презентации, почему, зачем и как.
Как вы видите выше в картинках, основная задача состояла в том, чтобы иллюстрации не были бы масштабными, не занимали бы большую часть экрана, а органично бы вливались в саму структуру. Это была интересная задача.
Ведь налепить картинки блоками и почти не перерабатывая их или пустить их фоном, это может любой, а вот сделать так, чтобы они не нарушали структуру и еще были бы привлекающими внимание и не выстроенные в виде блоков или фона, вот это было сложнее.
И я постарался выразить это максимально схематично и одновременно, и иллюстративно.
И так же старался держать в голове что сам сайт должен создаваться не только для десктопа, но и для мобильного и планшетного варианта. А у мобильных и планшетных вариантов структура совершенно другая, и мне пришлось учитывать и этот момент при создании иллюстраций так, чтобы они были абсолютно идентичными везде и имели бы такую же структуру и отвечали бы запросу о минимализме.
Прикладываю вам полноразмерный макет сайта и ссылку на него на биханс, чтобы могли рассмотреть более внимательно.
https://www.behance.net/gallery/86081279/lending-dlja-fotobu...
Надеюсь и вам тоже понравится.
Как вы видите я схематично разделил блоки, которые отвечают за определенную задачу линиями и кружками, и одновременно с этим, не нарушая структуры сайта я вписал в них, собственно, сами иллюстрации.
Я постарался понять, что вообще важно в подаче информации про фотобудки, как выразить эмоциональные впечатления от них, и думаю я смог. =)
Вообще самое сложное на этапе наполнения, как я понял, это не пытаться сделать идеальный сайт, не пытаться найти идеальные иллюстрации, а именно творчески перерабатывать картинки, предоставленные заказчиком так, чтобы все было максимально реалистично, и было бы правдиво.
Спасибо моей девушке за слова – хорошее враг лучшего. Это меня отрезвило и наставило на путь истинный.
В целом сайт у меня получился концентрирован в 4 блоках из 6, и по этим блокам я постарался пустить уникальное предложение от фотобудок, и на каждом из экранов я сделал возможность заказа. Этот момент позволяет повысить конверсию самого сайта, и не упускать посетителя до тех пор, пока он не сделает свой заказ.
И постарался аккуратно закончить на ненавязчивом предложении заказа, по-дружески скажем так. Никаких всплывающих баннеров, никаких предложений купить вот здесь и сейчас, у посетителя должна быть иллюзия контроля над сайтом. Надо лишь помочь ему решить заказать фотобудку.
Вот скажите, как часто вы закрываете сайты лишь потому, что вам пишет дежурный бот или всплывает окно с предложением заказа буквально спустя пять секунд? Я лично сразу закрываю, это бесит.
К слову, этим ребятам так понравилась цветовая доска, что они помимо сайта решили еще заказать у меня рекламу для печати в журнале. Я же хоть и не имел никакого опыта в работе с рекламой с радостью согласился, так как я обожаю сложные задачи, и чем сложнее, тем лучше.
Прикрепляю вам рекламу, которую я сделал для них.
Это была интересная задача, так как до этого момента я ни разу не работал со CMYK, и слабо представлял что из себя вообще может представлять реклама в журнале, но я постарался сделать его по всем законам дизайна которые я успел узнать. Поместил всю информацию внутри прямоугольника, который не попадает под обрез, и постарался еще все выразить в стиле коллажа, так как основная просьба заказчиков была такая - поместить как можно больше иллюстраций на один квадратный сантиметр.
Это было сложно, но мне понравилось=)
А уж сколько он правок прошел, это просто не сосчитать, и сколько раз макет заворачивали из-за того, что было банальное незнание простых принципов типографской верстки. Спасибо вам ребята, что вы помогли мне научиться этому и дали мне понятие как правильно работать с иллюстрациями для типографии.
Второе:
Для того чтобы развиваться дальше как веб дизайнер, я постоянно шерстю интернет в поисках интересных задач, и у меня потихоньку уже начинает работать сарафанное радио, и ко мне обращаются люди которым порекомендовал меня предыдущий заказчик.
Ребята вы просто потрясающие, спасибо вам что рекомендуете меня и я постараюсь не обломать ваши ожидания и ваши рекомендации!
И сейчас я начинаю прорабатывать еще один сайт, посвященный автосервису. Вот серьезно, как часто вы видели классный дизайн у автосервиса? Я вот посмотрел в интернете и в российском и в иностранном сегменте и нигде не смог найти бы реально классный, интересный дизайн, который бы и одновременно был бы информативен и вместе с этим цеплял бы простотой и иллюстрациями.
И этот сайт я планирую сделать ЕЩЕ лучше, чем сделал этот, я планирую на этом сайте проработать двойную экспозицию, проработать еще лучше обтравку иллюстраций, научиться коллажировать внезапные интересные иллюстрации и самое важное, я для него планирую научиться работать в Adobe After Effects и создать для него действительно мозговыносящие классные анимированные карусели и иллюстрации.
Чем сложнее задача, тем быстрее ты растешь! =)
К слову гифки в самом начале поста были как раз созданы в нем. Правда классно получилось? А теперь представьте, как можно анимировать ваши товары или услуги. М-м-м-м конфетка.
И третье:
Господа кожевники я вас просто обожаю и люблю, откуда вы все беретесь и закидываете меня заказами?
Прикрепляю ниже примеры работы над логотипами для кожевников и визитными карточками.
И на этом думаю мы с вами закончим!
Ставлю себе задачи на следующую неделю:
- Добить два сайта для портфолио
- Добить лекала и заказы по логотипам.
- Не снижать темп и сделать все заказы.
- Искать еще больше заказчиков.
- Начать продавать лекала для кожевников.
Так же традиционно хочу прикрепить здесь ссылки, которые могут быть полезны вам:
https://habr.com/ru/post/276249/ - Хороший пост если вам нужно подобрать иконки, для того чтобы вставить на сайте в одном стиле. Очень огромное количество цветов и их сочетания.
Для сайта тоже очень важно единообразие иконок в интерфейсе и навигации.
https://awdee.ru/ - И здесь я прикреплю вам отличный интернет журнал для дизайнеров, где рассказывается о всем современном в мире дизайнеров, и о моде в дизайне и вообще обо всем всем всем. Пишут легко, читать интересно.
Спасибо всем за внимание. Ждите 15 лонгрид про прогресс на следующей неделе.
С уважением, Максим Журавлев.
Форма связи со мной:
mr.crane.leather@yandex.ru
