читать книгу или смотреть видео уроки

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

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

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

Надеюсь, вы не только прочитайте мой труд, но и подключитесь к дискуссии. Оставляйте свои комментарии к этой статье.

1. Web-дизайн для «чайников»

Давным-давно меня начала преследовать книга Лайзы Лопак, тут и там мне предлагали ее скачать в fb2, epub, pdf и так далее. На тот момент меня это не слишком интересовало. Однако, информация с названием плотно засела у меня в голове. Чуть позже я начал сам ее искать.

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

Я не понимаю, как это видят авторы этих самых отзывов? Представляете, купил такой вот мадмуазель муж пельменей, просит прокомментировать, она бегом переодевается в платье советских времен, красит губы красной помадой и начинает восторженно лепетать: «Эти прекрасные пельмени не содержат вредных компонентов, массовая доля мяса достигает свыше 70%, а изысканный вкус с легкой перечной горчинкой!». Ужас, да и только.

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

Я не слишком доверяю не только комментариям, но и ссылкам со странных порталов. Качать мне ничего не хотелось, а стоило кликнуть на «читать онлайн», как возникал серый экран смерти. Ничего не отвечало.

Я уже нашел тысячу оправданий: «Книга устарела и поэтому доступ прикрыли», «Ну что они мне могут рассказать издание 2008 года», «Наверное, вот-вот выйдет современное переиздание». И тут я наткнулся на бесплатную ссылку Вконтакте. Открыл книгу и было меня уже не остановить. Знаете, редкий случай, когда мне настолько нравится литература для начинающих. Читается очень быстро и увлекательно.

Устарела ли информация? Ни сколько. Там фактически нет практических советов. Вкратце изложены основные принципы. Действительно для новичков. Пошаговая инструкция по работе с цветом, шрифтами, порядок работы над разработкой сайта.

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

*Реклама

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

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

2. Или все-таки видео

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

Бытует мнение, что курсы в основном создают такие же новички, только для того чтобы нажиться на обмане. Ну, с этим я точно не соглашусь. При всем желании я не смогу создать курс для начинающих балерин. Какие-то знания все-таки должны быть.

Еще один миф, это топовость автора. Мол, если человек действительно зарабатывает по 80-120 тысяч за сайт ему и в голову не придет тратить время на создание роликов. И так проблем хватает.

Опять-таки, на Нетологии обучением начинающих веб-дизайнеров занимаются директора крупных московских компаний, именитые специалисты. Помимо этого, они постоянно посещают мероприятия такие как «Кинза», популярный съезд профессионалов интернет-бизнеса. Зачем они это делают? Дополнительный доход, PR, привлечение новых клиентов, а также элементарная смена деятельности.

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

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

Онлайн-курс по профессии «Дизайнер интерфейсов».

Книги создаются профессиональными авторами, а курсы специалистами.

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

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

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

До новых встреч и удачи в учении. Помните, в бою будет легче.

Веб-дизайн для начинающих, уроки по web-дизайну

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

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

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

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

Принципы хорошего веб-дизайна

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

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

Steven Bradley, известный блоггер, в своей статье «Design Principles: Dominance, Focal Points And Hierarchy» называет три основных принципа веб-дизайна:

доминация;

точки фокуса;

иерархия.

В сегодняшнем уроке web-дизайна для начинающих рассмотрим эти принципы более подробно. «Для чего это нужно?» – спросите Вы. А вот для чего. Работая над проектами, Вы неоднократно будете сталкиваться с требованием заказчиков увеличить размер каких-либо элементов, дабы выделить и подчеркнуть их. Когда Вы это сделаете, то обнаружите, что теперь подобные манипуляции нужно проделать и с остальными объектами, чтобы сохранить баланс.

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

Принцип 1. Доминация

Если сравнить два любых объекта в дизайне, то здесь возможны два варианта:

они полностью идентичны;

один из них будет доминировать над другим.

Доминирующий объект сразу притягивает взгляд, его замечают раньше. Таким образом, он обладает большей визуальной весомостью.

Доминацию можно создать, варьируя следующие свойства элементов:

размер;

цвет;

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

форма;

текстура;

насыщенность;

глубина;

свободное пространство;

ориентация;

воспринимаемый объем и вес.

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

Еще один способ заставить объект доминировать — применить эффект визуального направления или, так называемую, визуальную подсказку. Например, окружить элемент стрелочками, направленными на него. Таким образом, Вы сможете сделать его доминирующим даже при обладании им меньшим визуальным весом, по сравнению с другими объектами.

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

Принцип 2. Точки фокуса

Точки фокуса — менее выраженные, второстепенные элементы в вопросе доминации. Они представлены в виде зон, обладающих меньшим визуальным весом.

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

Принцип 3. Иерархия

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

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

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

В примере ниже мы видим, что кнопка «Proceed to Checkout» выделена красным цветом, в то время как «Narrow Your Search Results» серая и находится на одном уровне со ссылками на продукты и фильтром. Нетрудно догадаться, какая из кнопок занимает первостепенное место в визуальной иерархии этого интерфейса.

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

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

Эта статья была Вам полезной? Рекомендуйте нас друзьям в социальных сетях! До новых встреч!

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Руководство по веб-дизайну для разработчиков / Блог компании RUVDS.com / Хабр

Автор статьи, перевод которой мы публикуем сегодня, говорит, что создал свой первый веб-сайт когда ему было 14 лет, в виде школьного проекта. Тогда перед ним стояла простая задача: разработать сайт, содержащий некий текст, изображения и таблицу. Обычно к школьным проектам он относился так: сначала о них забывал, а когда подходил срок сдачи, делал их в самый последний момент. Однако в тот раз всё было совсем не так. Особенно его интересовало то, как будет выглядеть его первый сайт. Тогда, для того, чтобы сделать всё так, как надо, он приложил все усилия. Автор материала говорит, что, ещё с тех давних времён, он стремился к тому, чтобы то, что он делает, выглядело бы как можно более привлекательно. Это стремление живо в нём до сих пор. Здесь он хочет поделиться советами по дизайну веб-страниц.

Дизайн

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

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

Отличный дизайн — это не нечто такое, что способно собрать кучу лайков на Dribbble. Это то, что сначала даже не замечают. Это — баланс между предельной простотой и чем-то таким, от чего захватывает дух. Дизайн может быть как конкурентным преимуществом проекта, так и одной из причин его провала.

Дело не в таланте

Когда я был помоложе, я много играл в Майнкрафт. Я смотрел на то, прекрасное, что создают другие, но когда пытался построить что-то своё, всё получалось похожим на коробку. Ни красоты, ни стиля. Да и как можно вообще сделать что-то красивое в Майнкрафте?

Потом я нашёл одного видеоблогера на YouTube и построил копию того, что строил он. Через несколько недель я сформировал собственный стиль и мог создавать уже что-то своё. Внезапно мои конструкции перестали выглядеть как непонятно что. Да что там говорить, я даже выиграл один конкурс.

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

Выбор инструментов

В программировании можно взять обычный Блокнот и написать с его помощью приложение, которое ничем не уступит тому, которое создано с помощью мощной IDE, хотя программирование в Блокноте может оказаться не самым приятным занятием, и, вероятно, процесс разработки займёт куда больше времени, чем при использовании правильных инструментов. Если говорить о веб-дизайне, то роль Блокнота тут может играть MS Paint, и я надеюсь, что, как и в примере с Блокнотом и программированием, очень немногие будут пользоваться им для решения дизайнерских задач.
Популярные инструменты веб-дизайна

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

• Sketch — инструмент, предназначенный исключительно для MacOS. Если провести параллель с миром веб-программирования, то это будет что-то вроде React для дизайна. Возникает такое ощущение, что упоминание о Sketch присутствует в каждой вакансии дизайнера. Стоит эта штука 99 $ в год.
• Adobe XD — бесплатное кросс-платформенное средство, которое, продолжая аналогию с программированием, похоже на Vue. Вокруг Adobe XD сформировалось не такое большое сообщество, как вокруг Sketch, но освоить этот инструмент очень просто.
• Adobe Photoshop — это нечто вроде швейцарского ножа в мире дизайна, о котором знают все, и который можно сравнить с jQuery. Пользоваться Adobe Photoshop можно за 9,99 $ в месяц.

Нет практически никакой разницы в том, пользуетесь ли вы для написания кода Sublime или VS Code. То же самое можно сказать и о том, выбираете ли вы React или Vue для разработки интерфейсов. Это — дело вкуса. То же самое можно сказать и об инструментах дизайнера. У каждого из них есть собственные преимущества и недостатки.

Я пользуюсь Adobe XD. Основная причина такого выбора — кросс-платформенность, в результате я, как было бы, если бы я выбрал Sketch, не являюсь заложником экосистемы Apple. Кроме того, Adobe XD пользуется поддержкой Adobe, поэтому можно надеяться на то, что этот проект будет существовать ещё очень долго. А новичкам особенно приятно будет то, что с мая 2018 года Adobe XD можно пользоваться бесплатно, хотя и с некоторыми ограничениями (правда, они вам, в любом случае, вряд ли помешают).

О правильном настрое

Главная проблема, которую мне пришлось решить, входя в мир веб-дизайна, заключалась в выработке правильного настроя. Раньше дизайном я занимался в процессе разработки сайта. Я полагал, что всё просто должно располагаться в определённом порядке. Элементы размещаются слева направо и сверху вниз. Правда, такой вот подход — это верный способ стать ужасным дизайнером.

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

Изучение инструментов

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

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

▍Инструмент Rectangle — прямоугольники

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

▍Инструмент Text — однострочные надписи

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

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

Для создания однострочного фрагмента текста нужно выбрать в панели инструментов Adobe XD инструмент Text, щёлкнуть там, где должен располагаться текст, и ввести его. Стоит принять за правило то, что этот режим нужно использовать для однострочных надписей, ширина которых может быть подобрана автоматически. Это — однострочные заголовки и подписи объектов.

Инструмент Text — однострочные надписи

▍Инструмент Text — большие фрагменты текста

Второй режим инструмента для работы с текстом используется для формирования текстовых контейнеров заданного размера, которые ведут себя наподобие тега p с заданной шириной, или так, как тег p, находящийся в ячейке сетки. Сильная сторона этого состояния заключается в том, что в нём можно управлять размерами текстового блока. Для создания фрагмента текста нужно выбрать инструмент Text и выделить ту область, которую должен занимать фрагмент. Собственно говоря, этот режим нужно использовать для многострочных фрагментов текста.
Инструмент Text — многострочные фрагменты текста

▍Инструмент Select — выделение объектов

С помощью инструмента Select осуществляют перемещение объектов, изменение их размеров, копирование. На рисунке ниже можно видеть вспомогательные элементы этого инструмента, а именно — розовые линии, помогающие определить расстояние между объектами, и синие, с помощью которых объекты удобно выравнивать.
Инструмент Select

▍Инструмент Line — линии

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

Дизайн: рекомендации и приёмы работы

▍Макет

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

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

Примеры неудачного и удачного макета

▍Цвета

Выбирая цвета для своего следующего проекта, помните о таком понятии, как психология цвета. Для поиска хороших цветовых комбинаций, основанных на основном цвете, можете воспользоваться проектом Paletton.

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

Примеры работы с цветами и текстом

▍Типографика

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

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

Примеры использования текстов в верхнем регистре

Дизайн домашней страницы (или лендинга)

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

После того, как я понимаю то, какую историю я хочу рассказать посредством страницы, обычно я начинаю искать вдохновение. Отличным источником вдохновения для меня является проект land-book.com, который представляет собой обширный каталог отличных образцов дизайнов лендинг-страниц, за которые можно голосовать. Ещё один проект, на котором можно поискать вдохновение, это interfaces.pro. Он позволяет отбирать страницы определённых типов, например, это могут быть страницы с информацией о ценах, страницы 404, или страницы с информацией о сайтах. Я просто всё это смотрю до тех пор, пока мне не удаётся найти достаточно понравившихся мне сайтов, внешний вид страниц которых соответствует моим представлениям о стиле проекта, которым я занимаюсь.

Лендинг-страница

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

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

▍Выводы и рекомендации

• Тщательный подбор шрифтов — это одна из тех мелочей, которые отличают хороший дизайн от плохого.
• Изображения — это важно. Постарайтесь, чтобы на ваших страницах использовались бы, хотя бы в небольших количествах, подходящие иллюстрации или фотографии.
• Выстраивайте визуальную иерархию элементов, используя оттенки цветов. Недостаточно использовать лишь пару цветов, один из которых является основным, а второй представляет собой цвет текста.
• Не используйте слишком широкие контейнеры. Обычно достаточно ширины в 1100 пикселей.
• Пустое пространство между элементами — это важный элемент дизайна.
• История, которую рассказывает веб-страница, должна строиться на достоинствах проекта, а не на его функциональных особенностях.
• Если вы чувствуете, что ваши идеи истощились — ищите вдохновение в других проектах.

Дизайн веб-приложения (или панели управления)

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

Если надо — сделайте несколько набросков или макетов. Исследуйте дизайн проектов-конкурентов, подумайте о том, чего им недостаёт. Возможно, вы решите сделать у себя то, чего у них нет, а это, может быть, станет конкурентным преимуществом вашего проекта. Учитывайте и то, что иногда, прежде чем рисовать макеты и прикидывать варианты дизайна, нужно дать себе время на размышления.

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

Веб-приложение

▍Контейнеры фиксированной ширины

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

Вот несколько примеров веб-приложений, в которых используются фиксированные контейнеры: Twitter, Buffer, DigitalOcean, Netlify, GitHub.

▍Гибкие контейнеры

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

Среди примеров приложений, использующих гибкие контейнеры, можно отметить Slack, Intercom, Hotjar, Google Sheets, Trello, Spotify.

▍Выводы и рекомендации

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

Итоги

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

Уважаемые читатели! Как по-вашему, может ли программист-одиночка достичь хороших результатов в сфере дизайна?

Обучение веб-дизайну с нуля — пошаговая инструкция (2019)

Выбор редакции

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

Обучение этой профессии с нуля – дело не легкое, ведь кроме навыков работы в графических редакторах необходимо быть креативным человеком, хотя бы немного разораться в коде (знать CSS и HTML), уметь общаться с заказчиком на одном языке и т. д.

 <стиль>
h2 {font-size: 16pt, цвет: синий;}
 

 
   <Тело>
      
 этот заголовок синий и размер 16 пт 
   
 

 
   <Голова>
      <Стиль>
h2 {font-size: 16pt, цвет: синий;}
      
   
   <Тело>
      
 этот заголовок синий и размер 16 пт