Это должно хорошо запустить расположение веб-сайта с макетом фотошопа?

Mockups are great, but I don't know if photoshop is the very first thing you'd want to try for the purpose -- at the very start, when you're just trying to get a logical layout for the various pages of the site (before refining it in terms of looks &c), a whiteboard with dry-erase markers and post-it notes affords for very fast, repeated mock-up rearrangements for the early brainstorming. Once there is some reasonable agreement on one (or a very few) possible arrangements of information, then visually more accurate tools enter into play.

BTW, just don't forget to photograph the whiteboard before changing it (any decent cellphone will do, you're not trying for high quality here;-) any time there are ideas or suggestions you may want to revisit or ponder in the future!

It is fast. This is why i always use this method. You don't want to spend the time building cross-browser CSS until you are actually set on a layout.

If you're productive that way, why not? Not everybody manages to envision their Web site perfectly as they're typing in a bunch of angle brackets.

More seriously put: It's your job, so it's your responsibility to do it in a way that allows you to do it effectively.

При создании прототипа важно выбрать правильную точность. Эта статья из BoxesAndArrows дает хорошее введение в различные варианты и их использование.

Мне особенно нравится эта фраза Билла Бакстона , которую цитирует статья:

Нет таких понятий, как высокая или низкая верность, есть только соответствующая верность.

В этот TechTalk автор команда дизайнеров Facebook , они упоминают, как они используют Photoshop в своем процессе проектирования (IIRC это где-то на полпути, но я не могу переслать видео).

Большинство художников-графиков веб-дизайна работают таким образом.

Многие программисты просто считают это пустой тратой времени.

У этого есть преимущества и недостатки.

Преимущества:

• Многие художники-графики увлекаются фотошопом / иллюстратором больше, чем ткачом снов.

• Клиент получает предварительный просмотр конечного продукта, который работает везде : Mac, ПК, Firefox, то есть Safari, что угодно. Отправка предварительного просмотра HTML на ранних этапах производства разработчикам, использующим firefox, и клиентам, использующим MSIE, всегда вызывает проблемы.
  
  И не думайте, что надо быть умным, набрасывая html, управляемый MSIE. Начать с нестандартного html и преобразовать в стандартный труднее, чем делать это наоборот.
  Есть еще одна загвоздка: многие клиенты веб-сайтов, как правило, имеют Mac и используют Safari . Веб-коммитенты, как правило, более склонны к графике, чем в среднем, поэтому шанс столкнуться с Mac-маньяками выше в этом секторе, чем в других.

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

Недостатки:

• «Вырезание» графического дизайна в HTML становится дополнительной работой , и это неясно, кто будет платить за это дополнительное время.

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

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

• Грязные трюки CSS вставьте в свой дизайн. Используя макет HTML, заказчик одобрил бы дизайн, основанный на коде, с меньшим количеством трюков.

В любом случае, я бы не предлагал фотошоп для макета, но inkscape . (или иллюстратор, Если вы поклоняетесь саману, сжигая кучу денег в магические круги в полночь)

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

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

Не делать ничего и всегда можно полагаться на примеры сайтов и снимки экрана для графической справки.

Agile methodology would suggest something easily modified in consultation with the customer. Dave Thomas in Agile Web Development with Rails suggests scribbling on paper. But anything has got to be better than chipping away directly at handmade CSS unless you really know what you want.

I was thinking about saying "scribbling might not cut it for a formal presentation" but the awesome SO crowd beat me to it in the comments...

Personally, and at every webdev firm I've worked at, I've always mocked-up in photoshop first. Jumping straight into CSS and markup is more of a bottom-up approach and makes sense to a lot of programmers but in web development you have to keep in mind that there are aesthetics to consider and a creative direction to follow. It's not enough that your product is functional, it needs the input of a professional creative-director/graphic-designer in order to make the product pleasant to look at and use.

In my experience, the problem has always been wrestling with inflexibility of team-members. Graphic designers who are aesthetics focussed and refuse to compromise their design integrity; which sometimes results in impossible or extremely difficult and un-semantic layouts. Developers who flatly refuse to compromise the integrity of their code where there is a workable solution - which might be a little less elegant. The key is to have a creative team who is intimately familiar with CSS and what is and isn't possible and an engineering team who have an appreciation of the importance of design and aesthetics.

In my freelance life (having had the benefit of working in both camps) I find it much easier to mock-up in photoshop first because I know what I can and can't do. And photoshop mockups are a lot easier to change on client feedback than are CSS and markup. Also, if you can show your client a mock-up, they feel more secure because they know that their money is going into a well planned project with a definate direction.

Hope this helps!

Я веб-программист, достаточно хорошо знаю html и css. Я могу использовать графическую программу для базовой функциональности, но создание полноценного графического сайта не мое дело.

Я позволяю графическому дизайнеру использовать его или ее графическую программу для создания красивого макета, а затем вручную кодировать сайт в html и css.

Это работает на меня, и дает моим клиентам дизайн, который им нравится (потому что графический дизайнер всегда сделает гораздо более красивый дизайн, чем большинство веб-программистов).