1
37 заметок с меткой сайт
📅 8 июня 2016

Персональный сайт Сергея Канина

kanin.ru

Чтобы передать внушительный опыт и серьёзный подход Сергея Канина, сайт был оформлен в строгом стиле. Также мы позаботились о том, чтобы всё было изложено коротко и ясно. Основные разделы на сайте переключаются без перезагрузки (при нажатии на меню страница скроллится к нужному месту). В нижней части находятся два постоянных блока: форма обратной связи и отзывы клиентов.

  • Знакомство: фото, профессиональный девиз, услугиЗнакомство: фото, профессиональный девиз, услуги

Адаптивный дизайн

Как выглядит сайт на различных устройствахКак выглядит сайт на различных устройствах
📅 26 декабря 2015

Правильная настройка масштаба в браузере Firefox

Если сайты выглядят мелко и нечитаемо, можно настроить экранный масштаб в Винде, а в самом браузере использовать комбинацию клавиш CTRL и +, -, 0 (сброс), или колёсика мыши.

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

Сравнение двух картинокСравнение двух картинок

Если я вставляю на сайт иконку 100×100 пикселей, то и на экране хочу видеть точно такую же, хотя бы на время вёрстки. Уже потом я прогоню тесты и посмотрю сайт в разных браузерах и т.п.

Только текст

Чтобы картинки и элементы интерфейса на сайтах не размазывались, в Фаерфоксе я первым делом ставлю галочку «Только текст»:

Меню › Вид › Масштаб › Только текст

(если меню спряталось, его можно вернуть клавишей ALT)

Теперь любые изменения масштаба коснутся только размера шрифта, а графика сайта останется чёткой. Современные сайты обладают запасом резиновости, чтобы при увеличении шрифта «ничего не поехало».

Отменить системное масштабирование

В новых версиях Фаерфокс (и не только он) научился читать системные настройки и применять их без предупреждения. У меня в Винде стоял масштаб 125%, и сайты «замылились». Вот так можно вернуть масштаб 100%:

about:config (в адресной строке)
layout.css.devPixelsPerPx = 1 (по умолчанию этот параметр равен -1)

Но вместе с этим вкладки, закладки и меню в браузере тоже уменьшатся.

Увеличить интерфейс (вкладки, меню)

Чтобы не ломать глаза, системные меню и шрифты в браузере сделаем крупнее с помощью дополнения:

theme-font-size-changer

После установки его можно найти в Меню › Инструменты. Мои настройки: шрифт Segoe UI (оптимален для интерфейса), размер 19 пикселей (если установить больше, иконки и названия сайтов на вкладках «разъезжаются»).

Экраны с высоким DPI

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

📅 7 декабря 2015

Адаптивная вёрстка для NENCOM

bg.nencom.com

Версии сайта для телефона, планшета и обычного компьютераВерсии сайта для телефона, планшета и обычного компьютера

Разделение версий

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

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

▼ Читать дальше

📅 22 января 2015

Сайт-визитка ТранзитФишМаркет

tfmarket.ru

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

  • О насО нас

В конце страницы (под Контактами) находится форма обратной связи.

📅 31 октября 2014

Сайт Братьев Бондаренко

bbondarenko.ru

Новая версия сайта Братьев Бондаренко выгодно отличается от предыдущей. Теперь на первом плане — фотографии, музыка, видео. Полезное пространство экрана используется на полную.

  • Главная страница: большая фотка и предложение запустить демо-роликГлавная страница: большая фотка и предложение запустить демо-ролик

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

Фишка сайта — постоянный плеер в нижней части:

Плеер работает на любом устройствеПлеер работает на любом устройстве

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

📅 9 апреля 2014

Feralit: сайт под Яндекс.Директ

feralit.ru

Сайт для компании «Фералит» был сделан с целью мгновенного привлечения клиентов. Цель была достигнута. По словам заказчика, включение данного сайта в Яндекс.Директ на один день обеспечивает его заказами на несколько недель.

Главная и единственная страницаГлавная и единственная страница

Секрет сайта — в его простоте. Посетитель за 3 секунды понимает, что попал именно туда, куда нужно. Это достигается за счёт крупного заголовка в верхней части сайта и полноэкранной галереи (на любом мониторе занимает всю высоту). Чуть ниже перечислены фишки компании. А дальше вариантов у посетителя немного: на странице всего четыре активные области, которые не уводят от основного экрана. Остаётся только позвонить, а по телефону гораздо проще вникнуть в задачу клиента и сделать так, чтобы он не ушёл.

Основная галерея содержит около 10 фотографий, отражающих основные виды деятельности. Дополнительные фотографии скрываются за кнопкой «Ещё».

  • Кликабельные области сайтаКликабельные области сайта

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

📅 10 ноября 2013

Проект NENCOM

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

Для проекта созданы логотип, сайт и визитки.

Логотип

Логотип намекает на высокие технологииЛоготип намекает на высокие технологии
Брендированный автомобильБрендированный автомобиль

Сайт

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

nencom.com

Главная страница русской версииГлавная страница русской версии

