Войти Регистрация

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

А бывает другая ситуация: вы – владелец сайта – не можете взять в толк, почему народ бежит с ресурса в первые 5 секунд? Почему летающие снежинки и чарующие звуки на вашем сайте не увеличивают конверсию?! Возможно, проблема в дизайне сайта, а точнее, в его юзабилити. Все эти подводные камни можно обойти, изучая уроки веб дизайна, собранные в этом разделе КодоМазы. Вообще, разработка графического представления интернет ресурса и его структуры – лишь малая часть того, что называется UI – пользовательским интерфейсом, который, в свою очередь входит в глобальное здание UX – опыта пользовательского взаимодействия.

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




Этапы создания сайта

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

Как создать макет сайта?

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

Чем различается UX и UI дизайн?

Концепции дизайна пользовательского опыта (UX) и дизайна пользовательского интерфейса (UI) часто понимаются неправильно или даже взаимозаменяются. Эти области, однако, определенно неодинаковы и требуют от своих специалистов разных компетенций и разных методов работы.

Как создать логотип?

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

Дизайн и оформление писем для E-mail рассылок

Методы оформления E-mail рассылок. Что необходимо учитывать и как подготовить такую рассылку?

Применение изображений и графики в веб-дизайне

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

HTML 5 и CSS 3 новые возможности создания веб-страниц

Рассмотрим новые и интересные возможности в использовании HTML 5 и CSS 3.

Конструкторы сайта (обзор)

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

Обзор программ для снятия скриншотов

В статье рассмотрены следующие программы для создания скриншотов: KiberInfinity's Screen Shooter, Image Uploader, Lightshot, PicPick, SimpleScreen и другие.

Подбор цветового решения в веб-дизайне

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

Создаём макет сайта с рождественской темой в красных и золотых тонах (Часть 2)

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

Создаём макет сайта с рождественской темой в красных и золотых тонах

Урок web дизайна в Photoshop, в котором показан процесс разработки красивого и нарядного макета сайта с рождественской темой в красных и золотых тонах. Дизайн макета вызывает праздничное настроение.

Создаём элегантный макет сайта для фотографа (Часть 2)

Продолжение урока web дизайна в Photoshop, где вы узнаете, как сделать PSD макет web страницы с красивым дизайном в темных тонах, который подходит для сайта портфолио, ориентированного на демонстрацию фотографий.

Создаём элегантный макет сайта для фотографа

Урок web дизайна в Photoshop, где вы узнаете, как сделать PSD макет web страницы с красивым дизайном в темных тонах, который идеально подходит для сайта портфолио, ориентированного на демонстрацию фотографий. В данном уроке используются типовые приемы и методы, которые обычно применяются при разработке макетов сайтов.

Создаём в Photoshop креативное, современное меню (Часть 2)

Продолжение урока web дизайна в Photoshop, посвященного созданию оригинального, современного и креативного меню в форме диска с эффектом объема.

Создаём в Photoshop креативное, современное меню

Урок Photoshop, посвященный созданию оригинального, современного и креативного меню в форме диска с эффектом объема. Специальные термины и команды Photoshop в тексте приводятся на двух языках.

Макет галереи изображений с футуристической темой космоса в Photoshop (Часть 2)

Продолжение урока web дизайна, из которого вы узнаете, как создать в Photoshop макет 3D галереи изображений с футуристической темой космоса.

Макет галереи изображений с футуристической темой космоса в Photoshop

Иллюстрированный урок web дизайна, из которого вы узнаете, как создать в Photoshop макет 3D галереи изображений с футуристической темой космоса. Для создания иллюзии трехмерного изображения автор использует тонкие эффекты освещения и теней в совокупности с трансформацией перспективы. К уроку прикладывается исходный файл PSD Photoshop.

Создаём в Photoshop элегантный и простой Web макет блога (Часть 2)

Продолжение урока web дизайна, в котором мы создаём PSD макет главной страницы блога с элегантным, симпатичным дизайном.

Создаём в Photoshop элегантный и простой Web макет блога

Урок web дизайна в Photoshop, в котором вы увидите процесс разработки подкупающе простого и чистого PSD макета главной страницы блога с элегантным, симпатичным дизайном.

Создаём в Photoshop современный макет игрового сайта (Часть 4)

Четвёртая часть урока по созданию в Photoshop современного макета игрового сайта в темных тонах.

Создаём в Photoshop современный макет игрового сайта (Часть 3)

Третья часть урока по созданию в Photoshop современного макета игрового сайта в темных тонах.

Создаём в Photoshop современный макет игрового сайта (Часть 2)

Вторая часть урока по созданию в Photoshop современного макета игрового сайта в темных тонах.

Создаём в Photoshop современный макет игрового сайта

Урок web дизайна, в котором раскрыт процесс создания в Photoshop современного, впечатляющего макета игрового сайта в темных тонах.

Делаем в Photoshop макет сайта в виде открытой книги

Урок web дизайна в Photoshop, в котором предлагается создать очень простой, и может даже примитивный, но оригинальный и своеобразный макет сайта в виде открытой книги с закладками между страницами.

Делаем меню с «лунной» поверхностью в Photoshop

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

Оптимизация изображений под поисковые системы

В статье дается описание процессу оптимизации изображений на сайте для поисковиков, особенности, преимущества и недостатки.

Обращаем внимание на дизайн сайта

Рассмотрены основные моменты, на которые следует обратить внимание при выборе и разработке дизайна сайта.

Возможно ли безопасное обновление сайта?

Об опасностях обновления сайта.

Оптимальные решения при медленной загрузке сайта

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

Скорость загрузки сайта - повелитель внимания

О влиянии скорости загрузки сайта на внимание посетителей.

Как создать анимационную иконку для сайта

В статье говорится о том, как создать анимационную иконку.

Современные тенденции сайтостроения

Современные тенденции сайтостроения и важность модернизации архитектуры сайта в соответствии с растущими требованиями рынка.

Как создать в Photoshop дизайн сайта в стиле Clean WEB-2.0

В этом уроке веб-дизайна вы узнаете, как шаг за шагом, создать в Photoshop красивый и очень своеобразный, гладкий дизайн сайта в стиле «Web 2.0». Для того чтобы усвоить урок, достаточно знакомства с интерфейсом программы Photoshop.

Обзор основных графических редакторов

В статье дается описание основным графическим редакторам, особенности, преимущества и недостатки.

Восприятие человеком формы логотипа

Статья о том, как различные формы логотипа влияют на восприятие человека.

Оптимизация JPG изображений

Оптимизация изображений в формате JPG. Сжимать изображения полезно для более быстрой загрузки веб-страниц.

Основные правила оформления сайта

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

Современные стили веб-сайтов

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

Минимализм (стиль clean & simple) в веб-дизайне

Многие, известные всему миру дизайнеры давно поняли: все гениальное – просто. Зачем что-то усложнять? Ведь современный человек и так решает сразу много проблем. А если еще тратить кучу времени на восприятие веб-страниц? Времени совсем не останется.

Классификация веб-сайтов

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

Рекламные баннеры на сайте

Использование баннера как популярного средства раскрутки сайта.

Инструменты веб-дизайнера

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

Дизайн коммерческого сайта

Основные принципы дизайна для разных коммерческих сайтов.

Использование анимации на сайте

Особенности применения анимации на сайте.


Вход

Зарегистрируйтесь, если нет учетной записи

Восстановить пароль
Регистрация
Восстановить пароль
Войти в личный кабинет