Архив Категории: Дизайн

Дизайн

Онлайн база данных торговых марок РФ

FindTM.ru — поиск торговых марок, то есть логотипов или зарегистрированных словосочетаний и их правообладателей.

Очень значимый инструмент для специалистов в этой области. А для нас, для планктона Интернет-дизайна — кладезь феерических, но чаще всего совковых логотипов. Вот один из примеров умопомрачительных логотипов, найденных мной, что побудило к написанию целую статью о дизайне в области туалетной бумаги!

Дизайн Интернет

WordPress Twenty Fourteen, новая элегантная журнальная тема

Определенно стоит попробовать эту самую передовую тему от разработчиков WordPress, которая опережает время даже по своему релизу. На дворе еще 2013-й, а команда уже выпускает тему 2014-го года.

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

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

Дизайн

Новый дизайн админской части WordPress версии 3.8

При обновлении WordPress до версии 3.8 в нем появился абсолютно новый дизайн, навеяный современными интерфейсами приложений под Android (к примеру, Gmail и RSS агрегатор Feedly). Этот дизайн делает управление сайтом еще проще через браузер смартфона. Необходимость в специальном Android-приложении WordPress, который также обладает схожим дизайном, теперь вроде как отпадает. Можно всё делать через мобильный браузер.

Вот как смотрится новый дизайн:

Новый дизайн в WordPress 3.8

Новый дизайн админ-части в WordPress 3.8

Из официального релиза:

читать далее »

Дизайн Интернет

Анимация на чистом CSS 3: танцующий Бендер и анимированные 3D модели

Одна из фитчей CSS 3 — это возможность анимирования. Пусть реализация и весьма сложная, но если есть возможность, то всегда появятся и умельцы, которые ей воспользуются и сделают очередной шедевр! Вуаля, вот он:

Танцующий Бендер из Футутрамы на чистом CSS3

Бендер танует, и это сделано на читом CSS 3, без каких либо JavaScript и DHTML

Бендер танует, и это сделано на читом CSS 3, без каких либо JavaScript и DHTML

Хотите больше — посмотрите целую коллекцию 3D анимаций, постоеных только на CSS 3 по тем же принципам.

UPD: Также в сети появились отрисованные на чистом CSS персонажи мультсериала Симпсоны. Впечатляет целеустремленность автора.

Как это делается? читать далее »

Дизайн

Логотип Олимпиады в Токио 2020. Каким он будет в итоге?

В сентябре международный олимпийский комитет объявил, что японский город Токио станет местом проведения XXXII летних Олимпийских Игр в 2020 году.

На текущий момент известен только логотип Токио 2020, как города кандидата:

tokyo-summer-olympics-2020-candidate-city-logo

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

tokio-olimpics-2020-logo-three-eye-fish-mutant

Вариация на тему рыбы с тремя глазами.

tokyo-olympics-2020-pacman-log

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

Японцы уже подготовили красочную серию аниме-персонажей по разным видам спорта: читать далее »

Дизайн

GoDesigner.ru — коллективный разум дизайнеров

Проект коллективного дизайна GoDesigner.ru может раз и навсегда решить извечную проблему нестыковки видения дизайна заказчиком и реализации дизайнером. Ключ к разрешению этой ситуации прост и заключается в 3-х шагах:

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

Всё гениальное просто!

Дизайн Жизнь

Эксперимент с дизайном сайта «Позитив — негатив»

Вчера у меня родилась небольшая мысль по поводу дизайна AMBIVALENT — сделать разбивку постов на «Позитив» и «Негатив». Позитивные — черным по белому фону, а в негативных — черный фон и белый шрифт. В общем, посты будут чередоваться и в итоге получится что-то вроде пешеходного перехода:)

По-моему оригинально, и будет гармонировать с доменом и новым многозначительным слоганом «Если не белый, значит черный…«. Появится хоть какая-то изюминка. А то сейчас вообще не понятно, о чем и для чего этот поток мыслей:)

Новая концепция пока в стадии разработки… Картинка в тему:

Суровая критика дизайна сайта от Дилберта

Суровая критика дизайна сайта от Дилберта

Отвлекусь, комиксы весьма даже ничего. Есть занимательный сайт с переводами этого и других комиксов. Занимательнее всего там, что перевод не встроен в картинку, а наложен средствами CSS. Фетишизм конечно, но имеет место быть.

До каких же высот будет эволюционирует наш дизайн — покажет время…

А общая направленность данного поста — отвратительный дизайн, поэтому отнесу ка я его к «Негативу»:)

Дизайн Интернет Программирование

Тестировать и делиться CSS и JS скриптами — легко онлайн

JSfiddle.net и LiveWeave.com — два очень простых и удобных сервиса тестирования HTML 5, CSS 3 и JS скриптов. На экране попросту 3 окна для ввода каждого из скриптов, и четвертое окно с визуальным результатом. Нажимаем «Run» и проверяем свои творения.

Также, очень легко делиться вашими набросками через короткие ссылки. Вот мой маленький примерчик: http://jsfiddle.net/wTLXb/ — как в CSS делать скошенные углы блоков.

А вот более серьезный пример — анимированный танцующий Бендер на чистом CSS 3 — просто фантастика!

Дизайн Интернет

bio-bak.nl — Флэш разрыв мозга

bio-bak.nl — полный разрыв мозга. Во-первых, это очень красивый и качественно сделанный флэш-сайт. Во-вторых… дальше просто сложно понять, что ЭТО такое… Нужны наушники, знание английского, любопытство и куча свободного времени, чтобы в прямом смысле, бороздить просторы… загадочной Голландии…

Дизайн

5 генераторов CSS3

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

Вот несколько генераторов CSS3-кода, которые показались мне наиболее полезными.

Ultimate CSS Gradient Generator
Помню, вид градиента, созданного не в графическом редакторе, а парой строк кода поразил меня: это буквально казалось чем-то магическим. Но, как и всегда, со временем магия превращается в обыденность. Представленный генератор, на мой взгляд, обоснованно использует слово «ultimate» (максимальный, предельный) в своем названии: на первый взгляд кажется, что параметров совсем немного, но стоит только начать с ними работать, как сразу понимаешь, что добиться можно многого.

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

CSS Border Radius Generator
Симпатичный генератор округления углов рамки, который может многим показаться слишком простым и малофункциональным, однако лично меня этот минимализм и подкупил. Указываем значение для каждого угла (или одно общее) и получаем желанный код (WebKit, Gecko, CSS3).

CSS3 Shadows Generator (Box-Shadow)
Добавление тени элементу с использованием следующих параметров: размер (длина тени), цвет, прозрачность, размытие, вид тени (внешняя или внутренняя), сдвиг (по горизонтали и вертикали).

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