Thread by @nat_davydova

Я сегодня хочу сделать тред для джунов-фронтов про пет-проекты и тестовые задания.

Это тред о том, что у ваших пет-проектов или тестовых должно быть свое "лицо", о важности визуальной части и том, что с ней делать.

🔽

Представим себе типичное джуновское портфолио: какие курсы прошли - те учебные проекты там и есть. У всех выпускников портфолио одинаковые.

Или представим, что вам дали типичное тестовое и оставили дизайн на ваше усмотрение. И надо сделать симпатично.

🔽

Или вот пет-проект хотите, и надо, чтоб он выглядел худо-бедно симпатично, и вообще не ясно, на что ориентироваться, чтоб получилась не уныль и серо-черная каша, а что-то цепляющее

🔽

Почему это важно.

На днях я шарила этот пост о поиске работы для начинающего 3D-шника. Там мог бы быть список скиллов и какая-нибудь типичная моделька приложена. Было бы простенько и скучно.

Но там домик! Атмосферный, яркий, уникальный.

🔽

https://twitter.com/Lifanderr/status/1521329534712299521

И теперь в глазах тех, кто шарит этот твит, тех, кто будет смотреть его портфолио, тех, кто будет принимать решение, он будет не просто очередной джун, а чувак, который сделал классный домик

🔽

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

Об этом и поговорим дальше.

🔽

1. Опрятность

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

Пусть адаптив работает, пусть функциональность отрабатывает, пусть все рендерится без продергов

🔽

2. Концепт

Давайте, разберем типичный пример самого новичкового проекта: приложение, показывающее погоду.

Чтобы примерно понять, как это можно симпатично визуально сделать, идем на dribbble. Это сайт, куда дизайнеры скидывают примеры своих работ.

🔽

❗️ Важно! Примеры, которые вы там найдете, будут сложные. Нам не надо пиксель в пиксель их воспроизводить. Нам нужны идеи.

❗️ Важно #2. Вдохновляться этими работами - ок. Если вдохновитесь до копирования - оставляйте в ридми ссылку на эти дизы. О вас не подумают плохо

🔽

Итак, берем пример погоды. Забиваем в поиск Weather и смотрим на примеры, вычленяем ключевые моменты.

Этот цепляет классными иконками, симпатично расположенной "плашками" инфой и цветовой гаммой

🔽

dribbble.com/shots/15736238…

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

🔽

dribbble.com/shots/16515389…

На этих двух примерах остановимся. Как видите, общее, что их объединяет - броская графика, цвет и внимание к деталькам.

Об этих аспектах мы поговорим ниже

🔽

3. Графика

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

OpenWeather API, которым вы, скорее всего, воспользуетесь, поставляет свои иконки.

Но они унылые и у всех приложенек будут одинаковые

🔽

Нашим спасением будут ресурсы (не пиратские!) с бесплатной годной графикой.

Иконки я беру с FlatIcon: проект условно бесплатный, очень много иконок там в свободном доступе.

Тут тех иконок в любом стиле в SVG - завались. Берите да вставляйте!

🔽

flaticon.com

Если нужны рисованные картинки и более сложные иконки, топаем на сестринский проект FlatIcon - FreePik.

Тут вектора - завались. Качаем понравившиеся картинки в архивах, идем в онлайн-редактор файлов EPS (см.след.твит) и выгружаем графику в SVG

🔽

freepik.com

Мне нравится вот этот EPS-редактор: простой и комфортный. Закидываешь туда EPS, выгружаешь все содержимое (или только нужные части) в SVG.

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

🔽

Если хотите использовать фото, ваш лучший друг - Unsplash. Офигенные фото по куче тематик в отличном качестве.

unsplash.com

4. Цвета

Окей, мы разобрались с концептом и картинками. Теперь поговорим о цветах.

Во-первых, опять же, не грешно вдохновиться палитрой из понравившегося примера на dribbble и взять ее всю или часть (сделав ссылку на источник вдохновения в ридми репо).

Во-вторых, можно пользоваться обалденным генератором палитр Coolors.

Он генериует рандомные палитры, в которых цвета подходят друг другу. Если вы введете сколько-то своих цветов, он подберет к ним подходящие.

Можно сгенерить и палитру по фото

🔽

coolors.co

В-третьих, градиенты - наши хорошие друзья.

Они должны быть акцентными, а не вообще везде (гляньте примеры использования градиентов в интерфейсах на dribbble).

Еще, они должны быть чистыми, яркими, приятными, гармоничными. Тут поможет Cssgradient

🔽

cssgradient.io

На cssgradient.io уже всякие классные примеры есть. Самим строить не надо: ресурс дает возможность сразу скопировать CSS-код понравившегося градиента.

Еще вот такой есть крутой генератор

🔽

mycolor.space/gradient

5. Типографика

❌ не используем всякие хитрые, рукописные, сложносочиненные шрифты. Их надо использовать по уму, а если вы не дизайнер, по уму не выйдет.

✅ топ google fonts - вот наш выбор. Простые и приятные OpenSans, Roboto, Lato, Montserrat, Raleway

🔽

Что не делаем:

❌ не миксуем больше двух фонтов на проект
❌ жирный и курсив используем аккуратно, только чтоб сделать акценты

🔽

6. Общий стиль.

Посмотрите, как устроен вид карточек и панелек в Material Design, какие там тенюшки используются, чтобы было гармонично и симпатично с точки зрения внешнего вида

Взять стили можно с Material-версии вашего фреймворка (всю ее тащить не надо без особых причин)

🔽

7. Общие советы

✅ сделайте favicon и маленькое лого вашему проекту. Берите симпатичную, подходящую по стилю и смыслу иконку с FlatIcon - и вперед. Для генерации favicon куча бесплатных онлайн-сервисов.

Вам пять минут дела, а выглядеть будет симпатичнее

🔽

✅ ховеры и маленькие эффекты на интеракции (жмаканье кнопок, переключение формочек) - отличное дело.

На FreeFrontend есть куча подборок с такими эффектами. Пробуйте воспроизвести любой понравившийся, заодно и потренируете CSS

🔽

freefrontend.com

❌ не навешивайте кучу всего (и на себя, и на приложение).

Если переусложните - вам будет грустно и демотивированно, вы погрязнете в деталях.

Если обвешаете всю аппку светомузыкой, у тех, кому вы будете скидывать результат, повытекут глаза

🔽

✅ Тренируйте насмотренность

Поглядывайте раз в недельку-две на dribbble. Что нынче модно, какие детальки можно утащить в свои петы итд. Еще можно на themeforest ходить, шаблоны сайтов и аппок глядеть.

🔽

❗️Напоминаю, что там очень сложные бывают концепты, не думайте, что с вами что-то не так, если вы не можете это воспроизвести

🔽

Резюме: вашим пет-проектам и тестовым нужно "лицо". Нужна какая-то изюминка, которая выделит вас из кучи одинаковых профилей и проектов.

И крепите фото/демки ваших проектов в твиты о поиске работы. Попробуйте стать "чуваками с домиком"

🔽

Если поначалу не очень получится - ну и ладно. У всех с первого раза не получается, серьезно.

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

Как минимум, вам это добавит творческую нотку и в проектики.

Бесстрашно экспериментируйте! 🌸

@fillpackart @M0rtyMerr @the2pizza

Редко прошу ретвитов именно моих каких-то тредов, но тут попрошу. Я эту портянку ваяла 2 часа, готовила неделю, и она многим поможет ❤️

https://twitter.com/yury619/status/1526601029718089730

https://twitter.com/toitututo/status/1526596476138299393