Дмитрий Варфоломеев | Веб Дизайн

Постоянно замечаю, что некоторые неплохие сайты слишком долго грузятся. И скорее всего это происходит из-за тяжёлых фотографий. [0:28] Как делают многие: Просто добавляют картинку через экспорт, а потом при приближении в Фигме оно теряет в качестве😐 [1:23] Как делаю я: Первое – сохраняю изображение гораздо бо‌льшего размера, чем сам фрейм. Допустим, при размере фрейма 1200px я увеличиваю картинку до 1920px (если она будет занимать весь экран, как на примере). Второе – перед добавлением изображения в Тильду обязательно проверяю, включен ли максимальный размер файла – обычно это надо делать вручную. Вроде всё готово, результат стал чётче и круче, но есть проблема: теперь такая фотка весит хренову тучу мегабайт)) [2:39] Как это исправить? 🩵заходим на Squoosh.app и добавляем наше загруженное изображение; 🩵уменьшаем качество до ~75; 🩵наслаждаемся сжатием веса на 94%, сохраняем картинку себе и вот теперь добавляем в Тильду. [3:11] Какой ещё нюанс работы с изображением есть в Тильде: Можно добавлять картинки для бэкграунда через Add image, но при этом сохранится соотношение сторон, а это не всегда удобно. В таком случае в значении Fit нужно выставить Cover – и тогда менять и обрезать получится как угодно. [4:04] Как Тильда решает вопрос оптимизации изображений? 🩵поддерживает формат WebP и дополнительно уменьшает размер файлов; 🩵предлагает адаптивный ресайз для разных мониторов; 🩵работает с Retina-дисплеями и медленным интернетом. Что в итоге? А в итоге мы получаем максимальное сжатие, сохранение хорошего качества и при этом быструю загрузку изображений. Так что работайте через Image и пользуйтесь Squoosh.app!)🚀

...и нет, не по дизайну, а для души) Сегодня расскажу, почему я не сторонник всякой профессиональной литературы, и поделюсь своими рекомендациями по чтению: 🩵Пиши, сокращай (М. Ильяхов) – да, это единственное из профессиональной области, что советую прочитать абсолютно всем. 🩵Вселенная Боба: в 4 частях (Д. Тейлор) – о том, как человеческий мозг оказался внутри искусственного интеллекта и отправился покорять космос. 🩵Задача трёх тел (Лю Цысинь) + фанфик Возрождение времени – очень захватывающий сюжет про захват Земли инопланетянами. 🩵Аудиоспектакль Марсианские хроники (Р. Брэдбери) – просто песня для ушей, всем рекомендую именно слушать. 🩵О муравьях и динозаврах (Лю Цысинь) – альтернативная история эволюции живых существ. 🩵Город и звезды. Конец детства (А. Кларк) – про взаимодействие людей и инопланетян, я читал взахлёб. Вот такое я читаю, когда не работаю и хочу разгрузить мозг. В комментариях делитесь книгами, которые вдохновляют вас👇 А меня больше чтения заряжает работа) Кстати, напоминаю про свой бесплатный курс, на котором можно получить классную базу и определиться, подходит ли тебе профессия веб-дизайнера и моя энергия как преподавателя – переходи по ссылке и изучай🔥

Сейчас идёт стройка, периодически приезжаю смотреть, что тут происходит

Привет!) Хочу провести такой опрос. Проголосуйте за то, что считаете более ценным: ❤️ быстро выполнить работу и любой ценой уложиться в дедлайн ❤️ или делать упор качестве, ради которого иногда можно и подзабить на сроки. Выбирайте свой ответ, а в комментариях буду ждать ваши мысли по этому поводу 🔥- скорость 👍- качество

Летом я рассказывал здесь про Веру, которая начала путь в веб-дизайне в 2021 году, прошла моё обучение и постепенно выросла до 230к в месяц. А ещё параллельно стала старшим куратором на курсе в Varfolomeev.school. В марте этого года Вера вообще побила все рекорды и добралась до 500к!🔥 Она нашла клиентов на Профи.ру и вела 10-12 проектов одновременно. По её словам, самое главное было успевать делать всё вовремя. А как успевать? Для Веры ключевыми оказались опыт и грамотный тайм-менеджмент как в рабочих, так и в личных делах. А ещё постановка цели: В любой нише, наверное, до миллиона дойти можно вообще относительно спокойно. Что самое важное? Знать свою цель (у меня была цель 500к), то, зачем ты это делаешь – и делать. Ключевое всегда – это делать. А ещё очень важны навыки продаж: без умения продавать даже на достаточно высоких чеках можно застрять надолго. И никакого секрета нет. Вся фишка в том, что для таких цифр надо просто работать. Каждый день, даже когда очень не хочется, иногда даже на отдыхе в Эмиратах. Работать – и это обязательно окупится!⚡

Сегодня хочу поговорить о том, почему к трендам стоит подходить с критикой. Осторожно: в видео моя личная боль😅 [0:14] Недавно очередной раз просматривал проекты, сделанные на Тильде, и вот что увидел: дизайн сайтов пятилетней давности очень многие используют до сих пор. Что тогда, что сейчас на курсах обучают делать лонгриды с навороченной анимацией, которая не нужна клиентам и не помогает зарабатывать. Да, они выглядят круто, но делаются такие проекты чаще всего для других веб-дизайнеров, чтобы показать свои скиллы. [2:03] Но среди подобных проектов периодически выстреливает какой-нибудь стиль. Как раз лет 5 назад на всех площадках расфорсили неоморфизм, но в итоге он как-то не прижился. Почему? Потому что этот стиль отстой. Объясняю: 🩵эти проекты сложно делать новичкам без посторонней помощи; 🩵такие сайты со всякими тенями-капельками-эффектами очень много весят и тупо не работают в большинстве браузеров – кому это надо? 🩵в итоге неоморфизм оказался просто неудобным для вёрстки. Лично я делать проекты в этом стиле не рекомендую. Даже в 2020 году это было объективно не лучшим выбором, а сейчас продолжать этот старый тренд надо ещё постараться))

Это не просто буквы, которые каждому новичку надо пихать в портфолио в надежде, что заказчик увидит в вас разбирающегося специалиста)) Сегодня поговорим, почему UI без UX – это тупо красивая картинка: [0:48] Простыми словам, UX – это чёрно-белый прототип, а UI – его «раскрашенный» вариант, визуализация. [1:26] Если вы думаете, что дизайнеры зарабатывают на «раскрасках», я вас огорчу. Новичкам, которые видят нереальные сайты с какой-то фантастической анимацией и деталями, кажется, что веб-дизайнер просто обогатился на этом проекте. Но на деле всё не так. [2:04] С одной стороны, классный UI – это круто, с другой – далеко не всем клиентам реально нужна такая красота: у кого-то подобные эффекты не воспримет целевая аудитория, кто-то чаще сидит с мобильной версии , а они постоянно багуются, у других просто слабые компы. [2:39] Поэтому, чтобы доволен был в первую очередь заказчик (а не наше эго🤵), сначала надо прокачивать именно UX. Его даже делать гораздо проще: у себя на курсе я рассказываю про все этапы создания прототипа – от созвонов с клиентом до финального результата. Без UX вся работа веб-дизайнера будет просто красивым фантиком. [4:43] Кстати, раньше на прототип я тратил 1-2 часа времени с мыслями «Ой, а что там такого делать-то», сейчас время увеличилось до 3-5 часов, хотя мои навыки стали очевидно круче. Почему так? Потому что я понял, что чем проработаннее UX, тем круче итог. [5:45] Если пользователь, заходя на сайт, отвечает на все свои вопросы, получает нужную информацию и принимает решение о покупке / записи на консультацию / подписке и т. д., значит этот сайт работает. И это заслуга именно UX, а не вау-эффектов от UI. [7:01] Большинство клиентов платят именно за простые, но функциональные проекты с минимальным современным дизайном. Так что начинайте всегда с UX, а UI потом подтянется💪

