25 элементов дизайна сайтов и приложений, которые вы возможно забыли

19 Марта 2018, 12:21

Разрабатывая дизайн сайта, порой мы можем забыть о каких то элементах, и это круто!

Ну в смысле не круто, а это нормально. Такое случается. Но эта статья поможет тебе не повторять больше этой ошибки, ну или стать более осведомленным в этом вопросе. А может вы посчитаете что это уж слишком, ожидать от вас столько работы и вообще вам столько не платят, что бы заморачиваться на таких мелочах, дал psd эскиз и с меня достаточно. Ок, эта статья для тех кто хочет чтобы его дизайн был полноценным и не содержал какой либо недостающей информации.

Здесь представлен всего лишь список вещей, которые вы может быть забываете при разработке. Иногда смотря на такие приложения как instagram вам возможно кажется что оно очень простое, в плане дизайна, но на самом деле оно содержит много экранов, состояний, элементов, которые на первый взгляд все и не заметишь.

Вход и регистрация

1. Начальный экран Это экран, который вы видете когда идет загрузка мобильного приложения. Экран который вас всречает, поэтому он важен.

Начальный экран

2. Забыли пароль Ссылка “забыли пароль” очень важная в интерфейсе, не забывайте о ней.

Забыли пароль

3. Благодарность за регистрацию Этот экран обычно появляется после окончания регистрации и подтверждения e-mail.

Благодарность за регистрацию

4. Письмо приветствия Хотя это уже относится больше к маркетингу, а не дизайну, но это первое впечатление от вашего продукта, поэтому очень важно что бы оно соответвовало вашему дизайну.

Письмо приветствия

5. Страница - The Terms of Service & Privacy Эта страница нужна, если вы разрабатываете иностранный ресурс, например для США или Германии.

Страница - The Terms of Service & Privacy

Знакомство с программой

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

Первый опыт

7. Страницы без добавленных объектов Это частая ошибка дизайнеров, не прорисовывать страницу, без добавленных объектов. Обычно, мы прорисовываем страницу в ее полном состоянии, и дизайн выглядит прекрасно, но в реальном мире такое состояние может не всегда быть, поэтому очень важно чтобы был вариант дизайна, когда нет ни одного объекта и чтобы это не выглядило как пустая страница.

Страницы без добавленных объектов

8. Дефолтный аватар Планируя дизайн мы на место аватара часто ставим фотографии людей, и можем забыть о том, что не все пользователи всегда добавляют аватары. Поэтому очень важно заранее создать дефолтный аватар.

Дефолтный аватар

9. Кнопка выхода К сожалению мы должны дать человеку покинуть наше приложение или наш сайт, как бы нам не хотелось терять клиента. Не забывайте, что пользователь может пользоваться сервисом из публичного источника, поэтому у него должна быть возможность выйти из своего аккаунта.

Кнопка выхода

Множество мелких элементов

10. Подвал Вы не поверите, но иногда об этом забывают. Всеже страница должна чем то заканчиваться, в нашем случае этим является подвал сайта.

Подвал

11. Favicon и ogi Признаюсь, сам грешу тем, что забываю сделать этот элемент, и уже на стадии программирования сайта мне об этом напоминают. Что бы этого не происходило делайте его сразу. Более того, не забывайте что сейчас не достаточно просто favicon.ico, необходимо разработать иконки и под мобильные устройства, а так же ogi картинку для социальных сетей.

Favicon и ogi

12. Страница - 404, 403 Тут без коментариев. Очевидная вещь.

Страница  - 404, 403

13. Default,Hover,Focus,Pressed,Disabled и прочие состояние элементов Ого сколько состояний, быть может подумали вы. Возможно они не все нужны всегда, но Hover и Focus пожалуй должны быть всегда прорисованны.

 Default,Hover,Focus,Pressed,Disabled

14. Кнопки постраничной навигации Да, порой мы ставим пагинатор внузу нашего списка с выделенной первой страницей. Но стоит подумать, а отображает ли он все свои состояния, а как он будет выглядеть на 20 странице.

Кнопки постраничной навигации

15. Курсоры Дизайн, это не интерактивная вещь, поэтому разработчики не всегда могут понять какой объект кликабельный, а какой нет. Вы можете помочь разработчику испльзовать курсоры в презентации дизайна.

Курсоры

16. Сортировка данных в таблицах Если вы используете в своем дизайне таблицы с данными, то позабодьтесь о том чтобы была продуманна возможность сортировки данных. Для затрат на разработку это займет несколько минут, пользователям это даст большое удобство в пользовании данными.

 Сортировка данных в таблицах

17. Страница - Ничего не найдено Иногда в поиске вбивается много параметров и результат ничего не выдает. Не печальтесь, просто добавьте веселую картинку, которая ободрит вашего пользователя. Ну и инструкцию, что ему сделать, чтобы результат поиска все таки был.

Страница - Ничего не найдено

18. Ошибки состояния Неверный пароль, уже существующий аккаунт. Слишком много вещей, которые могут пойти не по плану, особенно если вы пожилая бабушка, которой внуки подарили планшет. Сообщайте, что что-то пошло не так.

Ошибки состояния

19. Системные уведомления На сайте часто проходят фоновые операции. О некоторых из них пользователю полезно знать. Вроде тех, что товар добавлен в корзину, или что операция прошла успешно. Не забывайте прорисовывать эти уведомления.

Системные уведомления

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

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

21. Состояние загрузки Для людей все же нужно понимать, загрузилась страница до конца или нет. Это поможет им лучше дожидаться полной загрузки страницы.

Состояние загрузки

22. Продумать место под длинные записи Дизайнер порой может скомпоновать каркас сайта, который красиво смотрятся только в тех условиях, которые придумал дизайнер. Но порой имена могут быть длинне обычного, или цены больше чем планироваровась. Неучтенное для этого место может в будущем развалить сайт или налазить на соседние объекты.

Продумать место под длинные записи

23. Функционал “удалить мой аккаунта” Возможно это никому и не понадобится, удалять свой аккаунт, но иногда пользователь просто хочет создать новый аккаунт, на тот же e-mail, а для этого нужно именно возможность удалить свой аккаунт.

Функционал “удалить мой аккаунта”

24. Кнопка “Добавить корзину” Вам кажется что это элементарно, но вы не поверите как часто это может забываться.

Кнопка “Добавить корзину”

25. Анимации Конечно, вы как дизайнер работаете только со статичной картинкой и анимацию должен делать верстальщик, но поверьте верстальщик ничего не сделает, или сделает как ему придет в голову, а не как вы планировали. Поэтому не забывайте потратить несколько часов на то, чтобы подробно расписать что и как должно быть анимированно. Поверьте, правильная анимация добавляет балов для вашего дизайна.

Анимации

p.s.

Конечно, возможно это не весь перечень элементов, которые чаще всего могут забываться дизайнером, когда он разрабатывает дизайн. Но на мой взгляд это самые важные, и если вы будете их делать, то уровень вашего дизайна будет на порядок выше.

Всем мир!