58 заметок с тегом

дизайн

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

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

Блог Вениамина Векка
вспоминайте эту вырвиглазную картинку

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

Никаких «главных» ссылок
Никаких ссылок на себя самого

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

Не должно быть никаких «главных» на главной странице сайта:

Блог Вениамина Векка Блог Вениамина Векка

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

Внутренняя страница:

Блог Вениамина Векка

Главная:

Блог Вениамина Векка

Нынче развелось кучи смешных юикс-дизайнеров, которые не понимают таких банальных вещей. И сайты у них смешные. Кидайте этот пост всем знакомым дизайнерам с плохими и «главными» ссылками. Пусть им будет стыдно.

6 декабря   бесит   дизайн   интерфейсы

С 21-летием меня

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

Вениамин Векк
4 декабря   дизайн   др

Новая шапка сайта, проекты, раздел с путешествиями и блог — версия 4.1.3

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

Главная

Итак, вот листалка со старой версией и новой:

было ↔ стало

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

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

Ссылки все синие и подчеркнуты. Но, блин, как же это вырвиглазно выглядит. Мне кажется, что каждый дурак отличит подчеркнутую ссылку от обычного текста, тем более — все это ссылки на посты. Если по каким-то причинам вам сложно различить где обычный текст, а где ссылка — расскажите мне об этом.

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

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

На главной странице я решил вернуть подписи к разделам:

Вернул подписи после добавления на сайт Телеграм-канала. Его нужно было как-то подписать, но кроме того как подписать заголовком — я ничего не придумал. Пришлось везде вернуть заголовки, чтобы сохранить логику. Разделы снова легко читаются при беглом взгляде.

Заодно отредактировал описание Дизайн-собраний. А пару дней назад — уменьшил описание о себе. Текста раньше было дохренища:

было ↔ стало 

Я решил выделить самое главное своей плашкой, а остальное засунуть в слайдер Фоторамы. Текст никуда не делся, но и не исчез. В своем канале я рассказал о том, как верстал это описание.

Проекты

У меня не очень много проектов. Я решил не расставлять их в тупую квадратную сетку. Мне очень хотелось сверстать интересную солянку из постов и проектов, рассказывающую о том, чем я занимаюсь. Появилось место для «процессов» и прочих проектов. Короче, в сто раз круче, чем было:

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

Внутренние страницы

В прошлый раз я говорил о том, что хочу научиться делать шаблоны. Я почти научился:

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

Шапка сайта

Теперь поговорим о шапке сайта — самом главном обновлении. Вы помните мою шапку такой:

Теперь она такая:

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

Зачем шапке гулять туда-сюда? Зачем нагружать код хедера двумя пачками дивов. Не легче ли просто адаптировать мобильную шапку для десктопа — так я и сделал:

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

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

Код шапки стал в два раза легче и не прыгает. Шапка легко работает с любым фоном и вообще очень меня радует. Но теперь меня подбешивает логотип, скоро буду рисовать новый.

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

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

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

3 декабря   veqqa.ru   дизайн

Оставьте скроллинг сайта в покое!

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

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

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

Не усложняйте

Примеры плохого скроллинга на сайтах топовых студий России:

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

Не удаляйте, будет хуже

У Аик просто плохой сайт:

Медленные и «интересненькие» слайдеры должны были умереть с 2012 годом. Так бесконечно долго ждать загрузки невозможно. У слайдера на главной очень много лишней анимации. Скроллинг вообще отсутствует. Так можно, но не в случае с Аик.

Покажите хоть что-нибудь

Вот пример очень плохого скроллинга на рандомном сайте:

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

UPD 08.12
Оказывается, это спецпроект Авито, который стал интересен редактором как плохой «сторителлинг». Что-ж, из-за плохого скроллинга я даже не заметил, что это история какой-то там камеры. Делайте нормальный функционал, чтобы людям было не только интересно, но и удобно читать.

Пример хорошего скроллинга, но сомнительной навигации:

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

Вот пример того, как можно сделать скроллинг, и вообще серфинг по сайту интересным:

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

Скроллинг не должен обращать на себя внимание

Если скроллинг обращает на себя внимание и заставляет задуматься над тем, как правильно скроллить — скролллинг плохой или недоделанный. Пользователь не должен задумываться над тем, как скроллить содержимое страницы. У нас в интернетах и так полным-полно проблем с интерфейсами, давайте оставим в покое стандартную функцию любого браузера?

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

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

  1. Зачем?
  2. Какую задачу будет решать?
  3. Не хотите ли вы просто показать, какой вы классный?

Если адекватных ответов в пользу нового и модного скролла нет — не трогайте его.

30 ноября   дизайн   интерфейсы   обзор

О воровстве в дизайне

Кругом только и слышу, что воровство в дизайне — это ок дело. Блять, с чего вы взяли? Большая часть дизайнеров вообще не понимают значения слово «своруй». Воровать нужно уметь. Нельзя взять и сделать как БлэкСтар — найти сайт студии Супер Дьюпер:

И под чистую спиздить дизайн:

Нельзя так делать. Можно взять концепт и использовать в другой сфере. Можно взять идею и адаптировать под себя. Можно позаимствовать ход и что-нибудь с ним придумать. Но нельзя взять и спиздить реализацию.

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

Можно взять идею и реализовать — спиздить реализацию никак нельзя!

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

Никогда не воруйте реализацию — это жуткий зашквар.

18 ноября   бесит   дизайн

Личная айдентика Ксении Собчак

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

Лично меня смущает логика Ксении. Она говорит, что раньше была графа «против всех», которая позволяла отдать свой голос в никуда. Сейчас она ее возвращает своим именем. Но как человек может быть против всех, если он отдает голос Собчак? А если она станет президентом? В чем смысл, если куча людей просто не хотят отдавать свои голоса? — короче, странно.

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

Я ломаю голову — решил задачу дизайнер или нет. Задача скорее всего звучала как-то так:

Поставить между Ксенией Собчак и графой «против всех» знак равно.

С ассоциациями дизайнер вроде угадал, смысл послания считывается. Конечно, если отталкиваться от задачи, которую озвучил я. Другой я здесь не вижу, может вы видите?

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

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

Обидно, что айдентика Ксении никак не используется. Собчак — пример человека, которые не понимает как использовать свои ресурсы. Навальный в этом плане намного круче форсит фирменный стиль.

Отсюда совет: использовать личную айдентику всегда и везде.

23 октября   дизайн   личная айдентика   обзор

Легкое понимание дизайнерской задачи

решение дизайнерских задач

Очень большое количество людей думают, что дизайн — это сделать «красивую картинку». От части это правильно, потому что задача может требовать создание непосредственной красоты. Другая часть, более продвинутая, знает изъезженную фразу: дизайн — это решение задачи. Однако, смутно понимают значение этих слов. В первую очередь, я говорю про дизайнеров.

Я совсем недавно начал понимать, что такое решение задачи. Сейчас я на начальном этапе, который открывает удивительное знание — задачу из клиента нужно доставать. Ко мне, к сожалению, редко приходят клиенты со сформулированной и уверенной задачей. Мой клиент — женщина, которая не понимает зачем пришла.

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

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

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

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

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

Обычная задача:
Клиент просит приготовить пирог.

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

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

Хорошая задача звучит не как перечень действий, а как список проблем и ограничений.

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

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

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

Понимание проблемы

Есть клиенты с проблемой. Проблему нужно выявить и решить. Клиент может и не видеть источник проблемы, но страдать от нее. Чешется у него жутко спина: в зеркало не посмотреть, рукой не достать. Он примерно понимает, что ему мешает, но конкретно сказать не может. Именно поэтому он ищет человека на стороне, который найдет проблему и почешет спину в нужном месте. Этот человек не обязательно должен быть дизайнером. Возможно, ему нужен друг с ногтями на руках, а не новая навигация в офисе.

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

Необходимо откинуть все вытекающие проблемы и найти ее главный источник

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

Слушайте, нам не нравится шапка сайта. Она какая-то некрасивая. Нам же нужно сделать красиво, поймите. Вы дизайнер или как?

В таком случае надо искать источник и формулировать задачу. «Сделать красиво» — не дизайнерская задача в данном случае. Правильно сформулированная задача — половина решения. Теперь я начал понимать, о чем говорили Рэнд и Папанек.

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

21 октября   дизайн   задачи и решения

Что делать с недопониманием

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

Именно поэтому я начал принимать меры, чтобы недопонимание уничтожать на стадии зачатия:

  1. Не принимать все на свой счет.
  2. Не спрашивать совета.
  3. Не трепаться лишний раз.
  4. Херачить дальше.

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

Разумеется, сложно совсем не обращать внимания. Но если не делиться со всеми подряд успехами и неудачами — окружающее большинство даже не узнает о вашем любимом деле. Лучше уж так. Я занимаюсь дизайном, поэтому буду говорить с точки зрения дизайнера. Самая главная моя ошибка — показывать работу близким. Начинается диванная аналитика и глупая полемика. Кто-то что-то советует, рецензирует и критикует. Сплошная вкусовщина. Полгода назад я перестал всем показывать и гордиться своими работами — я начал использовать близких людей на благое дело. Дизайн и решения нужно как-то тестить. Глаза замылены, так как решения придумываю я. Взгляд новичка можно найти только со стороны. Поэтому я использую родственников в качестве тестеров моих решений.

Я не прошу их выразить свое мнение или подсказать с выбором цвета — я спрашиваю что-то конкретное. Например, когда я делал листовку для «Флая» — никак не мог показать на островах лето, а в Новосибирске зиму. Для меня итак было понятно где что. Но я знал, что человеку, который видит листовку впервые, будет трудновато. Проблему решил просто: подошел к родственникам с вопросом про ассоциации с летом и зимой. Покрасил острова в нужные цвета. Все. Я не спрашивал про верстку, шрифты, иллюстрации, интерлиньяж и прочее — они в этом не разбираются. Нет смысла пытать человека вопросами, на которые он будет отвечать случайным набором фраз.

Если друг, знакомый или кто-то еще (не заказчик) — начинает мне советовать куда и где сделать «покрасивше» — я его не слушаю. Не слушаю потому что его решения случайны. А случайными решениями можно испоганить всю работу. Я готов взять любого человека в дизайн-процесс и использовать идеи, может прислушаюсь к советам. Мнения не особо интересны.

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

Итого получается: не говорим о своих успехах и провалах. Не спрашиваем мнения или совета. Не принимаем весь шлак на свой счет. Херачим дальше.

15 октября   дизайн   работа
Ранее Ctrl + ↓