Что нужно, чтобы сделать отличный веб-сайт графического дизайна

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

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

  • Ленивый!
  • Лишенное воображение!
  • Нетворческом!
  • Неоригинальный!

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

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

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

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

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

Вот пример сайта, который делает это правильно:

Так почему же это правильный подход? Ну, для начала, он говорит мне, кто он (Родриго Брекенфельд), что он делает (графический дизайн и разработка интерфейса), и почему я должен интересоваться им (он разрабатывает простые и коммуникативные визуальные интерфейсы + дружественные интерфейсы пользователей (sic) и прочее).

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

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

Вот пример сайта, который полностью противоположен тому, что я советую:

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

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

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

Наконец, давайте посмотрим на сайт, который упал где-то посередине:

Когда вы впервые заходите на этот сайт, вы сталкиваетесь с немного тревожным изображением этого парня, который молча смотрит на вас и затем очень медленно мигает. Это на самом деле очень хорошо, потому что многим людям будет интересно узнать, что происходит, и они захотят узнать больше. Хотя в данный момент мы ничего не знаем о Майкле, кроме того, как он выглядит, это нормально. Вы можете приостановить действие правила «с первого взгляда», если у вас есть сильный хук, и этот сайт делает.

Немного прокрутив страницу вниз, мы видим, что он держит для нас сообщение:

Отлично. Теперь мы знаем, кто он, чем он занимается и почему мы должны интересоваться им. Но здесь мы видим важность не только использования слов, но и правильных слов.

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

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

Показательный пример: неплохо было бы упомянуть, в какую школу вы ходили, но Университет Саймона Фрейзера недостаточно хорошо известен, чтобы его можно было сокращать до «СФЕ», за исключением случаев, когда вы общаетесь с другими людьми, которые там ходили.

2. Выделиться по правильным причинам

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

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

Вот пример парня, который, кажется, понял:

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

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

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

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

Интерфейс сайта действительно прост. Когда вы впервые попадаете на страницу, вы получаете копию визитной карточки:

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

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

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

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

Конечно, предполагается, что страница о мистере Милинге контрастная, поэтому цветовая гамма перевернута с его стороны. Давайте посмотрим, как выглядит страница Самуила:

Лично я был немного менее удовлетворен этим, потому что у него был более общий шаблонный вид, но он все еще очень хорошо представлен, и цвета эффективны. Не совсем интуитивно понятно, что пользователь должен навести курсор на значки, чтобы показать, что они обозначают HTML, CSS и JavaScript. Может быть, у меня просто ненормальный ум, но я думаю, что JavaScript не совсем очевиден, и на самом деле выглядит как некое отверстие. Страница хорошо упаковывает много сложной информации в маленькое пространство, и это эффективная часть коммуникации. Возможно, сказать, что вы «довольно хороши», недостаточно, когда вы пытаетесь убедить кого-то дать вам концерт.

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

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

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

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

3. Сохраняйте ваши сообщения простыми

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

Прежде всего, впечатлять людей, потому что вы впечатляет, а не потому, что вы пытаетесь произвести впечатление. Что должно произойти, так это то, что зритель должен сидеть за компьютером и чувствовать, как челюсть его изумляется, когда они смотрят на экран и произносят бессмертную фразу: «Вау, это действительно впечатляет! Где мой телефон? Я должен нанять этого человека! »

Если вы ошибетесь, они скажут: «Ха! Посмотрите на этого идиота, пытающегося поразить меня всей этой высокотехнологичной чепухой! »

И если вы действительно ошибетесь, они скажут: «Ааааа! Этот сумасшедший веб-сайт со всей этой дурацкой большой графикой, липким ненужным JavaScript и ужасной флеш-анимацией полностью перегружает мой процессор. Теперь мне придется перезагрузиться!

Не будь тем парнем. Также избегайте использования жаргона, если вы не ожидаете, что аудитория будет с ним знакома. Например, совершенно нормально использовать аббревиатуру «PHP», и было бы странно, если бы вы прописали отдельные слова, за которыми оно стоит. С другой стороны, если вы выбрасываете модное сокращение месяца, такое как «CTR» и «KPI», не удивляйтесь, если вы потеряете половину своей аудитории.

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

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

Богдан Рэнца

Богдан является одним из основателей Inspired Mag, накопив за этот период почти 6-летний опыт. В свободное время он любит изучать классическую музыку и изучать изобразительное искусство. Он тоже одержим исправлениями. У него уже есть 5.