Искусство создания лучших сайтов

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

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

Содержание должно иметь приоритет

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

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

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

Изображение предоставлено

Адаптивный дизайн имеет важное значение (кроме случаев, когда это не так)

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

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

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

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

иллюстрация предоставлена

Важное содержание должно быть очевидным

Хотя это должно быть очевидно, так часто это не так. Дизайн не должен делать важные вещи тонкими. Он должен выделять то, что важно, и быть увиденным зрителем. первыйи все же очень многие дизайнеры стараются быть «креативными» и покорять эти важные вещи.

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

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

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

Стилистические элементы должны легко сочетаться

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

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

GIF предоставлено

Слои на помощь

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

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

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

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

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

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

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

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

Наконец, способ правильно отделить контент от дизайна

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

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

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

изображение заголовка любезно предоставлено Мэтт Карлсон

Богдан Рэнца

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