Веб-дизайн *

Вчера прошла конференция MAX, на которой Adobe поведала, что после почти 10-летней истории пакетов Creative Suite решила полностью сосредоточиться на своих облачных приложениях и услугах Creative Cloud. Adobe объявила, что запускает новый «CC» (Creative Cloud) пакет, показав новый Photoshop CC, InDesign CC, Illustrator CC, Dreamweaver CC, Premiere Pro CC, глубокую интеграцию с социальными функциями Behance, настольный доступ к TypeKit и многое другое. Fireworks к сожалению, больше не жилец.

Запись в официальном блоге Adobe Fireworks, по мотивам проходящей в эти дни конференции «Max»:

Будущее Adobe Fireworks.

Сегодня (06.05.2013) на конференции «MAX» мы анонсировали новое поколение наших инструментов, теперь известных как «CC» (Creative Cloud), включающих Photoshop CC, Dreamweaver CC, Flash Professional CC, Edge Animate CC, и другие.
Как вы могли заметить, обновления для Fireworks CS6 включены не были.

7. Карта ума.

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

Для создания карты ума (её чаще называют английским термином «Mind map»), мы можем использовать специальное ПО, я рекомендую Xmind.

Если бы Земля была всего 100 пикселей в ширину, то расстояние от Земли до Луны составило бы около 3000 пикселей. До Марса же, в момент его максимального приближения к Земле, было бы 428 000 пикселей, или 55,76 миллиона километров. Наглядно представить себе это расстояние можно на сайте distancetomars.com, который создали лондонские дизайнеры Дэвид Паливода и Джесс Вильямс. Чтобы не прокручивать несколько сотен экранов вручную, на сайте есть стрелка, с помощью которой можно долететь до Марса примерно за минуту — в несколько раз быстрее света. Визуализация впечатляет даже несмотря на то, что с математикой дизайнеры дружат ещё меньше чем с физикой — во время полёта сообщается, что скорость составляет 200 000 км/ч, что немного (в 1607256 раз) меньше истинного значения.

Русский человек празднику завсегда рад. Особенно если праздник, как в случае с четвертым апреля, тематический и близкий веб-мастерской душе.

Как водится, в связи с этим всем лучи добра и любви. Оглядываясь на первоисточник праздника стоит отметить, что в западном сегменте интернета достаточно внимательно относятся ко всяким креативным и нестандартным 404-ым страницам, которые призваны решать не только функциональные задачи, но и дополнительно привлекать внимание пользователя.

Здравствуй, Хабрачитатель! Я работаю веб-дизайнером, и сегодня мы продолжим развивать тему, начатую в прошлой статье. А именно, поговорим о взаимодействии двух специалистов, которые обычно работают в связке, при создании сайтов. Статья посвящена дизайнерам и их некоторым типичным ошибкам при работе с макетами.



Перед вами 8 ситуаций, в которых будут участвовать web-дизайнер — Дмитрий, работающий в программе Photoshop, и верстальщик — Владимир. Эти два парня знают свое дело, но у них постоянно возникают конфликты, а иногда у одного из них возникает странное желание ударить другого монитором по голове. Впрочем, все мы цивилизованные люди и допустить такой развязки не можем. А потому сейчас мы разберемся в некоторых причинах конфликта этих двух бесценных специалистов.

За время своей работы верстальщиком, мне довелось иметь дело с кучей разных макетов как от новичков дизайна (или порой просто левых людей), так и до профессионалов. И за это время я успел набрать приличную выборку наиболее типичных багов в макетах, которых не в состоянии избежать даже маститые специалисты. Сразу оговорюсь — в некоторых организациях есть внутренние «требования к дизайн-макетам», и по идее, при несоответствии дизайна этим требованиям, он должен без вопросов отправляться на доработку, но реалии таковы, что зачастую проще самому внести нужные правки, чем гонять документ туда-сюда по трекеру. Но даже в этих «требованиях» упомянуты далеко не все очевидно возможные «косяки». Постараюсь привести наиболее популярные и универсальные (без личностной привязки). Да, кстати, все баги привожу под использование фотошопных psd — ну уж де-факто это стандарт в веб-макетах. Да и не попадались мне ещё макеты в векторе (и надо сказать, слава богу).

