Задумывались ли вы, сколько денег уходит на создание рекламных баннеров? А ведь можно сделать их самостоятельно и главное — бесплатно. Сегодня расскажу, как создать эффектный баннер без опыта в дизайне.
Бесплатные программы и сервисы, в которых можно создать баннер
Онлайн-сервисы, которые не нужно скачивать:
Canva — простейший интерфейс, тысячи шаблонов, работа в браузере.
Supa — отечественный аналог Canva, фото- и видеоредактор с понятным интерфейсом.
VistaCreate (ex Crello) — похож на Canva, можно делать баннеры с анимациями.
Photopea — онлайн-аналог Photoshop, для продвинутых.
Figma — универсальный инструмент дизайна, подойдет тем, кто уже работал с макетами.
Banner Designer Pro — специализированная программа (базовый функционал бесплатный).
Если нет времени разбираться с настройками, поручите создание баннеров инструментам на нейросетях.
Примеры таких сервисов:
AI Banner — бесплатный генерация баннеров по текстовому описанию и URL посадочной страницы с ИИ. Быстро, просто, подходит для бизнеса. Есть встроенный редактор для доработки изображений.
AdCreative.ai — создает креативы для рекламных кампаний на основе оффера.
Этот способ изложения данных позволяет изучить большой массив данных, есть уровни вложенности (древовидная система).
Хочется ли делать это самому? Нет, есть же ИИ. Копался все утро, чтобы сделать детализированную карту с изучением английского языка (просто как пример выбрал эту тему).
Есть множество инструментов для этого, но все так или иначе мне не подошли. У меня было два основных варианта:
— Делать mind-map на любой языковой модели, потом импортировать файл (txt или markdown) в xmind (программа). Попробовал, все работает, но... сложно... долго, не то, что мне хотелось.
— Figma + Ai Beta. У Фигмы вышел свой ИИ, который может сделать очень многое, о чем я обязательно еще напишу. Но пока начнем с mind-map.
Второй способ гораздо более простой, да и визуально его проще будет адаптировать под любой формат. Другим плюсом будет то, что сама по себе Figma — очень распространенная программа, остановился на этом в общем.
Как сделать крутую диаграмму связей?
1. Воспользоваться любой языковой моделью (aistudio)
2. Написать промт следующего вида: "Мне нужен детализированный план по изучению Х-темы. На основе этого плана я составлю mind-map, сделай акцент на простоте и лаконичности, но не упустив важные детали"
3. Получить ответ, с которым нужно открыть Figma Ai и запросить сделать эту mind-map.
Важно! Figma Ai работает только на английском! Поэтому нужно переводить ответ от ллм на английский язык.
📌 Figma | Бесплатно, без подписок (но можно и оформить, если понадобится)
📌 Если кому интересно, то пишу про лучшие ИИ в своем авторском канале (ссылка в профиле)
Вот то, что у меня получилось в итоге.
Картинка очень крупная, одним скриншотом не выложить. Поэтому полная версия в тг (описание профиля)
Уверен, что Figma будет развивать это направление, поэтому ожидаем еще более крутых функций впоследствии.
В целом такой метод можно использовать для любых предметов, для изучения любых языков (в том числе и языки программирования).
🖐Привет, это Денис из NIXELE™! И сегодня вы узнаете
🔥Почему «красиво» — не значит «удобно», а также почему это можно опровергнуть...
📱Насколько в создании веб-дизайна не важен макет и почему на самом деле инструкцию придумали дебилы (или нет)?
🌭Из-за чего бутылка кетчупа это самый главный феил в дизайне, почему красивая картинка решает, а удобство и визуал – вообще не первое о чем стоит думать в веб-дизайне и наконец таки узнаем ответ на вопрос:
💯Кто он, этот ваш идеальный дизайн сайта?
Я решил начать с прогулки: свежий воздух и окружающая атмосфера натолкнули на одну интересную мысль когда я проходил мимо нового жилищного комплекса…
Смотрите, это логотип «Пятерочки» в одном из современных жк в Москве. Вроде бы обычная картина, но посмотрите внимательнее, можете открыть панораму и оглянуться вокруг🧐
«Пятерочка» в одном из домов современного жк на юго-востоке Москвы
Здесь в стильном и продуманном районе нет места ярким цветам - красному и зеленому, только стильный хай -тек. Однако если видишь что-то резко выдающееся, то это триггерит.
В вывеске этой «Пятерочки» есть очень важный смысл - она не выбивается из общего стиля жк, в котором находится. При этом не теряет своей узнаваемости. Это довольно простой, но емкий смысл, который мы сегодня попробуем на вкус⬇
📌Что же получается, «Пятерочка» осознает важность визуальной эстетики?
Все так, красивый визуал смотрится выигрышно и человек в большинстве случаев не станет жаловаться на трудности поиска данного магазина, если такие трудности действительно возникнут.
А это визуализация различия вывески на разном фоне(фасаде).
Поэтому здесь использовали простой цветной логотип без яркой подложки. Это делает магазин чуть менее узнаваемым издалека, но более привлекательным в окружающей обстановке, согласитесь. В конце концов это выглядит стильно.
Тогда я осознал, что проектирование не всегда самое важное и тратить на дизайн 16,5 дней точно не стоит. Визуальная составляющая зачастую имеет куда более важное значение перед планом. Получается все мои эти наброски не нужны были?
Мой почти семнадцатидневный макет. Все равно его потом переделывал…
🔹Эстетика как никогда важна, она приоритетнее макета, НО ключевое — смог ли пользователь выполнить нужное ему действие. Разберемся подробнее.
🤷♂Создание макета сайта это действительно бесполезное занятие?
Я сразу побежал домой изучать взаимосвязь макета и эстетики в веб-дизайне и вот что нашел:
Японские эксперты Масааки Куросу и Каори Кашимура в дизайн-центре компании Hitachi попросили оценить 26 сайтов 292-ух студентов факультета дизайна и психологии. Pезультаты показали положительные результаты в сторону эстетики дизайна: визуально более стильные и красивые сайты выбирали чаще, даже когда навигация ставила в тупик.
Это график кореляции удобства использования UX(левая шкала) и визуала дизайна сайта UI(нижняя)
Все же визуальная эстетика цепляет больше - она на первом плане. Я стал разбираться дальше: если сайт не имеет четкой структуры, то неудачный опыт использования сайта может обернуться тем, что юзер никогда больше не зайдет на данный веб-ресурс.
Об Этом уже говорит работа Флориана Гейгля и Кристины Лерман под названием «Оценка влияния смещения кликов и вставки ссылок в Интернете на навигацию».
В этом исследовании авторы анализировали, как визуальные акценты на ссылках (например, размещение в верхней части страницы) и добавление новых ссылок влияют на поведение пользователей при навигации по веб-сайтам.
Они пришли к выводу, что такие изменения могут существенно изменить маршруты пользователей, что подчеркивает важность продуманной навигационной структуры для эффективного взаимодействия с сайтом
🧐Именно поэтому дизайн может бесить. Красивый, но совершенно непригодный для удобного использования интерфейс может раздражать.
🔹Нужна успешная комбинация - эстетическое впечатление + легко совершенное плановое действие(визуал UI + макет UX). Вместе они подталкивают пользователя на следующий шаг и приводят к целевому действию, а также мотивируют к повторному посещению сайта.
👟Простыми словами - кроссовки должны быть стильными и соответствовать трендам, но самое главное — они должны быть удобными!
Кажется, что каким бы дискофмортым ни был макет(UX), всегда будет важна эстетика(UI) - тяга человека к идеальному невероятно велика!
🔑От сложного к простому - что такое UI/UX дизайн. Аналогия.
Представьте: вы собираете конструктор «Лего-техник», то есть механизм, из подвижных деталей(UX) и обычных блоков, создающих визуальную часть(UI).
Поворотные механизмы в виде шестеренок, троса и колес консруктора(UX) дополняет стильное сочетание желтого и черного(UI)
В вашем распоряжении любые детальки лего, но использовать можно конечное их число - это 100%-ный объем. И для каждого человека в данном фиксированном объеме будет свое идеальное и уникальное сочетание практичности и визуальной эстетики «шестеренок» и «обычных блоков».
👉Кстати, буду намеренно «ужирнять» сокращения UI и UX, а также относящиеся к ним слова, чтобы вам было проще разбираться с аналогиями и понимать их значение
С заботой - NIXELE™
Происходит наращивание новых нейронных связей и мы пониманием, что важно правильно сочетать UI и UX составляющие дизайна.
🎏Визуал по-разному привлекает разные категории людей
Все не так однозначно, нельзя сделать «супер» и «мега» и для всех сразу «в одном флаконе».
Дизайн-завод «Флакон» — креативное пространство в Москве, торгово-выставочный и офисный комплекс
Посмотрите, главное, что мы должны осознать из исследования Hitachi – это не то, что планирование элементов взаимодействия придумали дебилы и вообще, они тратят много времени на дизайн-макеты сайтов зря — нет! Эстетика может улучшить восприятие эргономичности даже если функциональность остается неизменной.
Воу! Эргономичность, - сложное слово, кажется мы можем обойтись и без него! Само слово означает приспособление предметов труда для комфортной и эффективной работы
Вы никогда не сможете нормально использовать новый телефон, пока не настроите размер значков, язык клавиатуры, уведомления и подсказки таким образом, как удобно именно вам для лучшей продуктивности
Юзабилити - слово-близнец эргономики, крайне важна, но ее польза зависит напрямую от первого впечатления, формируемого визуаломUI. Получается, часть времени из более чем двухнедельной работы стоило потратить на анализ аудитории, для которой делаю дизайн сайта.
Пример хорошего UI/UX дизайна(мое мнение)
🔹Ключевое на чем нужно сосредоточиться при разработке дизайна сайта – не UI и не UX составляющие, даже не их сочетание. Самое важное – понять что именно ожидает увидеть пользователь. Потому что от его потребностей и зависит правильное сочетание UI/UX.
«Если между ожиданиями клиентов от продуктов или услуг и их реальным дизайном существует большая разница, то мы вынуждены вступать в неравный бой, пытаясь заставить клиентов пересмотреть их устоявшиеся представления» Из книги Джона Уэлена «Дизайн пользовательского опыта»
Тесты, тестирование, тестики🔥 — Знаете почему программирование и веб-дизайн одно и то же? — Потому что это все IT? — спросите вы — Да, скорее всего вы правы! — Но почему?
Potomu chto никогда не знаешь кто он, этот твой пользователь))
Поэтому необходимо знать погоду сайта, дизайн которого создаешь. А осадки на ней - это user flow. Смотите, так выглядит погодный циклон на сайте:
Это тепловая карта сайта Guardian Unlimited
Подобная функция в «Яндекс метрике» называется «Вебвизор». Она помогает понять куда чаще нажимают пользователи и как работает визуальная часть сайта
Именно такую карту наша команда использовала при запуске тестовой версии сайта хоккейной лиги чемпионата кхл 3на3. На тепловой карте мы с командой отчетливо видели какие элементы привлекают пользователя и работают так, как и было задумано, а какие остаются без внимания и требуют UI/UX доработки.
При помощи user flow, составленного на старте разработки проекта, можно на этапе запуска также отследить путь пользователя, например до страницы покупки билетов. В нашем случае, наносить на user flow метки, показывающие, где пользователь проходит целую страницу до покупки билетов на матчи, вместо того, чтобы найти кнопку покупки билетов вверху главной.
📌Как повлияло на разработку веб-дизайна
Сейчас моя работа начинается с гугл формы и опросников и это не просто дополнительная опция в разработке веб-дизайна — нет! Наоборот — это серьезность и ответственность. Я осознаю важность первичного анализа потребностей не только клиента, но и целевой аудитории.
Моя гугл-форма для работы с клиентами
💡Важно тестировать свои программы, методы статьи, рефераты и другие работы, чтобы осозновать их недочеты. И веб-дизайн тому не исключение.
🔹Но работа над анализом аудитории это не только тестирование после создания дизайна, но и аналитика потребностей ца перед началом работы - фундамент и неотъемлемая часть создания любого продукта.
👽Важно не просто создавать дизайн, опираясь на тенденции эстетики и тем более тренды, но и тестировать потенциальную аудиторию, даже стараться не ограничиваться только ей.
Ведь цель дизайна сайта, не только замотивировать потенциального покупателя купить авто именно здесь, но и привести к целевому действию юзера, «случайно» попавшего на ваш сайт.
📌Как вы думаете, что вам может рассказать одна бутылка кетчупа?
Вроде бы ничего особенного, только если это не бутылка Heinz. Знакомтесь — мем, посвященный именно ей:
Слева - UI интерпретация кетчупа, а справа - UX
Важная мысь невероятно проста: не пытайтесь изобрести бутылку кетчупа заново, научитесь использовать ее правильно в зависимости от человека. С одной стороны - она выглядитт правильно и привлекательно в вертикальном положении, но ведь ее используют вверх ногами и это практично с точки зрения UX.
Эталона идеального дизайна сайта не существует, но существует план, который может помочь.
⚡8 советов от NIXELE™ по созданию идельного дизайна сайта
Чаще соприкасайтесь с прекрасным но не утопайте в нем - выделите на подбор примеров только час, разбейте их по группам и оттолкнитесь от чего-то одного
Стройте здание, начиная с фундамента, но не израсходуйте весь материал — сравнивайте макет со схемой построения успешных сайтов, но не крутите один элемент сликом долго
Проверенные решения на то и провренные, они работают — изучайте теорию и психологию, используйте нейросети и выбирайте с умом то, на чем будет посторен UI/UX дизайн
Нет ничего страшного в том, чтобы спросить у девушки или мамы какие цветы она любит - общайтесь с целевой аудиторией напрямую, чтобы узнавать предпочтения и ожидания своих «любимчиков»
Будьте открытее к общению — опрашивайте не только ца, но и своих друзей и знакомых. Порой люди, совсем далекие от темы, могут натолкнуть на интересные мысли
Не бойтесь сносить здание под корень — не бойтесь начать все с начала, даже если работу полностью придется стереть
Ставьте широкие видовые окна — делайте дизайн «прозрачным» в первую очередь понятным и доступным, и только потом красивым
Любите себя — прощайте себе даже крупномасштабные косяки и умейте найти силы на то, чтобы вернуться к работе, даже когда много правок
Теперь есть понимание того, что сначала необходимо проводить качественный обзор того, над чем планируешь «взять высоту».
🔹Визуал и практичность работают вместе, полагаясь на потребности пользователя. Знакомтесь: формула которую мы вывели
На самом деле - выбор за вами, и только вам решать каким будет ваш идеальный дизайн, но ключики к этому лежат через вашу чуткость, талант и усердный труд.
И кстати, без помощи тяжело потом что-либо искать по это статье. Поэтому для вас, ключевые тезисы я отметил вот так 🔹
С любовью и заботой - NIXELE™
🙌Спасибо за прочтение данной статьи, ваша активность помогает скорейшему выходу нового материала 👉Всегда рад обратной связи — не забывайте про чек-поинты в виде опросов выше и по ссылке) Увидимся в следующей статье😉
🖐Привет, меня зовут Денис, я занимаюсь разработкой уникального и современного дизайна для веб-сайтов, а также логотипов и презентаций. Дизайн должен быть современным - мода меняется быстро, а стильный сайт - залог увеличения конверсии и успеха бизнеса. В этом блоге я рассказываю про то, как стал дизайнером, как работаю с клиентами, интересные ситуации на работе: в рутинном потоке, на самом деле, встречается много всего увлекательного, что может быть интересно каждому.
Одна из моих первых работ по веб-дизайну
Веб-дизайнер - как и любой другой дизайнер, чтобы не говорили - очень крутая и нужная профессия . Суть ремесла заключается в следующем - сделать современно и стильно, главное - в меру. Но порой это бывает не просто, в том числе и из-за отсутствия вдохновения, которое необходимо для анализа тенденции веб-дизайна и создания неповторимых стильных брендовых вещей и атрибутики.
💢Сейчас многие бьются в истерике и возмущаются, мол, что там сложного - сидишь себе рисуешь, кайфуешь. Вообще, я тоже так думал по началу, но как оказалось, все структурно несколько сложнее. Многое в дизайне, как и в любой предпринимательской деятельности сильно зависит от того, кто твой заказчик. И тут не все всегда бывает мур-мур.
Кто-то не понимает, что сложного, в том, чтобы отрисовать страничку и всячески тебя исправляет, пичкает своими советами;
Другие - наоборот, осознают, что ограниченны во времени и поэтому стараются посодействовать фрилансеру - помочь, чтобы сэкономить свое время себе же, чтобы работа была выполнена быстрее и качественнее
И из раза в раз одно и тоже. Но спасибо всем тем, благодаря кому все далеко не так плохо
Кроме того, работа фрилансера на самом деле, чаще всего работа из дома. А это и борьба с желанием полежать на диване, у некоторых и ленту полистать, и отсутствие нормального режима сна - в целом это борьба с самим собой…тема абзаца, “роковая женщина” - госпожа самодисциплина. Вот у нас у фрилансеров она начальник. И главное, чтобы ей было не все равно на нас - она нас должна нас мотивировать работать и достигать целей. Порой эта мотивация со временем теряется, и не только у тех кто работает из дома.
📌Пример: мой первый заказчик
Я общался в телеграмме с клиентом - провели брифинг, все подробно обсудили. Далее я долго и очень кропотливо клипаю первую страницу сайта. Клиент, через несколько дней начинает волноваться - все ли хорошо, и просит показать “как там успехи”. Я на тот момент собрал только макет: безжизненная структура, я волнуюсь(потому что это мой первый заказ)😳 Присылаю проделанную часть работы на которую потратил достаточное количество времени:
Как же это круто, когда клиент хвалит тебя и искренне рад полученному результату! Хоть это и бы всего лишь макет
Запомнить следует одно - дизайн сайта в первую очередь должен быть понятным, и только уже потом вызывать эстетическое впечатление.
Мою искреннюю радость в тот момент возможно поймут не все, но чтобы уберечь читателя от самобичевания, которое, кстати говоря ни к чему хорошему не приводит, скажу что все гениальное - просто, поэтому просто начни с начала🧐
Наверняка слышали подобные фразы по типу “Самое сложное - это начать” или “По началу всем сложно, потом легче будет”. Все это правда, но и не без ложки дегтя. Ведь если бы после какого-то абстрактного "начала" протяженностью в X лет и X годов все становилось бы легко, то мы бы с вами наверное совсем в другом мире жили. Всегда, не только в начале будут трудности, без них совсем никак! Здесь выручит только самодисциплина и внимание к себе.
Я следующим образом подходил к работе: совсем не художник и не творческий человек, рисованием и искусством особо не увлекался - не знаю как сделать стильный дизайн. Решил взять себя в руки — просто постоянно пробовать и не останавливаться, поэтому
🔥Работаю по принципу - поставлю-ка кнопку вот тут справа - нет, фигня, попробую налево - тоже не очень, а если повыше - таак, теперь меняю шрифт, и - черт подери, да это же гениально!
Поэтому пробуйте себя! Нельзя ткнуть пальцем в небо и сразу выбрать то занятие, которое тебе понравиться и ты свяжешь с этим всю жизнь, нельзя пойти и купить конкретные кроссовки, ни разу их не померив, выбрать и посмотреть новый фильм, который на 100% понравиться, подобрать прическу, которая сразу тебе подойдет, я думаю, что вы меня поняли=) Госпожа дисциплина всегда говорит: просто пробуй, садись и делай!
POV: Иногда именно так выглядит работа дизайнера - надо перебрать все кизячковые варианты, чтобы понять, что первый, самый простой — бесподобен!
Клиент обещает мне еще много работы на будущее, так как у него несколько проектов. Но я снова теряю ощущение времени и дедлайн меня настиг. Заказчику конечно же это не понравилось, однако он подчеркнул - главное качественно, не страшно что пару дней придется подождать. По итогу все хорошо - заказчик доволен, мы выбрали палитру для сайта, проект завершен и передан в работу программисту!
Палитру смотрели также только для 1 страницы, так как она лицо сайта и должна выглядеть привлекательно
Дизайн сайта, даже без яркостей и навороченностей может выглядеть круто и притягивать людей, мой первый заказ, наверняка, не самый лучший, но все-таки подтверждение того, что “дизайн в первую очередь понятный и логичный, а потом уже красивый”.
📌Но, конечно же, время - деньги, и я угодил в черный список заказчика...
Поэтому больше, к сожалению, не получал заданий от данного клиента. Очень жаль - замечательный и понимающий человек с кучей работы, но уже для кого-то другого. Депресняк, полное расстройство, морально тяжело и грустно... В этом и заключается сложность: навык дизайнить + умение общаться с клиентом + работа над портфолио + умение держать дедлайн = тяжело; как сказал бы мой вузовский преподаватель по высшей математике: “это вам не шубу в трусы заправлять”
📌Но в работу резко подключается самодисциплина
Работаем дальше, качаем соц.сети, пополняем портфолио на Behance новыми работами и уверенно ползем из минуса в плюс, ищем новые заказы и просто дышим.
Снег за окном, скоро новый год... Однако, дисциплина, несмотря на все желание свалить из дому прогуляться по зимней Москве, заставляет работать, а усердный труд всегда вознаграждается и дает свои плоды.
Спустя время приходит успешный успех и я попадаю в команду разработчиков, работающих над созданием сайта для суббренда КХЛ - Чемпионата КХЛ 3X3! В первую очередь я получил бесценный опыт работы и познакомился с замечательными людьми, которые всегда готовы помочь и подсказать. Так, например, я всегда мог обратиться за помощью к коллеге-дизайнеру, которая постоянно была на связи, помогала и подсказывала
Научился работать с брендбуком - да это скучно, но организация серьезная и необходимо следовать бизнес-требованиям, поэтому совместными усилиями пришли к подобным результатам
По объему я проделал работу чуть больше, чем на самом первом заказе фриланса, но и заработал больше чем в 3 раза!🤑 Вот так, как раз перед новым годом я завершил крайний заказ и устроил себе маленький отдых.
Дизайн сайта в первую очередь должен быть понятным, и только потом вызывать эстетическое впечатление. Человека, который нам приятен внешне, как и сайт с привлекательным и понятным интерфейсом, — мы по началу судим по его обличию, и только потом узнаем характер и темперамент.
Дизайн сайта - стильный и современный, приятный глазу и понятный, лучше привлекает внимание клиентов и дает понимание куда тыкнуть чтобы посмотреть каталог товаров или узнать номер, по которому можно заказать услугу.
👉Не менее важно и то, что никогда нельзя останавливаться на достигнутом, нужно не отчаиваться даже при самых ужасных провалах и воспринимать их, как полезный жизненный опыт.
А когда время мотивации проходит, приходит время самодисциплины - любите ее и работайте с ней, это крайне полезно!
“Пробуйте, трогайте, влюбляйтесь, целуйтесь, путешествуйте - живите, ведь вы еще не понимаете, что ваша жизнь уникальна…” - науч-поп блогер Ян Топлес в одном из своих выпусков
Дубай — город, где технологии встречаются с роскошью, а дизайн превращается в искусство. Здесь открываются уникальные digital-решения, адаптированные под местные культурные особенности и высокий уровень ожиданий аудитории. Но в чем именно заключается особенность дубайского веб-дизайна? Почему он отличается от западных и европейских стандартов? Давайте разберемся.
1. Особенности digital-среды в Дубае
Высокий уровень цифровизации
ОАЭ стремительно превращаются в одну из самых технологичных стран мира. Здесь активно внедряются AI-решения, автоматизация и инновационные подходы к пользовательскому опыту.
Люкс-сегмент как стандарт
Большинство дубайских компаний работают с премиальной аудиторией, что накладывает отпечаток на дизайн — он должен быть элегантным, дорогим и эстетически совершенным.
Мультиязычность
Сайты в Дубае обычно работают минимум на двух языках: английском и арабском. Это накладывает технические и UX/UI-ограничения, например, необходимость поддерживать справа налево (RTL) в арабском языке.
2. Основные тренды веб-дизайна в Дубае
1. Минимализм с премиальными элементами
Чистый интерфейс, дорогие шрифты, много пространства и плавные анимации создают эффект роскоши.
2. AI и персонализация
Веб-сайты активно используют чат-ботов, AI-алгоритмы для персонализации контента и прогнозирование пользовательского поведения.
3. Визуальный акцент: 3D и видео
Качественные видеобэкграунды, анимация и интерактивные 3D-элементы делают пользовательский опыт запоминающимся.
4. Mobile-first подход
Огромный процент интернет-трафика в ОАЭ приходится на мобильные устройства, поэтому адаптивность и удобство мобильных версий на первом месте.
5. Геймификация
Добавление игровых механик и интерактивных решений в интерфейс, что повышает вовлеченность пользователей.
3. Сравнение с западным и европейским дизайном
4. Крупные бренды и агентства, формирующие digital-дизайн в Дубае
Некоторые компании, задающие тренды:
Emirates — премиальный UX авиасайта.
Emaar — продуманный веб-дизайн для недвижимости.
Dubai Holding — сложные корпоративные сайты с фокусом на пользовательский опыт.
Digital Gravity, WebCastle, CodeGuru — агентства, создающие digital-продукты мирового уровня.
Заключение
Веб-дизайн в Дубае — это сочетание эстетики, технологий и адаптации под уникальные культурные требования. Если в Европе и США важны удобство и инновации, то в Дубае ключевыми факторами становятся премиальность, AI-оптимизация и визуальная привлекательность. Развивая digital-проекты в ОАЭ, важно учитывать эти особенности, чтобы создавать успешные и востребованные продукты.
P.S. Если вы веб-дизайнер и хотите работать в Дубае, не забудьте о мультиязычности, визуальной роскоши и адаптации под мобильные устройства — это залог успеха в этом регионе!
Я автор телеграм-канала, где пишу о продуктовом дизайне, UX/UI, дизайн-системах и о моей рабочей рутине. Разбавляю новостями, отдушиной и кекесами.
Сегодня рассмотрим трепетные вопросы для новичков и подумаем над ответами на них в цепочке следующих постов.
С чего начать? Часть 1
Это очень обобщённый вопрос. Как и любую большую задачу, её проще декомпозировать. По небольшим шагам нам проще будет воспринимать и оценивать каждый этап.
В первую очередь я делюсь своим опытом, общими наблюдениями и опытом знакомых дизайнеров.
🌟 Соберём информацию
Спросите себя: — Какой результат от обучения я ожидаю? — За какой период я хочу добиться этого результата? — Какие у меня на это есть ресурсы? — Что может мне помешать?
Чем больше вы сгенерируете вопросов и ответите на них, тем детальнее вы будете представлять картину. Это такой же дизайн-процесс, как и у опытных дизайнеров в крупных компаниях.
Также стоит помнить, что мы не всегда отталкиваемся от чёткого плана, но и действуем в угоду человеческого фактора. И это нормально 💜
Например, в моём случае обучения у меня не было этого плана. Я даже не понимал, к какому результату я стремлюсь. Я просто впитывал информацию и делал то, что мне нравится, не заметив, куда оно меня привело. Сейчас я понимаю, что если бы я хоть чуть-чуть задумался и позадавал себе вопросы, это сэкономило бы мне кучу времени и сил. Со временем вы поймёте, как найти к себе подход. Вся наша жизнь — эксперименты.
Часть 2
Допустим, вы уже задали себе необходимые вопросы и ответили на них. Теперь нам необходимо:
Определить достижимые цели
Сформировать личный план по развитию
Продумать этапы
Структурируем данные, чтобы нам было проще с ними работать
🌟 Определим достижимые цели
Из ответов на вопросы это:
— Научиться в дизайн простых интерфейсов за ~4 месяца — Начать зарабатывать через 4 месяца
Дополнительные вводные:
— Может заниматься обучением 2 часа в день в среднем — Есть отложенные деньги на курсы — Молодой, скорее всего, умеет искать информацию в интернете — Не факт, что усидчивый — Есть вероятность, что в любой момент прервёт обучение. Т.к. сам не понимает, насколько ему интересен дизайн интерфейсов
💎 Главный навык для старта 💎
🔍 В дизайне есть много требуемых ключевых навыков. Одним из них является умение искать информацию самому. Поэтому мы пошли в поисковик, нашли пару полезных статей и чатов в telegram, позадавали вопросы AI.
💡 Проанализировав информацию в разных источниках, мы обнаружили, что научиться дизайну простых интерфейсов за ~4 месяца можно, но это будут очень поверхностные функциональные знания.
💬Также в телеграм-чатах подсказали, что лучше не начинать с фриланса, т.к. это оттягивает процесс качественного обучения и лучше сразу устроиться в компанию. Поискать курсы и менторов.
Однако, чтобы устроиться в компанию, нашему герою, вероятно, не хватит опыта, который он сможет получить за такой короткий период. По времени мы также имеем ограничения и на текущем этапе менторов пропустим. С помощью этого этапа обучения мы как раз сформируем необходимую базу вопросов, прежде чем идти к ментору с абстракциями.
🌟 Сформируем личный план развития
1. Учимся 4 месяца
Мы поняли, что этого достаточно для начального этапа с таким сроком
2. Выбираем самообразование
У нас есть накопленные деньги, но курсы могут оказаться неинформативны. А структурировать информацию для достижения цели мы сможем сами. Также будет обидно, если дизайн не про нас, а мы отдали большие деньги.
3. Через 4 месяца ищем подработку
Работу в компании вряд ли мы найдём + нас интересует именно доп. заработок. А вот зайти на какую‑нибудь фриланс биржу можно. Там не всегда важен опыт,. Главное себя продать.
Часть 3
🌟Этап 1. Изучаем инструмент Figma
Для этого идём, например, на Behance. Скриншотим работы и пытаемся отрисовать 1в1. Пока что погружаться в теорию нет смысла. Берём только сайты и их адаптивы. Для изучения iOS HIG и Android MUI нам времени не хватит. Поэтому повторки Android и iOS экранов не рисуем.
Гуглить мы всё ещё не разучились. Ищем ответы на вопросы в браузере, youtube и др.
🌟Этап 2. Нам нужен осознанный дизайн
Как только мы поняли, что уже довольно быстренько можем отрисовать 1в1 по примеру, идём за теорией. Для успешного закрытия задачек нужно понимать, что мы делаем, каким образом и для чего.
1. Изучаем все стандартные интерфейсные web-элементы и принципы отрисовки web-интерфейса, его адаптивность
Закрепляем на практике
2. Изучаем типографику, вёрстку, композицию, визуальную иерархию, цвет
Всё, что изучили в теории, сразу применяем на практике. Для это лучше уже попробовать отрисовать свой макет по выдуманной задаче. Так вам будет что исправлять)
🌟Этап 3. Учимся структурировать работу
Эти знания позволят нам достичь результатов в поставленных задачах, повысят скорость работы. Поэтому знакомимся с дизайн-мышлением, дизайн-процессом и его фреймворками. Берём необходимый минимум для изучения. Сюда входят:
Поиск и формирование первичных данных:
— Брифинг — Изучение предметной области — Поиск конкурентов — Подбор эвристик
Определение фактических данных:
— Эвристический анализ — Анализ конкурентов — Пользовательские истории — Схема информационной архитектуры
Дизайн:
— Пользовательские пути — Макеты низкой детализации — Макеты высокой детализации
Чуть позже я опубликую дизайн-процесс в телеграм-канале, который я подготовил для продуктовых дизайнеров. Там вы как раз сможете найти перечисленные фреймворки.
🌟Этап 4 Формирование портфолио
Здесь, я уверен, вы сможете найти всю информацию сами :)
💎 И ещё раз: теория ➔ практика. Всегда. 💎
Также старайтесь не придумывать велосипед. Почти всё о чем вы подумали, уже кто‑то сделал до вас)
Сам пользуюсь и всем советую . Его можно взять за основу для дальнейшего развития. Но только после всего описанного выше. Этот роадмап предоставит вам дальнейшие вызовы и правильный курс развития.
📂 Рекомендуемая литература:
1. Типографика и вёрстка. Артём Горбунов. 2. Теория цвета. Иоханнес Иттен. 3. Пиши, сокращай. Максим Ильяхов. 4. Сожги своё портфолио. Майкл Джанда. 5. Новая типографика. Ян Чихольд 6. Дизайн привычных вещей. Дональд Норман. 7. Психбольница в руках пациентов. Алан Купер.
Это моя первая статья на Пикабу. Буду благодарен за обратную связь в комментариях и поддержке реакциями ❤
Стал изучать figma и пока ещё не понял, я же правильно понимаю, что экспортировать можно только картинки? У меня сайт с нуля написан, на html,css,JS и я пока ещё не понял, как сделать те же кнопки активации переключения, или чек бокс галочку ставить. Хотя предположение, что просто менять картинки активного чекбокса и все.
Вопрос вот в чем. В Figma сделал фон 1920*1080 в css установил адаптивность для маленьких экранов и теперь фон тупо обрезается. Фон прописан как background img. Подскажите как адаптировать все это под разные экраны, плюс на ноутбуке на мониторе фон тоже обрезается
