Задать вопрос

Какие существуют правила хорошего дизайна?

Здравствуйте!

Не так давно занимаюсь разработкой дизайнов для web-сайтов и периодически общаюсь с верстальщиками.

Часто некоторые высказывают своё «фи» по поводу дизайна и расположения элементов, мол, неудобно верстать.

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

Хотелось бы что-нибудь почитать/узнать, каким же должен быть хороший дизайн, чтобы потом его можно было нормально реализовать на вёрстке, не жертвуя какими-то моментами (урезали размеры шрифтов/картинок, сжали масштаб и так далее).

Спасибо!
  • Вопрос задан
  • 4986 просмотров
Подписаться 29 Оценить 2 комментария
Решения вопроса 2
@xlusv
Я бы рекомендовал попробовать сверстать собственный макет самостоятельно, к примеру, на том же bootstrap. На своем опыте оцените, есть ли недостатки.

Из правил:
  1. Дизайн не должен мешать пользователю. Чем меньше шума, тем лучше. В идеале - ничего лишнего на экране. И как можно меньше анимации.
  2. Функциональность превыше эффектов - сначала содержимое, только потом украшения
  3. Мыслить от абстрактного к конкретному, мыслить модульно - чистый холст делим на части (в пропорциях), потом добавляем компоненты в виде сплошных фигур, потом детализируем компоненты. Так мыслит и верстальщик, и программист. Хранить компоненты в отдельных файлах.
  4. Красивый дизайн - логичный дизайн. Все должно быть упорядоченно, иметь обоснованные размеры, отступы, цвета и эффекты
  5. Постоянство - одна цветовая схема, пропорции, типографика, элементы
  6. Стандарты и традиции. Поведение предсказуемо. Стрелка вниз на панели означает, что панель развернется вниз, а не вверх. Красный - опасное действие, зеленый - безопасное. Используйте стандартные иконки, вместо никому не знакомых.
  7. Смотрите на дизайн чужими глазами - наложите черно-белый фильтр или размытие и убедитесь, что содержимое не растворилось, акценты на месте. Продумайте, что случится с колонкой или меню, если текста будет слишком много или мало.
  8. Растровая графика для фотографий и многоцветных изображений. Все что может быть описано в векторе - делается в векторе.
  9. На каждое правило бывают исключения


Книги и материлаы
  1. Design for Hackers: Reverse Engineering Beauty - технический взгляд на элементы дизайна
  2. Прочие книги по UX и web-design в списках бестселлеров amazon / ozon
  3. behance и dribbble - для анализа лучших практик
  4. Руководства по стилям: Google Material Design, Modern UI, Apple Human Interface Guidelines, ibm design. Тоже для анализа практик и правил для конкретной платформы.
Ответ написан
VladislavTM
@VladislavTM
UI/UX designer
Странно, что никто не написал про советы бюро Артёма Горбунова.
Мне кажется начинающим дизайнерам стоит начинать именно с их советов, ставит мозги на место и помогает определиться с правильным вектором дальнейшего развития.

Собственно сами советы:
Правило внутреннего и внешнего
Что такое модульная вёрстка
Теория близости
Общая теория близости
Правилом якорных объектов
Применение модульности и якорных объектов
Формат, поля
Применение правила внутреннего и внешнего к вертик...
Интерлиньяж
Модуль. Точка, линия и прямоугольник, знак, строка...
От геометрии к типографике
Базовые элементы верстки
Заголовок
Текст
Иллюстрация
Элемент управления
Гиперссылка
Подпись
Смешать комки
Как собрать страницу из модулей: без иллюстраций
Как верстать модули с лентами
Как верстать текстовые блоки с иллюстрациями
Как собрать страницу из модулей: с иллюстрациями.
Как форма текста влияет на порядок чтения
Вёрстка доминирующих и вспомогательных иллюстраций
Как собрать страницу из модулей: зачем нужна сетка
Как создавать модульную сетку веб-сайта
Чередование ритма
Как сверстать текстовую страницу
Вёрстка главной страницы
Ушки, цитаты, фактоиды, врезки
Это базовые навыки. И толчок для дальнейшего развития.

Полезные книги и статьи
Йозеф Мюллер-Брокман. Модульные сетки в графическо...
Роберт Брингхёрст. Основы стиля в типографике.
Ян Чихольд. Облик книги.
А. Э. Мильчин, Л. К. Чельцова. Справочник издателя...
Джеф Раскин. Интерфейс. Новые направления в проект...
Генрих Альтшуллер. Найти идею. Введение в ТРИЗ - т...
Майк Монтейро. Дизайн – это работа
Первоосновы проектирования взаимодействия
Визуализируя закон Фиттса

P.S. Не стоит тратить время на «10 советов успешного, продающего дизайна» из пабликов в вконтакте, если занимаетесь дизайном серьезно, то стоит постепенно наращивать свои знания читая книги и статьи от профессионалов своего дела и пытаться последовательно применять всё на практике. И помните, что любое утверждение и любое правило можно и нужно подвергать сомнению.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 9
kawabanga
@kawabanga
на хабре помню всплывала очень интересная статья по этому вопросу, там советы дизайнеру именно о том, как готовить дизайн для верстальщика. Там в статье был особый упор на сетку и на то, чтобы верстальщик сразу видел в комментариях код, с помощью которого можно все сделать на css.
UPD. Во, нашел, статья на подобии этой была - habrahabr.ru/post/175083

20 «НЕ» для веб-дизайнеров
habrahabr.ru/post/52019

К слову, Sketсh 3 инструмент позволяет создавать дизайны, которые более приятны верстальщикам.

а пока, что по поиску гугла нашел
- habrahabr.ru/sandbox/41405
- habrahabr.ru/post/173271
- habrahabr.ru/post/159141
- habrahabr.ru/post/197588
- habrahabr.ru/post/145295
Ответ написан
@ber_enot
Веб-разработчик, Vue.js / Node.js
Возьмите .psd с сеткой бутстрапа и рисуйте дизайн, чтобы основные блоки занимали целое количество столбцов.
Если в каком-то элементе много подэлементов, его тоже можно разделить на 12 равных столбцов, далее аналогично.
А вообще, лучше почитать про основы верстки, тогда будет понятно, что реализовать можно, а что сложно.
Если есть конкретные вопросы, пишите в комментарии, я верстальщик.
Ответ написан
ничего лишнего.
всякое украшательство должно быть уместно, преизбыток, как делают новички - признак безвкусицы.
то есть всякое украшательство должно быть лишь, если без него не обойтись.
никакой назойливости, автоплея звука или видео, если для этого не заходят.
интуитивно-понятный интерфейс, понятное меню.
не нужно фантазировать оригинальничать настолько, чтобы человек зашел и изучал что и где.
Ответ написан
Комментировать
Haleff
@Haleff
Надоедлив
Как по мне привила очень просты.

1. Правильное соотношение цветов. Для того что-бы на дизайн сайта было приятно смотреть можно поискать в интернете правильное соотношение цветов. На практике без тренировки выйдет ужас.
2. Разнообразие. В виде минимализного украшения дизайна и добавление всем давно привычного
3. Удобство. Понятность и минимализм дизайна. Сейчас это в моде.
Ответ написан
Комментировать
27cm
@27cm
TODO: Написать статус
Комментировать
andrievski88
@andrievski88
SEO + маркетинг + веб программаривание.
Сам верстал и сейчас иногда верстаю, и скажу честно, дизайнер, которые рисует по сетке, очень многово стоит.
К слову я одного обучил рисовать по сеточному макету и он через месяц сменил место работы с окладом 3*(умножить)предыдущий оклад.
Ответ написан
@kstyle
Ответ написан
Комментировать
Sergei_Erjemin
@Sergei_Erjemin
Улыбайся, будь самураем...
Дизайн -- это производная от моды. Если вы не кутюрье с именем и громадным ресурсом репутации своего модельного дома, то никакой моды ни в парфюме, ни в расцветке тканей, ни в прическах или чем-то там еще вы не создадите. Вы можете сделать удобно, практично, нигде не жмет -- не это не будет называться "стильно", "модно", "дизайнерски".... Остается только наедятся, что вам вам попадется заказчик который имея весь необходимый репутационный ресурс сделает ваше способ делать удобно-практично-нежмет -- модой. Но это должно быть точно "удобно-практично-нежмет"
Ответ написан
paulradzkov
@paulradzkov
Дизайнер, верстальщик, начальник отдела UI
Немножко лирики по теме отношений дизайнер-верстальщик paulradzkov.com/2014/designer-superstar
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы