Що робить дизайн професійним?


10

Хтось може визначити, чому щось може не виглядати "професійно"?

Що відрізняє професійний / непрофесійний дизайн?

У мене є клієнти, які сказали, що моя конструкція не виглядає дуже професійно. Я дотримувався всіх речей, щоб зробити це професійним - можливо, я не знаю достатньо про дизайн? Я бачив безліч "професійних" шаблонів дизайну, які виглядають легко і схоже на мої. Більшу частину часу, коли мені не доводиться йти, я дотримуюся цих шаблонів, але коли закінчую, отримую відгук про те, що "Це не виглядає професійно" . Це мені не допомагає. Хтось тут має реальну допомогу / досвід / пропозиції, які допоможуть мені щодо зовнішнього вигляду, шрифту, стилю ... всього . Будь ласка, дайте мені спосіб!

Коротше кажучи:
що робить дизайн професійним?


Я не міг допомогти, але пам’ятаю цей комічний theoatmeal.com/comics/design_hell Не те, що це допомагає.
Joonas

це смішно, я вже дав час на це, але я не можу передати їх своєму клієнту чи моєму босу, ​​бажаю, щоб я міг: D
Джек

5
Попросіть їх показати вам приклад професійного сайту та вчитися на цьому.
Кромстер

4
Я знаю, що ваш зразок був грубим, але ще одним дуже важливим моментом щодо професіоналізму є копія. "Щось про нас"; "Про засновника" написано погано і навіть не має гідної капіталізації. Навіть у формі чернетки особа, яка оцінює копію, відповість на ці речі (НАВІКЛИ, якщо ви говорите, що це 2 000 разів, це грубо і лише для позиції), і на цьому етапі вашого дизайну ваші заголовки повинні бути чітко встановлені.
horatio

приємний момент хоріто, я подбаю про це ..
Джек

Відповіді:


19

Я зробив цю ще одну відповідь, оскільки це прокоментувати ваш дизайн:

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

введіть тут опис зображення

Основна історія полягає в тому, що їй не вистачає вирівнювання та глибини ... багато глибини.

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

введіть тут опис зображення

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

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

Сподіваюся, що це вам допоможе.


Це дуже добре знати спасибі багато, я вдосконалю ці речі, хоча я видалив це зображення з якихось причин, велике спасибі
Джек

@Jack Вас вітають, ніколи не шкодить допомогти :) Що стосується навчання. Про це є маса навчальних посібників та блогів. Просто google це. Журнал Smashing - це гарний початок
Luuk

11

Робін Вільямс, друг усіх початківців дизайнерів, вказує на чотири найважливіші речі: контрастність, повторення, вирівнювання та близькість (і так, абревіатура CRAP!). Ви повинні дістати її книгу " Книга дизайну недизайнерів " і вивчити її. Все, що в ній, стосується Інтернету настільки ж, як і для друку. Це легко читати і дуже зрозуміло. Потім дістаньте «Веб-книгу недизайнера » та вивчіть це. Я додам до її квартету: Повідомлення, Гармонія та Доречність.

  • Повідомлення клієнт хоче отримати через це перше , що вам потрібно знати, тому що він інформує все інше. У успішному фотографуванні, дизайні, живописі, написанні є просте тріо правил, які ніколи не порушуються: 1) мати повідомлення; 2) Включіть лише те, що сприяє повідомленню; 3) Видаліть все, що відволікає повідомлення. На фотографії спортсмена ви використовуєте її знімок у повітрі, виглядаючи витончено, і клонуєте порожню банку коксу та напів з'їдений бутерброд на задньому плані. Як художник, ви повинні знати, що ви намагаєтесь сказати. Як дизайнер, ви повинні знати, що намагається сказати клієнт . Це, зрештою, те, за що клієнт платить вам.

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

  • Актуальність приходить на самому початку циклу проектування. Це стосується кольору, типографії та загального планування. Ви б не використовували пудровий блакитний та дитячий рожевий для дизайну веб-сайту високотехнологічної компанії, а також для художника хіп-хопу. Цей чудовий гострий шрифт гранж не працює для юриста чи бухгалтера, але Times Times може. (Ви б уникали Times для сайту, який повинен виглядати сучасно.) Важка група з важких металів потребує сміливих форм і кольорів, високого контрасту, але медична клініка або дитячий одяг потребують значно м'якшого вигляду.

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

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

  • Вирівнювання , відсутність - це найвірніший спосіб зламати дизайн. Немає нічого, що кричить "аматорських" голосніше, ніж речі, які не зовсім вирівнюються. Друкуючи, ми працюємо з точністю менше 1/1000-го дюйму. Можна помістити речі так нерівно, при умови , що зміщення напівжирний, очевидно , і роздумувати. Але ніколи, ніколи не майте 7px прокладки на ap тезі та 8px на h1. (Як бічна примітка: уникайте макетів з центрами для будь-якого іншого, крім запрошення на весілля чи похорону. В центрі макети розташовані в спокої, безтурботно, нерухомо, чого майже ніколи не хочете. Початківці використовують централізовані макети, оскільки не знають, як вирівняти речі.)

Вирівнювання та повторення - чому сітки є таким корисним інструментом. Розуміння цих моментів дасть відповідь на багато питань щодо використання сіток.

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

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

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


2
Алан, твоя відповідь допоможе кожному початківцю, хоча я я на цій вправі. Дякую тобі за це, і я спробую найкраще виконати свою обіцянку ...... нехай нове сонце встане в межах .... :) Ще раз дякую ..
Джек

Як я навчився (досить часто важкий шлях), так я проходжу далі. Ви більше ніж ласкаво просимо. Удачі!
Алан Гілбертсон

ЛЮБИТЬ книги Робіна Вільямса. Відмінна відповідь та чудові пропозиції.
Лорен-Ясний-Моніка-Іпсум

9

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

  • Базуйте свою колірну палітру на основі фірмового стилю клієнта.
  • Слухайте його потреби уважно, щоб ви могли відповідати бажаному стилю
  • Дизайн для зручності використання. Ви можете зробити дизайн, що опускає щелепу, але якщо конверсія не є доброю, вона марна.
  • Вибирайте типографіку ретельно (наприклад: Ви не бачите продуктів Apple з графіті, як шрифт)
  • Перед початком проектування використовуйте систему 960gs, таким чином ви впевнені, що ваше вирівнювання добре
  • Поясніть та відстоюйте свій дизайн. Скажіть клієнту, чому ви вибираєте конкретні елементи, і поясніть йому, чому вони хороші. Пам'ятайте, ми як дизайнери не завжди маємо рацію.
  • Продовжуйте вчитися. Слідкуйте за блогами та інтернет-журналами, щоб отримати нові навчальні посібники jQuery тощо. Читання є ключовим.
  • Переконайтеся, що ваш код W3C дійсний та не надто великий за розміром.

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

2

Деякі речі, які слід пам’ятати для гарного дизайну:

Тож ми збираємось вивчити 4 дивовижні правила правил графічного дизайну, які допоможуть вам у вирішенні ваших навичок дизайну. Отже, 4 правила:

  1. Вирівнювання та розподіл
  2. Балансування та групування
  3. Контрастність
  4. Візерунки та градієнти

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

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

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

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

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

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

  • Другий метод - групування окремих елементів: У цьому правилі ми робимо різні групи різних елементів у дизайні. Погляньте на приклад, щоб зрозуміти це.

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

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

Візерунки та градієнти: Ви можете зробити дизайн ще більш приголомшливим, додавши візерунки на фоні дизайну або в інші елементи вашого дизайну. Градієнти дуже корисні, щоб зробити ваш дизайн більш живим і радісним. Завжди пам’ятайте, що при використанні градієнтів намагайтеся використовувати два кольорові градієнти з безглуздо кольоровими відмінностями.


Привіт, барелія мистецтв, ласкаво просимо на GDSE і дякуємо за ваші широкі відповіді. Будь ласка, не покладайтеся на посилання для "повних відповідей". Обмін стеками спрямований на збір знань саме тут, незалежно від посилань, які згодом можуть розірватися. Посилання для додаткової інформації нормально, якщо суть відповіді у вашому дописі. Спільнота схильна до жорстких відповідей за допомогою декількох зовнішніх посилань, оскільки це схоже на спам. Спасибі за розуміння! Якщо у вас виникли запитання, відвідайте довідковий центр . Продовжуйте сприяти і насолоджуйтесь сайтом!
Вінсент

спасибі за інформацію @Vincent я буду пам’ятати наступного разу
bareliya arts

Ласкаво просимо, будь-коли! Також сміливо приєднуйтесь до нас у графічному чаті, коли ваша репутація дозволить вам (20). Зазвичай, як мінімум, один мод або досвідчений користувач готовий відповісти на ваші запитання.
Вінсент

1

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

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.