🩵Первое, что всегда нужно – сервисы для сжатия: [0:15] Squoosh.app – для меня самый удобный ресурс для сжатия. Загружаешь изображение, выстраиваешь настройки – бинго. При желании можно подкрутить качество и процент сжатия. 🩵Сервисы для подбора иконок: они нужны, чтобы в проекте всё выглядело гармонично и дорого-богато. Какие рекомендую всем: [1:49] Iconer.app. Раньше очень часто им пользовался. Здесь всё интуитивно понятно, а ещё можно регулировать размер иконок. [2:43] Google Fonts – очередной полезный сайт от Гугл, ничего лишнего. [2:59] Figma community – сейчас это мой любимый ресурс. Вбиваем в поиске «icon pack» и получаем множество крутых вариантов для работы. Лично я пользуюсь постоянно. [4:12] Лайфхак для новичков, которые делают хорошие сайты, но почему-то не применяют навыки на создании презентаций: здесь можно искать примеры для своих коммерческих предложений. Пользуйся, чтобы упростить себе жизнь и получать больше кайфа от веб-дизайна!⚡️

Об этом недавно поделился Дима – мой тёзка и ученик курса по веб-дизайну. В нашей сфере он ещё новичок, до этого ему приходилось с 13 лет работать в разных местах, а на последней работе некрасиво кинули на 240к и уволили с маленьким расчётом. Для старта многовато всего, согласитесь? К веб-дизайну Диму привлёк мой ютуб, на котором, кстати, очень много полезной информации в свободном доступе. Если честно, при желании можно ворваться с ноги во фриланс только по моим роликам, но времени и сил это займёт порядочно. Дмитрий выбрал более спокойный путь и пришёл на бесплатник: Бесплатный курс очень хорош, голосовая обратка по домашкам от Димы вообще вызывала восторг – было очень приятно что известный медийный человек, отличный дизайнер общается с тобой лично. Он даже похвалил меня за одну из домашек – в целом очень расположила такая обратная связь. А после бесплатника решил развиваться дальше, и сейчас учится на платном тарифе, получает удовольствие и чувствует, что нашёл своё предназначение. Ну и стремится стать твёрдым специалистом и обрести почву на фрилансе, а мы даём для этого все условия🔥 P. S. Дима рассказал, что меня реально ставят в пример студентам в Челябинском МИДиС!!💪 Берите на заметку)

[0:01] Генерируем стандартную ситуацию: вы отдыхаете с друзьями и решаете заказать пиццу или роллы через сайт местной доставки. Чего мы обычно ждём от подобных сайтов: - самое вкусное и популярное должно быть в самом верху; - корзина всегда должна быть на виду в свободном доступе; - заказ должен оформляться максимально просто и быстро. [1:10] Первый сайт, который бесит, не вывозит эти требования. Ощущение, что дизайнер буквально на каждом шагу вставляет нам палки в колёса😐 Как исправляем: 🩵[2:04] неудобное левое меню с выбором блюд переносим наверх (как это сделано у Додо, например), чтобы всегда можно было выбрать категорию товара, даже если скроллишь ленту далеко вниз; 🩵[4:02] добавляем доступ к корзине, чтобы можно было редактировать заказ без танцев с бубнами в виде ввода номера телефона. Всё!)🔥 [5:31] Не надо изобретать велосипед) Весь функционал уже придумали, так что не стоит бояться изучать наших замечательных конкурентов: у них можно взять на вооружение основную логику, которую потом ты сможешь натянуть уже на свою структуру, свой текст и дизайн. И все будут счастливы. Особенно пользователи, которые смогут нормально заказать свою доставку и кайфовать))

