12 советов по созданию макетов в браузере

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

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

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

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


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

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


    1. Начни с простого и используй сетку

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

    Статья по CSS фреймовркам (eng)

    2. Используй хороший редактор.

    image
    Если ты кодишь сайты руками, профессиональный редактор — основа твоего рабочего процесса. Я использую (и очень люблю) Espresso from MacRabbit. В нем есть все нужные мне маленькие фичи как то снипеты и автозавершения а также основные возможности — возможность просмотра изменений в браузере по мере набора кода. Тебе нужно выбрать приложение больше всего подходящее для твоих потребностей.
    Вот небольшой список редакторов:
    • Aptana: Mac, Windows Linux (безусловно мой любимый бесплатный вариант)
    • Komodo IDE: Mac, Windows, Linux
    • NetBeans: Mac, Windows, Linux
    • Coda: Mac (достойная альтернатива Espresso)
    • Text Wrangler & BBEdit: Mac


    3. Применение тени к элементу

    image
    Теперь достойную тень для веба можно создать не только с помощью Фотошопа. Большинство (но не все) браузеры сейчас поддерживают CSS3 что дает нам несколько новых свойств для создания продвинутого дизайна. Одно из наиболее полезных — box-shadow, позволяющее добавлять тени к объектам используя только CSS. Его формат: box-shadow:5px 5px 20px #000000. Эти значения позволяют настраивать высоту и длину тени, а также радиус размытия и цвет.
    Подробнее о box-shadow на CSS.flepstudio.org

    4. Затенение текста

    image
    Если нужно поместить тень на текст используй свойство text-shadow как показано в Kremalicious tutorial. Формат: text-shadow: 1px 1px 1px #000. Первые два значения определяют офсет тени (х и у соответственно), третье — радиус размытия и последнее — цвет тени.
    Это свойство может быть использовано не только для создания теней. В вышеприведенном уроке рассказывается как создать эффект книжного текста, свечения и даже горящего текста.

    5. Округление углов


    image
    Скругленные углы — еще одно свойство, наконец адаптированное в CSS. Свойство border-radius работает в Safari и Firefox. Просто укажи значение в пикселях -moz-border-radius и/или -webkit-border-radius для округления рамки.
    более подробно в 25 Rounded Corners Techniques with CSS.

    5. Создание цветовой схемы

    image
    Фотошоп предоставляет возможность для удобной работы по визуализации и экспериментирования с разными цветами, но существует множество бесплатных ресурсов по созданию цветовых схем в сети. По моему, лучший из них — Adobe Kuler. Kuler это удобный интерфейс для быстрого создания красивых цветовых схем, а также огромная библиотека с поиском готовых схем. Нужно сделать сайт осенним? Просто введи «fall» и получишь на выбор 2600 схем. Kuler помогает очень быстро создавать удивительные цветовые схемы которые можно сразу использовать в CSS.
    25 Awesome Tools for Choosing a Website Color Scheme

    7. Текст с градиентом

    image
    Также, для особо одаренных, есть возможность применить градиенты прямо к тексту в браузере. Что за шаманство, спросишь ты? Посмотри урок WebDesignerWall по этой теме. Суть в том, что ты создаешь span вокруг текста к которому хочешь применить градиент, а потом устанавливаешь фон для spanа повторяющимся PNG с градиентом. Конечно, чтоб сделать PNG тебе понадобится графический редактор (да, ты знал, что тебе придется то и дело обращаться к помощи старого доброго Фотошопа)

    8. Использование RGBA к экранным цветам


    image
    CSS вводит новую возможность, называемую RGBA («A» значит альфа). Используя значения «А», ты можешь назначать непрозрачность заливки. Эта удобная возможность не просто позволяет тебе удобно создавать одноцветные цветовые схемы с разными значениями альфа, но и делает возможным создавать прозрачные объекты, сквозь которые просвечивается картинка под ними, как при уменьшении непрозрачности слоя в Фотошопе.
    подробнее о RGBA в The Right Way to Declare RGBA Colors.

    9. Знай веб-шрифты


    image
    Не попадайся в ловушку использования одной и той же пары шрифтов во всех своих проектах. Измени положение — используя преимущество всего спектра веб-безопасных шрифтов. Typetester — великолепный инструмент для этого. В нем можно просматривать блоки текста с различными шрифтами и настройками (размер, выравнивание итд) непосредственно в браузере. И самое интересно — когда ты подберешь подходящие настройки Typetester экспортирует их в CSS.

    10. Получи более продвинутые шрифты

    image
    Создание текста как картинки в Фотошопе дает свободу использования любого шрифта без заботы о совместимости. К сожалению, этот метод приводит к не выбираемому тексту, по которому нельзя производить поиск. Тем не менее, не так сложно решить эту проблему. Сегодня есть несколько решений для установки собственных шрифтов с «живым» выбираемым текстом с использованием команды @font-face.
    удивительные шрифты на твоем сайте: step-by-step TypeKit tutorial

    11. Дружи со стоками

    image
    Очень часто, особенно в начале работы, тебе нужны иконки кнопок или любые другие элементы которые ты не хочешь сейчас делать. Стоки (такие как GraphicRiver ) дают тебе доступ к элементам готовым к использованию на сайте без обработки в Фотошопе. Даже если ты можешь легко создать объект за час, разве не привлекательно потратив пару минут получить отличный результат не прилагая усилий.

    12. Используй инструменты для тестирования

    image
    В независимости от того как ты разрабатываешь веб-сайты, ты всегда должен знать как основные браузеры будут его отрисовывать. Для этого стоит обратить внимание на Adobe Browserlab. Это удивительно удобная утилита позволяет просматривать сайт в различных браузерах разных операционных систем в реальном времени. Единственный минус в том, что ты можешь осознать, как плохо твой сайт выглядит в некоторых браузерах, что непременно приведет к часам проклятий и почесывания затылка.

    Заключение

    Ну как? Готов сменить свои взгляды и начать создавать сайты вооружившись только текстовым редактором и браузером? Или хочешь чтобы следователь допрашивал меня о коробке из под Фотошопа извлеченной из твоих холодных мертвых пальцев? Конечно все что здесь написано не абсолют. Немного профессиональных дизайнеров создают макеты без помощи, каких бы то ни было графических редакторов. Основной вопрос в том, на что как ты думаешь нужно в первую очередь тратить время на стадии начального наброска? Хотелось бы знать. Используй комментарии для отстаивания своей позиции до конца. По моему, это заключение становится все более и более жутким, так что лучше я остановлюсь здесь.
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 19

      +15
      Половина пунктов звучит как — «Выкиньте IE»
        –2
        современные советы для современных браузеров.
        а для IE 6,7,8 отдельная поддержка и адаптация нужна, больше времени уйдет но и проблем меньше.
          +1
          Удобно, если человек, который делает макет его же и верстает. Неприменимо, в случае, когда дизайнер и верстальщик — разные люди.
          И да — до свидания все браузеры, не держащие CSS3.
            0
            Насколько я понял речь идет о макете. С таким же успехом можно сказать до свидания все браузеры, не держащие Photoshop.

            P.S. Разве графический дизайнер делает макет сайта?
              +2
              А кто по вашему делает макет сайта?
                +1
                Макет сайта по хорошему должен делать проектировщик, например дизайнер интерфейсов, макет это по сути разметка поля деятельности для дизайнеров и программистов в той или иной степени, а когда макет Изначально создается в photoshop даже без скетчей (роль которых в данном случае выполняет html+css шаблон), например бумажных, конечно распространенный, далеко не лучший подход.
            –1
            >Готов сменить свои взгляды и начать создавать сайты вооружившись только текстовым редактором и браузером?
            Я готов создавать сайты вооружившись ПО, которое не исчезнет в тот миг, когда вдруг упадет канал в интернет.
              0
              см. совет №2
                0
                Спасибо, я прочитал. Я, в принципе, в целом о процессе создания форм в браузере написал :)
                  0
                  Вы не поверите… Создавать html, css, js можно вообще без канала в интернет. И даже без веб-сервера.
              0
              Тени под блоками? Разные шрифты? Давайте как-то без этого.
                0
                А можно как-то имитировать cleartype в фотошопе?
                  0
                  Лично мой опыт построен на mcedit — это плохо или хорошо?
                    0
                    Кстати, многие из его пользователей до сих пор не знают про присутствие буфера обмена.
                    +2
                    Неплохой инструментарий, будет очень удобно, поскольку фотошопить не умею, а занимаюсь программированием, но всегда хочется чтобы и визуально выглядело прилично =)
                      +1
                      а где TextMate?
                        +1
                        Давно уже практикую, макетирование вэб-сайтов изначально создвая html+css+js каркас, который потом, при необходимости, детально вылизывается (создаются: иконки, иллюстрации, и другин элементы интерфейса) в photoshop ||gimp || illustrator || inkscape.
                          0
                          на самом деле правильная идея в том что макет заказчику надо показывать в html, потому что простой скрин уже не отражает всего веба, динамика, эффекты и так далее. а как кто приходит к html, минуя фотошоп или нет это уже дело девелопера.
                            0
                            Только вот макетирование такое предполагает линейное развитие работы над макетом. Придется забыть про «подвигать блоки и посмотреть как лучше смотрится», или про «а давайте ВАЩЕ поменяем сетку сайта», как ни крути, но в граф. редакторе это в разы быстрее и нагляднее. Что-то наверное можно смакетить сразу версткой, но далеко не все.
                            А то что показывать надо интерактив по возможности — это правильно, правда не обязательно сразу верстать на чистовую, можно обойтись банальными имидж-мапами, или анимацией на флеше…

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                            Самое читаемое