Вправи в дизайні, які прокачають вашу креативність. Технічне завдання для дизайнера Завдання з графічного дизайну

ПРАКТИЧНІ РОБОТИ СТУДЕНТІВ ЗА ДИСЦИПЛІНАМИ “ЖИВОПИС І ЦВІТОВЕДЕННЯ”, “МАЛЮНОК”, “ДИЗАЙН”

К. п.н. доцент каф. ММ МТФ

Новосибірськ-2011

1. Вступ………………………………………………………….2

2. Практичні роботи з дисципліни «Живопис

і квітознавство»…………………………………………………3

3. Практичні роботи з дисципліни «Малюнок»………….16

4. Практичні роботи з дисципліни «Дизайн»……………23

5. Самостійна робота з дисципліни «Композиції»…….25

6. Висновок……………………………………………………….28

7. Література………………………………………………………..29

Вступ

Методичні матеріали є комплексом практичних завдань для аудиторної роботи, а також рекомендацій та роз'яснень, що дозволяють студенту оптимальним чином організувати процес вивчення відповідного курсу та виконати завдання, передбачені програмами даних дисциплін.

Вся система практичних завдань з вищеперелічених курсів призначена для системного та поетапного вивчення відповідних дисциплін, спрямована на набуття та закріплення необхідних знань, розвиток умінь та навичок, творчих здібностей студентів, художньої спостережливості, зорової пам'яті, образного та дизайнерського мислення, творчої уяви, почуття кольору форми, матеріал. Практичні роботи з дисциплін «Живопис та кольорознавство», «Малюнок», «Дизайн», «Композиція» покликані закласти міцні основи образотворчої грамоти, композиції та дизайн-проектування, необхідні для професійного становлення майбутніх фахівців.

У даних методичних матеріалах наведено загальні критерії оцінки практичних робіт студентів з кожної дисципліни, оскільки, попри відмінність виконуваних робіт , існують узагальнені показники, якими їх можна оцінювати. Це, перш за все, композиційне рішенняроботи, передача об'єму і простору, якщо йдеться про натюрморт, портрет, або пейзаж. У декоративній композиції необхідна відповідність техніці, що виконується, наприклад, певному художньому промислу. У практичних роботах завжди оцінюється досконалість володіння технікою малюнка, живопису, або розпису, вміння працювати з графічними та мальовничими матеріалами, колірне або тональне рішення. Оцінка знань та практичної підготовки студентів з дисципліни провадиться з максимальною оцінкою 10 балів.

Захист завдання: оцінка "відмінно" - 9...10 балів, "добре" - 6...8 балів, "задовільно" - 3...5 балів.

Практичні роботи з дисципліни «Живопис та квітознавство»

Основною метою цієї дисципліни є оволодіння методами академічного живопису, знаннями кольорознавства та колористики. Основу професійного освоєння живописної майстерності складає практична діяльність студентів. У практичних заняттях особлива увага звертається на набуття знань і навичок побудови форми за допомогою кольору, уміння бачити різноманітний стан натури, що змінюється в залежності від умов освітлення та середовища, а також уміння гармонізувати колірні відносини у творі, що створюється.

Основним видом практичних робіт з живопису є робота над довготривалою багатогодинною натурною постановкою. Роботі з натури передує сприйняття постановки, аналіз її естетичних якостей – краса форм предметів, їх кольору, поєднання та взаємовплив колірних відтінків, композиційна гармонія різних за розмірами, формою, кольором і тоном предметів, а також аналіз перспективних змін форм, з урахуванням погляду на натуру.

Практична робота №1

Тема:Колір як виразно – образотворчий засіб живопису.

Завдання:Виконання вправ на споріднені, споріднено-контрастні, нюансні стосунки.

Ціль:опанувати техніку роботи криючими фарбами на водній основі

Опис роботи:

1.1. Виконати викраси гуашшю основних (шість спектральних кольорів) на листах паперу розміром 100x100мм. Поступово, без розлучень покрити аркуші паперу потрібним кольором, при необхідності змішуючи гуаш на палітрі. Робота виконується плоскою флейц-пензлем паралельними щільними мазками, що криють, спочатку горизонтальними, а потім, після того, як висохне шар фарби - вертикальними.

1.2 .Виконати розтяжку (плавний перехід) від білого кольору до чорного. Визначити схожі за світлом ділянки сірого кольору зі спектральним кольором. Розмір пофарбування – 70-100x 300-400мм. Для виконання розтяжки знадобляться два плоскі пензлі, м'який флейц, кілька поролонових тампонів та банка з водою. Двома плоскими пензлями в кілька підходів назустріч один до одного створюється загальне поле, де кольори починають взаємодію, змішуючись і поступово проникаючи один в одного. Рівномірність отриманого переходу можна надати м'яким флейцем (після кожного проходу його потрібно промивати і віджимати) або вирівняти тамповкою. При вирівнюванні не можна повертатись назад, інакше вийде бруд і розтяжка буде зіпсована.

1.3. Виконати викраси-розтяжки від спектральних кольорів до білого та чорного кольорів. Усього має бути виконано 12 пофарбувань. Розмір пофарбування 30 x70-100мм. Завдання спрямоване на ознайомлення з властивостями ахроматичних та хроматичних кольорів при їх змішуванні.

1.4. Виконати розтяжку від одного кольору до іншого, з метою отримання плавного переходу: від червоного до помаранчевого, від помаранчевого до жовтого, від жовтого до зеленого, від зеленого до синього, від синього до фіолетового, від фіолетового до червоного. Розмір пофарбування – 300-350x70-100мм. Завдання спрямоване на ознайомлення з властивостями квітів, що стоять поруч, при їх змішуванні.

1.5. Виконати на аркуші 300x400 мм три таблиці, що ілюструють явища контрасту та нюансу: а) за колірним тоном при зменшенні світлоти та насиченості; б) за колірним тоном зі збільшенням світлоти і насиченості; в) за колірним тоном за максимальної насиченості. Вправа має на меті набуття колористичного досвіду при порівнянні різних відтінків додаткових кольорів між собою за яскравістю, світлом, насиченістю та колірним тоном. Вправа виконується методом аплікації із заздалегідь підготовлених викрасів. На смузі-розтяжці від білого до чорного з одного боку виклеюються три пари контрастних кольорів, з іншого боку – три пари нюансних. Форма елементів, що виклеюються, може бути різною – гуртки, квадратики, прямокутники та ін.

Практична робота №2

Тема:Поняття «спектр», «колірне коло».

Завдання:Виконання варіантів колірного кола та спектру (гуаш)

Опис роботи:На аркуші формату А3 виконати колірне коло, шляхом компонування викрасів. Коло має складатися з кількох колірних кіл і містити такі кольори: усередині кола – шкала ахроматичних кольорів

(6 кольорів); наступне за ним коло – чисті спектральні кольори; третє коло, розширюючись, містить розтяжку чистих кольорів до білого (через 5 градацій); наступне коло – розтяжка від кольору до чорного (через 5 градацій); останнє коло – розтяжка від кольору до кольору (через 24 градації). Вправу виконують методом аплікації підготовлених викрасів. Необхідно розмітити колірне коло. Потім розмітити з тильного боку готові викраси за шаблоном. Розрізати папір по розмічених лініях на спеціальній поверхні, користуючись макетним ножем та металевою лінійкою. На попередньо розмічений лист потрібно в потрібні місцянанести тонкий шар ПВА. Потім такий самий шар нанести на готові вирізані елементи. Дочекавшись, коли клей почне трохи підсихати, необхідно з'єднати поверхні.

Практична робота №3

Тема:Асоціативне сприйняття кольору

Завдання:Виконання колірних таблиць, що ілюструють асоціативне сприйняття кольору

