Alt+N
Новость...

Просветите нас
Правила хорошей заметки для Дизайн-собаки

РСС

Выделение бордером

Павел Моисеенко собрал примеры выделения бордером вместо жирного начертания на сайтах.

http://pavelmoiseenko.ru/…/border-font

1 комментарий твитнуть  типографика, веб-дизайн, акциденция, выделение

Размеры картинок в ФБ, ВК, Твитере и других соцсетях

Ирина Смирнова из Тильды подготовила справочник размеров превьюшек в соцсетях. Предлагает запомнить универсальный размер 1024×512 и даёт сводную таблицу по девяти соцсетям: Фейсбуку, Вконтакте, Твитеру, Инстаграму, Ютубу, Пинтересу, Линкедину, Гугль+ и Одноклассникам.

http://tilda.education/…-images-for-social

4 комментария твитнуть  соцсети, веб-дизайн, Facebook, twitter, google, youtube, instagram, vk, pinterest, linkedin, ok

Сайт Форфанкис

Сайт Форфанкис — дизайнеров из Барселоны:
http://4funkies.com

По клику на картинку открывается увеличенная версия и расталкивает всё остальное.

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

Айконик — умные иконки для веба

Это набор умных иконок, на который собрали деньги через Кикстартер:
http://www.kickstarter.com/…-icons-for-the-modern-web

Сами иконки не мегасупер-пупер, но в честном векторном формате СВГ и настраиваются через ЦСС и яваскрипт. Настраивается текст:

И цвет отдельных элементов:

Настраивается даже форма отдельных элементов и направление:

Иконки автоматически адаптируются к выбранному размеру:

На сайте удобные фильтры для поиска:
https://useiconic.com/icons/

https://useiconic.com

3 комментария твитнуть  иконки, веб-дизайн, динамизация

Ссылки Медиума

Дизайнер Медиума ищет идеальное подчёркивание ссылок и возможность его воплотить:
https://medium.com/…-on-medium-7c03a9274f9

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

Адаптивные логотипы

Джо Харрисон собрал страничку с логотипами известных брендов, меняющимися в зависимости от размера окна:

http://www.responsivelogos.co.uk

нет комментариев твитнуть  графдизайн, логотип, веб-дизайн, приём, резиновые сайты, Joe Harrison

«Ласт» — голландская дизайнерская студия

Сайт из интерактивных стопочек и интересные прогрессивные работы в графдизайне и визуализации:
http://lust.nl

нет комментариев твитнуть  графдизайн, информационный дизайн, типографика, веб-дизайн, lust

Новый сайт «Вёрджин Америки»

Авиакомпания «Вёрджин Америка» показала новый сайт: http://beta.virginamerica.com/

Презентация: http://static.virginamerica.com/…/newlookvx/vx-redesign-9/7

Тезисы:
полноэкранный интерфейс бронирования;
один выбор на одном экране;
очередной редизайн посадочного талона.

нет комментариев твитнуть  сайт, интерфейс, веб-дизайн, посадочный талон, Virgin America

От карандаша до пикселя

Pencil to pixel — выставка Монотайпа в Нью-Йорке, посвящённая шрифтам.

У выставки сайт-видеоафиша в «швейцарском» стиле:








http://www.penciltopixel.org

нет комментариев твитнуть  сайт, вёрстка, веб-дизайн, швейцарская типографика, Monotype

Как правильно делать ниспадающие меню

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

http://bjk5.com/…-down-amazons-mega-dropdown

1 комментарий твитнуть  интерфейс, веб-дизайн, приём, меню, ben kamens, Фиттс, Тогнаццини, V-зона

Навигация на сайте мюнхенского музея

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

http://www.kunstverein-muenchen.de

1 комментарий твитнуть  навигация, веб-дизайн, приём

Редимаг

Сила запустила новый проект «Редимаг» — платформу и конструктор веб-журналов:

Readymag is an interactive publishing platform which allows you to create, publish and discover truly amazing webzines.

Сайт и демо-журнал: http://readymag.com/

Фэйсбучечка: https://www.facebook.com/readymag

12 комментариев твитнуть  сайт, графдизайн, интерфейс, типографика, веб-дизайн

404-я страница на сайте БФМ


http://www.bfm.ru/404/

2 комментария твитнуть  сайт, вёрстка, веб-дизайн, приём

Руслан:

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

Денис Братчук:

Увидев заголовок, не поверил глазам, так как для меня 404 страница сайта БФМ выглядит вот так: http://www.bluefountainmedia.com/404/ :)

Флюент: новый подход к электронной почте

Новый сервис «Флюент» превращает электронную почту в ленту сообщений:

http://fluent.io/

http://demo.fluent.io/

Во многом это то, о чём недавно писал Грэм:
http://paulgraham.com/ambitious.html (п.2)

6 комментариев твитнуть  интерфейс, веб-дизайн, почта

Структура разметки веб-страницы как граф

Сервис, позволяющий изобразить разметку веб-страницы в виде графа:
http://www.aharef.info/static/htmlgraph/

Положительный отзыв от Тафти и обсуждение на его форуме:
http://www.edwardtufte.com/…-and-a-fetch-msg?msg_id=0002HW

Примеры:


apple.com


табличный yahoo.com


google.com

Легенда:
cиний — a
красный — table, tr и td
зеленый — div
фиолетовый — img
желтый — формы и их содержание
оранжевый — br, p, blockquote
черный — корневой html
серый — остальные теги

2 комментария твитнуть  инфографика, визуализация, веб-дизайн, графы

ЦСС-эффекты Симурая

Симурай — дизайнер интерфейсов, рождённый в швейцарских Альпах и проживающий в Амстердаме.

Экспериментирует с ЦССом. Всё интерактивное.

Кнопусюсечки: http://lab.simurai.com/css/buttons/

Курсорный монстр! Клёво жрёт курсор: http://lab.simurai.com/toy/monster/

Фонарик. Зажигается! http://lab.simurai.com/css/flashlight/

Вдавленный текст: http://lab.simurai.com/css/carveme/

Стереотекст: http://lab.simurai.com/css/css3d/

Ну и, конечно, же, куда нам всем без причёсанного алюминия? http://lab.simurai.com/css/metal/

Все его эксперименты: http://simurai.com/tagged/lab

Не фотошоп.

1 комментарий твитнуть  фотошоп, вёрстка, типографика, кнопка, веб-дизайн, хитрости, кнопусечка, карамелька

Николай Товеровский:

Вау, морф кнопок рутой.
http://gyazo.com/….png

Бостон-глоуб

9 комментариев твитнуть  вёрстка, газетный дизайн, веб-дизайн, резиновые сайты

Длинные продающие тексты

http://visualwebsiteoptimizer.com/…/long-sales-letter-copywriting

Интересно подумать, почему это работает.

Видимо, главная причина — бюджет времени. А качество и структура текста важны, чтобы человек не терял интереса и читал, читал дальше!

Вот вся жесть целиком: http://www.losethebackpain.com/….html

Кратко идеи:
заголовки и подзаголовки завлекают;
важно в начале разжечь эмоции, угадывать эмоции по ходу текста;
людей надо превратить в читателей;
лучший способ продать — демонстрация в деле (распилите своей пилой машину);
сказать ровно столько, сколько нужно, и ни слова больше (прямо скажем, дохуя, 60 страниц про семинар или коучинг);
меньше цена — меньше текста, импульсная покупка;
засунуть все бенефиты предложения прямо на плашку заказа;
визуализировать все способы обращения (добавить в корзину, логотипы карт, девушка в наушниках у телефона);
тестировать А/Б.

1 комментарий твитнуть  маркетинг, дизайн работоспособных систем, веб-дизайн, приём, психология, продажи, конверсия, КПД

Илья Бирман:

Опыт 37 сигналов в вопросе:
http://37signals.com/…-ab-testing-part-3-final

Маша

Артём Геллер анонсировал в своём твиттере новую штуку под названием «Маша» (Mark & Share). Урл страницы содержит в себе информацию о выделенных фрагментах текста, и при выделении текста можно в один клик сгенерировать такой новый урл.

Пример:
http://kremlin.ru/news/8147#sel=4:9,4:20

Результат:

12 комментариев твитнуть  интерфейс, веб-дизайн

Поиск фотографий по цветам

http://labs.ideeinc.com/multicolr

4 комментария твитнуть  графдизайн, дизайн, веб-дизайн, поиск, цвет, фликр



© 2017

Дизайн-бюро
Артёма Горбунова

Пишите: mail@artgorbunov.ru