Или история о том, что начинать можно из любой точки. Дарья – 35-летний кондитер из Турции. Раньше, ещё в Москве, у неё была своя студия, но после переезда всё изменилось: клиентов стало меньше, инфляция бешено съедала доход, а бесконечные поездки за ингредиентами и работа на ногах выматывали. А ещё Дарья призналась, что просто «устала от тортов» – так бывает, когда занимаешься делом, но оно перестаёт приносить результат и удовлетворение. Поэтому Даша решила заново искать себя... И нашла меня)) Диму нашла случайно, прошла уже одно обучение, но не в дизайне, не понравилось, дизайн всегда был интересен и Дима срезонировал, он настоящий, не показуха, чтобы купили курсы у него, и купила, не долго думая😂 ⚡ Дарья уже в процессе смены профессии, и её цель – 150 000₽ в месяц и возможность свободно планировать день так, как хочется. Ты тоже можешь попробовать себя в веб-дизайне на моём бесплатном курсе: оценишь свои силы, прочувствуешь на себе профессию и, возможно, загоришься ей так же, как я🔥

Эстет, Бунтарь или Любитель правил. Пройди тест и узнай! Веб-дизайн – это не просто работа, а отражение характера) Каждый дизайнер смотрит на мир по-своему: - кто-то обожает минимализм, - кто-то строит свои макеты по строгим правилам, - а кто-то рушит их и создаёт свои. Давай проверим, кто ты! Тест: 1. Какой цвет ты выберешь для фона сайта? А) Чистый белый – идеально для минимализма. B) Тёмно-синий – классика, которая внушает доверие. C) Неоново-розовый – хочу, чтобы сайт запомнился! D) Такой, который привлечёт большую конверсию и продажи. 2. Что для тебя главное в макете? A) Баланс и симметрия. B) Функциональность – всё должно быть понятно. C) Эффект "ВАУ" и отвисшая челюсть клиента! D) Продающие элементы – для быстрой окупаемости. 3. Как ты относишься к трендам в дизайне? A) Слежу, но придерживаюсь классики. B) Использую, если это помогает пользователю. C) Тренды? Я сам их создаю! D) Внедряю очень быстро, пока есть ажиотаж. 4. Какой формат работы тебе ближе? A) Сижу с ноутбуком в красивой кофейне. B) Работаю только из своего обустроенного кабинета. C) Могу дизайнить и в коворкинге, и на пляже с коктейлем, и на утро после вечеринки. D) У меня свой офис. 5. Попался неадекватный клиент: твои действия. A) Буду вежливо уточнять суть проблемы. B) Воспользуюсь заготовленным скриптом. C) Пошлю его на небо за звёздочкой… D) Продолжу работать: главное, чтобы заплатил. Результаты теста в закрепленном комментарии) Делитесь, что там у кого получилось? 😁

Откройте любую картинку в браузере или спросите нейронку о психологии цвета. Что там будет: красный – страсть, жёлтый –энергия, оранжевый – ещё что-то. И вот все новички воодушевляются и думают, что при создании сайта будут обязательно опираться на эти правила... А на деле всё не обязательно так. Смотрите: [0:58] Сбербанк – канонично зелёный, спокойный и гармоничный. А вот Альфа-банк уже чёрно-красный. Но разве мы воспринимаем его депрессивным? Не думаю. Т-банк жёлтый, банк Хлынов какой-то разноцветный и тёмный, Точка-банк вообще фиолетовый цвета Вайлдберриз😅 [1:50] Нужно понимать, что большие компании развили свои бренды далеко не только на психологической теории цвета. Наоборот – цвет нужен нам, чтобы с ним мы ассоциировали определённый бренд. [3:08] Задача цвета – якорями зацепить пользователя, чтобы нас запомнили из огромного количества информации. А уж какие это будут цвета – всё равно. [3:30] Исключение – ниша, в которой требуется определённый цвет. Ну и ещё если у клиента есть чёткий брендбук. А вся психология цвета лично для меня не работает. [4:50] Как я искал свои цвета? Всё просто: заходим на Пинтерест и подбираем то, что нравится. Можно искать сразу палитры цветов и смотреть, как они сочетаются друг с другом. В моём случае эти цвета – синий и чёрный. С ними я оформляю свои проекты и ассоциируюсь у аудитории. Вывод: не нужно ничего изобретать. Достаточно найти оттенки, которые подходят вашему бренду или заказчику и создают красивую картинку, а потом просто на протяжение долгого времени использовать их везде, чтобы создать у пользователей чёткое представление о компании.

