Фев 20 2012

Простой хороший веб-дизайн

Категория: Веб-дизайнМаксим Шайхалов @ 13:00

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

hugeinc thumb Простой хороший веб дизайн

Почему же упрощение сайта является такой важной задачей? Давайте разберемся.

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

1. Упрощается навигация;

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

2. Дизайн загружается молниеносно;

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

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

3. На контент начинают обращать внимание;

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

Недавно было проведено исследование, результаты которого показали, что 79% пользователей пролистывают страницы сайта, но лишь 16% пользователей читают все от начала до конца. Бороться с теми, кто просто просмотрел сайт, бесполезно. С такими пользователями нужно работать, это принесет больше пользы.

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

indielabs thumb Простой хороший веб дизайн

4. Меньше проблем с созданием;

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

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

5. Код отлаживается «на ура»;

В простом коде найти возможные ошибки гораздо проще. Ведь если есть список стилей с 300 разными свойствами, то намного труднее определить, где именно проблема. А если бы свойств было всего 30, то ситуация упростилась бы в разы.

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

6. «Легкий» сайт использует меньше трафика.

Ранее мы упоминали о том, что простым сайтам не понадобятся файлы больших размеров. А это приведет к тому, что такие ресурсы будут занимать меньше места на сервере. Кроме того, им не потребуется много трафика. По приблизительным подсчетам, такой «облегченный» сайт будет использовать в 10 раз меньше трафика, чем сложный его аналог. Для тех сайтов, которые посещают не более 1000 человек в течение месяца, это не проблема. А вот для более популярных ресурсов такой подход будет отличным шагом в сторону экономии.

Как сделать сайт проще?

Все достаточно просто, стоит лишь запомнить несколько основных истин.

cardobserver thumb Простой хороший веб дизайн

1. Не все декоративные элементы одинаково полезны;

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

2. Главный вопрос: «Этот элемент действительно настолько важен?»;

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

3. Там где простой дизайн, там и простой код;

Иногда чрезмерно увлекшись дизайном люди напрочь забывают о коде шаблона. В итоге в нем поселяется тотальный хаос. А кому это нужно? Разметка страницы должна быть настолько простой, насколько это возможно. Чтобы добиться этого, можно уменьшить количество стилей в списке или число используемых эффектов Javascript. Естественно, код должен быть хорошим, полностью соответствующим стандартам.

Хотя многое зависит и от выбранной CMS, ведь некоторые из них достаточно сложные. Оптимальный выбор — CMS, максимально соответствующая планируемым функциям сайта. Отличным вариантом будет также CMS, в которой большую часть функций можно включать или выключать.

4. Залог успеха — простая навигация.

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

Отличные примеры

Знакомство с некоторыми примерами простых сайтов будет не лишним.

gugazine Простой хороший веб дизайн

 

holgerkoenemann Простой хороший веб дизайн

 

designobserver Простой хороший веб дизайн

 

montylounge Простой хороший веб дизайн

mattbango Простой хороший веб дизайн

bigbadcollab Простой хороший веб дизайн

belvoirfruitfarms Простой хороший веб дизайн

 

workwithmister Простой хороший веб дизайн

 

onedaywithoutgoogle Простой хороший веб дизайн

 

minning Простой хороший веб дизайн

via noupe.com

Теги: , , ,


Янв 05 2012

Как правильно упрощать

Категория: ИнтерфейсыМаксим Шайхалов @ 14:00

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

Чтобы сделать что-либо более простым, существуют два способа:

  1. Первый заключается именно в сокращении рамок проекта. О нем как раз говорилось выше.
    Действительно, таким образом можно достичь некоторой простоты в удобстве использования продукта, но, чаще всего, цель проекта становится трудно достижимой.
  2. Второй способ заключается в том, чтобы сконцентрировать свое внимание на главном. В этом случае убирать ничего не нужно, а возможно даже придется добавлять функциональности. Главным образом вам необходимо скоординировать фокус. Благодаря этому, пользователи смогут гораздо более гибко и быстро использовать ресурсы для достижения своих целей.

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

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

Упрощение воды

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

Например, давайте попробуем сделать «проще» стакан с водой. Как это сделать?

Если что-то убрать, то стакана с водой просто не будет. Предположим, что мы убрали стакан, тогда вода просто растечется по поверхности. Но, если мы уберем воду, то нам нечего будет пить. Как видите, ничего убрать нельзя, ни целого, ни его частей. Если убрать часть стакана, то в образовавшееся отверстие, вода просто вытечет. А если убрать половину стакана воды, то не получим конечного результата — мы просто не напьемся.
Можем сделать вывод о том, что меньше, это всегда меньше. Чаще всего, делая что-то меньше, мы его разрушаем.

Значит, для достижения результата ничего убирать нельзя. Тогда можно ли упростить стакан воды? Ответ – да.
Можно убрать из стекла лишний воздух, содержащийся в нем в виде пузырьков, от чего поверхность стакана станет гладкой и очень тонкой, практически невидимой. И у нас будет создаваться впечатление, что вода просто находится в воздухе, а не в стакане.

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

Нам удалось сделать «проще» стакан с водой, но при этом, мы ничего не сделали меньше.

Упрощение толстяка

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

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

Если наши «упрощения» начнутся с сокращения его функциональности, то мы получим явно сокращенный вариант того, что имели в начале. И, однозначно, это плохо. Например, начав упрощение, мы убрали у него руки. Стало лучше? У нас получился полный безрукий парень. Давайте, попробуем убрать у него ноги. Сделав его «проще» таким образом, мы превратили его в инвалида (бу-га-га!).

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

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

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

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

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

Теги: , , , ,


Окт 11 2010

5 шагов по упрощению дизайна блога

Категория: Веб-дизайнМаксим Шайхалов @ 6:00

5steps thumb 5 шагов по упрощению дизайна блога

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

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

И вы не должны быть гуру дизайна или работать в Apple, чтобы осуществить это!

Эти шаги проще, чем вы думаете. Те, кто не любят простоту могут спросить: зачем это мне?

Читать дальше →

Теги: , , , , ,


Сен 12 2010

Что такое минимализм?

Категория: Это интересно!Максим Шайхалов @ 6:00

thumb Что такое минимализм? vs.

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

Читать дальше →

Теги: , ,