Что требовать верстальщику от дизайнера — Создание сайтов

Урок #3: Заканчиваем создание скетча

  • Формат: e-mail курс
  • Продолжительность: 5 дней
  • Сертификат: Да

Этот e-mail курс — настоящая находка для новичков. В нем вы узнаете, как создать свой веб-ресурс с помощью адаптивного конструктора сайтов MotoCMS. В течение курса вы научитесь выбирать хостинг и домен для сайта, работать с админ панелью MotoCMS, создавать новые страницы и разделы сайта, работать над дизайном и настраивать витжеты.

Руководства будут приходить на ваш e-mail ежедневно, чтобы вы могли изучать информацию поэтапно. При необходимости вы сможете задать вопрос своему персональному наставнику, а по окончании курса каждый студент бесплатно получит сертификат.

  • Формат: интерактивный курс
  • Продолжительность: 3 недели
  • Сертификат: Нет

https://www.youtube.com/watch?v=upload

Этот курс ориентирован на изучение основ веб-разработки — языков HTML и CSS. Курс состоит из 900 заданий, но только 300 из них бесплатны. Тем не менее, авторы курса уверяют, что после выполнения бесплатных заданий вы уже сможете создать свой сайт. В среднем при регулярных занятиях студенты успевают выполнить 300 заданий за три недели — скорее всего, именно столько времени у вас уйдет на освоение бесплатной части курса.

Курс состоит из интерактивных заданий, при выполнении которых вы научитесь создавать HTML-страницы, оформлять их с помощью каскадных таблиц стилей (CSS), работать с LESS и создавать SVG-фигуры. В процессе занятий вас будет сопровождать очаровательный инструктор — кот Кекс, поэтому скучать не придется!

  • Формат:текстовые руководства
  • Продолжительность:1 час
  • Сертификат:Нет

Проект Hexlet предлагает различные курсы по созданию сайтов, большинство из которых — платные. Этот курс является базовым, поэтому доступ к нему могут получить все желающие. Всего за час вы познакомитесь с языком разметки HTML и технологией CSS, узнаете все о современных хостингах и поймете, чем отличаются frontend- и backend-разработка.

  • Формат: видеокурс
  • Продолжительность: 4,5 часа
  • Сертификат: Да

Этот авторский курс от веб-разработчика Сергея Никонова наверняка поможет вам приобрести важные базовые навыки и научит писать код. В течение курса вы научитесь создавать верстку сайтов на HTML и CSS, работать с текстовым редактором Sublime Text 3 и плагинами для него, а также научитесь создавать адаптивные сайты.

  • Формат:текстовое руководство
  • Сертификат:Нет

Для кого эта статья

Эта статья для клиентов, дизайнеров и верстальщиков — все они заинтересованы в том, чтобы создание сайта было как можно более эффективным. 

Клиент, как самое заинтересованное лицо, должен понимать, что работы дизайнера и верстальщика тесно взаимосвязаны. От качества исполнения работы дизайнера зависит качество работы верстальщика.

Что требовать верстальщику от дизайнера — Создание сайтов

Чем лучше свою работу выполнит дизайнер, тем меньше его будут отвлекать в дальнейшем.

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

И чем меньше в головах людей будет мелькать мысль «проблема не на моей стороне», тем лучше для всех. 

Итак, поехали.

Урок #10: Дизайн секций “Отзывы”, “Контакты” и подвала

Фото на обложке: ShutterStock

  • Формат: видеокурс
  • Продолжительность: 1,5 часа
  • Сертификат: Нет

В рамках этого курса веб дизайн обучение проводит веб-разработчик Владислав Гриценко. Курс состоит из трех лекций: “Как стать веб-дизайнером?”, “Исследование и поиск идей” и “Прототипирование”. В ходе этих лекций вы узнаете основы веб-дизайна и получите ресурсы для дальнейшего развития. По окончании каждой лекции студентам предлагается выполнить домашнее задание и отправить результат на почту преподавателю. В обсуждениях к лекциям вы сможете задать вопросы и пообщаться с одногруппниками.

  • Формат: видеокурс
  • Продолжительность: 1,5 недели
  • Сертификат: Да

Что требовать верстальщику от дизайнера — Создание сайтов

Этот курс доступен не всегда, но регулярно набираются новые потоки студентов, поэтому записываться нужно заблаговременно. В течение курса вы узнаете, каковы признаки хорошего дизайна, а также создадите свой первый скетч, прототип и макет сайта. Вы сможете общаться с одногруппниками и выполнять домашние задания, а по окончании курса получить сертификат. Курс состоит из трех уроков и длится полторы недели.

  • Формат: видеокурс
  • Продолжительность: 7 лекций
  • Сертификат: Да

Обычно проект Wayup предлагает платное веб дизайн обучение, но этот курс стал исключением. Прослушав 7 видеолекций, вы научитесь работать с Adobe Photoshop, будете понимать архитектуру веб-приложений и сможете создавать адаптивные сайты. В течение курса вам будут предложены домашние задания, за которые наставник сможет выставлять оценки. Разумеется, у вас также будет возможность пообщаться с наставником и задать ему вопросы.

  • Формат: видеокурс
  • Продолжительность: 47 минут
  • Сертификат: Нет

Этот курс ориентирован на конкретную задачу: создание сайта-портфолио. Тем не менее, в курсе большое внимание уделяется работе в Photoshop, поэтому он будет полезен абсолютно всем новичкам. В течение курса вы создадите базовый макет сайта и его мобильную версию, а также научитесь работать с модульной сеткой. Пообщаться с автором курса или одногруппниками можно только в комментариях к конкретным лекциям.

Примечание: Эти плагины упростят вашу работу с редактором Photoshop.

  • Формат: видеокурс
  • Продолжительность: 1 день
  • Сертификат: Нет

Курс состоит из восьми уроков, которые при желании можно изучить за один день. Автор курса утверждает, что в процессе обучения вы создадите готовый макет лендинга, который сможете использовать для своих целей. В течение курса вы освоите основы работы с Photoshop, научитесь создавать разметку и блоки лендинга, а также работать с интерактивными элементами. К каждому уроку предлагаются исходники и вспомогательные материалы, что очень удобно для обучающихся.

Разумеется, все онлайн-курсы по созданию сайтов невозможно описать в одной статье, ведь с каждым днем в интернете появляются новые обучающие материалы. Возможно, вы знаете другие курсы, которые не вошли в подборку? Обязательно расскажите нам о них в комментариях!

Что требовать верстальщику от дизайнера — Создание сайтов

Надеемся, что ваше веб дизайн обучение будет эффективным и вы достигнете желаемого результата. Удачи вам и вдохновения! А если проект уже готов, и Вам нужен хороший хостинг пря проектов – в качестве бонуса, вы можете купить хостинг на год от нашего партнера Inmotion всего за 1$.

Купить хостинг за $1

Шрифты

Стандартных шрифтов достаточно для 99% сайтов. Но, как обычно, всё упирается либо в буйную фантазию клиента, которому нужен нескучный сайт, либо в творческую личность дизайнера, который хочет использовать все шрифты, которые он когда-то скачал в наборе «1000 восхитительных шрифтов». 

Где F — количество сторонних шрифтов, M — количество макетов, S — зарплата дизайнера, а G = 0.

https://www.youtube.com/watch?v=ytcreatorsru

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

Изображения

Хорошие браузеры начали поддерживать прозрачность PNG задолго до того, как многие верстальщики сдали ЕГЭ. Поэтому, если в макете используются какие-то иллюстрации, фон которых зависит от цвета фона блока (особенно если этот цвет меняется динамически, например, при наведении), в котором он находится, то в макете такая иллюстрация должна быть с прозрачным фоном.

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

Изображения без прозрачного фона

Такое зачастую бывает, когда дизайнер накачал со стоков изображений вместо их отрисовки и вставил в макет. И если вовремя не заметить такой халтуры, то решений несколько: ждать неделями от «дизайнера» эти же изображения, но на прозрачном фоне, или нарисовать самому (поэтому, скорее всего, результат будет отличаться).

Иконки

Изображения без прозрачного фона

Иконки позволяют пользователю быстрее понять назначение типовых элементов (например, иконка телефонной трубки рядом с номером телефона). Заставлять дизайнера рисовать типовые символы (иконка телефона, иконка @, иконка карты, конверт, дискета, иконки социальных сетей), которые нарисованы другими уже тысячи раз — это пустая трата времени.

Пример использования FontAwesome

Масштаб

Бывает такое, что макет имеет неверный масштаб. Например, макет, который должен иметь ширину 960px, дизайнер может сделать шириной 1920. 

«А что такого?» — спросит дизайнер. 

Ничего особенного, просто верстальщику придётся делать лишнюю работу: приводить все значения (кегль, отступы, размеры блоков и пр.) к нормальному виду. 

«Уменьши размер изображения один раз и макет будет в нормальном масштабе» — скажет дизайнер.

Здравая мысль. Но почему она не пришла ему раньше? Да потому, что если привести макет к нормальному масштабу, то могут всплыть косяки. Например, мне однажды прислали макет сайта для экрана шириной 480px. И он нормально смотрелся. Ровно до тех пор, пока я не уменьшил макет действительно до 480px и не примерил его для смартфона с 5-дюймовым экраном.

Руководство

https://www.youtube.com/watch?v=https:www.googleadservices.compageadaclk

Считается хорошим тоном создать руководство по использованию макета — так называемый design guide. Обычно это руководство содержит общую информацию о всех макетах: 

  • Используемые шрифты.
  • Используемые цвета и их CSS-представления (hex или rgba).
  • Отступы, кегль, интерлиньяж и пр.

Допустим, дизайнер по невнимательности в одном макете сделал фон шапки цветом #233539, а в другом — #333538. В таком случае руководство должно разрешить неоднозначность. 

Поделиться:
Нет комментариев

Добавить комментарий

Ваш e-mail не будет опубликован. Все поля обязательны для заполнения.

×
Рекомендуем посмотреть
Adblock detector