Так делать НЕЛЬЗЯ!
Музей-диорама
http://diorama2006.narod.ru
Автор: Nikitar
http://rusforumz.com/
В этой рубрике мы будем описывать различные сайты на просторах РуНета, которые имеют в дизайне ряд ошибок, какие именно я здесь их и буду перечислять. То есть мы разберём их дизайн по полочкам, заглянем в код и дополним всё это дело привлекательными (или не очень) скринами.
В этот раз я попал в сложную ситуацию. Дело в том, что сегодня нужно было оценивать 2 сайта или выбрать какой-то один. И мне пришлось выбрать. Так как в одном было слишком мало ошибок, приличный дизайн, и дизайнер надо сказать со стажем уже, не новичок. Другой сайт, который я в конце концов и выбрал, делал новичок, я бы даже сказал дилетант в веб-дизайне (ничего обидного, все когда-то начинали). Естественно, у него много того, на что требуется обратить внимание, поэтому сегодня опять начинающий сайт. И множество распространённых ошибок в дизайне. Ну рассмотрим подробнее..
Сайт называется..о, тут такое длинное название, поэтому я его сокращу до одного слова: "Диорама". Если честно, к своему стыду, я не знал что это такое, поэтому сначала даже подумал что здесь какая-то ошибка. Ну, диаграмма, кардиограмма, панорама, монограмма, фонограмма, но решил всё-таки уточнить у автора. Оказывается, диорама - это такой вид панорамы. Так что все запомните, вдруг пригодится, хотя может все знали, один я такой..эээ...недалёкий :)
Теперь давайте перейдём собственно к самому сайту. На скриншоте вы видите его, я теперь решил кстати выделять красным ошибки, а то многим они не сразу бросаются в глаза. Итак, захожу я на главную страницу, и сразу что вижу - толстые, я бы даже сказал, толстенные рамки у картинок. Огромные, чёрные. Это что траур? border аж 3, во как! Уважаемый автор сайта! Рамки не следует делать такими чёрными и жирными, поверьте, достаточно будет рамки шириной в 1 пиксель, над цветом подумайте, можно в принципе и чёрный оставить.
Теперь о названии сайта. Лично я читал название сайта сверху страницы, в заголовке, то что в заголовке окна браузера высвечивается. Почему я не стал читать на самой странице? Я объясню. Потому что чёрный текст совершенно не читается на иссиня-синем (извиняюсь за тафтологию) фоне. Если вы хотите, чтобы кто-то читал ваш сайт, сами прочитайте весь текст, и подумайте а не напрягаете ли вы зрение? Потому что разобрать, что там написано очень сложно. Поэтому необходимо поменять цвет фона.
У меня разрешение экрана 1024*768, самое распространённое на сегодняшний день. Но у меня появляется горизонтальный скролл. Потому что (как я посмотрел в коде страницы) ширина основной таблицы составляет 1022 пикселя. Неужели вы думаете, что в оставшиеся 2 пикселя можно уложить бордер браузера и скролл-бар? Далее, ещё в таблице заложена её высота. Этого не советую делать, зачем? Пусть она тянется настолько, насколько хватит контента. Так логичнее.
Ещё что сразу же резануло мой привыкший к веб-дизайну взор: подчёркивание слов. Во-первых, очень важное замечание. Для выделения слов используйте полужирное начертание или курсив, подчёркивание нужно использовать ТОЛЬКО для ссылок. Потому что у всех пользователей уже выработался рефлекс, если слово подчёркнуто, нужно на него кликнуть, так как это ссылка. Я сам добрых пять минут прокликал, и обнаружил в конце концов, что это просто слова :( Далее. Почему-то 5 пробелов до самого слова тоже подчёркнуты. Это что? Туда что-то вписать надо? Выглядит именно так. И очень, поверьте, олчень-очень, раздражает посетителей такие подчёркивания пустых мест.
Меню честно говоря поразило меня своим многообразием и широким выбором куда можно пойти с главной страницы. Это либо на главную страницу (на которой мы собственно и находимся), либо в раздел Курская битва (хоть один по теме), гостевая книга и страничка автора (интересно, что это за страничка такая). Естественно я решил пойти на самый значимый раздел - Курская битва, но он никуда не ведёт. Не просто не ведёт на страницу, но и не ведёт на 404-ю страницу, то есть попросту ссылка не прописана. Прокликав долгое время, я так и не понял, что хотел сказать автор этим. НА страничке автора тоже больше ничего не было. Меню какое-то неполное, где весь контент? Вы скажете, что наверно его пока нет, а вот и нет, я, проведя небольшое расследование, отыскал-таки все остальные странице, но об этом читайте ниже.
Что неправильно на этой странице:
1. Рамки у картинок. Не злоупотребляйте параметром border у тега img. Гораздо приятнее выглядит рамка сделанная в фотошопе, а толстые, массивные рамки у рисунков - это очень плохой тон. Неплохо выглядят картинки и без рамок. Экспериментируйте и вы найдёте подходящее решение.
2. Цвет текста и фона. Одно из основных правил юзабилити и веб-дизайна - текст должен читаться на фоне хорошо, то есть не напрягаясь, таким образом они должны быть контрастными. Лучше всего читает чёрный на белом, белое на чёрном - хуже, а вот чёрное на тёмно-синем - это издевательство над посетителями.
3. Ориентировка на расширение. Сегодня самым распространённым разрешением экрана является 1024*768, именно на него нужно ориентироваться при создании сайта. НО не следует полагать, что если расширение 1024*768, то и таблицу нужно делать шириной 1024 пикселей. Не забывайте ещё про рамки браузера, про скроллбар, всё это в сумме стандартно обычно составляет 20 пикселей (+/-), поэтому ширина общей контентной области должна быть 1024, не больше.
4. Удобство навигации. Удобство навигации - залог того, что ваш сайт не закроют на главной же странице, а пойдут дальше и прочитают весь сайт и найдут то, что им нужно. Обязательно следите за тем, чтобы все пункты меню по возможности были в одном месте, чтобы они все переходили на нужные разделы сайта, иначе грязные ругательства со стороны посетителей сайта вам обеспечены :)
Итак, мы остановились на самом интересном. Я стал осматриваться в поисках другого выхода с этой страницы, кроме кнопки закрыть. И нашёл его. Оказывается в тексте главной страницы есть много ссылок, которые оказывается ведут на другие страницы сайта. Кстати, цвет ссылок. Красный на серо-буро-зелёном совершенно не смотрится.
Оказывается также, что навигация у сайта всё-таки есть, но очень своеобразная. В самом низу страницы (я промотал 6 экранов пока добрался) есть мало различимые ссылки "вперёд" и "назад". Это что, презентация? Это веб-сайт, а веб-сайт должен строиться по законам веб-дизайна. Следовательно всяких кнопок вперёд/назад, которые найдёт разве что 1 посетитель из 100. Поймите, не все читают текст страницы, как это ни прискорбно, но все смотрят как бы сквозь страницу, отыскивая то, что нужно. И оттого как посетители быстро найдут информацию, которую искали, зависит их впечатление от сайта.
Далее, 6 экранов - многовато для контента одной страницы. Я даже притомился малость мотать вниз. Можно ведь было как-то разделить всю информацию, расположить её по полочкам, то есть по разным страницам. Посмотрел я также на название страницы. index0.html, index1.html - это что такое? Только одна страница есть index.html - она главная у всех сайтов, и это не секрет для большинства пользователей. Поэтому остальные страницы надо называть так, чтобы посетителю сразу было понятно, на каком он разделе, анпример kursk.html.
Надпись внизу страницы: "Сайт находитЬся на реконструкции". Какая же это реконструкция, когда вся страница заполнена информацией? Реконструкция - это когда ничего нету. И мягкий знак убери, пожалуйста из слова "находится". К тому же эту надпись если размещают, то размещают вверху страницы. А лучше такого вообще не писать.
Ошибки на странице:
1. Необычные аватары: вперёд-назад Сайт не презентация, поэтому нужны не такие кнопки, а нормальное меню с названиями страниц. Так будет легче ориентироваться в вашем сайте.
2. Размер контента. Максимальная высота контента должна составлять не более 2-3 экранов на страницу, далее уже будет сложно читать пользователю, максимум 4.
3. Названия страниц. Конечно, названия страниц не очень сильно влияют на общее впечатление от сайта, но всё же, если человек запутается на какой он странице, он должен иметь возможность посмотреть на адресную строку и всё понять. А у вас он понимает только, что он на странице index0.html и это ему ничего не даёт.
Нашёл я ещё одну страницу, что-то вроде фотогалереи. Но что меня немного смутило. Фотографии и текст организованы как в текстовом документе. То есть сначала фото слева, потом справа. Лучше определиться с расположением фотографий, также как-то криво расположены подписи к фотографиям.
Надпись "Смотреть в Internet Explorer" конечно заслуживает особого внимания. Никогда не пишите такую надпись, сайт должен быть расчитан на разные браузеры, и вообще это основной признак непрофессионализма.
Общее впечатление от сайта: сайт нужно долго и мучительно дорабатывать. Обратить внимание как на дизайн, так и на юзабилити, поменять цветовую гамму, шрифты и цвет текста.
Закончен ещё один обзор, ждём новых сайтов для оценки
Вы тоже можете написать мне какой сайт вы бы хотели чтобы я оценил и написал такой подробный обзор. Это может быть ваш сайт или сайт кого-нибудь другого. Убогий и нет. страшный и приличный, ужасный и симпатичный, все они будут жестоко раскритикованы. Не боитесь жёсткой критики? Тогда пишите название сайта на странице обратной связи и не забудьте указать в теме: «Сайт на заценку» или что-то в этом роде.
Ждём-с. Ну, а сейчас прощаюсь и удаляюсь. Nikitar.
Уважаемые авторы – создатели сайтов, которые я подвергнул критике. Ничего в этом нет плохого, так как ссылка на ваш сайт стоит, и многие захотят его посетить. Если вы всё же думаете, что данный обзор ущемляет ваши права, то не думайте об этом, так как он никак и ничем, а также никогда не нарушит ваши права, так как это здоровая и объективная критика.
PS. Если вы обнаружили в моих текстах ошибки - не расстраивайтесь, бывает. Просто мысленно наорите на меня и прочтите мне мораль про нормы правописания, а затем с чистой совестью продолжайте читать :) А если по правде, то пишу я очень быстро, поэтому на запятые времени нету, а все грамматические ошибки не более, чем опечатки, точнее очепятки, то есть пяткиоч, блин, запутали, короче, всё... Пока!
