30 советов, как научиться веб-дизайну за 30 дней
Изучение основ веб-дизайна все еще в вашем списке «когда-нибудь»? Почему вы еще не начали? Мы собрали 30 советов и ресурсов, которые помогут вам начать изучать веб-дизайн в этом месяце (и, возможно, даже найти для себя новую карьеру!)
Графические дизайнеры, дизайнеры полиграфии и креативщики, желающие узнать что-то новое или проникнуть в веб-сайт, должны перестать откладывать на потом. Каждый день, когда вы не делаете первый шаг, оставляет вас на один день позади всех остальных!
Выполните следующие действия, чтобы научиться создавать свой первый веб-сайт, ознакомиться с передовыми методами работы и многим другим — и все это за 30 дней!
1. Запустите веб-сайт
Лучший способ начать изучать веб-дизайн — начать им заниматься. Это совет от Дэвида Кадави, автора книги «Дизайн <для> хакеров».
Вам не нужно начинать с огромного веб-сайта или сумасшедшего дизайна; начни с малого. Поиграйте с веб-сайтом, выясните, что заставляет вещи работать. (И обязательно проверьте код, чтобы вы могли начать знакомиться с тем, что заставляет ваш сайт работать.)
Хотите быстро начать? Сначала создайте визуальную карту сайта. Затем конструктор веб-сайтов, такой как Wix, может помочь вам начать работу со стильным дизайном веб-сайта, когда вы начнете изучать концепции и строительные блоки того, что входит в веб-сайт.
2. Читайте все, что можете
Начните читать. Поскольку вы находитесь в этом блоге, вы, вероятно, привыкли следить за тем, что происходит в мире дизайна. Продолжай читать.
Прочтите все, что сможете, о дизайне веб-сайтов, тенденциях, методах и лучших практиках. Подпишитесь на дизайнеров, которыми вы восхищаетесь, в социальных сетях.
Закиньте широкую сеть для чтения дизайна вашего веб-сайта. Прочтите об основах, чтобы изучить код, ознакомьтесь с теорией проектирования, а также ознакомьтесь с учебными пособиями и текущими статьями.
3. Будьте эффективным коммуникатором
Если вы не самый красноречивый человек, освежите эти навыки. Большая часть дизайна веб-сайта — это общение.
Дизайнеры веб-сайтов должны регулярно общаться с клиентами, чтобы выяснить, какую проблему должен решить дизайн; они должны сообщать об этих решениях и реализовывать их.
4. Подпишитесь на Tuts+ и Envato Elements
Подумайте о подписке на Envato Elements, которая также дает вам доступ к превосходному учебному ресурсу Tuts+.
Tuts+ регулярно публикует курсы по графическому и веб-дизайну, от базовых техник до новейших передовых подходов и разработок. Это полностью самостоятельное обучение, проводимое опытными инструкторами. Вы также получите доступ к Envato Elements, который является отличным ресурсом для поиска графики, шаблонов и многого другого для вашей работы по веб-дизайну.
5. Думайте в HTML
HTML, или язык гипертекстовой разметки, является краеугольным камнем веб-дизайна. HTML — это скелет, который помогает создать структуру веб-сайта, и как только вы научитесь читать язык, мир веб-дизайна станет намного понятнее.
В W3Schools есть отличный учебник по HTML для начинающих с сотнями примеров HTML, с которыми вы можете поиграть на экране, чтобы увидеть, что происходит и как именно это работает. (Вы можете найти его более интуитивным, чем вы себе представляли.)
6. Играйте с кодом в Codeacademy
Хотя HTML — хорошее начало, вы можете выучить практически любой язык программирования в Codeacademy. Бесплатный набор инструментов научит вас программировать с помощью интерактивных занятий и игр.
Вы можете выбрать курс Codeacademy, где и когда он вам нужен, а также начинать и останавливать его по мере необходимости. Выберите предмет для изучения — веб-разработка, программирование, наука о данных — или язык, на котором нужно сосредоточиться — HTML и CSS (отличное место для начала), Python, Java, SQL, Ruby и другие.
7. Научитесь понимать CSS
CSS или каскадные таблицы стилей определяют представление документа, написанного на HTML, XML и SVG.
Как определено Mozilla
В Mozilla также есть отличная коллекция ресурсов CSS для начала работы с подробным описанием того, как работает CSS, включая селекторы и свойства, написание правил CSS, применение CSS к HTML, как указать длину, цвет и другие единицы измерения в CSS, каскадирование. и наследование, основы блочной модели и отладку CSS. Затем модули переходят к объяснению стилей текста и полей.
Если вы уже работаете в области креативного или графического дизайна, подумайте о том, что вы уже знаете, и что вы можете применить к дизайну веб-сайтов. Принципы, которые делают что-то визуально привлекательным, не меняются в зависимости от среды, и вся эта теория дизайна пригодится и в цифровом пространстве.
Хотя такие элементы, как изучение кода, могут показаться неестественными, наличие опыта проектирования — огромный бонус. Что хорошего в красиво оформленном веб-сайте, если никто не хочет с ним взаимодействовать?
9. Обратите внимание на сайты, которые вам нравятся
Обратите внимание на сайты, которые вам нравятся. Что в них вас привлекает? (И как научиться воспроизводить эти элементы?) Обратите внимание на:
- Типография
- Навигация
- Использование изображений и пространства
- Дизайн форм
- Анимация и эффекты прокрутки
- Цвет
10. Нарисуйте каркас
Вайрфрейминг — это мозговой штурм веб-дизайнера.
В чистом виде вайрфрейм — это набросок того, каким будет веб-сайт. Это не наброски эстетических элементов, а план сайта. Рисование каркаса на самом деле не касается внешнего вида этого дизайна, а его информационной структуры.
11. Найдите время, чтобы изучить Sketch
Sketch — это инструмент векторного рисования для Mac, который упрощает создание элементов дизайна. Многие дизайнеры обращаются к Sketch для создания элементов пользовательского интерфейса и повторяющихся блоков дизайна.
Он содержит плагины и позволяет экспортировать код для удобства использования и доступа. Это один из самых мощных и популярных инструментов со времен Adobe Creative Suite, который стоит вашего времени.
12. Будьте в курсе технологий
AI, VR, AR, 360-градусное видео, боты.
Может быть трудно идти в ногу с таким количеством новых технологий и тенденций. Но вам нужно поставить точку, чтобы оставаться в курсе этих изменений.
Решайте их по очереди и начинайте с технологий, которые наиболее непосредственно связаны с вашей работой. Если у вас есть веб-сайт с онлайн-чатом, начните с изучения ботов. Или, если вы используете много видеоконтента, поэкспериментируйте с 360-градусным видео.
Такие элементы, как искусственный интеллект и виртуальная или дополненная реальность, еще более сложны, но, вероятно, станут неотъемлемой частью ландшафта дизайна веб-сайта в будущем. Как минимум, вы должны знать, что это такое и каковы потенциальные возможности их использования.
13. Освойтесь с SEO
В то время как многие веб-дизайнеры думают, что специалист по SEO может справиться с подготовкой веб-сайта для поисковых систем, существует много дизайнерской работы, связанной с SEO.
Начиная с способа загрузки изображений и заканчивая созданием чистого и быстрого кода и включением метаописаний на страницы и элементы, дизайнер должен включить поисковое мышление в свой рабочий процесс.
Фрилансеры, это жизненно важно и для вас. Большинство клиентов достаточно сообразительны, чтобы попросить SEO-оптимизированный веб-сайт. Если вы работаете в одиночку, вам нужно знать достаточно, чтобы создать прочную структуру, которую Google сможет прочитать (и иметь возможность направить клиента к специалисту по SEO, если необходимо проделать дополнительную работу).
14. Играйте с конструктором сайтов
Конструктор веб-сайтов может стать отличным способом освоить лучшие практики и начать создавать и проектировать веб-сайты.
Большинство этих инструментов имеют множество шаблонов и позволяют настраивать элементы и даже добавлять фрагменты кода. Для простых сайтов у многих создателей веб-сайтов также есть бесплатный план, в котором вы можете создать личную страницу портфолио или базовый веб-сайт, который послужит вам игровой площадкой.
Затем разберите части в конструкторе веб-сайтов. Посмотрите, как они спроектированы и закодированы, чтобы понять, как все это объединяется. Вы будете поражены тем, что вы можете понять, просто разобрав другой дизайн.
15. Найдите наставника
Есть ли кто-то, с кем вы работаете, кем вы восхищаетесь как веб-дизайнером? Пригласите их на обед и расспросите их об отрасли.
Поиск наставника, который готов работать с вами и помогать вам думать об этой области и о том, как самостоятельно изучать веб-дизайн, может быть неоценимым. И хотя вы, вероятно, можете найти наставника в онлайн-сообществе, нет ничего лучше, чем живой человек, с которым вы можете периодически встречаться лицом к лицу. (Возможно, стоит иметь наставников онлайн и лично.)
16. Присоединяйтесь к сообществу CodePen
Как только вы освоитесь с кодом и программированием, вы захотите присоединиться к сообществу CodePen. Сообщество с открытым исходным кодом позволяет вам делиться и редактировать фрагменты кода в своего рода социальной сети.
Вот еще немного от основателей сайта: «CodePen — это социальная среда разработки. По сути, он позволяет вам писать код в браузере и видеть его результаты по мере сборки. Полезный и освобождающий инструмент для разработчиков с любыми навыками, особенно для тех, кто учится программировать. Мы фокусируемся в первую очередь на интерфейсных языках, таких как HTML, CSS, JavaScript, и синтаксисе предварительной обработки, которые превращаются в эти вещи».
17. Возьмите урок
Некоторым учащимся лучше всего подойдет более формальная обстановка в классе.
Доступно множество классов — очных и онлайн — для изучения основ веб-дизайна. Начните с местного колледжа или центров онлайн-обучения, таких как Udemy или Coursera. Выберите класс на своем текущем уровне способностей и просто продолжайте двигаться вперед.
18. Хотите что-нибудь сделать? Погугли это
Для нетрадиционных учеников найдите ответ на проблему веб-дизайна в Google. Доступно так много учебных пособий и видеороликов, которые помогут вам решить практически любую проблему и решить ее.
Ключ в том, чтобы искать именно то, что вам нужно знать, и искать ответ в авторитетном источнике. Вот еще один совет, когда дело доходит до руководств и видео — более свежий контент, вероятно, даст вам лучший, более полный и более актуальный ответ. (Помните, некоторые вещи быстро меняются.)
19. Обратите внимание на пользовательский опыт
Ничто не может сделать или разрушить веб-сайт так, как дизайн пользовательского интерфейса. Вы должны спланировать это и понять это.
Вот как Interaction Design Foundation описывает UX-дизайн:
20. Обратите внимание на тенденции дизайна
Как выглядит современный дизайн сайта? Это не вопрос с подвохом. Чтобы разрабатывать современные веб-сайты и пользовательский интерфейс, вам необходимо знать, чего хотят пользователи и как они с этим взаимодействуют. Если в последний раз вы загружали приложение или просматривали веб-сайт на своем телефоне в 2016 году, у вас есть много причин, чтобы наверстать упущенное.
Создание дизайна веб-сайта с современными штрихами и тенденциями, интегрированными в дизайн, поможет вашим проектам выделиться. Как узнать, что в тренде? Продолжайте читать подобные сайты и обращайте внимание на то, что делают другие дизайнеры. Обратите внимание на цвета, стили и особенности веб-сайтов, которые вы часто посещаете.
21. Создать без цвета
Начинайте каждый дизайн без цвета. Великий дизайнер однажды сказал мне, что если ваш дизайн работает в черно-белом цвете, он будет безупречен в цвете.
Возможно, это не всегда так, но это отличная отправная точка.
Создавая проекты в черно-белом цвете, вы можете увидеть, где элементы контрастируют и как они сочетаются друг с другом. Вы исключили любые эмоциональные ассоциации с цветом или движением глаз, которые возникают из-за этого. Эта простейшая форма дизайна даст вам представление о том, работает ли что-то в качестве концепции, прежде чем вы перейдете к окончательной доработке.
22. Научитесь любить шрифты Google
Google Fonts — ваш друг.
Независимо от того, как вы относитесь к Google, возможность просматривать, сортировать и выбирать шрифты, которые, как вы знаете, будут работать в дизайне веб-сайтов, важна. Вам не нужно думать о лицензировании или о том, совместимы ли шрифты с конкретными браузерами или нет.
Ограничение заключается в том, что у вас есть только то, что есть в библиотеке Google Fonts для работы. Но если постараться, то можно найти что-то, что подойдет практически для любого проекта. Это сэкономит вам много времени в долгосрочной перспективе.
23. Выберите комплект пользовательского интерфейса
Загрузите пользовательский интерфейс или набор значков и разберите его.
Точно так же, как вы можете проверить код веб-сайта, посмотрите, как создаются элементы дизайна для Интернета. Обратите внимание на масштаб и сетку, посмотрите на сочетания цветов и организацию файлов в Photoshop или Illustrator.
Ищите комплект для загрузки, который включает элементы в нескольких форматах для дисплеев с высоким разрешением. (Загрузка нескольких файлов JPEG не принесет вам пользы.)
Затем попробуйте создать или настроить один или два элемента самостоятельно.
24. Станьте типографом
Современный дизайн веб-сайтов сильно ориентирован на типографику… хорошую типографику. От главных заголовков с гигантскими словами до слоев текста, которые вовлекают пользователя в дизайн, понимание принципов того, как соединять элементы шрифта и создавать привлекательные текстовые блоки, жизненно важно.
Начните с книги Эллен Луптон «Думая шрифтом». (Есть также одноименная книга.) Луптон — авторитет в области типографики, и ее информация мгновенно заставит вас думать как типограф.
25. Перейти к JavaScript
Когда вы начнете чувствовать себя довольно хорошо, занимаясь веб-дизайном, снова бросьте себе вызов, изучая JavaScript. После HTML и CSS это самый важный язык в Интернете.
JavaScript — это инструмент, который позволяет дизайнерам реализовывать сложные вещи и взаимодействие на веб-страницах. Это то, что заставляет слайдер скользить или оживлять анимацию параллакса.
В Learn JS есть интерактивный учебник, который поможет вам начать работу.
26. Обновите свое портфолио
Как только вы начнете разрабатывать для Интернета, обязательно обновите свое портфолио проектами веб-дизайна. Это простое действие поможет вам показать себе… и другим… что веб-дизайн – часть вашего репертуара.
Обновленное портфолио может помочь потенциальным клиентам увидеть, как выглядит ваш «стиль». Обязательно продемонстрируйте макеты, цвета, типографику и различные методы, которые показывают, на что вы способны.
27. Испытайте себя
С таким количеством ярлыков и фрагментов кода, которые помогут вам решить практически любую проблему с веб-сайтом, не ленитесь. Не забывайте постоянно бросать себе вызов, чтобы осваивать новые навыки, новые технологии и постоянно совершенствовать свою игру в веб-дизайне.
Единственное, что касается этого поля, это то, что оно постоянно меняется; всегда есть что-то новое, чтобы узнать или попробовать.
28. Максимизируйте свой опыт
Иди туда и проектируй. Вы должны начать разрабатывать веб-сайты, чтобы стать веб-дизайнером.
Начните с малого, но берите проекты вместе с другими. Попросите присоединиться к проекту с командой на работе. Займитесь небольшим веб-сайтом для друга. Чем больше у вас опыта в создании сайтов, тем лучше и быстрее вы будете работать.
Чего же ты ждешь? Перестаньте откладывать.
29. Спросите об обратной связи
Используйте свою сеть для сбора отзывов о проектах дизайна вашего веб-сайта, какими бы маленькими вы их ни считали. Прислушайтесь к этой обратной связи, даже если она вам не нравится, и посмотрите, чему вы можете научиться.
Помимо визуальных предпочтений, предлагал ли человек, оставивший отзыв, предложения по улучшению работы веб-сайта? Могли ли они легко понять цель дизайна? Они подключились к обмену сообщениями?
30. Продолжайте учиться новому
Чтобы стать отличным дизайнером веб-сайтов, вам просто нужно продолжать играть, пробовать и узнавать новое. Обратите внимание на сеть и общение с другими людьми в этой области, чтобы быть в курсе методов и визуальных изменений, которые пользуются спросом.
Если вы хотите научиться дизайну веб-сайтов, то, вероятно, вы уже регулярно этим занимаетесь. Но это развивающаяся область, и она продолжает меняться почти каждый день. Просто спросите любого, кто этим занимается.
