Проектирование — этот, возможно, ключевой этап создания интернет-сайта, отвечает нам на следующие вопросы:

1. Каковы наши цели — зачем мы делаем сайт? Как мы реализуем поставленные цели?
2. Как сайт будет выглядеть и работать?

В предыдущих своих топиках я давал лишь сухую теорию о верстке рассылок, и считаю, что подошло время практики. Кардинально новой информации относительно предыдущих статей читатель не почерпнет, но увидит как применяются на практике описанные ранее мною советы. В качестве примера будем использовать макет рассылки выдуманной компании(рисовал сам). С макетом, а затем и разбором верстки можете ознакомиться по катом.

Чистое SEO, которое так не любят многие профи от веба, медленно, но верно умирает. И слава богу.

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

Совсем недавно хороший знакомый рассказал свое видение того, почему со словами «продвижение» и «SEO» связан на 99% негатив со стороны разработчиков.

Получилась сказка.

Действующие лица:
Будущий владелец сайта – человек, считающий себя супер-бизнесменом и уверенный, что знает все лучше других;
Вебмастер – начинающий верстальщик-программист-дизайнер, который полагает, что установка бесплатной CMS с типовым шаблоном и закидывание на все это контента, который остался от полиграфических материалов клиента, и есть разработка сайта;
SEOшник – рубаха-парень, который прочитал пару книг по оптимизации, освоил биржу ссылок и зарегистрировался три месяца назад на форуме оптимизаторов.

На сегодняшний день диапазон цен на рынке веб-сайтов колеблется от 500 рублей до 50 000 евро и выше. Давайте разберемся, сколько стоит сайт и почему. Простой расчет поможет убедиться в справедливой стоимости профессионально выполненного сайта и наведет заказчиков на несколько полезных жизненных выводов. Выводы навеяны опытом работы и отзывами наших клиентов. Интервалы цен приведены, по большей части, для региона «Центр».

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

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

Здравствуйте! Сегодня вашему драгоценному вниманию предлагается немного видоизменённый отрывок из свеженапечатанной книги нашего генерального директора Ивана Севостьянова «Поисковая оптимизация».


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

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

А еще работа с клиентами бывает нудной, затянутой и неинтересной. Эти клиенты звонят тебе сами в 7-мь утра и ты чертыхаясь и ненавидя всех вокруг, начинаешь еще одно утро с таким заказчиком.

Само понятие модульной сетки, за последние несколько лет стало чрезвычайно модным. В первую очередь у дизайнеров. И во-вторую очередь у верстальщиков.

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

Немного про модульные сетки

Модульная система вёрстки — система вёрстки, при которой основой композиции полос и разворотов становится модульная сетка с определенным шагом (модулем), одинаковым или разным по горизонтали и вертикали. По мотивам Википедии.

Относительно недавно познакомился с CSS-сеткой Golden Grid. Мне она понравилась небольшим весом и использованием правила «золотого сечения». Golden Grid более простая, чем Blueprint. Я не настаиваю на том, что она более удобная, но для моих задач подходит как нельзя лучше.

Вместо обозначений классов span-1, span-2… используются более интуитивные g160, g320 и т.д. Кроме того, неплохая типографика, подстроенная специально под сетку.

Сетка относительно новая (2009), поэтому не хватает многих важных деталей. Например, psd-шаблона. Решив заполнить столь значимый пробел, я создал такой шаблон, благо много времени это не занимает. Проведены и линейки, и серые прозрачные прямоугольники. Это сделано для того, чтобы сетку можно было ставить поверх основного дизайна.

Скачать (.zip, 20 кб)

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

Всегда объясняйте клиенту, зачем вы спрашиваете о бюджете

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

Джон, в свою очередь, с подозрением относится к вашему вопросу. Зачем вам знать о его бюджете? Единственная убедительная причина, которая приходит ему в голову – вы не хотите случайно назвать цену меньше той, которую он готов заплатить. Кроме того, он и сам не знает, какой у него бюджет. Откуда ему знать, сколько стоит сайт?


Клиент не должен думать, что вы выманиваете у него деньги.

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

ОФФТОП: Хочу выразить свою благодарность, всем кто плюсанул мой предыдущей пост и карму, это позволило мне пригласить на Хабр еще несколько хороших людей.

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

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

Amy Editor

Созданый в 2007 Петром Кронторадом (Petr Krontorad), Amy Editor продвинутый редактор с интерфейсом в стиле Mac. Amy Editor имеет в наличие кучу полезных опций, такие как нумерация строк, подсветка синтаксиса, сниппеты для более чем 20 языков, совместное использование и прочее.

» http://www.amyeditor.com

перевод статьи: 12 Killer Tips for Designing in the Browser

Как Вы создаете макет сайта?

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

Основная идея

Meagan Fisher на 24ways.org представил неотразимый довод проектирования в браузере. Хотя я и не разделяю его презрение к Фотошопу (Я люблю Фотошоп больше любого другого ПО на планете), я согласен с некоторыми другими его пунктами. Фишер говорит, что статическое изображение не дает по настоящему ощутить, как сайт будет работать и что проектирование в браузере направляет твои силы на организацию контента до дизайна, что гарантирует большее удобство и создание правильной структуры

Мы будем использовать статью Фишера как затравку для наших заметок по превращению в профессионала в создании фантастических in-browser макетов готовых к работе сразу по получению одобрения от клиента.

Как сделать панорамное фото с трехмерным обзором


Вертеть головой — потянув мышкой, или курсорами ← →, приближение/удаление — колесиком мышки.
В этой статье я расскажу о том, как делать панорамные фотографии, а так же
как из них сделать круговые 3D-панорамы: какие для этого нужны программы, и как ими пользоваться. Словом, попробую показать весь процесс шаг за шагом. В конце статьи сделаю небольшую работу над ошибками, и расскажу о том, как их избежать в будущем.
Вообще, сделать панорамное фото (в т.ч. круговую панораму) совсем не сложно.
При минимальном навыке на всё уйдет минут 10.

Перечислю всё, что нам понадобится:

Автор изображения: wiseacre.

Кто виноват?

Кем бы вы ни были: фрилансером, сотрудником веб-студии, заказчиком сайта или просто сторонним наблюдателем — наверняка вы задавались вопросом «Откуда в русском интернете столько плохих сайтов?». Кто виноват в том, что в рунете много сайтов с неудобной навигацией, непродуманной типографикой, бестолковыми текстами и неряшливыми картинками. Работники студий? Фрилансеры? Клиенты? Давайте копнем глубже и посмотрим на процесс создания сайтов в различных студиях.