Список из самых популярных хештегов по теме #WEBДИЗАЙН

Прототип Моя специализация — это многостраничные сайты. Поэтому я почти всегда делаю прототипы. Всмысле кликабельные прототипы и статичные вайрфреймы, но прототип понятнее звучит для всего)) И это неотъемлемый этап. ⠀ Для меня странно, что некоторые дизайнеры прототип делают отдельной услугой. По сути клиенту-то он нафиг не сдался. Зачем платить за серые прямоугольники, если нужен дизайн?! ‍♀️ И зачем тогда делать прототип ради прототипа тоже не понятно, если можно без него обойтись. ⠀ Так вот, прототип в первую очередь нужен для того, чтобы сократить количество правок и время на разработку. На этом этапе прорабатывается контент, и где-какие элементы примерно располагаются. ⠀ Мои прототипы достаточно подробные, с одной стороны может показаться, что это не нужная работа. «Прототип же!» Но мне так проще Когда я рисую прототип, то уже примерно представляю, как будет выглядеть сайт. ⠀ ⠀ Я считаю, что удобнее делать прототип там же, где и дизайн. Поэтому некоторые элементы проще сделать сразу хорошо и на дизайне по минимуму корректировать, чем переделывать снова все с 0. Сетку и шрифт тоже стараюсь подобрать на этом этапе. Конечно иногда это все меняется в процессе ⠀ ⠀ Прототипы я делаю быстро, уже руку набила Работаю в sketch, никакие сторонние сервисы не использую. Даже начала создавать свою библиотеку символов для прототипов с формами, кнопками и прочими элементами, но так и не доделала ⠀ Всегда собираю интерактивный прототип, чтобы можно было все покликать. И клиенту так понятнее, и дизайнеру сразу видно, где что не хватает. ⠀ Раньше я пользовалась InVision, теперь сразу в Sketch. Это в разы быстрее, можно задействовать символы для перелинковки. А если делать дизайн приложения, то можно на телефоне смотреть прототип через Sketch Mirror. Есть еще moqups, но он для десктопа не удобный, только для дизайна приложений подходит. В фигме у меня почему-то интерактивный прототип глючил, съезжали элементы ‍♀️ ⠀ Вообще, если интересно, про инструменты могу рассказать подробнее, а то в один пост не влезает . . . . . . #вебдизайн #webдизайн #webдизайнер #дизайнсайта #дизайнсайтов #созданиесайтов #вебдизайнер #uidesign #uiux #uxpiration #olia_useful

Мудборд. Что такое и как сделать ⠀ Или визуальная подборка всякой всячины для вдохновения по конкретному проекту. Она отражает стиль и настроение, передает эмоции. Можно брать все, что посчитаете нужным: фото, иллюстрации, постеры, шрифты и шрифтовые композиции, текстуры и т.д. Не обязательно элементы сайтов. В карусели несколько вариантов мудборда (не мои). ⠀ ⠀ Для мудбордов я использую Pinterest или InVision. Про первый все наверняка знают. Его больше для себя, не для клиентов. А вот второй, как по мне, уже более презентабельный вариант ⠀ Вот несколько фишек InVision: ⠀ ⠀ ⠀ Можно оформить мудборд как презентацию ⠀ Можно вставлять не только картинки, но и шрифты, и цветовые палитры, и заметки ⠀ Можно выбрать типы сеток для контента ⠀ Удобно смотреть и с телефона ⠀ Можно оставлять комментарии и делиться мудбордом, чтобы делать его совместно ⠀ Количество проектов ограничено, но ненужные можно просто заархивировать. ⠀ И да, не советую отправлять клиенту мудборд файлом, никто не любит скачивать лишнее + лучше все на словах объяснять по возможности. ⠀ А вы делаете мудборды? Лично я не для всех проектов, но иногда составляю. ⠀ . . . . . . #вебдизайн #webдизайн #webдизайнер #дизайнсайта #дизайнсайтов #созданиесайтов #вебдизайнер #uidesign #uiux #uxpiration #olia_works #olia_useful

ВЕБ-ДИЗАЙН: С чего начать? . За первый пост в рубрике спасибо Кате @oushanya ! . Сфера работы веб-дизайнера - не только сайты. Можно заниматься дизайном соцсетей, создавать рекламные баннеры или двигаться в сторону моушн-дизайна (анимация для сайтов, соцсетей и рекламы). Веб-дизайнеру не не нужно уметь рисовать, гораздо важнее склонность к аналитической работе. . КНИГИ . Изучать веб-дизайн по книгам - не лучшее решение, информация в них устаревает быстрее, чем они выпускаются. . А вот смежные сферы, такие как типографика и колористика, лучше всего описаны именно в книгах. . Маст-хэв для начинающих дизайнеров: . “Живая типографика” Александра Королькова “Типографика и верстка” Артем Горбунов . САЙТЫ И ИНСТАГРАМ . Главные источники вдохновения и новых трендов для веб-дизайнеров: . dribbble.com behance.net . Их стоит просматривать по 15-20 минут в день, анализировать работы, подмечать удачные решения. Вдохновляться можно прямо в Инстаграм: . @ui__ux @welovewebdesign . КУРСЫ . Найти хорошие курсы по веб-дизайну сложно. По моим наблюдениям лучшая школа - WDI Design, у них грамотно построено обучение. . Обращайте внимание не на обещание заоблачных заработков, а на работы учеников. Если их нет - запрашивайте у менеджеров курса, сравнивайте с работами на Дрибле и Бихансе. . Обучение дизайну возможно по двум направлениям: визуальный дизайн (тем, кому интересен внешний вид сайтов и приложений) и проектирование интерфейсов (для тех, кому интересно продумывать структуру). . ✏РАБОТА . Поиск заказов - главная трудность для начинающих веб-дизайнеров. . На биржах платят мало, работать придется “на конвейер”, а заказчиков мало интересует качество. . Несколько заказов можно получить, если разместить пост на своих страницах в соцсетях. . Самый сложный, но эффективный вариант - собственный блог, в котором вы будете выкладывать свои работы. . Для начинающих полезен будет сайт dizkon.ru - там можно участвовать в конкурсах для дизайнеров и в случае победы получить деньги. . ⁉Остались ли у вас какие-то вопросы по этой теме? О какой профессии рассказать в следующий раз? . ❤Было полезно? Ставь лайк, сохранение и подписывайся на тег #фриланс_счегоначать

Сегодня только концептик и больше ничего К концу недели батарейки немного разрядились. Есть наброски нескольких постов, но доделать их уже ни магу... . . . . . . #вебдизайн #webдизайн #webдизайнер #дизайнсайта #дизайнсайтов #созданиесайтов #вебдизайнер #uiux #uidesign #appdesign #ui__ux #uiinspiration #dribbble #behance #olia_works

Как подбирать иконки для сайта ⠀ Почти на всех сайтах есть иконки. Без них прям никуда) ⠀ Несколько советов по подбору иконок: ⠀ Выбирайте иконки одного стиля, а еще лучше от одного автора. Например, в лайновых иконках нужно обращать внимание на толщину и характер контура, круглые или острые углы, прерывистая линия или нет. Наверное, это самая частая ошибка) ⠀ Иконки не должны быть похожи друг на друга, т.к. пользователи могут их просто перепутать ⠀ Для интерфейсов — простые и понятные иконки ⠀ Учитывайте общий стиль сайта и иконки подбирайте в соответствии с ним ⠀ ⠀ Иконками нельзя заменять текстовое описание или название ⠀ Не стоит делать все иконки уникальными. Для стандартных действий (сохранить, избранное, поделиться, скачать и т.д.) лучше брать привычные обозначения ⠀ Не нужно борщить с количеством, иначе пользователь может «потеряться» в таком многообразии ⠀ Если есть возможность, то иконки лучше использовать в векторе (svg), а если нет, то png, но точно не jpg ⠀ Не стоит делать низко детализированные иконки крупными, а детально проработанные — мелкими.⠀ ⠀ Я вот думаю, делать ли еще такого плана посты? Полезно или не очень?)) И если у вас есть какие-то вопросы или предложения, напишите пожалуйста ⠀ . . . . . . #вебдизайн #webдизайн #webдизайнер #дизайнсайта #дизайнсайтов #созданиесайтов #вебдизайнер #olia_useful

