Category: дизайн

Category was added automatically. Read all entries about "дизайн".

Веб-студия — это не бизнес

Мрачные мысли по следам статьи о причинах закрытия интернет-студий.

Недавно попал разовый заказ на создание сайта на базе нашего сервиса salefast.ru.

Делали сайт по стандартной накатанной схеме: выбрали шаблон, выкупили полную версию UMI, слепили дизайн по шаблону.

Дизайном и вёрсткой занималась, как обычно, я. Настроила фтп, зашла в папку со стилями и… поняла, как сильно же меня задолбала эта работа! А ведь, казалось бы, и 2х лет не прошло, как я сверстала свой первый сайт.

Впрочем, дизайн сайтов задолбал не меньше. Сколько там я им занималась?… Ага, почти 6 лет.

Это было предисловие. А теперь ближе к сути.

Карусель на сайте: за и против

В последнее время в подписке вижу много красивых адаптивных дизайнов со слайдерами. Или каруселями — это если по-русски. Что-то вроде такого:

home-_wip_

Смотрится эффектно, спору нет. Куски картинки разлетаются в разные стороны, а на следующем кадре прилетают новые. Но «эффектно» и «эффективно» — не одно и то же. Приносят ли они заказчику реальных клиентов или это только топорная реализация его хотелок? Попробую разобраться.

Плюсы

1. Ой, оно двигается!

Летает, ездит, прыгает, бегает, плавает… Вызывает вау-эффект у неискушенного пользователя.

2. Клиентам нравится

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

3. Шаблонное решение проблемы

Проблема у дизайнера в большинстве случаев одна: сделать красиво, вызвать всё тот же вау-эффект и привлечь внимание к определённому блоку информации. Карусель — решение топорное, но зато самое простое.

Минусы карусели

Моя подборка RSS

Цитита:





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


Моя коллекция подписок:

Типографика

Сплошь всё на англицком. Латиница отличается от кириллицы, она намного симпатичнее. Да и большая часть шрифтов, которые представляют на этих ресурсах, не имеет кириллического начертания. Но всё равно для вдохновения бывает полезно просматривать.
typeinspire.com
welovetypography.com
typographicposters.com
addictivefonts.com
typegoodness.com
typenuts.com
ilovetypography.com


Инфографика

infogra.ru
Журнал “Инфографика”
infographer.ru
Инфографика в примерах


Вдохновение на каждый день

Журнал This is colossal — фотографии, скульптуры, красивые места планеты, интересные изобретения.
Piccsy — просто красивые фотографии и картинки. Много картинок. Очень много картинок каждый день.
Dribble — иконки, иллюстрации, дизайны сайтов и приложений. Рай для дизайнера. После пары месяцев просмотра на работы фрилансеров, которых я раньше считала гуру, смотрю с лёгким отвращением.
swiss-miss.com — фотографии, дизайны, цитаты, шрифты, статьи, всякое разное.

Остальное - на моём сайте.

Пиксель-пёрфект vs вёрстка моей мечты

Откуда берутся пиксель-дрочеры

Из фриланса, откуда же ещё...

pp1

Вот таких проектов там через один.

Как мне когда-то написали в комментариях, попиксельного соответствия могут требовать только неадекватные заказчики.
Не совсем верно. Они не неадекватные. Они просто ушлые и посредники долбанные.

Посредничество - противная работа. Посредник крутится, как змеюга на сковородке, хочет и рыбку съесть, и всё остальное. Он все этапы работы заказывает по частям, потому что так дешевле, чем свой штат работников содержать. Дизайн у одного, вёрстку у второго, установку на CMS у третьего.

И вот у него ситуация: дизайнер сайт нарисовал, деньги получил, доработками он за бесплатно заниматься не будет. Поэтому у посредника теперь главная боль - это чтобы свёрстано было всё один в один, как в дизайне, чтобы заказчик его потом на эту тему не дрючил. А как сайт потом будет развиваться, ему по барабану.

Вот откуда берутся такие заказы на фрилансе и пиксель-перфекционисты верстальщики.

Какая же должна быть хорошая вёрстка?

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

Сформулирую неочевидные требования.

  1. Новые страницы сайта собираются из уже имеющихся элементов (по модели БЭМ - «Блок - Элемент - Модификатор»). Как из конструктора. Лего в детстве наверняка у всех было. ;)
    (что такое БЭМ, можно почитать на хабре, там много интересных статей на эту тему)
  2. Если в готовую вёрстку вносятся небольшие изменения, от них сайт не разваливается.
  3. Вёрстка легко понимается другим человеком. Код должен быть чистым и логичным и легко считываться.

Эта же статья на моём сайте

7 причин, почему дизайнер должен уметь верстать

1. Более логичный дизайн

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

Если, например, вы задали заголовку шрифт «Требушет» и размер 30 px, а ссылке назначили синий цвет. Тогда логично предположить, что тексту в конструкции <Н1><а hrеf=»">< /а>< / Н1> будет присвоен стиль «Требушет, 30 px, синий цвет».

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

2. Дизайн можно сверстать быстрее

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

3. Свобода анимации

Анимация стала популярным современным трендом, пользователи к ней привыкли. Возьмите интрефейс любого смартфона — там все элементы движутся, стоит только человеку прикоснуться к ним. Технологии HTML5 и CSS3 позволяют написать код для анимации без JavaScript-а.
Если дизайнер будет в них разбираться, ему станет намного проще придумывать анимацию для сайта. Он уже не будет ломать голову, можно ли вот эту кнопку при наведении повернуть вокруг своей оси и сдвинуть на 20 пикселей наискосок. Он просто возьмёт и сам напишет для этого код.

4. Хорошего верстальщика — днём с огнём

Когда я только начинала изучать вёрстку, я неоднократно писала в блоге, что хорошего верстальщика найти невозможно. Это не так. Они есть, но встречаются — хорошо, если один на сотню. И в качестве фрилансеров они долго не живут. Их очень быстро расхватывают студии.
Когда мы два года назад запускали сайт Стеклорезерва, нам очень повезло с верстальщиком. Он не только заверстал мой дизайн на «отлично», но и оказался гением жабоскрипта и сам запрогал движение всех осколков. На следующем проекте с ним поработать уже не довелось, его забрали на постоянную работу в какую-то студию (оторвали, надо думать, с руками).

5. Адаптивный дизайн — уже сегодняшний день

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

6. Требования по верстке есть во многих вакансиях

Я регулярно просматриваю вакансии веб-дизанеров на том же хедхантере. Требования по вёрстке встречаются как минимум в половине. И это даже при окладе в 30к. Чего уж говорить о более денежных вакансиях.

7. Понимание смежной профессии

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

Выводы

Если дизайнер хочет стать более ценным специалистом, получать большую зарплату (если он работает в офис) или брать больше денег с заказчиков (если он фрилансер), вёрстка нужна ему, как воздух.

Эта же статья на моём сайте

Вёрстка и «костыли»

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

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

Сайт - часть бизнеса заказчика
Заказчик, как и все люди, не с Марса прилетел, и его бизнес не заморожен во времени. Компания развивается, постоянно что-то меняется, добавляется. Вместе с бизнесом меняется и сайт, потому что это важный инструмент продаж.
Самое главное, изменения эти заказчику надо вносить на сайт быстро. Он не будет неделями ждать, пока дизайнер придумает, куда вот эту рюшечку прилепить, а куда стопятьсот акций добавить. Он делает все эти изменения самостоятельно и делает их на «костылях». То есть слепил по-быстрому что-то, оно вроде как-то работает, и слава небесам, лучше эту конструкцию не трогать.

Со временем этих костылей на сайте набирается очень много, и в конечном итоге сайт разваливается. Тогда заказчик снова обращается к дизайнеру за новым сайтом. И цикл повторяется снова.

Жизненный цикл сайта



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

Цитата по теме
«Вон, кьюто.ру сдали, и что? Уже на следующий день тут баннерище неожиданный появился, там колоночку новенькую влепили, тут какую-то плашечку непредвиденную.
Но сетка держит удар. Сайт живет своей жизнью, зашибись.
»
© Людвиг Быстроновский



Эта же статья в моём блоге.

Вёрстка для дизайнеров

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

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

Тогда я поняла, что вёрстке надо обучиться самой, причём срочно. Я яростно принялась штудировать учебник по html и css, и уже через 2 недели сверстала свой первый сайт. До сих пор, кстати, лежит на сервере, для истории:
http://agilis-test.ru.umitest.ru/kate/index.html
С тех пор этот навык прокачала уже до хорошего уровня. Регулярно осваиваю новые фишки, о которых пишу тут же в блоге.

С какими проблемами постоянно сталкивается дизайнер, который не умеет верстать?
Вот нарисовали вы дизайн, отдали верстальщику, через неделю получили вёрстку, а в ней отступы, размеры, цвета - все не те. Здесь на пару пикселей расстояние больше, там обводка пожиренее - и итоговый сайт смотрится уже совсем не так, как вы хотели бы видеть.
Вы с претензией к верстальщику, а он в ответ, мол, ничего не знаю, работа сделана, деньги уплочены. И всё, и ничего уже не поделать, хоть ты головой о стенку бейся.

А проблема даже не в вёрстке, а в самом дизайне. Потому что нарисовано так, что сверстать одинаково для всех браузеров физически невозможно.
В результате фрилансовские верстальщики ругаются на дизайнеров и занимаются пиксель-дрочерством.
А потом контент-менеджеры и сами дизайнеры ругаются на верстальщиков, потому что сайт нормально не заполнить и в дизайне ничего не поменять.

Заказчики тоже показывают высокий уровень неграмотности, когда требуют попиксельного соответствия макета и вёрстки. Мой самый первый опыт вёрстки на заказ вышел неудачным именно на таком основании.


В общем, сильно наболела у меня эта тема замороченных дизайнов и говновёрстки. И появилась идея обучить всех желающих, кому знакомы такие проблемы.
Конечно, при желании можно обучиться чему угодно самостоятельно. Есть куча литературы, всевозможные статьи на тематических ресурсах. Можно вести блог, чем я и занимаюсь. Но людям нужна обратная связь. Нужен человек, который поможет советом.


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

Меня же проблема говновёрстки задолбала в корень и желание поделиться знаниями велико.

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



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

Откуда берутся идеи

Из дизайнеров про идеи и креативность не пишет только ленивый.

В далёком 2008ом, где-то спустя 3-4 месяца, как я начала заниматься веб-дизайном, на меня снизошло, что работа тогда хороша, когда в ней есть уникальная идея. Стала я тогда искать материалы по теме, откуда идеи берутся. Некоторыми способами даже довелось попользоваться.

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

А идеи... что ж, можно и идеи сочинять, но мучительно рожать ежа никто не требует.
Летом мои коллеги с ЮМИ-саммита привезли мне отличную мысль. Уже после того, как поставишь задачу, надо просмотреть хорошие работы других студий и мастеров, где решается что-то похожее, и на их основе соорудить уже что-то своё. Комбинация из двух и более чужих идей в результате даёт новую третью.

*а теперь по секрету о нехорошем*
Если же скомбинировать не получается, можно тупо скопировать чужую идею.
Потому что идея сама по себе ничего не стоит. Но я вам этого не говорила.)

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

Порылась в сервисах гмайла и нашла вот такой:
creator.zoho.com/home

Интерфейс для создания базы, конечно, не очень удобный. Зато когда база уже готова, заполнять её очень легко.
В моём случае базы две - метки и сами работы, связь между ними многие ко многим.
Когда ввожу новую работу, указываю её название, метки, ссылку в сети, если есть, и загружаю картинку с компа.



Потом по ссылке idea base в фильтре смотрю работы по нужному мне тегу.

Дизайнер! С цветами можешь не дружить, но вёрстку знать ты, блин, обязан!

Взяла заказ на вёрстку сайта с прицелом на кикстарт.

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

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

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

Шапка.

Нижняя часть вроде как выровнена – логотип, меню «Личный кабинет», корзина, блок «Позвоните мне». Но чтобы это выравнивание адекватно сверстать, хошь-не хошь, а ежа родить придётся.  Единственный способ, какой я нашла – для блока с корзиной и списка «позвоните мне» задать конкретный отступ сверху. Иначе никак, пиксель-дрочерство форменное. Именно то, от чего мы в сайтах «Агилиса» стараемся уходить.

Баннеры

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

Надпись должна быть текстом поверх картинки.  Вроде не так сложно: текст позиционируем абсолютом, указываем точный отступ сверху и слева. Но для каждого вида баннеров по нескольку типов отступов. Создавала три класса - райт, лефт и центер. И для каждого прописывала свои значения отступов. Хоть и сокращала стили по максимуму, всё равно на одни только баннеры ушло около 150 строк css.

Если дизайнер умеет верстать, он сразу видит, как какой элемент куда ставится. И ещё три раза подумает, когда элементы будет двигать. 

Чистим текст от канцелярита. Добавим конкретики.

Когда дизайнер сдаёт заказчику свою работу, в первую очередь он продаёт красивую картинку, а не интерфейс сложной формы и не содержание страниц. Но, предположим, первое впечатление оказалось удачным, и заказчик начинает вглядываться и вчитываться. На втором месте по значимости – это рыба, заполнение страниц текстом.

Далеко не всегда у заказчика есть на руках готовые тексты. Худшее, что может сделать в данном случае дизайнер – заполнить всё текстовое пространство фразой типа «тут будет текст». Лорем ипсум тоже уже давно набил оскомину.  Чтобы упростить сдачу работы, лучше взять готовый текст с аналогичного сайта. Ещё лучше – отредактировать его самому.

Если дизайнер помимо прочего умеет редактировать тексты, он получает +100500 к экспириенсу и столько же к уважению в глазах заказчика. А, значит, его ценность как специалиста выше.

Вот ещё пара приёмов вдогонку ко вчерашней записи о канцелярите.

Это

В переводных текстах регулярно встречаешь безликое местоимение «это».

Помню, в вузе препод по англицкому троллил двоечников, когда они переводили в предложениях  «it» буквально:

«Что такое “ЭТО”, большое, зелёное в крапинку?!»

Английские местоимения it, this, that не стоит бездумно переносить на родную речь. «Это» – безличный алгебраический значок. Стоит подставить конкретное значение – и фраза оживёт. К примеру, в переводе рассказа о балованной жене читаем:

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

Заменяем:

«На беду, всякий раз её прихоти обходились слишком дорого».

Вещь

Ещё одно переводное слово-паразит.

С ним и после бывали такие вещи

Бывало и такое

Одна вещь печалила его в предчувствии конца

Только одно его печалило

Я тебе скажу одну вещь

Вот что я тебе скажу

Героиня романа «была так очаровательна и так превосходно умела носить вещи» - ну почему нельзя сказать по-русски, что она «так хорошо одевалась»?

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

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