Бесплатные курсы веб дизайна с нуля: 7 бесплатных курсов по веб-дизайну и не только — Дизайн на vc.ru

Содержание

Бесплатные курсы веб-дизайна

Средняя зарплата веб-дизайнера в Украине – примерно $1,5–2 тыс . При этом можно работать не только на компанию, но и искать заказчиков на биржах фриланса.

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


На украинском языке

«Основы UI/UX»

Продолжительность: 3 дня

Организатор: Logos IT Academy

Это вводный курс, на котором вы поймете, подходит ли вам профессия веб-дизайнера. На занятиях расскажут, какие обязанности есть у дизайнера и какие инструменты нужны для работы. Еще вы узнаете:

  • как работать с текстом;
  • как совмещать цвета;
  • что такое композиция;
  • что такое UI-элементы.

На курсе объяснят, зачем нужен адаптивный дизайн и как использовать модульную сетку. Еще вы попробуете создать дизайн приложения для заказа еды.

Занятия проходят в Zoom. Записаться на курс можно до 23 мая.

«Как работает цвет»

Продолжительность: 10 лекций

Организатор: Projector

На этом курсе вы узнаете все про цвета: их природу, историю цветов флагов, гербов и брендов, как работают цветовые схемы и так далее. Вы поймете, как использовать эту информацию для дизайна сайтов.

Лектор также расскажет:

  • как гармонично подобрать оттенки;
  • как использовать цвет, чтобы донести информацию;
  • зачем нужен цветной контраст;
  • какие есть удачные и неудачные примеры дизайна.

Напоследок вы сможете проверить, насколько хорошо усвоили информацию, с помощью онлайн-теста.

Этот курс входит в программу Projector Humanitarium. До победы Украины и еще месяц после нее можно пройти бесплатно. Для этого после регистрации нужно ввести промокод 0688-5072.

«Основы веб-дизайна» 

Продолжительность: 2,5 месяца

Организатор: «Креативная практика»

Курс состоит из шести видеоуроков, 19 статей и пяти мастер-классов. Во время учебы вы узнаете:

  • как развивался интернет и как это связано с историей веб-дизайна;
  • какие существуют типы сайтов;
  • из чего состоит сайт;
  • чем отличается дизайн мобильной и браузерной версий сайта;
  • какие есть стратегии разработки сайтов;
  • как сделать сайт удобным.

Чтобы закрепить знания, после каждого модуля нужно сдавать тесты.

Бесплатный доступ к курсу действует только до 1 июня. Сколько он будет стоить потом, неизвестно.

«Профессия: веб-дизайнер»

Продолжительность: 3 урока

Организатор: «Образовательный хаб города Киева»

Краткий курс, на котором вы узнаете:

  • есть ли сейчас спрос на веб-дизайнеров;
  • какими навыками он должен владеть, чтобы найти первую работу;
  • в каких направлениях может развиваться его карьера.

При разработке курса использовались материалы кафедры веб-программирования Киевского политехнического института имени Игоря Сикорского.

Записаться и пройти курс можно в любое время.

На английском языке

Web Design for Everybody: Basics of Web Development & Coding Specialization 

Продолжительность: 4 курса

Организатор: Университет Мичигана

Специализация на Coursera – это несколько курсов, которые помогают получить определенные навыки. Их можно проходить вместе, а можно выбрать только один курс – тот, который нужен вам больше всего.

Программа состоит из теоретической и практической частей. Если вы хотите получить сертификат, что прошли всю специализацию, нужно сначала закончить теоретическую часть, а затем перейти к практической.

На первом курсе вы разберетесь, как на самом деле работает сайт. Например, что происходит, когда вы нажимаете ту или иную кнопку. Еще лектор объяснит, что такое JavaScript, CSS3 и как они связаны с веб-дизайном.

На втором курсе вы узнаете, как работают каскадные таблицы стилей CSS3. Затем можете создать дизайн HTML-страницы.

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

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

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

Начать обучение можно в любое время. Если вы будете уделять ему три часа в неделю, примерно через шесть месяцев пройдете всю специализацию.

Web Design Bootcamp: Design like a PRO

Продолжительность: 2 часа 20 минут

Организатор: Udemy

Курс поделен на три части:

  • Вступление. Вы разберетесь, что такое цвет, шрифты и текстовый дизайн.
  • Дизайн веб-страницы.  Узнаете, из каких элементов состоит страница сайта и почему эти элементы важны.
  • Создание страницы с помощью HTML и CSS. Поймете, как эти инструменты помогают создать удобный сайт.

Напоследок нужно пройти небольшой тест и ответить на четыре вопроса.

Этот курс подходит тем, кто владеет любой программой для дизайна. Например, Photoshop, Illustrator и другими. Начать обучение можно в любое время.

Бесплатный курс «Дизайн на Figma», онлайн-обучение бесплатно с нуля на русском

онлайн-школа дизайна

Главная / Бесплатный курс «Дизайн на Figma»

хочу освоить Figma

Создайте свой первый дизайн за 3 дня

первый кейс в твоё дизайнерское портфолио

подробные уроки от эксперта

сертификат об успешном прохождении курса

полезные подарки

Figma — графический онлайн-редактор для создания баннеров, прототипов сайтов и интерфейсов приложений. С него начинается путь в графический, UX/UI и веб-дизайн

смотреть кейс

работа Кирилла Таутиева

смотреть кейс

работа Анны Спицы

смотреть кейс

работа Валерии Микулич

по итогу ты сможешь сделать

а также

начнешь прямой путь в дизайн

познакомишься с основами Figma

Создашь иконку и баннер

прокачаешь дизайнерские навыки

Работы выпускников прошлых потоков

Таня Баюл

смотреть кейс

Екатерина Белкина

смотреть кейс

Евгений Поздняков

смотреть кейс

Светлана Чернышева

смотреть кейс

Анастасия Цветкова

смотреть кейс

Александра Боже

смотреть кейс

Марина Тюрина

смотреть кейс

Денис Васильев

смотреть кейс

Таня Баюл

смотреть кейс

Екатерина Белкина

смотреть кейс

Евгений Поздняков

смотреть кейс

Светлана Чернышева

смотреть кейс

Анастасия Цветкова

смотреть кейс

Александра Боже

смотреть кейс

Марина Тюрина

смотреть кейс

Денис Васильев

смотреть кейс

Курс будет полезен, если ты:

03

02

01

Планируешь освоить графический, веб или UX/UI-дизайн и не знаешь, с чего начать

Хочешь добавить новый скилл в резюме

задумываешься о профессии дизайнера

Что говорят о курсе

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

Понравилось, что есть возможность выполнять практические задания и самостоятельно опробовать все инструменты.

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

Всё понравилось. Понятное донесение информации, всё разложили по полочкам, рассказали простым языком.

уже хочешь попробовать себя в дизайне? остался последний шаг

Зарегистрируйся на курс — и получи бонусный гайд «300+ полезных материалов для дизайнера»

часто задаваемые


вопросы

Учитесь из любой точки мира в удобное время

Вена  Лондон  Франкфурт-на-Майне  Потсдам  Берлин  Тбилиси  Батуми  Тель-Авив  Нур-Султан  Бишкек  Рига  Вильнюс  Кишинев  Амстердам  Варшава  Тверь  Томск  Тула  Владивосток  Ульяновск  Балашиха  Химки  Сочи  Ярославль  Барнаул  Мытищи  Симферополь  Петрозаводск  Рязань  Калуга  Киров  Севастополь  Якутск  Стамбул  Хельсинки  Париж  Прага  Стокгольм  Таллин  Алматы  Минск  Киев  Ташкент  Баку  Казань  Москва  Ереван  Санкт-Петербург  Новосибирск  Одесса  Нижний Новгород  Харьков  Воронеж  Ростов-на-Дону  Екатеринбург  Уфа  Самара  Красноярск  Омск  Челябинск  Калининград  Пермь  Волгоград  Днепропетровск  Ставрополь  Краснодар  Ижевск  Саратов  Иркутск  Тюмень  Астрахань  Тольятти  Хабаровск

Россия  Германия  Великобритания  Австрия  Грузия  Израиль  Казахстан  Киргизия  Латвия  Литва  Молдова  Нидерланды  Польша  Турция  Финляндия  Франция  Чехия  Швеция  Эстония  Украина

Учебный лагерь по веб-дизайну для фрилансеров

Хорошо, до сих пор в этом курсе мы рассмотрели, среди прочего, привлечение клиентов, создание предложений, оценку нашей работы и захватывающий 21-минутный обзор того, как Star Trek: First Contact переосмыслил зомби жанр. Тема, которую Гримур пообещал в очередной раз не вырезать из этого курса. И то, что мы делаем здесь, — это берем концепции, которые мы рассмотрели до сих пор, и готовимся к нашей первой запланированной встрече с клиентом. Потому что мы хотим подготовиться к взаимодействию с клиентами, как к дебатам, и такая подготовка помогает нам оставаться сосредоточенными, и, конечно же, чем лучше мы подготовимся, тем меньше вероятность того, что нас застанут врасплох. Итак, мы разделим это на четыре части: планирование первой встречи, подготовка правильных вопросов, планирование правильных ответов, а затем мы пройдем через фактическое взаимодействие с Ребеккой из Hayes Valley Interior Design.

Разница между подготовкой к дебатам на политической сцене и подготовкой к переговорам с клиентом заключается в том, что в большинстве случаев вы не противники. Наша цель — сопереживать им и уважительно отвечать на их вопросы. Потому что, разослав предложения потенциальным клиентам, вы часто будете получать ответы. И то, как вы это делаете, у всех разное. Кто-то предпочитает разговаривать по телефону, кто-то в видеочате, кто-то хочет встретиться лично, и нет правильного или неправильного способа сделать это. В последней части этого курса мы установили звонок с Ребеккой. Почему? Потому что один из лучших способов организовать свои мысли и убедиться, что вы подготовили свои исследования до любого формального взаимодействия с клиентом, — это составить расписание. Вы получаете звонок или электронное письмо с желанием узнать больше, иногда мы сразу же хватаемся за этот шанс. Но если мы сбавим обороты и предложим запланировать короткий звонок, чтобы поговорить о том, чего они хотят достичь, это даст нам время на подготовку и организацию. И это хороший сигнал вашему потенциальному клиенту, что вы цените и уважаете свое время. Поскольку телеконференция назначена на сегодняшнее утро в 10:30, это дает нам довольно короткое время для подготовки. Но нам нужно подготовить не только вопросы, которые может задать нам наш потенциальный клиент. Нам нужно подготовить вопросы, чтобы задать их нашему потенциальному клиенту, и это ключ. Цель этого звонка не в том, чтобы продать им нашу способность работать на них, а в том, чтобы углубиться, лучше понять их бизнес. Потому что пока у нас есть только та информация, которую мы нашли сами. Это прекрасная возможность, и опять же, чем лучше мы понимаем их потребности, потребности их бизнеса, тем лучше мы можем порекомендовать курс действий, услуги, которые мы можем им предложить. К счастью, у нас уже есть основа. Первые вопросы исходят из предложения: как клиенты их находят, что происходит, когда клиенты попадают на их сайт, и как мы, как фрилансер, можем им помочь. До сих пор наше исследование в основном основывалось на том, что мы могли найти, поэтому вопросы, которые мы задаем, должны начинаться там, где заканчивается это исследование. И некоторые из наших исследований основаны на предположениях. Что нам нужно сделать, так это опираться на это, точно так же, как Care Plus, о котором мы говорили ранее в курсе. Мы будем задавать вопросы нашему потенциальному клиенту, чтобы понять не как есть, а как он хочет, чтобы было. Сам акт звонка или письма нам уже является признаком. Они заинтересованы. Они смотрят на вас и обращаются к вам, скорее всего, потому, что хотят развивать свой бизнес. Но сейчас не время продавать. Теперь пришло время пойти глубже. Итак, давайте рассмотрим вопросы, которые вы можете им задать. И для этого Гримур вызвался позвонить и помочь нам в подготовке.

[McGuire] Большое спасибо, Ребекка, за то, что нашли время.

[Гримур фальцетом] С удовольствием.

[МакГуайр] Итак, прежде чем мы начнем, я хочу убедиться, что мы на одной волне.

[Гримур фальцетом] Звучит здорово.

[МакГуайр] Знаешь, Гримур, это действительно здорово.

[Гримур фальцетом] Я знаю.

[МакГуайр] Ты действительно в этом заинтересован.

[Гримур фальцетом] Ага.

[МакГуайр] Вам не обязательно делать голос.

[Гримур] Я выбираю подлинное.

[МакГуайр] Если вы чувствуете давление-

[Гримур] Это ломает характер.

[Макгуайр] Хорошо.

[Гримур] Хорошо.

[Макгуайр] Можете ли вы рассказать о типах клиентов, которые у вас есть сегодня?

[Гримур] Я, Гримур, или ты имеешь в виду?

[Макгуайр] Нет, Ребекка.

[Гримур] Так ты не хочешь сделать голос?

[МакГуайр] Вы можете играть за Ребекку, но, возможно, не так сильно.

[Гримур] Хорошо.

[Макгуайр] Хорошо.

[Гримур] Идти?

[Макгуайр] Ммм.

[Гримур] Конечно, мы уделяем особое внимание дизайну интерьеров высокого класса. Большинство наших клиентов ремонтируют или строят дом с нуля.

[МакГуайр] Значит, в основном жилой?

[Grimur] У нас было несколько коммерческих клиентов, несколько предприятий, но да, в основном жилые.

[McGuire] И как это соотносится с клиентами, которых вы хотите?

[Гримур] Почему ты спрашиваешь ее об этом?

[МакГуайр] Что?

[Гримур] Почему ты задаешь ей этот вопрос?

[МакГуайр] Теперь ты ломаешь характер.

[Гримур] Ладно, представь, что я снова Ребекка. Почему ты спрашиваешь меня, Ребекка, о клиентах, которых я хочу.

[McGuire] Потому что их текущий сайт говорит только о работе с жильем, если они заинтересованы и в коммерческой работе-

[Grimur] А, понятно.

[Макгуайр] Итак.

[Гримур] Ага.

[МакГуайр] Сейчас жилой дом, вы хотите получить больше коммерческих клиентов?

[Гримур] Нам бы хотелось, чтобы у нас было больше коммерческих клиентов.

[МакГуайр] Отлично, спасибо, Ребекка. Итак, я хочу перейти к более крупным целям. Чего вы хотите достичь в плане развития вашего бизнеса? Что для вас слэм-данк? Спортивные метафоры — самые худшие.

[Гримур] Да, я думаю, что сейчас мы многое узнаем о том, что нужно для масштабирования нашего бизнеса. Это началось еще в 1943 году, и тогда (исчезает) 

[МакГуайр] Гримур действительно продает это. Подготовка к звонку с другом или коллегой — отличный способ попробовать и подготовиться. Итак, одна из вещей, которую мы хотим понять, это процесс, процесс, через который проходят ваши клиенты. Так вот, Гримур все это выдумывает, но мы хотим составить список вопросов, которые вы могли бы задать во время разговора. Какова ваша цель для веб-сайта? Что вам нравится в вашем нынешнем сайте? Что бы вы хотели улучшить на своем сайте?

[Гримур] Могу я ответить?

[Макгуайр] Конечно.

[Grimur] Ну, я думаю, многие люди смотрят на наш сайт и думают, что это мусор. Я не особенно горжусь этим. Мой племянник (исчезает)

[МакГуайр] Ответы на вопросы, которые мы запишем во время первого запланированного взаимодействия, дадут нам не только лучшее понимание их бизнеса и их клиентов, но и всю необходимую нам информацию. чтобы адаптировать наш подход, чтобы все наши рекомендации соответствовали тому, чего они хотят достичь.

[Гримур] Я готов идти?

[МакГуайр] Да, спасибо, Гримур.

[Гримур] Еще бы.

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

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

[За кадром] 415

[МакГуайр] 415

[За кадром] 555 

[МакГуайр] 555

Джош передаст нас ассистентке Ребекки Еве, которая после непродолжительного ожидания потушит нас. буквально огонь, в конце концов соедините нас с

[Ребекка] Эй, это Ребекка, спасибо за звонок.

