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

veqqa.ru

Текущая версия — 4.1.3
История изменений моего чудесного сайта. Под этим тегом я рассказываю о том, что было изменено в новой версии, почему мною были выбраны определенные решения. Показываю все закулисы.

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

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

Главная

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

было ↔ стало

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

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

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

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

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

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

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

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

было ↔ стало 

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

Проекты

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

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

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

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

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

Шапка сайта

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

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

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

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

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

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

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

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

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

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

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

Обновления на моем сайте — версия 4.1

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

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

Итак, вы помните мой сайт таким:

Проблемы:

  1. Бесполезные прямоугольники.
  2. Непонятное выделение рубрик.
  3. Глупая последовательность блоков: обо мне, рубрики, проекты, блог.
  4. Скучная куча избранных постов.
  5. Проекты без подписей.
  6. Почта словом.

Теперь главная страница выглядит так:

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

Три блока

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

Стало:

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

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

Избранные заметки

Раньше избранные посты у меня были простой кучей ссылок. Никто по ссылкам не кликал.

Я вдохновился ильяховским справочником Главреда и решил акцентировать внимание посетителей на некоторые посты.

Акцентирование сработало. Люди стали кликать на посты, которые выделены иллюстрацией или текстом. Наверно, это и называется дизайном.

Подвал сайта

У меня поменялся чуть-чуть футер сайта.
Было:

Стало:

  1. Футер стал умным: знает когда вставлять Лайкли и кусок описания, а когда убирать. Знает когда скрывать ссылку «Задать вопрос и получить ответ», а когда оставлять. Скрывает метрику, если я редактирую сайт (чтобы не сбивать статистику).
  2. Я решился отказаться от нижнего бордера и разделить футер от контентной части расстоянием (Бирман об этом как-то писал).
  3. Сделал подвал отдельным файлом со всеми скриптами, копирайтами и версиями.

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

Форма для вопросов и предложений

Месяц назад добавил форму для вопросов

Мне начали поступать разные вопросы от читателей и друзей на почту. Я решил превратить это в рубрику и сделать чуть удобнее: не все любят писать на почту. Форму сделал с помощью «Экспромптума», ПХП обработчик и оформление написал сам.

Ссылку «Задать вопрос и получить ответ» футер сам убирает — смысл ее там повторять?

Шаблоны

Постепенно перехожу на шаблоны.

  1. Теперь любую страницу сайта можно оформить разными цветами — модно нынче.
  2. Хочу сделать удобные шаблоны для того чтобы быстро добавлять новые страницы и проекты. Получается так себе потому что никак не могу разобраться с базой данных. Думаю, дело времени.
  3. Логотип меняет свои цвета с помощь ЦСС потому что в формате СВГ.
  4. Появилась возможность выделить любимый или избранный проект.

Всякое

  1. Ссылки теперь имеют плавный ховер.
  2. Посещенные ссылки в шапке никак не выделяются. Остальные — блекло-синие.
  3. Аккуратный бордер у Дизайн-собраний.
  4. Ссылки и картинки ведущие в одно место выделяются вместе.
  5. В разработке английская версия сайта.
  6. В некоторых частях сайта было очень много лишних элементов, которые исчезали и появлялись в зависимости от ширины экрана, что очень нагружало страницу. Теперь везде жесткий адаптив.
  7. Постепенно отказываюсь от сетки Бутстрапа и делаю адаптив своими силами.
  8. Новый фавикон у сайта и блога.

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

В перспективе:

  1. Доделать шаблоны.
  2. Подключить базу данных в проекты.
  3. Разработать удобную систему добавления проектов.
  4. Сделать английскую версию.

Зацените сайт: veqqa.ru

Что думаете?

15 сентября   veqqa.ru   дизайн   сайты

Четвертая версия моего сайта veqqa.ru

Эта версия сайта устарела. Актуальные версии смотрите в рубрике.
Что-то постоянно меняется и переделывается: новую версию можно найти в подвале сайта.

Привет, ребят.
Не прошло и месяца, как я выпустил новую версию своего сайта.

Ключевые изменения:

  1. Сайт наполнился информацией.
  2. Название трех блоков: «Проекты», «Блог», «Мысли» — ушли в прошлое;
  3. Добавлена моя фотография;
  4. Добавлены рубрики: ссылки по пятницам и загадки по средам;
  5. Добавлены две свежие работы (на главной);
  6. Избранные заметки разделились на четыре основных раздела;
  7. Весь сайт теперь блочный, а не на всю ширину экрана;
  8. Добавились проекты (пока что без процесса);

Вроде все.

Предыдущая версия была дырявая.

Она ни о чем не рассказывала, и была слишком пустой.

Во-первых, старый сайт растягивал элементы на всю ширину экрана.

Согласитесь, не супер-пупер.

Во-вторых, приходилось добавлять очень большие иллюстрации, чтобы они нормально выглядели на широких мониторах.

В-третьих, портились все разделы.

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

Теперь все разделы сайта имеют ограничение на увеличение масштаба. Шапка и подвал, подсасываемые ПХП, остались широкоформатными. Как думаете, может их тоже сделать блочными?

В новой версии, проекты перечислены столибком.

Это не окончательное решение! Я еще не придумал, как сделать классно.

А отдельно взятый проект выглядит так:

Процессы потом допилю.

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

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

Заметки разделились на разделы. Это удобно, красиво, и сразу понятно, на какие темы я пишу.

Даже если у вас слишком широкий экран, сайт будет выглядеть нормально.

Вот такие изменения. Ребят, как вам сайт?
Нравится?
Что стоит подправить?
Что выглядит как дерьмо?
Как адаптивность?
Если стесняетесь, напишите на почту: veqqa@veqqa.ru. Принимаю любую критику, даже необоснованную.

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

Программисты и верстальщики, вопрос к вам: как сделать так, чтобы при наведении на любой из моих блоков (первые три на главной странице), ссылка в навигации подсвечивалась? 

Третья бета-версия моего сайта — veqqa.ru

Эта версия сайта устарела. Актуальные версии смотрите в рубрике.
Что-то постоянно меняется и переделывается: новую версию можно найти в подвале сайта.

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

Старая версия:

Новая версия:

http://veqqa.ru/ — 3.0 beta

Буду хвастаться

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

Дизайн

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

О движке

Движка — нет. Сайт я сделал на ПХП. В основу верстки лег Бутстрап. Его я освоил за две ночи, и пошел на очень ответственный шаг — бросил Вордпресс. Вордпресс — хорошая платформа, но к сожалению в ней слишком много ограничений. Меня бесило, что я не мог задать свои стили, Вордпресс плакал, ругался, и стонал. Он никак не воспринимал мои команды, даже если они !импортант. Именно поэтому я сделал сайт заново, как модно говорить, с нуля. Надеюсь, вы перешли и посмотрели, мне наконец-то удалось сделать ссылки с тонким подчеркиванием как в <боди>, так и в шапке — я терпеть не могу жирные ссылки. Текст с такими ссылками выглядит как проститутка на шпильках, в тонких лосинах, и с жирной задницей. Мне удалось разделить контентную часть двумя тонкими линиями, и это не < hr >. В кое-то веки я смог сделать ограничение в нужное количество пикселей слева и справа.

Отдельная история про шапку:

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

Немного о логотипе:

Логотип — это мой шедевр. Это не просто картинка или гифка — это текст + умный фон. Я всегда завидовал тем сайтам, у которых логотип целиком и полностью создается ХТМЛ-ом и ЦСС-ом. Раньше такой был у Бюро, а сейчас чет ни очень (может я чего-то не знаю). Я долго не мог понять, как это сделать. Я несколько ночей сидел над логотипом и добился потрясающего эффекта. Свой знак я нарисовал на коленке за пять минут. Он прекрасно работает в качестве личной айдентики — это мне и нужно. Я знал, что рано или поздно, сделаю его кодом. И это свершилось.
Очень часто на многих сайтах я встречаю одну и ту же глупую ошибку: логотип всегда является ссылкой. Только подумать, даже у крупных дизайн-студий имеется этот неприятный косяк. Логотип должен быть ссылкой только в том случае, если вы находитесь на другой странице.
Проще говоря: если вы на http://veqqa.ru — логотип не должен быть ссылкой

Если вы на http://veqqa.ru/everything — логотип должен быть ссылкой.

У меня так и сделано. Я написал кучи строк кода, чтобы добиться такой простой фишки. Ситуация такая: мой код разделяется на две половины: 70% — это код для шапки, 30% — все остальное. Забавно, да?

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

Мне нравится. Хотя я хотел убрать его нахрен, что думаете?

Резина

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

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

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

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

Самое сложное

Для меня было самым сложным перенаправить страницы с адреса books.php на просто books. Не знаю как это делают другие, но я просмотрел такую кипу говно-сайтов с говно-советами, что в жизни больше не буду туда лезть. Один раз настроил и ладно будет. Так же было проблемой прописать правильную индексацию, и редирект с www и index.php. Короче говоря, системная часть — это не про меня. Я фронтенд. (шучу)

Ошибки

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

И это все — текст, неужели не круто?

В заключении

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


***
Помимо всего вышеперечисленного, пару дней назад у меня заказали дизайн упаковки. Мне нужны: редакторы, иллюстраторы, каллиграфы. Ребят, если вы читаете мой блог, и обладаете такими умениями — напишите мне на veqqa@veqqa.ru. Буду признателен. (Если вам нужен простенький сайт — пишите мне)

Спасибо за внимание, смотрите новый сайт, делайте свои проекты — любите свою работу.

Вторая версия моего сайта

Эта версия сайта устарела. Актуальные версии смотрите в рубрике.
Что-то постоянно меняется и переделывается: новую версию можно найти в подвале сайта.

На днях выкатил вторую версию своего сайта. Я не особо люблю памятные даты. Опубликую обе версии для истории.

Первая версия:

Вениамин Векк - дизайнер

Три круга сильно спорили друг с другом, потому что являются якорными объектами. Очень сложно засунуть текст, круги, и прямоугольник в модульную сетку.

Вторая версия:

Заметки юного дизайнера

Ключевые изменения:

  1. Вторая версия резиновая;
  2. Круги превратились в прямоугольники;
  3. Шапка и подвал отделились линиями;
  4. Разделы разбились на прямоугольные модули;
  5. У некоторых работ появились процессы.
  6. В шапку засунул меню.

Для всех зануд: Нет, я не программист (Владею ХТМЛ/ЦСС, и чуть-чуть ПХП). Да, сайт делал сам. Да, без сторонней помощи. Да, с нуля. Да, сайт резиновый. Нет, движок не мой.
Движок — Вордпресс.
Тема — мой гибрид.

На сайте несколько моих работ, и процессы.
Оценивайте: http://veqqa.ru/

2017   veqqa.ru   дизайн   мое   сайты