Веб‑дизайн

  • 09 02.10

    Восприятие информации по горизонтали и вертикали

    Почему мы воспринимаем информацию слева направо и сверху вниз (как говорят некоторые «буквой Z»)? Правильно, потому что мы так пишем. Так пишет добрая половина человечества, а создатели компьютеров «навязали» такой стиль и восточным народам (хотя те и сопротивляются). А почему мы так пишем? Да потому что писать справа налево неудобно так же как писать левшам слева направо. Мы же себе строчку рукой...

    » Читать полностью » Комментарии (9)
  • 28 07.09

    Элементы управления в веб-сервисах

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

    » Читать полностью » Комментарии (7)
  • 12 01.09

    Сайт школы веб-технологий

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

    » Читать полностью » Комментарии (12)
  • 09 01.09

    Золотое сечение в веб-дизайне

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

    » Читать полностью » Комментарии (18)
  • 04 08.08

    Рекомендации по настройке Photoshop-а (Дополненно)

    Хочу поделиться, как я настраиваю Photoshop для работы связанной с веб-дизайном. Единицы измерения Поскольку, чаще всего в веб-дизайне мы имеем дело с растровой графикой, то в качестве единиц измерения нам нужно использовать пикселы, поэтому их нужно установить во всех настройках. В диалоговом окне создания документа, для полей Width и Height. В меню Edit (Windows) или Photoshop...

    » Читать полностью » Комментарии (27)
  • 30 05.08

    Дизайн текста 4: Ссылки, del, ins, дополнительные элементы

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

    » Читать полностью » Комментарии (34)
  • 15 04.08

    BridgeCamp и Social Media Bridge

    26 и 27 апреля пройдёт новое мероприятие в стиле BarCamp с благородной целью: объединить интернет-гиков и общественные организации. Не смотря на то, что неконференция BridgeCamp вызывает у меня весьма скептическое настроение, я согласился стать штатным дизайнером проекта. Насчёт преследуемых целей, их реальности и востребованности напишу после получения результатов неконференции. Суть...

    » Читать полностью » Комментарии (10)
  • 09 04.08

    Дизайн текста 3.5: Вложенные списки, графические маркеры

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

    » Читать полностью » Комментарии (11)
  • 28 03.08

    Дизайн текста 3: Списки

    Списки бывают упорядоченные (<ol>) и неупорядоченные (<ul>). Упорядоченные, обычно, отображаются с нумерованным арабскими цифрами маркером. Неупорядоченные могут быть с маркерами вида: закрашенный кружочек, незакрашенный кружочек, закрашенный квадратик (как вижу, так и называю) или любой другой рисунок. Начнём, с того, что уясним, что же такое список. Проведём аналогию с рукописным...

    » Читать полностью » Комментарии (13)
  • 20 03.08

    Дизайн текста 2: Цитаты

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

    » Читать полностью » Комментарии (10)
  • 29 02.08

    Дизайн текста 1: Основной текст, заголовки, таблицы.

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

    » Читать полностью » Комментарии (19)
  • 20 02.08

    Долой гламур! Даёшь трэш! Чья Магда круче?

    Нашёл-таки время и нарисовал Евгению Киселёву (ака Жека) новый дизайн за победу в конкурсе Мода 2.0. Решил попробовать себя в таком не самом популярном стиле. Пока в нём не очень разобрался, в смысле композиционной основы, но во всяком случае испробовать стоило. Впечатлили рассказы Маурицио о том, как убить стиль Web 2.0. Не скажу, что я преследовал именно эту цель (в так называемом стиле Web...

    » Читать полностью » Комментарии (25)
  • 18 01.08

    Градиентный текст с помощью CSS

    Иногда бывают дни, когда не хватает времени, иногда бывают моменты, когда не хочется ничего выдумывать. Тогда приходят спасительный копи-пэйст! В этом посте я не буду ничего исследовать, придумывать, обучать и выбирать. Просто поделюсь с вами ссылкой на замечательный пост дизайнера Nick La. Nick получит на свой пост очередной трекбек, а расслаблюсь ещё на пару дней. Итак, если вы хотите...

    » Читать полностью » Комментарии (11)
  • 29 12.07

    Premjers — новый сайт новой школы

    Запустил ещё один сайт на платформе TYPO3 — premjers.isma.lv. Частная школа «Premjers» при институте ISMA имела раньше название ISPV(Informācijas Sistēmu Privāta Vidusskola — Частная средняя школа информационных систем) и находилась по адресу ул. Ломоносова, 1, корпус «B». Недавно (летом) школа переехала в новое здание на Висвалжа, 6 и заодно сменила и название. Соответственно нужно делать новый...

    » Читать полностью » Комментарии (10)
  • 11 12.07

    Web-студии и их клиенты

    Проблема латвийского рынка web-сайтов не только в его небольших размерах, но и в том, что латвийские заказчики не понимают что такое хороший дизайн, не понимают почему хороший дизайн дорого стоит и особенно не понимают зачем вообще нужен хороший дизайн. Владельцы среднего и мелкого бизнеса мотивируют своё мнение относительно цен на сайты слухами о том, что какой-то мифический «студент» за...

    » Читать полностью » Комментарии (12)
  • 04 12.07

    Merapi.lv, типографика и так, по мелочи.

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

    » Читать полностью » Комментарии (14)
  • 07 11.07

    Контролы из разных браузеров для дизайнеров

    Составил, можно сказать, «библиотеку» всех возможных элементов интерфейса четырёх браузеров — Mozilla Firefox, Opera, Internet Explorer, Safari. Для чего может приготиться? Для разработки дизайна сайта в photoshop'e. Если на сайте используются какие-то контролы, то их обязательно нужно разметить в шаблоне. Каждый раз скриншотить неудобно. Тем более в разных браузерах они выглядят поразному, а...

    » Читать полностью » Комментарии (16)
  • 02 11.07

    Как выбрать шрифт для Web-сайта 2: serif и monotype

    "Вебдванольщики" критикуют шрифты с засечками. Оно и понятно, без засечек на экране буквы легче читаются. Шрифты с засечками предназначены для печати. Скорей всего Лебедев с ними не согласен. Я соглашусь на половину. Шрифты без засечек прекрасно удобно использовать в качестве шрифта для основного текста, ссылок и всего того, что пишется мелким шрифтом. Шрифты же с засечками удобно использовать...

    » Читать полностью » Комментарии (12)
  • 25 10.07

    Современные тенденции в области Веб-дизайна (стиль оформления Web 2.0)

    Я не в восторге от этой презентации. Считаю, что она возможно могла бы быть полезной только для начинающих дизайнеров или для тех, кто просто не шарит в современном веб-дизайне. Основные заголовки презентации: Округлые формы Градиент Шрифты без засечек Нижний колонтитул Кнопки Заголовки и контент "Лакированые" элементы интерфейса Фон с использованием монохромных...

    » Читать полностью » Комментарии (19)
  • 20 10.07

    Новый сайт isma.lv

    Закончил первый этап работы над сайтом isma.lv. Эту версию можно смело назвать beta. Предстоит ещё достаточно много сделать, чтобы довести всё до ума. Главное - перенесены все данные на новый движок. Для создания сайта использовался CMS/framework движок Typo3. Функционал Три шаблона: стартовая, внутренняя, новостная страницы (расширение TemplaVoila!) Главное меню Меню второго уровня с...

    » Читать полностью » Комментарии (10)
  • 01 10.07

    Переключение языков на web-странице

    Переключение языков на web-сайтах является одной из главнейших проблем usability, которая несомненно должна быть описана во всех учебниках по web-дизайну.Есть, конечно, спорные вопросы относительно того, как должен выглядеть блок переключения языков, но существуют некоторые догмы: Посетитель должен понимать, что это именно переключение языков и не должен разгадывать ребус из нафантазируемой...

    » Читать полностью » Комментарии (33)
  • 11 09.07

    Скажи "НЕТ" <img> в вёрстке

    Тэг IMG не очень удобен в качестве "кубика" нашего "сайтоконструктора" поскольку содержит некоторые ньюансы расположения и взаимодействия c другими "кубиками". Конечно-же мы можем представить <img> как блочный элемент, для этого всего лишь нужно в css описании элемента указать свойство display: block, в этом случае тэг унаследует свойства блочного тэга (div). Но тогда какая уж тут логика?...

    » Читать полностью » Комментарии (23)
  • 01 09.07

    Особенности градиента и его использование

    "Web 2.0 стиль" (если его можно так назвать) дал второе дыхание дизайнерам питающим неравнодушие к градиентам. Из знаменитой статьи Web 2.0 how-to design style guide мы знаем, что градиенты нам даны не только для того, чтобы сделать рисунок более объёмным или придать фону страницы эффект отдаления от содержимого страницы, но и для того, чтобы игра градиентов создавала яркое настроение всему...

    » Читать полностью » Комментарии (8)
  • 01 08.07

    Re:boot. Что такое PNG формат? PNG в IE.

    Теперь seleckis.lv будет иметь вид и формат журнала. Посты посвящённые web-дизайну, айдентике, полиграфии, флэш-анимации и Action-скрипту, программированию, а так же различным новостям в области дизайна, программирования и мира Web 2.0. Старые записи останутся (куда же они денутся) в том виде, в котором вы привыкли видеть блог-посты, но будут доступны в разделе Архив. Редизайн коснулся и их,...

    » Читать полностью » Комментарии (32)
  • 02 07.07

    MyTime: цени каждое мгновение!

    Wallpapers[ru] объявляет конкурс, сценарий которого заключается в запечатлении какого-либо ключевого момента жизни. Ценится оригинальность и фотореалистичность. Думайте что хотите, но я не вижу в таких рисунках фотореалистичности. Я конечно понимаю, что таков нынче выработаный стиль российского дизайна, но лично мне он не нравится. Слишком уж всё контрастно, слишком припудренно, накрашено, ярко...

    » Читать полностью » Комментарии (0)
  • 29 06.07

    Мне в Париж, по делу, срочно…

    Вернее наоборот. Из Парижу в Страсбург. Со скоростью 320 км/ч. Просто, но очень красиво сделаная флешка, с видеороликом запечатлившим всю дорогу по данному маршруту. Замашапили Google Maps и отрисовали весь путь. По мере движения поезда на видео, двигается и стрелочка на карте. Правда с самого начала видео и иногда звук немного тормозят, но потом работает всё лучше и лучше. Особенно понравились...

    » Читать полностью » Комментарии (7)
  • 26 04.07

    Seleckis.lv в IE7

    Обратил внимание что в IE7 мой блог справа немного перекашивает. Вспоминается известная диаграмма работы web-мастера. Часто такое бывает из-за line-height и font-size. IE видите ли оставляет место хотябы для одной строчки текста в div'е. Поэтому нужно писать в css для этого div'a: line-height: 0px; font-size: 0px; А внутренним элементам в свою очередь уже надо возвращать эти значения, иначе...

    » Читать полностью » Комментарии (3)
  • 13 04.07

    На что Web-мастер тратит время создавая сайт

    Спасибо Samy за спам =)

    » Читать полностью » Комментарии (3)
