Рабочий процесс проектирования и создания сайта портфолио

Обратите внимание , что эта статья ориентирована на новичков в отрасли , а не опытных дизайнеров и разработчиков. Суть статьи состоит в том, чтобы обеспечить общее руководство для умного проектирования, дружественных веб — сайтов сегодня, в том числе стратегий, методов и инструментов, для большинства веб — дизайнеров на данный момент. — Ред.

Давным давно в далекой галактике … молодой дизайнер приступил к эпическому путешествию, с рискованными компоновками сайта, постоянными отвлечениями, ошибками JQuery и смертельными багами Internet Explorer. Этот путь должен пройти каждый дизайнер для того, чтобы можно было гордиться собой, вместе со своими коллегами в этом огромном мире, который мы называем Web. Да, я говорю о создании собственного сайта портфолио.

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

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

Планирование проекта,
Брендинг,
Создание каркаса сайта,
Адаптивный дизайн и гибкие сетки,
LESS и SASS,
Экраны высокой четкости,
Гибкие изображения,
Анимация содержимого сайта,
WordPress развития,
Тестирование и аналитика.

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

ОПРЕДЕЛИМСЯ С ТЕМ ЧТО НАМ НАДО

Первое, что я делаю с любым проектом, это выясняю, что именно я хочу достичь, и записываю это. Какова цель этого проекта? Какую проблему я пытаюсь решить?

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

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

ПЕРВОНАЧАЛЬНЫЕ ИССЛЕДОВАНИЯ И ИДЕИ

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

Вместо этого лучше сделать себе чашку чая, устроится по удобнее и найти свое собственное решение проблемы. Все, что вам нужно на данном этапе это ручка, этюдник и ваши мысли. Будем надеяться, что вы придумаете себе что-то новое, что не было сделано до вас. Вы можете использовать множество методов , чтобы генерировать идеи . Думайте о вашей личности и что делает вас уникальным в качестве дизайнера. Какие у вас интересы? Чем вы отличаетесь? Есть ли у вас особый стиль дизайна? Вы специализируетесь на определенном аспекте дизайна? У вас есть необычно большие уши? Найдите момент, который представляет вас и интегрируйте его в ваш дизайн.

После некоторых первоначальных исследований, я записал несколько идей и элементов, чтобы включить их в мое портфолио:

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

СОЗДАНИЕ ВРЕМЕННОЙ ШКАЛЫ

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

ДИЗАЙН ВАШЕГО БРЕНДА

Ваш бренд это визуальный язык, который описывает вас и как другие видят вас.

Я хотел бы создать чистый, гладкий и минимальный внешний вид. Для меня чем проще тем лучше и поэтому я решил создать логотип из моих инициалов, используя минимальную черно-белую палитру. Я набросал некоторые идеи и поэкспериментировал с типографикой до принятия решения об окончательном варианте (который я нарисовал в Adobe Illustrator). Если у вас возникли проблемы с логотипом, вы можете прочитать “ Системный подход к дизайну логотипа “ .

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

СОЗДАНИЕ КОНТЕНТА

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

Будьте кратким и дружелюбным. Мне нравится писать от первого лица, чтобы сделать текст более представительным. Разбейте вашу копию на небольшие куски, чтобы улучшить читаемость. Я написал мой контент и разбил его на шесть основных частей: на главной странице — введение, немного о себе, сайты с моим дизайном, мой блог, и мои контактные данные.

ПОКАЖИТЕ СВОИ РАБОТЫ

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

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

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

ЭСКИЗ КАРКАСА

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

После того, как элементы этой страницы группируются и определяются приоритеты, расположить их на странице будет намного проще. Поместим более важные элементы в верхней части страницы и используем пустое пространство для создания группировок. Вначале я решил сделать дизайн для десктопов, потому что я хотел сосредоточиться на показе своей работы в деталях на больших экранах. Потом мы напишем дизайн для мобильной версии. Обычно для эскизов моих каркасов я пользуюсь ручкой и бумагой, но вы можете использовать такие инструменты, как Balsamiq или даже Photoshop или Illustrator. Ниже приведен каркас моей страницы контактов. Он не должен выглядеть красиво — это просто план веб-страницы, чтобы работать с ним дальше.

АДАПТИВНЫЙ ДИЗАЙН И ГИБКИЕ СЕТКИ

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

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

Некоторые дизайнеры находят сетки ограничевающими, но это зависит от дизайна. Я считаю, что они позволяют создавать аккуратный и более организованный дизайн. Мой дизайн довольно прост, поэтому я использовал пользовательскую гибкую сетку из 12-колонок, но сетка из 16-колонок будет давать больше четкости и точности. Я также определил максимальную ширину 1040 пикселей, чтобы гарантировать, что конструкция не выглядит растянутой на больших мониторах.

Использование гибкой сетки позволяет веб — сайту, расширятся динамически , чтобы соответствовать любой ширине устройства. Ниже приведен CSS для моей гибкой сетки, но не стесняйтесь создавать свои собственные сетки, чтобы удовлетворить свой дизайн. Используйте инструменты, такие как Gridpak, Responsive Grid System, Golden Grid System и Responsify, чтобы создать свою собственную отзывчивую сетку. Я использовал идеи из некоторых из этих инструментов.

Смотря на CSS выше, вы можете быть удивлены , как [class^="col-"] CSS селектор работает. На самом деле это substring matching attribute selector , и все что делает этот селектор это выбирает любой класс, который начинается со строки col- . Вы можете также использовать найденную подстроку, чтобы выбрать другие атрибуты, которые заканчиваются с определенной строки, или даже те , которые содержат определенную строку. Substring соответствия представляет собой удобный способ для создания более сложных и мощных CSS селекторов, и они хорошо поддерживаются.

HTML довольно прост, он состоит из строк и столбцов, так же, как таблицы. Вот простая двухколоночатая отзывчивая сетка, которую я использую на моем сайте. Левая колонка охватывает пять столбцов, а столбец справа охватывает семь.

НАБОР ЛОГИЧЕСКИХ ТОЧЕК ОСТАНОВКИ

При разработке отзывчивого веб — сайта, при определенной ширине макета текст будет сужаться и трудно читаться ( от 45 до 75 символов является удобной длиной в каждой строке). Эти широты известны как точки остановки, и они часто устанавливаются на общие широты устройств, такие как 320 на 480 пикселей для мобильных устройств, 768 до 1024 пикселей для таблеток, и 1024 пикселей и до для настольных компьютеров. Проблема заключается в том, что “общих” широт становится все больше и больше, так что это решение не очень хорошо масштабируется.

Установка точек остановки на основе содержимого, а не на основе ширины устройства является более масштабируемым решением. Вместо того, что бы слепо установить точку остановки на 768 пикселей в ширину для таблеток, я посмотрел на мое содержание и обнаружил, что оно выглядит прекрасно, пока ширина не становится 600 пикселей. Таким образом, я поставил точку остановки на 600 пикселей, чтобы гарантировать, что содержание остается читаемыми ниже этой ширины. Да, вам нужно будет оптимизировать ваш сайт для различных устройств, но ваш контент всегда должен определить, где лежат контрольные точки. Эти четыре точки остановки, необходимы для моего дизайна: 320, 600, 1024 и 1140 пикселей.

Вначале я написал медиа запросы CSS для мобильных устройств. В основном это означало, написание мобильных стилей в качестве моей базы, а затем таблеток, и компьютеров. Мобильные стили, как правило, проще, чем остальные, поэтому писать их в первую очередь я считаю хорошей идеей. Они формируют основу ваших стилей, и вы можем добавить более сложные стили для широких экранов позже. Каскадные таблицы стилей, таким образом, сохраняют ваш код чистым и DRY ( “ не повторяют себя” ).

Вот медиа-запросы, которые я использовал:

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

ДИЗАЙН МАКЕТОВ ВЫСОКОЙ ЧЕТКОСТИ

После того, как настольные и мобильные каркасы были набросаны, я перешел в Photoshop и начал рисовать свой сайт более детально. Я не люблю тратить много времени в Photoshop, так как это замедляет процесс. Не беспокойтесь о создании совершенного дизайна, вы будете иметь время, чтобы доработать его во время процесса верстки. Вместо этого просто набросайте основные шаблоны страниц, наряду с любыми элементами дизайна, которые вам нужны. Я поиздевался над header и footer, наряду с основными элементами страницы, чтобы убедиться, что мне нравится эстетика страницы.

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

Разработка

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

Обычно я начинаю с верхней части веб-страницы и строю каждый элемент один за другим. Давайте начнем с верхней навигации. В начале напишем HTML для элемента, а затем перейдем к CSS. Помните, что сначала мы создаем мобильную версию. В зависимости от сложности проекта, вы можете писать код с нуля или использовать фреймворки, такие как HTML5 Boilerplate, Foundation или Compass .

CSS ПРЕПРОЦЕССОРЫ ( LESS/ SASS)

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

Мы все хотели, чтобы можно было использовать переменные в CSS, определять функции и повторно использовать фрагменты кода без необходимости постоянно копировать и вставлять. CSS препроцессоры позволяют сделать это и многое другое, сохраняя при этом ваши стили чистыми и организованными. Ваш LESS или Sass код компилируется и выдается в виде простого CSS.

Я использовал LESS, чтобы создать CSS для моего сайта. Тем не менее, после экспериментов с обоими препроцессорами, я чувствую, что Sass мощнее, так что я буду пользоваться именно им с этого момента. В статье Chris Coyier сравнение LESS и Sass показаны тонкие, но важные различия между ними. Решающим фактором для меня было то, что Sass использует Compass и предоставляет доступ к библиотеке полезных mixins. Не стесняйтесь пользоваться обоими препроцессорами, чтобы выбрать лучший для вас.

ПОСТЕПЕННОЕ УСИЛЕНИЕ ПРИ ПОМОЩИ MODERNIZR

Modernizr представляет собой библиотеку JavaScript, которая обнаруживает HTML5 и CSS3 функции в браузере пользователя и добавляет эти функции в виде классов к <html> элементу. Мы все хотим пользоваться последними CSS3 и HTML5 возможностями, но что происходит в старых браузерах, которые не поддерживают их? Modernizr показывает нам, какие функции поддерживаются в браузере посетителя, а какие нет, что позволяет нам писать CSS и JavaScript для каждой конкретной ситуации. Таким образом, мы можем легко обеспечивать progressively enhance , обеспечивая всех основными функциями, расширяя возможности для тех, у кого есть современные браузеры.

СОЗДАНИЕ ГИБКИХ ИЗОБРАЖЕНИЙ

Гибкие изображения простая, но важная часть любого отзывчивого веб-сайта. Для того, чтобы ваши изображения были гибкими, просто поместите их в контейнер сетки и добавьте CSS стили. Вставте их с помощью тега <img> , хотя можно и при помощи гибких изображений, вставив изображение как фон в CSS . Если вы хотите узнать технические особенности изображений в зависимости от используемого устройства (например, обслуживающих небольшие изображения на мобильные телефоны для экономии пропускной способности), вы можете изучить определенные техники для обслуживания действительно отзывчивые изображения и как избежать дублирования изображений с загрузкой.

ИСПОЛЬЗОВАНИЕ СПРАЙТОВ

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

При создании спрайтов, подумайте о том, как ваш сайт будет загружаться. Если часть значков используется только на главной странице сайта, стоит отделить их от основного спрайта. Это гарантирует, быструю загрузку главного спрайта. Использование спрайтов упрощает подготовку изображений для экранов высокой четкости в дальнейшем. Процесс создания спрайтов может быть обременительным, поэтому используйте удобный инструмент, такой как Sprite Cow, чтобы создать их быстро и легко. Вы можете также использовать комбинацию Sass и Sprite Cow для генерации спрайтов автоматически из отдельных изображений.

ПИТАНИЕ ДЛЯ ЭКРАНОВ ВЫСОКОЙ ЧЕТКОСТИ

Для того, чтобы убедиться, что ваш веб-сайт выглядит отличным на высокой четкости (или “Retina”) экранов, используйте CSS как можно больше для презентации. Помните, что некоторые из новых стилей CSS не будут отображаться в старых браузерах — поэтому вы можете воспользоваться прогрессивным улучшением затронутым выше. В большинстве случаев вы не сможете полностью построить веб-сайт с помощью CSS, вам также понадобятся изображения. К счастью, подготовка изображений для экранов высокой четкости не так уж сложна.

В принципе, вам нужно создать версии изображений, которые будут использоваться на экранах с высоким разрешением. Так как наши изображения содержатся в спрайте, все, что нам нужно сделать, это создать еще одну версию спрайта, который ровно в два раза больше. Например, наш спрайт называется sprite.png , мы создадим спрайт для высокой четкости sprite@2x.png . Чтобы уменьшить время загрузки (особенно на мобильных устройствах), сожмем изображения, используя JPEGmini , TinyPNG или, если у вас Mac, ImageOptim.

После того как вы создали фотографии в увеличенном виде, просто используйте медиа-запросы, чтобы показать большие изображения на экранах высокой четкости. Будьте осторожны с медиа-запросами, потому что iPhones используют изображения только высокой четкости. Есть и другие мобильные телефоны, наряду с Retina IPads и MacBook Pro. Я использую два медиазапроса высокой четкости на моем сайте: первый для мобильных устройств высокой четкости, а второй для планшетов и ноутбуков.

Вот мои запросы для экранов с высоким разрешением:

Было бы замечательно, если бы мы могли устранить необходимость в медиа-запросах и отдельных изображений высокой четкости. Для этого есть способ, чтобы удовлетворить экраны высокой четкости можно использовать векторные изображения, которые могут масштабироваться, чтобы соответствовать любому размеру экрана и выглядят четкими на любом устройстве. Вы можете сделать свои изображения или иконки в Illustrator и экспортировать их в качестве масштабируемой векторной графики (SVG) файлов . Файл SVG в основном состоит из XML кода, который записывает изображение в браузер.

Другой умный способ получить масштабируемые векторные иконки, которые выглядят четкими на устройствах высокой четкости является использование иконочных шрифтов, таких как IcoMoon или Font Awesome. Я не использовал эти методы на моем сайте, потому, что у меня не так много иконок и векторных изображений. Но если у вас много векторных изображений и иконок, то эти методы окажутся очень полезными.

ПЕРЕХОДЫ НА СТРАНИЦЫ

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

Для достижения этого эффекта перехода, мне нужно использовать предзагрузочный плагин JQuery, такой как jPreLoader или QueryLoader2. Это гарантирует, что изображения загрузятся перед тем, как страница. Когда дело доходит до разработки веб-приложений, JQuery плагины не должен быть вашим первым выбором, потому что Jquery может нанести удар по производительности. Лучше всего искать более легкие, одноцелевые библиотеки JavaScript и использовать их. В некоторых случаях можно обойтись CSS transitions.

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

Вот простая функция JQuery исчезновения страницы, после нажимает на ссылку:

Я хочу чтобы leavePage анимация происходила, когда посетитель нажимает на ссылку, так что я просто добавил transition класс к соответствующим ссылкам. Когда происходит нажатие на ссылку с transition классом, то leavePage анимация запускается. Этот простой пример, но его можно улучшить для более сложной анимации.

Таким образом, пользователь нажимает на ссылку, текущая страница затухает, и он приземляется на следующую страницу. Что происходит потом? Наш Jquery предзагрузчик заботится обо всем остальном. Предзагрузчик отображает накладку, которая покрывает страницу, как он загружает. После того, как загрузка завершена, накладывание угасает, чтобы открыть страницу. Конечно, вы можете создать свою собственную анимацию на странице более интересным способом.

