10 шагов создания идеального личного сайта

Original author: Lee Munroe
  • Translation
Если ты создаёшь сайт-портфолио, то у тебя несколько причин: ты фрилансер — и тебе нужно показать людям что ты умеешь и как это умеешь, или ты студент (или безработный) — и ты ищишь через сайт потенциальных работодателей, или ты работаешь в отделе крупной компании — и вы создаёте корпоративный блог о жизни компании и показываете что делает ваша компания — не важно кто ты, главное что через сайт-портфолио к тебе обратятся люди (за помощью или для того, чтобы дать тебе работу).

1. Логотип


Логотип — это первое что видит пользователь. На западе люди привыкли смотреть слева-направо, по этому логотип располагают обычно в верхнем левом углу сайта, чтобы сразу понять кто владелец данного сайта.
Логотип не обязан содержать имя владельца, но только если ты не пытаешься продвинуть своё имя — и используешь эту идею для себя. И обязательно делай логотип ссылкой на главную страницу!
Вот несколько примеров:


логотип в большинстве случаев содержит адрес сайта…

2. Подзаголовок


Пользователь должен первым делом видеть что предлагает этот сайт! Твой подзаголовок должен быть коротким и содержательным, он резюмирует твою деятельность.
На какие вопросы надо ответить при создании подзаголовка:
  • Кто ты? Дизайнер? Писатель? Разработчик?
  • Что ты делаешь? Дизайн веб-сайтов или разработку игр?
  • Откуда ты? Страна? Город?
  • Профессия: Ты фрилансер или вы работаешь в студии? А может ты ищешь работу?

tag2.jpg
Тут ясно что Sarah Longnecker делает видео ролики.

3. Портфолио


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

У Leigh Taylor хорошие скриншоты работ, а также она показывает использованные программы.

4. Услуги


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

Chris Spooner четко показывает, что делает дизайн для печати и для веб.

5. О


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

Chikezie Ejiasi показал своё фото, а также написал как произносится его имя.

6. Контактная информация


Это один из самых важных элементов на твоём сайте! Не скрывайте эту информацию! Ведь когда потенциальный клиент просмотрел твои работы и ему понравилось, что и как ты делаешь свою работу, то он захочет связаться с тобой для заказа твоих услуг.
Твоя контактная информация должна быть на виду и иметь легкий доступ. Пусть люди знают что могут связаться с тобой, через e-mail, чат или телефон. Также используйте форму для быстрой связи с тобой через сайт — это облегчит работу клиента и позволит ему быстро связаться с тобой (ведь ему не нужно будет копировать или нажимать на твой e-mail, потом переходить в свой менеджер почты и от туда писать тебе письмо). Уважай время твоего клиента.
В контактной информации должно быть: телефон, e-mail, "чаты" (icq и подобные), может быть адрес в социальных сетях, а также контактная форма для быстрой связи.

Stuart Johnston — предоставил классический формат подачи своей контактной информации.

7. Блог


Блог — это всегда хорошо. Блог с твоими мыслями, твоими знаниями, твоим опытом — показывает что ты знаешь и умеешь. Это позволит динамически развиваться твоему сайту.
Пусть люди последуют за тобой, подписываются на RSS канал твоих новых постов (статей). Количество подписчиков покажет насколько популярен твой блог.
Пусть люди комментируют твои посты, только не используй capcha — это преграда для комментария, сведите к минимуму все преграды для написания комментария. Для борьбы со спамом можно использовать другие методы, которые не заставляют пользователю делать дополнительную работу.

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

8. Призыв к действию


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

Matthew Brown’s использует для этого кнопку которая выделяется из общего фона сайта.

9. Используй Социальные сети


Теперь, когда люди проявляют интерес к тебе и твоей работе, побуди их узнать о тебе на других сайтах. Они смогут пообщаться с тобой на Twitter, Facebook, Flickr, Last.fm, Хабр и т.д. Позволь им больше узнать о тебе.

