Как я и обещала, во второй части мы разберем интересный пример и придумаем что-то оригинальное. Тогда не буду тянуть, приступим.
Для реанимации я выбрала этот сайт. Он не такой ужасный как предыдущий. Мне нравится, что он сделан в таком космо-стиле. Также он не перегружен лишней информацией, нет большого количества текста и картинок. При входе на сайт сразу видно меню в шапке сайта, и привлекает внимание этот космонавт, который плавно летает. Но на этом плюсы заканчиваются.
Что мне не понравилось
1. Цветной фон, цветной текст, цветные картинки- все это как-будто смешивается.
2. Очень много цветов: голубой, желтый, зеленый, розовый, оранжевый, черный. Они не сочетаются и сильно перегружают внимание. Зритель просто устает в этом потоке цветов вырывать нужную информацию, из-за чего возникает дискомфорт.
3. Довольно странные картинки неопределенной тематики: на фоне летает космонавт, слева непонятные геометрические фигуры, иллюстрация мужчины, ниже роботы, монстры и так далее.
4. Иллюстрации в виде схем тоже не особо привлекают. Слишком яркие цвета, визуально шумно, и опять же, зрительный дискомфорт.
Процесс редизайна
После такого короткого анализа я приступила к работе. Результат покажу сразу в конце.
Как я говорила выше, шапка сайта довольно неплохая, но кое-что я поменяла. Я сократила количество пунктов. Пункт "more" я сделала в виде бургера, а Log In - в виде кнопки, так как это очень важная часть сайта.
При виде сайта и космической темы я сразу поняла, каким хочу видеть первый экран. И у меня получилось воплотить эту идею. Зацикленная анимация планет, которые вращаются по кругу, меняя размер. Чуть позже я выложу видео, где вы сможете посмотреть как это выглядит. Но даже без анимации первый экран смотрится довольно неплохо. Также важную роль играет интересный шрифт. Ну и кнопку я добавила от себя, так как она дополняет контраста.
Контраст
Кстати, важный момент, который отличает оригинальный дизайн сайта от моего - контраст. Это очень мощная штука в дизайне, которая способна добавить вкуса визуалу.
Наглядный пример: вот один из первых вариантов страницы, точнее наброски, в котором виден слабый контраст. Может показаться, что вроде и красиво, но что-то не то. А теперь сравните с итоговым результатом :)
Идем дальше. Не буду останавливаться на каждом экране, лишь добавлю, что работа над дальнейшими страницами состояла в разработке интересной типографике и расстановке картинок. В этом мне помогла сетка и направляющие.
Модульная сетка
Итак, еще одно чудо дизайна - сетки и направляющие. В первой галерее вы можете увидеть экраны, созданные без помощи сеток. Это тоже скорее черновики, где я просто прикидывала, как может выглядеть страница.
А теперь взгляните, как преобразился дизайн с помощью сетки. Финальный результат в конце
Ну и отдельное внимание хочется уделить той самой шумной иллюстрации, которая просто наполнена всеми цветами. Я сделала схему посвободнее, а уровневые круги поинтереснее.
Итог
Ну и естественно, конечный результат:
Обязательно напишите в комментариях, как вам итог этого редизайна, и что ты вы поменяли в моем дизайне. Будет интересно узнать ваше мнение :)
Заказать дизайн: mbubniv@yandex.ru или Telegram
Портфолио, мой Behance, портфолио с моушен-графикой