Дизайн-Бюро. Наш новый сайт
Привет! Вы, наверное, уже забыли о моем существовании. Ну еще бы, пятый год молчания. Так вот, я все еще живой и вернулся, и теперь это будет блог о дизайне.
Те, кто знают меня лично, в курсе, что по профессии я графический дизайнер. Много лет работал на журфаке МГУ, потом в разных конторах. Году эдак в 2007 мне окончательно надоело работать на дядю, и я ушел на фриланс. Фриланс рос-рос, да и вырос в небольшое дело. По странному стечению обстоятельств тот же путь - от журфака до фриланса - проделала моя жена Женя. Вместе мы делаем графический дизайн и коммерческую фотосъемку.
Сегодня мы запускаем сайт и объявляем об открытии нашего дизайн-бюро, которое так и называется:
Чтобы этот пост не выглядел совсем уж рекламным, расскажу пару слов о нашем сайте, как он устроен и почему так выглядит.
Сделайте мне так же. Когда вам нужно что-то купить, вы приходите в интернет-магазин. Вы читаете описание, смотрите фотки, отзывы, и наконец кладете товар в корзину. Вы это делаете естественным и удобным образом, ведь хорошо устроенный интернет-магазин (как, впрочем, и магазин обыкновенный) как бы берет клиента за руку и проводит от главной страницы (витрины) до покупки.
Вам нужен дизайн, и вы приходите на сайт студии дизайна. Вы видите портфолио с рассказом о том, какие замечательные проекты они реализовали - и вообще, какие они молодцы. И на этом, собственно, все: сайты даже лучших студий преисполнены самолюбования и не очень-то спешат делать удобно клиентам. Если повезет - в углу будет форма обратной связи, которая предложит вам (потенциальному заказчику) в письменной форме изложить, по какому поводу вы беспокоите господ дизайнеров.
У нас все не так :-) Во-первых, на каждой странице, на самом видном месте - ссылка на форму заказа, вот такая:
Эта форма задает небольшое количество простых вопросов, позволяющих нам и вам определить тему для предметного разговора и составления технического задания. То есть по сути это традиционный запрос коммерческого предложения, но с человеческим лицом.
Во-вторых, и это самое главное, около каждого проекта есть кнопка «Сделайте мне так же». С ее помощью можно отложить любой наш проект для примера, и он автоматически добавится к запросу. Почти как в интернет-магазине.
Что это дает? С одной стороны, я давно заметил, что люди ищут в моем портфолио проекты, похожие на то, что нужно им самим. Ну очевидно - раз этот чувак такое уже делал, то и для меня сделать сможет. С другой стороны, все дизайнеры (и я в том числе) радуются как дети, когда заказчик показывает примеры: только так можно понять его вкус и настроиться с ним на одну волну.
Итак, смотрим портфолио > выбираем работы > делаем запрос с примерами. Идея лежит на поверхности, но, кажется, мы первые, кто сделал из этого работающий сервис.
Пока на сайте где-то четверть наших проектов, и часть из них - это стабы, то есть мы к ним еще добавим текст и иллюстрации.
Адаптивный макет. Интернет-трафик с мобильных устройств (смартфоны и планшеты) скоро превысит трафик с компьютеров. В этом сходятся все аналитики, разнятся только оценки того, когда именно это произойдет: в этом году или еще через пару лет.
Тем временем веб-дизайн прочно застрял в нулевых годах: абсолютное большинство сайтов сделано для больших экранов, а отдельные версии для мобильных устройств могут позволить себе только монстры вроде Яндекса или Ленты.Ру.
Наш сайт одним из первых в рунете сделан на адаптивном макете - это значит, что одна и та же версия сайта работает и на смартфоне, и на планшете, и на большом экране. Если вы на компьютере, подвигайте окно с нашим сайтом в ширину и посмотрите, как меняется макет. Я уже два месяца наиграться в это не могу :)
Узкие версии сайта адаптированы под тач-устройства: крупные шрифты в меню, селектбоксы с барабанной прокруткой.
Кстати, модульная сетка позволяет в будущем адаптировать сайт под любую ширину экрана, от промежуточных (в планах добавить макет для 480 точек) до сверхшироких, больше 2000 точек. Но уже сегодня он отлично смотрится на винтажном телевизоре:
Честно говоря, я не могу представить, что еще должны изобрести в способах вывода информации, чтобы этот сайт устарел.
Ретина. Другая перспективная фишка - адаптация под ретина-дисплеи. Технология ретина, или HiDPI - это дисплеи с двойной плотностью точек. Каждый обычный пиксель на таком дисплее состоит из четырех, что делает сами точки неразличимыми для глаза, а изображение на экране - сравнимым по качеству с журнальным. Чтобы сайт использовал возможности ретина-дисплея, вся графика для него должна быть отрисована в двух размерах - обычном и двойном. Например, размер юзерпиков в жж - 100×100 точек. Ретина-юзерпики были бы 200×200 точек, и при этом их физический размер (в мм) на экране остался бы таким же.
Наглядный пример. Слева обычный экран, справа ретина. Обычный сайт на всех экранах выглядит обычным, то есть так, как слева:
Почти все современные смартфоны и большая часть планшетов оснащены ретина-дисплеями, а в прошлом году появились и первые ноутбуки. Такими темпами через несколько лет обычные дисплеи останутся только у нищебродов, а тем временем ретина-сайтов еще меньше, чем адаптивных, и сайт Дизайн-Бюро - один из них.
Конечно, пока ретина - эдакая вишенка на торте, но до чего же приятно смотреть картинки на таком экране. Они настолько четкие, что об них можно порезаться. Все остальные сайты после этого выглядят, как будто их облили пивом.
На нашем сайте вы можете увидеть реализованные в Дизайн-Бюро проекты и почитать их описание. Здесь же, в своем жж, я главным образом буду рассказывать о том, как мы работаем. Как мы приходим к тому или иному решению и почему результат получается именно таким. Я покажу рабочие варианты, покажу разные мелочи, на которые никто никогда не обращает внимания, но без которых все выглядит неряшливо и по-китайски.
Самое же главное - я буду рассказывать о том, как все устроено. Постараюсь показать секретный механизм, делающий из кучи симпатичных финтифлюшек работающий дизайн. Никуда не переключайтесь, будет интересно!
Следующий рассказ - о том, как мы делали книгу «Битва за эффективность».
Дизайн-Бюро |
Facebook |
ВКонтакте
Те, кто знают меня лично, в курсе, что по профессии я графический дизайнер. Много лет работал на журфаке МГУ, потом в разных конторах. Году эдак в 2007 мне окончательно надоело работать на дядю, и я ушел на фриланс. Фриланс рос-рос, да и вырос в небольшое дело. По странному стечению обстоятельств тот же путь - от журфака до фриланса - проделала моя жена Женя. Вместе мы делаем графический дизайн и коммерческую фотосъемку.
Сегодня мы запускаем сайт и объявляем об открытии нашего дизайн-бюро, которое так и называется:
Чтобы этот пост не выглядел совсем уж рекламным, расскажу пару слов о нашем сайте, как он устроен и почему так выглядит.
Сделайте мне так же. Когда вам нужно что-то купить, вы приходите в интернет-магазин. Вы читаете описание, смотрите фотки, отзывы, и наконец кладете товар в корзину. Вы это делаете естественным и удобным образом, ведь хорошо устроенный интернет-магазин (как, впрочем, и магазин обыкновенный) как бы берет клиента за руку и проводит от главной страницы (витрины) до покупки.
Вам нужен дизайн, и вы приходите на сайт студии дизайна. Вы видите портфолио с рассказом о том, какие замечательные проекты они реализовали - и вообще, какие они молодцы. И на этом, собственно, все: сайты даже лучших студий преисполнены самолюбования и не очень-то спешат делать удобно клиентам. Если повезет - в углу будет форма обратной связи, которая предложит вам (потенциальному заказчику) в письменной форме изложить, по какому поводу вы беспокоите господ дизайнеров.
У нас все не так :-) Во-первых, на каждой странице, на самом видном месте - ссылка на форму заказа, вот такая:
Эта форма задает небольшое количество простых вопросов, позволяющих нам и вам определить тему для предметного разговора и составления технического задания. То есть по сути это традиционный запрос коммерческого предложения, но с человеческим лицом.
Во-вторых, и это самое главное, около каждого проекта есть кнопка «Сделайте мне так же». С ее помощью можно отложить любой наш проект для примера, и он автоматически добавится к запросу. Почти как в интернет-магазине.
Что это дает? С одной стороны, я давно заметил, что люди ищут в моем портфолио проекты, похожие на то, что нужно им самим. Ну очевидно - раз этот чувак такое уже делал, то и для меня сделать сможет. С другой стороны, все дизайнеры (и я в том числе) радуются как дети, когда заказчик показывает примеры: только так можно понять его вкус и настроиться с ним на одну волну.
Итак, смотрим портфолио > выбираем работы > делаем запрос с примерами. Идея лежит на поверхности, но, кажется, мы первые, кто сделал из этого работающий сервис.
Пока на сайте где-то четверть наших проектов, и часть из них - это стабы, то есть мы к ним еще добавим текст и иллюстрации.
Адаптивный макет. Интернет-трафик с мобильных устройств (смартфоны и планшеты) скоро превысит трафик с компьютеров. В этом сходятся все аналитики, разнятся только оценки того, когда именно это произойдет: в этом году или еще через пару лет.
Тем временем веб-дизайн прочно застрял в нулевых годах: абсолютное большинство сайтов сделано для больших экранов, а отдельные версии для мобильных устройств могут позволить себе только монстры вроде Яндекса или Ленты.Ру.
Наш сайт одним из первых в рунете сделан на адаптивном макете - это значит, что одна и та же версия сайта работает и на смартфоне, и на планшете, и на большом экране. Если вы на компьютере, подвигайте окно с нашим сайтом в ширину и посмотрите, как меняется макет. Я уже два месяца наиграться в это не могу :)
Узкие версии сайта адаптированы под тач-устройства: крупные шрифты в меню, селектбоксы с барабанной прокруткой.
Кстати, модульная сетка позволяет в будущем адаптировать сайт под любую ширину экрана, от промежуточных (в планах добавить макет для 480 точек) до сверхшироких, больше 2000 точек. Но уже сегодня он отлично смотрится на винтажном телевизоре:
Честно говоря, я не могу представить, что еще должны изобрести в способах вывода информации, чтобы этот сайт устарел.
Ретина. Другая перспективная фишка - адаптация под ретина-дисплеи. Технология ретина, или HiDPI - это дисплеи с двойной плотностью точек. Каждый обычный пиксель на таком дисплее состоит из четырех, что делает сами точки неразличимыми для глаза, а изображение на экране - сравнимым по качеству с журнальным. Чтобы сайт использовал возможности ретина-дисплея, вся графика для него должна быть отрисована в двух размерах - обычном и двойном. Например, размер юзерпиков в жж - 100×100 точек. Ретина-юзерпики были бы 200×200 точек, и при этом их физический размер (в мм) на экране остался бы таким же.
Наглядный пример. Слева обычный экран, справа ретина. Обычный сайт на всех экранах выглядит обычным, то есть так, как слева:
Почти все современные смартфоны и большая часть планшетов оснащены ретина-дисплеями, а в прошлом году появились и первые ноутбуки. Такими темпами через несколько лет обычные дисплеи останутся только у нищебродов, а тем временем ретина-сайтов еще меньше, чем адаптивных, и сайт Дизайн-Бюро - один из них.
Конечно, пока ретина - эдакая вишенка на торте, но до чего же приятно смотреть картинки на таком экране. Они настолько четкие, что об них можно порезаться. Все остальные сайты после этого выглядят, как будто их облили пивом.
На нашем сайте вы можете увидеть реализованные в Дизайн-Бюро проекты и почитать их описание. Здесь же, в своем жж, я главным образом буду рассказывать о том, как мы работаем. Как мы приходим к тому или иному решению и почему результат получается именно таким. Я покажу рабочие варианты, покажу разные мелочи, на которые никто никогда не обращает внимания, но без которых все выглядит неряшливо и по-китайски.
Самое же главное - я буду рассказывать о том, как все устроено. Постараюсь показать секретный механизм, делающий из кучи симпатичных финтифлюшек работающий дизайн. Никуда не переключайтесь, будет интересно!
Следующий рассказ - о том, как мы делали книгу «Битва за эффективность».
Дизайн-Бюро |
Facebook |
ВКонтакте