Начать. Это бесплатно
или регистрация c помощью Вашего email-адреса
Rocket clouds
Web-дизайн создатель Mind Map: Web-дизайн

1. Этапы создания веб-дизайна

1.1. 1. Техническое задание (ТЗ) Исходя из четкого понимания цели, для которой создается сайт, объемов сайта, его функциональности задаются основные параметры визуального представления и структуры сайта. Этап заканчивается после утверждения технического задания заказчиком. Занимается менеджер проекта.

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

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

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

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

2. Элементы веб-дизайна

2.1. линия

2.1.1. Чтобы построить цельную картинку, первое что необходимо применить – это линии. Этот элемент никак нельзя проигнорировать, ведь без линий сайт будет как минимум неполноценен. Само их построение происходит за счёт точек, которые должны соединяться. За счёт контуров, для вас, и впоследствии посетителей сайта, всё будет выглядеть структурировано, а главное комфортно восприниматься информация. Вид линий может быть абсолютно разным:

2.1.1.1. Горизонтальный

2.1.1.2. Вертикальный

2.1.1.3. Параллельный

2.1.1.4. Пунктирный

2.1.1.5. Волнистый

2.1.1.6. Прямой

2.1.1.7. Кривой

2.2. фигура

2.2.1. При пересечении линий образуются фигуры. Существует два вида фигур:

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

2.2.1.2. Геометрические предлагаются нам в виде таких фигур как прямоугольник, квадрат и т.д.

2.3. цвет

2.3.1. Цвет очень хорошо передает эмоции и позволяет объектам выделяться от фона. С помощью цвета можно привлечь внимание к определенной части сайта. Существуют основные цвета (красный, желтый, синий), вторичные цвета (оранжевый, зеленый, фиолетовый) — они получаются путем смешения основных цветов, промежуточные (основной + вторичный) и дополнительные цвета (противоположные цвета на цветовом круге).

2.4. текстура

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

2.4.1.1. Форма

2.4.1.2. Гладкая

2.4.1.3. Жёсткая

2.4.1.4. Мягкая

2.4.1.5. Шероховатая

2.5. форма

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

2.5.1.1. Состав формы:

2.5.1.1.1. Глубина

2.5.1.1.2. Высота

2.5.1.1.3. Ширина

2.6. светотень

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

2.7. размер

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

2.8. пространство

2.8.1. Под понятием пространства понимается место или арена действий, площадка, где собственно и находится вся композиция. Может быть двухмерное и трехмерное пространство. Объекты в трехмерном пространстве имеют глубину и объем.

3. Кто такой веб-дизайнер

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

4. Принципы веб-дизайна

4.1. баланс

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

4.2. контраст

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

4.3. подчиненность

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

4.4. пропорции

4.4.1. — это отношение отдельной части ко всему объекту, а также соотношение отдельных частей друг с другом. В данном примере показано «Золотое сечение».

4.5. масштаб

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

4.6. ритм

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

4.7. единство

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

5. Как научиться веб-дизайну

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

6. Определение веб-дизайна

6.1. Веб-дизайн — это процесс производства веб-сайтов, который включает

6.1.1. техническую разработку

6.1.2. структурирование информации

6.1.3. визуальный (графический) дизайн

6.1.4. доставку по сети

7. Стили

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

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

7.3. Корпоративный стиль – это чёткое подчинение стандартам фирмы, которая делает у вас заказ. Всё должно быть выдержано в одном стиле, строго и серьёзно. Но не стоит совсем отказываться от графики, здесь также важно отталкиваться непосредственно от стиля самой компании.

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

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

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

7.7. Рисовка – стиль, задуманный изначально для веб-дизайна, в последствии также применённый в оформлении интерьеров.

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

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

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

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