Здравствуйте. Я — Ренат Рафиков. Дизайнер веб интерфейсов, фанат веб-технологий и интерактивного дизайна. Я фрилансер, который готов помочь с дизайном, вёрсткой и программированием интерактивных элементов вашего сайта Hello. I'm Renat Rafikov. A web interface designer addictively interested in web technologies and interactive design stuff. I'm a freelancer who can help you with your web site design, HTML+CSS coding and front end programming
Накопители: набор иконок 128, 64 и 32px Data storage devices: 128, 64 and 32px icon set
Lada: набор из
183 иконок 64px
Lada: icon set
of 183 64px icons
Ripple — собирательное название для задач и подзадач. Из таблицы можно узнать, когда прокт начался и когда должен быть завершен
“Ripple” is a name for tasks and subtasks. Table collects information about the beginning and finishing time of the projects
Прямо на странице таблицы можно узнать, сколько файлов и писем принадлежит к выбранной задаче
All inforamtion about files and messages related to the task can be seen right on the table page
Некоторые элементы управления показываются при наведении курсора
Some controls appear on hover
Ширина блоков регулируется. При наведении курсора возникает молния.
Layout can be changed by dragging “zipper” control

Блок с элементами управления всегда находится внизу окна браузера.

При нажатии на кнопку «Create new», возникает меню со ссылками для создания задач, сообщений и всего, что только можно создать.

This block is allways on the bottom of the browser window.

Clicking on the “Create new” button will reveal dropdown menu with links to create tasks, messages and all the necessary stuff.

Таблица графиков выполнения задач
Работа с проектами: файлы, сообщения и т.п.
Poject details: files, mesages etc.
Аналитика. Графики и таблицы
Analitics page. Graphics and tables

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

В качестве главных этапов работы выбраны: анализ, планирование и выполнение.

System gives control over tasks accomplishment, lets team members easily communicate and work with project files.

There are three basic steps: analysis, planning and execution.

ДизайнDesign
ИнтерфейсInterface
ИконкиIcons
← Иконки и пиктограммы для проекта:
анализируй, планируй, выполняй
← Icons for the project
Никос: иконки 128px, изометрия
Nicos: 128px isometric icons
Dumpster Source: 4 вида контейнеров
Dumpster Source: 4 types of dumpsters

Два независимых друг от друга проекта, которые связывает только дата создания и перекликающаяся тематика.

Никос: иконки для страницы «Услуги» сайта украинской компании (128px), а также для ее админки (16px).

Dumpster Source: иконки для сайта компании, сдающей в аренду контейнеры в США.

Two unrelated projects have a couple things in common: date of creation and similarity of the theme.

Nicos: icons for the "Services" page of the ukranian company web site (128px), and 16px icons for its admin panel.

Dumpster Source: icons for the web site of the dumpsters renting company in the US.

ИконкиIcons
Никос: иконки 16px для админки
Nicos: 16px icons for admin panel
Dumpster Source: для каждого вида контейнеров было отрисовано несколько размеров
Dumpster Source: for every type of dumpster different size icons were created
Панель управления
Dashboard
Главная
The main page
Процесс регистрации пользователя
Sign up steps

Он-лайн инструмент созданный для команд, придумывающих, разрабатывающих, поддерживающих и документирующих ПО.

Сервис создан программистами для программистов.

An online collaboration tool geared towards teams designing, developing, maintaining, and documenting software.

Software built by software geeks, for software geeks.

ДизайнDesign
ИнтерфейсInterface
ИконкиIcons
ГрафикаGraphics
Иконки для каждого из преимуществ
Every features has an icon
В знаке логотипа образ воина кода (пикселизированная буква «B», повернутая на 90 градусов напоминает очки) соединен с образом воина-ниндзи (черная маска ниндзя)
Logotype creates an image of the software warrior (letter 'B', rotated 90 degrees looks like glasses) with power of ninja (black ninja mask)
 
Система «брендируется» пользователем, а цветовые схемы оформления позволяют изменить дизайн в соответствии с фирменными цветами компании-клиента
System can be branded by user and color themes allow her to change design according to color scheme of user company's brand
Теперь не нужно переключать таб, чтобы увидеть файлы и команду проекта (как было в прежней версии)
Now there is no need to switch between tabs to see project's files and team, as it was in previous version
После клика выезжает панель с календарем на четыре месяца
After click panel with four-month calendar appears
Иконки названий месяцев отрисованы попиксельно, чтобы ширина групп по четыре месяца всегда была одинаковой
Every month's text icon had to be drawn pixel by pixel to make widths of 4 icons groups equal in any combination
Главная страница системы (по клику галерея страниц проекта)
The main page of the sistem (click to see gallery of the pages)
4 темы из 6 были утверждены
4 color themes of 6 were approved

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

Для четырех цветовых схем подготовлены стили themeroller библиотеки jQuery UI

System allows project teams to work collaboratively. Managers can assign milestones and tasks, collaborators can exchange files and send messages. System users will be able to upload their own logo and to choose color themes

For four themes I provided themeroller jQuery UI styles

ДизайнDesign
ИнтерфейсInterface
ИконкиIcons
Предпочтения заказчика в отношении иконок выяснились не сразу.
В итоге, нарисовал три набора
Client's vision of the icons wasn't clear at first.
So I drew three icon sets
Все иконки проекта собраны в отдельный файл и упорядочены так, чтобы с ними было проще работать при вёрстке
All of the project icons were put together in the psd-file and ordered in the way to make it easier for HTML coder to work with them
Предложил заказчику идею Шкалы времени для задач по проектам. Отправил описание в виде наглядной схемы
I described my idea of the Timeline to the client by sending him this scheme
 
Процесс работы (галерея)
Design process (gallery)
Так было (галерея)
Before (gallery)
Цитаты великих призваны вызывать энтузиазм у пользователей
Quotes from greats should arouse enthusiasm in users
Для полей ввода применено цветовое кодирование:
синий — ввод целей
зеленый — ввод задач
оранжевый — ввод достижений
For input fields color coding is used:
blue — goals input
green — tasks input
orange — achivements input
Подсказки для новичков. При желании, можно спрятать одним кликом
Hints for beginners. Can be hidden in one click
Теперь задачи отображаются на той же странице, что и цели. Нужно просто развернуть цель, кликнув на иконку
Now tasks are displayed at the same page as goals. You only have to click the icon to reveal tasks
Страница поставленных целей и задач
The goals and tasks page
Теперь регистрация происходит прямо на главной странице в один клик
Now users can register right on the main page
Главная страница
The main page
Редактирование поставленных целей и задач происходит в «модальном окне»
A modal window is used for goals and tasks editing

Сервис помогает устанавливать личные цели и задачи, расписывать их по пунктам и вести учет достижений

A web application for setting and tracking personal goals

ДизайнDesign
ИнтерфейсInterface
ИконкиIcons
Сообщения об ошибках и событиях всплывают в верхнем левом углу браузера, где их можно при желании закрыть одним кликом
System messages float in the top right corner of the browser and can be closed in one click


Для кнопок отрисованы все состояния


All states of the buttons were designed
Фавиконка сайта (16px)
The site favicon (16px)
 
Так было (галерея)
Before (gallery)
Описание блока появляется при наведении мыши
Description appears on hover
Версия со стрелками
The meter version
Версия с прогресс-баром
The progress bar version

Виджет устанавливается на финансовых сайтах и показывает три блока с ссылками на самые интересные новости.

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

Widget is to be installed in financial websites and will show links to the most buzzed topics around the web.

To attract attention widget has buzz and mood meters

ДизайнDesign
ИнтерфейсInterface
ГрафикаGraphics
Все состояния для версии с прогресс-баром отрисованы отдельно
All of the states for the progress bar version
Client's variant was like this
Главная страница
The main page
Внутренняя страница
Internal page

Сайт и логотип для компании, заниающейся бизнес-тренингами с использованием настольных игр. Обучение проходит весело и с пользой.

Website and logo design for corporate training business. Learning process includes playing educational boardgame

ДизайнDesign
ИконкиIcons
ГрафикаGraphics
Каждому разделу — по иконке
Every webpage has its icon
Так выглядит настольная игра
Boardgame in life
Выпадающее субменю
Dropdown menu
Фильтр результатов
Results filter
Настройка отображения таблицы
Table view configurator
Скрыть столбец можно кликнув на кнопку, возникающую при наведении мыши
Column can be hidden by clicking on the button which appears on hover
Таблица со списком членов организации
Organisation members list
Главная с блоками-гаджетами
The main page with gadgets
Профиль организации
Organisation profile

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

Все данные могут быть экспортированы и импортированы в различные форматы.

A web-based management system for non-govermental organisations. It allows to communicate, change statuses and send messages.

All data can be exported or imported in different formats

ДизайнDesign
ИнтерфейсInterface
ИконкиIcons

Отрисованы кнопки и иконки для разных случаев

I drew icons for different situations
 
Практически для всех элементов продуманы состояния при наведении мыши
Almost all elements have hover states
Главная страница
The main page
Для всех меню предусмотрены состояния активности
All menus have active state elements designed
Список товаров
Products list
На сайте установлено две jQuery-галереи. На странице товара в галерее может быть неограниченное количество фото
Two jQuery galleries were installed on the website. Ammount of photos in the product page gallery is unlimited
Страница товара
The product page

Заказчик отказался от проекта, даже не увидев первый вариант дизайна. Было решено закончить работу и использовать эту возможность для верстки своего первого макета в HTML5 + CSS3. Сайт был переименован и заменен логотип, но зеленый цвет остался основным

Client left the project without even seeing the first version of the design. I decided to finish the work and to use this posibility to make my first HTML5 + CSS3 website. Site was renamed and logo was changed, but green color remained as the basic color of the design

ДизайнDesign
ИконкиIcons
ВёрсткаHTML+CSS
jQueryjQuery
ГрафикаGraphics
Что, где, когда (слайдшоу на главной)
"What", "where" and "when" (slideshow on the main page)
Графические элементы выполнены в едином стиле
All graphic elements were drawn in the same style
 
Оригинальный сайт, вдохновивший процесс создания дизайна
Original website which inspired the design process
Choco-plate, главная страница
Choco-plate, the main page
Choco-plate, список товаров
Choco-plate, products list

Дизайн двух шаблонов для движка интернет-магазина.

Choco-plate — кондитерская.

Snow temple — товары для зимних видов спорта

Two themes for the e-commerce engine were designed.

Choco-plate — sweet-shop.

Snow temple — winter sports shop

ДизайнDesign
ГрафикаGraphics
Snow temple, главная страница
Snow temple, the main page
Snow temple, список товаров
Snow temple, products list
Пример дизайна с требованиями заказчика
Design example with client's notes