Як я можу продемонструвати робочий приклад своєї минулої роботи з веб-розробки, не посилаючись на постійно мінливий веб-сайт?

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

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

1. Чи є найкращі практики для демонстрації веб-дизайну / інтерфейсу користувача (це насправді працює, а не є простим захопленням екрана)?

2. Чи зберігаєте ви офлайнову копію для показу клієнтам?

3. Як ви пов'язуєте його з вашим існуючим веб-сайтом (Behance чи іншим)?

Ну, ви можете зробити кілька речей, але я думаю, що особисто сайт найкраще переглядати у бажаному стані, який є сайтом. Якщо у вас є власний домен з хостингом, я дійсно не розумію, чому ви не могли б піднести домен на свої сайти (наприклад, clientproject.emilie.com), якщо ви переживаєте, що готовий проект для клієнта буде змінено. Просто додайте базовий знімок екрана, як це робиться на робочому столі, планшеті та мобільному пристрої, а потім надайте пряме посилання на піддомен.

Деякі інші варіанти, оскільки існує безліч різних типів мобільних сайтів, це якщо у вас старий телефон і звичайний телефон-витівник (той, хто купує останній раз), завантажуйте декілька сайтів на телефон у вигляді демонстрації та передайте його можливий клієнт. Це ж правило може застосовуватися і для планшета.

Якщо ви не можете піддомен, просто візьміть ноутбук і переконайтесь, що ваш ноутбук має щось на зразок XAMPP (все), MAMP (mac) або WAMP (Windows), щоб запустити сайт, який ви не знаєте, як встановити Apache, PHP, SQL тощо.

Крім того, не бійтеся надавати деталі. Якщо ви створили сайт, то скажіть їм, я створив його, але у мене був хтось інший код. Цей варіант добре працює, якщо ви турбуєтесь про використання веб-сайту, але у вас є лише скріншот.

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

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

Вищеописаний дизайн (який досі триває в процесі роботи) працює на веб-сервері всередині віртуальної машини на моїй настільній машині. Якщо мені потрібно було представити його клієнту, я, безумовно, міг би перенести його на свій ноутбук. Це може бути не найкращим варіантом для більшості людей, але він працює досить добре для дизайнера / розробника, як я.

Якщо ви також не використовуєте його для демонстрації своїх можливостей копірайтинг, можливо, варто замінити копію, використану в дизайні, текстом-заповнювачем (наприклад, lipum).

1. Найкращі практики - я не знаю, але, можливо, ви можете подивитися на машину Wayback. Більше про це нижче.

2. Офлайн-копії - Не дуже, хоча іноді мені подобається використовувати команду Safari Файл> Зберегти як ... Зберегти як тип: Веб-архіви. Я одного разу передав комусь такий файл, і вони скаржилися, що не можуть його відкрити, хоча я не знаю, наскільки вони старалися. Можливо, це річ Safari.

3. Посилання з наявного Інтернету - я цього не пробував, але посилання на машині Wayback повинні добре працювати.

Машина зворотного звороту знаходиться за адресою http://archive.org/web/ . Я використовував його на створених веб-сторінках, хоча я не належний веб-розробник.

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

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

Це весело: http://web.archive.org/web/19961219202222/http://www.apple.com/