Делаем инновационный дизайн сайта-портфолио с альтернативным UI/UX.

Думайте о сайте-портфолио как о своем представителе перед лицом потенциальных клиентов. Тщательно сделанный, он должен рассказать людям о том, чем вы занимаетесь, показать ваши лучшие работы и дать им возможность связаться с вами. Это все очевидно – тогда в чем же разница между обычным сайтом-портфолио и на самом деле запоминающимся сайтом?

Разгадка создания эффективного сайта-портфолио – не в больших проектах – она в произведении впечатления на посетителей. Конечно, это могут быть великолепные иллюстрации, если вы графический дизайнер – но для веб-дизайнеров и разработчиков это часто значит необходимость расширения границ UI/UX и кодирования ради того, чтобы показать свои самые сильные стороны.

В этом учебнике Пол Дж. Нобл (Paul J Noble) собирается показать нам на примере собственного сайта, как он применил простые, но отличающиеся новаторством подходы к UI/UX для создания превосходящего ожидания пользователя портфолио, используя интерактивность и легкие световые эффекты.

Давайте примемся за него!
Шаг 1. Холст

Создайте в Photoshop новый документ размером в 1400 x 900px. Окончательный, визуализированный HTML сайт получит в качестве отличительной черты «резиновые» (т.е. масштабируемые) элементы, так что нам следует помнить о том, что окончательная модель будет не фиксированного размера.

Шаг 2. Разметьте основу

Создание устойчивого фона – это легкий способ начать работу. Для этой модели мы будем использовать основной цвет, достаточно темный для подчеркивания изображений переднего плана, и в то же время смещенный чистый черный, который может оказаться в изображениях портфолио. Мы также включим немного размытия для создания «прохладного» темного цвета, который объединится с элементами интерфейса.

Выбрать слой/Select Layer > Новая заливка слоя/New Fill Layer > Плотный цвет/Solid Color и назначьте цвет #252a3b.

Шаг 3. Разметка направляющих

Так как мы пользуемся масштабируемой разметкой, то нужно определить минимальную ширину по горизонтали. Для большинства коммерческих сайтов это примерно 1000 px, чтобы приспособиться к пользователям с дисплеями разрешением 1024×768. Однако для этого сайта мы установим как минимальную ширину 1100 px.

Сначала убедитесь, что элементы ваших направляющих установлены на пиксели. Это можно определить, зайдя в Установки/Preferences > Единицы измерения и линейки/Units & Guides.


Затем зайдите в Вид/View > Новая направляющая/New Guide. Так как мы собираемся расположить контент в центре и сделать минимальной общую ширину в 1100 px, то следует разместить вертикальный направляющие на 150px и 1250px.

Шаг 4. Создайте текстурный узор

Тонкие диагональные линии помогут сделать дизайн модели тоньше путем создания разделения между элементами портфолио переднего плана и текстурным фоном.

Чтобы добиться этого, мы применим слой с заливкой Узор/Pattern. Однако сначала нужно создать узор.

Создайте новый документ 12×12 px с прозрачным фоном и добавьте новый фон с черной заливкой (#000000).


Теперь добавьте новый слой (Слой/Layer > Новый/New > Слой/Layer). При помощи инструмента карандаш с размером кисти 1px начертите три линии в точности так, как они выглядят на изображении внизу.


Выключите заливку и установите непрозрачность слоя с линиями на 6%. Чтобы сохранить его в качестве узора выберите Правка/Edit > Определить узор/Define Pattern.

Вернувшись к исходному холсту, создайте новый слой с узором, выбрав Слой/Layer > Новый слой-заливка/New Fill Layer > Узор/Pattern и выберите ранее определенный узор.