Помогите разобраться, всё ли хорошо, всё ли правильно, всё ли современно?

Михаил Шамин
6 марта 2012

Илья
Бирман

Во внутреннем интерфейсе «Советов» вопросы отображаются с уменьшенными картинками. В таком виде ваша работа выглядит весьма опрятно:

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

Стоит определиться с тем, подчёркиваете ли вы ссылки, и каким цветом вы их выделяете. Трёхуровневый фильтр контента (Посты / лучшие / за день) — это очень сурово. Картинки лучше поставить над текстом. В подписях под выдержками лучше смешать комки.

Например:

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

Твитнуть

Отправить

	Ваш комментарий	Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа. Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным. Вот такой веб 2.0.

Имя и фамилия	обязательны полностью для публикации комментария
Электронная почта	адрес не будет опубликован
Ваши соображения
Иллюстрация	гиф или джипег шириной не более 700 пикселей

Похожие советы Типографика в вебе₃₄₈ Модульная сетка₁₅ Смешать комки₁₄ Носитель: сайт₅₃₄

3 • 3 • 3 • 1 •

2 • Как вы используете матрицу эмоций? Как сверстать интерфейс электронного билета на самолёт: фрагмент курса «Типографика и вёрстка» Тексты на иврите и арабском нужно выравнивать по правому и верхнему краю? 2 • Как сверстать новостной этаж: фрагмент курса «Типографика и вёрстка» 1 • 2 • 3 • Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5 • 1 • 6 • 4 • Как работать со шрифтами 3 • 4 • Нарушить дизайн-систему или пойти на компромисс с визуальной частью? 3 • Как описать путешествие в рекламной статье? Какие шрифты подходят для газетной вёрстки? 3 • 2 • Фиолетовый цвет в новом дизайне советов не уместен 1 • 2 • Экран ожидания в поликлинике 4 • Вёрстка списков, рост дизайнера под руководством маркетолога, ссылка на создателя и примитивное исполнение техзадания 1 • 1 • Как сделать крутой плакат, в котором сообщается о скидке на товар в новом дизайне? 4 • Куда поставить ссылку: на поля или в текст? 2 • 1 • 1 • 2 • 3 • Стоит ли использовать выворотку в вебе и полиграфии? 1 • 4 • Как сверстать хорошее резюме на русском? 2 • 1 • Как расположить 30 видеороликов? Что делать, если верстальщики отдают кривую вёрстку, как дизайнеру тренироваться в эстетике, в каком направлении дизайна развиваться в 16 лет 1 • 2 • 2 • 2 • 9 • 4 • 3 • 5 • 3 • 5 • 3 • 3 • 9 • 5 • 3 • В презентации много нарушений правил типографики и вёрстки, но при этом она нравится 1 • 1 • 1 • 1 • 1 • Что вы думаете про шрифты Ариал и Вердана для информационного сайта? Влезание в интерлиньяж 4 • 3 • 2 • 3 • 9 • 1 • 2 • 3 • Расскажите о хинтинге шрифтов 5 • Заказчик присылает правки по макету, а я считаю, что они всё испортят :-( 4 • Нельзя просто так взять и сделать модульную страницу из текстовой 1 • 2 • 4 • 2 • У меня афиша. Не знаю, как улучшить. Беспокоит пустое пространство слева 2 • 1 • Что думаете о переносах в вебе? 1 • 1 • 1 • 1 • 2 • Как избежать «эффекта Тильды»? 2 • 2 • Как оформлять инструкцию к продукту? 2 • 1 • 2 • На основе ролика о распознавании инсульта создан плакат. Вторая часть 1 • 4 • 3 • 2 • 5 • В какой программе вы делаете макеты? 7 • Как оформить портфолио маркетологу? 1 • У вас в учебнике по вёрстке написано, что нельзя разрывать текст статьи иллюстрацией 2 • 2 • 5 • Математика в типографике 4 • 5 • 2 • 1 • 3 • 2 • 2 • 2 • 2 • 5 • 2 • 1 • 4 • 1 • 3 • 3 • 5 • Пытаюсь сделать шаблон вёрстки текста для статей про балет 3 • 1 • 2 • 3 • 3 • 1 • 5 • 1 • 2 • 4 • 7 • Мильчин говорит, что разряды в числах нужно отделять пробелом. Как правильно? 1 • 2 • 4 • Как создавался новый сайт бюро. Часть четвёртая: сетка Как создавался новый сайт бюро. Часть третья 1 • Как создавался новый сайт бюро. Часть вторая: раскладка работ 2 • 2 • 1 • Cверстал одностраничный плеер. Вторая часть 3 • 1 • 2 • Сделали страницу для обучающего сервиса по безопасности. Как навести порядок? Вторая часть 3 • 2 • 3 • 3 • 2 • 3 • С подходами к адаптивной вёрстке вроде все уже разобрались, но вот с отображением табличных данных понятно не всё 8 • 3 • 1 • 2 • 4 • 5 • Делаю визитку для хозяина автомастерской. Вторая часть 6 • 4 • 1 • Как делать эскизы вёрстки? 3 • 3 • Что-то можно улучшить? Или всё хорошо? Вторая часть 4 • 3 • 2 • 1 • 7 • 1 • 1 • 5 • 2 • 2 • 6 • Сдала курсач в Школе редакторов 5 • 8 • 1 • Инфографика про губернаторов Иркутской области. Вторая часть 2 • Может быть такое выравнивание или это грубая ошибка? Третья часть 3 • Может быть такое выравнивание или это грубая ошибка? Вторая часть 3 • Почему же на сайтах «Системы Главбух», «Системы Юрист» и «Системы Кадры» именно левая «подмышка»? 3 • 7 • 4 • 3 • 5 • 2 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Четвёртая часть 3 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Третья часть 1 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Вторая часть 1 • 3 • 1 • При создании макета сайта зарылся в детали и упустил самое главное. Третья часть 5 • При создании макета сайта зарылся в детали и упустил самое главное. Вторая часть 4 • 3 • 1 • 4 • 4 • 4 • 2 • 2 • 2 • 8 • 3 • 9 • Расскажите, на что опереться русскому дизайнеру 2 • Что такое выход из прямоугольника? Расскажите об ушках, цитатах и фактоидах 1 • Расскажите о вёрстке главной страницы Как сверстать текстовую страницу? 3 • Как собрать страницу из модулей: с иллюстрациями 4 • Как собрать страницу из модулей: без иллюстраций 2 • Как собрать страницу из модулей: зачем нужна сетка? 1 • Расскажите о вёрстке доминирующих и вспомогательных иллюстраций 3 • Как форма текста влияет на порядок чтения? 2 • Как верстать текстовые блоки с иллюстрациями? 2 • Расскажите о формате и выборе полей 6 • Что такое модульная вёрстка? 8 • Что такое «правило внутреннего и внешнего»? 9 • Как верстать модули с лентами? 2 • Как верстать текстовые блоки? 2 • Что нужно знать о подписях в вёрстке? 2 • О ссылках в вёрстке 2 • Как работают элементы управления в вёрстке 3 • Расскажите об иллюстрациях как базовом элементе 1 • О тексте как базовом элементе 6 • Расскажите о вёрстке заголовков 2 • А каковы базовые элементы вёрстки? 11 • Точка, линия и прямоугольник 3 • 6 • Якорные объекты 6 • 4 • Что должен знать дизайнер об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? 9 • 8 • 4 • 5 • 2 • 4 • 3 • 4 • 1 • 3 • В прошлом совете вы не ответили на вопрос про модульные сетки, а рассказали совсем о другом 4 • Расскажите о том, как сделать хорошую модульную сетку 3 • Кто вы, Евгений Лучинин? 13 • 1 • Подскажите, пожалуйста, как правильно называть header и footer на сайтах по-русски? 1 • 5 • Артём, пытаюсь не допустить настойчивого предложения сделать выключку текста по ширине в вебе 10 • Заметил, что в Советах вы часто используете капитель 3 • 4 • 3 • Хотелось бы узнать ваше мнение о правиле «главная страница сайта должна умещаться на одном-двух экранах монитора» 3 • Для чего нужна висячая пунктуация в вебе? 6 • 7 • 12 • Сначала я думал, что 12 пунктов — это, может быть, 12 пикселей, но не так все просто 8 •

2 • 3 • Как собрать страницу из модулей: без иллюстраций 2 • Как собрать страницу из модулей: зачем нужна сетка? 1 • Якорные объекты 6 • 8 • 4 • 3 • 1 • 3 • 5 • 4 •

Что такое согласование в дизайне? (Часть третья: структурирование) 3 • 4 • Делаю визитку для хозяина автомастерской. Вторая часть 6 • 4 • О ссылках в вёрстке 2 • А каковы базовые элементы вёрстки? 1 • 1 • 11 • 1 •

3 • 1 • Фиолетовый цвет в новом дизайне советов не уместен 1 • 1 • Куда поставить ссылку: на поля или в текст? 2 • 3 • Стоит ли использовать выворотку в вебе и полиграфии? 1 • 1 • 1 • Как расположить 30 видеороликов? 2 • 2 • 1 • 1 • 3 • 1 • Сайты для слабовидящих 2 • 1 • Как оформить портфолио маркетологу? 1 • 2 • 4 • 2 • 2 • 3 • 5 • 2 • 1 • 4 • 1 • 3 • Как правильно в мобильных приложениях ставить ссылки? 1 • 1 • 3 • 1 • 2 • 4 • 2 • 4 • 1 • 3 • 1 • 2 • 3 • 3 • 2 • 3 • 3 • 1 • 2 • 5 • 1 • 1 • 3 • 2 • 1 • 1 • 5 • 2 • 2 • Сдала курсач в Школе редакторов 5 • 8 • 1 • Инфографика про губернаторов Иркутской области. Вторая часть 2 • 4 • 3 • 5 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Четвёртая часть 3 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Третья часть 1 • Нужно, чтобы эти элементы были на странице, но получается сумбур. Вторая часть 1 • 1 • При создании макета сайта зарылся в детали и упустил самое главное. Третья часть 5 • При создании макета сайта зарылся в детали и упустил самое главное. Вторая часть 4 • Как сделать, чтобы человек не ушёл с сайта, докрутив страницу до конца? 1 • 3 • 4 • 4 • 2 • 2 • 2 • 3 • 9 • Интернет-магазин принудительно отправляет пользователя в корзину с формой оформления товара 7 • Расскажите об ушках, цитатах и фактоидах 1 • Как верстать текстовые блоки с иллюстрациями? 2 • 7 • Что нужно знать о подписях в вёрстке? 2 • Как работают элементы управления в вёрстке 3 • 8 • 9 • 12 • Зачем нужны страницы «О компании» и «Команда». 2 • Что должен знать дизайнер об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? 9 • Как лучше всего решить эту задачу, если текст нужно разделить на анонс и основной текст? 2 • 1 • Я не понимаю, как должен быть устроен мир — в смысле сохранения предпочтений 2 • 4 • 1 • 4 • Занимаюсь разработкой интерфейса веб-приложения, в некоторых местах надо показать числовой коэффициент 3 • За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 • С чего начать изучение ЦСС? 1 • Как сделать, чтобы блок при прокрутке залипал у верхней границы окна браузера? 5 • 10 • Можно ли заверстать несколько разноширинных элементов через равные промежутки в резиновом контейнере? 1 • Как быстро придумать простой логотип для своего сайта? 1 • 3 • Чем отличается блог с комментариями от блога с отключенными комментариями? 3 • Удачное ли решение на сайте в поле пароля указывать, что нажат капслок, как на Маке? 6 • 8 • 6 • 3 • 9 • 11 • 3 • Как поступить правильно по отношению к читателю и поисковикам? 7 • Карусели и слайдеры 10 • 5 • 3 • 2 • 4 • Как вы храните данные для многоязычных сайтов? 3 • 4 • Что делать, если он совершил какие-то действия, а после этого заходит в свой профиль, где уже есть сохранённые данные? 5 • 5 • 2 • 3 • Как правильно сделать подчёркивание многострочного текста, чтобы линия была в три пикселя? 1 • 5 • 4 • Каким способом можно сделать загрузку кастомных шрифтов приятной? 6 • Артём, объясните, пожалуйста, в чём преимущество div перед table 5 • 5 • 5 • 8 • Как размыть объект? 2 • Как выровнять картинку внутри дива по центру, если её ширина больше ширины дива? 4 • Как правильно разделять разряды чисел? 4 • 6 • Артём, как вы подключаете стили для ИЕ? 3 • 7 • 2 • 7 • Стоит ли наращивать вложенность тегов для структурированности кода? 6 • Хочу сделать смену языка на сайте без перезагрузки страницы (и без аякса) 5 • Как на сайте бюро реализована разрядка у прописных букв? 5 • 14 • 4 • Хотим переделать свой и-магазин пиротехники 3 • Действительно ли необходимо цитаты внутри предложения заключать в тег q? 2 • Год назад запустил личный проект «Либретто опер» 2 • Расскажите, пожалуйста, о типах индикаторов загрузки 13 • 1 • Чем обосновано дублирование основного меню в «подвале»? 4 • Необходимо разработать интернет-магазин китайского чая 2 • Хочется, чтобы много красивых картинок на сайте быстро загружались 14 • 5 • В каких единицах стоит задавать размеры шрифта? 8 • 1 • Используете ли вы готовые ЦМС? 3 • 1 • 3 • Как правильно делать подчёркивание ссылок другим цветом? 6 • 1 • 5 • Как в ЦСС работать с родителями? 3 • 2 • Веб-студия рисует дизайн сайта и для выпадающего меню упорно делает пунктирную ссылку 4 • Как вы относитесь к «отложенным товарам» в интернет-магазинах? 3 • 1 • Как верстать ссылки вида http://site.ru/#news, чтобы при нажатии на них сайт не загружался заново? 2 • 16 • Как вы обходитесь без проверки на робота? 8 • 4 • 9 • 2 • 4 • Проблема в том, что ширина таблиц зависит от контента 5 • 5 • 3 • Как бы вы расставили ссылки в этих новостях с сайта glavbukh.ru? 1 • 1 • Клиент настаивает на длинных-длинных страницах текста в десятки экранов 4 • 2 • 1 • 3 • 5 • Какой делать фавыконку сайта: просто 16×16 или содержащую в себе разные размеры? 10 • 3 • 4 • 2 • 3 • 3 • 7 • 1 • Есть ли какие-то простые, самые базовые принципы по подбору цветовых схем для сайта? 3 • 6 • Без продвижения в поисковиках мы завтра же закроемся 2 • 3 • 1 • 7 • 2 • Дизайнер старательно вырисовывает в макете кнопку, похожую на его любимую в его ОС 4 • 3 • 1 • 4 • 5 • Есть форма, и есть поле ввода, куда пользователь вводит контактный телефон 3 • 2 • 4 • Сейчас хотя бы уж Джаваскрипт работает у всех? 7 • Как писать цены по-английски? 1 • 4 • 5 • 3 • 6 • 2 • 4 • Иногда люди, когда пытаются оценить, насколько выгодно расположены элементы на форме, рисуют линию, по которой якобы глаз скользит 2 • 5 • 2 • Раз уж интерфейс — зло, нужна ли вообще интернет-магазину корзина? 7 • 5 • 4 • 5 • 10 • 6 • 4 • 1 • Собираем и наполняем сайт одному дилеру известной автомобильной марки по гайдлайнам представительства 1 • 1 • 5 • 3 • 2 • 5 • 6 • Хозяин конторы принимает все решения относительно любого дизайна и вообще 3 • 3 • У меня с коллегой возник спор относительно того, какой элемент интерфейса нужно использовать для разлогинивания пользователя в интернете 7 • 6 • Какой должна быть вёрстка сайта — резиновой или фиксированной? 4 • 5 • 7 • 5 • Поскольку мне никто ничего не написал, пообщаюсь сам с собой 5 • 3 • 1 • Подскажите, пожалуйста, как правильно называть header и footer на сайтах по-русски? 1 • 3 • Я вот заметил, что на некоторых сайтах стали использовать статические баннеры 4 • 6 • 4 • 5 • Как вы относитесь к ссылке «наверх»? 12 • 3 • 4 • 5 • Если пользователь при авторизации на сайте трижды неправильно ввёл пароль, то на его электронную почту автоматически высылается письмо с ссылкой на восстановление 5 • 5 • Скажите, как отучить дизайнера лезть в код? 4 • 10 • Имеет ли смысл ставить кнопку «купить» в списке продуктов в интернет-магазинах? 22 • 3 • Зачем формы авторизации часто делают во всплывающих лайтбоксах 2 • Клиент хочет на сайте цветок. Железно 4 • 6 • Когда пользователь нажимает «Скачать файл», у него не открывается новое окно или же вкладка. Значит, ссылку на скачивание тоже надо подчёркивать пунктиром? 3 • 1 • 3 • 5 • 4 • Артём, пытаюсь не допустить настойчивого предложения сделать выключку текста по ширине в вебе 10 • 11 • 8 • 5 • Заметил, что в Советах вы часто используете капитель 3 • 7 • В каком лице формулировать ссылки и баблы на сайте? 5 • При запросе восстановления пароля сайты высылают подтверждение, при нажатии на ссылку генерируется новый пароль и высылается второе письмо 7 • Стоит ли обозначать ссылки, которые что либо меняют простым наведением курсора, волнистой линией? 5 • 3 • 4 • 4 • 17 • 14 • 6 • Что вы думаете по поводу наличия пункта «главная страница» в основном меню сайта? 9 • 4 • 1 • 5 • 2 • 6 • Почему у вас на сайтах везде используется английский перевод в урл, а в блоге — транслит? 6 • 5 • 5 • 8 • 2 • 5 • 1 • 4 • 4 • 7 • 10 • 7 • 6 • 1 • 10 • 2 • 6 • 3 • 5 • 5 • 6 • Почему бы не отвести часть правой стороны экрана под корзину? 13 • 5 • 8 • 3 • Как вы относитесь к новому формату форумов — вопросных систем? 3 • Артём, стоит ли учитывать различие регистров букв в адресах страниц? 11 • 2 • 2 • 7 • 8 • 4 • 13 • 12 • 6 • 5 • 2 • 19 • 4 • 2 • 7 • 4 • 3 • 7 • У меня есть сайт о Джумле 4 • 13 • 1 • 23 • Хотелось бы узнать ваше мнение о правиле «главная страница сайта должна умещаться на одном-двух экранах монитора» 3 • 5 • 10 • 9 • 4 • 2 • 2 • 1 • 7 • 4 • 7 • 3 • 5 • 9 • 2 • Что скажете о работе «Информационных архитекторов»? 1 • 6 • 5 • 3 • 2 • Хотелось бы услышать советы по минималистическому дизайну и по дизайну интернет-магазинов 5 • Почему на artgorbunov.ru курсор над горизонтальным скроллбаром имеет вид «движение во все стороны»? 8 • 12 • Подскажите, при создании сайта что раньше должно быть — дизайн или программирование? 9 • 3 • 13 • 6 • 2 • Как вы относитесь к иконке RSS? 8 • 1 • 4 • 3 • 2 • 3 • 5 • 8 • 1 • 9 • 8 • 8 • 6 • 4 • 11 • Для чего нужна висячая пунктуация в вебе? 6 • 4 • 7 • 3 • 11 • 6 • 1 • Шесть тезисов об идеальной электронной книге 12 • 1 • 22 • 6 • 2 • 23 • 9 • 12 • 15 • 3 • 4 • Довольно часто веб-страница должна содержать заведомо большое количество информации 2 • 1 • 9 • 6 • Как вы считаете, стоит ли причислять смайлы к знакам пунктуации? 6 • 1 • 5 • 12 • 2 • 1 • 7 • 8 • 10 • 5 • Что вы думаете о нотации Гарретта? 10 • Делаем открытый сервис «Сколько стоит хороший сайт?» 7 • 10 • 12 • 3 • 6 • 9 • 29 • 7 • 7 • 9 • Существует ли какая-то система нотации для моделирования пользовательского интерфейса, которая бы позволяла обозначать такие свойства элементов, как «резиновость», сохранение выравнивания по какой-либо оси? 10 • 7 • 9 • 12 • 10 • 7 • 12 • 13 • 7 • 16 • 8 • Как можно указать, что все это — PDF, не ставя иконку у каждой ссылки или просто подпись? 7 • 8 • 11 • Какое, по вашему мнению, самое лучшее решение для страницы faq? 7 • 8 • 22 • 7 • 4 • 8 • 6 • 8 • 3 • 9 • 4 • 4 • 10 • Есть ли смысл оформлять подчеркиванием все ссылки вне основного текста? 16 • 20 • Сет Годин только что опубликовал ссылку на результаты исследования движения глаз во время просмотра информации 5 • 7 • 6 • 15 • 1 • 3 • Что вы думаете насчет Google Chart API? 6 • 4 • 6 • 3 • 3 • Стоит ли при проектировании интерфейса опираться на вариант, что в будущем размеры экранов будут продолжать расти? 4 • 10 • 3 • 11 • 14 • 10 • 11 • 6 • 8 • 7 • 15 • 11 • 11 • 4 • 8 • 11 • 1 • 2 • Что изображать на инфоскроллере, чтобы он был действительно информативным? 7 • 2 • 8 • 15 • 7 • 4 • 4 • 9 • 5 • 4 • 11 • 1 • 7 • 3 • 15 • 12 • 9 • 4 • 12 • 17 • Все почтовые программы делятся на два класса: а-ля веб и а-ля десктоп-приложение 6 • 4 • 12 • Оправдана ли замена слова в меню или тексте на его синоним, если это исключает возможные ошибки при чтении? 17 • 15 • Сначала я думал, что 12 пунктов — это, может быть, 12 пикселей, но не так все просто 8 • 11 • 3 • 2 • 23 • 11 •

Недавно всплыло

Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 • 1 • Как сделать, чтобы публикация выделялась в ленте: композиция, исправление дефектов, цвет 1 • 1 •

Комментарии

Ваш комментарий

Недавно всплыло