Проектирование веб-сайтов в браузере (вздох!) [закрыто]

https://stackoverflow.com/questions/432849

10-07-2019
|

Вопрос

Меня интересует мнение людей о плюсах и минусах или прямое «нет» по проектированию веб-сайтов в браузере и отказу от Photoshop, Fireworks и т. д.

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

Например (я использую сетку размером 960 пикселей с 12 столбцами):

<div id="news_section" class="floatleft columntwo spanfourcolumns">
   …content
</div>

<div id="recent_work" class="floatleft columnfour spansevencolumns">
   …content
</div>

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

Что вы думаете?

Решение

Вы говорите, что сначала создаете каркас страниц в браузере (с помощью HTML / CSS), а затем применяете дизайн? Это то, что я делаю (и 37Signals следует этой мысли тоже).

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

Кроме того, у программистов не бывает особых проблем с дизайном - я бы хотел оставить это людям, которые знают каждую PS-команду под солнцем:)

Я также использую сетки YUI CSS для быстрого создания макетов.

Другие советы

Работа в браузере - не самая страшная вещь в мире, но есть пара «чертовски нет»:

1) НЕ разрабатывайте свое приложение с помощью IE. Используйте Chrome или FireFox. Несоответствующее поведение IE может заставить вас думать, что ваш CSS действителен, хотя на самом деле это не так. Основным вариантом использования IE является тестирование вашего сайта в IE.

2) Не называйте свои классы так, как они выглядят, как вы сделали в своем примере.

Не!!

Если iDesign Стив научится проектировать прямо в браузере,

Инновации пострадают:Стива не волнуют ограничения CSS/HTML и прочего.Он волен представить самое впечатляющее место, которое еще не видело человечество.Обязанность среднестатистического программиста Джо - расширить границы CSS/HTML и еще чего-то, чтобы вовремя втиснуть одобренный проект и увидеть, как его разрывает на куски какой-то дурацкий браузер, который, как оказалось, имеет значительную долю рынка, как раз перед дедлайном.Признайтесь, написание CSS похоже на написание ассемблерного кода.Выполнение даже самых простых задач (кто-нибудь может использовать гибкую многоколоночную компоновку?) невероятно сложно, и на какое-то время это вызывает у вас кайф.
Фактор крутости Стива уменьшится:Ни один из моих знакомых разработчиков не использует инструмент WYSIWYG для создания HTML/CSS и не считает это приемлемым.Когда все, что вам нужно, это текстовый редактор, вы выглядите не так круто.Когда клиент бросает взгляд на монитор Стива и вместо нескольких окон видит кучу текста, сотню забавных иконок и полторы готовых красочных черновика, он с таким же успехом может подумать: «Мой семилетний внук тоже умеет печатать. ..».
У Джо все еще больше ограничений, чем у Стива:Сайт должен быть доступным, макет должен быть достаточно гибким, чтобы вместить все виды вывода, хорошо работать с JavaScript...Если CSS/HTML все равно будут переписаны, бороться бесполезно.

Будьте хорошим товарищем по команде и запустите Photoshop прямо сейчас.Джо нужна работа, чтобы оплачивать счета.

Для кого-то с моим уровнем некомпетентности в дизайне это один набросок белой доски, а затем прямо в HTML и CSS.

Тем не менее мои сайты выглядят ужасно ...

За последние несколько сайтов, которые я сделал, я использовал оба подхода. Каждый раз, страница, разработанная непосредственно в HTML / CSS, занимала намного меньше работы, но была гораздо менее привлекательным сайтом. Если вы хотите сделать привлекательную страницу, начните с Photoshop, иначе вы слишком часто будете использовать ярлыки в своем CSS. Идея может быть создана быстрее и намного более гибка в Photoshop, что поможет вам экспериментировать с вашими идеями, и вы создадите визуально лучший сайт.

Я никогда не проектирую сайты в Photoshop; Я иду прямо от физических набросков к HTML и CSS. Я нахожу это быстрее, и вы не выбрасываете то, над чем работали часами (файл Photoshop).

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

Хотя мне нравится использовать свои собственные библиотеки CSS, посмотрите Google Blueprint и зацените эту статью веб-дизайнера Марка Боултона.

конечно нет!

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

но я не понимаю, почему кто-то упоминает PhotoShop.это почти последний инструмент для веб-дизайна, возможно, Illustrator — единственный, еще менее подходящий для этого.

Я обнаружил, что, хотя физический эскиз может помочь вам выбрать верный путь к дизайну, вы можете создавать гораздо более привлекательные макеты в Adobe Illustrator (который намного легче перемещать элементы, чем в Photoshop). Как только ваш дизайн будет завершен, используйте Photoshop, чтобы нарезать его.

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

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

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

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow