Одним прекрасным днем мне написал Милослав.

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

Ради таких слов стоит писать в блог и что-то делать. Это невероятно приятно.

«Не понимаю то, как ты делаешь логотип, а именно убеждение в том, что логотип должен быть воспроизводим средствами HTML и CSS. Напротив, так как разметка и стили во всех браузерах отображаются по-разному, делать логотип версткой — плохая практика. Тем более, он у тебя почему-то не векторный (см. вложение). Я бы сделал его в SVG, было бы намного лучше и выглядело бы хорошо везде.»

Месяц назад я заметил, что мой логотип работает не во всех браузерах. Милослав очень тактично напомнил мне об этом. Я хотел сделать СВГ, но не знал как внедрить его в страницу. После его письма я решил взяться за это дело основательно. Решил переделать свой логотип.
За основу взял свой старый логотип для каллиграфических холстов.

Его легко изобразить от руки, он без понтов и не такой страшный. Поиск:

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

Теперь надо как-то удачно расположить фон и надпись.

Готово. Логотип нарисован в иллюстраторе.

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

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

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

Милослав — фронтенд-разработчик с красивым сайтом. Зайдите и нажмите на кнопку «Click me».

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

Новый заголовок блога

Многие могли заметить, что теперь мой блог называется немного иначе.

А что скрывать? — я решил, так будет правильно. Я действительно юный и действительно неграмотный. Теперь подпись блога сразу предупреждает каждого посетителя — заметки с ошибками. Нет смысла мне писать о том какой я неграмотный — вы сами сюда пришли, сами начали читать. Если кого-то обижают мои сюрьёзние ащибки — не читайте меня. Этим заголовком я хочу предостеречь всех перфекционистов. Что толкового может написать неграмотный и юный, а значит неопытный, дизайнер?

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

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

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

Вроде все.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

http://veqqa.ru/ — 2.0

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

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. Буду признателен. (Если вам нужен простенький сайт — пишите мне)

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