Ищу того, кому нужен простой сайт
Пост закрыт, люди найдены
Пост закрыт, люди найдены
Привет, @SomebodyLikeMe!
Вы, может быть, не ждали — а мы пришли с фидбеком! Прежде всего, хорошая работа! Особенно радует, что в процессе вы постоянно обращаетесь к теории. Это полезный навык, который рано или поздно дойдёт до автоматизма и позволит делать быстро и качественно.
Теперь по дизайну
Главный экран приложения. Сетки — это важно. Сетки — это круто, но не стоит опираться только на них. В большинстве случаев проектирования интерфейсов сетки помогают верно расположить верхнеуровневые блоки, но не очень хорошо работают внутри блоков. В вашем случае они отделили шапку и футер от контентной области, но наделали грязных делов внутри. Есть правило близости, которое помогает определить отступы между и внутри логических блоков в дизайне. В вашей версии представлены 5 разных блоков: хедер, первый рассказ, второй, третий и таббар. Чтобы пользователю было легче воспринимать информацию и интуитивно понимать, где какой контент находится на сайте или в приложении, нужно объединить рассказы в один логический блок (вариант 1 и 2).
Шапка и нижняя навигационная панель (или хедер и таббар для любителей ванильного латте, и да, я люблю латте). Размер логотипа сервиса в хедере крупноват. Не забывайте, что в веб-версии (и иногда в приложениях) он еще и возвращает пользователей на главную страницу. По таббару — элементы управления лучше чуть-чуть отодвигать от краёв экрана, в отличие от карточек постов, так как все они интерактивные. Кроме того, есть зона удобства клика на смартфоне (картинка ниже), которая показывает, что нижние углы экрана (в зависимости от руки) — не самое удобное место для взаимодействия. Вы можете задать вопрос: а почему ж тогда хедер в красной зоне? Отвечу: потому что поместить его в центре экрана — не выход. И потому что контент хедера, как правило, можно реализовать через нижний таббар и взаимодействие с приложением.
Карточка рассказа. Или поста, тут как привычнее. С точки зрения концепта всё хорошо: есть картинка, заголовок, тизер поста и CTA (call to action). Как проектировщику интерфейса предлагаю порассуждать: нужна ли такая акцентуация этой кнопки? Какая цель у ленты постов? Вместо полноценного поста у вас только тизер, для многих пользователей кликабельность карточки поста не вызовет вопросов. А листать длинную ленту с постоянно мелькающей красной кнопкой может утомить. Есть два варианта: где CTA становится менее ярким или где отсутствует полностью.
А еще возник вопрос: есть ли какой-то смысл в серой подложке области с заголовком, тизером и CTA? На мой взгляд, это мешает контрастности текста, можно её убрать.Не забывайте, что «лепить» контент к краям блока чревато снижением читаемости. Всегда добавляйте отступы.
Окно авторизации. Молодец, получилось отлично! Остались нюансы.
• Кнопки можно делать больше. Для мобильных приложений и сайтов рекомендуемая высота около 40. В вашем случае диапазон от 32 до 48 открыт.
• Вы почти идеально решили вопрос с акцентуацией, но сейчас кнопка регистрации воспринимается скорее неактивной, чем второстепенной. Попробуйте использовать другой цвет или сделать её текстовой (или обводкой).
Больше нареканий нет!
Подводя итоги, могу сказать, что не ошибается тот, кто ничего не делает! Всё, что я расписал в фидбеке, только ради одной цели — чтобы помочь вам стать суперкрутым дизайнером интерфейсов. Всех благ!
Привет, котятки.
А мы продолжаем проходить курс веб-дизайна у Пикабу и рассказывать о том, как там все устроено, чему нас там учат и что нам с этим потом делать.
Кнопка так и останется в жпеге, потому что черновик с нею я уже удалил и скачивать бесфоновую пнгшку мне неоткуда.
На прошлой неделе мы учились рисовать кнопочки и делать из них компоненты и варианты. Закрепили все это дело туалетными ершиками. Мы молодцы и должны были перейти к последним теоретическим модулям первой части.
Но я совсем забыл рассказать вам об интерактивных прототипах.
А для того, чтобы все это дело было интереснее, начну я все равно с теории. А именно - с модульных сеток. Сетка - это такой вспомогательный для построения композиции. Грубо говоря, это когда ты делишь рабочее поле на прямоугольники, по которым ориентируешься, что и куда пихать. Состоит сетка из строк и колонок (меж ними, само собой, межстрочники и межколонники, хоспаде, даже названий не сумели для них придумать). На пересечении строк и колонок находится сам модуль. Если межстрочников и межколонников нет, и модули друг к другу прижимаются почти так же тесно, как люди в метро, то такая сетка называется коллажной. А если мы сейчас забьем болт на теорию, то покажу я вам следующее.
Итак, зададим сетку. Стандарты, которых советует придерживаться Гугл, привязаны к восьмикратной пиксельной сетке. А потому я подготовил вот такой рабочий фрейм:
А потом я долго пил кофе, курил и соображал, что же мне с ним делать. Мучать ершики не хотелось, хотелось мне чего-то странного. Новостей, например. Наверное, тег “политика” так сильно на меня влияет. Что ж, решено. Теория, конечно, штука хорошая, но одной ей сыт не будешь. Ручки зачесались что-то сделать. Пусть на первый раз и криво, но потом ближе к концу курса сравним.
Долго и матерно я пытался что-то куда-то с этой сеткой сделать. Пихал туда-сюда логотип и кнопки навигации, мучал новостные посты. Так прошла ночь, наступило утро. На выходе у меня получилось вот это вот чудовище:
Честно, я хрен знает, зачем вообще это делал, не было такой домашки, это мне просто не спалось. А поскольку наступило утро, и дальше спать уже в принципе нельзя, то я решил продолжить. Лента новостей-то есть. А как выглядит новость внутри?
Окей, сделаем ее. Но тут я уже не ориентировался на сетку, ибо сонный мозг требовал насыпать пару ложек кофе в бокал колы, отказываясь думать аккуратно. А потому на выходе имеем вот это вот:
Мде, кажется, надо заново пройти модуль про автолейаут, а то ересь какая-то. Но не суть, это просто иллюстрации ради. Затем меня окончательно понесло, и я сделал окошко регистрации:
Сделал. Хоспаде, какое громкое слово-то. В общем, кто угадает, у кого я эту форму спер, тому я задоначу на пиво. Как только этот кто-то донаты себе включит, да.
Теперь у меня есть три макета, а у Фигмы есть функция “Интерактивный прототип”. Что это такое? Это, ребята, такая штука, которая позволит презентовать ваш макет заказчику или же показать юзерам, как вообще работает сайт. Прямо в Фигме настраиваются определенные сценарии, которые потом на отдельной вкладке можно выполнять.
Что ж, у нас есть главная страница сайта, у нас есть форма регистрации, есть отдельная страница с отдельной новостью. Шаг первый: мы решаем зарегистрироваться. Для этого настраиваем такой сценарий: при нажатии на кнопку логина должна появиться форма логина или регистрации. Поскольку на дворе двадцать первый век, пусть это будет не новая окно, а оверлей. Закрываться форма должна по нажатию на крестик или же по тапу на пустом месте. Ага, сделали. Теперь нужно настроить сценарий открытия поста. Открываться он будет по тапу на кнопке “Узнать больше”, а для закрытия новости я добавил кнопку “Назад”. Ну а теперь результат:
На сегодня все, ребятки. Подписывайтесь, ставьте лайки, донатьте на пиво с кокаином, ибо без них ночью тяжко, читайте хорошие новости.
С вами был @SomebodyLikeMe.
Успехов.
Современный мир не мыслим без удобных приложений. За графическую часть отвечает специалист UX/UI дизайнер. Именно он определяет конечный облик сайта или приложения.
Как стать таким специалистом и какие инструменты следует изучать для этого? Об этом и немного больше мы узнаем видео.
Я работаю над разработкой приложения-планнера, с помощью которого пользователи смогут вести удобное планирование и отслеживать прогресс по своим начинаниям.
В этой связи прошу вас, уважаемые потенциальные юзеры, дать фидбек на макеты интерфейса и функционал.
Буду благодарен любым отзывам, пишите как видите и считаете нужным!
Для подсказочки – основные вопросы
1) Что больше всего понравилось?
2) Удобна ли компановка?
3) Нравится ли дизайн-код?
4) Насколько просто кажется использование?
5) Стали бы пользоваться?
Отвечать на данные вопросы или нет – решать Вам! Я буду признателен любым откликам.
Что должен знать веб-дизайнер?
Я долго искал список информации, которую нужно изучить, знать, уметь, и нашел по пунктам:
Уметь составить конкурентный и визуальный анализ
Насмотренность, внедрение привычки.
Принципы как делать эффектный дизайн.
Композиция в вебе.
Визуальный баланс
Как вести повествование на странице
Как работать с сеткой
Аргументация решений
Как собирать контентные страницы
Как работать с типографикой
Цвет
Как создавать структуру сайта
Логическое повествование
Визуальное единство.
UI-кит
Основы UX и проектирования
Как брифовать клиента
Как вести деловую переписку
Как работать с техническим заданием?
Этапы создания лендинга
Как правильно передать макет в разработку
Современное прототипирование
Принципы мейнстримной внутренней страницы
Анимация в интерфейсе
Яндекс метрика в дизайне
MVP, MMP, MLP
Интерфейсные паттерны и гайдлайны iOS и Android
Как сверстать без верстальщика
Пользовательские сценарии
Юзабилити
Как работать с аналитикой а/б тестирование
Карта клиентского пути
Гипотезы
Копирайтинг
Как оформить кейс
Как адаптировать сайты
Дизайн-система
Теперь понятно, что надо изучать много и можно сильно подрасти в навыках, если уделять каждому пункту по часу в день в течение недели. Ну чтож, стартуем, берём первый пункт.
Неделя 1. Составляем конкурентный и визуальный анализ
Сразу же и пункт 2: работаем с насмотренностью, внедряем привычку.
Задача минимум: В течение недели надо каждый день искать нравящиеся сайты из категории топ-1 в своей нише. Смотреть типографику, сетку запоминать как стоит каждый блок и думать, чем он обоснован. Разделить на визуальные категории, например — минимализм, полька-стайл, хайтеч, колхоз и т.п.
Задача для крутана: срисовать понравившийся сайт к себе в фигму и на практике понять что да как.
Как известно Canva закрыла доступ к оплате Pro-версии аккаунта российским пользователям. В личном кабинете вы так же не найдёте способа изменить платёжные данные.
Что делать в таком случае, как обойти данное ограничение и продолжить использование довольно удобного и популярного графического сервиса Canva. В данной публикации мы с вами пошагово разберём - как оплачивать подписку Canva в 2022 при помощи виртуальной карты.
Итак для настройки нашего личного кабинета Canva нам потребуются:
1. Любая зарубежная виртуальная карта, в нашем случае это была предоплаченная виртуальная карта Visa из Соединённых штатов.
2.VPN-приложение, для того чтобы изменить своё местоположение и сменить платёжную подписку Canva на нужный нам регион. В нашем случае это всё те же Соединённые Штаты;
3.Если хотим воспользоваться пробной 30-дневной версией, то потребуется создать новый аккаунт.
Процес довольно простой и не потребует длительных манипуляций, как это было у нас на примере смены платёжного акканта Google. Давайте приступать к настройкам.
Когда попадаем в аккаунты, мы видим что Canva всё так же предлагаем оформить подписку "Canva Pro" как и прежде. Хорошо, выбираем нужную нам подписку и жмём "Далее".
Но как только мы преходим на следующую страницу оплаты, мы видим что кнопка "Получить пробную версию" не активна. Обратите внимание, что оплата подписки указана в рублях. На следующем этапе, мы покажем как менять регоин подписки, чтобы всё таки получить доступ к оплате на нашем аккаунте.
Делаем следующие действия. Подключаем VPN с местоположением Соединённые Штаты. Заходим в "Настройки учётной записи".
Важно! На данном этапе все действия должны происходить с включённым VPN, тогда Canva автоматически сменит ваш регион и валюту оплаты.
Как мы видим, Canva автоматически поменялась на английский язык. Значит вы всё сделали правильно. В меню справа переходим в раздел "Billing & teams". Сейчас нам необходимо удалить нашу старую карту, которая не действует. Нажимаем на кнопку "Remove" и удаляем карту.
Повторно жмём на кнопку "Remove".
Теперь в том же разделе, мы видим что карта удалилась и появилась кнопка "Add payment method", смело переходим туда, чтобы привязать нашу виртуальную карту.
Тут как обычно заполянем все данные нашей виртуальной карты и не забываем указывать индекс. Жмём на кнопку "Save".
Важно! Обратите внимание, что выбор подписки региона должен соответствовать стране выпуска карты. В нашем случае это была предоплаченная виртуальная карта Visa из Соединённых штатов. Можно приобрести здесь.
Отлично! Видим что наша карта привязалась в личном кабинете.
Тестируем оплату подписки.
Теперь пора протестировать оплату. Не забывайте, что все действия должны производиться строго с включённым VPN, чтобы не сменилась валюта оплаты и регион подписки.
Нажимаем на кнопку "Canva Pro" и нам выпадает окно оплаты подписок. Как мы видим, тут уже нету каких-либо огранчиений на покупку и валюта оплаты в Долларах США. Значит мы всё сделали правильно. Выбираем какой план подписки нас интересует. В нашем случае это помесячная оплата "Monthly" за 12.99$. И переходим к оплате "Next".
Важно! Стоимость подписок будет отличаться в зависимости от региона. Но выбор региона строго привязан к стане где выпущена карта.
Потом нам предлагают добавить кого-нибудь в команду. Мы пропускаем этот шаг и вверху справа жмём кнопку "Maybe Later". Но вы можете добавить, если вам есть с кем поделиться с подпиской.
И в финале мы всё таки производим успешную привязку и подписка "Canva Pro" становится нам доступной. Инструкция предоставлена сервисом оплаты зарубежных подписок Wanttopay.ru.
Альтернативная схема метро Санкт-Петербурга. Новое графические решение подачи схемы метро СПб и информацией о расположение достопримечательностей рядом со станциями метро. Альтернативную схему можно скачать бесплатно.
Источник: https://metrospb.me/