Google     
01 03.10

Международная выставка образования «Школа-2010»

С 25 по 28 февраля в Международном выставочном центре «Кипсала» прошла ежегодная выставка «Школа-2010», в которой Школа веб-технологий участвовала в первый раз. В первый раз участвовать в таких глобальных мероприятиях было трудно, особенно первый день, но мы выдержали и добились определённого успеха. Как минимум «засветились» среди высших (и не очень) учебных заведений, как Школа предлагающая профессиональное образование в сфере веб-технологий. Как максимум, нас запомнили и проявили интерес к нашей Школе сотни (если не тысячи) людей, а несколько человек сразу записалось на веб-дизайн, мультимедиа дизайн, веб-программирование и сетевое и веб-администрирование. Кроме того, в качестве успеха мы можем засчитать многочисленные предложения по сотрудничеству от владельцев предприятий, государственных организаций и даже высших учебных заведений. Фотографии и видео можно посмотреть соответственно на фейсбуке и на ютубе. Ну а в последний день выставки Туриба вместе с...

Категории: События | Фото | ВидеоТэги: » Читать полностью » Комментарии (1)
09 02.10

Восприятие информации по горизонтали и вертикали

Почему мы воспринимаем информацию слева направо и сверху вниз (как говорят некоторые «буквой Z»)? Правильно, потому что мы так пишем. Так пишет добрая половина человечества, а создатели компьютеров «навязали» такой стиль и восточным народам (хотя те и сопротивляются). А почему мы так пишем? Да потому что писать справа налево неудобно так же как писать левшам слева направо. Мы же себе строчку рукой закрывать будем! «Лево-право, право-лево…» © Фунтик Т. е. вывод какой? Виновата физиология, а не мозги (у востока — наоборот). Посмотрим правде в глаза… человека: Если вы не знали, то глаза находятся на одной горизонтали и угол обзора по горизонтали больше, чем по вертикали. Соответственно в обзор попадает гораздо больше информации располагающейся по горизонтали, а не по вертикали. В силу опять-таки особенности физиологии человеческого глаза, мышцы двигающие глаза по горизонтали гораздо сильнее (или более развиты, не знаю как правильно), чем те, что двигают глаза по вертикали....

