Что нужно знать, если рисуешь дизайн сайта впервые.

macbook-svettambova

  1. Минимальный размер макета в пикселях: 1024×800. (ширина – минимальный размер монитора на данный момент). Сейчас модно рисовать сайт 1200 пикселей шириной.  Тогда вспомните, что так же модно использовать планшетники, у которых размер – 1024 пикселей. А это значит что края вашего сайта, в частности лого и номера телефона будут видны не полностью или не видны вовсе…От автора: Причем я рисую в 960х780 – а потом приплюсовываю поля по краям. Так я знаю точно, что все вместится и программистам будет проще сверстать. Вы можете сказать, что все пропорционально уменьшается? Да. И становится мелким. Недаром сейчас, в рекомендации от поисковых систем для продвижения входят дополнительные дизайны для планшетов и мобильных телефонов.
  2. Цветовая гамма RGB – цвета монитора. Профиль CMYK  используется для полиграфии.От автора: если вы вышлете клиенту дизайн в СМИКе, он будет перевран монитором, т.е. будут другие, более ядреные цвета, а значит дизайн будет испорчен. Пожалейте свой труд, сохраните макет из Фотошопа через “Save to web”

  3. Допустимые шрифты для макета: verdana, tahoma, arial, georgia, times new roman – они установлены на всех компьютерах Windows по умолчанию и есть аналоги на Маке. Сейчас, в разных пиратских сборках шрифты отличаются, но эти шрифтs есть всегда.
    Есть и другие шрифты. Как использовать нестандартные шрифты – новичкам не нужно знать, чтобы не запутаться.  Если научитесь делать красиво  с обычными шрифтами – будете проще потом.От автора: Есть замечательный сайт (и это не реклама :) )  http://webfont.ru Здесь можно выбрать разные шрифты, с засечками, без, рубленные, декоративные – и скачать файлы, сразу включающие в себя и веб-форматы!! Это крайне удобно, пользуюсь сама и вам советую.
  4. Не больше 3-х шрифтов должно использоваться в макете. Наклонное и обычное начертания одного и того же шрифта – считается за 2 разных шрифта.От автора: Ну это аксиома, тут не надо это объяснять. Посмотрите на сайт Apple и все поймете. Минимализм сделать стильными “вкусным” довольно сложная задача, но выполнимая.

  5. Размер текста на странице должен быть 12 или 14 пикселей.От автора: Кроме заголовков и фишек, конечно. Сейчас это довольно красиво и много где используется, но остальной шрифт не должен быть гигантским.
  6. Не используйте эффекты для выделения текста.  Текст переводить в картинку только ради сохранения эффекта – это используется в крайнем случае и считается признаком не професионализма. Поэтому при работе с макетом НЕ используйте полужирность текста кнопка "полужирность текста" в фотошопе,  НЕ используйте эффекты сглаживания кроме выделенного на картинке сглаживания шрифтов в фотошопе , также никаких сжатий и растягиваний текста, и прочие искажения текста НЕ допустимы!От автора: Если хотите сузить или расширить расстояние между буквами, воспользуйтесь тем, что показано на картинке. эффект сжатия текста
  7. Программисты могут использовать эффекты: тень, углубленные буквы, полупрозрачность.   И с помощью только этих инструментов можно рисовать очень красивые и стильные сайты ;) Проверено :)От автора: А чтобы вы сразу знали, как будет выглядеть дизайн без “фантазий” программиста, для текста например, можно под буквы подложкой сделать дубликат этого же текстового слоя. при разных вариациях более темная подложка выглядит как тень, а более светлая, как выпуклость или вдавленность текста.
  8. Я рекомендую использовать англоязычные версии программ. Это расширяет кругозор и вы показываете себя профи. Да и тем, кто работает после вас над макетом будет проще. Особенно при верстке сайта важно понимать что может отобразить программист, а что нет. А код пишется на англ.языке.От автора: как-то пришлось исправлять макет за другим дизайнером, в фотошопе, где все было на немецком языке. Зная расположение элементов в программе я справалась с этой задачей. Расширяйте кругозор! ;)
  9.  Продумать фон. Для первого раза я рекомендую рисовать статичный, а не резиновый сайт. А это значит что фон за размером (шириной) 1024 px  – должен быть не напрягающе-однотонный: белый, светло-серый, бежевый или других пастельных тонов.  Ну а если хотите фоновый рисунок – рисунок должен быть ПОВТОРЯЮЩИМСЯ! и с незаметными границами.

Пример: повторяющийся бэкграунд

Это не полный список. Буду дополнять. Есть вопросы? Задавайте!

Материалы статьи доступны по лицензии:80x15

Читайте также:

комментария 3

  1. Андрей Зенков:

    я что то не так понял? какая разница на английском фотошоп или на русском? как программист узнает на какой версии я работал? у него же своя программа

    • Это пожелание. Рекомендация. Так проще работать с вашими файлами другим людям, у которых не начальный уровень. На счет программ для программистов. Далеко не всегда для программиста готовят все файлы и ему не нужно их вырезать из Фотошопа. Особенно это касается новичков. Они попросту не умеют верно подготавливать файлы. Есть средний уровень: те, кто могут собрать все нужные элементы UI в отдельный файл, с которым легче работать программистам. Но опять же – это файл в фотошопе. И оттуда уже программист (чаще верстальщик), вырезает так, как ему надо. Переименовывает так, как ему удобно. и т.п. Поэтому, чтобы нас не ненавидели люди, которые работают с файлами на следующем этапе – надо их уважать и облегчать работу.

  2. Александр:

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *