Дизайн сайта, ДЗ из ВУЗа по дизайну в figma. Продукт: Ход работы: Создать набор из 6 иконок на одну из заданных тем: • Свадьба • Хэллоуин • Рождество • Кулинария • Образование • Медицина • Космос • Кофе • Ресторан • Спорт • Путешествия • Косметология Условия: 1. Разместить все иконки на одном артборде. 2. Размер документа 616х440 пикселей, сделать сетку в 22 пикселя, по ней выравнивать иконки. 3. Иконки лучше сделать плоскими. Не добавлять объем и перспективу. 4. Иконки должны быть на одну тему, которая легко читается. Не смешивайте тематики. 5. Используйте 1 или 2 толщины обводки. Обе толщины должны присутствовать во всех иконках. 6. Иконки должны быть выполнены в 1-2 цветах. Этапы работы: 1. Выбрать инструмент frame и создать рабочую область: 2. Выставить в рабочей области нужные размеры: 3. При помощи геометрических фигур и линий нарисовать набор иконок на выбранную из списка тематику. 4. Экспортировать в формате jpeg. Практическая работа 2 «Исследование для проекта» Количество часов: 4 Цель работы: провести предпроектное исследование для разработки дизайна лендинга. Необходим текстовый редактор, например Microsoft Word. Ход работы: 1. Выбрать тему проекта (переделать сайт, не брать крупные онлайн-магазины) 2. Написать цель вашего проекта 3. Написать задачи вашего проекта 4. Написать информацию о компании 5. Описать аудиторию проекта (в общих чертах: пол, возраст, доход, проживание, работа) 6. Описать аудиторию при помощи метода персонажей 7. Описать аудиторию методом jobs to be done 8. Описать прямых конкурентов компании 9. Описать косвенных конкурентов компании 10. Подобрать сайты конкурентов и описать их преимущества и недостатки (не менее 6 сайтов) Практическая работа 3 «Информационная архитектура» Цель работы: проанализировать структуру выбранного проекта и построить информационную архитектуру лендинга. Оборудование: Программное обеспечение для составления блок-схем, графиков. Например XMind, Draw.io. Ход работы: 1. Создание информационной архитектуры – определить суть проекта, его разделы. 2. Для разработки используйте иерархическую модель данных 3. Прорабатывайте сначала разделы верхнего уровня, постепенно спускаясь до уровня ниже. Или по разделам – сначала один, потом другой. 4. Загрузить схему в формате pdf. Практическая работа 4 «-» Количество часов: 2 Цель работы: разработать Wireframe главной страницы лендинга. Ход работы: 1. Сделать макет wireframe главной страницы десктопной версии по принципам, которые были объяснены на практическом занятии, как показанное на рисунке 24. Wireframe должен включать header со всеми разделами сайта, которые были прописаны в архитектуре. Должны быть показаны все кнопки, личный кабинет, если есть. Параметры wireframe: • Фрейм размерами: 1920 (ширина), высоту можно поставить примерно 3000, потом уменьшить, либо увеличить. • Настроить сетку в 12 колонок. По ширине сетка должна быть размером подходящим для мониторов ноутбука – примерно 1300, весь важный контент, а именно заголовки, основной текст, карточки товаров, фотографии – все это должно быть выровнено по сетке и не выходить за нее. • Цветной фон, фоновые фотографии, графика – это уже размещается по размерам фрейма, то есть по всей ширине. • Gutter между колонками 20-30 • Оптимальная высота главной страницы лендинга для десктопных браузеров — в районе 600-800px, Оптимальная высота header 100-120px • Весь текст должен быть таким, каким он будет на сайте. Графику показать при помощи геометрических фигур. Также должен быть макет всех всплывающих окон. • Цвет всего макета - серый. Рекомендации: • Если изображение овальной формы (либо похожей на овал), лучше текст располагать слева, а его справа. • В header пункты меню лучше никак не выделять, просто оставить текстом. • Не располагайте много текста на главной странице, можно ограничиться можно только заголовком. • Сделайте кнопку заказать/зарегистрироваться, то есть кнопку с каким-то целевым действием, если это подходит теме сайта. 2. Загрузить выполненную работу на сайт в формате pdf. Практическая работа 5 «Wireframe остальных блоков» Количество часов: 6 Цель работы: разработать Wireframe остальных блоков лендинга, сучётом правил гештальт композиции. Оборудование: Компьютер и программа Figma. Также можно взять лист бумаги и карандаш, чтобы сделать предварительные наброски. Ход работы: 1. Необходимододелать wireframe оставшихся блоков. Всех блогов вместе с главным экраном и футером должно быть не менее 5 блоков, можно больше. Так же необходимо нарисовать всплывающие окна. На рисунке 45 приведёт пример того, как должна быть выполнена работа. Практическая работа 6 «Wireframe для адаптива (под мобильную версию)» Количество часов: 6 Цель работы: разработать Wireframe под мобильные устройства. Оборудование: Компьютер и программа Figma. Ход работы: 1. На основе десктопной версии сделать адаптивную версию wireframes. Для этого выбирается фрейм для iphone 14, и настраивается сетка по параметрам как на рисунке 48, а именно: • 8 колонок • Margin 16 • Gutter 10 2. Далее переставляются все элементы в варфрейме по следующим принципам: • Сделать поля меньше • Если что-то не помещается, то уменьшить • Контент перемещается вниз налево • Уменьшаем элементы Практическая работа 7 «Дизайн десктопной и мобильной версий» Количество часов: 4 Цель работы: создать дизайн для десктопной и мобильной версии лендинга Оборудование: Компьютер и программа Figma. Ход работы: 1. На основе референсов и информации полученной на лекциях сделать итоговый дизайн десктопной и мобильной версии лендинга. Подобрать цвета и фотографии. Требования: • На весь макет не должно быть более 4 цветов • Все обводки должны быть одной толщины • Обработка фотографий должна быть одинаковой (по яркости, контрастности, насыщенности и общей цветовой гамме) 2. Готовую работу загрузить на портал в формате pdf или ссылкой на Figma. Практическая работа 8 «Итоговая презентация по сайту» Количество часов: 4 Цель работы: создать презентацию по проекту и подготовиться к выступлению с докладом Оборудование: Компьютер и программа Figma или Microsoft PowerPoint. Ход работы: 1. Необходимо подготовить презентацию выполненной работы в любой доступной программа для презентаций. 2. В презентации необходимо осветить все этапы проваленной работы. Стрцутура презентации должна иметь следующие обязательные этапы. • Титульный лист (ФИО, название проекта) • Исследование • Архитектура сайта • Wireframes (адаптив и десктопная версия) • Итоговый дизайн (адаптив и десктопная версия). Объём работ: Ход работы: Создать набор из 6 иконок на одну из заданных тем: • Свадьба • Хэллоуин • Рождество • Кулинария • Образование • Медицина • Космос • Кофе • Ресторан • Спорт • Путешествия • Косметология Условия: 1. Разместить все иконки на одном артборде. 2. Размер документа 616х440 пикселей, сделать сетку в 22 пикселя, по ней выравнивать иконки. 3. Иконки лучше сделать плоскими. Не добавлять объем и перспективу. 4. Иконки должны быть на одну тему, которая легко читается. Не смешивайте тематики. 5. Используйте 1 или 2 толщины обводки. Обе толщины должны присутствовать во всех иконках. 6. Иконки должны быть выполнены в 1-2 цветах. Этапы работы: 1. Выбрать инструмент frame и создать рабочую область: 2. Выставить в рабочей области нужные размеры: 3. При помощи геометрических фигур и линий нарисовать набор иконок на выбранную из списка тематику. 4. Экспортировать в формате jpeg. Практическая работа 2 «Исследование для проекта» Количество часов: 4 Цель работы: провести предпроектное исследование для разработки дизайна лендинга. Необходим текстовый редактор, например Microsoft Word. Ход работы: 1. Выбрать тему проекта (переделать сайт, не брать крупные онлайн-магазины) 2. Написать цель вашего проекта 3. Написать задачи вашего проекта 4. Написать информацию о компании 5. Описать аудиторию проекта (в общих чертах: пол, возраст, доход, проживание, работа) 6. Описать аудиторию при помощи метода персонажей 7. Описать аудиторию методом jobs to be done 8. Описать прямых конкурентов компании 9. Описать косвенных конкурентов компании 10. Подобрать сайты конкурентов и описать их преимущества и недостатки (не менее 6 сайтов) Практическая работа 3 «Информационная архитектура» Цель работы: проанализировать структуру выбранного проекта и построить информационную архитектуру лендинга. Оборудование: Программное обеспечение для составления блок-схем, графиков. Например XMind, Draw.io. Ход работы: 1. Создание информационной архитектуры – определить суть проекта, его разделы. 2. Для разработки используйте иерархическую модель данных 3. Прорабатывайте сначала разделы верхнего уровня, постепенно спускаясь до уровня ниже. Или по разделам – сначала один, потом другой. 4. Загрузить схему в формате pdf. Практическая работа 4 «-» Количество часов: 2 Цель работы: разработать Wireframe главной страницы лендинга. Ход работы: 1. Сделать макет wireframe главной страницы десктопной версии по принципам, которые были объяснены на практическом занятии, как показанное на рисунке 24. Wireframe должен включать header со всеми разделами сайта, которые были прописаны в архитектуре. Должны быть показаны все кнопки, личный кабинет, если есть. Параметры wireframe: • Фрейм размерами: 1920 (ширина), высоту можно поставить примерно 3000, потом уменьшить, либо увеличить. • Настроить сетку в 12 колонок. По ширине сетка должна быть размером подходящим для мониторов ноутбука – примерно 1300, весь важный контент, а именно заголовки, основной текст, карточки товаров, фотографии – все это должно быть выровнено по сетке и не выходить за нее. • Цветной фон, фоновые фотографии, графика – это уже размещается по размерам фрейма, то есть по всей ширине. • Gutter между колонками 20-30 • Оптимальная высота главной страницы лендинга для десктопных браузеров — в районе 600-800px, Оптимальная высота header 100-120px • Весь текст должен быть таким, каким он будет на сайте. Графику показать при помощи геометрических фигур. Также должен быть макет всех всплывающих окон. • Цвет всего макета - серый. Рекомендации: • Если изображение овальной формы (либо похожей на овал), лучше текст располагать слева, а его справа. • В header пункты меню лучше никак не выделять, просто оставить текстом. • Не располагайте много текста на главной странице, можно ограничиться можно только заголовком. • Сделайте кнопку заказать/зарегистрироваться, то есть кнопку с каким-то целевым действием, если это подходит теме сайта. 2. Загрузить выполненную работу на сайт в формате pdf. Практическая работа 5 «Wireframe остальных блоков» Количество часов: 6 Цель работы: разработать Wireframe остальных блоков лендинга, сучётом правил гештальт композиции. Оборудование: Компьютер и программа Figma. Также можно взять лист бумаги и карандаш, чтобы сделать предварительные наброски. Ход работы: 1. Необходимододелать wireframe оставшихся блоков. Всех блогов вместе с главным экраном и футером должно быть не менее 5 блоков, можно больше. Так же необходимо нарисовать всплывающие окна. На рисунке 45 приведёт пример того, как должна быть выполнена работа. Практическая работа 6 «Wireframe для адаптива (под мобильную версию)» Количество часов: 6 Цель работы: разработать Wireframe под мобильные устройства. Оборудование: Компьютер и программа Figma. Ход работы: 1. На основе десктопной версии сделать адаптивную версию wireframes. Для этого выбирается фрейм для iphone 14, и настраивается сетка по параметрам как на рисунке 48, а именно: • 8 колонок • Margin 16 • Gutter 10 2. Далее переставляются все элементы в варфрейме по следующим принципам: • Сделать поля меньше • Если что-то не помещается, то уменьшить • Контент перемещается вниз налево • Уменьшаем элементы Практическая работа 7 «Дизайн десктопной и мобильной версий» Количество часов: 4 Цель работы: создать дизайн для десктопной и мобильной версии лендинга Оборудование: Компьютер и программа Figma. Ход работы: 1. На основе референсов и информации полученной на лекциях сделать итоговый дизайн десктопной и мобильной версии лендинга. Подобрать цвета и фотографии. Требования: • На весь макет не должно быть более 4 цветов • Все обводки должны быть одной толщины • Обработка фотографий должна быть одинаковой (по яркости, контрастности, насыщенности и общей цветовой гамме) 2. Готовую работу загрузить на портал в формате pdf или ссылкой на Figma. Практическая работа 8 «Итоговая презентация по сайту» Количество часов: 4 Цель работы: создать презентацию по проекту и подготовиться к выступлению с докладом Оборудование: Компьютер и программа Figma или Microsoft PowerPoint. Ход работы: 1. Необходимо подготовить презентацию выполненной работы в любой доступной программа для презентаций. 2. В презентации необходимо осветить все этапы проваленной работы. Стрцутура презентации должна иметь следующие обязательные этапы. • Титульный лист (ФИО, название проекта) • Исследование • Архитектура сайта • Wireframes (адаптив и десктопная версия) • Итоговый дизайн (адаптив и десктопная версия). Техническое задание есть.
Язык программирования: Python, C++, Java, JavaScript, C#, PHP, Scratch, Swift Для работы КОМПЬЮТЕРНАЯ АКАДЕМИЯ ТОП - международное учебное заведение (филиалы в 22 странах мира), специализирующееся на образовании в сфере IT с 1999 года. В связи с расширением приглашает в свою команду преподавателя IT дисциплин (очно) по различным детским направлениям: - Разработка игр (Construct, kodu, Unity, Click Fusion); - Программирование (Scratch, Python, Arduino, MIT App Inventor, разработка приложений на Android); - Робототехника (lEGO, Arduino); - Игровой дизайн (Gimp/Photoshop) - Фото- и Видеолаборатория; - Веб-дизайн и веб-программирование (Html/СSS; Wordpress); - 3D-моделирвоание (Tinkercad, CoSpaces, Sketch up, Blender). Взрослым направлениям: "Разработка программного обеспечения" Основы web-дизайна; Разработка веб-страниц на языке разметки HTML5 с использованием каскадных таблиц стилей CSS3; Разработка клиентских сценариев с использованием JavaScript; Введение в создание веб-приложений с использованием Angular и React; Создание web–приложений, исполняемых на стороне сервера при помощи языка программирования PHP и СУБД MySQL; Основы Информационных технологий. Конфигурирование Windows 10. и "компьютерная графика и дизайн" Теория дизайна; Основы типографики; Autodesk Maya 3D. Моделирование и визуализация; Autodesk Maya 3D. Анимация и создание эффектов; Autodesk Maya 3D. Персонажная анимация; Нелинейный монтаж видео в Adobe Premiere; Создание эффектов в Adobe AfterEffects. Обязанности: Проведение практических занятий в группах до 16 человек в соответствии с учебными планами и материалами (все методические материалы уже есть, придумывать ничего не нужно!). Выдача и проверка домашних заданий, так же в соответствии с учебным материалом. Участие в мероприятиях, организуемых в рамках академии (мастер-классы, открытые уроки, хакатоны, олимпиады и т.д.) Мы хотим от тебя: Ответственность, пунктуальность, желание делиться знанием и опытом; Знание или опыт работы как минимум в одном из указанных выше направлений компьютерных технологий; Мы предлагаем: Достойная заработная плата; Гибкий график работы/ частичная занятость; Возможность сформировать оптимальную рабочую нагрузку; Уникальный опыт в международной компании; Возможность профессионального и карьерного роста; Комфортные условия работы, офис в центре города. Молодой и дружный коллектив; Наши слушатели: дети, подростки и взрослые. Занятия проводятся в вечернее время и выходные дни в офисе.
Как мне найти учеников по профилю программирование в Москве?
Зарегистрируйтесь и создайте привлекательный профиль с упоминанием вашей специализации. Обратите внимание на количество доступных заявок от учеников, которое на июнь 2026 года составляет 2868
Какие требования к преподавателям на вашем сайте?
На нашем сайте приветствуются преподаватели с любым уровнем квалификации. Мы рекомендуем указать все свои сертификаты и образование, чтобы увеличить шансы на нахождение учеников
Могу ли я установить гибкий график работы?
Вы полностью контролируете свой график и можете обсуждать его напрямую с учениками, чтобы найти удобное время для обеих сторон
Каков потенциальный заработок для репетитора программирование?
Заработок зависит от количества занятий и квалификации. В среднем, за одно занятие можно заработать 1581.98 рублей с занятия. Больше занятий в неделю – выше доход