Категории: Веб‑дизайн | Usability | Разработка сайтовТэги: » Читать полностью » Комментарии (9)
23 11.09

Первая проба записи видео-лекций по PHP в Школе веб-технологий

Решили попробовать записывать лекции Школы веб-технологий на видео. Обработка занимает к сожалению больше времени, поэтому показываю только первые 10 минут (после монтажа) с основами синтаксиса. Сама лекция предназначена для тех, кто уже начал изучать PHP. Так сказать для закрепления материала. Преподаватель Арвид Годюк, очень волнуется, уж не забрасывайте помидорами, а вот оператора (меня) можете забросать: штатива нет, руки дрожат, поставил было на полку шкафа, так вдруг фокус стал пропадать. Не профессионал, что делать… Первая попытка даёт старт серии лекций по разным веб-технологиям.

Категории: Видео | PHP | КурсыТэги: » Читать полностью » Комментарии (9)
02 09.09

Новый amigos.lv

Сегодня была запущена новая социальная сеть Латвии amigos.lv, к разработке которого я имею непосредственное отношение (лого, дизайн и вёрстка). Особенности данного проекта изложены на главной странице (если пользователь не залогинен или не зарегистрирован). Особо хочу обратить внимание на следующий функционал: Ленты событий — всё что создаётся вашими друзьями, комментируются ваши записи в блоге и фотографии, пишутся ответы на ваши вопросы, всё это отражается в соответствующих лентах. Ответы — формат QNA с возможностью создания вопросов, опросов и фотовопросов, а отвечать можно только один раз. Интересы — это тэги, на которые можно подписаться и получать всё новое связанное с интересующими вас темами. Оценки — всё оценивается и за действия получаются оценки, причём за счёт хитрой системы накрутка фактически исключена. В общем, пробуйте. Хотелось бы знать ваше мнение, только конструктивно, без фанатизма.

