Pull to refresh
16
0
Максим Целикин @mas1k

UI/UX-дизайнер

Send message

Подборка инструментов для эффективной frontend разработки

Reading time3 min
Views101K
В эту прекрасную пятницу осмелюсь предложить хабрасообществую небольшую подборку приложений, предназначенных для увеличения продуктивности во время работы с фронтэндом. Если ваш любимый апп здесь не представлен — добро пожаловать в комментарии!

Form Builder

image

Этот прекрасный генератор форм поможет вам в создании красивейших CSS логин-боксов и прочих input вещей, при минимальных временных затратах. Помимо форм на сайте этого проекта можно создавать и другие не менее красивые CSS элементы, в том числе кнопки и ленты.
еще 24 ссылки
Total votes 204: ↑197 and ↓7+190
Comments46

Кастомизация социальных кнопок

Reading time3 min
Views45K
Многие из нас так или иначе сталкивались с проблемой кастомизации кнопок соцсетей, а многие ещё столкнутся. Недавно нам на Sports.ru пришлось решать задачу, как не только настроить внешний вид «лайков», но и разместить на одной странице сразу несколько блоков социальных кнопок, относящихся к разным текстовым блокам.

В этом топике мы расскажем, как решили эту проблему в своем спецпроекте (осторожно, он рекламный), и поделимся готовым и, что немаловажно, достаточно гибким решением.

Читать дальше →
Total votes 30: ↑29 and ↓1+28
Comments27

Элементарные социальные share-кнопки

Reading time3 min
Views194K
В ответ на посты о кнопках для шаринга в социальных сетях с громоздким исходным кодом, и сложной детальной кастомизацией, хочу показать хабрасообществу решение которое однажды написал неизвестный, но однозначно добрый программист. Автор сего чуда не я, но использую это решение уже больше года в проектах с которыми работаю.
Читать дальше →
Total votes 78: ↑68 and ↓10+58
Comments58

CSS/JS библиотека в стиле Metro, совместимая с Twitter Bootstrap

Reading time1 min
Views26K
Не так давно я писал на хабре о Bootmetro — дизайне Twitter Bootstrap в стиле Windows 8. Эта разработка хороша идеей, но на практике все работает очень коряво. К счастью, есть качественно сделанный аналог от Ace Subido — CSS3 Microsoft Metro Buttons.



По сути это набор стилей для кнопок и форм, который можно использовать вместе с Twitter Bootstrap.
Читать дальше →
Total votes 63: ↑53 and ↓10+43
Comments12

DevBar — питейное заведение для работников IT-индустрии и не только (Петербург)

Reading time4 min
Views3.6K
Добрый день, господа и дамы.

Долгое время мы с партнером вынашивали идею организации бара, ориентированного на IT-специалистов.


Читать дальше →
Total votes 153: ↑142 and ↓11+131
Comments325

Стартап на миллион долларов

Reading time1 min
Views5.9K

Все российские стартапы дружно ругают российских посевных инвесторов за то, что они жадные и на посеве хотят забрать себе сразу большую долю. Хорошо, давайте сделаем резкий шаг. Мы готовы инвестировать в ваш стартап по оценке в миллион долларов, 2 месяца готовить вас в Москве, потом отправить на программу акселерации в Кремниевую Долину. Что на это скажете? Plug and Play в Москве.
Total votes 27: ↑15 and ↓12+3
Comments34

Пять интересных эффектов при наведении с использованием нескольких фоновых изображений

Reading time6 min
Views22K
Сегодня мы рассмотрим все преимущества использования множественных фонов. Изучим базовые основы и создадим крутые эффекты при наведении с помощью CSS свойств hover и transition.

Ниже приведены пять различных примеров, которыми вы можете воспользоваться для создания собственных удивительных эффектов.

Что должно получиться


Посмотрим на то, что должно получиться в итоге. Подумайте, как можно реализовать эти эффекты чисто на одном CSS.

Демонстрация



Читать дальше →
Total votes 79: ↑74 and ↓5+69
Comments32

Ищем идеальную службу доставки для интернет-магазина

Reading time3 min
Views57K
Почтальон Печкин окончательно проиграл.
Вы используете для доставки заказов из интернет-магазина Почту России? Это зря.

Посмотрим. Какую службу доставки можно нанять за сопоставимые деньги? Имеем:
  1. Склад в Петербурге
  2. 80% покупателей – в Москве и Петербурге.
  3. Средний вес посылки –1кг

Читать дальше →
Total votes 9: ↑7 and ↓2+5
Comments27

Свежее сено от коровы, или 3000 иконок подано!

Reading time2 min
Views4.6K
После выпуска 2000 иконок FatCow прошло более года. Пошел четвертый год рисования. Страницу посетило 560,096 (288,511+235,221+36,364) посетителей. Чтобы дойти до 3500 иконок, работы хватит до февраля 2013 года. Если добавить размер 64x64, то до середины 2015-го года. Пока вложено $76778 и 2000 часов работы. Тут выложили 3000 иконок, за неделю до выпуска на официальном сайте, ибо владельцы коровы (Bluehost) заняты покупкой крокодила (HostGator).

image

Чтобы понять, какой набор иконок самый уникальный в мире, пришлось рассортировать 7422 иконок. Результат не подвел…

Читать дальше →
Total votes 145: ↑134 and ↓11+123
Comments55

Разработка сайтов с адаптивным дизайном

Reading time5 min
Views4.7K
Перевод статьи “Responsive workflow” финского веб-дизайнера и разработчика Вильями Салминена (Viljami Salminen).

На прошлой неделе я был на конференции Webshaped, где Стивен Хэй (Stephen Hay) рассказывал о процессе разработки адаптивного дизайна. Этот пост не совсем о том же самом, но подход Стивена напомнил мне мой собственный, поэтому я решил изложить некоторые мысли по этому поводу, описать как моя работа эволюционировала за прошедшие два или три года и как может измениться в будущем.

Читать дальше →
Total votes 40: ↑37 and ↓3+34
Comments11

Создаем сайт с эффектом Parallax, используя Stellar.js

Reading time7 min
Views85K
Один из самых популярных трендов современного веб-дизайна является эффект Parallax. В этом туториале я покажу вам, как создать подобный эффект на вашем веб-сайте, используя воображение и Stellar.js.



Скачать исходники | Демо
Читать дальше →
Total votes 51: ↑41 and ↓10+31
Comments23

Методы оценки стартапа

Reading time4 min
Views29K
Стартапы — тренд популярный не только в IT-среде… Уже более 10 лет наблюдается бум стартапов, не снижающийся, не смотря на рискованность этого вида инвестиций.
Авторы проектов, впрочем, как и ряд инвесторов, порой не обладают элементарными экономическими и управленческими знаниями, отсутствие которых мешает нормальному диалогу Стартапер — Инвестор.
Мы бы хотели поделится нашим опытом инвестирования и менторства стартапов в серии аналитических статей, призванных помочь в оценке экономического потенциала стартапа, а также его целевой аудитории.
Серия статей — необычный опыт коллективной работы людей, знакомых заочно, но заинтересованных данной темой.
Данная статья является лишь малой частью того, что нужно знать стартаперу о финансовой оценке своего стартапа.

Для чего нужна оценка стартапа.

Вопрос денежной оценки стартапа волнует обе стороны процесса венчурного финансирования. Автору проекта, равно, как и инвестору, важно оценить текущую стоимость проекта и его ожидаемую рыночную цену и капитализацию проекта.
Стоимость самой идеи (если она не является оформленной интеллектуальной собственностью в виде патента, авторского свидетельства, лицензии и т.д.) принимается равной нулю. Оценке подлежит только творческий потенциал автора/команды и предпринимательская инициатива.
Авторам и инвесторам важнее оценить промежуточную (на стадиях подключения к проекту следующей ступени инвестирования) и конечную стоимость проекта, то есть при выходе из проекта инвесторов текущей стадии и входе инвесторов следующей.
Об этом и написана данная заметка.
Читать дальше →
Total votes 3: ↑3 and ↓0+3
Comments6

Underconstruct.me — для тех, кто в разработке

Reading time4 min
Views2.4K
Привет, хабрасообщество!

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

imageИ конечно же перед многими вставала одна и та же проблема — проект еще не сделан, но хотелось бы уже начать собирать емейлы заинтересованных пользователей. Мы попытались сделать сервис, который удовлетворял бы такую потребность — Underconstruct.me
Читать дальше →
Total votes 30: ↑23 and ↓7+16
Comments47

LaunchRock: сервис рассылки инвайтов

Reading time6 min
Views1.6K
О том, что взаимодействие с пользователями будущего продукта надо начинать еще до официального запуска, говорят многие ИТ предприниматели. Особенно те, кто уже перешел свой Рубикон и получил опыт запуска. Этот совет можно найти в уйме книг, статей и блогов, но к нему очень редко прислушиваются.

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

Аксиома — чем раньше вы расскажете людям о грядущей реализации своей идеи, тем раньше сможете решить сразу несколько важных задач:
  • Протестировать жизнеспособность самой идеи. Возможно, даже до того, как написана первая строка кода. Представте, сколько денег и бессонных ночей можно сэкономить, если заранее понять, что “гениальная” идея попросту никого не цепляет.
  • “Разогреть” аудиторию, которая к моменту запуска уже начнет понимать, что за проблемы решает продукт.
  • Привлечь первых пользователей. Они послужат фундаментом и, за счет эффекта “сарафанного радио”, ускорят распространение идеи.
  • Испытать собственное приложение под нагрузкой. И избежать тем самым необходимости тестирования на первых покупателях. Публичное бета тестирование это честный способ предупредить людей о возможных ошибках и не вываливать весь ворох на ничего не подозревающих клиентов, которые думают, что покупают зрелый продукт. Береги честь смолоду!


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

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

Требование к инструменту организации всего процесса одно — он должен быть очень простым и легким в развертывании. Необходимость в подобных мероприятиях возникает в двух случаях. Либо когда продукт уже написан, вся команда находится в запарке и ни на что нет времени. Либо, когда, как указывалось ранее, продукт существует еще только в голове: есть задача понять нужен ли он вообще кому-нибудь.

Читать дальше →
Total votes 12: ↑6 and ↓60
Comments9

Hojoki.com — организация информационных потоков для разработчиков и не только…

Reading time1 min
Views2.4K
Сегодня наткнулся на замечательный сервис и до сих пор нахожусь от него под впечатлением…



Все очень просто. Счастье происходит в 3 шага:
Читать дальше →
Total votes 39: ↑27 and ↓12+15
Comments8

62 полезных инструмента для адаптивного дизайна (Responsive web design)

Reading time14 min
Views203K
UPD. Для краткого введения в адаптивный дизайн рекомендую прочитать статью «Как сделать один сайт для всех устройств (Responsive Web Design)».

Перевод крайне ценной статьи «Responsive Web Design Techniques, Tools and Design Strategies» популярного интернет-издания для разработчиков Smashing Magazine.

Еще в январе мы опубликовали статью об адаптивном дизайне «Responsive Web Design: What It Is and How To Use It» (Адаптивный веб-дизайн: Что это такое и как им пользоваться). Адаптивный веб-дизайн продолжает привлекать к себе много внимания, но, учитывая, насколько он отличается от традиционных методов разработки сайтов, он может показаться заоблачно сложным для тех дизайнеров и разработчиков, которые его не пробовали.

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

Техники Responsive web design


1. CSS Transitions and Media Queries
CSS Transitions и Media Queries

Elliot Jay Stocks подробно рассказывает о методе сочетания CSS Media Queries и CSS transitions. Основная идея в следующем: разрабатывая адаптивный сайт с помощью Media Queries, вы постоянно изменяете ширину вашего браузера, чтобы посмотреть, как сайт ведет себя при этом. Но каждый раз, когда отрабатывает один из ваших Media Queries, виден жесткий переход между стилями (первый, например, для десктопов, второй — для планшетов). Почему бы не использовать CSS transitions для сглаживания этих жестких переходов с помощью анимации?



Читать дальше →
Total votes 112: ↑107 and ↓5+102
Comments14

RE: Иконки популярных в рунете сервисов

Reading time1 min
Views63K
Вот смотрю как товарищ grokru выложил свое творчество и прямо вдохновляюсь. И поскольку мне было скучно, я решил тоже вспомнить былое и наштампить иконок. Заняло все это порядка 18-20 минут.



Попробовал себя в народном творчестве так сказать. Может совместно создадим habrapack?

Архив с .PSD и .PNG
Читать дальше →
Total votes 148: ↑108 and ↓40+68
Comments152

Компоненты интерфейса Safari и IE7 в .psd

Reading time1 min
Views1.9K
Решил поделиться файликом, который я использую каждый раз, когда рисую макет или проектирую интерфейс.
Экономит мне кучу времени.

13.30 КБ

Скачать архив с пээсдэшником (49 kb)

UPD:
Ссылка от saltommeister
Контролы для Эксплорера, Файрфокса, Оперы и Сафари

Ссылка от niker
designerstoolbox.com/designresources/elements/

Ссылка от fatal
456bereastreet.com/archive/200409/styling_form_controls/

Ссылка от AlmeZ
Free Photoshop browser templates for webdesigners and screendesigners

Ссылка от 3fonov
Yahoo Design Stencil Kit
Total votes 148: ↑134 and ↓14+120
Comments56

Subtle Patterns: фоновые текстуры для вашего сайта

Reading time1 min
Views72K
Если вы запускаете новый сайт и заканчиваете его оформление, то есть смысл посмотреть коллекцию Subtle Patterns: отлично оформленную коллекцию фоновых текстур (паттернов) под лицензией Creative Commons Attribution 3.0 Unported. Их можно использовать без ограничений.



Сайт привлекает удобным предварительным просмотром: каждую текстуру можно мгновенно применить на всей странице в качестве фона. Сейчас там 93 работы, коллекция еженедельно пополняется отличными новинками.

Все текстуры на сайте Subtle Patterns являются повторяющимися, то есть склеиваются в бесшовную заливку.
Читать дальше →
Total votes 262: ↑247 and ↓15+232
Comments29

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Registered
Activity