Метка «web-дизайн»

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

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

Дисклеймер

В предыдущей статье “Промо-сайт для мобильного приложения. Часть 1” я изложил своё видение и теперь хотел бы узнать у вас какой должна быть landing page для продуктов мобильной индустрии?

От теории к практике

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

Это важно для чистоты эксперимента

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

Тратьте на выбор ответа от 1 до 3-х секунд после их прочтения и просмотра примеров, также, как это делает посетитель, отвечая себе на вопрос: “интересен ему этот сайт или нет?”.
Читать полностью »

Дисклеймер

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

Уверен, что мои советы не станут для вас откровением, просто, как это часто бывает, не всегда можно взглянуть на свою работу со стороны и учесть моменты, которые “замыленным взглядом” просто не видны.

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

Огромный минус в мою и без того нулевую карму свежеиспечённого храбахабровца, всего-то за банальную шутку про адройд, разозлил настолько, что меня чуть не забрало НЛО! И тут я подумал что нужно уже написать о чём-то дельном. О том, что злит так же, как такие проходящие мимо доброжелатели (гореть вам в аду!), или даже ещё больше — о коллегах-дизайнерах…

Бывает, просит тебя какая-нибудь девочка-координатор заменить букву в логотипе на макете сайта. Ты такой говоришь «да, конечно сделаю!». Получаешь psd, открываешь, а там… логотип смержен с фоном хедера в один растровый слой. Или вообще весь макет смержен в background с замочком. О боги, боги!..

Вроде бы любой обладающий логическим аппаратом человек (хотя далеко не все «дызайниры» относятся к этой группе людей) поймёт, что так делать не надо. Однако я встречался с подобными творениями множество раз, при чём часто они были эстетически на высоте, но та «антисанитария» что творилась в недрах их слоёв внушала ужас. Даже неплохие профессионалы очень часто работают не аккуртано, не учатся на собственных ошибках, а статьи типа «10 советов как рисовать чтобы не будь проклятым верстальщиком» воспринимают как надоедливое ворчание гномов подземелья. Да и в них даётся, обычно, просто список рецептов, а вот главного, и при том очень простого, почему-то нет. Так вот, сейчас речь пойдёт о том как должен организовывать свою работу профессиональный дизайнер (тогда и верстальщик останется доволен).
Читать полностью »

20 вопросов про веб шрифты
Привет!

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

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

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

image

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

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

  1. Как уменьшить количество слоев для визуально одного объекта (кнопочки, например), сохранив возможность его редактирования?
  2. Как уменьшить количество слоев, объединив в один слой header, footer на макетах внутренних страниц, при этом снова-таки оставив возможность их изменения?
  3. Как облегчить верстальщику вырезание линий из одно- двух пиксельных линий, составляющих единую линию, теней, а так же кнопочек, иконок?
  4. Как быстро вносить изменения на все однотипные элементы на странице?
  5. Как уменьшать растровую картинку без потери качества и сохраняя правильные пропорции эффектов (тень в 5px для объекта 200*200px – смотрится совсем по-другому, нежели для этого же объекта при его размере 100*100px)

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

Отображение статусов ICQ, Jabber, Skype и MRA на сайте в произвольном виде

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

Для начала определим наши задачи:
— по возможности использовать официальные сервисы определения статуса
— в случае их отсутствия можно прибегнуть к посторонним
— способ должен быть как можно проще, без излишков (всегда можно будет его потом расширить)
— чтобы прорисовка страницы не висла на время запроса, сделаем буфер

Рассмотрим 4 основных способа на примере ICQ, Jabber, Skype и MRA. Остальные можно сделать аналогично.
Читать полностью »

Привет, наверное многие читали мой пост Десяток ресурсов, которые помогают быть дизайнером. Как я понял эта тема интересная (147 плюсов как никак). А раз так, я решил не останавливаться на достигнутом и вот наконец-то закончил работу над своеобразным продолжением первой части. Надеюсь получилось не хуже. Итак, кому интересно, что получилось, прошу под кат. Читать полностью »


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