Категории: События | ЛогоТэги: » Читать полностью » Комментарии (10)
25 08.09

Всемирная HTML 5 истерия

Я не знаю, об этом просто сейчас модно писать или народ действительно в восторге? На самом деле, я бы с удовольствием, присоединился к толпе ликующих, если бы событие произошло год назад, именно тогда я написал статью «HTML должен быть…». Чему всё-таки радуется человечество? Например, одна из самых распространённых тем в блогах, это новые тэги: header, footer, nav, article, aside, section и др. Очнитесь ребята! Эти тэги можно было использовать с тех пор как регламентировали стандарт xhtml! Все бразуеры, кроме IE воспринимали их как строчные элементы, а с помощью CSS их можно сделать блочными. Ну да, Internet Explorer… Но почему только когда официально консорциум объявил об отказе от XHTML 2.0 (кстати, я это пророчил), появился простой и понятный код, решающий эту проблему? document.createElement("header"); Это тоже работа группы WHATWG? Ах, да! Ещё и Firefox 2, в котором работают эти тэги, но только в режиме парсинга xhtml+xml. Это большая проблема, которая решилась...

Категории: ЖурналТэги: » Читать полностью » Комментарии (12)
16 08.09

Seleckis’ method vs Pixy’s method

Честное слово, пытался найти и убедить себя в том, что этот метод уже существует. Не нашёл. Исправьте меня если я не прав. Pixy’s method отображение картинок с надписями заключался в том, чтобы внутрь блока с текстом поместить пустой <span>, и вставить картинку как фон для этого span-а. Причём, для того чтобы текст показывался в случае если картинки отключены, необходимо span поместить поверх текста. В методе Pixy, для того чтобы <span> с картинкой налез на текст используется абсолютное позиционирование. В таких условиях кнопка не может находиться в строке, она может существовать только как блочный элемент. Почему? Потому что Firefox 2 не поддерживает свойство «display: inline-block». Для отображения блока в строке в Firefox-е используется проприетарное свойство «display: -moz-inline-box» или «display: -moz-inline-stack». Но в таком случае браузер не совсем адекватно позиционирует помещённые внутрь элементы. В частности некорректно работает абсолютное...

