Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Принципы создания современного веб-сайта

4 октября 2012 | Опубликовано в Веб-дизайн | 14 Комментариев »

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

Размер важен

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

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

__________________________________________________________________________

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

__________________________________________________________________________

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


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

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

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

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

Спецэффекты

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

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

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

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

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

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

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

Минимализм

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

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

Выводы

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

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




Комментарии

  1. fanski
    Thumb up Thumb down +13

    у меня в портфолио минимализм, я считаю. Старался сделать по минимуму fnsk.net

    Ответить

    Ya Ответ:

    Thumb up Thumb down +2

    Почти минимализм

    Ответить

    Pryanichek Ответ:

    Thumb up Thumb down -4

    Комментарий скрыт из-за рейтинга

    Ответить

    fanski Ответ:

    Thumb up Thumb down +5

    я про портфолио говорил :)

    Ответить

    Алена Данилина Ответ:

    Thumb up Thumb down +1

    «прийдется заполнить анкетушку» — Вы в курсе, что в слове «придется» нет буквы «Й»? Как только я это увидела, сразу Ваш сайт закрыла.

    Ответить

    fanski Ответ:

    Thumb up Thumb down +2

    изменю :-[

    Ответить

    Васёк Ответ:

    Thumb up Thumb down +1

    Нормальное чувство юмора, Женя)))

    Ответить

  2. Дмитрий
    Thumb up Thumb down +1

    при чем тут JQuery? Вы в курсе, что это просто популярный JavaScript Framework?

    Ответить

    Elena Ответ:

    Thumb up Thumb down -1

    Да, в курсе. А что не так?

    Ответить

  3. Тимур
    Thumb up Thumb down +8

    Красивый сайт у fanski @=

    Ответить

    fanski Ответ:

    Thumb up Thumb down -1

    Спасибо :) *THUMBS UP*

    Ответить

    Осьминог Ответ:

    Thumb up Thumb down -1

    у Фански сайт простой. Нет изюминки дизайнера. Он минимально скомпонован, без ничего.

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

    Если ничего не использовать на сайте кроме галереи — это еще не значит что твой сайт сделан в минимализме. Ты просто по «минимуму» его сделал.

    Минимализмом еще владеть правильно нужно. И у тебя там ничего нет что бы ты с увереностью мог говорить «мой сайт сделан в стиле минимализм» .

    (и нравится как ты с неувереностью это говоришь, — у меня на сайте минимализм.... я считаю....).

    Он сделан минимально... и все, минимализмом и не пахнет.

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

    Ответить

  4. Сергей
    Thumb up Thumb down 0

    САЙТЫ ЛЮБОЙ СЛОЖНОСТИ!

    Продвижение Сайтов !

    Привлечение новых клиентов в Ваш бизнес!

    Контекстная Реклама

    Новые клиенты уже через 1 час

    Все наши клиенты всегда остаются довольны и навсегда остаются с нами — smart-start.com.ua

    Ответить

  5. Павел
    Thumb up Thumb down 0

    Забыли написать, что важна скорость загрузки. Иначе если весь этот креатив грузится более 4 секунд, он может остаться неоткрытым)

    Ответить

Оставить ответ


− 1 = ноль

Вставить изображение