Levchenko

Transcript

1. Левченко Виктория 50 поток Задание 1 Задание 2 Задание 3 Задание 4 Задание 5 Задание 6 Задание 7 Задание 8 Задание 9 Задание 10 Задание 11 Задание 12
2. Задание №1 Отрисовка микроформатов
3. Книга Начала читать книгу. Книга по-настоящему интересна и полезна! Чтобы не создавалось перенапряжение от траты времени и внимания на мелочи, казалось бы, очень значительные. Отрезвляет такого скрупулезного человека, как я. Продолжу читать в ближайшее время. Спасибо большое, Максим!
4. Цель
5. Главный экран Оригинал Копия • Номер телефона написан шрифтом PT Sans 18. Но почему-то мой оказался тоньше и для полного сходства я добавила обводку в 0.2px. Конечно, я понимаю, что вряд ли так делали при составлении сайта, но я не поняла как у них вышел этот же шрифт и этот же размер толще. • Как сделать подчеркивание ниже, чем стандартное? В оригинале явно больше расстояние от буквы до черты. Межбуквенное расстояние это не меняет. Эта черта может быть нарисована дополнительно простой линией? • Фото залов постоянно меняются, потому что залов много. • При наведении на фото зала, фон затемняется и появляется название зала. • Не нашла такой же иконки Юзера, и похожие были далеки, поэтому нарисовала сама в Illustrator.
6. Главный экран Оригинал Копия • Неудобно, что в Sketch нельзя сразу заблокировать слой, приходится лезть в меню слоя. Может быть, есть горячие клавиши? • Вообще Sketch показался неудобным, интуитивно непонятным
7. • Делала иконку “365” в иллюстраторе. • Пока делала довольно сильно запуталась. Сделать получилось, но потратив много времени. В итоге шрифт внутри оказался жирнее, чем надо. При общем просмотре всего того, что получилось, он явно выделялся. В итоге я схитрила, признаюсь, наложила уже в Xd белый прямоугольник и там же написала “365” нужным размером. При работе, которую нужно будет верстать, конечно, такого не сотворю) • Вижу, что иконки не совсем сочетаются друг с другом, т.к. времени в обрез, я и так запаздваю со сдачей, я оставила этот вариант. • Время 2ч 30м • Xd показался совершенно неудобным. Нет “интуитивного” понимания, что и как сейчас произойдет (в отличие от Figma). • Заметила, что в Xd можно закруглять каждый угол прямоугольника по отдельности. Такое есть в других программах? Иконка + текст Оригинал Копия
8. • Через маску в Sketch нельзя изменить цвет, да? • Как сделать пунктирное подчеркивание текста и опустить это подчеркивание ниже? В примерах, которые делала я, подчеркивание было значительно ниже, чем стандартное, и в этом и в другом. Здесь я делала подчеркивание линией и подгоняла вручную под длину слов. Иконка + текст Оригинал Копия
9. Оригинал Копия • Удалось найти те же самые иконки. Иконка + текст
10. • В оригинале картинки на фоне “Здоровья” и “Сознания” уплыли вниз, в копии исправила. • Время 2ч 35м. • При выборе одного из элементов меню затемняется задний фон и шапка меню, кроме логотипа "The Challenger". • Поэтому я сделала все надписи как в оригинале без выбора меню и наложила затемнение. Оригинал Копия Меню
11. Оригинал Копия Меню • Изменила иконки “Вконтакте” и “Instagram” на новые. • При наведении на ссылку из меню цвет меняется на серый с черного.
12. Оригинал Копия • Время 3ч 10м • Тенью выделен активный билет Тарифы
13. Оригинал Копия Тарифы • WhatFont определил шрифты как оригинальные шрифты Связной. На деле это смесь MuseoSans и Avenir :) Почти один-в-один. • Тенью выделен активный товар. • Снизу не стала делать градиент, так как это от Safari.
14. Оригинал Копия Смысл + визуализация • Подходит ли это к визуализации? Мне кажется, смысл передается • Время 20м
15. Оригинал Копия Смысл + визуализация • Время 25м • Это все же лучше отражает визуализацию
16. Оригинал Копия Карточка раздела • Тенью выделен активный элемент, будто парящий. • Время 2ч 10м • Обнаружила, что у Tinkoff есть 2 вида “герба”. На иконках используется упрощенная версия • Кажется, у Tinkoff свой индивидуальный шрифт со скошенными внизу “ф”. • Перенесла “для” во втором блоке на вторую строчку. Мне кажется, что здесь важна тема мобильного банка, а для чего он именно понятно, потому что в заголовке иконки и так речь идет о Бизнесе. • Рисовала иконку “Инвестиций” в Figma, но так и не поняла, как убрать торчащие кончики линий графика справа и слева. Доделала уже в PS.
17. Оригинал Копия Галерея • У Яндекса свой шрифт, я использовала Roboto. • Прочитала, кстати, очень интересную статью о YandexSans. • Время 1ч 50м
18. Оригинал Копия Галерея • На оригинале внизу градиент от Safari в конце страницы, поэтому в копии я его не повторила. • Время 1ч 50м
19. Оригинал Копия Карточка статьи • Дописала подзаголовки статьи, так как кажется, что автосокращение все таки необходимо редактировать. Дописала подзаголовок там, где он казалось бы уместен, но его не было. • Немного поработала с визуализацией. • Красным цветом выделяется активный текст (в оригинале тоже так). • Время 2ч 30м
20. Оригинал Копия Отзывы • Время 50м
21. Оригинал Копия Ввод данных • Время 50м
22. Оригинал Копия Ввод данных
23. Оригинал Копия Баннер • Поправила на обложке “Тортов” номер выпуска • Время 1ч
24. Оригинал Копия Предоставление данных • Время 1ч
25. Пост
26. Вывод: Старания: • В отрисовке интерфейсов мне удобнее пользоваться Figma. • Задание даёт хороший опыт. 80% 100% - это если бы нарисовала еще больше вариантов. Но времени уже не хватило.
27. Задание №2 Лендинги
28. Тема лендинга Шоколад Ruby. 4-й вид шоколада.
29. • Все же конкурентов трудно выявить. Как таковых лендингов на эту тему не нашла, разве что от производителя этого шоколада. У нас его продают специализированные интернет- магазины, но особо не презентуют. • Первый слева вариант - это копия оригинальной презентации от Callebaut а) Конкуренты Исследование
30. b) Ключевые запросы • Есть те, кто этим интересуется, но судя по всему пробовали не многие Исследование
31. Вдохновение
32. Имя: Юрий Гречко Возраст: 29 Семейное положение: не женат Дети: нет Место жительства: Москва Цитата: невозможное возможно Место работы: фабрика по изготовлению кондитерских изделий ручной работы высокого класса Чем занимается: наемный работник на кондитерской фабрике, шоколатье, автор собственной книги рецептов (бумажный тираж). Доход: 60 000 ₽ Образование: Высшее Трудности и болевые точки: отсутствие мотивации, деградация, падение в собственных глазах, отсутствие уважения к себе. Цели и ценности: постоянно стремиться к развитию в кондитерской сфере, готов к экспериментам, идет на страхи, побеждает, и стремиться постоянно расти в собственных же глазах. Важно идти вперед, держит в приоритете не только заточку кондитерских навыков, но и личностного развития. Важно поддерживать свою семью. Источники информации: интернет, книги, блоги, события, мероприятия, наставники, коллеги, курсы. Имя: Ирина Редикульцева Возраст: 30 Семейное положение: не замужем Дети: есть, 1 Место жительства: Тобольск Чем занимается: организация мероприятий, hand-made, делает конфеты и экспериментирует с шоколадом дома с дочкой. Место работы: Тобольская Социально-педагогическая Академия Доход: 40 000 ₽ Образование: Высшее Трудности и болевые точки: быть несчастной, сделать дочь несчастной, не дать ей развиться, боязнь непринятия обществом, боязнь одиночества, избегает неуважительного отношения к себе. Цели и ценности: важно благополучие себя и своей дочки, своей семьи, цель - быть счастливой и дарить другим радость, различные техники рукоделия вдохновляют ее на создание нечто нового. Источники информации: интернет, книги, социум, блоги, мероприятия, в которых участвует и которые организовывает сама, наставники, коллеги. Имя: Елена Овсянникова Возраст: 35 Семейное положение: замужем Дети: есть, 2 Место жительства: Москва Цитата: Друзья, мы работаем для вас не покладая рук! Чем занимается: шоколатье, основатель шоколадной лаборатории Chocola Доход: 130 000 ₽ Образование: Высшее Трудности и болевые точки: крах бизнеса, старается избежать некачественного сырья, которое может повлиять не только на вкус и качество, но и на репутацию, боится обмана. Цели и ценности: развитие бизнеса, быть на плаву, в тренде, развиваться в сфере шоколада, искать новые возможности, внедрять новые решения в бизнес, которые принесут рост и благополучие компании. Источники информации: интернет, коллеги, книги, журналы, блоги, события, наставники, преподаватели, курсы. а) Целевая аудитория • Людей я решила взять реальных. Но так как я не очень хорошо знаю некоторых, дописала некоторые пункты по ощущениям, что они сами якобы могут чувствовать и думать. ЦА и Смыслы
33. Ссылка на прототип https://marvelapp.com/3fcc9gh/screen/54818157
34. Ссылка на лендинг https://marvelapp.com/3fcc9gh/screen/54810503
35. Допишу смыслы и еще доработаю лендинг. Спасибо за проверку!