Категории: CSSТэги: » Читать полностью » Комментарии (9)
06 08.09

Min-width и max-width в IE6 с помощью expression

Уже писали много раз, просто приведу свой код. В JavaScript-файле размещаем такую функцию: function width(min,max){ w = document.documentElement.clientWidth; return (w = max) ? max + "px" : "auto"); } Функция всего лишь принимает значения максимальной и минимальной ширины, проверяет текущую ширину документа и возвращает значение: Если ширина документа меньше минимальной ширины, то возвращается минимальная ширина; Если ширина документа больше максимальной ширины, то возвращается максимальная ширина; Иначе ширина указывается автоматическая. Функция из CSS вызывается следующим образом: div { width: expression(width(600,1000)); /* далее для нормальных браузеров */ min-width: 600px; max-width: 1000px; } 600 и 1000 — минимальная и максимальная ширина. Поскольку expression работает только для IE, а min-width и max-width уже работают в IE7 и IE8, то этот CSS нужно изолировать и вынести в отдельный css-файл и подключить его с помощью...

Категории: Брaузеры | CSS | JavaScriptТэги: » Читать полностью » Комментарии (7)
31 07.09

«Резиновое» поле ввода в форме

Как известно у полей ввода ширина не может рассчитываться автоматически относительно контейнера, как это работает у блочных элементов. Значение ширины можно задать фиксированное, либо относительное. Есть сервисы в интернете с полями ввода (например, поиском) у которых ширина задана фиксированно. Соответственно, если шаблон сайта резиновый, то поле ввода растягиваться не будет. Как правило такие сайты имеют фиксированную вёрстку. К примеру, если вы зайдёте на «Yahoo Answers» и с помощью Firebug (Firefox), Web Inspector (Safari, Chrome) или Developer Tools (Opera, IE8) отключите у элемента <div id="y-ks-whole-page"> свойство «width: 750px;» в стилях, то сайт растянет на всю ширину, а поле поиска вопросов останется той же ширины. Конечно, кроме всего прочего, некоторые другие элементы останутся фиксированными, но мы говорим о полях ввода. И вспомним работу студии Артемия Лебедева, поисковик «Яндекс» и его страницу ya.ru — облегчённую версию поисковика или посмотрим на давно...

Категории: CSSТэги: » Читать полностью » Комментарии (22)
28 07.09

Элементы управления в веб-сервисах

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

Категории: Веб‑дизайн | Usability | Разработка сайтовТэги: » Читать полностью » Комментарии (7)