Что такое качество в веб-дизайне: примеры и рекомендации (часть 1)

Веб и интерфейсы

Парочка полезных советов для создания оригинального дизайна для сайта или блога

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

quality_1

Разделение объектов

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

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

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

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

quality_2

 

Правильно выверенные расстояния между элементами продемонстрированы на сайте Digital Mash

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

quality_3

 

Максимум свободы демонстрирует сайт Creatica Daily

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

quality_4

 

Большие отступы – не всегда плохо. Этот доказал сайт Postbox

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

quality_5

 

Не забываем про отступы между объектами

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

Как правильно располагать объекты на странице?

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

В процессе верстки сайта пользуйтесь координатной сеткой

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

Применяем метод «научного тыка»

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

Свободное место – не всегда плохо

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

Качество, всегда лучше количества

Большие объемы информации или чрезмерное нагромождение страницы различными элементами, заметно снижает ее привлекательность. Пытайтесь размещать на странице только то, что действительно важно.

Доводим все начатое до ума

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

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

На сайте Envato все выверено до мельчайших деталей.

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

quality_7

 

Отшлифованный до блеска Tutorial9.net

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

quality_8

 

RedBrick Health порадовал нас своими оригинальными кнопками и разделителями

Над сайтом RedBrick Health работал такой знаменитый веб-дизайнер как Райан Шерф, поэтому неудивительно, что он получился таким качественным. Однако некоторые элементы здесь все-таки привлекают куда больше внимания, чем все остальные. Возьмем, к примеру, границы кнопок и разделительные линии. Конечно, их можно было сделать просто в виде простых серых линий и все было бы просто замечательно, однако не забывайте что мы имеем дело с творением Райана Шерфера, поэтому здесь у нас все отшлифовано до совершенства. Вы спросите, что я имею в виду под понятием «отшлифовать до совершенства»? А вот что. Оказывается, каждая разделительная линия здесь дополнена бликовым градиентом, который делает их объемными.

quality_9

 

Каким деталям сайта необходимо уделить больше внимания?

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

Мелкие детали требуют много внимания

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

Проверяйте сайт «попиксельно»

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

Сравнивайте разные варианты

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

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

Прочитайте так же:

Качественный вебдизайн и как его создать. Советы и примеры (часть 2)

Что такое качество в веб-дизайне: примеры и рекомендации (часть 3)

Оставить комментарий через:

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