Обучение веб-дизайну с нуля — пошаговое руководство для начинающих (десять этапов). Уроки веб-дизайна с нуля
Книга была и остается основным источником информации, особенно для тех, кто хочет изучать что-то новое. Блоги, статьи в интернете – это конечно хорошо, но только книга даст вам структурированные, базовые знания по тому предмету, который вы решили изучить.
Это касается и веб-дизайна. Да, вы можете быть талантливым самоучкой, но без основ далеко не уедешь. Когда-нибудь вам все-таки попадется проект, работая над которым, вы поймете, что вам не хватает теоретических знаний и основных понятий.
Не нужно ждать, пока это случится. Держите подборку из десяти лучших книг по веб-дизайну, которые приоткроют для вас дверь в волшебный мир дизайна (и не только).
ТОП-10 книг по веб-дизайну для новичков и не только
Приведенные в списке книги известны по всему миру, и некоторые из них стали «настольными» для каждого уважающего себя веб-дизайнера. Вы можете приобрести их в книжных магазинах, в том числе на Ozon.
Приступим!
Эта книга вышла еще в 1999 году, и в ней уже много устаревшей информации. Но вот общие идеи, которые доносит автор до читателей, актуальны до сих пор, и будут актуальны еще долгие годы. Прочитав книгу, вы получите преимущество перед остальными веб-дизайнерами, так как вы будете понимать, как пользователь взаимодействует с интерфейсом, и как сделать последний удобным для него. Автор подробно объясняет, что нужно сделать, чтобы сайт был полезным.
Обязательно к прочтению всем новичкам, перед изучением языка разметки – полученные знания помогут вам избежать частых ошибок во время верстки и разработки дизайна сайта.
Те времена, когда интернетом пользовались только с компьютера, давно прошли. В течение дня каждый из нас может зайти на один и тот же сайт со смартфона, с компьютера и даже с телевизора. Но знаете ли вы, как сделать так, чтобы ваш сайт выглядел хорошо, и был удобным независимо от того, каким устройством пользуется ваш посетитель? Нужна ли вашему сайту мобильная версия, или же нужно подумать над таким дизайном, который будет одинаково хорош независимо от устройства? Ответы на эти актуальные вопросы изложены в данной книге.
Чем хороша эта книга – ее писал практик. Здесь нет сухой теории, зато есть отличные рекомендации по отзывчивому дизайну, и даже примеры кода.
Кому читать: в первую очередь новичкам, так как эта книга – полный теоретический курс по веб-дизайну, начиная от основ до более сложных понятий. Найдут много интересного для себя маркетологи, специалисты по рекламе и программисты.
Автор книги – профессиональный дизайнер, который сумел просто и понятно объяснить даже сложные вещи. Данная книга – полный учебник по дизайну, начиная от теоретических основ, и заканчивая практическими приемами.
Это единственная полная книга по веб-дизайну, написанная русским специалистом-практиком. Кирсанов не льет воду, пишет связно, и думает с читателем на одном языке.
Если вы хоть немного интересовались маркетингом и психологией продаж, то вы слышали о том, что при покупке человеком чаще всего движут эмоции. И эмоции эти должны быть положительными: радость, веселье, ожидание чего-то необычного и хорошего. И тот сайт, который сможет вызвать такие эмоции, обречен стать узнаваемым, и обеспечить высокую конверсию.
Правда, далеко не каждый дизайнер знает, как сделать свой сайт именно таким – вызывающим положительные эмоции и восхищение. Сайты в сети в основной своей массе однообразны, а попытки сделать что-то необычное часто терпят поражение.
Эта книга научит вас делать сайты, которые будут вызывать у людей нужные эмоции. Новые механизмы взаимодействия с посетителями, новые подходы к демонстрации продукта и другие рекомендации – все это вы найдете здесь.
Книга издана еще в 1979 году, но даже современные дизайнеры найдут для себя ответы на многие животрепещущие вопросы. Здесь сформулированы основные понятия, без которых начинающему дизайнеру будет трудно в этой непростой профессии.
Еще одна книга, посвященная юзабилити. Автор объясняет, как сделать интернет-магазины более удобными, согласно его методу.
У автора очень интересный, ироничный стиль письма, потому книгу вы прочтете на одном дыхании. Стив Круг объясняет, как быстро найти ошибки в юзабилити и исправить их. В результате вы научитесь быстро определять степень удобства использования любого веб-ресурса, находить проблемы и оценивать функциональность.
В книге собраны правила, советы, и некоторые закономерности, которые касаются русскоязычной типографики.
Эта книга может стать трамплином, началом для тех, кто захочет потом вникнуть в тему немного глубже.
Еще одна книга о дизайне для мобильных устройств. Автор излагает суть своего подхода – он предлагает проектировать дизайн сначала именно для мобильных устройств. И этот метод совершил настоящую революцию в современном проектировании. Объясняет, чем отличается мобильная версия от десктопной, от каких функций нужно избавиться, чтобы не усложнять жизнь мобильному пользователю. Как правильно организовать контент, как устроить навигацию, какие особенности поведения мобильного пользователя иметь ввиду – все это вы найдете в этой книге.
Нет, это не книга об искусстве плагиата. Это путеводитель для тех, кто немного перегорел и не знает, откуда брать творческие идеи. Автор учит, как можно черпать вдохновение из окружающего мира, как находить новые идеи в чужом творчестве и, в конце концов, найти свой путь и свой стиль.
Иоханнес Иттен. «Искусство цвета»
Книга швейцарского художника и знатока европейского искусства рассказывает о закономерностях цветовых сочетаний и контрастов. Здесь вы найдете рекомендации по цветовым сочетаниям, основанные на опыте и наблюдениях автора.
Наш ТОП-10 лучших книг по веб-дизайну, это далеко не полный список книг о веб-дизайне, юзабилити, цвете и вдохновении. Но этого минимума точно хватит, чтобы изучить основы этого интересного ремесла, научиться находить ошибки на своих и чужих сайтах, и научиться находить источники вдохновения.
Сохраните подборку себе, чтобы не потерять!
1 голосДоброго времени суток, уважаемые читатели моего блога. Долгое время я постигал основы создания сайтов благодаря онлайн-курсам. Только недавно я наконец-то дошел до чтения книг.
Когда у тебя появляется какое-то хобби, в котором ты полный профан, тяжело разработать свою стратегию обучения таким образом, чтобы поддерживать интерес и развиваться в течение долгого времени. Мне удалось это сделать и сейчас я хочу поделить с вами опытом.
Сейчас вы узнаете про самые обсуждаемые и популярные книги по веб дизайну, курсы и метод, благодаря которому вы сможете достичь совершенства в той области, которую выбрали.
Про стратегию обучения и основные ошибки, которые совершают все новички
Когда-то у меня появилось непреодолимое желание узнать все . Начал я, конечно же, с нуля и сразу же совершил очень большую ошибку.
Я не был уверен, что у меня все получится и, как следствие, не хотел тратиться на хобби. Сперва я даже не пытался найти какие-то онлайн курсы. Ох уж это свойственное большинству из нас недоверие. Мы привыкли получать знания из книг, учебников. Ну какие курсы? Я даже не задумывался чтобы посмотреть цену и махал рукой, уверенный, что не хочу никаких переплат.
Первой моей книгой по веб-дизайну стал бестселлер Терри Фальке-Морриса .
К ней мы еще вернемся, она действительно хороша. Ее обязан прочитать и положить на стол любой человек, занимающийся сайтами. Я смог оценить ее по достоинству спустя какое-то время, почти полностью разобравшись с основами. Она произвела на меня совсем другое впечатление, нежели в первый раз.
Начинать свой путь в программировании с этого бестселлера я бы не рекомендовал ни за что.
Учитесь вы в институте или школе, вам никогда не выдадут стопку литературы. Это не случайно. Вы должны видеть преподавателя, быстро достигать результата и отслеживать прогресс. Свой я бы советовал начинать с какого-то курса или онлайн школы.
Не смотря на то, что в комплекте с «Большой книгой» идет диск, на котором записаны домашние задания, учиться будет трудно. Много непонятных терминов, которые вам объясняют на пальцах. Пока вы дойдете до чего-то интересного, вы устанете. Удивить и порадовать уставшего и замученного человека очень трудно, а самостоятельно заставить себя вернуться к урокам еще сложнее.
Представьте, вам захотелось стать резчиком по дереву. Вы сидите в удобном кресле, а на экране монитора человек берет в руки пилу, рассказывает о ней всякие интересные штуки, а параллельно показывает ее в деле. К концу ролика у него готовая фигура, а вы знаете какими инструментами он пользовался и благодаря чему достиг такого результата. Вы идете в гараж и принимаетесь за дело.
Совсем другое если вы сразу же находитесь в гараже с кучей аппаратуры. Читаете главу, потом начинаете искать соответствующее оборудование среди своего ассортимента, сравниваете с картинками, спотыкаетесь о незнакомые слова и думаете, что же это за браширование такое и как оно выглядит в реальной жизни.
Чтобы достичь результата, для начинающих веб-дизайнеров я рекомендую школу Алексея Захаренко «Профессия веб-дизайнер ».
Здесь 270 уроков по разным темам. Вы сами определяете сроки обучения. Если бюджет ограничен, можно заниматься в течение одного месяца и самостоятельно. Вы поймете все основы, а книги и учебники не будут уже столь непонятными.
Я тоже проходил курсы и через какое-то время они стали приносить все меньше пользы. Захотелось чего-то большего: интереснее и актуальнее. Вот тут-то ты и вспоминаешь про книги. Сейчас я расскажу вам про самые обсуждаемые книги по веб-дизайну. Лучшие они или нет я судить не возьмусь, но то, что их прочитало невероятное количество дизайнеров – это факт.
Книги для веб-дизайнера
Курсы создаются для новичков и чем вы становитесь образованнее, тем меньше они помогают в работе. Слишком много в них того, что вы уже давным-давно знаете. Приходит время скачать книги.
Если вы читали «О, дивный новый мир» Олдоса Хаксли, то знаете, что он боялся периода, когда среди кучи информации будет очень сложно найти по-настоящему ценные и правдивые сведения. К этому прибавились еще и постоянные изменения, которые вносят в дизайн каждый год. Что же делать и кому отдать предпочтение?
Вернемся к «Большой книге веб-дизайна ». Если у вас есть база, то она будет действительно интересна и актуальна.
Благодаря ей можно заполнить пробелы, о которых вам не было рассказано в онлайн-курсах и получить детальную и полную информацию . Учебник, а иначе его не назовешь – это полные сведения о языках программирования. И если в вашей голове находят отклик слова из отрывка, приведенного чуть ниже, то настало время скачать эту книгу.
Тут подробно рассказано о каждом термине, но со всем списком разобраться будет очень сложно. Лучше если у вас уже будут кое-какие знания на момент прочтения.
Не заставляйте меня думать
Вторая книга, о которой говорят, «Веб-Дизайн: книга Стива Круга или «не заставляйте меня думать! ». Я ее прочел и уверен, что она будет действительно полезна всем новичкам, кто так или иначе связан с дизайном. Почти каждый, кто работает в этой сфере, хотя бы листал ее. В книге вы найдете много по-настоящему полезных советов.
«Как это возможно? Ведь она издана аж в 2008 году?» — спросите вы. В дизайне все меняется каждый год, а иногда и чаще и если вы будете гнаться за модой и современностью, то у вас не останется времени на работу. Только чтение.
В этой книге собраны основные законы, которые применялись тогда и будут использоваться до скончания века. Это все равно что заповеди восприятия, которые разрушить невозможно. Люди могут меняться, но основные принципы уже нет. Вы можете скачать второе издание этого бестселлера с Ozon.ru.
Или прочитайте бесплатно первое, вышедшее в 2005 году (Скачать.pdf ).
Ну и напоследок…
Еще одна книга, о которой все говорят: . Мнение о этой книге у специалистов диаметрально противоположное.
Одни ее ругают, вторые восхваляют и считают сводом золотых правил. Понять где находится истина можно только после самостоятельного знакомства. Лично у меня его еще не случилось, так что если вы меня опередите, то оставляйте комментарии к этой статье.
Меня поразило количество, прочитавших ее. А вы можете приобрести товар на озоне или прочитать электронный вариант здесь .
Ну вот и все. Если вам была полезна эта статья, то присоединяйтесь к подписавшимся. С каждым днем нас становится все больше! Я высылаю информацию о новых публикациях уже многим читателям и хочу выразить им свою благодарность за внимание.
Желаю успехов в ваших начинаниях каждому из вас. До новых встреч.
Многие молодые люди желают связать будущую профессию с разработкой сайтов. Естественно, не все хотят быть программистами, часть из них их вполне устраивает веб-дизайн.
Обучение этой профессии с нуля – дело не легкое, ведь кроме навыков работы в необходимо быть креативным человеком, хотя бы немного разораться в коде (знать CSS и ), уметь общаться с заказчиком на одном языке и т. д.
Прежде, чем начинать ознакомление с азами профессии, возникает ряд вопросов, и ответы на них приходится искать самому. Сделать это непросто ввиду отсутствия опыта, материалы с интернета не всегда становятся полезными, а порой и наоборот, лишь добавляют новые вопросы, да и опытный товарищ есть не во всех.
Давайте разберёмся, с чего начинать обучение веб-дизайну, какие знания для творчества понадобятся, где и в каком порядке их добывать, сколько времени уделять практическим занятиям, как обзавестись первым опытом и заказом…и с массой сопутствующих вопросов.
Cодержание:
Этап первый – выясните, почему вы хотите этим заниматься
С одной стороны, это простой вопрос, ведь большинство хочет заниматься веб-дизайном ввиду хорошей оплаты труда.
Сайтостроение – очень прибыльное дело, а опытного, и главное, толкового разработчика днём с огнём не всегда сыскать.
Хотя бывает много случаев, когда человек хочет заняться именно , а без знаний создания графического движка сайта программировать его непросто.
И третий распространённый случай, почему люди начинают интересоваться веб-дизайном, – тяга к изобразительному искусству.
И данная область может послужить отличным средством для реализации своих талантов на практике с извлечением из этого финансовой выгоды.
Важно! Для какой бы цели не знакомились с веб-дизайном, помните, что как обучение, так и работа должна быть интересной, выполняться с желанием и приносить удовольствие, но не превратиться в рутину.
Ввиду того, что графический художник – молодая профессия , её точного определения пока не существует, и многие специалисты трактуют понятие по-своему.
Если раньше этот человек должен был сделать странички красивыми и приятными глазу, то нынче необходимо и навыками кодера обладать, и в маркетинге разбираться, и понятие в SEO-продвижении иметь.
Без уникальных решений, оригинальных идей и индивидуального творческого подхода задача не решается.
Дизайнер сайтов – это технический художник, работающий над внешним видом и оптимизацией загрузки сайта и веб-приложений.
В задачи этих людей входят:
- работа над логической структурой страницы – дабы любому начинающему пользователю всё было понятно, он с первого раза смог отыскать то, что ищет, все важные ссылки должны быть на виду;
- разработка наиболее рационального способа подачи контента – способность заинтересовать посетителя, заставить его подольше задержаться на ресурсе, полистать страницы сайта;
- графическое оформление – где какие элементы будут размещаться, какими будут кнопки и надписи после клика, как осуществляется взаимодействие с клиентом, как и что будет изменяться в процессе работы посетителя, изменения масштаба и т. п.
Вот мы вкратце и выяснили, почему люди хотят заниматься графической частью сайтов.
Для будущих программистов достаточно ознакомиться с азами визуального оформления веб-ресурсов, хотя бы поверхностно освоить графические редакторы, верстку по шаблону.
Уж жаждущим многие годы жизни посвятить созданию интерфейса интернет страниц и получить соответствующую профессию поначалу придётся потрудиться, им и посвящена данная статья.
Этап второй – выберите направление веб-дизайна в котором вы хотите себя попробовать
Интернет-технологии стремительно развиваются, а вместе с ними повышаются и требования к разработчикам. Сначала красивая эстетичная и яркая страница были задачей художника.
Нынче различают целых семь направлений в их оформлении, и это только основных.
Жесткий
Старый как само сайтостроение вид оформления страниц , не требующий прикладывания усилий, отлично подойдёт для новичков.
Суть заключается в том, что все элементы ресурса размещаются в виртуальных ячейках таблицы с фиксированными размерами, которые задаются дизайнером.
Такая страничка будет абсолютно одинаково выглядеть на всех устройствах, независимо от платформы и размера экрана.
И это не значит, что подобный ресурс отсталый, ведь опытный разработчик с применением жесткого дизайна может создать прекрасно оформленный сайт, а корректировка чего-то в таком случае занимает считанные минуты.
Гибкий
Также табличный дизайн , но ширина ячеек виртуальной таблицы не строго задана, а зависит от размеров экрана (соотношения сторон, разрешения). Объекты будут стараться заполнить всё пространство ячейки, изменяя её размер. Главная особенность подобного решения – повышение удобства визуального восприятия данных за счёт динамически изменяющихся параметров отображения. На подобных страницах нет пустых, свободных от контента, мест.
Сложностями подобного дизайна являются:
- отсутствие гарантии, что на старых «квадратных» и огромных широкоформатных дисплеях ресурс будет отображаться правильно , без растягивания или сжимания содержимого;
- далеко не все браузеры нормально справляются с обработкой так называемых гибких ячеек, да и интернет-обозреватели, созданные на различных движках, делают это каждый по-своему;
- на подгонку и доведение проекта до идеала уходит много времени .
Комбинированный
Соединение двух предыдущих методов : если размеры монитора (соотношение его сторон) сильно отличаются от параметров дисплея, что использовался при создании сайта, применяется гибкий дизайн, в ином случае используются и те, и иные ячейки, в зависимости от наличия свободного пространства в них.
Текстовый
Применяется при оформлении одностраничных ресурсов и сайтов , которые представляют небольшие предприятия и компании в глобальной цифровой сети. Особенностью подобного оформления является практическое отсутствие графических элементов, что положительно сказывается на скорости загрузки страницы. Сделать проект привлекательным поможет игра шрифтами, цветами текста и удачным расположением текста.
Полиграфический
Наиболее востребован при разработке корпоративных и маркетинговых ресурсов , где на первом месте стоит эмоциональное наполнение. Дизайнер должен подходить к работе с наибольшей креативностью и творчески выбирать пиксельные изображения для оформления страницы.
Недостатком полиграфического дизайна является понижение скорости загрузки сайта из-за наличия, как правило, обильного количества растровых рисунков, да ещё и в высоком разрешении.
Интерфейсный
Обращаются к нему в основном опытные мастера. Их задача – угодить всем запросам пользователя, как правило методом минимизации программного кода, оптимизации графических элементов и создания удобной навигационной системы с расположением меню в верхней части страницы. Такие ресурсы быстро грузятся, с ними легко работать как с компьютера, так и с мобильных устройств
.Динамический
Наиболее трудоёмкие, сложные варианты оформления веб-страниц. Данный тип дизайна заключается в размещении на странице динамического контента (анимация, скрипты, двигающиеся и изменяющиеся элементы, широкоформатные видео).
Для реализации замыслов придётся изрядно попотеть, а, чтобы посетитель был доволен и всё работало, как задумано, нужны не только мастерство владения графическими редакторами, но и навыки оптимизации, кто же захочет подолгу ожидать появления какой-либо красочной трехмерной кнопки. Зато отлично проработанный ресурс всегда привлекает своей красотой, оригинальностью и художественными решениями, в независимости от наполнения.
Этап третий – выясните, какие программы для веб-дизайна сейчас в тренде
Прежде, чем скачивать книги по тому или иному графическому редактору, нужно ясно себе представлять те элементы, что используются при графическом оформлении сайтов: фигуры, цвета, формы, игра света и тени, линии – это базовые элементы, из которых и создаётся вся композиция.
Как ни крути, знания каскадных таблиц и гипертекстовой разметки нужны едва ли не в первую очередь.
Понадобятся дизайнеру и знания в области компьютерной анимации, популярных , SEO, а может и трехмерного моделирования.
Внимание! Кроме сложности в освоении, приложение придётся ещё и покупать для полноценной эксплуатации, хотя в целях обучения можно и схитрить, обойдя защиту программы.
Последний обрастает функционалом, который востребован в десятках сфер, и преумножению возможностей относительно веб-дизайна ребята с внимания уделяют мало.
Другое дело Sketch – заточена для рисования графических интерфейсов с нуля, не имеет ни единого лишнего элемента, более проста в освоении и легко обгоняет Photoshop по основным показателям.
Обязательно выберите наиболее удобный , поддерживающий синтаксис и подсветку: , Sublime , Axure RP .
Этап четвертый – изучите полезные книги для начинающих веб-дизайнеров
Интернет тем и хорош, что позволяет бесплатно обзавестись книгами, которые ещё десяток лет назад пришлось бы приобретать или искать в единомышленников.
С популяризацией профессии веб-дизайнера и количество книг по теме увеличилось. Без наставника и учителя книга – лучший способ получать знания.
Обучение веб-дизайну с нуля следует начинать с той литературы, где даются основные понятия, теория и небольшие практические задания:
1 Итан Маркотт «Отзывчивый веб-дизайн» – практическое руководство для веб-дизайнеров, после освоения которого новичок избежит сотен типичных для начинающих ошибок, узнает о целесообразности создания мобильной версии сайта. Написано в ней и как верстать страницы, которые будут одинаково отображаться на всех устройствах.
2 Якоб Нильсен «Веб-дизайн» – в книге масса руководств по созданию эффективных интерфейсов, правильному расположению элементов навигации и заполнению ресурса контентом.
3 Ю. Сырых «Современный веб-дизайн» – справочник, описывающий тонкости работы над интерфейсом, начиная с этапа подбора контента в зависимости от тематики ресурса, и заканчивая тестированием и отладкой готового макета. В ней масса информации не только по рисованию интерфейса, но и по его оптимизации и наполнению.
От автора: приветствую Вас, дорогой читатель. Начиная свой путь веб-дизайнера, Вы наверняка в огромном количестве встречаете различные семинары, курсы, справочники, книги и уроки веб-дизайна. Однако не каждый может позволить себе обучение стоимостью несколько тысяч рублей. Тем более, что действительно полезные и качественные уроки web-дизайна проводятся только в крупных городах. Какой выход?
Чтобы овладеть профессией веб-дизайнера, успешно применять свои знания на практике и создавать качественный и полезный продукт, зачастую достаточно «проштудировать» различные веб-ресурсы или пройти специализированные видеокурсы, предназначенные для новичков.
Я не то чтобы против очной системы обучения веб-дизайну. Просто считаю, что большинство подобных курсов - просто «размазывание» полезного времени на изучение ненужной для начинающего веб-дизайнера информации, вроде «что такое Интернет» или «как установить Photoshop» (этому уж точно можно научиться самостоятельно).
К тому же, в нашей стране фактически не учат на веб-дизайнеров. То есть, специальность «графический дизайн» есть во многих вузах, однако, из нее выходят полиграфисты, иллюстраторы, декораторы, художники-оформители - кто угодно, только не специалисты по веб-дизайну.
Сегодня мы поговорим с Вами о том, без чего не обходится ни один вводный урок по веб-дизайну с нуля - основных критериях хорошего дизайна: цвете, форме и типографике. Ну и, конечно же, о понятии веб-дизайна.
Что такое веб-дизайн?
Создание любого веб-ресурса начинается с проектирования его интерфейса, который должен быть не только удобным и понятным для пользователя, но и отвечать целям и задачам, что стоят перед сайтом. Несмотря на то, что художественное оформление интерфейса отступает на второй план, его грамотное использование позволит усилить удобство сайта, сделать его запоминаемым и оригинальным.
Если Вы от рождения не обладаете художественным вкусом, не стоит переживать. Главное - знать основы веб-дизайна, а вкус появится с опытом.
Цвет
По умолчанию цвет монитора черный. Основные цвета - красный, синий и зеленый - добавляются к черному и образуют все остальные цвета. Если сложить три основных цвета, получится белый. Такая цветовая модель называется RGB.
Некоторые уроки веб-дизайна с нуля начинаются с описания цветового круга, который является главным помощником любого веб-дизайнера.
Принципы цветового круга
Пары цветов, расположенных друг напротив друга, являются контрастными. Например, синий с желтым, пурпурный с зеленым, голубой с красным;
контрастные цвета являются взаимно исключающими. То есть, если вы увеличите уровень голубого цвета, это автоматически уменьшит уровень красного. И наоборот;
определенный цвет получается путем смешивания соседних цветов. Например, чтобы получить желтый, нужно смешать зеленый и красный;
любому цвету можно противопоставить не один цвет, а контрастную пару. Так, чтобы повысить значение красного цвета, можно понизить уровень голубого или одновременно понизить значения синего и зеленого.
Небольшой лайфхак: чтобы быстро подобрать контрастный цвет, можно инвертировать цвет любого растрового элемента с помощью команды Ctrl+I.
При выборе цветовой палитры для сайта не забывайте использовать таблицу безопасных цветов, чтобы быть уверенными, что браузер передаст тот или иной цвет правильным образом. Если браузер не может распознать какой-либо цвет, он может смешать несколько близлежащих, что приведет к искажению цветовой гаммы сайта.
Форма.
Все без исключения объекты обладают формой. Мы можем создать объект без цвета или текстуры, но информацию о форме опустить невозможно. Наиболее часто используемыми простыми формами в веб-дизайне являются: линия, прямоугольник, треугольник и круг.
Линия может выполнять две функции: соединение и разделение других объектов. Пример соединения:
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Пример разделения:
Прямоугольник. В нем важно подобрать пропорции. Наверняка вы слышали про «золотое сечение» - деление отрезка на части таким образом, чтобы отношение меньшей части к большей было таким же, как отношение большей ко всей длине отрезка. Ниже представлен пример, в котором точка C делит отрезок AB так, что AC:AB= CB:AC.
Так вот, принцип «золотого сечения» соблюдается не только на картинах Леонардо да Винчи, но и во всех областях науки и искусства, в том числе, и веб-дизайне. Считается, что «золотое сечение» порождает гармонию. Например, на фотографии важные объекты должны располагаться на расстоянии 3/8 и 5/8 от края, то есть, в важных зрительных центрах.
Треугольник. Это сложная для веб-дизайна фигура, позволяющая достичь разных эффектов. Зачастую она плохо вписывается в общую картину, однако, при правильном использовании, например, в логотипах, может подчеркнуть надежность и устойчивость компании.
Круг. Как и треугольник, эта фигура хороша в логотипах, иконках и других небольших объектах. В крупных объектах и экранном дизайне круг применяется редко.
Типографика.
Работа веб-дизайнера заключается не только в отрисовке объектов и правильном расположении их в пространстве. Одна из важнейших задач - сделать красивым и удобочитаемым текст, который мы видим на экране монитора.
Различные платформы и браузеры предпочитают показывать шрифты по-своему (что ужасно раздражает как юзеров, так и веб-дизайнеров), поэтому старайтесь использовать безопасные шрифты, которые гарантированно отражаются во всех браузерах.
базовый - для основных материалов сайта. Используйте читабельные, простые шрифты с удобным межстрочным интервалом (примерно в 1,5 раза больше высоты символов);
акцидентный - для заголовков. Этот шрифт можно выделить не только размером, но и цветом;
дополнительный - для навигации, важной информации, логотипа меню, цитат и т. д.
На этом пока все. Следующий урок по веб-дизайну будет касаться основ работы с Photoshop.
В заключение хочу сказать, что основы дизайнерского мастерства может освоить каждый. Достаточно лишь обладать желанием, приложить некоторые усилия и выделить время на обучение. Основы веб-дизайна (цвет, формы объектов и шрифты) - это фундамент, на котором должно строиться обучение.
Не поленитесь просмотреть портфолио различных талантливых дизайнеров или сайты известных компаний и обратить особое внимание на вышеперечисленные элементы. Это поможет Вам развить хороший вкус и, возможно, выработать свой собственный стиль.
Подписывайтесь на наши обновления и получайте уроки веб-дизайна первыми. До новых встреч!
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
А.П. АлексеевФормат: djvu
Размер: 5,67 Мб
Краткое описание: Основное внимание в пособии уделено языку программирования HTML, технологии CSS, языку программирования javascript, графическому редактору Adobe Photoshop, технологии мультимедиа. Для обучения по специальности ПОВТАС.
Web-дизайн. Просто как дважды два
А.А.БорисенкоФормат: djvu
Размер: 5,64 Мб
Краткое описание: Если вас заинтересовала эта книга, то это значит, что вы знакомы с миром Интернета и, в частности, с огромным пространством World Wide Web — Web-узлами, которых с каждым днем становится все больше. Вероятно, вы даже задумывались над тем, как создать свой собственный Web-узел или страницу, посвященную вашим детям. Если ваше руководство поставило перед вами задачу разработать узел компании или вы просто решили освоить искусство создания качественных, приятных на вид и, главное, полезных Web-ресурсов, эта книга поможет вам войти в мир Web-пространства и стать в нем не гостем, а хозяином.
Веб-дизайн: книга Якоба Нильсена
Якоб НильсенФормат: pdf
Размер: 20.4 Мб
Краткое описание: Самая известная на сегодняшний день книга по веб-дизайну. Книга содержит исчерпывающее руководство по построению эффективного взаимодействия с любым пользователем в любой ситуации: от подготовки информационного наполнения и оформления страниц до упрощения структуры навигации и создания профессиональных сайтов. В книге вы не найдете описаний каких-то конкретных программ и кодов на HTML. Она отвечает на самый главный вопрос дизайна: Что именно нужно сделать, чтобы посетителям сайта было удобно с ним работать?
Техника Web-дизайна для студента
Ю. ЕдомскийФормат: pdf
Размер: 3.88 Мб
Краткое описание: В книге рассмотрен широкий круг вопросов, связанных с разработкой web-сайтов с использованием HTML и CSS, начиная от простых страниц до создания интерактивных и динамических сайтов. Даны основы компьютерной графики, описана работа с программами Photoshop, ImageReady, DreamWeaver. Для создания динамических страниц приведены необходимые сведения о программировании на javascript. Книга будет полезна студентам, преподавателям и всем желающим создавать самостоятельно интерактивные и динамические страницы.
Эффективный самоучитель по креативному Web-дизайну. HTML, XHTML, CSS, JavaScript, PHP, ASP, ActiveX
Андерсон Э., Джамса К., Кинг К.Формат: pdf
Размер: 14,5 Мб
Краткое описание: Это настоящая «книга рецептов» для тех, кто желает быстро и эффективно получить минимальных набор знаний и навыков, дабы немедленно приступить к разработке Web-сайтов профессионального качества. Удачно подобранные примеры и их решения в реальных ситуациях, простой и точный стиль изложения, большой объем работающего кода и иллюстраций — вот лишь несколько очевидных достоинств книги, выгодно отличающих ее от множества ей подобных.
HTML в Web-дизайне
Алексей ПетюшкинФормат: pdf
Размер: 5,81 Мб
Краткое описание: В книге подробно и на примерах рассмотрены практические вопросы построения сайтов с использованием HTML: разработка концепции, макета и структуры сайта, организация стандартных сервисов, использование интерактивных технологий, создание графического макета и его верстка, продвижение, поддержка и сопровождение сайта. Кратко изложены необходимые основы HTML. Книга содержит множество пояснительных иллюстраций, примеров с пошаговыми инструкциями, советов и рекомендаций.