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

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

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

• Будьте прості - не намагайтеся спочатку робити щось занадто вигадливе або авантюрне. Спочатку спустіть основи, а потім можете приступити до експериментів. Не намагайтеся наслідувати комп'ютерний інтерфейс Star Trek.
• Будьте послідовними - послідовний дизайн є частиною основи хорошого дизайну. Слідкуйте за своїми полями, розмірами та розміщенням та підтримуйте їх протягом усього дизайну.
• Зняти безлад - Включіть лише ті елементи, які необхідні для дизайну. Видаліть все інше.
• Визначте пріоритет - яка головна мета дизайну? Підкресліть цю мету. Зробити це очевидним.
• Використовувати пробіли - Дозволити для правильного поля. Великі текстові блоки з невеликими полями або без них не дуже читабельні. Ditto для інших елементів дизайну.
• Використовуйте кольорову палітру - не слід використовувати більше 4-5 кольорів.
• Послідовні шрифти - дотримуйтесь одного або двох шрифтів. Використовуйте їх послідовно, як правило, один для заголовків, один для тексту абзацу. Обчислюйте та підтримуйте послідовний розмір шрифту, висоту рядків та інтервал між рядками. Не використовуйте Comic Sans, якщо не зможете відмовитися від шалених зомбі велоцирапторів.
• По-перше, дизайн - дизайн не повинен бути задумливим; він повинен бути першокласним членом етапу планування. Дизайн буде тим, як ваші користувачі взаємодіють із вашим програмуванням, і вони сформують свою думку спочатку і значною мірою будуватимуться на вашому дизайні. Надайте дизайну належного значення.

Щодо ресурсів, ви переглядаєте будь-який із наступних веб-сайтів:

• Smashing Magazine
• PSD Tuts
• Абузеедо
• UX Будка
• Я люблю друкарню
• Джейсон Санта-Марія

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

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

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

Якщо це допоможе вам спілкуватися з веб / графічними дизайнерами, з якими ви працюєте, то просто отримати книгу, яка навчає вас словнику (наприклад, типографічні концепції) та зосередитись на зручності , доступності та дизайні UX , мабуть, найкраще використовувати ваш час. Таким чином ви можете долучитися до творчого спрямування проекту та допомогти розробити інтерфейси, але дизайнер - це той, хто створює «вигляд» чи естетику сайту.

Virtuosi Media перераховує багато хороших ресурсів (мережа Tutsplus загалом чудова, а Smashing Magazine - обов’язково прочитаний для будь-якого веб-розробника / дизайнера), до якого я додам:

• http://www.alistapart.com/
• http://webdesignledger.com
• http://behance.net - розміщує портфоліо багатьох дизайнерів світового класу, щоб черпати натхнення

Я сам програміст і для мене наступні книги, які мені дуже допомагають:

• Книга дизайну недизайнера Робіна Вільямса: У цій книзі висвітлено основи графічного дизайну.
• Малювання з правого боку мозку Бетті Едвардс: Книга для розвитку ваших навичок малювання.
• Гуманний інтерфейс Джефа Раскіна: Ця книга провокує деякі думки щодо дизайну інтерфейсу користувача.

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

У 2004 році я опинився на півдорозі між обома світами, як це було протягом більшої частини свого життя - я працював в Інтернеті з HTML 3.2 у дні дот-ком; виховані з Apple // e батьками (хореографом та педагогом), які дозволяли та заохочували мене проводити багато часу з мистецтвом. Дизайн - це не мистецтво, і насправді деякі його алгоритмічні зразки чудово поєднуються з програмуванням, чи ви займаєтесь Інтернетом чи іншим способом.

• Гістограма книжкової полиці - друк, який я зробив в аспірантурі, який є і дизайном-і, і розробником.

Але так, так, 2004 рік: я розділив різницю, коли пішов до аспірантури, де спершу здобув першокласну типографічну освіту, а потім широту для дослідження - під час цього в останній час мої прихильники виявилися корисними.

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

Дізнайтеся багато про типографію.

Від класики …

^{Ян Цичіхолд}

Не клоуни ...

^{Девід Карсон}

Стратегічна та ефективна типографія - одна з найпоширеніших якостей у цій галузі (і завжди була такою).

Я, як правило, можу найняти дизайнера, повністю виходячи з їх обробки. Близько 80% історії - це резюме.

Хороший (безкоштовно) старт це детальна адаптація з сутнісного ресурсу від Брінгхёрста для застосування в Інтернет.

^{Елементи друкарського стилю, Брінгхерст}

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

^{Сітки в графічному дизайні, Брокман}

1. Подумайте критично про створені навколо вас об'єкти

   Майже все в техногенному середовищі має якийсь дизайн за ним, будь то графічний, веб-сайт чи модний аксесуар.

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

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

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

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

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

3. Практикуйте спілкуватися візуально.

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

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

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

4. Дослідіть, як створюються речі

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

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

5. Знайдіть хороші джерела інформації

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

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

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

6. Розвиток своїх дизайнерських навичок

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

7. Робіть помилки швидко

   ви зробите багато помилок, і чим швидше ви зможете їх пройти, тим краще.

8. Завжди будьте готові ловити ідеї.

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

Книги та матеріали

http://www.alistapart.com

http://webdesignledger.com

Smashing Magazine

PSD Tuts

Абузеедо

UX Будка

Кілька пунктів, які потрібно пам’ятати:

1. Кожен дизайн вирішує проблему

Перестаньте думати про дизайн в плані "Як зробити це гарненьким?" і почніть думати про це з точки зору "Як зробити це якомога простішим у користуванні?"

Коли ви робите веб-сайти, це означає, що ви в найширшому розумінні вирішуєте бізнес-проблему .

Існує веб-сайт для реалізації бізнес-мети .

Користувачі веб-сайту також мають на увазі власну мету - вони можуть захотіти щось придбати, порівняти продукти, прочитати тему тощо.

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

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

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

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

2. Саме повторення робить речі красивими .

Ось в чому полягає консистенція.

Наприклад, спарювання шрифтів. Шрифти поєднуються на основі схожих рис, на повторенні деталей.

Ось матч: Фарнхем та Бентон Санс.

Згідно з цим повідомленням тут 2 ці два шрифту збігаються , так як :

[...] обличчя схожі на скутість їх малих літер, які мають чітко короткі сходження та спуски. [...] Малі літери обох широкі.

Повторення певних ознак змушує ці 2 шрифти добре працювати разом. Ви можете побачити їх на веб-сторінці тут 3 .

Повторення вносить гармонію в дизайн. А гармонія робить дизайн виглядати красивим.

Але, як бачите, Фарнхем і Бентон Санс також контрастують - Фарнхем - це шрифт із засічками, а Бентон - sans serif.

Чому потрібен контраст? Ми хочемо внести подібність в дизайн, правда?

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

Ліки - контраст.

3. Контраст допомагає користувачеві знайти свій шлях

Це допомагає їм відрізняти різні елементи один від одного. Це допомагає їм знайти ключові елементи, такі як заголовки, навігація, кнопки.

Чим важливіший елемент, тим більше він повинен контрастувати з оточенням.

Використовуйте повторення, щоб зробити свої проекти послідовними. Як уже говорили інші - 2 шрифти з обмеженою палітрою кольорів тощо.

Використовуйте контраст, коли вам дійсно потрібно виділити елемент від решти.

Все це приємно знати, але ... все ще не допомагає вам створити наступний веб-сайт, правда?

Що ж, у мене теж є рішення .

Крок 1, щоб стати кращим у веб-дизайні - це спостерігати та поглинати роботу інших. Дуже багато. Ось звідки походить "натхнення".

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

Короткий зміст: Наступного разу, коли ви почнете розробляти свій побічний проект

Перегляньте десяток подібних веб-сайтів / веб-додатків і зробіть швидкі ескізи своїх дизайнів. Зверніть увагу, який робочий процес вони використовували. Чому вони його використовували? Зверніть увагу, які форми, кольори та шрифти вони використовували.

Потім пройдіть цей процес, щоб створити свій власний дизайн:

1. Визначте проект. Пориньте в проект і познайомтеся більше про:

   1.Яка мета, передбачувані результати

   2. Її (майбутніх) користувачів
   3. Передбачуваний досвід для своїх користувачів / відвідувачів
   4. Брендінг за проектом
2. Придбайте необхідні ресурси. Отримайте свої зразки (зразок) вмісту (позичайте на подібних сайтах)

3. Надайте форму змісту

   1. Виберіть шрифт, у якому потрібно набрати вміст (виберіть той, який відповідає настрою та повідомлення сайту)
   2. Виберіть розмір шрифту для копії тіла
   3. Створіть модульну шкалу (таблиця пропорційних гармонічних розмірів) з розміру шрифту копії тіла (використовуючи шкала типу - візуальний калькулятор)
   4. Ескіз різних макетів на основі вимог проекту
   5. Побудуйте макет (у HTML та CSS) за допомогою модульної шкали: ширина стовпця, висота рядка, розміри заголовків, нижнє поле, стовпці (за потреби)
   6. Застосовуйте колір відповідно до настанови бренда

Детальніше про кожен етап цього процесу ви можете прочитати тут .

Ще кілька:

1. Перегляньте натхненну колекцію веб-сайтів для ідей. Колекція завантажених натхненних колекцій веб-сайтів перераховує досить багато колекцій. Ще дві хороші сайти є siiimple.com і minimalsites.com .

2. Пропозиція Virtuosi Media «Видалити безлад» - це безумовно ідеальний варіант, але сайт із захаращенням, який робиться початківцем, виглядає краще, ніж мінімалістичний сайт, який робить початківець. Забруднення дещо маскує інші погані елементи дизайну, відволікаючи зміст. Типовий бізнес-сайт має занадто велике захаращення, як і майже всі шаблони, але все ще досить професійний.
   
   Потрібен інтимний зв’язок із шрифтами, контрастом, негативним простором, кольором, густиною, потоком, ..., щоб створити справді добре розроблений, ефективний сайт, який добре дихає.

3. Якщо все стає трохи непосильним, подумайте про придбання шаблону.

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

• Дизайн для хакерів (друкована книга)
• Принципи дизайну інтерфейсу користувача (сайт)
• Покроковий дизайн інтерфейсу користувача (електронна книга)
• Форма дизайну (безкоштовна онлайн версія)

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

Вам справді потрібно шукати інших чудових дизайнерів. Для цього слід слідкувати за чудовими дизайнерами на Dribbble . Також дуже важливою є регулярність перегляду останніх дизайнів на сайтах css Gallery, таких як www.minimalistgallery.com або інших.

Бажаю всього самого найкращого !!!

Підписуйтесь на http://sidebar.io/ для щоденних бюлетенів. Кожна стаття буде корисною тим чи іншим способом. Ще один чудовий спосіб самостійного вивчення дизайну - дриблінг .

Це може бути досить загальною порадою, але для мене це щось, що насправді говорить про те, хтось хороший дизайнер чи ні:

Пробіли, поля та вирівнювання.

Вони є ключем до створення гладких, професійних дизайнів. Вони створюють своєрідний «дихальний простір» і справді можуть визначати, чи буде ваш дизайн виглядати складеним чи ні. Як і у випадку з шрифтами, ви хочете дотримуватися певного набору / пробілів, щоб макет виглядав чистим.

Для відстеження подібних речей дуже корисним може бути використання сітки або напрямних для проектування.

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

Книга дизайнерів для недизайнерів