?
@
   Сирийские таблицы  
Заметки web-дилетанта (старая версия)

Назад 29.05.2004 Вперёд
[ Архив заметок ]
Я, безусловно, самый грамотный, самый умный автор в Рунете. Кроме того — отличный стилист. Однако вы запросто сможете доказать, что это далеко не так: выделите орфографическую, грамматическую, стилистическую или другую ошибку (слово, знак) на этой странице мышью и нажмите Ctrl+Enter. Выделенный текст будет немедленно выслан на e-mail зазнавшемуся автору, как очередное подтверждение его несовершенства.

 Дизайн-шмизайн

[заметка о субъективном и конкретном представлении о дизайне то есть о том, как я играл в дизайн этой страницы]

 

Убить его за такой дизайн.

des

 

Сайт — попса.

-=Zepplock=-

 

nudnik.ru

 

 

 

Введение

Cвежих мыслей в голове нет, поэтому пишем про первое, попавшееся на глаза — дизайн этого сайта.

Итак, дано: сделать дизайн сайта, который бы мне понравился, не затребовал от меня каких-то дополнительных усилий, стал бы основой для правильного дизайна.

Естественно, я не скажу ничего нового по сравнению со списком литературы (конечно же, он в самом конце), возможно, только чуть-чуть о конкретных способах применения. Всё очень просто, все нижеперечисленные принципы легко реализуемы, понимаемы и ругаемы, то есть можно даже кого-то поучить и получить втык, через обратную связь. То есть немного и конкретно о боевой раскраске этой страницы.

Две вещи

Самая первая вещь, если делаешь дизайн для себя, не надо заморачиваться, а стоит СЫГРАТЬ в дизайн.

Второе, конкретно об этом сайте. Этот сайт личный, если хотите, авторский (последнее время звучит паршиво). Поэтому, в отличие от моего первого сайта о компьютерном чтении, я расчитывал не только на простоту и логичность использования сайта, иными словами, пресловутое «удобство пользователя», а в не меньшей степени, на то, чтобы его автору, МНЕ, было удобно этот сайт делать (интересно создавать, обновлять и ухаживать). Это не прямо не противоречит удобству его использования, но всё же... Другая сторона этого критерия — делать надо так, чтобы вообще доделать в ближайшем будущем, то есть лепить из того, что есть, тем, что есть, и как можешь.

И ещё раз, сайт сделан и будет делаться в первую очередь так, как мне его удобно делать/обновлять/улучшать.

Далее те не совсем осознанные принципы, по которым я ваял всё это «великоляпие». Во-первых, не забываем, что контент преобладает над дизайном, в том смысле, что контент этот — на 90% это текст — надо грамотно организовать.

Мудрый и компетентный комментарий: здесь используется отечественное понятие/представление о дизайне, как об искусстве графического оформления — за пределами могучей России именно организация контента — и есть дизайн). Во-вторых, впрочем... выделим это в подпункт.

Цвета

Так как проект создаётся «по категории» личный сайт, то он не в коем случае не должен быть прилизанным. То есть.

Цвета должны привлекать внимание к значимым элементам, однако не раздражать (если специально не выбрано, какое-нибудь запоминающийся сочетание). Хороши (по-моему) пастельные оттенки или цвета, расположенные ниже центра цветового квадрата windows. Вообще должны или не должны раздражать цвета — вопрос спорный, всё зависит от замысла.

Классическое представление гиперссылок: либо цвет основных гиперссылок должен быть синим, либо они должны подчёркиваться, либо и то и другое вместе.

Следующий выбор — выдержать определённое соотношение цветов. Про сочетание цветов сказано на webmascom, неплохо реализовано в программе Colorimpact.

В цветовой палитре интересен элемент привлекающий яркостью и простотой , который одновременно является значимым элементом.

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

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

Неброский фон выглядит классически и опрятно, в нём можно легко выделит нужные элементы обыкновенным красным цветом, красочный в мягких, пастельных тонах затягивает и расслабляет, однако для него нужны дополнительные структурные и компазиционные отметки-акценты

В тонах и оттенках одного цвета запоминается, но несколько утомляет.

Вопрос про цвета — самый спорный, потому как он более всего уходит (и уводит) в область психологии, поэтому читайте околоцветовые психологические исследования. А в заключении мысли: сравнение моего цветного дизайна с чёрно-белым (градации серого), полученного из простым конвертированием скриншота.

 

Цветной дизайн Чёрно-белый (градации серого)

Большая картинка в новом окне.

Скриншоты уже успели немного устареть в связи с переходом на register. Однако изначально всё задумывалось именно так.

Акценты

Графика должна использоватся для привлечения внимания. И только.

Четыре покоцанные буквы «e» 1) привлекают 2) это что-то о ссылках.

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

В связи с этим пришлось нарисовать специальную кнопку для Orphus'a Котерова.

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

Ещё один интересный фактор — размер, в частности размер графических элементов и заголовков, тут тоже никакий оригинальностей, на что хочу обратить внимание, то и крупнее, либо размер компенсирует цвет.

Композиция

Так как дизайн стандартный блоковый табличный, как-то надо использовать модулоры. Что ж, использую…

Не страшно, если сделать это немного коряво, чтобы взгляд не замирал на пропорциях, а ошпарено носился по странице, тем более, что сделать пропорциональные модулоры при «резиновом»дизайне сложнее, чем непропорциональные :) Также это дистигается за счёт окраски блоков, и в довершение, просто расставляем стрелочки (а почему бы и нет) куда не поподя.

Ежели я добился у Вас бегающего взгляда :), нужно его на чём-то останавливать или акцентировать.

Полезнейший совет: смотрите, как выглядит страница не только с классического 70 см расстояния, но и с двух, трёх, четырёх метров. Про разные разрешения даже не говорю.

Технические мелочи

Логическая структура в соответствии с html — это стандартные теги для заголовков различного уровня, списков и обычного текста.

Шрифты (правильнее гарнитуры, т.к. я не фиксировал их размер в пикселях). Всё задаётся через CSS и при помощи «em», так как проценты и, ещё более текстовой размер неправильно интерпретируются различными браузерами. Задаём конкретные шрифты параллельно с группами.

Существует группа экранных шрифтов от MS это тахома, вердана, требучет, джорджиа, все они очень хорошо мне знакомы по предыдущему увлечению — компьютерному чтению, именно их стоит использовать как приоритетные для текствого дизайна, наряду с указанием классических групп, типа sans-serif, serif и helvetica.

Про Dreamweaver, TopStyle Pro, Fireworks, EditPlus, Denver я напишу отдельно, а далее, без чего бы я, без сомнения, не обошёлся бы.

Скрипт Tooltips. Размер около 6 KB (от alshur, все остальные копирки в теле скрипта), если Вы думаете, что это много посмотрите, склоько занимает похожие. Что такое этот скрипт, можно почитать здесь. Всё просто, он мне нравится, исключительно тем, что позволяет дизайнить/оформлять/настраивать эти самые tooltips или всплывающие подсказки.

Система ORPHUS на сайте Дмитрия Котерова. Достаточно удобная система для исправления орфографических ошибок, даже для личного пользования и даже для использования на домашнем веб сервере. Если локально для проверки орфографии используется AfterScan Webmaster, Orfo, или даже Word, всё равно для Orphus'a найдётся применение. Кнопка была сделана мной специально для этого сайта, опять же с одной целью, чтобы её видели и пользовались. Теперь её можно найти на странице ORPHUS'a.

Fresh Eye. Хоть это не совсем про дизайн, эту программку тоже стоит упомянуть. Автор Дмитрий Кирсанов. Всё остальное есть в хелпе. Если сам пишешь текты для сайта и в одиночку, поверьте, без неё не обойтись.

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

Мой старый сайт читалки совместим со всеми браузерами, однако в новом большую часть времени я просто экспирементировал, и самое крутое, что можно ожидать это совместимость с IE, Mozilla и Opera и Konqverer последних версий.

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

От убожества к кое-чему:

Самый первый сайта автора в сети (ужас): Сборник личный интернет интересов.

История создания сайта: «ЧИТАЛКИ — компьютерное чтение»

Один из самых первых вариантов «читалок».

 

Ограничения. Среды, форматов и традиций, среды и материалов.

Про ограничения по умолчанию (браузеры для просмотра html, скорость сетевых протоколов и т.д.) я вообще не говорю, это есть правила игры, тем более про это очень хорошо написано у Кирсанова.

Просто посчитаем целесообразность наворотов. Итак, считаем tooltips — 6Kb, скрипт orphus — 8,4 Kb (код и кнопка), файл css — 5.23 Kb, ico — 1 Kb, плюс затем добавился движок register — около 36 Kb. Итого все навороты 21(дизайн)+36(движок)=57 Kb. Плюс 20-60 Kb текст заметки. То есть одна заметка занимает где-то 80-120 Kb. Я решил, что нормально, всё того стоит, наверняка, есть другие мнения.

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

Здоровый по...фигизм

Кто сказал, что принцип вложенности разделов сайта (три клика до любого документа на сайте) должен работать напрямую. Почему бы не организовать при помощи него естественную фильтрацию внимания, пользователей и ранжировку разделов и документов? То есть нужные элементы, документы подсовывать под нос, а специфические, до которых доступ необходим только определённой категории пользователей прятать в глубину за несколько переходов по ссылка?

Начальная страница сайта textory.ru выдумывалась следующим образом. Надо было сваять что-то, где можно было поставить три ссылки: на wlog, на отМЕНЯтину и на «Читалики», чтобы это что-то каким-то образом объединяло эти три темы. Так появились «игры с текстом», плюшевый медвежонок — игрушка, остальное пририсовалось, когда я подгонял надписи друг к другу, применение tooltips напрашивалось CSS`ой основой для оформления в этогом скрипте. Ещё хочу пририсовать мяч вместо точки, да пока лень.

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

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

 

Итог

Дизайн разработан. Сайт сделан и работает. Этот обзор написан. То есть кое-какое щастье.

 

Ссылки

Лебедев ру/ководство

e-notes

webmascon

mrdesign.krasline.ru

[ >>> ]

htmlcoder.vision.ru

miu-mau.org

и т.д., см заметку №2.

Литература

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

Психология цвета от Люшера etc — можно поискать по инету, навалом.

Коллекция pdf документов, размещённая на сайте «Настольные издательские системы», можно прочитать про золотое сечение, модулоры, гарнитуры, цвет, вёрстку, технологию оформления и издательства, и, очень самая полезная книга по типографике, а именно:

Григорян Е.А. «Основы композиции в прикладной графике» (пособие для студентов и учащихся высших и средних специальных учебных заведений),

Волков Николай «Курс макетирования и верстки»,

Головач Влад «Дизайн пользовательского интерфейса»,

Рудер Эмиль «Типографика: Руководство по оформлению»,

Иттен Иоханнес «Основы цвета»,

Фаулер Дэвид «Печатная реклама. Трамплин для роста продаж»,

Херлберт Аллен «Сетка: Модульная система конструирования и производства газет, журналов, книг»,

Чихольд Ян «Облик книги. Избранные статьи о книжном оформлении»,

Мильчин А. Э., Чельцова Л. К. «Справочник издателя и автора. Редакционно-издательское оформление издания.».

А также некоторые другие тексты с указанного сайта.

 

Ну и последнее — настольные книги, тут уж без ссылок.

Школа изобразительного искуства в десяти выпусках, изд-во «Искусство», 1966.

три «классических книги» издательства «Символ»:

1. Веб-дизайн книга Дмитрия Кирсанова / Дмитрий Кирсанов «Веб-Дизайн»,

2. Веб-дизайн книга Якоба Нильсена. / Jakob Nielsen Designing web usability: the practice of simplicity,

3. Веб-дизайн книга Стива Крига или «Не заставляйте меня думать» / Steve Krug Don`t make me think: a common sense approach to web usability.

 

Глупое замечание: читайте эти книги, а ковырятся в html редакторах научится гораздо проще.

 

P.S.

Следующие заметки о дизайне:

«Дрёмаваявер или очертания сетевых грёз». — середина июля 2004

«Ру/коприкладство, Юзверьбилити, или отстрел пользователей-идиотов» — август-сентябрь 2004.

 

Про что не сказал. Позицирование. На первый взгляд не относится к дизайну прямо, однако задаёт направление, а значит... Фраза: «заметки web-дилетанта»

Был вариант«домыслы дизайнера-дилетанта», (ddd, хи-хи) и др. но они задавали/задавили слишком узкий смысл. Вообще, такое заявление позицирование (ну да, тема сайта) очень влияет на ход мыслей и т.д. И конкретно на то, как ты потом делаешь всю работу. Вот это, на самом деле, и есть дизайн.

И вообще, применительно к дизайну действительно не определение «красивый», а определение «эффективный», последнее означает результат, чего добился ли автор в деле прорицания и гипнотизации пользователя, в какой степени. Ну и, наконец, совсем банальность, дизайн, это вообще не творчество, а конструирование. Поэтому стоит обратить внимание (то есть почитать в тему) на логику, системы знаний и карт ума/разума (mapmind).




 Список всех заметок

Поиск

Google
Web textory.ru
 Рассылка сайта teXtory.ru

 Реклама

 Текстовая реклама

 Поводы для заходов с поисковиков




Назад 29.05.2004 Вперёд

  У Вас браузер с javascripts (IE, Opera или Mozilla)? «Орфуса» видели? Помогайте!

Сирийские таблицы — заметки WEB-дилетанта. Сделано isaev.textory.ru, 2004-2005. Брянск.
[^]
 [ Страница собрана за - 0.004 ][ 127411/79/35/4/4 ]
Login:  Pass: