↓

Новый-старый дизайн it.icmp.ru

Наверное почти никто не в курсе, что для текущей версии сайта it.icmp.ru был нарисован дизайн и даже что-то похожее на logo. Главной причиной для рисования дизайна - была проверка себя в качестве "веб-дезигнера" ну или хотя бы юзабилити-человека.

Вот такое лого было придумано:

http://it.icmp.ru/postimages/810/7055/thumb/it-logo.png
Из того прототипа в текущей версии дизайна остались достаточно много вещей, в основном расположение элементов. Но, как бы то ни было, общими размышлениями, решили не натягивать полностью тот дизайн.

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

http://it.icmp.ru/postimages/810/7055/thumb/main.png


Вот еще вид поста:

http://it.icmp.ru/postimages/810/7055/thumb/post.png


Какие выводы можно сделать из проделанной работы:
  • Было интересно продумывать и оптимизировать расположение элементов, то-бишь usability
  • Понял, что нужно выбрать несколько основных цветов для дизайна и использовать только их
  • Градиенты не всегда круто
  • Нужно сперва продумать расположение, а потом уже рисовать к нему дизайн

Было бы здорово, если какой-нибудь профи обосрал прокомментировал эти картинки.

Если кому интересно, исходники лежат в репе.
  • 26 июля 2011, 15:03
  • Petch
  • просмотров: ~3497
  • рейтинг: ?

Комментарии (12)

Вы - anonymous, войти ?

можно использовать bbcode-теги
[b]жирный текст[/b]
[i]курсив[/i]
[u]underline[/u]
[s]зачеркнутый текст[/s]
[size=20px]размер шрифта[/size]
всякие изменения текста
[left][/left]
[right][/right]
[center][/center]
позиционирование элементов: картинки, текст и т.д
[url][/url]
[email][/email]
внутри тега [url] помещайте ссылки, а внутри [email] адрес электронной почты;
так же [url] можно использовать в виде:
[url=http://example.com]пример[/url],
[url=http://test.ru][img]http://flickr.com/givemeimg.png[/img][/url]
[code][/code]
[quote][/quote]
внутри тега [code] можно помещать программный код (подстветка попытается включиться автоматически); для выделения цитат используйте [quote]
также можно напрямую указать язык [code=cpp]int i;[/code]
[list][/list]
создаем списки, каждый элемент пишется после [*].

Можно указывать маркер - [list=marker].
возможные маркеры 1(decimal), i(lower-roman), I(upper-roman), a(lower-alpha), A(upper-alpha). Примеры:

[list][*]1 элемент[*]2 элемент[*]3 элемент[/list]
[list=1][*]1 элемент[*]2 элемент[*]3 элемент[/list]
[list=A][*]1 элемент[*]2 элемент[*]3 элемент[/list]
[table][/table]
оформляем таблицу, используя внутренние теги [tr] и [td].
[tr] - строка, [td] - поле в строке,
[table=100%] - можно задавать ширину в процентах, по-умолчанию ширина 100%
[td=2] - можно задавать сколько столбцов входит в это поле. Пример:

[table=50%][tr][td]столбец 1[/td][td]столбец 2[/td][/tr][tr][td]значение 1[/td][td]значение 2[/td][/tr][tr][td=2]сразу 2 столбца[/td][/tr][/table]
[img][/img]
тег для вставки фото или картинок, мы любим картинки. Примеры использования:

[img]http://ya.ru/logo.png[/img],
[img=100x100px]http://ya.ru/logo.png[/img]
[img=fullimg.url]thumbimg.url[/img],
Пожалуйста загружайте картинки на наш сайт, либо вставляйте с бекбоновских ресурсов.
[video][/video]
Проигрывает видео, внутрь вставляем ссылки на видео, поддерживается Play.Ykt.Ru(нужно вставить ссылку на страницу с видео) и tv.ykt.ru(нужно вставить ссылку на адрес файла)
↑