Рубрика «вебдизайн»

Техподдержка сайта — что должна включать, сколько стоить и нужна ли? - 1

Рядовой случай: заказали сайт, web-студия его разработала, протестировала и успешно сдала проект, а в течение гарантийного срока (3-6 месяцев) исправила баги. На первый взгляд все в порядке. Что еще нужно?

Читать полностью »

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

Читать полностью »

Если вы тратите большую часть своего времени в статичных инструментах, таких как Sketch, то вам стоит переехать в браузер и чем раньше, тем лучше.

Более трех лет назад я написал свой первый пост на тему «Дизайн в браузере». Пост назывался «Как я задизайнил сайт без Фотошопа»

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

Хватит дизайнить в скетче. Делайте дизайн в браузере - 1
Читать полностью »

В 2014 году главным трендом в мире UI-дизайна стали кнопки-призраки. Речь идет о прозрачных кнопках прямоугольной или квадратной формы, которые также называют «пустыми», «голыми» или «полыми», мы не могли обойти стороной этот материал и сделали адаптивный перевод статьи журнала UX Planet специально для читателей Хабрахабр.

Границы кнопок-призраков, как правило, обозначаются тонкой линией, а внутри располагается простой текст. Чаще всего такой дизайн используется в кнопках для призыва к действию.

image

Обычный внешний вид (слева) и внешний вид при наведении курсора (справа).

image

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

Перевод статьи Smashing Magazine Creative And Innovative Navigation Designs.

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

Toybox

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

Необычная навигация на сайтахЧитать полностью »

Доброго времени суток.

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

Исходные данные:

  • Скорость загрузки сайта — 2 с,
  • Скорость обработки первого запроса 1,06 с,
  • Время передачи первого запроса 364 мс,
  • Объем загружаемых данных ~ 3 мБ,
Ответ на задачку

  • Скорость загрузки сайта — 1 с,
  • Скорость обработки первого запроса 80 мс,
  • Время передачи первого запроса 15 мс,
  • Объем загружаемых данных ~ 70 кБ, *

Читать полностью »

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

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

Поначалу введение кнопок, заметно выпадающих из дизайна по своим размерам, встретила массу осуждений в топике, посвящённом обновлению сайта 22 мая. Представитель Хабра Boomburum вполне с этим согласен и предлагает дизайн кнопки отправлять ему на личное сообщение. Однако, красивость одного решения, которое созрело в течение дня, предлагаю оценить всем.

Картинка для привлечения внимания:
Предлагаются лёгкие кнопки «Дальше» (оптом, недорого)

Читать полностью »

В ближайшие месяца три будет реализован следующий этап переформатирования сайта Хабра в более удобочитаемый вид, с учётом всех актуальных требований к работе с контентом. Первый этап был и есть — эксперименты со стилями ZenComment и скриптами HabrAjax. (Внимание, проект НЕ связан с администрацией Хабра или какой-либо её программой.) Опыт показал, что при условиях частой смены вёрстки и невозможности влиять на исходную вёрстку сайта, результаты будут привязаны к исходной вёрстке, переделка будет стоить больших усилий, а усилия будут обесцениваться частыми нововведениями.

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


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js