Даруємо!!!

Портфоліо дизайнерів і верстальників


Яким має бути зміст сайту-портфоліо?

Отже, почнемо з утримання сайту-портфоліо. Настійно рекомендую писати тексти, які будуть чіпляти увагу. Напевно, ви бачили досить сухі тексти на шаблонних сайтах, які ви в принципі можете знайти, наприклад, на сайті ThemeForest. Наприклад, даний шаблон Jackie, тут немає нічого такого, що зачіпало б вашу увагу. Тому, моя вам порада: опрацьовуйте тексти і не покладайтеся на одні лише шаблони. Якщо ви сумніваєтеся в своїх копірайтерських здібностях, то я рекомендую вам прочитати книгу «Пиши, скорочуй» від видавництва Паблішер. Прочитавши цю книгу, ви навчитеся складати грамотні тексти, які можуть бути застосовні для ваших сайтів, а не тільки для складання постів в ВК або Telegram. Головні думки:

  1. Чим простіше текст, тим краще він сприймається.

Не намагайтеся писати довгі речення і користуватися складною термінологією. Цілком ймовірно, що користувач, зайшовши на ваш сайт, просто не буде читати цей текст і перегорне далі або зовсім закриє сайт. Але так як ми з вами говоримо все-таки про веб-розробку, то буде актуальніше використовувати складні терміни тільки в тому випадку, якщо вони стосуються IT-сфери.

  1. Пишіть текст, перш за все, для себе

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

  1. Спробуйте прочитати текст вголос для себе

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

  1. Розбийте вміст тексту на заголовки

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

  1. Зробіть текст «живим», наводьте приклади

Приводьте приклади. Це саме ту тезу, що дозволить зробити ваш текст більш живим. Як це можна застосувати до сайту-портфоліо?! Наприклад, у вас буде блок, де ви розповідаєте про свої скіли і у вас є три пункти: HTML, CSS і JavaScript. Для кожного пункту ви можете придумати конкретний приклад, який буде зрозумілий, навіть замовнику який може, в принципі, не орієнтуватися в веб-розробці. Наприклад, в пункті «JavaScript» ви можете написати приклади того, де ви його використовуєте. Ви можете написати так:

Я використовую цю технологію, щоб зробити слайдери і лічильники на сайті.

А в пункті «CSS» написати:

Застосовую його для того, щоб зробити ваші сайти красивими!

Я думаю, що ідея в цілому вам зрозуміла, і ви вже зрозумієте в який бік вам необхідно рухатися.

  1. Користь важливіша за зміст

Не намагайтеся написати багато зайвого тексту. В більшій мірі користувачеві важливо, чому саме до вас він повинен звернутися. Що саме ви пропонуєте користувачеві і як ви збираєтеся вирішити його проблему, з якою він прийшов на цей сайт ?! І тоді в такому випадку ви отримаєте від нього те, що потрібно вам.

В цілому про зміст сайту ми з вами поговорили, тепер давайте плавно перейдемо до наступної теми.

 

Які блоки необхідні на сайті-портфоліо?

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

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

Наступний блок, який вам знадобитися на сайті це блок «About me», тобто той, де ви розповідаєте про себе. Цей сайт мені хотілося б показати вам як приклад, так як, на мій погляд, він відображає всі ті найсильніші сторони, які повинні бути на сайті-портфоліо. І це ми бачимо, вже починаючи з головного блоку, тут відображено, що даний фахівець займається і дизайном і веб-розробкою, так само крім тексту на це вказує і саме зображення.
 
 
Далі, якщо ми перемістимося у вкладку «About me», то тут ми бачимо короткий опис з фотографіями, якими він хотів би поділитися, що в принципі розповідає про те, що він захоплюється не лише кодом, але у нього є й інші захоплення, якими він готовий поділитися.
 
 
Можливо, з точки зору дизайну, в чомусь його блог застарів, але, загалом і в цілому він відображає суть того, як повинно бути. Так само тут є наочна діаграма того, як він в процентному співвідношенні оцінює себе, як дизайнера і веб-розробника.
 
 
Далі йде блок, який, по суті, розкриває тезу про приклади, про які я розповідала трохи раніше. У цьому блоці ви знайдете рандомні факти, які ніяк не пов’язані ні з дизайном, ні з веб-розробкою, але їх цікаво читати і через це ти зупиняєшся на цьому блоці.
 
 
По суті, на цій сторінці розкривається не тільки блок «About me», а й блок де ви розповідаєте про свої скіли. Знову ж таки повторюся, не намагайтеся зробити це нудно, так як це зазвичай пропонується на шаблонних сайтах. Намагайтеся додати трошки креативу і ваш сайт напевно оцінять.

 

На іншому прикладі ми бачимо такий блок як «Services», тобто те де ви описуєте свої послуги:
 
 
Якщо розглядати це стосовно веб-розробки, то мені здається, цей блок в принципі не має сенсу, тому що якщо ви позиціонуєте себе як верстальник, то ясна річ, що ви надаєте тільки одну послугу – верстаєте сайти.

Важливий пункт це «Портфоліо». Ви можете взяти такий простий варіант




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

 

Ще трохи про лого

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

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

Які кольори варто використовувати для сайту-портфоліо?

Як ви розумієте, це креативна частина і тут немає єдиної відповіді.

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

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

За таким же принципом працює сайт Pinterest, тут ви теж можете ввести в пошуковий запит Portfolio і підібрати варіанти під себе. Якщо раптом, з якоїсь причини, ви не можете підібрати кольори які хотіли б використовувати на сайті, або ви точно знаєте який хотіли б застосувати один з відтінків, то скористайтеся сервісом Color Scheme, ви можете написати код конкретного відтінку і вже після підібрати відтінки в залежно від того скільки кольорів  вам необхідно на сайті. Майже за таким же принципом працює і сервіс Palettable, але працює він за принципом Like/Dislike. Якщо вам не подобається колірне рішення, то проклацуйте до необхідного, якщо подобаєтся  – ставте Like і відповідно далі підбираєте поєднання, які вам подобаются.