Чуть больше месяца назад на Хабре проходил конкурс от интернет-издания ToWave.ru, в котором предлагалось читателям высказывать идеи, замечания и предложения по развитию проекта. Призы были интересные — три планшета Samsung Galaxy Tab 2 7.0 P3110 8Gb, два планшета Samsung Galaxy S WiFi 5.0 8Gb и полезные книжки. Я, к сожалению, заметил конкурс только спустя несколько дней после старта, и большинство полезных идей и советов было уже высказано. Но, как говорится, лучше один раз увидеть, чем сто раз прочитать.
Поэтому решил разбавить комментарии визуальным представлением дизайна. Большой недостаток старой версии сайта была плохая читабельность новостей и статей — самой большой ценности ресурса. В получившемся дизайне я хотел уменьшить количество информационного «мусора» и улучшить типографику (кликабельно):
inturist: Когда задумывал конкурс, я думал, что большинство критики будет по поводу контента. Всегда полезно слышать, в ту ли сторону идет проект. Но неожиданно бОльшую критику вызвал сам сайт, чего уж не ожидалось. Причем, мы его видим-то каждый день! Но как-то увлеклись поисками лучшей подачи контента и не заметили, что сам сайт волнует пользователя не меньше.
Причем высказанная критика по дизайну так сильно «била», что не смог дожидаться завершения конкурса и уже через сутки после первых замечаний начали понемногу переделывать сайт. Невыносима была сама мысль, что мы стараемся для читателей, а им оказывается не очень комфортно читать.
Ну и когда мы убрали второе верхнее меню, дополнительные блоки и начали править верстку — Кирилл опубликовал свой набросок дизайна. И стало ясно, что нужно переделывать все и кардинально.
grokru: Конкурс завершился, я выиграл один из Samsung Galaxy Tab 2 7.0 P3110 8Gb, и inturist предложил проработать дизайн остальных страниц. Пришлось поломать голову над главной: равноценного контента много, необходимо было аккуратно представить его на странице. Вот как сайт выглядел раньше (в этом хабратопике есть еще более ранние скриншоты):
Было необходимо свести к минимуму количество элементов интерфейса, визуально отделить разные типы контента. В итоге получился такой концепт (кликабельно):
Существовала мобильная версия сайта, но было решено делать дизайн адаптивным. Навигации была реализована на основе техники, о которой я писал на хабре не очень давно.
Верстка была доверена мне, поэтому в процессе можно было поэкспериментировать с разным представлением контента на сайте. На этом этапе добавил немного контраста (в основном это касалось типографики). В результате получился окончательный вариант редизайна интернет-издания ToWave.ru.
Небольшое лирическое отступление, связанное с несколькими недавними хабратопиками о работе веб-дизайнера и верстальщика: в последнее время я разрабатываю дизайн в основном для зарубежного интернета. И вот, что интересно: подобных противостояний там не наблюдается, потому что web-designer — это специалист, который умеет проектировать, отрисовывать дизайн и верстать в html. Согласитесь, это немного отличается от представлениях о веб-дизайнере в Рунете, где считается, что эта профессия сугубо творческая. В общем, списываю это на различие менталитетов.
Макеты дизайна в полном размере.
Автор: grokru