Опис роботи:на аркуші розміром 300х400мм зобразити три колірні пари додаткових кольорів, що уособлюють наступні асоціативні сприйняття:

Тяжкий-легкий (фіолетовий колір - жовтий колір)

Активно-пасивний (червоний колір - зелений колір)

Холодний-теплий (синій колір – оранжевий колір)

2. На основі цих пар підібрати відповідні їм відтінки спектральних кольорів, що несуть близьку психофізіологічну дію заданого та сусіднього кольорів (наприклад, жовтий – заданий та зелений – сусідній)

Практична робота №4

Тема:Фізична природа кольору, сприйняття кольорів.

Завдання:Виконання негативного та позитивного зображення натюрморту, пейзажу (зі зразка) (гуаш)

Опис роботи:У прямокутнику, який демонструє перспективне зображення приміщення, створити ілюзію:

а) просторого приміщення з високою стелею;

б) довгого та вузького приміщення;

в) широке приміщення.

Властивості кольору впливати на сприйняття інтер'єру використовують при коригуванні несприятливих пропорцій приміщень. Так, використовуючи «виступаючі» властивості, червоного, помаранчевого і жовтого кольорів, ці кольори забарвлюють торцеві стіни, щоб візуально скоротити довгі приміщення. Синій, фіолетовий, синьо-зелений – кольори, що відступають. Їх використовують для фарбування торцевих стін у коротких приміщеннях, для зорового їхнього подовження. Світлі, розбілені кольори, зорово збільшують простір, насичуючи його повітрям. Тому невеликі приміщення фарбують світлими квітами. У приміщеннях значних розмірів можливе застосування темних кольорів.

Я зробив свій перший сайт як шкільний проект, коли мені було 14. Завдання звучало просто: створити сайт, з текстом, картинками та таблицями.

Зазвичай всі завдання в школі я робив в останній момент, але це завдання просто звело мене з розуму. Саме на цьому проекті я зрозумів, наскільки важливо відточувати зовнішній вигляді робити так, щоб дизайн був як треба.

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

Згодом я став усе більше приділяти уваги дизайну. Прокачував обидва навички: програмування та дизайн. За цей час я перейнявся дизайном і зрозумів, що чудовий дизайн – це не обов'язково щось із великою кількістю лайків на Dribbble. Дійсно гарний дизайн непомітний. У речі з гарним дизайном ідеальний баланс між «Навіть твоя бабуся може» та «Кайф, як круто». А ще, гарний дизайн – це важлива перевага. Він як нітрооксид у гонці, він – ваш секретний інгредієнт.

І справа не в таланті

У юності, я грав Minecraft. І мене завжди дивувало те, що вмудряються побудувати люди в цій грі. Саме їхні будівлі надихнули мене збудувати своє, тільки просунутися далі за коробку у мене чомусь не виходило. І цій коробці навіть не вистачало стилю.

Виправити це допомогли ролики одного хлопця на YouTube. На його відеоуроках я повторив усе по кроках і створив класний будиночок. А за кілька тижнів практики я виробив свій стиль і вже міг творити вільно. І навіть виграв будівельний конкурс.

Дизайн-це навик, як і будь-який інший навик, його можна прокачати.

Вибір правильного інструменту для роботи

Запрограмувати в Notepad можна таку ж круту програму, як і в просунутій IDE… але це може зайняти дуже багато часу. А час – найцінніший ресурс. Аналог блокноту в дизайні – MS Paint, але професійні дизайнери вибирають що крутіше.

Найпопулярніші інструменти дизайну для веб

• Sketch, тільки для Mac, заточено на дизайн інтерфейсів. $99/рік;
• Adobe XD, крос-платформний інструмент. Його співтовариство поменше, зате з ним легко розпочати;
• Adobe Photoshop, у дизайні швейцарський ніж, підходить для будь-яких завдань. $9.99 / mo.

У кожного інструменту свої плюси та мінуси. Мені подобається Adobe XD. Він кроссплатформенний, не прив'язаний до Mac OS. Люблю таке. Для новачків він, як на мене, саме те.

Налаштовуємо мислення

Найважливіший крок у дизайні, як на мене, поставити мислення. Раніше я робив дизайн під час розробки. Є пріоритет та потік. Зліва направо та зверху вниз. Все строго та системно, блоки ставляться один за одним як цеглинки.

У дизайні все негаразд. І, здавалося б, здається хаотичним. Але якщо придивитися – у цьому є сила. Дизайн розв'язує вам руки, робить вас вільними та прискорює експерименти. У графічних інструментах кожен елемент позиціонується абсолютно, а чи не щодо. Саме завдяки цьому ви можете експериментувати і рухати все як завгодно, поки не досягнете потрібного результату.

Освоюємо інструменти

Розробники застосовують HTML-елементи, такі як div, span та input, щоб показати на екрані елементи дизайну. А за допомогою інструментів дизайну, ви можете придумати, як саме все має виглядати та працювати.

Я підібрав 4 популярні інструменти проектування, щоб ви витратили менше часу на навчання і більше часу на практику в проектуванні.

Rectangle tool (Прямокутник)

Прямокутник – універсальна форма, будівельний блок. Чимось схожий на div. Підходить для створення полів уведення, кнопок, блоків і т.д.

Text tool (Мітка)

Text tool допомагає створити текст. Він має два режими роботи: один для створення однорядкового тексту та інший для створення кількох абзаців. Загалом, трохи практики, і у вас все вийде.

Перший режим - однорядковий текстовий контейнер, який регулює його розмір на основі розміру тексту. Це схоже на< span>, за винятком того, що він не буде переноситися, якщо ви не зробите розрив рядка. Перевага цього режиму в тому, що він автоматично регулює розмір текстового поля (text box size), виходячи з міжрядкового інтервалу (line height) та розміру шрифту (font size).

Щоб створити текст, натисніть Text tool. Цей режим зручний для створення заголовків, назв кнопок та інших елементів навігації.

Text tool (Абзац)

Другий режим є текстовим контейнером з певним розміром. Він веде себе як

З певною шириною або

Всередині сітки. Фішка цього режиму в тому, що ви можете налаштувати розміри текстового поля.

Щоб створити абзац (paragraph), клацніть Text tool, виберіть точку на полотні, клацніть і ведіть убік, затиснувши кнопку миші. Рух такий самий, як і виділення тексту. Це зручний режим створення абзаців тексту.

Select tool (Вибір)

Перемістити, змінити розмір, зробити копію (Move, resize, duplicate). Загалом корисний інструмент. А ці рожеві лінії показують відстань до навколишніх елементів. А сині лінії допомагають правильно вирівняти елементи.

Line tool (Лінія)

Лінія гарна як роздільник. Але прямокутник висотою 1px легко його може замінити. Так само як і div, який може бути чим завгодно 🙂

Layout

У веб-розробці макет найчастіше сприймається як header, menu, content, and footer. Хоча Layout - це про те, як організовані всі елементи на екрані. Елементи бувають прості та складові. Прикладом складеного проекту може бути "картка проекту", як на прикладі нижче.

Колір

Щоб знайти ідеальний колірдля наступного проекту, вивчіть психологію сприйняття кольору (colorpsychology.org). А для пошуку ідеальних поєднань ви можете спробувати сервіс Paletton. У ньому можна підібрати гармонійну палітру та навіть подивитися її в роботі на сайті. Колись цей ресурс допоміг мені познайомитися з теорією кольору і це прискорило підбір палітри кольорів для мого ресурсу: https://sidemail.io/

Використовуйте відтінки основних кольорів та кольорів для створення візуальної ієрархії. При використанні кольорового фону спробуйте використовувати темніші або світліші відтінки для тексту.

Друкарня

Шрифт впливає на брендинг вашого проекту, тому підійдіть до підбору шрифту з розумом. Платні шрифти, як правило, виглядають краще, ніж шрифти з Google Fonts, але на старті не поспішайте купувати шрифт. Порійте на Google Fonts і підберіть близький за характером спочатку там.

Мені подобається така фішка. Елементи навігації я роблю ПЕРЕПИСНИМИ і збільшую в них міжлітерні відстані (letter spacing). Для навігації працює добре, але в тексті краще не переборщити із цим.

Створення головної сторінки сайту (або лендінгу)

Я досі борюся зі спокусою спочатку зробити модно, а потім намагатися помістити туди свій текст. І так спочатку я визначаю переваги продукту для користувачів (не функції), потім поміщаю їх в історію і розповідаю цю історію за допомогою візуально привабливого лонгріда.

Після того, як я вирішив, що хочу сказати, я йду за натхненням. На land-book.com його дуже багато. Ще я черпаю натхнення на interfaces.pro. І поки в голові не клацне «все вистачить» я дивлюсь та вивчаю.

Найскладніше – це зробити підсумкове збирання. Тут я поки що не знайшов найкоротшого шляху. Я роблю, пробую, експериментую, доки не отримаю те, що на мій погляд гідно показати клієнтам.

І пам'ятайте, що вам подобається сьогодні, може не сподобається вам завтра, і це нормально, тому що ви росте, навчаєтеся і стаєте кращим. Тому не буксуйте, рухайте свої продукти вперед, збільшуйте цінність.

Підсумуємо

• Унікальний шрифт має значення передачі характеру продукту;
• Унікальна графіка дуже важлива передачі образу продукту;
• За допомогою відтінків можна збудувати хорошу ієрархію;
• Не створюйте надто широкі абзаци тексту, робіть їх не більше 60-72 символів;
• Повітря та негативний простір – це благ а;
• Розповідайте про переваги для користувачів, а не про функції;
• Черпайте натхнення у безмірному світі навколо.

Проектуємо веб-додаток

Цього разу наше завдання не в тому, щоб розповісти історію. Ми робимо зручну програму, яка вирішує завдання клієнтів. Тому беремо ручку і папір і пишемо план того, як програма по кроках вирішує завдання користувача.

При потребі робимо кілька ескізів. А ще дивимося конкурентів, вивчаємо їхній підхід до вирішення аналогічних завдань. І думаємо, в чому наш додаток може бути сильнішим.

Найкраща порада, яку я можу дати, це не копіювати конкретні реалізації, щоб вибрати правильний макет сторінки. Як правило, всі веб-застосунки використовують два різних макети сторінок залежно від мети програми: контейнер фіксованої ширини (Fixed container) або Fluid container, який заповнює весь екран.

Контейнер фіксованої ширини (Fixed container)

Я віддаю перевагу Fixed container, тому що з ним набагато легше сфокусувати увагу користувача та скоротити кількість рухів очей. З ним додаток виходить чистішим, але так як ширина контейнера невелика, проектувати такі програми складніше.

Kern Type, the kerning game

Що перевіряє:задатки шрифтовика

Дизайнер інтерфейсів Марк МакКей створив гру, яку ми б не радили надміру дратівливим людям. Завдання - вирівняти міжлітерний простір, максимально точно наблизившись до оригіналу. Пізніше свій варіант можна порівняти з ідеальним та підрахувати, як точно ви впоралися із завданням за 100-бальною шкалою.

Real або Photoshop

Що перевіряє:вміння відрізняти оброблені фотографії

До 25-річного ювілею Photoshop компанія Adobe запропонувала подивитися на 25 фотографій та визначити, обробили їх у програмі чи ні. Таким чином творці тесту продемонстрували, наскільки Photoshop вплинув на наше сприйняття світу, ставлення до творчості та достовірності.

How Well Do You Know Your Logos

Що перевіряє:знання логотипів

Інтерактивний тест журналу Time - не тільки на око, але й на вміння малювати. Гравцеві потрібно максимально схоже відтворити 10 відомих логотипів, серед яких Apple, McDonalds, Chanel і Toyota.

KOLOR

Що перевіряє:почуття кольору

Якщо у вас немає проблем із зором, то ви напевно відрізніте зелений колір від червоного. Але чи зможете знайти правильний зелений колір серед 10 практично ідентичних відтінків зеленого? Як з'ясував автор тесту KOLOR Хорхе Морено, це набагато складніше, ніж здається на перший погляд.

Pixactly

Що перевіряє:почуття простору

Pixactly за рівнем складності ледь не перевершує Kern Type і перевіряє, як добре ви співвідносите задані піксельні параметри з реальним простором на екрані - 30 пікселів можуть виявитися втричі меншими, ніж здавалося спочатку.

The Bezier Game

Що перевіряє:володіння «Фотошопом»

Гра The Bezier Game перевіряє ваше володіння інструментом «Перо» (The Pen Tool) Photoshop і пропонує виділити задану фігуру, маючи в запасі обмежену кількість точок. Простота оманлива: від рівня до рівня фігури стають дуже складнішими. Рідкісний приклад тесту, який приносить майже негайну користь (і який можна, наприклад, рекомендувати як робоче завдання).

Shoot The Serif

Що перевіряє:уважність до шрифтів

Найпростіший тест у добірці на перевірку виявляється підступним. Здається, що навіть далекі від роботи зі шрифтами люди здатні відрізнити шрифт із засічками і без - але коли літер стає більше, а шрифти менш звичні, помилитися дуже легко.

Креативність – це навичка мислити нестандартно. Маючи цю навичку, ми створюємо слогани для рекламних кампаній, вигадуємо нові імена для продуктів, проектуємо товарний знак і логотип, коротше - беремо участь у створення додаткової цінності товару для того, щоб його дорожче продати. Навичка креативності належить до високопрофесійних навичок і як будь-яку високопрофесійну навичку він тренуємо.

У цьому уроці хочу запропонувати вам три вправи, якими користуюся сам і які практикую зі своїми студентами дизайнерами. Вони допомагають намацати ту грань у вашій уяві, де закінчується звичайна і банальна і де починається нова і креативна.

ВИПАДКОВЕ - НЕВИПАДКОВЕ
Відкрийте тлумачний словник, я користуюсь тлумачним словником

Ожеговим, і навмання виберіть два випадкові слова. Просто натисніть пальцем на будь-які сторінки. Зіставте слова, спробуйте знайти між ними щось, що їх об'єднує. Придумайте шалену історію, в якій розкрийте цей взаємозв'язок. Робіть це щоразу, приступаючи до нового проекту, щоб «розігріти» свою уяву.

ВОЛОСАТИЙ ПИРІЖОК
Візьміть будь-який предмет, візуалізуйте його у своїй уяві, наприклад «кросівки». Знайдіть 10 описових прикметників, органічних для цього предмету: модні, дорогі, білі, дитячі і т.д. Готово? Тепер придумайте ще 10 прикметників, які абсолютно не підходять для опису кросівок. Спробуйте. Виявіть, що це завдання досить складно. Покопайтеся у своїх почуттях та сприйняттях та знайдіть потрібні слова.

Примусові зв'язки
Розкресліть лист на три стовпці. У перший впишіть назву предметів для офісу (скріпки, кнопки), в іншій для кухні (міксери, чайники), в третій – предмети з гаража або майстерні (кліщі, молотки). Подивіться уважно на створений вами список і спробуйте «одружити» 2 предмети з різних груп, так щоб проявилася нова неіснуюча, бажано кумедна функція. Приклад: автомобільні колеса, що прикріплені до офісного крісла для швидкого кар'єрного підйому тощо. Створений вами об'єкт потрібно намалювати, можна у вигляді швидкого скетчу, вміння малювати особливої ​​ролі не відіграє, головне, щоб вигаданий вами предмет візуалізувався.

Творчих усім узбеків!

Роботи мексиканського дизайнера Хав'єра Переса