CMS самописная, доработана с учётом пожеланий заказчика. Управление разделами, синхронизация разделов RU и BG, загрузка картинок — всё интуитивно понятно и просто в управлении.

Визитки

Квадратная визитка не затеряется среди прочих:

Скруглённые уголки — Like!Скруглённые уголки — Like!
📅 22 сентября 2012

Сайт ОБАРИ-Россия

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

Международная версия сайта — oubari-group.com — довольно своеобразна и не отвечает современным требованиям, именно поэтому для России было принято решение сделать отдельный сайт.

oubari-russia.ru

Главная страницаГлавная страница

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

▼ Читать дальше

📅 23 августа 2012

Фитнес в Марфино v.2

К новому сезону обновился фирменный стиль фитнес-зала в нашем районе.

fitnes-marfino.ru

Главная и единственная страницаГлавная и единственная страница

В основе нового стиля — фотосессия, иллюстрирующая фитнес-направления. Нужно было лишь аккуратно всё оформить и показать.

Функционал сайта остался таким же, как в первой версии. Добавились только видеоролики.

▼ Читать дальше

📅 13 апреля 2012

Сайт huberits.ru

Нужно было сделать сайт, представляющий фирму M.Huber I.T.S. GmbH в России, сохранив фирменный стиль и улучшив вёрстку оригинального сайта.

Обязательные условия: ЧПУ, универсальность, красивый и читабельный вид на всех разрешениях от 1024 до 1920, отсутствие горизонтальной полосы прокрутки — в общем, стандартный джентельменский набор для современного сайта.

huberits.ru

Страница продукцииСтраница продукции

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

Вид сайта на разных экранахВид сайта на разных экранах

▼ Читать дальше

📅 13 марта 2012

Транспортная компания GPFT

gpft.ru

Небольшой сайт для транспортной комании GP FreightTruck:

Главная страница сайтаГлавная страница сайта

Сайт будет развиваться, а пока его можно рассматривать как сайт-визитку. Дизайн нарисовала знакомая девушка, а я выполнил вёрстку, доработку мелочей (кнопочки, фавикон, стили) и подключение сайта к своей CMS.

▼ Читать дальше

📅 10 марта 2012

Фитнес в Марфино

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

Сайт

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

fitnes-marfino.ru

— тем более, что в нашем районе нет других фитнес-залов.

Главная и единственная страница сайтаГлавная и единственная страница сайта

▼ Читать дальше

📅 26 ноября 2011

Эко-упаковка от EKOFRIEND

ekofriend.com

На сайте можно заказать красивую экологически чистую упаковку (пакеты, корзиночки, коробочки). Дизайн хорошо передаёт эко-направленность:

Главная страницаГлавная страница

Мною выполнены вёрстка, дорисовка недостающих элементов и программирование.

▼ Читать дальше

📅 19 октября 2011

Интернет-магазин одежды cs-fashion.ru

cs-fashion.ru

Завершил разработку миниоптового интернет-магазина cs-fashion.ru:

На главной странице — флешка и каталогНа главной странице — флешка и каталог

По различным причинам эта работа затянулась почти на год. Восхищаюсь бесконечным терпением заказчицы 😃

▼ Читать дальше

📅 11 сентября 2011

Rainbowproduction Co. (v.2)

rainbowproduction.ru

Закончил переделку старого сайта Rainbowproduction&Co.:

Главная страница Rainbowproduction.ruГлавная страница Rainbowproduction.ru

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

▼ Читать дальше

📅 3 сентября 2011

Рукодельницы

рукодельницы.рф

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

Главная страницаГлавная страница

Сайт работает на движке PHPshop — устаревшем, но зато недорогом. Для небольшого интернет-магазина вполне подходит, а недостающие функции можно дописать самому.

▼ Читать дальше

📅 5 июня 2011

Сайт грузоперевозок «МК-Лидер»

mk-lider.ru

Главная страницаГлавная страница

▼ Читать дальше

📅 22 апреля 2011

Сайт VODALUX’а

vodalux.ru

На сайте представлены основные подразделения компании. Каждая кнопка слева ведёт либо на галерею, либо на нужный адрес. Галерея — это «разбросанные» фотки, которые увеличиваются при наведении.

Основной сайт компании VODALUXОсновной сайт компании VODALUX

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

© Дизайн не мой (я просто разверстал и использовал яву-скрипт 😃

📅 27 марта 2011

Интернет-магазин «Ранфорс»

ranforce.ru

Интернет-магазин постельного белья «Ранфорс.ру» создан на движке PHPShop. Наполняется заказчиком (были проведены многочасовые беседы по работе с этим движком и вообще с сайтом).

Главная страницаГлавная страница

▼ Читать дальше

📅 3 февраля 2011

Сайт «Финэксперта»

fnxp.ru

Простой и аккуратный семистраничный сайт-визитка:

Сайт «Финэксперта»Сайт «Финэксперта»
📅 16 декабря 2010

Сайт и форум «Строгинет»

strogi.net

Главная достопримечательность нового дизайна — это пиксельный рисунок района Строгино:

Главная страница портала «Строгинет»Главная страница портала «Строгинет»

▼ Читать дальше

📅 7 октября 2010

Сайт «Автодетей»

avtodeti.ru

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

С компанией «Автодети» я сотрудничаю с момента её зарождения. За 5 лет сайт повзрослел, появились новые сервисы, разделы, акции, увеличился выбор товара, и в 2010 мы провели необходимый редизайн. Были решены 3 задачи на упрощение: навигация по сайту, подача материалов и процесс выбора товара.

Сайт Автодетей, 2010

▼ Читать дальше

📅 5 октября 2010

Центр обслуживания ИП в «Гудвиле»

6433436.ru

Сайт-визитка (10 страниц) для компании «Гудвил», которая решила подчеркнуть свои услуги по обслуживанию ИП:

Главная страница: кто мы и что мы 😃Главная страница: кто мы и что мы 😃

▼ Читать дальше

📅 8 мая 2010

Сайт для посёлка «Вишенка»

vishenka.info

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

Сайт для посёлка «Вишенка»Сайт для посёлка «Вишенка»

▼ Читать дальше

📅 4 ноября 2009

Химические реактивы

Простой одностраничный сайт:

На главной и единственной странице перечислено всё, что нужноНа главной и единственной странице перечислено всё, что нужно

▼ Читать дальше

📅 31 марта 2009

Сайт компании «Гудвил» v.2

gdwl.ru

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

Главная страница: о компании, услуги (кратко) и онлайн-заявкаГлавная страница: о компании, услуги (кратко) и онлайн-заявка

▼ Читать дальше

📅 17 февраля 2009

Сайт по ремонту квартир

Сделал сайт по дизайну интерьеров, ремонту квартир и офисов.

invest-s.ru

Девушка-консультант — настоящаяДевушка-консультант — настоящая

Шапка сайта сделана на флеше (день-ночь, огонь в камине).

  • Квартира с видом на Москва-рекуКвартира с видом на Москва-реку
📅 30 июня 2008

Сайт RG-Hotels

rg-hotels.ru

Компания «RG-Hotels» выполняет услуги генерального подрядчика на проектирование, дизайн, реконструкцию гостиниц, домов отдыха и пр. Для представления компании создан шестистраничный сайт-визитка:

На главной — приветственный текст и компании-партнёрыНа главной — приветственный текст и компании-партнёры

▼ Читать дальше

📅 25 июня 2008

Сайт компании «Гудвил»

gdwl.ru

Цветастый логотип полностью определил направление дизайна будущего сайта:

Главная страница: О компанииГлавная страница: О компании
Страница услуг и цен оформлена жизнерадостноСтраница услуг и цен оформлена жизнерадостно

▼ Читать дальше

📅 25 мая 2008

Rainbowproduction.ru

rainbowproduction.ru

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

Главная страницаГлавная страница

▼ Читать дальше

📅 29 марта 2008

Сайт «Диаклаба»

diaclub.ru

Сайт «Диаклаба»Сайт «Диаклаба»

▼ Читать дальше

📅 22 февраля 2008

XuMuK.ru

xumuk.ru

Мой знакомый решил сделать редизайн своего сайта. За основу мы взяли красненький шестиугольник (бензол). Это эффектный символ, который удалось хорошо обыграть.

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

Сайт XuMuK.ruСайт XuMuK.ru

▼ Читать дальше

📅 30 января 2008

Сайт «Правотека.ру»

pravoteka.ru

«Правотека» полезна для практикующих юристов, консультантов, студентов, а также для тех, кто хочет получить юридическую консультацию на форуме.

Главная страницаГлавная страница
Сервис поиска статейСервис поиска статей
📅 18 декабря 2006

Сайт продюсерского центра

Сайт продюсерского центра «PRO Production» нужно было сделать в трёх основных цветах: чёрном, белом и красном. Для усиления этого эффекта большинство картинок на сайте становятся цветными только при наведении курсора мыши.

Главная страницаГлавная страница

▼ Читать дальше

📅 20 сентября 2005

Сайт Лизон.ру

Сайт был задуман как подарок на день рождения девушке заказчика. Все работы (в том числе сканирование и ретушь сотни фотографий) заняли 2,5 дня.

Входная страница — любимый автомобиль Ауди ТТВходная страница — любимый автомобиль Ауди ТТ

Нажимаешь на рычаг переключения скоростей — попадаешь на главную:

Главная страницаГлавная страница

▼ Читать дальше

📅 4 мая 2005

Всё для «Первой студии развлечений»

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

Старый логотип студииСтарый логотип студии

▼ Читать дальше

📅 16 августа 2003

Сайт «Астрон Электроники»

Это мой первый сайт, сделанный на заказ:

Главная страница сразу вводит в курс дела о фирмеГлавная страница сразу вводит в курс дела о фирме

Входная страница со светодиодным мигающим логотипом:

Нажмите на логотип для входа на сайтНажмите на логотип для входа на сайт

▼ Читать дальше

Иван ТитовИван Титов
Веб-дизайнер,
разработчик
★ Москва
© 2004 – 2019