Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

16

Від автора: Лауреат премії awwward, унікальний сайт-портфоліо Підлоги Дж. Нобла (Paul J Noble) привернув увагу багатьох людей, і в тому числі не тільки клієнтів. Сьогодні у своєму підручнику він продовжить пояснювати розділ дизайну і продемонструє його кодування.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Крок 1: Що ми створюємо

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Прикладом портфоліо в даному підручнику використовується чудовий вебсайт ROA (Швеція). Цей сайт був нещодавно представлений на Creattica і його автор не пов’язаний з ROA. Не соромтеся в якості елементів портфоліо використовувати свої власні роботи.

Ми збираємося створити онлайн сайт-портфоліо з сіткою зображень, фіксованим заголовком, текстом і елементами інтерфейсу. Розмітка буде створена таким чином, щоб вміст без прокрутки добре підходило майже до всіх дисплеям і масштабами користувачів при великих розмірах монітора, акуратно при цьому зменшуючись в меншому дозволі. Сітка буде показувати тільки поточне, активне зображення, однак при цьому містити безліч прихованих зображень, дивитися які можна через сторінкову навігацію.

Створення шаблону HTML і CSS підготує нас до наступного розділу цього підручника, де ми за допомогою Javascript додамо інтерфейсу взаємодії і вдихнемо в життя проект.

Крок 2: Встановлюємо шаблон

Створіть у своєму улюбленому текстовому редакторі документ html. Приєднайте jQuery (1.4.2+) і новий порожній файл CSS.

Першої створеної нами розміткою буде div, що містить весь контент. Пізніше ми встановимо значення мінімальної висоти і ширини для цього div а (‘#page’) для гарантії того, що модель масштабується при більш низькому дозволі. Створіть ще кілька div ів для зображень нижче основних елементів сторінки.

Your Name — Digital Portfolio

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Крок 3: Заголовок

На сайтах, які не потребують вертикальній прокрутки, менш настирливо виходить розміщення елементів навігації і заголовка внизу екрану. Так звільняється додатковий простір в області верху вікна, частіше потрапляє в поле зору. Ми б хотіли, щоб цей елемент розтягувався на всю довжину монітора користувача і завжди знаходився внизу екрану.

Хоча візуально він розміщується внизу, насправді він виявиться поверх розмітки документа. Ми створимо div з ID ‘header’, а потім вкладений div з класом ‘inner’. Прихований пакувальник спростить розміщення внутрішніх елементів.

Всередині пакувальника ми створимо три div а; ‘#logo’, ‘#social’ і ‘#nav’.

Для створення логотипу ми вкладемо файл зображення під назвою ‘content-1/images/logo.png’ і додамо трохи тексту. Створіть файл з зображенням логотипу, вирізавши свій лого з PSD. Так як його потрібно абсолютно позиціонувати, точний розмір неважливий – проте переконайтеся, що зображення-логотип підходить до колонці навігації проекту.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Для кнопок соціальних мереж нам знадобляться три покажчика – по одному для facebook’а, Flickr’а і LinkedIn. У них будуть фонові зображення, що застосовуються як графіка, однак ми все ще буде використовувати в семантичних цілях текст і будемо приховувати їх за допомогою CSS. Для зовнішніх посилань ми споживемо атрибут target=’_blank’, щоб сторінки відкривалися в новій вкладці або вікні.

Для навігації ми знову застосуємо три покажчика і призначимо їм власні класи і значення id.

Графічні об’єкти для інших елементів не будуть такими ж простими, як логотип. Так як вони інтерактивні, то їм знадобляться стану проведення над ними мишею, а для кнопок навігації потрібні активні стану.

Для кнопок навігації ми створимо зображення-спрайт. Поверніться в Photoshop і створіть навколо кнопок buttons вибірку в PSD. Виберіть Edit/Редагувати > Copy Merged/Скопіювати поєднані дані.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Потім виберіть File/File > New/Створити новий. З’явиться діалогове вікно з шириною і висотою обраного перед цим прямокутника за замовчуванням. Змініть висоту на в 3 рази більшу, ніж значення за замовчуванням. Так створиться новий полотно, відповідний до трьома версіями навігаційної графіки, по одному для кожного стану; активного стану проведення миші над елементом і неактивного.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Тепер перемістіть папку з кнопками buttons з PSD і двічі продублюйте цю групу для створення трьох груп. Злегка відрегулюйте колір тексту кожної групи для створення різних станів кнопок. Внизу наведено приклад остаточного графічного вигляду. Збережіть кінцеву версію як PNG (24-біт) в ‘img/icons/nav.png’, переконавшись, що фон прозорий.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Для кнопок соціальних мереж нам знадобляться всього два стани (‘hover’ і ‘off’). Повторіть вищеописаний процес для створення зображень-спрайтів кнопок соціальних мереж. Зберегти зображення як ‘img/icons/social-media.png’.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Нарешті, створити нове зображення ‘img/bg/header.png’.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Тепер, коли ми розробили структуру і цифрові об’єкти зображення, давайте створимо CSS-стилі для цієї сторінки.

Нагорі файлу CSS ми включимо повернення CSS у вихідне положення для гарантії того, що ніякі настройки за промовчанням, властиві окремим браузерам, не втрутяться в нашу розмітку.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a abbr, acronym, address, big, cite code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, венеції,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1.2 em;
font-family: arial, sans-serif;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: «;
content: none;
}
:focus {
outline: 0;
}
ins {text-decoration: none;}
del { text-decoration: line-through;}

Тепер створимо кілька основних стилів головних елементів сторінки.

body, html {
height: 100%; }
body {
background: #0f1219; }
#page {
height: 100%;
min-height: 700px;
position: relative;
min-width: 1100px;
overflow: hidden; }
h1, h2, p, li,div { font-family: «arial», «helvetica»,sans-serif; }
li {font-size: 12px;}

Далі призначимо стилі заголовку. Для полегшення управління проектом ми застосуємо абсолютне позиціонування логотипу та інших елементів.

Примітка: ми маємо намір призначити стилі своїм вказівниками як елементів блоку (‘display: block’) і при негативному текстовому відступі гарантувати доступні, до того ж засновані на графіку елементи. Ширину і висоту можна підігнати, якщо ваші користувальницькі файли зображень-спрайтів відрізняються за розмірами.

#header {
background: url(‘../img/bg/header.png’) repeat;
height: 60px;
z-index: 1200;
overflow: hidden;
position: absolute; bottom: 0; width: 100%; }
#logo {
position: absolute;
top:0px;
left: 30px; }
#header .inner {
width: auto;
padding: 0 30px;
position: relative;
height: 70px; }
#nav {
position: absolute;
right: 30px;
top: 14px;
height: 31px;
width: 290px; }
#nav a {
background: url(‘../img/icons/nav.png’) no-repeat 0 0;
text-indent: -9999px;
float: right;
display: block;
outline: none;
height: 31px; }

Тепер призначимо кожній кнопці навігації індивідуальні стилі, завдавши позиції різних зображень-спрайтів в клас кожної кнопки.

#nav a.work {
width: 95px;}
#nav a.work:hover {
background-position: 0 -62px;}
#nav a.about {
width: 93px;
background-position: -188px 0;}
#nav a.about:hover {
background-position: -188px -62px;}
#nav a.workActive {
width: 95px;
background-position: -0px -31px;
cursor: default; }
#nav a.aboutActive {
width: 93px;
background-position: -188px -31px;
cursor: default;}
#nav a.photos {
width: 93px;
background-position: -95px 0; }
#nav a.photos:hover {
background-position: -95px -62px;}
#nav a.photosActive {
width: 93px;
background-position: -95px -31px;
cursor: default; }

Далі зробимо те ж саме для кнопок соціальних мереж.

#social {
width: 88px;
height: 26px;
position: absolute;
top: 17px;
right: 330px; }
#social a {
display: block;
background: url(‘../img/icons/social-media.png’) no-repeat 0 0;
float: left;
height: 26px;
width: 26px;
outline: none;
float: left;
margin-right: 4px;
text-indent: -9999px;
overflow: hidden; }
#a social.fb { background-position: 0 0;}
#a social.fb:hover { background-position: 0 -26px;}
#a social.flickr { background-position: -30px 0;}
#a social.flickr:hover { background-position: -30px -26px;}
#a social.linkedin { background-position: -60px 0; margin-right: 0;}
#a social.linkedin:hover { background-position: -60px -26px;}

OK, тепер поновіть сторінку, ви повинні побачити щось схоже на зображення внизу. Проведіть над клавішами курсором, щоб переглянути різні стани. Якщо в станах проведення мишею є якісь примхи, спробуйте відрегулювати в своєму CSS властивість background-position.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Спробуйте змінити розміри вікна свого браузера для імітації моніторів з більш низькою роздільною здатністю. При зменшенні вікна смуги прокручування повинні з’являтися під значеннями min-height і min-width, призначених div ‘#page’.

Крок 4: Ефект підсвічування

Для залучення уваги до активного зображенню ми застосуємо ефектне пляма світла при одночасному слабкому натяку на навколишній контент. Для посилення поділу фону і переднього плану ми також застосуємо до тла легкий текстурний шаблон.

Щоб домогтися цього, знадобиться додати трохи розмітки. У div е ‘#main’ створити такі нові div и.

 
 
Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Спочатку давайте створимо зображення світлого плями (‘content-1/images/glow-shadow.png’), яке буде перекривати галерею зображень. Поверніться до Photoshop, виберіть шар у групі ‘vignette’. Перейдіть до Select/Вибрати > All/Все і скопіюйте виділену область. Створіть новий документ (він повинен бути щонайменше 1400 x 900) і вставте вміст буфера обміну в полотно.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Тепер нам потрібно трохи відрегулювати своє зображення. По-перше, збільште розмір полотна так, щоб вгорі він став вище на 100 пікселів.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Потім збільште на 50 пікселів лівий край.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Нарешті, збільште нижній і правий краї так, щоб загальний розмір полотна став 1600 x 1600.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Тепер виберіть інструмент Відро (bucket) і при відключеній фільтрації-згладжуванні (на ‘off’) та допуск (tolerance), встановленому на ‘0’, заповніть кольором фону сторінки (#0f1219) прозору область навколо країв. Остаточний результат повинен виглядати схожим на зображення внизу.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Виберіть File/File > Save for Web/Зберегти для інтернету та збережіть це зображення 24-бітний PNG (‘content-1/images/glow-shadow.png’) з включеною прозорістю.

Тепер, повернувшись до нашого вихідного зображення, виберіть шар Заповнення шаблону 1/Pattern Fill 1 (це шар з діагональними лініями). Клацніть правою кнопкою миші і виберіть Растеризовать шар (‘Rasterize layer’). Потім збільште побільше масштаб і виберіть область шару, як показано внизу. Скопіюйте його (тільки лінії – не копіюйте фон) і вставити в новий документ. Збережіть для вебу, знову, як 24-бітний PNG з прозорістю і з шляхом ‘img/bg/lines.png’.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Тепер давайте додамо CSS для інтеграції наших нових зображень…

#horizon {
min-height: 700px;
width: 100%;
overflow: hidden; }
#main {
background: #0f1219;
width: 1300px;
margin: auto;
margin-top: -190px;
height:1000px;
overflow: hidden;
position: relative; }
#main .inner {
width: 9000px;
height: 9000px;
overflow: hidden;
position: absolute;
top: 0;
left: 0; }
.glowBg {
background: #282d3f;
height: 100%;
width: 100%;
position: absolute; }
#glowTexture {
background: url(‘../img/bg/lines.png’) repeat;
height: 900px;
width: 1300px;
position: absolute;
top: 0;
left: 0; }
#glowShadow {
height:1600px;
position: absolute;
width: 1500px;
top: 00px;
overflow: hidden;
z-index: 200; }
#glowShadow img {
display: block;
position:relative;
left: -100px; }

Збережіть, поновіть сторінку, тепер ви повинні побачити колір фону, текстуру та пляма світла. Далі ми почнемо додавати зображення.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Крок 5: Галерея

Зображення галереї ми будемо розміщувати в колонки по проектам. В кожному проекті безліч зображень можна розташувати вертикально. Добиратися до різних проектів потрібно, зсуваючи у сторону колонки.

Створіть нове зображення 640×480 і вставте миттєвий знімок (снепшот) вебсайту або кадр якусь з робіт, яку ви хотіли б виставити. Більш темний стиль дизайну відмінно поєднується з зображеннями, переважаючий фон яких – світлий.

Для початку давайте додамо розмітку.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX
Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX
Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX
Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX
Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX
Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Ви помітите, що ми додали до тегам кілька вбудованих стилів. Так моделюється те, що пізніше наш шар взаємодії буде застосовувати автоматично (у наступній частині цього підручника ми побачимо, як це робиться). Проте на даний момент ми всього лише жорстко можна закодувати стилі. Примітка: атрибут opacity (непрозорість) не буде працювати в Internet Explorer 8 і попередніх версіях.

Додайте наступний CSS до зображень у галереї:

#gallery {
left: 285px;
position: absolute;
width: 100%;
height: 900px; }
#gallery .київ {
position:absolute;
top: 80px;
width: 640px; }
.item {
height: 480px;
width: 640px;
background: #181a22;
position: absolute;
margin: auto;
top: 320px;
z-index: 100;
overflow: hidden; }

Найважливіше властивість тут – абсолютне позиціонування колонок (це div и з класом ‘col’). При абсолютному позиціонування можна незалежно пересувати кожну колонку або пересувати всі колонки синхронно, що дозволить нам пересуватися по сітці зображень, як тільки буде застосований шар взаємодії.

Поновіть сторінку, тепер ви повинні побачити галерею з зображеннями. Ви помітите, однак, що по вертикалі галерея статично закріплена. В ідеалі нам хотілося б, щоб контент мав сам себе по центру в залежності від розміру вікна. Щоб домогтися цього, нам доведеться додати трохи скрипта.

Створіть новий тег скрипта script прямо перед закриваючим тегом body і вставте наступний код:

var yShift = -190;
arrange()
function arrange() {
var winHeight = $(window).height();
if (winHeight > 760) {
yShift = (((winHeight — 900)/2) — 110)
newHeight = (winHeight — yShift)
newHeight -=60
$(‘#main’).css(‘height’, newHeight)
}
if (yShift < -190) {
yShift = -190;
}
$(‘#main’).css(‘margin-top’, yShift)
}
$(window).resize( function() {
arrange()
})

Переконайтеся, що jQuery був доданий в заголовок сторінки, інакше сценарій не буде працювати.

Цей сценарій виконує кілька завдань. Функція arrange() визначає висоту вікна, а потім налаштовує властивості CSS ‘#main’ elements’ для центрування вмісту по вертикалі. Таке відбувається в тих випадках, коли вікно користувача більше 760 пікселів у висоту (дивись умову в рядку 541), так як для меншої висоти вікна застосовуються значення CSS за замовчуванням. Слухач $(window).resize() (рядок 25) викликає функцію adjust() кожен раз, коли змінюється розмір вікна користувача.

Крок 6: Пара слів

На цій стадії ми додамо трохи текстового вмісту, що стосується активного проекту. Для додання закінченого вигляду активному проекту нам знадобиться заголовок, підзаголовок й абзац тексту.

Додайте у div ‘#leftCol’ наступну розмітку:

Demo Project

WEBSITE 2011

Demo Project

WEBSITE 2011

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing. Etiam neque augue, tristique eget malesuada et, luctus sed felis. In dignissim lacus eu justo tempus ut tincidunt nisi dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing.

Link to project here

Звичайно, якщо ви використовуєте реально існуючу, виконану вами роботу, не соромтеся використовувати заголовки і текст, точно її описують.

Тепер ми додамо цього вмісту стилі за допомогою додаткового CSS:

#leftCol {
padding-top: 30px;
width: 200px;
height: 480px;
left: 30px;
position: absolute;
z-index: 10001;
top: 270px; }
#projectInfo {
top: 50px;
position: absolute;
height: 350px;
width: 200px; }
#leftCol h1 {
color: #fff;
font-size: 28px;
margin-bottom: 6px;
top: 50px;
font-weight: 300;
line-height: 30px; }
#leftCol p.sub {
color: #338966;
font-size: 11px;
text-transform: uppercase;
letter-spacing:2px;
font-weight: bold; }
#leftCol p.body #leftCol p.link {
color: #8c8f95;
font-family: ‘lucida grande’, ‘arial’;
font-size: 12px;
line-height: 19px;
padding-top: 30px;
margin-bottom: 10px; }
#leftCol p.link {
padding-top: 10px; }
#leftCol p.link a {
color: #8c8f95;
text-decoration: underline; }
#leftCol p.link a:hover {
color: #fff;
text-decoration: underline; }

Тут знову найважливішим міркуванням є абсолютне позиціонування елемента ‘#leftCol’. Так як він розміщений поза тега ‘#gallery’, однак всередині тега ‘#main’, його розташування буде відповідати отцентрированному тегу ‘#main’ і не залежати від переміщення в галереї. Це означає, що текст може оновлюватися без зміни розташування, коли змінюється активний проект. Дуже високий z-index ‘#leftCol’ (10001) поміщає вміст над усім іншим контентом сторінки. Це означає, що на текст ефект плями світла не буде впливати. Інші властивості – це в основному стилі тексту і пов’язане з ними форматування, які можна змінити за бажанням.

Тепер оновіть свою сторінку – у вас повинен з’явитися якийсь відмінно форматований текст зліва від активного зображення, як на ілюстрації внизу.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Крок 7: Елементи інтерфейсу

Тепер, після розробки структури статичного контенту, ми застосуємо розмітку, яка додасть елементи, що дозволяють користувачам взаємодіяти з сайтом.

Повернувшись до div ‘#leftCol’, додайте наступний код:

Up
Down
Left
Right

Елемент ‘#grid’ порожній; в кінцевій працюючої версії він буде заповнений Javascript’ом. Проте на даний момент ми просто жорстко кодуємо кілька дочірніх елементів для отримання уявлення про те, як це буде виглядати.

 
 
 
 
 
 
 
 
 
 
 
 

Зараз ми знову застосуємо зображення-спрайт, на цей раз для покажчиків-стрілок. Повернувшись до Photoshop, перейдіть до групи ‘keyboard’ і з допомогою інструмента «лінійка» (ruler) відзначте загальні розміри.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Знову нам потрібно внести поправку на дві висоти групи для включення станів за замовчуванням ‘default’ і проведення миші над елементом ‘hover’. Створіть новий документ з прозорим фоном, рівний по ширині групі ‘keyboard’ і в два рази більшої висоти. У прикладі з підручника це дорівнює 70 x 92.

Перетягніть групу ‘keyboard’ в новий документ. Продублюйте її та розмістіть один з них відразу над другою. Група внизу стане нашим станом проведення мишею ‘hover’. Трохи змініть його елементи, зробивши яскравіше накладання кольору, стрілки і контур. Для стану проведення мишею часто досить тонких поправок, а невелика зміна яскравості зазвичай добре помітно.

У прикладі з підручника ідеальний ефект створюється зміною фонового кольору з #262a34 на #2b2f3a і фонового кольору риси/стрілки з #32343f на #4b4d56.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Остаточне зображення повинно виглядати приблизно так, як показано внизу:

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Збережіть його як ‘img/icons/keys.png’.

Тепер додамо трохи CSS для встановлення відповідності зображення різних класів.

#leftCol #controls {
width: 200px;
height: 55px;
position: absolute;
bottom: 18px; }
#grid .line {
width: 5px;
background: #666;
overflow: hidden;
float: left;
margin-right: 2px;
position: relative;
cursor: default; }
#grid {
height: 55px;
width: 200px; }
#tracker {
height: 10px;
background: #fff;
width: 5px;
position: absolute;
z-index: 10000;
cursor: default; }
#grid .line {
width: 5px;
background: #3d424f;
overflow: hidden;
float: left;
margin-right: 2px;
position: relative;
cursor: default; }
#keys {
ширина: 92px;
height: 46px;
position: absolute;
left: 86px;
bottom: 0; }
#keys a {
text-indent: -999px;
width: 22px;
height: 22px;
background: url(‘../img/icons/keys.png’) no-repeat 0 0;
overflow: hidden;
position: absolute; }

Дочірні елементи ‘.line’ сформують сітку, яка порівняльну висоту колонок. Це узагальнення стане ідеальним способом дати користувачеві можливість дізнатися розмір портфоліо, його розділи і їх поточний стан – що в деякому сенсі еквівалентно breadcrumbs (навігаційним ланцюжках) традиційного сайту.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Як би там не було, наступне завдання – встановити відповідність класів key до зображення-спрайту:

#a keys.kup {
left: 24px;
text-indent: -999px;
top: 0;
background-position: -24px 0; }
#a keys.kup:hover, #a keys.hoveru {
background-position: -24px -46px; }
#a keys.kdown {
left: 24px;
top: 24px;
background-position: -24px -24px; }
#a keys.kdown:hover, #a keys.hoverd {
background-position: -24px -70px;
}
#a keys.kleft {
left: 0px;
top:24px;
background-position: 0px -24px; }
#a keys.kleft:hover, #a keys.hoverl {
background-position: 0px -70px; }
#a keys.kright {
left: 46px;
top: 24px;
background-position: -46px -24px;
width: 24px; }
#a keys.kright:hover, #a keys.hoverr {
background-position: -46px -70px; }

Спробуйте оновити браузер і поводити мишею над тільки що створеними елементами. Нові покажчики та сітка повинні бути схожі на ілюстрацію внизу:

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Крок 8: Елементи інтерфейсу

Нарешті додамо динамічну навігацію, яка прикрепится до активного проектом. Вставити наступну розмітку відразу за відкритим тегом елемента ‘#leftCol’:

Тут ми застосували вбудовані стилі для імітації того, чого можна досягти автоматично при додаванні повній інтерактивності Javascript.

Для цих покажчиків буде використовуватися інше зображення-спрайт. Повернувшись до файлу Photoshop, відкрийте групу ‘buttons’ і виберіть шар правого кута. Так як нашому вказівником знадобиться деякий відступ, їх ми зробимо з розмірами 44 x 44.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Створіть для розміщення двох наборів з 5 іконок новий документ 88 x 176 з прозорим фоном. Створіть новий шар, чорний, щоб можна було бачити напівпрозорі стрілки. Перетягніть вертикальну напрямну на 44 px по осі Х (наведіть направляючі при відключених лінійках і переконайтеся, що видно Window/Вікно > Info/Відомості, щоб бачити поточне положення). Потім перетягніть три горизонтальних направляючих на 44, 88 та 132 пікселя по осі Y.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Тепер, повернувшись до PSD, перетягніть стрілку-куточок в новий документ і створіть зліва 4 копії. Це буде наш стан за замовчуванням ‘default’. Зробіть непрозорість кожного шару 12%. Скористайтеся Edit/Редагувати > Transform/Трансформування для обертання направляючих таким чином, щоб порядок їх розташування було як внизу:

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Скопіюйте ці шари і пересуньте кожен точно на 44 пікселя вправо. Встановіть непрозорість кожного з нових шарів на 20%. Вимкніть чорний фон для того, щоб полотно здавався майже зовсім прозорим і виберіть Save for Web/Зберегти для інтернету. Експортуйте як 24-бітний PNG з включеною прозорістю в ‘img/icons/movers.png’.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

Тепер додамо трохи CSS для встановлення відповідності цього зображення:

a.mover {
background: url(‘../img/icons/movers.png’) no-repeat -44px 0;
height: 44px;
width: 44px;
outline: none !important; }
#up #right, #down #left {
display: block;
z-index: 300;
position: absolute;
top: 10px;
left: 10px; }
#right { background-position: 0px -44px; }
#right:hover { background-position: -44px -44px; }
#down { background-position: 0 -88px;}
#down:hover { background-position: -44px -88px;}
#up{ background-position: 0px -132px;}
#up:hover { background-position: -44px -132px;}

Оновіть браузер і побачите щось, схоже на наведене нижче.

Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

От і все! У заключній частині цього підручника ми напишемо Javascript, який буде автоматично підтримувати розмітку зображень і представляти динамічну навігацію за допомогою клавіатури або миші.

На випадок, якщо ви щось пропустили, ось остаточна розмітка HTML:

Your Name — Digital Portfolio

 
 

Demo Project

WEBSITE 2011

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing. Etiam neque augue, tristique eget malesuada et, luctus sed felis. In dignissim lacus eu justo tempus ut tincidunt nisi dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus eget neque tempor adipiscing.

Link to project here

 
 
 
 
 
 
 
 
 
 
 
 
Up
Down
Left
Right
Створюємо інноваційний сайт-портфоліо, застосовуючи альтернативний UI/UX

var yShift = -190;
arrange()
function arrange() {
var winHeight = $(window).height();
if (winHeight > 760) {
yShift = (((winHeight — 900)/2) — 110)
newHeight = (winHeight — yShift)
newHeight -=60
$(‘#main’).css(‘height’, newHeight)
}
if (yShift < -190) {
yShift = -190;
}
$(‘#main’).css(‘margin-top’, yShift)
}
$(window).resize( function() {
arrange()
})