Как известно дизайнер — это человек, который проектирует тот, или иной проект, будь-то веб-продукт или полиграфический материал, для создания проекта нам необходим материал с которым мы будем работать и создавать будущий визуальный образ.
Для этого нам необходимы шрифты, фотографии, иллюстрации и другие дополнительные средства для реализации нашей задумки. Я подготовил ссылки на различные источники и ресурсы, которые Вам могут пригодиться при создании дизайн продуктов.
49 полезных ссылок, которые помогут Вам в реализации Ваших проектов:
Интеллект-карты для создания структуры и архитектуры будущего проекта:
Для того, чтобы структурировать информацию и построить логическую цепочку проекта удобно использовать интеллект-карты,
так как при проектировании очень важно правильно учитывать вложенность и доступность информации, которая будет представлена пользователю в новом проекте.
Coggle.it — онлайн сервис с достаточно большим функционалом для разработки сложных цепочек взаимодействия и переходов
в виде карты.
XMind — Еще один инструмент для создания интеллект-карт для любой задачи связанной с продумыванием и созданием логических цепочек, в отличии от предыдущего сервиса есть десктопная версия для платформы: macOS, Windows.
Программы и сервисы для создания прототипов:
Сейчас есть много программ и онлайн сервисов для создания прототипов, я же расскажу, о тех, которыми пользуюсь сам:
Axure — одна из первых программ с интерактивным прототипирование с возможностью показать схематично как будут располагаться блоки и как будет работать будущий проект. Программа платная.
Figma — в этой программе вы сможете создать прототипы, не только для сайтов, но и для мобильных приложений.
Программы для создания веб-дизайна:
Adobe Photoshop — мощный инструмент по работе с растровой графикой, один из первых, в котором начинали рисовать макеты сайтов, сейчас на рынке очень много хороших и удобных инструментов для создания веб-дизайна таких как Skech, Figma, Affinity и т.д..
Figma— этот инструмент, который я упоминал ранее для создание прототипов, но его возможности намного шире с его помощью вы можете так же создавать дизайн. Это удобный современный инструмент который облегчит жизнь многим дизайнерам занимающимся разработкой интерфейсов и мобильных приложений. На момент написания данной статьи, этот продукт абсолютно бесплатный плюс он имеет как десктопный вариант так и версию сервиса в браузере.
Adobe Illustrator — отличный инструмент для создания векторных иллюстрации, иконок, логотипов и т.д. При разработке сайтов очень часто использую его в связке с Photoshop. Для создания графических элементов требующих векторных форматов таких как SVG.
Конвертеры форматов:
Сервисы для конвертации favicona из jpg и png в формат ico:
Pr-cy.ru — удобный сервис за считаные минуты генерирует Вам значок favicona.
Favicon.by — на этом сервисе Вы сможете так же без труда конвертировать favicon, но и нарисовать находясь на нем.
Online-convert.com — на этом сервисе большой выбор форматов для конвертации, возможно он Вам понадобиться для других целей, а не только для создания favicona.
Градиенты:
Uigradients.com — сервис с большим выбором красивых градиентов, с возможностью скачать jpg и посмотреть код CSS, а также скопировать шестнадцатеричный код цвета.
Webgradients.com — ещё один сервис с готовыми градиентами.
Gradients.io— довольно простой сервис с примерами и шестнадцатеричным кодом цвета.
Цвета:
Materialui.co — цветовая палитра материал дизайна.
Colorscheme.ru — справочник с названиями цветов и их кодировкой для использования.
Adobe Color — цветовой круг от компании Adobe. Большой выбор настроек и готовых решений по выбору цвета.
Шрифты:
Google Fonts — Одна из моих любимых библиотек шрифтов к тому же бесплатная и оптимизированная для подключения
шрифтов к сайту.
Fonts-online.ru — с большим количеством шрифтов на любой вкус и тематику.
Иконки:
Freepik — большой ресурс где есть не только иконки, но и растровая и векторная графика которая Вам пригодиться в работе.
Тут есть как бесплатный материал так и платный.
Flaticon — еще один ресурс с иконками.
Icons8 — большие коллекции иконок разбитые на разделы с их помощью вы сможете подобрать единообразный графический контент для своего сайта, не нарушая стилистику своего проекта.
Icon-icons — на этом ресурсе представлены иконки и изображения в png, ico, icnc форматах.
Также рекомендую использовать в своих проектах шрифтовые иконки которые можно подключить к сайту как шрифт, в процессе верстки вы увидите насколько это удобно и как это ускоряет вашу работу.
Material.io — иконки материал дизайна.
Fontawesome.ru — шрифтовые иконки которые можно подключить к сайту.
Фотостоки:
Pexels — фотобанк с бесплатными фотографиями.
Foodiesfeed — еще один набирающий обороты стоковый ресурс.
Picjumbo — и заключительный в моем рейтинги бесплатных стоковых сервисов.
Shutterstock — самый крупный платный сток с качественной графикой.
Сжатие кода:
На данном этапе развития css есть такие технологии как Sass и Lass, которые сжимают код и ускоряют работу верстальщику.
Здесь пойдет речь не он них а о сервисах которые сжимают CSS, HTML, JAVAscript:
Cssresizer.com — сервис по сжатию CSS файлов.
Htmlcompressor.com — сервис по сжатию HTML файлов.
Closure-compiler.appspot.com — сервис по сжатию JS файлов.
Сокращение ссылок:
Is.gd — Бесплатный инструмент для сокращения ссылок имеет минимум возможностей и простой интерфейс.
Bit.do — еще один сервис для сокращения ссылок от бразильской компании insite.
Tinyurl.com — простой и удобный сервис для сокращения ссылок.
Vk.cc — сокращение ссылок от vk.
Инструменты планирование:
Trello — удобный способ планировать дела и ставить задачи.
Thunderbird — почтовый клиент с возможностью ставить задачи и выставлять им срок.
Wunderlist — управление проектами и планирование выполнения как личных задач так и профессиональных.
Инструменты связи для работы с клиентами:
Thunderbird — почтовый клиент для отправки и приема писем.
Skype — программа для совершения звонков и ведения чата. Часто использую при работе с клиентами с других стран.
WhatsApp — с WhatsApp вы получите быстрый, простой, безопасный опыт обмена сообщениями и возможность совершения звонков абсолютно бесплатно. Доступно на телефонах по всему миру.
Viber — аналог WhatsApp тоже полезный инструмент для общения с клиентами.
Telegram — лучший мессенджер в мире с поддержкой для установки, как на телефон, так и на компьютер. С возможностью передавать файлы без сжатия.
Контроль времени:
Pomidorko — сервис контролирующий перерывы вовремя работы.
Tmetric — учет рабочего времени.
Simple Time Track — расширение для Google Chrome. Чтобы начать учет времени, нужно добавить новую задачу и запустить таймер. Отсчет будет идти до тех пор, пока таймер не остановят. В будущем к любой из остановленных задач можно вернуться и запустить таймер снова. Дополнительное время прибавится к тому, что было подсчитано ранее. Это может понадобиться в том случае, если задачу невозможно выполнить за один присест и приходится прерываться, чтобы заняться чем-то другим.
Вдохновение:
Pinterest — лучший сервис для поиска референсов.
Onepagelove — топовые веб-проекты со всего мира.
Dribbble — дизайн сообщество, на котором размещены лучшие работы со всего мира в области веб и графического дизайна.
Behance — сайт с кейсами дизайнеров. Много качественных и интересных работ, идеальное место что бы вдохновиться на создание чего-то нового и выдающегося.
Artstation — отличная площадка для иллюстраторов здесь представлены лучшие работы в сфере 2D и 3D иллюстрации.
В данной статье я представил основной набор ссылок на ресурсы, которыми пользуюсь сам, но конечно есть и другие инструменты и сервисы которые тут не упомянуты. Я постарался охватить только главное и основное. Надеюсь данная статья была полезна и Вы что то подчеркнули для себя.