Skip to content

Свой сайт знакомств #1: рисуем первый макет в Figma

Создаем первый макет сайта знакомств в Figma с акцентом на честность и удобство использования.

Key Takeaways

  • Сайт знакомств должен быть честным и избавленным от неактивных анкет и ботов.
  • Фильтрация и сортировка — ключевые элементы для удобного поиска.
  • Минималистичный дизайн без лишних изображений и навязчивых функций.
  • Отказ от традиционного чата в пользу быстрого обмена контактами.
  • Автоматическое удаление неактивных анкет повышает качество базы пользователей.

What the video covers

  • Автор начинает новый проект — сайт знакомств, который будет честным и удобным для пользователей.
  • Основная идея — избавиться от множества неактивных анкет и навязчивого свайпинга.
  • Проект разрабатывается в Figma, начинается с создания страницы поиска с фильтрами и сортировкой.
  • Планируется минималистичный дизайн без излишних изображений и пошлости.
  • Обсуждается отказ от традиционного чата в пользу быстрого обмена контактами.
  • Важным элементом станет фильтрация, чтобы пользователи не тратили время на ненужные анкеты.
  • Предусматривается автоматическое удаление неактивных анкет через 30 дней.
  • Верхнее меню будет содержать разделы «Моя страница», «Меня смотрели», «Друзья по интересам» и логотип.
  • Автор хочет создать уникальный и честный сайт знакомств, который решит реальные проблемы пользователей.
  • Проект будет дорабатываться и улучшаться на основе обратной связи и новых идей.

Chapters

  1. 00:00Введение и постановка задачи
  2. 01:52Создание первого фрейма и страницы поиска
  3. 04:21Фильтрация и цветовая палитра
  4. 06:28Минималистичный дизайн и отказ от изображений
  5. 09:18Блок 'О себе' и структура анкеты
  6. 11:20Группировка элементов и критика существующих сайтов
  7. 13:08Меню и навигация сайта
  8. 18:43Итоги и дальнейшие планы по проекту

Answers

Questions about this video

Почему автор решил отказаться от традиционного чата на сайте знакомств?

Автор считает, что чат задерживает пользователей в долгих диалогах, вместо того чтобы быстро обменяться контактами или социальными сетями, что более эффективно для знакомства.

Какие особенности фильтрации предусмотрены в проекте?

Фильтрация должна быть максимально подробной, чтобы пользователи не тратили время на пролистывание ненужных анкет, с возможностью учитывать предпочтения и исключать неподходящие варианты.

Как проект решает проблему неактивных анкет?

Предусмотрено автоматическое удаление анкет, если пользователь не заходил на сайт в течение 30 дней, чтобы база оставалась актуальной и чистой.

Full Transcript — Download SRT & Markdown

00:01
Speaker A
Добрый день, дорогие подписчики. Я сейчас открыл Фигму, и, как вы уже догадались, мы будем начинать с вами новый проект. Проект будет в дейтинг-сфере, то есть мы с вами попробуем сделать идеальный сайт знакомств. Сайтов знакомств очень много на самом деле.
00:29
Speaker A
И вот я вам скажу, что мне ни один из них не нравится. Например, в каком-то приложении вам нужно свайпать большое количество анкет просто впустую, в перемешку с ботами. В каком-то приложении вы вынуждены писать в неудобном чате.
00:55
Speaker A
Я честно не понимаю, для чего это всё делается. Нет, я, конечно же, понимаю, что скорее всего эти сайты были сделаны не для того, чтобы находить новые пары, помогать людям создавать ячейки общества, а просто для того, чтобы собирать аудиторию и потом её всячески монетизировать.
01:20
Speaker A
Ну, мы же с вами попробуем сделать честный сайт знакомств, где не будет анкет неактивных, где соответственно будет чёткая фильтрация по критериям, где не нужно будет проходить и свайпать большое количество ненужных анкет, скажем так. Вот и надеюсь, что там никто не будет спамить, и все будут использовать его по прямому назначению.
01:52
Speaker A
Так, ну первым делом я создал, получается, фрейм. Начнём, наверное, с самой очевидной страницы, то есть мне кажется самым очевидным, что у нас должна быть страница поиска.
02:25
Speaker A
Так, почему меня ничего не двигается? Так, секундочку. Давайте удалим. Так, страница поиска должна быть на первом месте. Так, десктоп выбрал, хорошо. Почему не перемещается? Попробуем переместить. Нет. Так, хорошо, выше. Если в ней его расположить.
03:17
Speaker A
Так, ещё раз. Мне что, нужно создать фрейм? Фрейм я, получается, делаю десктоп.
03:49
Speaker A
Дальше что? Так, а тут он прижимает почему-то сюда. Хорошо, мы вот этот фрейм тогда убираем. Может быть, при создании была ошибка. И назовём соответственно с вами первый листочек — страница поиска. Страница поиска, поиска.
04:21
Speaker A
Так, как я вижу страницу поиска, очевидно слева у нас должна быть какая-то сортировка и фильтрация. Тут бы я хотел видеть наибольшее количество фильтров для того, чтобы как можно меньше пролистывать ненужных анкет. Цвета, наверное, будем брать какие-то стандартные, то есть что-то вот синее, может быть где-то розовенькое. Посмотрим.
04:50
Speaker A
Да, то есть мы же сами странички можем менять, и никаких проблем в Фигме у нас не будет это сделать. Так, вот тут, наверное, блок поиска. Дальше нам очевидно нужен блок с анкетами.
05:30
Speaker A
Я, кстати, честно не понимаю, для чего вот эти свайпы. Почему, допустим, добра до активной анкеты, я должен просвайпать большое количество страниц? Нене. Вот искренне, вот даже непонятно, даже обидно за время, которое, вот, соответственно, потрачено на вот эти вот все действия.
06:03
Speaker A
Так, я думаю, два интерфейса нам сделать: один пускай будет женский, второй мужской. Ну ладно.
06:28
Speaker A
Так, тут соответственно что? Опять же я хочу, наверное, в этом проекте вернуться к истокам и сделать его максимально не пошлым. Да, то есть возможно даже это будет проект, в котором мы не будем использовать никаких изображений, потому что, ну, а к чему?
07:02
Speaker A
А зачем? Опять же по поводу чата. Я тоже очень сильно сомневаюсь, нужен ли чат в этом приложении, потому что, наверное, для сайтов знакомств логично побыстрее пользователям дать обменяться данными, да, или какими-то социальными сетями.
07:49
Speaker A
А вот их мариновать в диалогах, чтобы они ждали, когда кто-то там ответит, кто-то зайдёт, — болтовня. Напишем, замечательно.
08:30
Speaker A
Так, дальше, дальше, наверное, должна быть некая информация о человеке, да? Ну вот, давайте мы тоже... Так что тоже пускай будет двадцать четвёртый, но уже поменьше, допустим. Тут сколько? Угу.
09:18
Speaker A
Так, тут возможно какой-то блок о себе, пускай, то есть что мы тут делаем? Блок о себе. Блок о себе, шрифт, наверное, можно поменьше сделать, да? Ну пускай будет двадцатым.
09:39
Speaker A
Блок о себе, какой-то текст внутри, очевидно. Вот та вот информация о себе. И справа что? Может быть, справа, наверное, может быть кнопочка "Подробнее". Да, "Подробнее", чтобы изучить уже анкету полностью. Так, как-то так. Цвета опять же могут у нас с вами быть.
10:06
Speaker A
То есть мы никуда не торопимся. Я думаю, это не последний вариант нашего дизайна, да, с которым мы потом... [музыка] соответственно изучим анкету. Так, изучить анкету. То есть, что я говорил, это очевидно. Это не последний вариант нашего сайта, да, то есть мы будем его постоянно дорабатывать, может быть что-то улучшать. Вот.
10:49
Speaker A
Ну вот уже у нас в принципе вот такие анкеты. Я бы хотел, вот правда, блок о себе. И очевидно, что никакого свайпа нам тут с вами даже близко не нужно. Пожалуйста, вот адекватный сайт. Тут может быть и фотография, кстати, вписаться хорошо слева, а может быть и не вписываться. Пока мы делаем лишь небольшие наброски. Да.
11:20
Speaker A
Так, вот кстати, пока мы делаем, давайте вот это вот все блоки мы с вами объединим в одну группу. Нет, с нижней. Да, вот так, вот так, так, так, так, в одну группу нам нужно. Так, анкета, анкета. Так, назм соответственно. Всё, что мы сверху, мы можем всё удалить. Что правда надоело.
11:47
Speaker A
Вот то, что сейчас у нас существует на рынке, пользоваться этим невозможно. Опять же, почему? Для того чтобы менее как-то ранжировать в списке, нужно обязательно приобретать премиум-аккаунт. Да, мужчин мне вообще жалко.
12:13
Speaker A
То есть на этих сайтах знакомств, если допустим женщина может получать очень много реакций, потому что мужчина, как обычно, пользуется таким приложением: он его открывает и начинает свайпать всех подряд, и потом уже смотрит, кто ему ответит.
12:38
Speaker A
То женщины же соответственно время на свайпы не тратят, они либо изначально выбирают, либо смотрят, кто им показал какую-то реакцию. Да, вот это, я вам скажу честно, выглядит очень странно. Ну даже и нечестно с какой-то точки зрения.
13:08
Speaker A
Так, хорошо, страница может выглядеть вот таким вот образом. Дальше фильтрация, фильтрация опять же для того, чтобы не свайпать много страниц, у нас должны быть чёткие фильтры.
13:46
Speaker A
Опять же, если вы пользовались дейтинг-приложениями, напишите мне, пожалуйста, в комментариях, какие это могут быть фильтры, поскольку сейчас мы с вами только делаем каркас вот этого сайта. Мы с вами можем разработать фильтры. Замечательно, фильтры плюс.
14:43
Speaker A
Я бы хотел, конечно, вот на сайте сделать такие фишки, например, если ты не заходишь в течение 30 дней, чтобы анкета автоматически удалялась, вот чтобы было вот непонятных историй, когда там, например, девушка уже вышла замуж, родила пятерых детей, анкета до сих пор где-то там висит и мозолит глаза.
15:38
Speaker A
Вот чтобы такого не было. Так, надо сделать хитрое правило, по которым уже соответственно и сайт бы функционировал.
16:30
Speaker A
Так, тут у нас что? Сверху может быть какое-то меню, очевидно, да? Опять же, над разделами, наверное, подумаем, какое это может быть меню. Меню, меню, меню.
17:07
Speaker A
Давайте вот такой цвет поставим, то есть и соответственно сверху блоки, например, "Мой аккаунт" пускай будет, "Моя страница", "Моя страница" — раз, то есть эта страница пользователя, да, раз. Потом...
17:45
Speaker A
А давайте не "Друзья", а так "Поклонники" назовём, наверное. Нет, не поклонники. В общем, как-то нужно назвать страницу "Меня смотрели" и отображать в пользователях. Дальше что ещё может быть? "Меня смотрели", "Друзья по интересам". Инте мы вот се набрасываются.
18:19
Speaker A
Так, "Меня смотрели", "Друзья по интересам" — название тоже мы соответственно сделаем потом со временем. Так, 1, 2, 3, правая кнопка мыши. Так, "oup section" назовём "Верхнее меню". Так, "Верхнее меню", замечательно.
18:43
Speaker A
Верхнее меню, и сверху, наверное, у нас должен быть какой-то логотип с названием. Давайте пока вот так назовём, пока назовём просто "Сайт знакомств", поставим большой шрифт и вот переместим. Понимаю, да, что проект возможно где-то не будет таким прибыльным, каким он был. [музыка]
19:09
Speaker A
Бы соблюдая стандартные механики, я это прекрасно понимаю. Я также догадываюсь, что скорее всего им не так будет интересно пользоваться, как каким-то другим, но мне просто хочется, чтобы вот этот сайт решал элементарную проблему знакомства двух людей.
19:52
Speaker A
И с точки зрения как программист могу эту проблему решить, почему бы мне её не решить? Так, так, так, так, цвет какой попробуем? Гма, конечно, очень удобный инструмент и хороший.
20:24
Speaker A
То есть даже без каких-либо дизайнерских навыков, вот я, получается, разработчик, могу взять и сделать неплохой интерфейс. Ну вот сходу просто расставляя геометрические фигуры на экране. Сортировка, если конечно за дело берётся дизайнер профессиональный, то макеты становятся в разы круче.
21:07
Speaker A
Так, ну всё, я вижу, что в принципе вот в принципе уже что-то напоминает.
21:39
Speaker A
сравнивать двух разных людей тут Конечно можно было бы блог сделать но лучше лучше людей разных не сравнивать А вот если вы открыли человека попытались с ним связаться если он не отвечает вы тогда уже идёте в новый поиск вот как-то так Ну опять же не связаться
22:04
Speaker A
да э связаться что я подразумеваю я не хочу делать какие-то внутренние коммуникации внутри сайта Зачем давайте мы просто э дадим людям возможность обмениваться ссылками на их социальные сети то есть вот тут вот могут у нас с вами быть различные блоки для связи с
22:36
Speaker A
социальными сетями Да так опять всё улетает связаться раз тут соответственно может быть что может быть иконка Да какого-то приложения дальше ме аккаунт и так далее немножечко мы оставим место под реклам Потому что жизнь уже научила что Проще сразу заложить рекламные места на
23:12
Speaker A
сайте чем потом их пытаться где-то искать Тут у нас что с рекламка Ну тут Наверное реклама должна быть где-то Вот тут сверху можем да давайте над сортировкой будет рекламный блок небольшой Вот вот тут вот то есть пользователь будет на Первом экране
23:40
Speaker A
смотреть небольшой рекламный блок вот до сортировки вот так вот раз попали нет опять же потело уже при какой-то при более детальной вёрстке но пока вот я вижу это вот таким вот образом то есть вот тут вот блок Да 86 Конечно такого
24:13
Speaker A
формата нету рекламного то есть мы его ещё видимо блок ещё ниже спустится вот таким вот образом Вот как-то так и рекламные блоки лучше расставлять в разных местах Так какой странички ещё не хватает а так страничка фильтрации есть а
24:46
Speaker A
страничка поиска есть наверное нам нужно окошко регистрации Да самое первое так вот это мы что это мы перемену Давайте на странице чего страница пользователя так вёрстку будем делать также на бутстрапе как обычно чтобы максимально ускорить процесс то есть блоки
25:18
Speaker A
[музыка] будут красивые под мобилку адаптированная так копия Ну и ставим в начале Я думаю для того чтобы стартануть проект нам достаточно будет нарисовать лишь вот пару страниц и всё Ну и конечно хотелось бы не то есть не просто какая-то сухая
25:45
Speaker A
анкета а возможно анкета составленная в виде теста интересного вообще Напишите в комментариях Что вы думаете по поводу такой разработки вообще зайдёт зайдёт Нужна ли она мне кажется что нужна потому что правда такое большое количество приложений такие бюджеты крутятся в проектах и нет ни одного
26:13
Speaker A
нормального сайта Ну вот ни одного вот действительно вот мужчинам получается бесплатных аккаунтов вообще там делать нечего девушкам же в этом плане попроще но опять же кто вам пишет как вам пишет доходит до такого маразма что получается некоторые девушки даже пишут
26:37
Speaker A
что там рост мужчины не ниже там 190 Ну а зачем вот ээ откручивать ээ вот этим девушкам анкеты парней которые пониже Когда можно сделать просто фильтр То есть если настолько принципиально или вот например э у мужчины могут быть какие-то определённые
27:05
Speaker A
предпочтения но не нравится ему допустим курящая женщина Да он же может просто поставить фильтр вот фильтр поставить там здоровый образ жизни интерес или что-то подобное то есть вообще в принципе мы можем убрать вот такие какие-то вещи решать моментально чтобы люди просто не тратили
27:37
Speaker A
своё и чужое время на это вот всё но почему-то Ну я опять же говорю Да я догадываюсь почему владельцы сайтов так делают Почему Потому что просто они хотят зарабатывать на платных подписках и платном функционале Вот то есть и ничего тут такого
28:08
Speaker A
удивительного нету ну хотелось бы сделать сервис для людей нормальный с нормальным функционалом который Реально работает и решает проблему знакомств так Нарисуем две кнопочки Нет давайте сначала напишем сверху регистрация так постоянные боты тоже надоели то есть действительно чтобы добраться до живой
28:45
Speaker A
анкеты регистрация да правильно написал регистрация может быть на главной странички Вот такая Да штучка дальше логин пароль да вот тут вот мы соответственно все поля сейчас попробуем таким вот образом все формочки возможные сделать а потом уже будем смотреть
29:19
Speaker A
А соответственно как их мы будем размещать уже на реальном проекте может быть Кстати кто-то мне в комментариях предложит очень хорошую идею и мы её с вами реализуем да Раз уж взялись за такой проект давайте сделаем его по-человечески хорошим
29:44
Speaker A
актуальным с классным функционалом раз так Ну тут соответственно логин тут пароль ниже кнопочка должна быть войти Да шрифты опять же скорее всего будут меняться вот такую возьмём с цветом Мы тоже ещё поиграемся может быть в тёмную сыграть так
30:31
Speaker A
пробуем опять же я э обычно Что обычно потом свою работу смотрю через пару часов может быть даже на следующий день и появляются какие-то новые идеи по функционалу так ти Почему не не хочется делать переписки внутри чата но опять же
31:05
Speaker A
то есть многие люди регистрируются на сайтах и потом там не сидят и таким образом появляются пустые анкеты вот ну формочка Конечно страшно получилось Ну ладно пока оставим над структурой ещ поду То есть это правда Это вообще стартап стартап если например
31:34
Speaker A
прошлый проект мы как сделали мы сделали по аналогии с нескольких досок объявлений то в этом проекте Я хочу прямо сделать уникальную механику которой ни у кого больше нету так три окошка нарисовали посмотрим А даже я думаю попробуем наверное
32:03
Speaker A
набросать Прототип на HTML опять же я жду от вас комментарии предложения чего вам не хватает а в функционале уже существующих сайтов а с какими трудностями вы сталкивались вот я всё с удовольствием прочитаю и попытаюсь внедрить э соответственно все ваши предложения вот
32:31
Speaker A
в этот проект аэ подписывайтесь на канал ээ ставьте лайки пишите комментарии и Напоминаю что вот поддержать э вот эту всю деятельность аэ Вы можете [музыка] аэ подписавшись - на наше сообщество в бусте э И тем самым вы сможете ускорить и помочь
33:03
Speaker A
развитию всех проектов на этом канале а а для подписчиков на бусте я оставлю соответственно ссылочку А на макет чтобы Вы могли посмотреть интерфейс и возможно какие-то ээ элементы либо повторить уже у себя более детально либо предложить мне определённые правки Всё Всем большое
33:32
Speaker A
спасибо за внимание увидимся
Topics:сайт знакомствFigmaдизайн интерфейсафильтрацияпоиск анкетминимализмпроектирование UXавтоматическое удалениечестный сайтразработка сайта

Get More with the SozAI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries, speaker detection, and unlimited transcriptions.

App Store Google Play
Or transcribe another YouTube video here →

Free tools: TXT to SRT · SRT Validator · Merge SRT · Subtitle to Text · All tools

More from Damir Sharifyanov

View All
Свой сайт знакомств #21: генерим лендинги в ChatGPT для… — Transcript50:43
Свой сайт знакомств #21: генерим лендинги в ChatGPT для… — Transcript
2,985 1 Russian
Свой сайт знакомств #20: релиз проекта на домене, устан… — Transcript18:58
Свой сайт знакомств #20: релиз проекта на домене, устан… — Transcript
2,604 1 Russian
Свой сайт знакомств #19: генерим название в ChatGPT, ри… — Transcript45:30
Свой сайт знакомств #19: генерим название в ChatGPT, ри… — Transcript
2,799 1 Russian
Свой сайт знакомств #18: реализуем простой iframe чат д… — Transcript47:44
Свой сайт знакомств #18: реализуем простой iframe чат д… — Transcript
4,259 1 Russian
Свой сайт знакомств #17: отправка сообщений, реализация… — Transcript36:40
Свой сайт знакомств #17: отправка сообщений, реализация… — Transcript
2,671 1 Russian
Свой сайт знакомств #16: Мои симпатии, Мне симпатизирую… — Transcript34:33
Свой сайт знакомств #16: Мои симпатии, Мне симпатизирую… — Transcript
4,098 1 Russian
Свой сайт знакомств #15: реализуем симпатии (лайки) и п… — Transcript39:19
Свой сайт знакомств #15: реализуем симпатии (лайки) и п… — Transcript
3,181 1 Russian
Свой сайт знакомств #14: роутинг на папках в PHP, с Cha… — Transcript21:37
Свой сайт знакомств #14: роутинг на папках в PHP, с Cha… — Transcript
1,881 1 Russian
Свой сайт знакомств #13: фильтрация без кнопки, из COOK… — Transcript1:13:43
Свой сайт знакомств #13: фильтрация без кнопки, из COOK… — Transcript
6,874 1 Russian
Свой сайт знакомств #12: доработка главной страницы и р… — Transcript35:07
Свой сайт знакомств #12: доработка главной страницы и р… — Transcript
3,092 1 Russian
Свой сайт знакомств #11: выводим информацию из базы дан… — Transcript39:13
Свой сайт знакомств #11: выводим информацию из базы дан… — Transcript
2,921 1 Russian
Свой сайт знакомств #10: фильтры анкет и поиск (образов… — Transcript57:33
Свой сайт знакомств #10: фильтры анкет и поиск (образов… — Transcript
1,270 1 Russian