Интерактивный прототип ⠀ Начну со Sketch И дизайн и прототипы я делаю в нем. Но то же самое можно делать и в Figma. В чем фишка? Конечно, самое главное удобство, что все в одном месте. ⠀ ⠀ Если у вас многостраничный сайт, то для перелинковки страниц хорошо использовать символы. Например, есть меню. Его всегда лучше делать символом. Один раз проставили в нем ссылки, и в итоге все ссылки автоматом появились на всех артбордах. Дело 5 минут. ⠀ Небольшой, не очень очевидный нюанс. Чтобы при просмотре страница скроллилась, у артборда размер должен стоять не кастомный. Иначе скролл не сработает. Я выбираю обычно Pixel 1280х850. ⠀ ⠀ Еще одна фишка. Для айфонов есть приложение Sketch Mirror. В нем можно смотреть мобильные версии макетов. Но тоже размер артборда должен быть не кастомный. Ну и чтоб уж совсем нормально смотрелось, лучше выбирать под размер своего телефона) Дизайн приложений сразу на телефоне очень удобно демонстрировать. В фигме вроде нет такого или есть? ⠀ Еще весной начала делать библиотеку символов для прототипов, ну или ui kit. Знаю, есть готовые, но мне свое приспичило ‍♀️ Не доделала правда, но заготовками карточек, кнопок, форм и прямоугольников с крестом активно пользуюсь. Очень удобно + симпатично все получается Причем формы и кнопки и вообще все элементы адаптивные. ⠀ Прототипом можно делиться через Sketch Cloud. Другой человек может через браузер посмотреть макеты и покликать их. ⠀ До того, как в скетче появились прототипы, я пользовалась Invision. Кстати, будет удобно тем, кто работает в фотошопе. Куда приятнее макет по ссылке демонстрировать, а не файлами кидать Суть в том, что закидываешь в этот сервис jpg и перелинковываешь их вручную. Для небольших сайтов ок, а вот где много страниц — заморочно. Ну и количество проектов ограниченно. Одновременно вроде только 2 можно. ⠀ ⠀ Если есть вопросы, спрашивайте И если знаете еще какие-то фишки и способы, то поделитесь)) Figma у меня еще в процессе освоения, точнее привыкания ⠀ . . . . . . #вебдизайн #webдизайн #webдизайнер #дизайнсайта #дизайнсайтов #созданиесайтов #вебдизайнер #uidesign #uiux #uxpiration #olia_useful #olia_works

Подготовка макета к верстке ⠀ Оставляйте заметки в макетах или делайте отдельный гуглдок с комментариями и с описанием анимаций и эффектов на примерах других сайтов. В студии я обычно многое на словах объясняю, что хочу видеть в итоге. Если успеваю, то анимирую макеты в principle. ⠀ Удаляйте все лишнее из макета. Скрытых слоев быть не должно. Их могут не заметить при верстке. ⠀ ⠀ Иконки желательно в SVG. И вообще все векторное в векторе. ⠀ Наверное, я стала халявнее готовить макеты к верстке в Sketch. Слои я не переименовываю и не группирую специально, оставляю хаос как есть Вроде и так норм. Но в фотошопе заморачивалась с названиями и порядком. ⠀ ⚡️Гайд со всеми состояниями элементов⚡️ ⠀ Кнопки как минимум в 2-х состояниях: ⠀ 1. Обычное 2. При наведении 3. При нажатии 4. Неактивная кнопка ⠀ Поля и формы тоже имеют несколько состояний: ⠀ 1. Обычное незаполненное поле 2. При наведении 3. Неактивное 4. Обычное заполненное поле 5. С курсором, в процессе заполнения⠀ 6. Поле с ошибкой⠀ ⠀ Чекбоксы, радиобаттоны, формы с выпадающими списками тоже. Не забудь про ссылки, карточки и прочие элементы! ⠀ Если меню фиксируется при скролле — покажите как это выглядит. ⠀ Все попапы и всплывашки также нужно рисовать. ⠀ Не забудьте про fav-иконку! В формате png 150х150 рх. Это иконка, которая отображается на вкладке браузера. ⠀ И про картинку для расшаривания в соцсетях 1200 х 630 рх. Это когда вы кому-то отправляете ссылку на сайт в Vk или Fb, то к ссылке обычно прикрепляется картинка. ⠀ ⠀ ⠀ Верстальщики тоже люди и о чудо! с ними можно общаться и спрашивать, как и что лучше предоставить, в каких форматах. В общем закрыть все вопросы. И верстальщик тоже может сказать, где что не так, как лучше сделать и чего не хватает. ⠀ А еще, если вы где-то слишком замудрили и это можно упростить без ущерба для дизайна или сделать по-другому, то это тоже нужно обговаривать с верстальщиком. Он может предложить какое-то решение. У меня такое часто бывает. ⠀ ⠀ Дополните плиз, если я что-то забыла) ⠀ ⠀ Если полезно, поставьте лайк ❤️ . . . . . . #вебдизайн #webдизайн #дизайнсайта #дизайнсайтов #созданиесайтов #вебдизайнер #uidesign #uiux #uxpiration #ui__ux #olia_works #olia_useful

Мне не понравилось на биржах фриланса ⠀ Да-да, конечно я пробовала. Аж целый месяц (или 2, не помню точно) с Pro-аккаунтом. И я поняла, что это вот вообще не мое ⠀ Те, кто начинают искать свои первые заказы на биржах типа FL или Freelance ru, уверена на 95%, разочаруются. Это бесполезно, если нет портфолио. А времени впустую можно потратить очень много на ответы в проектах. ⠀ ⠀ ⠀ Ооо, кстати, ответы на проекты — это вообще отдельная тема. Жаль я тогда не делала скрины самых-самых. И смех и слезы. Неадеквата хватало как среди заказчиков, так и среди исполнителей ‍♀️ «Соцсеть за 2к? Да без проблем, сделаю за неделю. ТЗ есть?» Я утрирую, но примерно такое встречалось часто. ⠀ На тот момент у меня уже имелось несколько работ. Поэтому шанс найти там заказ все таки был. И я нашла. Счастье, что заказчик попался очень адекватный и дружелюбный, даже оставил мне хороший отзыв ☺️ Но это был первый и последний проект там. ⠀ ⠀ Самое забавное наверно то, что я умудрилась еще выиграть в конкурсе на нейминг, и мне просто так за пару слов заплатили 10к) ⠀ А вы работали/работаете на биржах? Или может искали там исполнителя? Если да, то поделитесь, как оно?) ⠀ . . . . . . #вебдизайн #webдизайн #webдизайнер #дизайнсайта #дизайнсайтов #созданиесайтов #вебдизайнер #olia_story

Такой лёгкий свадебный лендосик в журнальном стиле недавно делали в #prominado По задумке на нем очень много анимации, даже салют ) Поэтому хочу ещё сделать видео . . . . . . #вебдизайн #webдизайн #webдизайнер #дизайнсайта #дизайнсайтов #созданиесайтов #вебдизайнер #landingpage #wedding #olia_works