38 заметок с меткой сайт

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

kanin.ru

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

  • 1
  • 2
  • 3
  • След. →
  • Знакомство: фото, профессиональный девиз, основные услугиЗнакомство: фото, профессиональный девиз, основные услуги
    Информация подана структурированно и наглядноИнформация подана структурированно и наглядно
    Каждый тренинг представлен понятной картинкойКаждый тренинг представлен понятной картинкой

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

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

Правильная настройка масштаба в браузере 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 — чтобы чётко понимать, что происходит с размерами блоков.

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

bg.nencom.com

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

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

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

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

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

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

tfmarket.ru

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

  • 1
  • 2
  • След. →
  • О насО нас
    ПродукцияПродукция

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

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

bbondarenko.ru

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • След. →
  • Главная страница: большая фотка и предложение запустить демо-роликГлавная страница: большая фотка и предложение запустить демо-ролик
    Новости: отмечается время и телеканал выступленияНовости: отмечается время и телеканал выступления
    Фотогалерея: превьюшки занимают всю высотуФотогалерея: превьюшки занимают всю высоту
    На сером фоне нотки: приятная мелочьНа сером фоне нотки: приятная мелочь
    Видео: превьюшки занимают всю ширинуВидео: превьюшки занимают всю ширину
    Биография: здесь намёк на журналБиография: здесь намёк на журнал
    Контакты оформлены очень скромно :)Контакты оформлены очень скромно :)

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

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

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

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

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

feralit.ru

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

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

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

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

  • 1
  • 2
  • 3
  • След. →
  • Кликабельные области сайтаКликабельные области сайта
    Дополнительные фотки во всплывающем окнеДополнительные фотки во всплывающем окне
    Схема проезда во всплывающем окнеСхема проезда во всплывающем окне

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

Проект NENCOM

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

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

Логотип

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

Сайт

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

nencom.com

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

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

Визитки

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

Скруглённые уголки — Like!Скруглённые уголки — Like!

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

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

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

oubari-russia.ru

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

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

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

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

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

fitnes-marfino.ru

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

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

Функционал сайта остался таким же, как в первой версии. Добавились только видеоролики, например, fitnes-marfino.ru/#fitnesmix.

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

Что разместить на главной странице

При разработке бета-версии своего сайта столкнулся с обычным вопросом:
что «делать» с главной страницей?

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

Однако я пошёл ошибочным путём. Разбил портфолио на категории, нарисовал картинки:

Сайты и сервисы
Сайты и сервисы
Флеш и Яваскрипт
Флеш и Яваскрипт
Полиграфия
Полиграфия
Подарки
Подарки
Музыка
Музыка

... и вдобавок разбил каждую категорию ещё на 10-15 пунктов.

Кто-то скажет, что это прикольно или интересно, но есть серьёзные недостатки:
1) Посетитель должен изучать новую для него структуру — а с какой целью?
2) Требуется 2-3 клика, чтобы попасть на страницу какой-то отдельной работы.

Значками я как бы всего лишь сообщаю: «Вот, какие картинки я умею рисовать» (кстати, где гарантия, что они не краденые?).

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

Сайт huberits.ru

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

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

huberits.ru

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

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

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

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

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

gpft.ru

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

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

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

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

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

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

Сайт

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

fitnes-marfino.ru

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

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

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

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

ekofriend.com

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

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

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

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

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

cs-fashion.ru

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

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

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

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

Rainbowproduction Co. (v.2)

rainbowproduction.ru

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

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

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

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

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

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

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

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

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

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

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

mk-lider.ru

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

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

Сайт VODALUX’а

vodalux.ru

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

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

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

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

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

ranforce.ru

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

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

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

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

fnxp.ru

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

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

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

strogi.net

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

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

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

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

avtodeti.ru

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

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

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

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

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

6433436.ru

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

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

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

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

vishenka.info

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

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

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

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

посмотреть в архиве

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

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

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

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

gdwl.ru

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

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

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

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

Сделал сайт по дизайну интерьеров, ремонту квартир и офисов. С галереей работ и «шапкой» на пол-экрана.

invest-s.ru

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

Шапка сайта сделана на флеше, с анимацией «день-ночь» и живым огнём в камине:

  • 1
  • 2
  • След. →
  • Квартирка с видом на Москва-рекуКвартирка с видом на Москва-реку
    День сменяется ночью, зажигаются бра...День сменяется ночью, зажигаются бра...

Сайт RG-Hotels

rg-hotels.ru

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

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

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

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

gdwl.ru

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

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

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

Rainbowproduction.ru

rainbowproduction.ru

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

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

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

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

diaclub.ru

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

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

XuMuK.ru

xumuk.ru

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

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

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

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

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

pravoteka.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

посмотреть в архиве

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

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

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

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

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

Иван ТитовИван Титов
Фрилансер, музыкант, физтех по жизни, семьянин, философ.
© 2004...2017