Sam Brown показывает какими сайтами он пользуется и позволяет изучить его или даже пообщаться в неформальной обстановке.

10. Язык и общение


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

Marius Roosendaal использует дружелюбный и расслабляющий сигнал для пользователей.

Другие советы:


  • Пусть люди знают откуда ты. Многие клиенты предпочитают работать с людьми из одного города или хотя бы одного часового пояса.
  • Проверяй валидацию кода — это имеет больше значение. Не пиши, что ты делаешь валидные сайты, если у тебя сайт не проходит валидацию.
  • Делай картинки ссылками, где это нужно. Большинство пользователей привыкли нажимать на картинки.
  • Если у тебя нет портфолио, то создай wordpress тему, красивую иконку или развей Twitter аккаунт и т.д. Ведь существует большая разница между сайтом хотя бы с одной работой в портфолио и без.


http://www.smashingmagazine.com/ — оригинал
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 58

    –1
    Хабракат — великая вещь!
      +4
      спасибо… исправил… а то давно не писал сюда…
        +14
        Удивляюсь, 60% всех первых комментариев про «кат», неужели так жить без него нельзя? Или хочется быть первым а сказать по статье более нечего?

        Если есть возможность расскажите что вами движет?
        Спасибо.
          +11
          А давайте вообще не будем пользоваться катом.
          Статья — 6 экранов (чтобы пройти от верха до низа 6 раз надо нажать PageDown)
          На странице 10 статей. И того получаем страницу ~ 60 экранов.
          А если в статьях еще и графика то получаем порцию не хилого трафика.

          Я считаю что, в том чтобы напомнить автору про кат, нет ничего ужасного.
            +1
            Есть кнопочка «J» — тоже великая вещица. Еще бы странички перелистывала — цены бы не было.
              +1
              А трафик она тоже контролирует?
              • UFO just landed and posted this here
                +1
                В Firefox странички можно подгружать автоматом с расширением AutoPager. Очень удобная вещь. Рекомендую, если используешь Fx.
                0
                автору можно в личку написать, не обязательно «первонахать»
                  0
                  А что если подобные возгласы попробовать направить разработчикам Хабра?

                  Чтобы они прикрутили, наконец-то, простенькую логику, которая принудительно хабракатит статью, если этого не сделал автор? Не находите странным то, что на таком серьезном ресурсе об этом не подумали?..
                  0
                  Хмм… Надо бы ещё комментарии под кат заставлять прятать.
                    0
                    а смысл в rss тогда отпадает. Нет «краткого содержания»
                      0
                      RSS нами движет. Очень неприятно получить пост в RSS на пару страниц прокрутки.
                      +8
                      Возможность писать личные сообшения — великая вещь!
                      –9
                      уберите под кат, пожалуйста
                        –14
                        Ёмана рот!!!
                        сслыку на свой сайт поставить святое дело, а под кат запрятать — не потрудились!!!
                          0
                          ссылку на сайт пока не буду ставить, его надо переделать… чтобы он стал похож на личный сайт портфолио…
                          –4
                          чувствую что статья из минуса не вылезет…
                            +12
                            Дело в том, что она плохая (как и перевод).
                            –10
                            плюс один
                              0
                              спасибо!
                              тут даются реально дельные советы, правда для запада…
                              но думаю что для рунета это тоже подойдёт
                                +2
                                просто спасибо за перевод, иногда очень устаешь читать на английском языке.
                              +6
                              Ой вей… Простите, люди, но советую подальше держаться от подобных советов. Особо радует заявленная аудитория этих советов, которая по идее сама должна советовать другим.

                              > Логотип — это первое что видит пользователь. На западе люди привыкли смотреть слева-направо, по этому логотип располагают обычно в верхнем левом углу сайта, чтобы сразу понять кто владелец данного сайта.

                              И такие приколы дальше по тексту.

                              Перенесите в юмор, умоляю.
                                0
                                Не только на западе, человек вообще смотрит слева направо.

                                Юзабилити как раз и построено на особенностях человеческого восприятия и мышления.
                                  0
                                  Человек смотрит туда, где ему что-то показывают (с) Воронежский.
                                +1
                                примеры можно было привести русскоязычные
                                  +1
                                  куда там…
                                  этож перевод.
                                  +1
                                  >И обязательно делай логотип ссылкой на главную страницу!
                                  Самое главное это ссылка на главную страницу!!! Особенно не главной странице!!! Тогда заказы рекой посто польюцо!
                                    +13
                                    1. У «идеального личного сайта» может и не быть логотипа. Не буду вдаваться в подробности, просто попрошу выложить свои логотипы присутсвующих тут.

                                    2. «логотип в большинстве случаев содержит адрес сайта…» Скажите, а сколько раз на сайте нужно написать адрес, чтобы он наконец дошел до зрителя? Это напоминает раздел «контакты» где «продвинутый» хозяин пишет адрес сайта…

                                    3. Частенько, люди хотят просто увидеть красивые картинки, кстати, многие дизайнеры пошли по пути упрощения портфолио — просто ряд картинок с работами, без структуры и трехстраничных описаний. Клиент зашел, кнопочку «следующая» пощелкал и позвонил по телефону дизайнеру.

                                    4.

                                    5.

                                    6.

                                    7. Блог, если ты его ведеш от случая к случаю — лучше убери нафиг.

                                    8.

                                    9. Дааа, заведи аккаунты на всех 30 сетях мира, пиши, общайся там, тебе же заняться больше нечем…

                                    Кароче, половину пунктов не стал описывать, все субъективно и может быть оспорено.

                                    Хотите сделать ИДЕАЛЬНЫЙ личный сайт — делайте его ИНДИВИДУАЛЬНЫМ.
                                    • UFO just landed and posted this here
                                        +1
                                        На счёт девятого пункта… По моему автор не призывает заводить аккаунты в соцсетях, он говорит, что если вы уже используете какие-то из них, то неплохо сообщить об этом посетителям сайта, чтобы они смогли получше вас узнать.
                                        Последнее предложение очень верное. (:
                                          0
                                          Это напоминает раздел «контакты» где «продвинутый» хозяин пишет адрес сайта…

                                          Предпочитаю делать кнопку печати на странице контактов, так что адрес сайта там как раз кстати.
                                          +1
                                          Идеальное может создать только Бог. Но ему личный сайт не нужен.
                                            0
                                            Статья спорная, но довольно интересная. А вот правописание глаголов в русском языке — вещь однозначная…
                                              0
                                              Развей свою мысль :)
                                                0
                                                «Ищишь», «ищите» не в повелительном наклонении — аж глаз цепляется.
                                                  +1
                                                  Да не, мне «развей Twitter аккаунт» глаз резануло, хотя форма, кажется, правильная. Однако из-за неоднозначности понимания следовало бы использовать либо другую форму, либо другое слово.
                                                    0
                                                    Это, кстати, к вопросу однозначности правописания глаголов в русском языке
                                                      0
                                                      Ненене, это не правописание, это употребление. Написано «развей» правильно.
                                                        0
                                                        Грамотой надо тоже с умом пользоваться. Задача ведь смысл донести.
                                                          0
                                                          Бесспорно. Но однозначности правописания это не противоречит.
                                                      0
                                                      Развей… Да, как-то странно. Не совсем ясно, что именно с ним нужно сделать :-)
                                                        0
                                                        В связи с этим пунктом 0 нужно написать:
                                                        0. Пиши понятно и грамотно. Воспользуйся услугами корректора (это скорее для профессиональных сайтов).
                                                0
                                                И чего всем так не нравится? По-мему, если творчески подойти к восприятию данных советов, то может получиться весьма неплохой личный сайт. Приятный и полезный.
                                                Спасибо за материал.
                                                  0
                                                  Зачем фрилансеру свой логотип, он ведь не товар и не студия, у него есть имя — его и нужно продвигать.
                                                    0
                                                    Логотип штука интересная — вроде подписи, все-таки визуальная составляющая бренда. Если ты можешь создать свой бренд и лого своего бренда, то почему нет?

                                                    А не можешь, тоже не беда.

                                                    >У него есть имя — его и нужно продвигать.

                                                    Имя — может стать его логотипом, или выполнять функцию — «идентификация бренда». Только поставить имя в левом верхнем углу наверное бдет немного странным.

                                                      0
                                                      Вот пример, где только имя без логотипа: www.lipka.ru, www.ankl.ru, www.a.href.ru и т. д. И выглядит ничуть не странно.
                                                    0
                                                    1. Логотип — для персонального сайта это спорно. Хотя пусть будет, оригинальная аватарка никому не мешала. А вот адрес в лого зачем? Для того что бы запомнили лучше?
                                                    2. Ага. А так же еще под подзаголовок, параграфы и текст. В целом можно сказать что сайт должен иметь интересный нормально оформленный контент. Почему тут только подзаголовок. Тогда уж сразу карта сайта.
                                                    3. Я понял, что все таки речь идет о сайте фрилансера. Тогда пусть будет портфолио.
                                                    В остальном если речь идет о сайте-портфолио фрилансера то нормально.
                                                    Еще надо добавить
                                                    11. Корректность информации и точность названий.
                                                    И если статья о сайте-визитке фрилансера то так ее и назвать.
                                                      0
                                                      Ссылаясь на усреднённую модель типового просмотра сайта пользователями(сверху вниз справа налево по диагонали), предположу, что логотип нового сайта можно помещать справа вверху, чтобы привыкли, а затем, можно влево сместить.
                                                        +2
                                                        Контент должен быть на сайте. Контент. И первое место в этом списке — Контент! Оно же второе и третье — контент.

                                                        Логотип и все остальное — от контента зависят, и его обрамляют.
                                                          0
                                                          Каждый сайт создается по какой-нить причине, и ради чего-то. Сайт фрилансера — ради новых заказов или поднятия собственной ценовой планки за счет самопиара. Так вот эти все задачи никакой декор не решит. Контент наше все.
                                                          0
                                                          Раздел «design for print» бегло прочитал как «design for profit».
                                                          Вполне подошло бы для дизайнерствующего фрилансера, в качестве подзаголовка.
                                                            0
                                                            Прежде всего, хорошая статья, хороший труд. Одно изменил бы — логотип. Если у вас фирма, тогда он нужен, а если просто сайт, то совершенно не обязательно. Все кто-угодно делают себе логотипы и такого уровня.
                                                            Я бы заменил этот раздел на нейминг. Выбрать домен, вот это важно, потом сложно будет менять.
                                                              0
                                                              «5. О»

                                                              ЖЖоте!!! Этопять!!!
                                                              Простите за неформальный тон ) Но право, нельзя же так переводить дословно. Топику минус из-за местами неадекватного перевода, автору плюс за затраченное время.
                                                                +1
                                                                перевод не литературный. Читается тяжело, очень много несостыковок типа «ты» и «вы», лишние предлоги и пр… впрочем уже выше отметились. Кстати сегодня сам переведу статейку. Можно же опубликовать будет типа «альтернативный вариант»… Никто не подскажет в какой блог это делать??
                                                                  0
                                                                  Почитал статью, хомяк свой переделывать не буду :-)
                                                                    0
                                                                    Посмотрел, хомяка. Думаю стоило бы подправить. С некоторыми изменениями мне бы понравился твой хомяк. =)
                                                                    0
                                                                    Спасибо

                                                                    Only users with full accounts can post comments. Log in, please.