Вот настолько Маше понравилось у нас на курсе, что она не просто присоединилась к коммьюнити веб-дизайнеров, но и стала частью моей команды🤝 Но до этого, конечно, был путь обучения. Сначала Маша изучала теорию, а для практики и дальнейшего заработка искала клиентов на Профи.ру. Она вспоминает, что боялась работать с заказчиками, но страх прошёл с первым клиентом – тут главное было начать. Мы сразу учим студентов не соглашаться на низкие чеки – Маша как прилежная ученица спорить не стала и с первых проектов старалась адекватно оценивать свой труд. Я бы даже сказал очень достойно оценивать: Буквально сейчас меня выбрали подрядчиком на ещё два сайта: два проекта с чеком 110 тысяч. Сегодня мы подписали договор и мне скинул оплату предыдущий заказчик: сайт 105 тысяч. У меня куча работы на два месяца вперёд! А ещё круто, что Маша теперь – не просто куратор на курсе, а ещё и та самая счастливая мамочка в декрете, зарабатывающая от 100к в месяц💅🔥

Выше читай пост с другими ошибками. Вы правильно заметили опечатку в заголовке – ответ принимается, хотя я изначально имел в виду не орфографию, а всё то, что связано с дизайном. Но главное, на что я хочу обратить внимание – разные шрифтовые пары. Очень важно, чтобы везде соблюдался единый стиль. Не надо мешать шрифты между собой, иначе какой-то из них будет смотреться так, как будто он ещё не прогрузился. Дополнительные заметки: 🩵Если для заголовка хочется взять какой-то супер витиеватый красивый шрифт, то количества текста для него лучше сократить до минимума. В противном случае от такой нарядности посетитель сайта может устать. Лучше делать проще! 🩵Чем больше заголовков, тем грязнее скорее всего будет смотреться макет. 🩵Даже мелкие ошибки накапливаются и портят впечатление от вашей работы. Так что веб-дизайнерам (особенно новичкам) обязательно надо обращать внимание на любую мелочь. Вывод – боимся не ошибок, а бездействия.

Вообще, дайте мне обратную связь, вам такой формат заходит ? Хочу для вас делать разборы, мини-уроки и челленджи Берете?)🔥

Сегодня я расскажу вам про Александра, который до обучения, с веб-дизайном был вообще не знаком. Сомнения в выборе деятельности – это нормально, были они и у Саши: «Решающим фактором послужило желание освоить какую-либо современную перспективную профессию, связанную с дизайном, а также очень высокое качество бесплатного курса, которое убедило меня в том, что я потрачу деньги с толком». Как видите, не обязательно сразу до безумия любить какое-то дело, особенно если для вас оно новое) Как и у Саши, обычно всё начинается с тщательных раздумий и анализа. В веб-дизайне Александра привлекала сама сфера и возможность самостоятельно выстраивать свой рабочий график. Преимущества, по-моему, огонь, главное – решиться. Наш герой это сделал и первым делом пришёл на бесплатник, а дальше всё закрутилось-завертелось😄 Не буду долго описывать его опыт (а идеальным и лëгким он не был). Свой первый заказ Саша получил от знакомых: он сделал добротный лендинг для мебельного магазина и заработал 10к. Так и начался его путь в сфере веб-дизайна. Сейчас Александр всё ещё учится, но уже стабильно зарабатывает и на практике убедился, что веб-дизайн ему подходит. От себя хочу добавить только то, что пробовать новое – классно, ведь оно может вылиться в крутую работу, заработок и внутренний кайф от процесса🔥