Я не буду вдаваться в детали, потому что есть много способов, чтобы анимировать содержимое на странице. Вы могли бы сделать скольжение контента, одного за другим, или исчезновение элементов сверху вниз. В основном вам просто нужно написать функцию, чтобы анимировать содержимое на странице, а затем вызвать эту функцию после того, как страница полностью загружена. К счастью, оба предзагрузчика Jquery, упомянутые выше, имеют функции обратного вызова, которые позволяют вызвать функцию анимации после того, как страница полностью загружена.

ПРЕДОТВРАТИТЬ ПОЯВЛЕНИЕ СОДЕРЖИМОГО БЕЗ СТИЛЕЙ

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

АНИМАЦИЯ ПРОКРУТКИ

Я люблю включать анимации при прокрутке страницы. В последнее время это стало популярным, я думаю это улучшает пользовательский опыт. Я использую простой, но мощный JQuery плагин Waypoints для создания анимации для прокрутки. Это позволяет запускать анимацию на разных расстояниях прокрутки страниц.

Если вы ищете простой способ сделать более сложные анимации на свитке можете посмотреть плагин SuperScrollorama.

РАЗРАБОТКА НА WORDPRESS

Я решил построить свой веб-сайт в WordPress, в основном потому, что я знаком с ним и на нем хорошо строить блогерские сайты. Плагины для добавления функциональности можно установить позже это может сэкономить время. Установка WordPress на сервер и превращение статических HTML — страниц в темы WordPress является довольно простым процессом. Если вы не знакомы с WordPress, вы всегда можете использовать другую платформу, например, Drupal. Или не стесняйтесь просто строить админку с нуля в PHP (в зависимости от сложности сайта).

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

Для того чтобы отделить сообщения в моем портфолио от моего блога, я создал таможенный тип поста особенно для пунктов портфолио сайтов. Вы можете не отображать ваши темы сайтов как блог и разделить их по темам в категории “портфолио”, чтобы отделить их от стандартных сообщений в блоге. Мне нужна гибкость пользовательского типа поста с разными макетами. Я не буду вдаваться в подробности о разработке на WordPress, потому что много информации есть в WordPress документации.

Тестирование и аналитика

ТЕСТИРОВАНИЕ В РАЗНЫХ БРАУЗЕРАХ

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

Итак, как вы будете тестировать свой сайт в браузерах? Если у вас Mac, то просто лучше скачать все современные браузеры, включая Chrome, Safari, Opera и Firefox. Но как вы проверите Internet Explorer на Mac? Один простой и бесплатный способ — это создать виртуальную машину под управлением Windows.

Вы можете также использовать эмулятор Internet Explorer, такой как IE Tester. Или подписаться на услугу, таких эмуляторов как Spoon или BrowserStack, что позволяет протестировать сайт на всех основных браузерах, включая Internet Explorer 6, 7, 8, 9 и 10.

НАСТРОЙКА GOOGLE ANALYTICS

Добавьте Google Analytics на свой веб — сайт, чтобы собрать ценные статистические данные о посетителях. Вы будете знать о местонахождении посетителей и каким поисковиком они пользуются и на каких веб-сайтах есть ссылки на ваш сайт. Ваше сообщение в блоге может получить упомянутые на другом веб-сайте; если вы не контролируете ваши источники трафика, вы можете даже не знать об этом. Аналитика также поможет вам отслеживать профиль посетителей, в том числе их страны происхождения и браузер с которого они зашли. Вы можете использовать эти данные на постоянной основе с целью оптимизации веб-сайта. Настройка Google Analytics на вашем сайте является бесплатной и занимает всего несколько минут. Достаточно зарегистрироваться, копировать и вставлять небольшой фрагмент кода JavaScript в сноске вашего сайта.

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

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

Будем надеяться, что моя история вдохновит вас, на создание собственного сайта. Я желаю вам всего наилучшего в вашем эпическом поиске вашего стиля. Удачи вам, и пусть сила будет с вами.

📎📎📎📎📎📎📎📎📎📎