{{l10n_strings.DRAG_TEXT_HELP}}

{{article.content_lang.display}}

{{l10n_strings.AUTHOR_TOOLTIP_TEXT}}

jwern / etch-a-sketch: Решение для проекта Etch-a-Sketch проекта Odin

Это мое студенческое решение для проекта Etch-a-Sketch от Odin Project. Цель заключалась в том, чтобы создать в браузере базовый «альбом для рисования», который работал бы как управляемый мышью Etch-a-Sketch: при наведении курсора на квадрат он слегка окрашивался, а возвращение к одному и тому же квадрату несколько раз делало его все темнее.

Project Post-Mortem

Мне не терпелось заняться этим проектом, так как он в значительной степени вращался вокруг прямого — и значительного — редактирования DOM с помощью JavaScript, о чем я лишь вкратце упомянул в задании «Камень, ножницы, бумага». Однако процесс создания, добавления и удаления элементов HTML с помощью JavaScript оказался менее пугающим, чем я первоначально опасался. Настройка сетки и заполнение ее десятками (или более) div оказались для меня самой простой частью проекта.Функции JavaScript .style были неоценимы для назначения шаблонов сеток на лету.

Единственным существенным изменением функции, которое я сделал по сравнению с исходными инструкциями, было добавление кнопки для отображения / скрытия линий сетки, которая позволяет пользователям видеть отдельные блоки div. Хотя в предыдущей версии использовался полностью случайный селектор цвета, как это было предложено в (необязательной) инструкции № 5 проекта, я решил оставить цвета серым / черным, так как таким образом проще создать реальный рисунок.

Вызовы

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

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

Скриншоты

Сделать

CSS и общий стиль этого проекта довольно просты.Я решил сосредоточиться на основных целях и добиться того, чтобы JavaScript плавно работал над внешним видом страницы. Если бы мне пришлось вносить правки в будущем, я бы хотел сделать это немного более интересным: может быть, попробовать настоящий стиль Etch-a-Sketch. Я бы добавил больше визуальных опций, таких как цвета сетки или общий размер сетки вместо общего количества строк и столбцов. Было бы интересно добавить кнопку с предложением «Что рисовать», которая дает случайные идеи для рисования.

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

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

Технологии

Этот проект Etch-a-Sketch был построен с использованием HTML, CSS и JavaScript. Он использовал генератор теней CSSmatic для создания стилей затенения кнопок.

Помогая детям рисовать и рисовать из наблюдения

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

Language Arts
1.A.ECa: Следуйте простым одно-, двух- и трехэтапным инструкциям.

• ребенок рисует только то, что видит (следуя инструкциям учителя).
• ребенок начинает рисовать и перестает рисовать по сигналу учителя.

Language Arts
1.A.ECc : Предоставьте комментарии, относящиеся к контексту.

• ребенок обсуждает эскизы или рисунки с другими.

Искусство языка
4.D.ECc: С помощью учителя начните использовать знание букв и звуков для фонетического написания слов.

• дочерний элемент обозначает части нарисованного / нарисованного объекта независимо или с помощью.

Language Arts
5.A.ECa: Экспериментируйте с письменными принадлежностями и материалами.

• ребенок использует карандаши, маркеры, бумагу, планшеты и т. Д., Когда рисует или делает зарисовки.

Искусство языка
5.B.ECb: С помощью учителя используйте комбинацию рисования, диктовки или письма для составления информативных / пояснительных текстов, в которых они называют то, о чем они пишут, и предоставляют некоторую информацию тема.

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

Language Arts
5.C.ECb: С помощью учителя вспомните фактическую информацию и поделитесь ею с помощью рисования, диктовки или письма.

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

Математика
6.A.ECd: Свяжите числа с величинами, которые они представляют, используя физические модели и неформальные представления.

• ребенок представляет объект, точно показывающий определенное количество деталей, например гайки на колесе.

Математика
7.A.ECc: Используйте словарь, который описывает и сравнивает длину, рост, вес, вместимость и размер.

• детский рисунок изображает объекты более или менее «в масштабе» с точки зрения размера, местоположения и т. Д.
• ребенок описывает части своего рисунка, используя сравнительные слова («Я сделал заднюю шину больше, чем переднюю»).

Математика
9.B.ECa: Покажите понимание местоположения и порядкового номера.

• Детский эскиз показывает правильное расположение частей рисуемого объекта (дверная ручка рисуется с одной стороны двери, а не сверху или посередине).
• ребенок упорядочивает свои рисунки «Время 1, Время 2, Время 3».

Математика
10.A.ECb: Соберите данные о себе и своем окружении, чтобы ответить на важные вопросы

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

Математика
10.B.ECa: Организовывать, представлять и анализировать информацию с помощью конкретных объектов, картинок и графиков при поддержке учителя.

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

Наука
11.A.ECb: Разрабатывать и использовать модели для представления своих идей, наблюдений и объяснений с помощью таких подходов, как рисование, строительство или лепка из глины.

• ребенок применяет информацию из рисунков к другим работам, таким как модели или фрески.

Наука
11.A.ECc: Планируйте и проводите простые исследования.

• ребенок внимательно изучает объекты в процессе наброска / рисования, чтобы ответить на вопросы, связанные с проектом.

Наука
11.A.ECd: Собирайте, описывайте, сравнивайте и записывайте информацию из наблюдений и исследований.

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

Наука
12. A.ECa: Наблюдать, исследовать, описывать и классифицировать живые существа.

• Ребенок делает набросок или рисунок растения или животного.

Наука
12.A.ECb: Покажите осведомленность об изменениях, которые происходят в вас самих и в окружающей среде.

ребенок повторно посещает то, что он нарисовал, показывая, как это меняется с течением времени.

• ребенок обсуждает рисунки «Время 1», «Время 2», «Время 3», отмечая изменения в том, что он включил.

Наука
12.C.ECa: Определять, описывать и сравнивать физические свойства объектов.

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

Science
12.E.ECa: Наблюдать и описывать характеристики земли, воды и воздуха.

• ребенок делает набросок скалы, рельефа, водоема, облака и т. Д.

Наука
13.B.ECb: Ознакомьтесь с технологическими инструментами, которые могут помочь в научных исследованиях.

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

Социальные науки
16.A.ECa: Вспомните информацию о недавнем прошлом.

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

Физическое развитие и здоровье
19.A.ECd: Используйте координацию глаз и рук для выполнения задач.

• ребенок координирует движения руки со своими наблюдениями за объектом, когда он рисует.

Физическое развитие и здоровье
19.A.ECe: Используйте инструменты для письма и рисования с некоторым контролем.

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

Физическое развитие и здоровье
19.B.ECa: Координировать движения для выполнения сложных задач.

• ребенок удобно располагается и использует координацию глаз и руки, чтобы рисовать объект.

Физическое развитие и здоровье
19.C.ECa: Соблюдайте простые правила безопасности во время занятий.

• ребенок безопасно пользуется инструментами для рисования.
• Ребенок, рисуя, обращает внимание на информацию по технике безопасности, предоставляемую взрослыми («Лампочка, которую вы рисуете, горячая, поэтому не трогайте ее»).

Искусство
25.A.ECd: Изобразительное искусство: изучение и участие в деятельности с использованием материалов изобразительного искусства.

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

Искусство
26.B.ECa: Используйте искусство как средство самовыражения.

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

Развитие домашнего языка для учащихся, изучающих английский язык
29.A.ECb: При поддержке взрослых начните переходить между родным языком и английским языком, чтобы продемонстрировать прогресс в выполнении IELDS.

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

Социальное / эмоциональное развитие
30.A.ECb: Используйте соответствующие коммуникативные навыки при выражении потребностей, желаний и чувств.

• ребенок объясняет аспекты рисунка понятным для других способом.
• ребенок слушает и отвечает на комментарии одноклассников или других людей о своем рисунке.
• ребенок задает вопросы или конструктивно комментирует рисунки одноклассников.

Социальное / эмоциональное развитие
30.A.ECe: Используйте материалы целеустремленно, безопасно и с уважением.

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

Социальное / эмоциональное развитие
30.C.ECa: Проявляйте рвение и любопытство как учащийся.

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

Социальное / эмоциональное развитие
30.C.ECb: Демонстрируйте настойчивость и творческий подход в поиске решений проблем.

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

Социальное / эмоциональное развитие
30.C.ECd : Демонстрируйте вовлеченность и постоянное внимание в деятельности.

• ребенок завершает набросок или рисунок и объясняет его сверстнику или взрослому.
• ребенок снова посещает то, что он нарисовал, и снова рисует.
• ребенок добавляет детали, например цвет, к копии своего рисунка.

Социальное / эмоциональное развитие
31.B.ECa : Взаимодействие с другими детьми вербально и невербально.

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

Социальное / эмоциональное развитие
31.C.ECa: Начните делиться материалами и опытом и по очереди.

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

Подключаемый модуль Zeplin Sketch — мост рабочего процесса проектирования

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

Почему Зеплин?

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

Zeplin упрощает передачу, беря дизайны из Sketch, Adobe XD, Figma и Photoshop и экспортируя их в формат, позволяющий легко создавать фрагменты кода, руководства по стилю, спецификации и ресурсы.

Попрощайтесь с временами «красной черты». Zeplin ориентирован исключительно на улучшение сотрудничества между дизайнерами продуктов и командами разработчиков и используется ведущими группами разработчиков продуктов в Airbnb, Dropbox, Pinterest, Microsoft и многих других.

С Zeplin нет необходимости вручную записывать размеры или поля, печатать копию, экспортировать значки. Это просто потрясающе, и вы сэкономите много времени, чтобы сосредоточиться на исследованиях дизайна. — Алексей Потриваев, продуктовый дизайнер @Intercom

Традиционные спецификации дизайна, также известные как «красная линия» перед такими инструментами, как Zeplin.

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

Управляя версиями ресурсов дизайна, создавая библиотеки компонентов и создавая руководства по жизненному стилю, проект, перенесенный в Zeplin, может служить «единым источником истины» для продуктовых команд.

Мы в основном считаем Zeplin источником истины для сотрудничества с Engineering. Если его нет в Zeplin, это не официально. — Джейсон Стофф, старший дизайнер отдела цифровых продуктов @Starbucks

Ограничения Zeplin

Несмотря на то, что Zeplin имеет множество полезных функций, он не идеален.Zeplin предлагает бесплатный план, но в рамках этого плана он ограничен одним проектом. При разработке как для iOS, так и для Android потребуются два отдельных проекта. На этом этапе потребуется платный план.

Когда процесс работы с Zeplin и Sketch (или другими приложениями, упомянутыми выше) понятен, рабочий процесс становится простым. Однако у Zeplin есть некоторая кривая обучения, которая требует времени и внимания. Чтобы увидеть общий обзор и узнать больше о том, как его использовать, посмотрите демонстрационное видео Zeplin ниже:

Работа с Sketch и Zeplin: шаги и советы

1.Начните с Zeplin.

2. Подготовьте файл Sketch.

• Теперь, когда у нас есть Sketch и Zeplin, мы настроим наш файл Sketch для беспрепятственного экспорта в Zeplin.
• В Sketch организуйте ресурсы и слои, используя согласованные соглашения об именах. Если вы сотрудничаете с другими дизайнерами, определите соглашения, которые работают для всех в вашей команде. В зависимости от типа проекта (например, iOS, Android или веб) Zeplin автоматически корректирует соглашение об именах ресурсов, делая их экспорт одноэтапным процессом.
• Создавайте символы для общих элементов и ресурсов в Sketch. Это позволит вам настроить компоненты в Zeplin.
• Сохраните цвета в палитре «Цвета документа» и шрифты как «Стили текста» в файле Sketch. Они появятся в вашем руководстве по стилю, созданном Zeplin.

3. Сделайте активы экспортируемыми в Sketch.

• Это очень важный шаг. После того, как ваши ресурсы сгруппированы в символы, откройте страницу символов в вашем файле Sketch.
• Щелкните группу внутри символа, например «ic-menu» (значок папки)
• Выделив группу, найдите действие «Сделать экспортируемым» в нижнем правом углу «Инспектора» в Sketch и нажмите на эту опцию. Рядом с названием вашей группы должен появиться значок фрагмента.
• Этот шаг позволит инженерам экспортировать активы напрямую из Zeplin.

4. Создайте новый проект в Zeplin.

• Выберите тип создаваемого проекта.Обратите внимание, что у вас должны быть отдельные проекты для iOS и Android, даже если дизайн идентичен. Это связано с тем, что Zeplin будет генерировать другой код в зависимости от типа проекта.
• Выберите разрешение проекта, соответствующее вашим монтажным областям Sketch (например, 1x, 320 пикселей).

5. Экспортируйте монтажные области Sketch в Zeplin.

• В Sketch выделите все монтажные области, которые вы хотите экспортировать в Zeplin.
• Перейдите в раздел Plugins> Zeplin> Export Selected… или нажмите ⌃⌘E на клавиатуре.
• Затем мы экспортируем символы из Sketch. Откройте страницу символов в Sketch и выделите все монтажные области. Экспорт в Zeplin.

6. Организуем проект в Zeplin.

• Теперь, когда ваши артборды Sketch находятся в Zeplin, давайте разберем иллюстрации по разделам.
• На панели управления проекта выберите похожие экраны, чтобы сгруппировать их по категориям. После выделения щелкните правой кнопкой мыши и выберите «Новый раздел из выделенного».Повторяйте это до тех пор, пока ваш файл Zeplin не будет правильно организован.

7. Используйте компоненты в Zeplin.

Пожалуй, одна из самых полезных функций Zeplin — это возможность организовывать ресурсы в библиотеки компонентов. Это важно, когда дизайн проекта разрабатывается для нескольких платформ разными членами команды. Унификация дизайна необходима, как подчеркивает дизайнер Airbnb Карри Сааринен в своей книге «Создание визуального языка»:

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

• Выберите вкладку «Styleguide» вверху по центру Zeplin (рядом с «Dashboard»).
• На вкладке «Руководство по стилям» выберите дополнительную вкладку «Компоненты». Здесь вы увидите все свои символы, экспортированные из Sketch.
• Организуйте их в разделы, такие как «Значки», «Изображения», «Общие элементы» и т. Д. Вы можете узнать больше о вкладке «Компоненты» в руководстве по стилю вашего проекта в Zeplin здесь.

8. Экспорт руководств по стилю из Zeplin.

• На панели инструментов вашего проекта Zeplin найдите кнопку «Поделиться» в правом верхнем углу приложения.
• Выберите «Поделиться», затем найдите «Сцена» в нижней части меню. Выберите «Включить», а затем «Открыть». Это сгенерирует динамическое руководство по стилю для вашего проекта. Поделитесь URL-адресом со своей командой.

9. Добавляйте аннотации к своим проектам в Zeplin.

• С Zeplin легко добавлять заметки к дизайну. В подробном представлении экрана выберите значок добавления заметки и прикрепите заметку к компоненту.
• Вы можете добавить заметку, удерживая нажатой Cmd ( Ctrl для пользователей Windows и Linux) и щелкнув в любом месте экрана.
• Вы можете даже упомянуть других товарищей по команде с помощью «@», и они получат уведомление.

10. Совместная работа, совместное использование и управление версиями.

• Теперь, когда ваш файл Zeplin готов к совместному использованию с вашей командой, пригласите пользователей по их адресам электронной почты или отправьте им URL-адрес проекта.
• Продолжайте обновлять файл Zeplin, экспортировав монтажные области из Sketch.
• Zeplin будет автоматически управлять версиями ваших файлов, и вы сможете продолжить сотрудничество с членами команды, используя этот динамический «источник правды».

Заключение

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

Гибкость динамического обновления ресурсов из одного центрального источника, например символа в Sketch, экспортированного в компонент в Zeplin, обеспечивает огромную гибкость. Затем инженеры могут легко экспортировать ресурсы в собственный код, экономя время и силы.

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

Дизайнеры, желающие быть эффективными и полагаться на один «источник правды», должны рассмотреть рабочий процесс от Sketch до Zeplin, описанный выше. Мощь, лежащая в основе прочного программного взаимодействия между этими двумя инструментами проектирования, поможет дизайнерам и командам разработчиков с большей легкостью и удовлетворением добраться до финиша.

• • •

Дополнительная литература в блоге Toptal Design:

Основные сведения

Какая польза от Zeplin?

Zeplin — это плагин и автономное настольное приложение для Mac и Windows, специально разработанное для преодоления разрыва между дизайнерами и инженерами.Он берет проекты из Sketch, Adobe XD CC, Figma или Adobe Photoshop CC и экспортирует их в формат, который генерирует фрагменты кода, спецификации дизайна и ресурсы.

Что такое фрагмент кода?

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

Что такое приложение Sketch?

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

Что такое система языка дизайна?

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

Каков процесс разработки продукта?

В процессе разработки продукта продукт или услуга выводятся от концепции к рынку. Процесс устанавливает серию этапов — обычно около 7 или 8, — которые обычно проходят новые продукты, начиная с идеи и создания концепции и заканчивая коммерциализацией, выводом продукта на рынок.

Важность набросков в веб-дизайне

Этот рисунок в углу записной книжки — начало отличного веб-дизайна? Возможно.

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

Набросок для передачи идей

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

Все еще не знаете, с чего начать? Используйте наброски или каракули, чтобы:

• Создавать каркасы или простые идеи макета, которые помогут вам увидеть, где будут жить основные компоненты в дизайне веб-сайта (полный набросок, часто создается кем-то из команды дизайнеров).
• Отметьте правки или изменения в различных концепциях или версиях дизайна (сочетание полей и текстовых пометок).
  Показать действия или движение; нарисуйте движение, которое должен создать дизайн (эти наброски могут выглядеть как блок-схемы).
• Создавайте заметки или напоминания, чтобы помочь вам вспомнить информацию о обсуждениях дизайна (нарисуйте их заранее, чтобы обсудить с командой дизайнеров или внести изменения и передать их дизайнеру в качестве напоминания о разговоре).
• Обменивайтесь этими сложными для формулировками и сумасшедшими идеями (общение может потеряться в электронном письме и даже в обычном обсуждении, но набросок может помочь каждому быстро увидеть предложение).

Sketch to Jumpstart Creativity

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

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

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

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

Набросок для уточнения идей

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

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

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

В конце концов, наброски могут сэкономить много времени. Для набросков нет никаких препятствий, если есть чем писать и на чем писать. Процесс быстрый. Результат не обязательно должен быть шедевром — хотя некоторые альбомы для рисования больше похожи на искусство, чем на случайные каракули и линии. И он воплощает в себе один из принципов хорошего дизайна: показывать, а не говорить.

Эскизы не обязательно должны быть «хорошими»… На самом деле их не должно быть

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

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

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

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

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

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