Реализация
На рисунке выше показан «эскиз на салфетке», который передал мне мой потенциальный клиент — это один из способов обеспечения необходимой структуры.
Поговорив еще с моим клиентом, я собрал дополнительные требования к главной странице:
Клиент хочет после заголовка и вводного текста кнопки «подробнее».
В области «what people are saying» будет не более двух цитат.
Клиенту нравится идея с белым цветом фона и большими изображениями.
Самое время, запустить Photoshop и создать прототип, который принимает реальные размеры и обеспечивает более профессиональный вид.
Начните с создания макета на основе 960 пиксельной сетки (о который вы можете узнать в разделе «Setting up a Grid in Photoshop»), теперь, макет составляет 1100 пикселей в ширину и 750 пикселей в высоту. Если вы хотите, используйте инструмент Paint Bucket Tool (G), чтобы залить фон светло-серым, для представления, фонового цвета или изображения.
Выберите Rectangle Tool (U) и нарисуйте окно, которое будет представлять область содержимого. Поскольку я использую 960 сетку, ширина содержимого 940 пикселей. Я сделал цвет переднего плана белым, так что она проявляется на сером фоне.
Чтобы сделать этот процесс быстрее, нажмите D, чтобы установить передний план черным, а фон белый. Мы будем рисовать черные прямоугольники для представления содержимого в областях, а затем изменять непрозрачность, чтобы они выглядели серыми, как показано здесь:
Следуя сетке, добавьте прямоугольник для представления логотипа. Уменьшите прозрачность прямоугольника, введя значение непрозрачности («30») после того, как вы нарисуете прямоугольник. Если вы хотите добавьте текст «LOGO» с помощью Type Tool (T). Добавить еще один прямоугольник представляют области навигации, и снова, снизьте значение непрозрачности, чтобы сделать его серым.
Вы можете добавить прямоугольники, чтобы указать области с контентом. Следующее изображение показывает, решение использовать две колонки, большую для главного контента, а меньшую для изображений. Я установил непрозрачность 10% для столбцов, а также добавил еще один прямоугольник, который представляет подвал в нижней части страницы.
Рисуем прямоугольники для представления содержимого в столбцах. Вы можете также добавить фиктивный текст, используя команду «Photoshop> Paste Lorem Ipsum».
Создание грубого прототипа дает представление клиенту о том, где, что находится и позволяет быстро, и легко редактировать содержимое, при необходимости перемещать элементы.