Интернет для современного человека стал неотъемлемой частью повседневной жизни. Общение, развлечения, отдых, работа, хобби – всё это частично перенеслось на страницы всемирной паутины. Как эффективно организовать работу в сети, чтобы иметь постоянный доступ к важной информации, получать самую актуальную информацию. Использование разных онлайн инструментов и сервисов позволяет экономить самое ценное для современного человека – время.



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

^{Cравните: популярный новостной сайт на Западе и в Китае}

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

В данной статье я затрону современные интерфейсы. Не все из них плохие. Но складывается впечатление, что такие титаны создания ПО, как Microsoft и Google, идут неверным путем. И этот путь заведет всех нас в глубокую … ситуацию.
Внимание, много букв!

Бен Кэменс обнаружил, что в выпадающем списке Shop by Department на сайте «Амазон» ховер-эффект происходит очень быстро, абсолютно без какой-либо задержки. Тем самым происходит нарушение старого, выработанного ещё в 90-х годах прошлого века правила: перед отображением пункта подменю необходим так называемый гистерезис, запаздывание.



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

Компания Designmodo, специализирующаяся на разработке веб-интерфейсов, опубликовала на Гитхабе довольно внушительный набор модных сегодня плоских элементов интерфейса — меню, кнопок, слайдеров, переключателей, чекбоксов, иконок и многого другого. Плоский дизайн интерфейсов активно продвигает Microsoft, и он всё чаще и чаще встречается в сети.

Можно спорить о преимуществах и недостатках такого дизайна, но игнорировать его нельзя — мода есть мода, так что этому набору наверняка найдётся место в колллекции большинства веб-дизайнеров. Кроме файлов изображений и стилей, набор включает шрифт Lato польского дизайнера Лукаша Джеджича и подобранные дизайнерами образцы цветовых сочетаний. Демо Flat-UI можно посмотреть здесь.

UPD: в данный момент доступ к репозиторию Flat UI закрыт по требованию компании LayerVault, которая считает, что Designmodo нарушила её авторские права. В Designmodo отрицают какое-либо заимствование и утверждают, что Flat UI — полностью оригинальная разработка.

Существует мнение, что ссылки в интерфейсе должны быть подчеркнуты. Бывает подобное не вписывается в дизайн, заказчику не нравится, или сам дизайнер считает, что ссылки нужно выделять как-то по другому. Вопрос — как:

Доброго времени суток уважаемые хабражители. В веб-дизайне существует некий тренд на различные iдевайсы. На сайтах многих популярных сервисов или дизайн студий разработчики привыкли демонстрировать пользователям адаптивный дизайн с помощью гаджетов от Apple. В этом нет ничего удивительного, это компания всегда славилась своим потрясающим дизайном и это их доминантный признак.

iMac

PSD документ iMac + PSD Mac OS X внутри.

Ссылка для скачивания

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

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

Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.

Polygonal Арт, наряду с стилем Metro начал будоражить умы дизайнеров в прошлом году. В то время как стиль Windows 8 сразу же оказался в веб-дизайне, Poly тщательно поселился в полиграфической отрасли, представляющих как различные иллюстрации, которые были использованы для плакатов, обои, дизайн для футболок, так и скины для мобильных телефонов и т.д. И только через некоторое время дизайнеры стали использовать его в дизайне сайтов.

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

Разумно будет предположить, что «полигональный» стиль, пришел к нам из кубизма

Нам нужно:

1. Установить на сайте собственные иконки с помощью SVG.
2. Они должны управляться с помощью CSS (форма, размер, заливка, эффекты в том числе и их поведение).
3. Они должны иметь маленький вес и находиться в одном месте для экономии http запросов.
4. Работать во всех основных современных браузерах.

демо

Всем привет!
Хотел бы поделиться с Вами наиболее полной информацией о тенденциях и направлениях веб-дизайна уже в нынешнем 2013 году.