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

сайты

Обновления на моем сайте — версия 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. Принимаю любую критику, даже необоснованную.

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

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

Скрытые разделы Дом-страницы Артемия Лебедева

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

С Лебедевым и его студией я познакомился в двенадцатилетнем возрасте, а о сайте http://tema.ru узнал спустя год-два. И только сейчас, в 2017 году, я решил посмотреть код Артемия. Вот так выглядит его дом-страница.

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

Заходим в код

Тема встречает нас приветствием

Листаем ниже, видим скрытые разделы.

И еще что-то.

И еще.

«Слушай, а давай я тебя HTML писать научу? Это мы только что открыли таблицу. Ширина у нее — пока не треснет браузер. Края не видны. А все остальное — по нулям. Понимаешь? Давай, теперь сама.»

Что-ж, включаем инспектор, правим код.

Пару магических движений, и на сайте появляются скрытые ссылки.

Ооо, новый раздел, круто, переходим

-_-

Самизнаетекто в своем репертуаре.
Другие ссылки ведут на 404, идем дальше.

С помощью того же инспектора удается открыть грустный смайлик и раздел «О гостевых книгах»

Страница существует. Ураа!

Читаем, радуемся, идем дальше.

А дальше ничего интересного кроме фана от Лебедева мы не получаем.

«Да... тебя не обманешь. Докрутил-таки. Но это ведь такая же через жопу сверстанная страница, как и все остальные на этом сайте. Ничего полезного ты тут не найдешь.»
«Ты уверен что посмотрел на все комментарии всех страниц этого сайта?»
«У такой картинки просто не может быть альта.»

Но все-таки у меня есть для вас загадка на сегодня. Какие разделы скрываются за этими ссылками?

Я пытался подобрать, но потом задолбало. Если есть желание — попробуйте. Победителю лавры, вечный респект и ссылка.

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

В прошлые Загадки по средам правильно ответил Вадим Чичерин. Хвала.

Третья бета-версия моего сайта — 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   дизайн   мое   сайты