Шлях розробника до дизайнера: як це зробити

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

З чого слід почати? Як дізнатися, як створювати красиві веб-сайти та інтерфейси?

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

Якщо говорити, якщо ви хочете прочитати на UI / UX / і т. Д., Я погляну на цю чудову тему: Потрібно прочитати книгу користувальницького інтерфейсу? Я думаю, що мій особистий фаворит - «Не змушуй мене думати» Стіва Круга - але я впевнений, що з часом ти знайдеш свого улюбленого.

Нарешті, стосовно таких інструментів, як Photoshop, Illustrator тощо ... не хвилюйтеся з цього приводу! Зрештою, ви знайдете інструменти, які найкраще підходять для вас. Особисто я починаю з макетів з олівця та паперу, потім залежно від проекту перейду до чогось у Balsamiq , або Axure , або іноді до прямого HTML та CSS - це дійсно залежить від розміру, обсягу проекту та ін. найзручніший для вас. Зрештою, важливо лише те, що ви чітко повідомляєте про своє бачення дизайну, а не про те, яким інструментом ви користувалися.

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

Одне з моїх натхнень - хлопець на ім’я Робі Інгебретсен, тому що він дуже добре розробляє та розробляє дизайн. Його веб-сайт знаходиться на сайті nerdplusart.com .

Є кілька речей, які б я поглянув на нього ...

• Мій (дуже) короткий список обов'язково прочитаних книг для дизайнерів
• Основи дизайну для розробників
• 10 способів напасти на проблему дизайну і виграти

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

Так само, як навчання Visual Studio не робить хорошого розробника програмного забезпечення, так само навчання Photoshop не стане хорошим дизайнером інтерфейсу.

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

Неофіційно приступайте до роботи! ;) Найкращий спосіб вчитися - це просто зробити це.

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

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

Я б почав з читання книги "Head First Web Design" Watrall & Siarto (виданої O'Reilly). Це досить нісенітниця, легко засвоюється і переглядає все, що дизайнер повинен врахувати. Це не поглиблене дослідження, але ви починаєте знати, на які питання потрібно відповісти далі. Він охоплює навігацію, організацію, макет, написання, колір та доступність.

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

Я насправді застосував протилежний підхід від UX Designer до UI Developer, однак, підбираючи дизайн, рекомендую почати пару областей:

Я поглянув би на книгу "Не змушуй мене думати!" Стів Круг , що, на мою думку, є чудовою книгою про розробку дизайну в Інтернеті.

Є багато чудових веб-ресурсів, включаючи SmashingMagazine.com та PSDTuts.com, які дають чудові актуальні статті у світі дизайну та веб-технологій.

Я також хотів би поглянути на розуміння принципів HCI, якщо ви спеціально дивитесь на те, щоб стати дизайнером UX.

Удачі та щасливого проектування!

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

Гаразд, це широка тема. Ви хочете створити "красиві", "чудові", професійні "веб-сайти. Отже, вам потрібно знати, що змушує людей сприймати щось як" красиве ", правда? На щастя для вас, краса насправді не суб'єктивна.

Одним із запорук красивого візуального дизайну є гармонія .

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

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

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

Як вбудувати гармонію в дизайн веб-сайту

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

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

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

Наприклад, давайте розміримо заголовки веб-сайту (для спілкування візуальної ієрархії).

Скажімо, у нас є ця модульна шкала, заснована на розмірі шрифту корпусу 19 пікселів (19 пікселів, тому що він найкраще виглядав із шрифтом, який я використовував, але ви можете пропустити цей крок і перейти з типовим розміром 16 пікселів) та співвідношенням 1,412 (Ні потрібно розібратися в деталях, чому я вибрав це співвідношення. Просто будь-яке співвідношення буде краще, ніж ніяке співвідношення для ваших проектів.):

Дивлячись на це, я вибрав би H1 як 2,815ем, H2 - 1,994ем, а H3 1,412em. Перші 3 числа перевищують розмір шрифту корпусу. Легко-гороховий, правда? Текст тексту буде 1em (у моєму випадку 19px). Тоді я розміщую H4-H6 в 1em і використовую контраст (різну вагу або стиль шрифту), щоб відрізняти їх від тексту тексту.

Отже, спробуйте це зараз:

1. Створіть власну модульну шкалу
2. Отримайте звичайний HTML-документ (реальний вміст, будь ласка, не Lorem Ipsum)
3. Використовуйте шкалу, щоб розмістити заголовки.
4. Потім спробуйте використовувати шкалу для інших рішень щодо розміру (поля, прокладки тощо)

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

Якщо вам це стане в нагоді, ви можете прочитати мій інший список із 7 порад для початківців веб-дизайнерів, які знають HTML та CSS

PS: Вам справді багато чого читати

Як сказали інші, читайте:

• Елементи графічного дизайну Олександра Білого
• Елементи друкарського стилю Роберта Брінгхерста
• Не змушуй мене думати Стів Круг

Крім того, тут величезний список Інтернет-ресурсів, таких як блоги та спільноти, на які слід слідкувати: enboard.co/webdesign/