[Макгуайр] Нет проблем. Приятно познакомиться с вами по телефону. Как проходит твой день?

[Ребекка] Хорошо! Мы получили эту брошюру, которую вы сделали, и я хотел выяснить, сколько будет стоить такой веб-сайт.

[МакГуайр] Совершенно верно, и это одна из главных вещей, которую мы хотим выяснить в ходе этого звонка. Теперь, в этот момент многие люди могут спросить, сколько стоит клиентский проект ее фирмы, потому что это дает нам отправную точку. Ничего плохого в том, что мы говорим что-то вроде того, что большинство проектов наших клиентов начинаются с 3000 долларов, но вместо того, чтобы сразу перейти к цене, мы хотим сначала лучше понять их потребности, чтобы вы могли давать рекомендации на основе этих потребностей. И дело в том, что во многом это зависит от масштабов того, что хочет сделать ее фирма. Ребекка?

[Ребекка] Да?

[McGuire] Многое из этого зависит от объема того, что ваша фирма хочет сделать.

[Ребекка] Хорошо.

[McGuire] Вот почему цель этого звонка — убедиться, что мы согласны с тем, чего ваша фирма хочет достичь. Таким образом, мы можем предоставить вам полную смету, основанную на том, что мы делаем.

[Ребекка] Понятно.

[McGuire] Итак, давайте начнем с вашего текущего сайта, потому что по этому поводу возникло несколько вопросов.

[Ребекка] Хорошо.

[McGuire] Итак, мы смотрим на ваш текущий веб-сайт, и первый вопрос: много ли ваших клиентов приходят с этого сайта?

[Ребекка] В основном это сарафанное радио. Мы сделали наш сайт еще в 2011 году. 

[МакГуайр] Хорошо, кстати, такие детали — это здорово, потому что я делаю заметки.

[Ребекка] Круто, так или иначе, мы получаем много звонков и электронных писем, но обычно они от других клиентов, которые направили их к нам.

[МакГуайр] Понятно, так что эти звонки, со стороны бизнеса, как выглядит этот процесс?

[Ребекка] Что ты имеешь в виду?

[McGuire] Допустим, вам звонит клиент, который хочет с вами работать, что дальше?

[Ребекка] Ну, обычно у нас клиент знает, что ему что-то нужно, он переделывает кухню или строит новый дом.

[McGuire] И это для частных клиентов, или вы также занимаетесь коммерческими услугами?

[Rebecca] Просто жилой дом, в прошлом мы занимались коммерческой деятельностью, но мы пытаемся сосредоточиться исключительно на жилых клиентах.

[МакГуайр] Мы хотим делать заметки здесь.

[Ребекка] Таким образом, мы получаем понимание того, что они ищут, будь то строительство нового дома или ремонт. Затем мы работаем с ними, чтобы получить цитату.

[МакГуайр] Ребекка, не могли бы вы рассказать об этом немного подробнее? Мы хотим убедиться, что мы на одной волне в том, что происходит с первого звонка до получения предложения.

[Ребекка] Обычно они знают, чего хотят, поэтому мы пойдем и проведем консультацию.

[МакГуайр] Это ремонт?

[Rebecca] Рино или новая постройка, в любом случае мы выйдем и встретимся с клиентом, чтобы снять размеры, посмотреть помещение-

[McGuire] И кто этим занимается?

[Ребекка] Обычно один из наших младших дизайнеров.

[McGuire] Мы действительно пытаемся понять, на что это похоже, на что похож этот процесс для их клиентов. И причина в том, что если мы понимаем их процесс, мы можем быть уверены, что предлагаем, а затем создадим сайт, который не только отлично выглядит, но и очень эффективно передает этот процесс своим клиентам. Хорошо, Ребекка, сначала они звонят или пишут по электронной почте, потом ты перезваниваешь им и назначаешь консультацию, дизайнер уходит, а потом что?

[Ребекка] Итак, когда мы начинаем, у нас обычно есть бюджет, поэтому мы работаем с ними, чтобы оценить проект. Это в основном фаза контракта. Мы работаем с ними, чтобы заключить контракт, а затем мы фактически делаем всю работу, весь дизайн и разработку.

[МакГуайр] Хорошо, отлично. Это действительно полезно, потому что чем лучше мы понимаем ваш процесс, тем лучше мы можем создать сайт, который сообщает об этом вашим клиентам и формирует ожидания.

[Ребекка] Звучит здорово.

[МакГуайр] Итак, во-первых, это консультация, во-вторых, это контракт-

[Ребекка] На самом деле, если это на сайте, мы должны назвать это письмом-соглашением.

[МакГуайр] Хорошо, приятно знать. Консультация, письмо-договор, затем проектные работы?

[Ребекка] Дизайн и разработка.

[МакГуайр] Хорошо, отлично, записываю все это.

[Ребекка] Потом все остальное, последний шаг — это строительство, установка и, в основном, завершение проекта.

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

[Ребекка] Мне очень нравится, что мы можем получить всю контактную информацию из контактной формы.

[МакГуайр] А что тебе в нем не нравится?
[Ребекка] Контактная форма?

[McGuire] Ну сайт в общем но может быть и форма тоже.

[Ребекка] Что ж, в форме мы получаем много спама. Для всего сайта, и вы указали это в брошюре, на iPhone он действительно крошечный.

[Макгуайр] Верно.

[Ребекка] Это действительно то, что нас беспокоит. Также у нас есть около тысячи фотографий новых работ, новых проектов, которые мы завершили за последнее время.

[McGuire] Что ж, мы определенно можем над этим поработать. Идеальный веб-сайт, что для вас домашняя работа? Мы должны перестать использовать спортивные метафоры.

[Ребекка] Вот почему я с вами разговариваю.

[McGuire] Отличное замечание, но представьте на секунду, что у вас идеальный сайт. Забудьте о дизайне, контактной форме, что вы хотите, чтобы этот веб-сайт делал для вашего бизнеса?

[Ребекка] Ну, было бы здорово получить больше клиентов.

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

[Ребекка] Я бы сказал пару раз в месяц, может два или три.

[McGuire] Таким образом, цель вашего веб-сайта, если вы создадите новый веб-сайт для своей дизайнерской фирмы, в основном состоит в том, чтобы привлечь клиентов.

[Ребекка] Да.

[Макгуайр] Понятно. Получение довольно хорошего понимания, так что спасибо.

[Ребекка] С удовольствием.

[МакГуайр] Хорошо, давайте поговорим о том, что будет дальше. Что я хочу сделать после этого звонка, так это взять то, что у нас есть, и рассказать вам об этом. Поэтому я хочу точно указать, что мы рекомендуем на основе того, что мы рассмотрели, и сколько именно мы вам за это цитируем.

[Ребекка] Итак, сколько времени это займет?

[McGuire] Давайте постараемся, чтобы оно было в вашем почтовом ящике завтра в это же время.

[Ребекка] Звучит неплохо.

[Макгуайр] Отлично. Итак, какие вопросы у вас есть ко мне?

[Ребекка] Для тебя?

[МакГуайр] Да, какие у вас самые сложные вопросы.

[Ребекка] Хорошо, сколько времени вам понадобится, чтобы создать сайт?

[McGuire] Это самый распространенный вопрос, поэтому у нас есть довольно стандартный ответ на него. Обычно от трех до шести недель, но это действительно может варьироваться в зависимости от объема работы, точно так же, как проекты с вашими клиентами, которые я могу себе представить.

[Ребекка] Да.

[МакГуайр] Сколько времени занимает твой?

[Ребекка] Намного больше, чем три-шесть недель, у нас бывают привередливые клиенты.

[Макгуайр] Придирчивый хорош. Какова самая долгая работа над клиентским проектом?

[Ребекка] Для нас?

[Макгуайр] Да.

[Ребекка] О Боже, теперь есть один.

[Макгуайр] Более шести недель?

[Ребекка] Прошло два года.

[Макгуайр] Тот же клиент?

[Ребекка] Мы работали над этим проектом два года.

[Макгуайр] Ребекка.

[Ребекка] Макгуайр.

[МакГуайр] Я хочу дать вам обещание. Ничто из этого не имеет отношения к дизайну их сайта, цене, техническим деталям, но клиенты хотят знать, что мы их понимаем. И это то, что мы делаем здесь, мы сопереживаем кому-то, основываясь на чем-то, что у нас есть общего. Это основа для развития взаимопонимания. Мы понимаем чувства и разочарования друг друга, потому что знаем, каково это, когда что-то занимает больше времени, чем ожидалось. До этого момента мы довольно хорошо понимали бизнес-потребности клиента, но теперь мы демонстрируем им, что можем общаться с ними лично. И это важно, потому что, когда мы взаимодействуем с клиентом таким образом, мы не только показываем, что понимаем бизнес-потребности клиента, но и можем понимать, что он чувствует. И когда мы это понимаем, мы можем давать им рекомендации и обязательства, основанные на этих чувствах. Ребекка.

[Ребекка] Макгуайр.

[McGuire] Если мы решим, что это подходит, и мы будем работать над этим проектом вместе, я обещаю вам сейчас, это не займет два года.

[Ребекка] Мне нужно это в письменном виде.

[Макгуайр] Мы получим это в письменном виде.

[Ребекка] Хорошо.

[МакГуайр] Следующий сложный вопрос.

[Ребекка] Хорошо, как у вас дела?

[McGuire] Для веб-сайтов?

[Ребекка] Да.

[McGuire] Это помогает заранее продумать весь процесс. Цифры работают хорошо. Ребекка, мы работаем вместе на четырех этапах. Мы сейчас на первом этапе. Мы начинаем с беседы, чтобы лучше понять потребности вашего бизнеса, затем мы работаем над контентом, это работа с вами над письменным контентом и сбор активов, таких как фотографии работы вашего клиента, проекты, над которыми работала ваша команда. .

[Ребекка] Хорошо.

[McGuire] Затем на третьем этапе мы работаем над дизайном и разработкой реального сайта.

[Ребекка] Хорошо.

[McGuire] И, наконец, мы тестируем и развертываем его.

[Ребекка] Не говорю, что это произойдет, но что, если нам это не понравится?

[МакГуайр] Хороший вопрос, и ответ: мы работаем вместе на каждом этапе пути. Таким образом, у нас будут регулярные проверки, чтобы мы могли открыто получать любые отзывы, и мы будем включать исправления как часть того, что вы получаете для проекта.

[Ребекка] Что насчет изменений? Как мы можем изменить сайт позже?

[МакГуайр] Отличный вопрос. Настроим систему управления контентом.

[Ребекка] CMS.

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

[Ребекка] Хорошо, отлично. Что, если нам потребуются изменения дизайна в будущем?

[McGuire] Конечно, иногда есть вещи, которые выходят за рамки нашего первоначального объема работ, и мы обязательно включим почасовую оплату за дополнительную работу, которая выходит за рамки нашего первоначального соглашения. Таким образом, если вам понадобится что-то еще, вы точно будете знать, какова эта ставка.

[Ребекка] Понятно.

[МакГуайр] Что еще у тебя есть?

[Ребекка] Итак, странный вопрос, не поймите его неправильно… 

[МакГуайр] Неудачное начало.

[Rebecca] Но мои партнеры будут спрашивать, плюс наш админ уже создал несколько сайтов, и я понимаю, что ваша работа заключается в том, чтобы продать мне сайт, так что что-то вроде этого: почему мы не можем сделать это сами?

[МакГуайр] Давай помедленнее. Мы на связи. У нас есть еще около шести секунд, пока все не станет неловко, и мы не можем винить в этом плохое соединение. Вопрос в следующем: почему они не могут построить сайт сами? И прежде чем мы дадим ответ, мы должны сначала понять мотивацию. Давайте разбирать. Осталось пять секунд. Какова мотивация вопроса? Почему она спрашивает, почему она разговаривает с нами, если сама это даже рассматривает? Три возможные причины, четыре, если она просто жестока. Мы можем предположить, что она не понимает всей сложности, и если это так, мы можем просто сказать ей, скажем, как сложно создать индивидуальный веб-сайт с нуля. Но это может иметь неприятные последствия, плюс звучит так, будто мы говорим, что она не может, ее фирма не может этого сделать, а это не так. Может быть, они хотят учиться. Четыре секунды. Вариант номер два: дело в деньгах. А если у нас слишком дорого? Ей нужны все ее варианты, вот и все. Но есть и номер три. В-третьих, она хочет знать, в чем отличие, какую ценность мы могли бы добавить, что ее фирма не может сделать самостоятельно. Мы могли бы пойти по этому пути, указать на ее текущий сайт как на отражение ее бизнеса и клиентов, которых они упускают, поскольку универсальный шаблон — не лучший вариант. А может быть и четыре: она нас испытывает, хочет посмотреть, какая у нас реакция на давление. Осталось три секунды. Все эти возможности, полный стол, мы могли спросить продолжение, притвориться, что не понимаем, выиграть время, мы тратили время на голоса ранее с Гримуром, у нас был список трудных вопросов, так и не придумали этого. Но это никуда нас не приведет. Итак, давайте перевернем это, начнем с будущего, представим, что мы получили клиента, мы уже заключили сделку, и теперь мы собираемся подробно рассказать, что мы сделали для этого. Правило номер один взаимодействия с клиентом, думайте как клиент, если вы думаете о себе, вы уже проиграли. Правило номер два: никогда не играй в защите. Две секунды. Мы получили клиентку в первую очередь потому, что был какой-то уровень доверия, и ей казалось, что мы знаем, о чем говорим. Каждый из этих четырех вариантов подразумевает ответ, который гласит: вы не можете этого сделать, вы не можете сделать сайт самостоятельно. Но это не то, как мы получили клиента, потому что ответ не в том, что они не могут сделать это для себя, и мы можем подойти к этому одним из двух способов. Осталась секунда. Мы могли бы сказать хороший вопрос, мы свяжемся с вами. Безопасно. Это дает нам время. Но другой вариант таков: прыгнуть в огонь. Скажи им, что они могут, а потом объясни им, почему это должен быть ты. Глубокий вдох.

[Ребекка] Алло?

[Макгуайр] Да.

[Ребекка] Итак, что мешает моей команде построить это, может ли это сделать моя фирма?

[McGuire] Итак, это действительно хороший вопрос, и я могу понять, почему вы спрашиваете, и ответ таков: можете.

[Ребекка] Прости?

[Макгуайр] Конечно можно, вот и ответ. Если вы хотите пройти этот процесс внутри компании, я могу уважать это, но я скажу вам одну вещь, которую я знаю и вы, и я можем понять. Я думаю, что у многих ваших клиентов есть тот же вопрос, который вы только что задали мне. Они задают себе то же самое, когда составляют бюджет своих собственных проектов, потому что это совершенно правильный вопрос. И, в конце концов, я бы сказал, что ваши клиенты получают гораздо больше пользы от качества работы, которую делает ваша фирма, и от времени, которое они экономят, не становясь экспертами в дизайне интерьера, и то же самое применимо и здесь. Моя работа заключается в том, чтобы иметь опыт и выполнять всю тяжелую работу в своей области, чтобы вы и ваша фирма могли сосредоточиться на том, чтобы делать то же самое для своих клиентов.

[Ребекка] Хороший вопрос.

[McGuire] И, поскольку мы работаем над этим, мы здесь на каждом этапе пути, чтобы ответить на любые ваши вопросы о том, как то, над чем мы работаем, обеспечивает эту ценность.

[Ребекка] Отлично. Это все, что я могу придумать, но я уверен, что придумаю что-нибудь, как только положу трубку.

[McGuire] Что ж, если у вас есть какие-либо вопросы между сегодня и завтра, пожалуйста, обращайтесь.

[Ребекка] Подойдет.

[МакГуайр] А пока давайте начнем с этой цитаты, двадцать три часа и пятьдесят четыре минуты.

[Ребекка] Звучит здорово.

[McGuire] Большое спасибо за ваше время, Ребекка, было здорово поговорить с вами.

[Ребекка] Приятно побеседовать с тобой, Макгуайр, приятного общения.

[МакГуайр] Пока.

[Ребекка] До свидания.

Много заметок, и это хорошо, потому что мы собираемся их использовать. Теперь вы заметите, что мы не рассмотрели все, что мы практиковали во время телеконференции. Это нормально. Мы рассмотрели достаточно, чтобы лучше понять, чего хочет добиться фирма, и построили диалог. Отсюда мы перечисляем, что включено и что мы будем взимать, но мы углубимся в это в следующей части этого курса. Теперь, еще одно замечание, этот звонок содержал много реальных вопросов. Реальные вопросы, которые мы получили от реальных клиентов, занимаясь настоящим фрилансом. Но это только один путь. Лучший способ стать лучше в этом и расти со временем — это практиковаться. Получайте все больше и больше клиентов, делайте заметки, смотрите, что работает хорошо, и, что не менее важно, смотрите, что не работает. Но давайте вспомним, что мы здесь сделали.

При первом контакте мы находим время, чтобы назначить встречу. Между первым контактом и самой встречей мы можем придумать вопросы, которые хотим задать потенциальному клиенту. Затем придумайте вопросы, которые может задать вам потенциальный клиент. Таким образом, вы можете войти в контакт с уверенностью, что у вас есть ответ на некоторые из самых сложных вопросов. Но это пока все. Это подготовка и встреча с нашим потенциальным клиентом.

Доступность в Интернете | Университет Вебфлоу

Есть причина, по которой Apple, Википедия и MDN — есть причина, по которой они используют структуру CSS на своих производственных сайтах (за исключением закругленных кнопок Apple). Но когда вы применяете контур CSS к чему-либо, он создает контур вокруг этого элемента. Так. Являются ли контуры просто еще одним термином для границ или теней? Абсолютно. Нисколько.

В этом уроке мы рассмотрим ВСЕ. Чем это отличается, как мы можем использовать состояние Focused (клавиатура), чтобы заставить его работать идеально, как мы можем добавить контур к ссылке. Мы рассмотрим некоторые передовые методы, когда дело доходит до оформления контуров на наших сайтах (и обходной путь, который Apple использует в Safari). В самом конце мы исправим поведение табуляции на Tiffany.com.

Часть 1. Почему контуры? Другими словами, почему бы не использовать рамки или тени? Границы (это стандартный CSS в Интернете) — границы могут влиять на размер элементов и смещать объекты.

А тени даже не отображаются на многих системах с включенным режимом высокой контрастности. Как и в Windows, где появится другой контур по умолчанию (к которому мы вернемся чуть позже). Это несколько причин, по которым эти два свойства не похожи на контуры.

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

Где сейчас 00:48.

Но контуры важнее этого. Потому что без пользовательских контуров (это просто сайт, на котором еще не применены стили контуров). Без контуров, если мы используем клавиатуру для навигации по вкладкам, перемещая фокус по странице? Различные браузеры почти всегда дают противоречивые результаты.

Здесь фокус табуляции на Google Chrome. Вот он в Сафари. Вот он в Фаерфоксе. Вот он в Интернете Microsoft Edge. И, конечно же, на Arch Card от McDonald’s все иначе, когда перед съемкой не забываешь зарядить его аккумулятор.

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

Итак, что произойдет, если мы пойдем и применим схему к состоянию None? (Другими словами, если мы просто добавим это свойство, потому что хотим, чтобы внешний вид вещей по умолчанию имел такой контур?) Невероятно высокий риск.

Вот почему. Установка контура CSS в состояние по умолчанию (Нет)? Вот что произойдет, если мы пролистнем эту страницу сейчас. (Это действительно может привести к тому, что даже поведение контура по умолчанию в некоторых браузерах не очень ясно, что выделено.)

Итак, давайте отменим это, и, честно говоря, мы должны поджечь его. Что мы и сделали бы, если бы не забыли зарядить аккумулятор нашей Arch Card перед съемкой.

Это приводит нас к использованию состояния Focused (клавиатура).

И, чтобы быть по-настоящему ясным: вместо того, чтобы применять контур в состоянии «Нет», мы собираемся перейти к этому раскрывающемуся меню здесь и убедиться, что мы используем стиль в состоянии «Фокус» (клавиатура).

Сейчас. Почему состояние Focused (клавиатура)? Что ж, мы знаем, что состояние «Сфокусировано» — это то, что появляется, когда кто-то щелкает (или нажимает) или перемещает вкладки с помощью клавиатуры, но в большинстве случаев дизайнеры и разработчики не хотят, чтобы этот контур отображался при каждом щелчке или касании. Здесь, когда мы нажимаем, вы можете видеть, прежде чем он дойдет до места назначения, мы видим контур даже по клику — не всегда идеально.

Итак, вот тут-то и появляется Focused (клавиатура) (или в CSS это фокус-видимый). И стили здесь позволяют вам управлять тем, как будут выглядеть объекты при навигации с помощью клавиатуры. (Но это не повлияет на то, как это будет выглядеть, когда вы щелкнете мышью или нажмете пальцем.)

И здесь мы можем очень четко добавить наш контур к ссылке.

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

А если мы пойдем в Preview это? Мы можем щелкнуть и начать переходить по нашим ссылкам. (И это работает и на полностью опубликованном сайте для навигации с вкладками, но в Webflow в режиме предварительного просмотра мы хотим убедиться, что щелкнули на холсте.)

Мы начинаем здесь сверху (и очевидно, мы еще не стилизовали контуры CSS для навигационных ссылок). Но когда мы переходим по нашим кнопкам, мы видим, что каждая кнопка, к которой применен этот класс (у нее есть…)

Хорошо. Похоже, компьютер должен перезагрузиться, потому что мы обновили macOS.

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

И не только здесь. Он есть в Chrome, Firefox, Microsoft Edge, Safari и так далее.

Но если мы нажмем кнопку (или если мы нажмем ее, например, на iPad)? Стили контура не видны. На самом деле вообще ничего. Потому что macOS все еще обновляется.

Но, к счастью, в macOS есть сочетание клавиш, которое полностью обходит установку, поэтому мы можем вернуться прямо в наш браузер. Команда, смена, клеверное поле.

И вот. А если мы нажмем на кнопку? (Или если бы мы постукивали по сенсорному устройству?) Не видны стили контура. И это потому, что мы использовали состояние Focused (Keyboard), а не обычное состояние Focused.

И приводит нас к лучшим практикам и большому вопросу:

Означает ли все это, что мы не должны использовать контуры CSS в обычном состоянии Focused? Другими словами, должны ли мы использовать только состояние Focused (Keyboard) при применении контуров CSS? И ответ таков: это зависит от ваших дизайнерских предпочтений. Wikipedia, например, использует состояние фокуса для своих контуров, но MDN использует Focused (Keyboard) (или focus-visible в CSS). Как правильно? Что не так? Возможны ли путешествия во времени? Не всегда есть четкий ответ. И это нормально.

Независимо от ваших предпочтений в дизайне, процесс прост: хотите ли вы, чтобы ваши контуры были видны при любом щелчке, любом касании или любой вкладке? Используйте сфокусированное состояние. НО, если вы ДЕЙСТВИТЕЛЬНО хотите, чтобы ваши контуры были доступны для навигации с помощью клавиатуры, но вы предпочитаете, чтобы ваши ссылки не отображали контуры при щелчках или касаниях? Используйте состояние Focused (клавиатура).

Еще одна передовая практика, которую следует здесь рассмотреть, касается контраста. И здесь сияют очертания. Потому что еще одна причина, по которой стили контуров по умолчанию (по умолчанию в браузере) не идеальны? Поведение (на самом деле видимость) на разных фонах (например, это контур по умолчанию в Safari) не всегда идеально разборчиво, особенно если контур сливается с фоном.

Со. Как мы можем решить эту проблему и сделать ее более единообразной? Другими словами, можем ли мы просто установить для всех наших ссылок один и тот же стиль контура CSS и забыть об этом? Мы абсолютно можем. Но причина, по которой мы поощряем тестирование, заключается в том, что мы часто выглядим по-разному. Может быть, нам нужен синий контур, как у Apple. Он отлично работает на светлом или темном фоне. Но если у нас есть синий фон? Это не работает так хорошо. Таким образом, в этом случае мы могли бы захотеть стилизовать класс или комбинированный класс для кнопки в синем разделе и в состоянии Focused (Keyboard), мы могли бы сделать его не синим. Может быть, что-то вроде белого. И так, это намного заметнее. Гораздо больше контраста с фоном.

Сейчас. Вот интересное наблюдение. Ссылка в форме таблетки (это просто кнопка с закругленными углами). А в Safari (по крайней мере, в версии 15.1, которую мы здесь тестируем)? Если мы перейдем через табуляцию, 90-градусные края. Что творится? Некоторые браузеры (например, Safari здесь) могут игнорировать радиус границы при отображении контура.

Итак, на Apple.com это сходит с рук, добавляя ОТДЕЛЬНЫЙ стиль. Коробки в форме таблеток с закругленными углами вообще не используют контур; они используют тень блока для достижения этого эффекта. Но ранее мы узнали, что тени блоков ИГНОРИРУЮТСЯ в Windows при использовании высокой контрастности. Значит ли это, что Apple ошибается? Гугл? Например, в Windows, если вы начнете печатать в Документах Google с включенным высоким контрастом, где будет курсор? Высокая контрастность не всегда идеальна. Поэтому мы хотим сделать НАИЛУЧШЕЕ.

Вот почему действительно хорошей идеей может быть использование структуры CSS для ВСЕХ элементов навигации пользователя. Ссылки, кнопки — все, на что можно нажать или нажать. Теперь: одно предостережение здесь. Windows позволит пользователям выбирать, в каком цвете будут отображаться контуры. Таким образом, несмотря на то, что он будет учитывать ваши значения контура CSS, он может переопределить сам цвет.

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

Опять же, ни одно из этих правил не является абсолютным. И в этом красота (гибкость) CSS. Мы можем сделать то, что хорошо подходит для нашего дизайна, а кто-то другой может сделать то, что хорошо подходит для его дизайна. Это означает, что будут разные мнения, разные разговоры и дебаты — и это хорошо. Пока мы учитываем видимость и доступность при проектировании и разработке, у нас будет бесконечно лучший пользовательский опыт, чем если бы мы не учитывали эти вещи. И в тех случаях, когда у нас есть что-то среднее (или когда что-то немного не так), всегда есть Мэг.

[Мэг] Дорогая Тиффани,

Это снова Мэг. Две вещи. Во-первых, ваш сайт использует границы при табуляции. Контуры CSS сделают это менее дерганым. Во-вторых, Tiffany Blue вовсе не синий; это бирюза.

С уважением, Мэг

[МакГуайр] Так что здесь происходит? На этой странице, как сказала Мэг, они на самом деле используют границы, когда что-то сфокусировано. И по мере того, как мы переходим, изображения здесь немного изменяются. Итак, если мы войдем и проверим код, мы сможем не только проверить это (мы не только увидим, что здесь используется граница, когда она сфокусирована — и мы можем включать и выключать это), но мы просто отключаем ее.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *