Как создать свой собственный одностраничный сайт-портфолио: освещаем суть

Прекрасно выглядящий сайт-портфолио имеет решающее значение для любого дизайнера, чтобы мгновенно представить свою работу потенциальным клиентам или работодателям. Простой одностраничный сайт может сделать это эффективно, отображая три ключевые функции большого заголовка с кратким введением, примеры вашей работы и методы контакта — все на одной чрезвычайно просматриваемой странице. Давайте взглянем на создание концепции одностраничного портфолио в Photoshop, построение страницы в XHTML / CSS и добавление некоторой необычной функциональности с помощью jQuery.

Журнал NET


В прошлом месяце я имел удовольствие написать статью для всемирно известного журнала NET , также известного как практический веб-дизайн в США. Статья под названием « Создайте свой собственный одностраничный сайт-портфолио с использованием XHTML / CSS и jQuery» появилась в выпуске 188. Ребята из журнала NET любезно разрешили опубликовать статью здесь, на Blog.SpoonGraphics, для тех, кто мог ее пропустить. Я настоятельно рекомендую ознакомиться с новыми выпусками журнала NET и найти их в Твиттере для некоторых полезных советов и техник по веб-дизайну.

Журнал NET

Ваше онлайн-портфолио — это ваше место, чтобы представить себя миру и продемонстрировать свою работу и навыки. Когда-то традиционный кожаный футляр был стандартной формой для того, чтобы показать работодателям и клиентам, на что вы способны, в настоящее время личный веб-сайт — это ваш главный аргумент. Конечно, вы можете использовать веб-сайты, такие как Flickr , DeviantArt или аналогичные, для создания быстрой и простой коллекции работ, но здесь мы хотим выглядеть профессионально, и ничто не сравнится с вашим собственным сайтом, созданным вручную под вашим личным доменным именем .com ,

Персональный дизайн портфолио

Мы стремимся достичь простого веб-сайта, который собирает важную информацию о том, кем вы являетесь, чем занимаетесь, примерами своей работы и методами контакта. Это ключевые моменты, которые понадобятся любому, кто хочет нанять дизайнера. Сайт также должен выглядеть красиво, но не настолько, чтобы он привлекал внимание примерами вашей работы, поэтому мы создадим чистый структурированный макет с тонкими деталями. Наконец, мы также хотим, чтобы сайт привлекал внимание зрителя, если ваш сайт является частью набора рабочих приложений, мы не хотим, чтобы зритель терял интерес при просмотре страницы за страницей. Ограничение сайта до одной страницы помогает отображать всю информацию быстро и эффективно.

Давайте начнем с макета Photoshop, затем перейдем к мелочам кодирования с использованием XHTML / CSS и закончим с некоторыми необычными функциями, используя потрясающий плагин jQuery.

Подготовить документ

Начните работу, открыв Adobe Photoshop, создайте новый документ с разрешением 1680x1050px. Нарисуйте направляющие, чтобы выделить область шириной 960 пикселей для размещения мониторов с разрешением 1024 × 768. Мы не хотим, чтобы какие-либо важные элементы страницы выходили за рамки этой точки. Также нарисуйте основную сетку, чтобы выровнять элементы страницы, придав им красивый структурированный вид.

Добавить текстуру


Заполните документ мягким бежевым цветом, затем перейдите в Filter> Noise> Add Noise. Введите 3% и отметьте монохроматический вариант. Вставить в конкретную текстуру от Bittbox.com . Затемните края с помощью маски слоя и мягкой кисти, затем перейдите в режим наложения Overlay с непрозрачностью 40%.

Представьтесь

Используя таблицу в качестве руководства, введите свое имя и краткое описание своих услуг в своем любимом шрифте. Добавьте очень мягкую тень и измените режим наложения на Overlay. Подчеркните визуальную иерархию, выделив имя большим размером и более сильным внешним видом.

Представить товары


Выберите небольшую подборку ваших работ и обрежьте их до миниатюр размером 400×180 пикселей. Добавьте 10px обводку с 10% непрозрачностью, чтобы смешать их с дизайном. Обратите особое внимание на их выравнивание друг к другу, убедившись, что горизонтальный и вертикальный зазор между каждым изображением одинаков.

Методы контакта

После просмотра выбранных вами работ зрители могут захотеть связаться или связаться. Перечислите свою электронную почту рядом с вашими основными социальными сетями, такими как Twitter. Используйте значки каракули из предыдущего поста здесь, на Blog.SpoonGraphics.co.uk, чтобы оживить ссылки. Добавьте Color Overlay, чтобы смешать их с цветовой схемой сайта.

Общая концепция


Здесь у нас есть наша графическая концепция для нашего веб-сайта, изложенная именно так, как мы планируем ее смотреть. В дизайне есть тонкая текстура, которая добавляет некоторый визуальный интерес, базовая цветовая схема, основанная на нашем брендинге, выбор нашей работы и список методов контакта. Время сделать заслуженный перерыв.

Экспорт фона

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

Экспорт элементов страницы


Продолжайте вырезать документ и экспортировать отдельные файлы. Из-за классного шрифта и эффектов, используемых в тексте, нам придется экспортировать их также в виде изображений. Однако вы всегда можете пожертвовать небольшими конструктивными особенностями в пользу безопасного веб-стиля шрифта или даже таких технологий, как SiFR.

Оптимизация с использованием спрайтов

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

Записать XHTML


Начните работу над написанием XHTML в приложении для кодирования по вашему выбору. Обратите внимание на использование наиболее естественных тегов HTML для каждого элемента страницы, таких как тег H1 для самого большого заголовка, H2 для меньших заголовков и UL для списков изображений портфолио и методов контакта.

Создай стиль с помощью CSS

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

Выложите структуру страницы


Разработайте стиль контейнера div с определенной шириной и добавьте поле: 0 auto; выровнять div по центру на странице. Заголовки также можно стилизовать с помощью свойства background-image. Не забудьте переместить текст по умолчанию за пределы экрана, используя -9999px. Это широко используемая техника замены изображений CSS.

Float The Thumbnails

По умолчанию неупорядоченный список будет отображаться вертикально с некрасивыми маркерами, но старый добрый UL может быть чрезвычайно универсальным с помощью CSS. Переместите миниатюры портфолио влево, чтобы расположить их рядом, затем добавьте отступы и поля, чтобы расположить их так же, как в концепции.

Поместите Спрайт в Действие

Спрайт изображений, который мы создали ранее, может быть реализован с помощью CSS. Создайте стиль #footer ul li a с любыми общими параметрами, такими как поля, отступы, цвет и размер шрифта, а также добавьте contact-icons.jpg background-image и настройку no-repeat. Затем для каждого отдельного класса привязки наведите указатель на соответствующий значок, используя правило положения фона.

Приправить с помощью jQuery

По умолчанию ссылки на изображения для портфолио просто открываются в браузере, но это скучно! С помощью некоторых удивительных, готовых плагинов вместе с фреймворком jQuery мы можем легко добавить некоторые великолепно выглядящие эффекты. Загрузите пакет jQuery Lightbox с сайта Leandrovieira.com .

Скопируйте файлы

В качестве примера можно загрузить лайтбокс jQuery, выбрать нужные нам файлы и скопировать их в свою папку проекта. Нам нужны jquery.js, jquery.lightbox-0.5.js, jquery.lightbox-0.5.css и 5 файлов изображений. Соедините файлы Javascript и CSS в заголовке вашего HTML-документа. Затем напишите сценарий jQuery для назначения ссылок на портфолио.

Завершенный сайт

С функциональностью jQuery наш веб-сайт должен быть интересным. У нас есть простой одностраничный сайт с коротким вступительным предложением, коллекция рабочих примеров, которые запускаются с потрясающим анимационным эффектом, и ряд контактных порталов. Наш сайт завершен, или это? …

Тестирование браузера

Очень важно проверять наш сайт в самых разных браузерах. Наш действующий код может отлично смотреться в Firefox, Safari, Chrome и Opera, но Internet Explorer иногда может отображать довольно странные проблемы. IE7 выглядит нормально, но IE6 показывает типичную ошибку «stepdown» в ссылках нижнего колонтитула. Дисплей: встроенный в LI скоро сортирует это!

Время для запуска

Персональный дизайн портфолио

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



Поделитесь в соц.сетях:

Оцените статью:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован.