Redesign - mockups

[demosglok]

Нарисовать мокап для основных страниц приложения:

• [ ] лента твитов
• [x] авторизация
• [x] регистрация
• [ ] страница профиля
• [ ] страница пользователя

Можно использовать нинзя мокс. Предусмотреть адаптивность.

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

[Markiz9999]

Десктопная версия

Главная страница Главная страница + окно авторизации Главная страница + окно регистрации Домашняя страница Страница профиля - Твиты Страница профиля - Мои подписчики Страница профиля - Мои подписки Поиск пользователей Страница пользователя

Мобильная версия

Главная страница Главная страница + окно авторизации Главная страница + окно регистрации

[otetsdiodor]

Профиль Поиск Пользователь Домашняя страница Профиль- фоловеры Профиль - Подписки

[horba]

Замечания общего плана по немобильной версии.

1. У нас выходит, что очень много свободного пространства съедается за просто так (много свободно гуляющего места. Возможно, стоит скинуть с себя ограничение в виде трех колонок.
2. Широкий экран - не всегда найс. Так как пользователю приходится вертеть головой :) Подумайте о максимальной ширине экрана и подумайте, как стилизовать лишнее пространство.
3. Мокапы должны отображать ux - для этого нужно показать ПОВЕДЕНИЕ и различные состояния экрана. Как пример - кнопка лайк - нужно показать как лайкнутое состояние, так и не лайкнутое, для кнопок меню показать вид при наведении и при выбранном состоянии. Если есть фиксированные или стикнутые элементы - это также нужно отображать.
4. Считается хорошим тоном использовать боль-менее простые шрифты, например Roboto. Можно погуглить про наиболее принятые шрифты в современном дизайне.
5. Добавьте красок вашим мокапам - однако, не переусердствуйте. В интернете полно тулз, которые помогу вам подобрать оптимальную палетку с сочетающимися цветами.
6. Помните про то, что один компонент (например кнопка) должна выглядить и вести себя одинаково на любом экране.
7. Помните про отступы, междустрочный интервал, размеры.

[horba]

Также вы можете использовать zeplin

[horba]

Подчеркивания - несколько излишни. Попробуйте от них отойти.

[horba]

https://zeplin.io/

[horba]

вот хороший сайт, который не только генерирует палетки, но и показывает сразу пример применения - http://colormind.io/bootstrap/

[horba]

Добавьте приветствие и логотип. Увеличте междустрочный интервал. Подумайте над максимальной шириной.

[horba]

На мобильной версии будет лучше сделать кнопочки на всю ширину и разместить в колонку, а не ряд - так пользователю удобней их нажимать

[horba]

Остальные замечания будут после того, как появится проект в zeplin

[horba]

Ребята, вам может быть полезно почитать/посмотреть про принципы построения дизайна и то какие компоненты вообще существуют. Вот несколько того, что будет полезно посмотреть https://material.io/guidelines/# https://getbootstrap.com/docs/4.0/components/alerts/ https://semantic-ui.com/introduction/getting-started.html

[Markiz9999]

В общем, есть предложение перенести боковое меню в header вот таким образом. Если все нравится, переделаем остальные мокапы под этот header.

[horba]

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

[Markiz9999]

На фоточках шрифт TimesNewRoman, но на самом деле там Roboto. Почему-то ninjamock заменил его при создании файлов png.

Ссылка на проект в ninjamock: https://ninjamock.com/s/56F35Wx

Десктопная версия

Главная страница Главная страница - Логин Главная страница - Регистрация Домашняя страница Профиль - твиты Профиль - подписчики Профиль - подписки Поиск Аккаунт пользователя

[FoxCaptainFox]

Как мне кажется, стоит:

1. Внести аватарки в общий прямоугольник твита, сейчас визуально разделяется текст и ник с аватаркой.
2. Уменьшить аватарку справа и, соотвественно, передвинуть центральную колонку правее.

[FoxCaptainFox]

По поводу меню для мобильной версии есть два варианта - сбоку с перекрыванием контента и сверху со смещением. Какой лучше?

[FoxCaptainFox]

Главная страница Регистрация Авторизация Домашняя страница Домашняя страница с меню Домашняя страница с расширенным меню Мой аккаунт Мой аккаунт с меню Фолловеры Фолловинги Поиск Страница другого пользователя

[horba]

1. имя пользователя в твитте лучше сделать не больше по размеру, а выделить жирным шрифтом.
2. время же твитта лучше сделать наоборот тоньше, можно даже по размеру меньше и сделать более светлым тоном - сереньким каким-то
3. текст твитта лучше использовать text-align: justify

[horba]

1. По кнопкам:

• у вас везде кнопки с круглеными углами, а здесь - нет. нужно как и везде скруглить
• Эти кнопки должны отличаться по стилям
• иметь разный цвет. например, кнопка логин - синего, а отмена белого
• лучше сделать их меньше, а вот margin-bottom (т.е. расстояние между соседними) - 16 px

2. по тексту приветственному

• междустрочный интервал лучше - 1.5.
• заголовок лучше чтоб звучал, не как Hello, а как Welcome to Pineapple
• размер шрифта заголовка лучше выделить жирным, сделать отступ снизу от него больше.

[horba]

• Оптимальная высота инпута обычно 36 пикселей.
• заголок инпута непропорционально большой
• размер шрифта валидационного сообщения должен быть меньше - в идеале меньше основного размера шрифта.
• также на подумать - не перенести ли валидационное сообщение под филду. так оно точнее влезет
• замечания по кнопкам - размер больше, разный цвет, отступ снизу.
• заголовок формы - выделить болдом, цветом, сделать больше отступ (margin) сверху и снизу, полоску убрать, размещать по центру не обязательно