Как и в любой другой профессии, веб-дизайнер требует постоянного обучения. Дополнительные знания об инструментах, которые помогут выделить ваши творения, окупаются. Рассмотрите возможность добавления этих двенадцати бесплатных инструментов для веб-дизайна (плюс один «дочерний сайт») в свой арсенал, чтобы вывести свои навыки и дизайн на новый уровень.
Построен с
Если вам интересна структура дизайна сайта, его DNS и установленные приложения, попробуйте Built With. Просто введите URL-адрес интересующего вас сайта и нажмите «Поиск». Результат покажет, какие элементы установлены, что позволит вам использовать эту информацию для создания или украшения вашего собственного веб-дизайна. Этот инструмент чрезвычайно удобен, когда вы испытываете благоговейный трепет перед впечатляющим сайтом и начинаете интересоваться «движками», стоящими за ним.
Совет. Начните с тестирования своего собственного сайта и других популярных сайтов, чтобы увидеть, какие «серверные» приложения используются.
Школы W3
W3 Schools предоставляет учебные пособия, справочники и примеры для создания веб-страниц на стороне клиента и на стороне сервера с помощью HTML, CSS, JavaScript, SQL, PHP, ASP, Node.js, XML, XQuery и других. Он также предоставляет различные веб-шаблоны, статистику и сертификаты, которые вы можете сразу же применить к своему сайту. Просто выберите уроки, которые хотите изучить, нажмите «Демонстрация» и «Попробуйте сами». Вы попадете на страницу, на которой показаны используемые HTML-коды, которые можно сравнить с внешним видом в учебных целях.
Совет: если вы самоучка, этот сайт действительно может улучшить ваши навыки.
Инструмент оценки веб-доступности WAVE
Могут ли люди с ограниченными возможностями эффективно использовать ваш сайт? Чтобы узнать, используйте WAVE. Вам просто нужно ввести URL-адрес и нажать «вернуться». Механизм WAVE предоставит сводку обо всех ошибках, предупреждениях и структурных элементах, которые можно использовать для улучшения общей доступности сайта.
Совет: WAVE — это лишь один из многочисленных инструментов оценки доступности. Это один из самых простых в использовании и не требует регистрации.
Редактор HTML-кода
Предварительный просмотр того, как ваш HTML-код действительно выглядит для внешних пользователей, чтобы вы знали, что отсутствует или сломано, если что. Чтобы использовать этот бесплатный редактор кода HTML, просто введите или скопируйте и вставьте код HTML в поле слева; предварительный просмотр будет отображаться справа.
Совет: Мастер тегов поставляется с предварительно закодированными тегами, которые вы можете использовать для включения в свой проект. Вы также можете добавить свои собственные теги.
Снимки браузера
С таким количеством браузерных приложений на множестве устройств, как вы можете быть уверены, что ваш сайт будет хорошо выглядеть на всех из них? Попробуйте снимки из браузера. Введите свой действующий URL-адрес и выберите браузеры для проверки, включая несколько версий на разных платформах.
Совет. Предварительный просмотр может занять некоторое время, так что наберитесь терпения.
Поиск Creative Commons
Creative Commons Search — это портал для поиска изображений, видео и музыкальных клипов, защищенных правами Creative Commons. Цифровые активы, лицензированные как таковые, часто можно свободно использовать как в личных, так и в коммерческих целях, включая совместное использование и адаптацию, при условии, что вы предоставляете кредит создателю и указываете, были ли внесены изменения. Обязательно дважды проверьте версию лицензии Creative Commons, так как разрешения могут различаться. Этот портал включает прямой поиск по популярным источникам, таким как Flickr, Google Images, SoundCloud, YouTube, Pixabay, Jamendo и другим.
Совет: находить ресурсы Creative Commons на этом сайте очень удобно. Вам больше не нужно переходить с сайта на сайт в поисках бесплатных элементов для использования.
Психология цвета в маркетинге и брендинге
Первоначально опубликованная на Help Scout, « Психология цвета в маркетинге и брендинге» представляет собой исчерпывающую статью, в которой исследуется, как цвет может повлиять на взаимодействие с пользователем. Это бесценно для веб-дизайнера. Внимательно прочитав эту статью, вы можете использовать информацию для мозгового штурма и объяснить своим клиентам, что иногда то, что им нравится, может быть не лучшим цветом для привлечения предполагаемых посетителей.
Совет: держите эту статью под рукой при обсуждении цветовых палитр с клиентами.
Цвет Adobe
Color от Adobe — один из лучших цветовых кругов. Вы можете легко перетащить курсор в любое место, чтобы изменить цветовую схему. Вы можете использовать правила цветов или исследовать готовые комбинации и темы. Среди буквально тысяч цветовых комбинаций обязательно найдется та, которая понравится вам или вашему клиенту.
Совет: поиграйте и удивитесь бесконечным возможностям выбора. Вы можете использовать этот веб-инструмент без входа в систему.
Гратисография
Найдите бесплатные изображения высокого разрешения для личных и коммерческих целей без каких-либо ограничений авторского права на Gratisography. Причудливая категория — это истерика, которая идеально подходит для поиска беззаботных и забавных изображений для постов в блоге или любых других проектов.
Совет: имейте в виду, что на Shutterstock есть ссылки на платные изображения. Они не бесплатны, и для их загрузки у вас должна быть учетная запись на Shutterstock.
Мокапмир
Mockupworld — это место, где можно найти макеты смартфонов, ноутбуков, футболок, книг, вывесок, рекламных щитов и упаковок. Это пустые изображения, на которые вы можете добавить свои логотипы или изображения или логотипы вашего клиента.
Совет: Mockupworld предлагает как бесплатные, так и платные макеты всего, что вы можете себе представить. Если вы зарегистрируетесь, вы сможете скачать что угодно с их сайта бесплатно в течение семи дней.
Король текстур
Чтобы проиллюстрировать веб-сайт, иногда вам нужно создать изображения с текстурированным фоном. Король текстур выдает множество изображений грязи, штукатурки, бетона, ржавчины, дерева, краски, камня, камня, металла, пластика, жидкости и многих других. Когда вы объединяете эти изображения с другими изображениями, результат может быть захватывающим.
Совет: изображения доступны на Creative Commons, что означает, что вы должны указывать источник, и полученная работа не может распространяться без предварительного разрешения.
Брашизи
Если вы используете PhotoShop или его заменитель, такой как Pixelmator, вам пригодятся эти PSD-кисти, узоры и текстуры, предлагаемые Brusheezy бесплатно. Их можно использовать для создания новых изображений и обработки существующих изображений с профессиональными результатами. Родственный сайт Videezy предоставляет бесплатные видеоклипы, которые также очень полезны при разработке сайтов с заголовком видео.
Совет. Хотя цифровые ресурсы, предлагаемые на обоих сайтах, доступны на Creative Commons, эти сайты также продают платные изображения от Shutterstock. Помните о платных разделах, чтобы по ошибке не загрузить платные активы.
Обучение на протяжении всей жизни для веб-дизайнеров
Многие веб-дизайнеры самоучки. С таким количеством бесплатных инструментов и ресурсов в Интернете нет оправдания тому, чтобы не повышать свои навыки. Вам просто нужно искать и искать конкретные вещи, которые вам нужны. Скорее всего, они доступны бесплатно (по крайней мере, в течение пробного периода). Приятного обучения!