Как сделать красивый интерфейс для программы

Open Peeps – и нтересная библиотека нарисованных от руки иллюстраций.

2.2. Smash Illustrations – конструктор иллюстраций

Крутой конструктор иллюстраций для построения сцен с красочными рисунками и персонажами. Smash Illustrations р аботает со Sketch, Figma, можно создавать изображения в формат svg и png.

2.3. Open Doodles – набор иллюстраций

Open Doodles – б есплатный набор скетч-иллюстраций и анимаций на любой случай.

2.4. Control Illustrations – конструктор сценок

Библиотека Control Illustrations включает 108 иллюстраций с настраиваемым стилем и типами действий. Используйте конструктор, чтобы создать сцену, которую вы ищете.

2.5. Ouch! – векторные иллюстрации

Проект Ouch! посвящен бесплатным векторным иллюстрациям в разных стилях, которые можно применить в пользовательских интерфейсах.

2.6. Avataaars Generator – генератор аватаров

Avataaars Generator служит для создания иконок уникальных учетных записей. Не знаете, какой стиль вам нужен – понажимайте на кнопки, пока не найдете то, что вам подходит.

КРАСИВЫЙ ДИЗАЙН PYTHON ПРИЛОЖЕНИЯ при помощи библиотеки CUSTOMTKINTER

2.7. Faux Code Generator – иллюстрация кода

3. Палитры

3.1. Parametric Color Mixer – микшер палитры

С Parametric Color Mixer можно настроить цветовую палитру, как с помощью звукового эквалайзера.

3.2. CSS Gradient – градиент в стилях

Помимо того, что CSS Gradient – прекрасный генератор CSS-градиентов, ресурс содержит полезный обучающий контент.

3.3. Colorsinspo – сборник цветовых палитр

Colorsinspo – это т ысячи красивых цветовых палитр и инструментов, которые можно использовать в один клик, а также гора тематического чтива и туториалов.

3.4. Color Hexa – конвертер представлений цветов

Бесплатный инструмент Color Hexa предоставляет информацию о любом цвете и генерирующий соответствующие цветовые палитры. Просто введите любое цветовое значение в поле поиска и получите конвертированные значения в Hex, RGB, CMYK, HSL, HSV, CIE-LAB/LUV/LCH, Hunter-Lab, XYZ и Binary.

3.5. Color Space – библиотека цветовых схем

Color Space предоставляет множество вариантов построения цветовых схем для вашего следующего проекта.

3.6. Palettte App – цветовые палитры по кривым

Palettte App отличается тем, что цветовой схемы можно генерировать через наложение кривых.

3.7. Colorable – проверка контрастности текста

Colorable проверяет контрастность текста для заданной цветовой палитры с учетом цвета фона .

4. Типографика

4.1. Freebiesbug – свободные шрифты

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

4.2. Fonts Arena

Fonts Arena распространяет как бесплатные, так и платные шрифты. Д ля облегчения поиска есть разделение на категории .

4.3. Befonts

На Befonts можно скачать лучшие бесплатные шрифты для личного или коммерческого использования – красивый script type, профессиональный sans serif и многое другое.

ТОП 5 Лучших графических (GUI) фреймворков Python / Графический интерфейс python

4.5. Font Squirrel

В популярный среди верстальщиков ресурс Font Squirrel встроен генератор цветов, распознаватель, гора бесплатных шрифтов, форум и полезное чтиво по теме.

4.6. Fontjoy – тест сочетания шрифтов

Fontjoy – сервис для проверки сочетаний шрифтов из Google Fonts.

4.7. Type Scale – проверка читаемости шрифта

Если нужно проверить, удобно ли читать шрифт в заголовках и при разном масштабировании, Type Scale делает все необходимые вариации значения line-height и margins.

5. Анимация и другие эффекты

5.1. Генератор плавных теней

Плавными кривыми создаем необходимый теневой рисунок, Smooth Shadow Generator на выходе дает код для вставки на страницу.

5.2. CSSeffectsSnippets – эффекты на Vue.js

CSSeffectsSnippets – коллекция CSS-эффектов (анимация, текст, кнопки), выполненная с помощью Vue.js.

5.3. Генератор CSS-разделителей

Separator Generator – н абор настраиваемых CSS-разделителей с возможностью легкого копирования кода.

5.4. Animista

На сайте Animista можно по играться с коллекцией готовых к использованию CSS-анимаций, настраивать их и скачивать те, что будете использовать.

5.5. Draggable – Dragdrop-эффектов.

5.6. Block Reveal Effects – появление блоков

Block Reveal Effects – красивая реализация постепенного появления блоков страницы, раскрывающихся по мере ее скроллинга (по ссылке есть демо-пример).

6. Иконки

6.1. IconStore

IconStore – б иблиотека бесплатных векторных иконок для личных и коммерческих проектов, разработанных первоклассными дизайнерами.

6.2. CSS Icons

CSS Icons – о пенсорсные CSS, SVG и Figma UI иконки, доступные в SVG Sprite , styled — components , NPM и API .

6.3. Icon Transition Generator

Создайте переход между двумя значками с помощью Icon Transition Generator и загрузите его в SVG. Загрузите сгенерированный код в Nucleo или импортируйте его сразу в свой проект.

6.4. Tilda Icons

Tilda Icons – к оллекция из более чем 700 бесплатных иконок, разделенных по категориям и тематикам.

6.5. Ikonate

Ресурс Ikonate позволяет настроить иконку под ваши нужды и скачать ее.

6.6. Eva Icons

В пакете Eva Icons 480 опенсорсных иконок на темы действий и предметов. Можно использовать в вебе, iOS и Android.

6.7. Анимированные иконки

На ресурсе с незамысловатым названием Animated Icons вы найдете 400 бесплатных анимированных иконок .

7. Паттерны и модели

7.1. Паттерны CSS

Библиотека CSS Patterns на чистом CSS помогает заполнить пустой фон красивыми узорами.

7.2. Get Waves

Простое веб-приложение Get Waves генерирует неповторяющиеся svg-волны – можно разнообразить границу футера.

7.3. Blob Maker

Blob Maker – г енератор дизайна уникальных пузырчатых SVG-форм, как на картинке выше.

7.4. Генератор полигонов

Rad Lines – векторный генератор SVG-полигонов на Vue.js.

7.5. Patterns

Patterns – это у зоры во всех векторных форматах, доступные для коммерческих и личных проектов. Один из шаблонов мы использовали при создании обложки этой публикации.

8. Справочные ресуры и подборки

8.1. Nucleo App

Nucleo App – популярная библиотека с кучей иконок, а также мощное приложение для их сбора, настройки и экспорта.

8.2. Checklist design

Checklist design – к оллекция лучших практик UX и UI с пошаговым разбором того, что предпринять и как действовать.

8.3. Design System Repo

Обширный и пополняемый список ресурсов, руководств по стилю и библиотек шаблонов, которые можно использовать для вдохновения – всё это Design System Repo .

8.4. CSSPeeper

Расширение для Google Chrome CSSPeeper позволяет выбрать объект на любом сайте и извлечь его CSS-свойства, чтобы применить их в своем проекте.

8.5. AI Image Upscaler

AI Image Upscaler – инструмент, использующий мощь искусственного интеллекта для того, чтобы попытаться восстановить качество изображения с низким разрешением и увеличить его .

Заключение

7 правил по созданию красивых интерфейсов

Расскажу о правилах создания красивых и чистых интерфейсов.

Вот данные правила:

1. Свет всегда падает сверху
2. Сначала белое и черное
3. Увеличьте белое пространство
4. Научитесь накладывать на изображения текст
5. Научитесь утапливать и выделять текст
6. Применяйте исключительно хорошие шрифты
7. Крадите как художник

Научитесь накладывать на картинку текст

Есть только несколько надежных методов красиво наложить текст на картинку. Я расскажу вам целых пять и еще один в качестве специального бонуса.

В случае если вы желаете быть хорошим профессиональным дизайнером интерфейсов, вам следует научиться накладывать текст на картинку таким образом, чтобы это выглядело красиво и приятно для глаз. Это то, что сегодня умеет делать любой хороший дизайнер интерфейсов, и, к сожалению, не умеет плохой. Поэтому после прочтения данной статьи у вас уже будет огромное преимущество!

Наложение текста непосредственно на фото

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

Otter Surfborads. Выглядит инстаграммно и по-хипстерски. Но текст читается трудновато

В данном способе есть множество рисков и проблем:

1. Фото должно быть темным и не очень контрастным.
2. Текст должен иметь белый цвет. Найдите хороший противоположный пример. Хотя бы один.
3. Проверьте его на каждом разрешении и экране, чтобы убедиться в том, что текст нормально читается.

Понятно? Хорошо! Отныне никогда не меняйте фото и текст, и все будет отлично.

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

Веб-сайт экспедиции Aquatilis. Вам следует обязательно посмотреть, если еще не видели

Затемните все изображение

Наверное, наиболее простой метод наложить текст на фото — это затемнить ее. Если оригинальное фото не очень темное, вы можете наложить на него полупрозрачный черный цвет.

Вот современное весьма красочное фото с затемнением.

Сайт Upstart применяет 35-% чёрный фильтр

Если зайти в консоль разработчика и убрать фильтр, то можно будет увидеть, что само фото слишком яркое и контрастное, чтобы текст был вполне читабельным. Однако с темным фильтром — никаких сложностей!

Такой метод также превосходно работает для маленьких картинок.

Черный фильтр является на сегодняшний день наиболее простым и универсальным, по правде, вы также можете применять цветные фильтры.

Текст на фоне

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

Концепт программы для iPhone от Miguel Oliva Marquez

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

Размойте картинку

Хороший метод сделать текст более читаемым — размыть часть изображения.

В Snapguide размыта большая часть изображения. Заметьте, что она затемнена

Этот метод стал в особенности популярен сразу после выхода iOS 7, но широко применялся еще в Vista.

Вместо размытия можно также применять часть фото, которая находится не в фокусе. Правда будьте при этом осторожны — данный вариант не настолько динамичный.

В случае если изображение вдруг изменится, то убедитесь, что фон остался размытым.

Просто прочитайте подзаголовок внизу.

Затемните низ

В данном варианте картинка слегка затемняется к низу, а сверху располагается текст белого цвета. Это весьма искусный метод, и я не знаю, применял ли его кто-либо до Medium, но я его увидел именно там.

Случайному пользователю вполне может показаться, что в коллекциях Medium текст белого цвета нанесен напрямую на картинку. Но это совсем не так! Здесь есть чуть заметный черный градиент с середины картинки к низу (прозрачностью — от 0 до приблизительно 20 %).

Его не просто заметить, но он там точно есть, и это очень улучшает читаемость всего текста.

Заметьте также, что Medium применяет небольшую тень в тексте во время наложения на миниатюры коллекций, что повышает читаемость. В итоге, Medium может наложить практически любой текст на любую картинку и получить очень хороший результат.

Почему картинку необходимо затемнять книзу? Ответ на данный вопрос читайте в Правиле № 1: свет всегда падает сверху. Для того, чтобы выглядеть наиболее натурально для человеческих глаз, картинка должна быть чуть темнее книзу, как и любой иной предмет, который мы видим.

Еще один современный и продвинутый способ: размытие и затемнение.

Бонус — Метод маскировки

Почему в блоге Elastica получаются очень читабельные заголовки на каждом изображении?

Все картинки при этом:

• не особо темные;
• довольно контрастные.

Ответ — маскировка (scrim).

Scrim — рассеиватель, специальное оборудование для фотоснимка, делающее свет гораздо мягче. Еще это особая техника в графическом дизайне, помогающая «смягчить» картинку и сделать текст еще более читабельным.

Если уменьшить масштаб веб-браузера на страничке блога Elastica, можно увидеть, что там происходит.

Вокруг заголовка есть специальный полупрозрачный фон с еле заметным затемнением. Его гораздо легче заметить на синем сплошном фоне, нежели на контрастных фото.

Это, наверное, самый деликатный метод наложения текста. Я больше нигде его не встречал (он довольно хитрый). Однако отметьте его для себя. Так как вдруг он вам когда-то пригодится.

Научитесь утапливать и выделять текст

Секрет того, чтобы текст был одновременно красив и уместен, заключается в использовании контраста. К примеру, можно сделать его больше, но тоньше.

Дизайн текста — одна из наиболее сложных частей в создании приятного интерфейса. Но вовсе не из-за дефицита возможных вариантов. В случае если вы закончили начальную школу, то наверное знакомы с различными методами выделения текста. Это:

• Размер (текст можно сделать меньше или больше).
• Цвет (можно уменьшить или увеличить контраст; яркие цвета всегда привлекают внимание).
• Насыщенность (шрифт может быть тоньше или толще).
• Прописные буквы (текст можно набрать прописными или строчными буквами).
• Курсив.
• Разрядка (либо трекинг).
• Поля (они к самому тексту не относятся, но могут использоваться для привлечения внимания, в связи с чем также включены в данный список).

Здесь есть и поля, и цвет, и прописные буквы
Существуют и другие способы, правда я бы не стал их очень рекомендовать:

• Подчеркивание. На сегодняшний день подчеркивание следует применять только для ссылок.
• Цветной фон. Данный способ встречается не часто, но 37signals какое-то время применяли его для обозначения ссылок на своем веб-сайте.
• Зачеркивание. Добро пожаловать в 90-е!

По моему собственному опыту, если я не могу найти какой-то «правильный» стиль для моего текста, это вовсе не потому, что я не попробовал прописные буквы или же более темный цвет, а из-за того, что наилучшее решение зачастую заключается в грамотной комбинации «противоположных» стилей.

Утапливание и выделение

Все методы выделения текста делятся на две группы:

• Методы, уменьшающие видимость текста: уменьшение контраста, размера, полей.
• Методы, которые повышают видимость текста: увеличение насыщенности, размера, применение прописных букв.

7 правил создания красивых интерфейсов

Вступление

• разработчиков, которые хотят уметь делать хорошие интерфейсы для себя, если вдруг прижмёт;
• UX-дизайнеров, которые знают, что хороший UX-дизайн продаётся лучше в красивой UI-упаковке.

А пока давайте я расскажу, что вы найдёте в этой статье.

Раньше я был UX-дизайнером без каких-либо навыков графического дизайна. Я обожал просто проектировать интерфейсы, но вскоре я понял, что есть куча причин научиться делать это ещё и красиво:

1. Моё портфолио выглядело ужасно и едва отражало мой рабочий процесс и ход мыслей.
2. Клиенты, с которыми я работал, с большей готовность заплатили бы тому, кто умеет рисовать не только прямоугольники и стрелочки.
3. Хотел ли я в какой-то момент присоединиться к стартапу на ранней стадии? Тогда лучше мне освоить эти навыки уже сейчас.

Я ничего не понимаю в эстетике. Я закончил инженерно-технический факультет. Я не должен делать вещи красивыми.

В конце концов, я научился дизайну так же, как и любому другому мастерству: путём холодного, жёсткого анализа, бессовестно копируя то, что работает. Я тратил по 10 часов на проект, а брал деньги всего за час. Остальные 9 я учился. Отчаянно разыскивая в Google, Pinterest и Dribbble то, что можно скопировать.

Эти «правила» — это уроки, которые я вынес для себя за это время.

Итак, обращаюсь к занудам: если у меня сейчас что-то и получается в дизайне интерфейсов, это потому что я много анализировал, а не просто появился из ниоткуда с интуитивными знаниями о балансе и красоте.

В этой статье нет теории. Только чистая практика. Здесь вы ничего не найдёте о золотом сечении или теории цвета. Только то, чему я научился сам.

Есть дзюдо. Дзюдо развивалось сотни лет на основе японских традиций в боевом искусстве и философии. Если вы возьмёте уроки дзюдо, вы будете не только драться, но услышите очень много о гармонии и движении энергии.

А есть крав-мага, которую изобрели евреи в борьбе против нацистов на улицах Чехословакии в 1930-х годах. Там нет искусства. На уроках крав-маги вы научитесь тычкам в глаза с помощью ручки.

Эта статья — крав-мага для экранов.

Правила

1. Свет падает сверху.
2. Сначала черное и белое.
3. Увеличьте белое пространство.
4. Изучите принципы наложения текста на картинки.
5. Научитесь выделять и утапливать текст.
6. Используйте только хорошие шрифты.
7. Крадите как художник.

Правило № 1: Свет падает сверху.

Тени лучше всего помогают мозгу понять, на какой элемент интерфейса мы смотрим.

Пожалуй, это самое важное неочевидное правило, которое нужно усвоить в дизайне интерфейсов: свет падает сверху. В жизни свет чаще всего падает с неба или сверху. Если это не так, то это выглядит странно.

Когда свет падает сверху, он освещает верхнюю часть и отбрасывает тень на нижнюю. Верх будет светлее, а низ темнее.

Обычно мы не особо замечаем тень на нижних веках, но если их осветить, то перед вами предстанет девочка, похожая на демона.

То же самое и в дизайне интерфейсов. Как внизу каждой черты лица, так и внизу практически любого элемента интерфейса есть тень. Наши экраны плоские, но мы прилагаем все усилия, чтобы любой элемент на нём выглядел трёхмерными.

Возьмём кнопки. Даже в этой относительно «плоской» кнопке есть множество деталей, связанных со светом.

1. В ненажатом состоянии (вверху) у неё тёмный нижний край. Ведь туда не падает солнечный свет.
2. Верхняя часть ненажатой кнопки чуть светлее, чем нижняя. Это потому что она имитирует слегка изогнутую поверхность. Как, чтобы увидеть солнечный свет, вам нужно было бы направить зеркало вверх, так и изогнутая поверхность отражает чуууууть больше солнечного света.
3. Ненажатая кнопка слегка отбрасывает тень — её можно увидеть в увеличенном виде.
4. Нажатая кнопка сверху темнее, чем снизу. Потому что она находится на уровне экрана, и на неё попадает меньше солнечного света. В реальной жизни нажатые кнопки тоже темнее, потому что мы блокируем свет рукой.

Это всего лишь кнопка, но на ней уже есть 4 небольших эффекта от света. Это и есть главный урок. А теперь мы будет применять его ко всему.

• Верхняя часть контрольной панели (inset control panel) отбрасывает небольшую тень.
• Проём для слайдера «On» располагается ещё глубже.
• Он имеет вогнутую форму, поэтому нижняя часть отражает больше света, чем верхняя.
• Иконки, наоборот, выпуклые. Видите яркий участок в верхней части иконок? Он представляет собой поверхность перпендикулярную к солнечному свету, следовательно, он поглощает и отражает его.
• У разделителя (divider notch) тень там, где не попадает солнечный свет, и наоборот.

• поля для ввода текста,
• нажатые кнопки,
• проёмы для слайдеров,
• радио-кнопки (неактивные),
• чекбоксы.

• кнопки (в ненажатом виде),
• сами слайдеры,
• контроллеры выпадающих меню,
• карточки,
• сама кнопка выбранной радио-кнопки,
• всплывающие окна.

А как же дизайн в стиле flat?

iOS 7 наделала много шума благодаря своему «плоскому дизайну». Он в буквальном смысле плоский. В нём нет никаких углублений или выступов — только линии и фигуры сплошного цвета.

Я, как и все, люблю чистый и простой дизайн, но я не думаю, что этот тренд на долго. Легкие трёхмерные эффекты в интерфейсах выглядят слишком естественно, чтобы от них полностью отказаться.

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

В то время как я пишу эту статью, Google выпустила Material design. Это единый визуальный язык для всех продуктов компании, который, по своей сути, пытается имитировать физический мир.

Эта иллюстрация из руководства Material design показывает, как передать разную глубину с помощью разных теней.

Именно в этом направлении будет развиваться дизайн. Используя тонкие подсказки, чтобы передать информацию. Ключевое слово здесь — тонкие.

Нельзя сказать, что он не имитирует физический мир, но в то же время он не похож на веб-дизайн 2006 года. В нём нет текстур, градиентов или отблесков. Я думаю, будущее за «полу-плоским» дизайном. А дизайн в стиле flat — это просто часть истории.

Правило № 2: Сначала чёрное и белое

Создавая дизайн в чёрно-белой палитре, до добавления цвета, вы сможете максимально упростить самые сложные визуальные элементы и сфокусироваться на макете и расположении.

В наши дни многие UX-дизайнеры увлечены подходом «сначала мобильные». Это значит проектировать страницы и взаимодействия для мобильных устройств до больших экранов с ретиной.

Такой вид ограничений прекрасен. Это очищает сознание. Вы начинаете с более сложной проблемы (удобное приложение на маленьком экране), а затем адаптируете решение к проблеме полегче (удобное приложение на большом экране).

Вот вам ещё одно похожее ограничение: сделайте сначала чёрно-белый дизайн. Начните с более сложной проблемы — сделать красивое и удобное приложение без помощи цвета. Добавляйте цвет в самую последнюю очередь, и то только с определённой целью.

Только так можно создать «чистый» и «простой» интерфейс. А обилием цветов в разных местах его, наоборот, очень легко испортить. Чёрно-белый дизайн заставляет вас сфокусироваться на расстояниях, размерах и макете. Именно это является основой хорошего дизайна.

Есть ситуации, когда такой подход не слишком полезен. Дизайну с определённой сильной ориентацией — «спортивный», «яркий», «мультяшный» — нужен дизайнер, который хорошо владеет цветом. Но большинству приложений нужен только «чистый и простой» дизайн. Делать дизайн для остальных гораздо сложнее.

Шаг 2: Как добавить цвет

Самое простое — это добавить только один цвет.

Один цвет на чёрно-белом сайте просто и эффективно притягивает взгляд.

Можно пойти ещё дальше и добавить два цвета или несколько оттенков одного тона.

Коды цветов на практике — что такое тон (hue)?

В большинстве случаев на вебе используются HEX-коды цветов модели RGB. Для нас они являются абсолютно бесполезными. RGB плохо подходит для подбора цветов. Лучше использовать HSB (почти тоже самое что HSV или HSL).

HSB лучше, чем RGB, потому что эта модель ближе к тому, как мы воспринимаем цвет, и мы можем предсказывать, как изменение значений HSB повлияет на цвет.

Если вы впервые об этом слышите, то вот хороший путеводитель по HSB цветам.

Изменяя насыщенность и яркость одного и того же тона, можно создать палитру из множества цветов — тёмных, светлых, для фона, выделения и привлечения внимания. При этом они не будут рябить в глазах.

Использовать несколько оттенков одного или двух основных цветов — это самый лучший способ подчеркнуть или утопить отдельные элементы в дизайне, не испортив его.

Ещё несколько заметок о цвете

• Никогда не используйте чёрный. Эта статья о том, что чистый чёрный цвет практически не встречается в реальной жизни. Увеличивая насыщенность серых оттенков, особенно тёмных, вы добавите живости вашему дизайну. К тому же, насыщенные серые тона ближе всего к реальной жизни, что само по себе хорошо.
• Adobe Color CC. Отличный инструмент для того, чтобы подобрать подходящий цвет, изменить его или составить палитру.
• Поиск в Dribbble по цвету. Ещё один классный способ найти, что работает с определённым цветом. Например, если вы уже нашли один цвет, посмотрите, какие цвета сочетают с ним лучшие дизайнеры в мире.

Правило № 3: Увеличьте белое пространство

Чтобы интерфейс выглядел красиво, позвольте ему дышать.

В Правиле № 2 я говорил, что чёрно-белая палитра заставляет дизайнеров думать о макете и расположении элементов прежде, чем добавить цвет, и это хорошо. Теперь пришло время поговорить собственно о макете.

Если вы когда-нибудь писали HTML-страницу с нуля, то скорее всего знакомы с тем, как HTML выглядит по умолчанию.

Если коротко, то всё сбито к верху экрана. Шрифт мелкий, между строчками нет никакого пространства. Между абзацами расстояние чуть-чуть побольше, и они растянуты на весь экран независимо от того, сколько он пикселей, 100 или 10 000.

С точки зрения эстетики, это выглядит ужасно. Если вы хотите, чтобы интерфейс выглядел красиво, вам нужно добавить много белого пространства.

Иногда даже слишком много.

Белое пространство, HTML и CSS

Если вы, как и я, привыкли форматировать в CSS, где по умолчанию нет белого пространства, то пришло время отучиться от этой ужасной привычки. Начните думать, что белое пространство — первично. В самом начале есть только оно, и вы уменьшаете его, добавляя элементы на сайт.

Звучит как дзэн? Я думаю, именно поэтому люди продолжают делать наброски.

Начать с чистого листа значит начать именно белого пространства. Думайте об отступах и полях с самого начала. Всё, что вы рисуете, — это ваше сознательное решение по уменьшению белого пространства.

Если вы начнёте с кучи неотформатированного HTML, то о белом пространстве вы будете думать в последнюю очередь.

Вот концепт музыкального плеера от Piotr Kwiatkowski.

Обратите внимание на меню слева.

Вертикальное пространство между ссылками в меню в два раза больше самого текста. Это шрифт размером 12px, с такими же отступами сверху и снизу.

Или посмотрите на заголовки списков. Между словом «PLAYLISTS» и его подчёркиванием расстояние в 15px. Это больше, чем высота заглавной буквы шрифта! Я уже молчу о 25px между самим списками.

В верхнем правом углу тоже достаточно пространства. Текст «Search all music» занимает 20 % высоты панели навигации. У иконок похожие пропорции.

Пётр сознательно добавил сюда много белого пространства, и это окупилось сполна. Хотя это просто концепт, но в плане дизайна этот интерфейс мог бы посоперничать с лучшими музыкальными плеерами, которые сейчас есть.

Даже такие интерфейсы, как форумы, могут выглядеть красивыми и простыми благодаря белому пространству.

Конечно, можно поспорить, что такому редизайну не хватает функциональности. Но это хорошее место для старта.

Добавьте белое пространство между линиями.
Добавьте белое пространство между элементами.
Добавьте белое пространство между группами элементов.
Анализируйте, что работает, а что нет.

1. Как накладывать текст на картинки.
2. Как выделять и утапливать текст.
3. Используйте только хорошие шрифты.
4. Крадите как художник

• веб-дизайн
• дизайн интерфейсов

• Блог компании Я люблю ИП
• Веб-дизайн
• Типографика
• Интерфейсы

Источник: habr.com