Делаем простую форму без таблиц

10

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

Делаем простую форму без таблиц

(далее…)

Монохромный дизайн

11

Интернет это красочное место. Можно запросто взять любой понравившийся цвет и использовать его в дизайне сайта. Сделать красочный сайт просто, но есть ли альтернатива?

Монохромный дизайн

Монохромный дизайн — это дизайн с одним ключевым цветом. Вы выбираете один базовый цвет, а затем делаете его более светлым или более темным для получения различных оттенков.

В дизайне присутствует исключительно монохромная палитра и различные оттенки серого.

Монохромный дизайн

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

Преимущества монохромного дизайна

  • Монохромную палитру очень легко сделать. Достаточно выбрать один цвет и сделать нужные оттенки.
  • Отсутствие цветов, которые не сочетаются друг с другом.
  • Дизайн становится более простым. Простота расширяет цветовую гамму в самой конструкции. Нет конкурирующих цветов, что делает дизайн более приятным для восприятия.
  • Достаточно просто выделить важные элементы. Хотя основная часть дизайна должна быть выполнена с использованием выбранной монохромной палитры, вы можете использовать контрастные цвета для одного или двух элементов, которые вы хотите выделить. Например, вашу RSS иконку.

Минусы монохромного дизайна

  • Меньше разнообразия в дизайне. Отсутствие разнообразия и контраста снижает визуальный интерес. Пытаясь создать простой дизайн, в итоге вы можете получить визуально скучный сайт. Вы должны добиться того, чтобы элементы выглядели нормально.
  • Трудно читать текст. Нередко бывает недостаточно контраста между текстом и фоном. Будьте с этим особенно осторожны и убедитесь, что ваша страница легко читается.
  • Разочарование. Ограниченная палитра может разочаровать вас в начале работы и вы вероятно захотите добавить больше цветов. Иногда это может быть правильным решением, но не всегда. Работа с монохромной палитрой требует некоторого времени для привыкания.

Примеры монохромного дизайна

Примеры монохромного дизайна

Примеры монохромного дизайна

Примеры монохромного дизайна

Примеры монохромного дизайна

Ахроматический дизайн

Развитием монохромного является ахроматический дизайн. В ахроматическом дизайне присутствуют лишь оттенки серого.

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

Примеры ахроматического дизайна

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

Примеры ахроматического дизайна

Примеры ахроматического дизайна

Вывод:

Хороший дизайн не подразумевает множество цветов. Нет необходимости использовать все цвета радуги при создании дизайна сайта.

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

А что вы думаете о монохромном дизайн?

Оригинал: Make The Web a Less Colorful Place

Где правильно расположить «сайдбар»

14

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

Ответ зависит от вашего блога. Итак…

Почему нужно располагать «сайдбар» справа

  • Пользователи читают слева направо. Когда пользователь попадает на страницу, он проводит взгляд слева направо и сверху вниз. Расположите боковую панель справа и первое что увидит пользователь это основное содержимое.
  • Пользователи до сих пор используют разрешение 800х600. При создании блога многие оптимизируют его под разрешение 1024х768. Однако, все еще есть достаточное количество людей, использующих мониторы с разрешением 800х600. У таких пользователей, в этом случае, появиться надоедливая горизонтальная полоса прокрутки. Но если основное содержимое находится слева, им не придеться пользоваться прокруткой чтобы прочитать его.

Почему нужно располагать «сайдбар» слева

  • Пользователи читают слева направо. Если цель вашего блога это извлечение выгоды, то ваша реклама может быть наиболее приоритетной чем основной контент. Расположите боковую панель слева и посетители увидят ее первой.
  • Глаза как правило фокусируются на центре страницы. Если основное содержимое находиться справа, заголовки статей располагаются к центру страницы ближе, чем если бы оно было слева. В итоге пользователю легче сразу перейти к основному содержимому. Это больше всего подходит к блогам и сайтам с минимальным дизайном, которые не имеют других отвлекающих элементов на странице (например сайт Astheria).
  • Matt Harzewski в своей статье Right vs. Left Sidebar предлагает интересную идею как содержимое боковой панели может влиять на ее расположение.

Если боковая панель содержит не очень важные элементы (например различные виджеты) , то лучше располагать ее справа. Если же боковая панель используется для навигации, в этом случае ее следует располагать слева, т.к. это более естественно для навигации.

Вывод:

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

Оригинал: Should a Sidebar Go On the Left or Right?

Увеличение изображения с помощью overflow

25

Превьюшки на CSSЭтот пример покажет вам как можно реализовать простое увеличение изображений на вашей странице. Иногда на странице не хватает места для размещения полноразмерных изображений на странице и в тоже время не хочеться размещать маленькие, трудноразличимые картинки. Данный способ позволяет ограничить размер изображений, а при наведении указателя мыши показывать их в полном размере. (далее…)