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

Размер важен

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

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

__________________________________________________________________________

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

__________________________________________________________________________

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

Адаптивный дизайн

В последнее время появилось много статей и уроков по адаптивному дизайну и мы настоятельно рекомендуем все их прочесть. Теперь при помощи CSS3 Media Queries можно адаптировать веб-сайты под мобильные телефоны. Конечно, нет ничего плохого в создании отдельной версии для мобильного, но все же будущее за новыми технологиями и отзывчивым веб-дизайном.

The Bodhum Network  является хорошим тому примером. Вы всегда можете установить изображениям максимальную шириной: 100%, так что изображение будет изменяться в зависимости от размера окна. Также не забывайте изменять внешний вид навигации так, чтобы она могла поместиться на меньшем дисплее мобильного экрана.

В создании адаптивного сайта вам помогут статьи:

• Responsive web design — красиво и удобно
• Адаптивные слайдеры и галереи изображений
• Создаём адаптивный сайт
• 24 полезных инструмента для создания адаптивных сайтов
• Адаптивные слайдеры и галереи изображений

Спецэффекты

Некоторые дизайнеры очень хотят выйти за рамки и создать необычный сайт.

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

Смотрите здесь интересные примеры для вдохновения:

• 30+ оригинальных портфолио успешных веб-дизайнеров 
• Лучшие отечественные студии веб-дизайна
• Веб сайты для дизайнера: поиск новых идей

Динамические эффекты

Нет причин не использовать JavaScript или JQuery в современной веб-разработке.

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

Помимо JQuery HTML5 дает новые возможности для создания динамических веб-сайтов. Например, на сайте Agent008Ball  используются методы canvas  языка HTML5. Здесь можно играть в бильярд онлайн.

Минимализм

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

На сайте The New Design Guidelines используется красивая типографика и изображения-иконки, благодаря чему информация легко воспринимается.

Выводы

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

По материалам designm