Web дизайн для чайников: способы изучения для начинающих — Lemarbet

способы изучения для начинающих — Lemarbet

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

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

Так много вариантов!

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

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

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

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

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

Лучшие книги для изучения веб-дизайна

Основные технологии, которые нужно освоить начинающим, чтобы работать с большинством задач при создании сайта, – HTML и CSS. Не лишним будет, конечно, Java Script и PHP, но это уже вторая ступенька. Кстати, если освоитесь с первыми двумя языками веб-разработки, с остальными будет уже гораздо проще.

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

Джереми Кит. “HTML5 для веб-дизайнеров”

Настольная книга для тех, кто хочет освоить стандарты последней версии HTML, разобравшись при этом с особенностями данного языка в целом. Семантическая разработка и создание доступных интерфейсов – два направления, за которыми будущее. И данная книга позволит вам научиться этому в полной мере. И стоит отметить, что «Манн, Иванов и Фербер» — одно из самых авторитетных издательств на просторах СНГ.

Так что их книги однозначно стоит рекомендовать.

Дэн Сидерхолм. “CSS3 для веб-дизайнеров”

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

Автор — Дэн Сидерхолм – практикующий веб-дизайнер, который прошел путь от фрилансера и владельца небольшой студии до разработчика в штате таких всемирно известных компаний, как Google и Yahoo.

Дженнифер Роббинс. “HTML5, CSS3 и JavaScript. Исчерпывающее руководство”

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

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

Стив Круг. “Web-дизайн, или Не заставляйте меня думать”

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

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

Тим Кедлек. “Адаптивный дизайн. Делаем сайты для любых устройств”

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

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

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

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

Платформы для онлайн-обучения

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

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

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

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

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

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

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

Каждый из примеров показывает ту или иную грань конкретного языка веб-разработки, будь то HTML, CSS или PHP. И с помощью этих примеров вы можете хорошо освоить саму структуру языка. При прохождении уроков код обрабатывается прямо в браузере и сопровождается хорошими объяснениями.

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

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

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

Другие способы на заметку

Один из самых доступных способов – видеоуроки и тематические каналы на YouTube. Это второй по посещаемости поисковик в мире (после Google), в котором интегрирован и функционал, свойственный социальным сетям. Чем он хорош в контексте изучения веб-дизайна, так это тем, что вы можете сразу же приступить к практике на основе примеров, увиденных на видео. Кроме того, все мы знаем такую хорошую пословицу – лучше один раз увидеть, чем сто раз услышать.

Достаточно всего лишь ввести нужный запрос, и вот к вашим услугам огромное количество видеоуроков по самым разным темам:

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

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

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

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

• Автор: Владимир Федоричак

Веб дизайн с чего начать – как стать веб дизайнером самостоятельно

Хотите узнать, как стать веб дизайнером самостоятельно? А может, у вас уж есть несколько своих дизайнов или даже сайт-портфолио, и вы хотели бы вывести свои умения на новый продвинутый уровень? Тогда вы движетесь в правильном направлении прямо сейчас, поскольку тема статьи именно «Веб дизайн с чего начать» и в ней мы подробно рассмотрим все нужные этапы подготовки веб дизайнера и поможем тебе стать веб дизайнером самостоятельно, приложив немного усердия и креативности.

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

Сначала небольшое лирическое отступление для дизайнеров, которые случайно забрели почитать эту статью. «Я занимаюсь веб дизайном», наверно, вы не раз говорили кому-то эту фразу и испытывали холодный страх, когда вам отвечали что-то вроде: «Круто! А научи-ка меня, как это делается? Как стать веб дизайнером с нуля?» Многие просто предполагают, что они щелкнут мышкой, перетащат пару значков на экран, и дизайн готов. Но, к сожалению, это не так. Поэтому, в следующий раз, когда кто-то спросит вас, как создавать дизайн сайтов, просто покажите им эту статью.

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

Для кого эта статья о веб дизайне?

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

Требования к начинающим веб дизайнерам

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

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

Также, вам пригодятся знания основных языков кодирования, а именно HTML и CSS, об этом мы тоже поговорим.

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

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

Как использовать этот руководство по веб дизайну для начинающих

Прочтите его! Этого будет вполне достаточно, чтобы начать. Сделайте свой первый, скорее всего, корявенький сайт. Вернитесь и прочитайте еще раз. Поправьте ошибки. Повторите.
Нет, вы, наверное, не хотите читать все сразу. Есть много других ресурсов, множество разных подходов, которые можно использовать. Ничего страшного, но я все же рекомендую немного вчитаться и попробовать пройти первые шаги.

Дизайн в браузере для начинающих

Возможно, знаете, что большинство дизайнеров сначала используют графические редакторы, а уже потом отдают свои проекты кодеру на верстку. Photoshop – это наиболее часто используемый инструмент, но дизайнеры также используют такие программы, как Sketch, GIMP, Inkscape и Illustrator.

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

Рабочий процесс на основе браузера имеет ряд других преимуществ:

1) Вы точно видите, что получаете. Даже профессиональные мокапы не передают интерактивные или анимированные части сайтов. Создавая дизайн на основе браузера вы сможете точно видеть, как он работает.

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

2) Дизайн на основе браузера может сделать вас лучшим дизайнером. Когда вы сами знаете весь процесс, вы сможете понять что и как работает, и предостеречь себя от многих ошибок. Кошмар любого дизайнера (или верстальщика, которому это придется делать), работающего в, скажем, Photoshop, это дальнейшего его «натягивание» на живой сайт.

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

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

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

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

UX / UI дизайн

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

Больше информации об этом можно найти в статье «Что такое UX/UI дизайн на самом деле?»

Эстетические навыки

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

Сочетание шрифтов и типографика

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

Чтоб провести вас «от А до Я», предлагаю просмотреть книгу Эмиля Рудера «Типографика» . Чтение может быть довольно долгим, потому для желающих сразу же приступить к практике – короткое видео по теме, а так же гайд по определению шрифтов по картинке (это если вдруг вы уже нашли хороший пример текста, и хотели бы идентифицировать его шрифт).

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

Многие люди, включая меня, выбирают свои шрифты из Google Web Fonts. Шрифты Google можно «встраивать» в сайт, и это довольно удобно. Более того, можно пользоваться готовыми комбинациями шрифтов:

Другие подобные примеры можно найти в Интернете.

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

Если Google шрифтов мало, то можно заглянуть на WebDesignerDepot, Fonts-online, и другие сайты.

Теория цвета и цветовые схемы

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

Из обязательных инструментов – Adobe Color CC

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

Композиция и общая организация

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

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

Веб дизайн тренды

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

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

• abduzeedo.com
• behance. net
• noupe.com
• webdesignerwall.com
• flickr.com
• awwwards.com

Как стать веб дизайнером: HTML и CSS

HTML это «Язык гипертекстовой разметки». Каждый сайт, на который вы когда-либо смотрели, сделан на основе HTML. HTML – это тот язык, воспринимая который ваш браузер понимает, что на сайте есть текст, изображение, ссылка, видео или другие элементы. Ваш браузер затем переводит код в то, что вы видите на экране.

Другой язык, который простыми словами делает сайт красивым, называется CSS, это значит «Каскадные таблицы стилей». CSS сообщает браузеру, какой шрифт задан в тексте, и какие цвета используются. CSS, проще говоря, определяет внешний вид вашего сайта (кнопки, стили, цвета, анимация).

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

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

Выливка на живую

Готовы разместить свой сайт в Интернете? Есть доменное имя (например: mywebsite.com) и хостинг (пространство на компьютере, постоянно подключенном к Интернету или онлайн хостинг, приобретенный у сторонних провайдеров)? Загрузите файлы на хостинг, откиньтесь в кресле, расслабьтесь и …

Что делать после запуска сайта

Поправьте ошибки и допилите то, о чем забыли

“Ах, да, вот это вот… я точно хотел это поправить.”– С кем не бывает. Почти неизбежно после запуска любого сайта всплывают ошибки. И чем больше сайт, тем больше вероятность, что вы пропустили ошибку или что-то забыли. Для вашего удобства, вот довольно подробный контрольный список-чеклист :

Соберите отзывы

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

Как стать веб дизайнером – итоги

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

А если вы уже готовы опробовать свои навыки на живом проекте, и Вам нужен хороший хостинг – в качестве бонуса, вы можете купить хостинг на год от нашего партнера Inmotion всего за 1$.

Купить хостинг за $1

Поделитесь этим постом:

Веб-дизайн для начинающих.

Что это такое и где этому учиться?

Когда я только начинала свой путь в Фотошопчике, я думала, что веб-дизайн – это определенный вид искусства, которой по зубам лишь избранным. Спустя 9 лет в этой сфере я уверена, что это лишь навык, наработанный опытом. И чтобы стать веб-дизайнером, достаточно на начальном этапе иметь понятие о папочках и графических текстовых файлах на компе. Давайте разбираться, почему изначально я была не права.

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

Краткая история веб-дизайна

1989 – Темные времена веб-дизайна

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

 

1991 – Первая веб-страница 

6 августа 1991 британский ученый Тим Бернерс-Ли вместе со своей командой сделал первый в мире сайт – http://info.cern.ch. 

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

 

1992 – Первое фото в интернете 

Фотография комедийной группы Les Horrible Cernettes – это первая загруженная в сеть (выложена основателем интернета Тимом Бернерсом Ли).

 

1995 – Таблица. Начало 

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

 

1995 – JavaScript

Решение ограничений HTML найдено. Необходимо вывести сплывающее окно или настроить динамическое изменение расположения элементов? JavaScript! 

 

1996 – Flash. Взлёт

Enter, FutureSplash – позже известный как Adobe Flash. Эта инновационная технология дала веб-дизайнерам свободу в создании более динамичных веб-сайтов путем интеграции анимации, видео и аудио. Теперь дизайнер мог работать с любыми размерами макетов, анимациями, формами и использовать любой шрифт. И все это при помощи лишь одного инструмента — Flash.

 

1998 – Изобретение CSS  

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

 

2007 – Начало мобильной еры. Сетки и фреймворки

С запуском первого iPhone в 2007 году создание веб-сайтов, доступных на мобильных телефонах, впервые стало приоритетным направлением. Чтобы удовлетворить спрос на просмотр сайтов на мобильных устройствах, дизайнерами стала использоваться сетка в 960 px и разделение на 12 столбцов.  

 

2010 – Развитие адаптивного дизайна 

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

 

2010-2019 – Современный веб-дизайн 

За последние десять лет HTML, адаптивный дизайн и CSS продолжали доминировать. Однако, больше нет универсального определения того, как выглядит “хороший” дизайн сайта.

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

 

Так всё-таки что такое веб-дизайн?

Google утверждает, что веб-дизайн (англ. web design) – это отрасль веб-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений. То есть это именно проектирование веб-интерфейсов. Не простая разработка дизайна сайта и не его сложная верстка. 

 

Что делает веб-дизайнер?

Чтобы перейти к перечислению основных задач веб-дизайнера, разберемся, почему веб-дизайнер – это не веб-разработчик.

 

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

 

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

 

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

 

Компетентные веб-дизайнеры систематизируют и упорядочивают всю полученную от клиента информацию, создают контент и дизайнят макеты веб-страниц. В обязанности дизайнера входит анализ потребностей клиента и целей доверенного ему проекта. Цель: обеспечить конечному пользователю уникальный опыт при взаимодействии с сайтом и закрыть его потребности (например, купить определенный товар или узнать погоду). Масштабы проекта будут зависеть и от проблем с коммуникацией, которые заказчик хочет решить, и от того, в каком состоянии находится нынешний сайт клиента. Кроме того веб-дизайнер:

* обеспечивает функциональность веб-сайта с помощью соответствующих технологий,

* проектирует элементы навигации,

* преобразует потребности клиента и его пользователей в концепции,

* представляет бренд с помощью определенных изображений, цвета, шрифтов,

* проектирует для поисковой оптимизации и ранжирования,

* обновляет сайт по мере необходимости.

 

Где учиться на веб-дизайнера?

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

 

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

 

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

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

 

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

 

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

 

Курс от 3second — это оптимальный вариант, где с нуля можно обучиться веб-дизайну в сопровождении преподавателей. Это онлайн-курсы для новичков, желающих начать зарабатывать на фрилансе. Здесь не будут сразу нагружать информацией, которую даже многие продвинутые веб-дизайнеры не знают. Здесь обучат основам, покажут механизм работы веб-дизайнера, поделятся своими лайфхаками, укажут на твои ошибки и личные преимущества. А после отправят творить, зная, что уже завтра ты сможешь найти работу с этими знаниями. 

 

Курс №1

Дизайн, который стоит дорого. Landing Page. (https://3second.ru/courses/dizajn-kotoryj-stoit-dorogo-landing-page/) Всего за 6 недель можно научиться Фотошчику, узнать, как выстраивать композицию и как строить структуру сайта, и подготовить 2 лендинга для своего портфолио.

 

Топ 15 лучших онлайн-курсов веб-дизайна: обучающие сайты, онлайн-школы и youtube-каналы

Топ 15 лучших онлайн-курсов веб-дизайна: обучающие сайты, онлайн-школы и youtube-каналы

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

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

 

Нетология

В своих программах онлайн-университет Netology.ru аккумулирует опыт лучших практикующих специалистов Рунета. Подготовить веб-дизайнера с нулевого уровня до позиции «middle» в университете обещают за 4,5 месяца регулярных занятий, проходящих в формате видеолекций с выполнением тематических заданий. В учебном плане — разбор этапов дизайна сайтов, обучение основам выбранного направления, знакомство с инструментарием Figma и Cinema 4D, анимирование интерфейсов в After Effects. Студенты создают макеты студийного качества, работают над собственным проектом для портфолио. Им помогают составить продающее резюме, готовят к собеседованию, а по завершении обучения выдают документ, подтверждающий квалификацию.

На данный момент предлагают еще две программы для обучения с нуля:

 

Skillbox

Университет востребованных профессий Skillbox.ru регулярно анонсирует онлайн-курсы с гарантированным трудоустройством либо стажировкой.

 

Первый вариант получить новую работу и специальность веб-дизайнера — это профессиональное 2-годичное обучение, в ходе которого студенты получают первые оплачиваемые заказы уже спустя 4 месяца. В числе преподавателей — исключительно дизайнеры-практики. Стартовая половина курса отведена под получение профессиональных навыков с нулевого уровня до PRO, ознакомление с UX-дизайном и освоение Photoshop. В оставшийся период студенты определяются со специализацией (работа с рекламой, мобильными приложениями или промо-сайтами), вникают в UI-дизайн, практикуются в графических редакторах интерфейсов.

 

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

 

Больше онлайн-курсов по digital-дизайну можно найти в каталоге учебных программ университета.

 

GeekUniversity

Обучение веб-дизайну на портале с гарантированным трудоустройством Geekbrains.ru организовано на факультете с одноименным названием. Студентов в течение года подготавливают к последующей работе в кросс-функциональной команде, обучая дизайну разных направлений: веб, продуктовому, UX/UI. Помимо основных занятий, на которых учат анализировать целевую аудиторию, прототипировать и пользоваться графическими редакторами, есть узкоспециальные уроки — в частности, для пользователей с ограниченными возможностями и по преодолению боязни «чистого листа».

 

За каждым слушателем онлайн-курса закрепляется куратор, который помогает разбираться с материалом. Портфолио выпускников, получающих свидетельства об окончании курсов GeekBrains, позволяет претендовать на позиции Junior либо Intern Designer. Образовательный портал регулярно предлагает бесплатные интенсивы, пройдя которые, можно освоить Photoshop и научиться создавать посадочные страницы. 

 

 

Пособие по созданию сайтов

Пособие программиста и автора множества обучающих проектов Максима Сукманюка на Udemy.com адаптировано для читателей, не являющимися профессионалами в области web-мастеринга. В учебном плане 5 разделов, в каждом — пошаговые иллюстрированные видео инструкции по переходу от теории к практике, комментарии по всем действиям, включая использование инструментов и кодов. Проштудировав пособие, уверяет Михаил Сукманюк, пользователь сможет самостоятельно создать и оформить сайт любого назначения. У образовательной программы хорошие отзывы и высокий рейтинг среди выпускников.

 

Уроки на ЛофтБлог

Создатели портала бесплатных видеоуроков Loftblog.ru не хотят видеть своих посетителей унылыми и перегруженными потоком технической информации, поэтому обещают сделать обучение увлекательным и эффективным. Представление о механике работы можно получить, пройдя бесплатный курс по дизайну сайта-портфолио в редакторе Photoshop. На 4 уроках, заложенных в обучающий план, создается «шапка» интернет-ресурса, рассматриваются правила оформления контента, особенности перехода от шаблона обычного сайта к версии для мобильных устройств, приемы оптимизации работы с помощью модульной сетки. Для пользователей, в том числе, незарегистрированных, доступен и комплекс видеозанятий по оформлению landing page (посадочной страницы) в Adobe Muse.

 

 

YouTube-канал Дмитрия Волкова

На канале Уроки WEB-дизайна своим опытом делится арт-директор, проектировщик интерфейсов, создатель UX-продукта Дмитрий Волков.

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

 

Tilda Education

Материалы образовательного журнала Tilda.education адресованы пользователям, интересующимся созданием интернет-сайтов в Tilda Publishing — блочном конструкторе. Практические руководства предлагаются в форматах онлайн-учебников. Наличествуют цифровые пособия по созданию landing page, теории дизайна, анимации в вебе, развитию визуального вкуса. Текстовый контент учебников перемежается с наглядными тематическими иллюстрациями.

 

Блог Максима Шайхалова

В авторском блоге Шайхалова размещены статьи, обзоры литературы и подборки практических советов для осваивающих web-design. Имеются публикации об основах типографики, приемах повышения читаемости электронных текстов, диалоговых окнах в вебе, редизайне блога. В отдельные рубрики вынесены темы «Интерфейс», «Фотошоп», «Иллюстратор», «Фирменный стиль».

 

 

WebDesign Master

Плейлисты канала WebDesign Master формируются по разным принципам. Так, подборка «Мастер веб-дизайна» наполнена видеоуроками о процессах оформления ресурсов в зависимости от сфер деятельности их владельцев: салон красоты, пиццерия и другие.

В каталоге видеозаписей по созданию landing page — 13 уроков, демонстрирующих возможности WordPress. Имеется объемная подборка занятий, призванная обучить созданию «под ключ» заказных сайтов.

Дизайн Мания

На портале Design-mania.ru имеются как сборники разноплановых «исходников» (кистей, иконок, шрифтов), так и статьи, полезные заметки, рекомендации и тематические уроки. На последних изучаются основы верстки, юзабилити, типографики, оформления логотипов. Есть подраздел с примерами креативно оформленных интернет-ресурсов, обзоры дизайнерских блогов и теория по технологии флеш.

 

 

Бесплатные курсы веб-дизайна

В тематический каталог Academiait.ru внесено несколько десятков курсов, получать знания на которых можно бесплатно — достаточно лишь зарегистрироваться на ресурсе. Есть обучающие проекты по веб-дизайну в различных графических редакторах (Photoshop, InDesign, Avocode), редизайну, оформлению landing page, созданию интернет-магазинов, видео-, туристических и новостных порталов. Предлагаются уроки техдизайна и авторский курс «Дизайнерские фишки».

 

Видеоуроки Figma

Курс состоит из 84 уроков, на которых пользователей обучают работе в Figma.

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

 

 

Contented

В онлайн-школе Contented.ru получить профильные знания можно в рамках курса веб-дизайна с нуля. В его программе, рассчитанной на 7 месяцев, 150 уроков-вебинаров. На них происходит ознакомление с профессией, изучаются юзабилити, психология пользователей, типографика, колористика, осваиваются инструменты графических редакторов, рассматриваются особенности контента. Каждое занятие, организуемое раз в неделю, доступно после выполнения заданий или тестирования по предшествующей теме. Выпускнику, защитившему собственный проект, высылается подтверждающий сертификат. Обучиться можно и программе Figma в сжатые сроки — за 2 недели.

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

 

Лучшие курсы веб-дизайна в 2021 году. Особенности обучения и цены.

Курсы веб-дизайна — мифы и заблуждения

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

Если вам понравилось данное видео, не забывайте подписаться на YouTube-канал Школы #VA — мы регулярно публикуем новые познавательные видео, подкасты и обзоры на тему веб-дизайна и современного Digital-мира.

Форматы обучения веб-дизайну

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

Поделитесь публикацией

Мы будем рады, если вы поделитесь этой статьёй с друзьями!

Самостоятельное изучение

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

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

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

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

Обучение веб-дизайну от профессионалов

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

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

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

ТОП-10 лучших книг по веб-дизайну — для начинающих и не только

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

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

Автоматическое продвижение в Instagram без блоков

Рекомендуем: Jesica – приложение для продвижения в Instagram (от создателей Instaplus.me). Установите Jesica на Android-телефон или компьютер и приложение будет ставить лайки, подписываться и отписываться, как будто это делаете вы сами:

• Без блоков. Действуют лимиты, как будто вы делаете это всё вручную.
• Безопасно. Не нужно вводить пароль от своего аккаунта.
• Высокая скорость. Вы можете поставить до 1000 лайков и 500 подписок в день.

Попробовать 5 дней бесплатно >> Реклама

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

UX/UI-дизайн — что это такое

ТОП-10 книг по веб-дизайну для новичков и не только

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

Приступим!

Якоб Нильсен. «Веб дизайн».

Кому читать: новичкам, для понимания основ

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

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

Итан Маркотт. «Отзывчивый веб-дизайн»

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

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

Чем хороша эта книга – ее писал практик. Здесь нет сухой теории, зато есть отличные рекомендации по отзывчивому дизайну, и даже примеры кода.

ТОП-10 книг по копирайтингу

Дмитрий Кирсанов. «Веб-дизайн»

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

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

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

Аарон Уолтер. «Эмоциональный веб-дизайн»

Кому читать: дизайнерам, маркетологам, пиарщикам, и всем, кто собирается переносить свой бизнес в сеть.

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

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

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

Лучшие книги про маркетинг в социальных сетях

Виктор Папанек. «Дизайн для реального мира»

Кому читать: в первую очередь – начинающим дизайнерам, чтобы понять суть своей профессии.

Автор – американский дизайнер и педагог. В своей книге он подробно объясняет роль дизайнера в современном мире, и о дизайне в целом, рассказывает о новых принципах и методах проектирования.

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

Стив Круг. «Как сделать сайт удобным»

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

Еще одна книга, посвященная юзабилити. Автор объясняет, как сделать интернет-магазины более удобными, согласно его методу.

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

Читайте также: Лучшие онлайн-конструкторы логотипов

Александра Королькова. «Живая типографика»

Кому читать: в первую очередь – студентам, изучающим дизайн, начинающим полиграфическим дизайнерам, и просто всем тем, кому придется много работать с оформлением текста.

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

Эта книга может стать трамплином, началом для тех, кто захочет потом вникнуть в тему немного глубже.

Люк Вроблевски. «Сначала мобильные!»

Кому читать: программистам и дизайнерам, независимо от уровня знания и опыта работы. Будет полезна владельцам бизнеса и маркетологам.

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

Самые значимые книги по маркетингу за 2017 год

Клеон Остин. «Кради как художник.10 уроков творческого самовыражения»

Кому читать: художникам и дизайнерам, которые находятся в поиске творческих идей.

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

Иоханнес Иттен. «Искусство цвета»

Кому читать: начинающим художникам и дизайнерам.

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

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

Сохраните подборку себе, чтобы не потерять!

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

1. Основные понятия
1.1 Понятие WWW (World Wide Web)
1.2 Понятие гипертекстовых документов и web-сайтов. Классификации web-сайтов. Различные типы web-сайтов, их назначение и использование. Типы гипертекстовых документов (web-страниц), их различия и сходства
1.3 Размещение и хранение web-страницы и сайты. Понятие web-сервера и принципы его работы с пользователем
1.4 Обзор программ (браузеров) для просмотра веб-сайтов
1.5 Подбор программного обеспечения для работы над веб-сайтом. Необходимый минимум для начала работы
1.6 Способы создания веб-сайтов: визуальный, работа с кодом, комбинированный
1.7 Разработка структуры и этапы построения web-сайта. Информационное наполнение и взаимосвязи основных разделов и подразделов, а также дополнительных страниц веб-сайта

2. Введение в HTML (язык гипертекстовой разметки). Основы создания сайта
2.1 Язык HTML. Основы, версии и стандарты языка HTML. Структура HTML документа. Основные разделы кода веб-страницы. Понятие тэгов HTML, их типы и оформление
2.2 Объявление типа документа. Варианты и стандарты
2.3 Открытие блока HTML и начало блока заголовков
2.4 Обзор заголовков гипертекстовых документов, их синтаксис и назначение
2.5 Обзор других тэгов, входящих в блок заголовков
2.6 Закрытие блока заголовков и открытие основного блока (тэг BODY). Обзор основных параметров тэга BODY и их использование (установка фонового цвета и изображения веб-страницы, задание цветов текста и ссылок и т.д.)
2.7 Закрывающие тэги блоков HTML
2.8 Создание шаблонного кода веб-страницы в простом текстовом редакторе и проверка его работы в браузере. Способы редактирования кода веб-страниц

3. Обзор тэгов HTML для работы с текстом
3.1 Создание текстовых заголовков различных уровней и их позиционирование на веб-странице
3.2 Обзор тэгов оформления и выделения текста, а также изменения его размеров и цвета
3.3 Обзор тэгов разрыва строк и выделения блоков, их области применения
3.4 Обзор тэгов создания списков различных типов
3.5 Принципы вставки спецсимволов и тэги псевдографики. Понятие Unicode, его создание и применение
3.6 Тэги вставки изображений на web-страницы и их параметры. Обзор поддерживаемых графических форматов, их различия, ограничения и использование
3.7 Понятие, использование и принципы построения таблиц. Обзор тэгов создания таблиц и их параметры
3.8 Понятие гиперссылки. Типы и области применения гиперссылок. Тэги создания гиперссылок и их параметры
3.9 Создание кода и разработка шаблона новостной ленты сайта

4. Понятие карты сайта, её назначение и использование
4.1 Обзор тэгов создания карты сайта и их параметров. Пример создания карты сайта
4.2 Понятие, типы и использование фреймов. Тэги создания фреймов и их параметры. Пример создания фреймовой структуры сайта. Установка плавающих фреймов на веб-страницу и их использование
4.3 Использование мультимедия на веб-сайте. Обзор тэгов для размещения аудио- и видеофайлов, а также Flash-анимации на веб-страницах и их параметры. Ограничения использования мультимедия
4.4 Понятие и применение комментариев HTML. Обзор тэгов для вставки комментариев и ограничения их использования

5. Создание интерактивных элементов
5.1 Понятие, типы и назначение скриптов. Понятие и использование форм на веб-страницах. Принципы взаимодействия формы со скриптами. Обзор тэгов для создания элементов формы (текстовых полей, выпадающих списков и т.д.)
5.2 Введение в JavaScript, его назначение и области применения. Объектная модель веб-страницы и браузера. Примеры объектов
5.3 Понятие, типы и использование событий на веб-страницах. Примеры использования некоторых событий. Создание интерактивных объектов на веб-странице
5.4 Создание всплывающих окон и их использование

6. Работа с графическими объектами и их размещение на вебсайтах
6.1 Требования и условия размещения графических объектов на веб-страницах. Обзор поддерживаемых форматов, их различия и использование
6.2 Принципы адаптации графики. Адаптация графических изображений для размещения на веб-страницах. Обзор программного обеспечения для адаптации графики, его различия и возможности. Примеры адаптации изображений в различных форматах с помощью программы Adobe Photoshop и подобных графических редакторов
6.3 Понятие и использование нарезки изображений. Примеры нарезки изображений в программе Adobe Photoshop или подобных графических редакторах. Сборка нарезанных изображений в браузере с помощью таблиц
6.4 Понятие, области применения и принципы создания анимации. Обзор программного обеспечения для создания анимации. Пример создания и редактирования анимированных изображений в программе Adobe ImageReady или подобных редакторах
6.5 Понятие, типы, назначение и использование баннеров. Требования к параметрам баннеров и условия их размещения на сайте. Примеры создания баннеров. Установка баннеров и анимированных изображений на веб-страницы

7. Технология CSS, её версии и поддержка браузерами
7.1 Понятие, область применения и принципы построения каскадных таблиц стилей (CSS)
7.2 Использование CSS на веб-страницах, способы задания стилей и оформления отдельных элементов
7.3 Обзор инструкций CSS для оформления, изменения размеров и цвета текста. Обзор инструкций CSS для установки фоновых изображений и их параметры
7.4 Понятие и использование обрамления. Обзор инструкций CSS для создания обрамлений и их параметры (установка формы, цвета, ширины и позиционирования бордюров, а также отступов от них и т.д.)
7.5 Понятие, инструкции и использование трёхмерного позиционирования объектов веб-страницы с помощью CSS. Примеры позиционирования отдельных элементов веб-страницы
7.6 Управление отображением элементов страницы с помощью CSS. Обзор инструкций управления отображением и их взаимодействие со скриптами. Примеры управления отображение объектов (создание исчезающих и меняющихся объектов)
7.7 Понятие и использование фильтров CSS. Инструкции и примеры создания фильтров

8. Создание web-сайта по шаблону
8.1 Типы шаблонов и способы работы с ними. Разработка и изготовление собственных шаблонов веб-страниц и целых сайтов
8.2 Автоматизация создания и редактирования веб-сайтов. Работа с визуальными редакторами типа WYSIWYG. Обзор популярных визуальных веб-редакторов: Microsoft FrontPage, Macromedia Dreamweaver и Macromedia HomeSite, их преимущества и недостатки
8.3 Создание веб-страницы с помощью шаблонов в визуальных редакторах. Редактирование выбранного шаблона веб-страницы и его адаптация под свои нужды в среде визуальных редакторов. Создание или изменение текстового наполнения шаблона, дополнения и уточнения. Инструменты для оформления текста. Изменение гарнитуры, размера и цвета текста. Выравнивание текста внутри блока
8.4 Создание и редактирование гиперссылок в среде визуального редактора. Создание и редактирование гипертекстовых меню в шаблоне веб-страницы
8.5 Позиционирование и удаление отдельных элементов шаблона веб-страницы в среде визуального редактора. Создание собственных элементов и вставка их в шаблон. Разработка остальных страниц веб-сайта на базе данного шаблона
8.6 Создание сложных эффектов (меняющихся изображений и выпадающих меню) в среде визуального редактора
8.7 Унификация общего визуального оформления сайта. Проверка работы гиперссылок и логических связей между страницами сайта

9. Размещение web-сайта на сервере
9.1 Способы доступа к сайту (по имени или IP-адресу)
9.2 Понятие, принципы построения и работа DNS (BIND). Организация InterNIC и её представительства. Выбор и регистрация доменного имени сайта. Понятие и типы хостинга. Выбор хостинга для размещения своего сайта. Требования и ограничения серверов для размещения веб-ресурсов. Способы закачки сайта на сервер по протоколам HTTP и FTP. Обзор программного обеспечения для закачки файлов сайта на сервер и работа с ним. Размещение сайта на сервере
9.3 Понятие, назначение и использование систем управления контентом (CMS). Тестирование работы вебсайта на сервере. Возможные ошибки и недочёты

10. Зачет: Создание web-сайта

Рецензия на книгу: Веб-дизайн All-in-One для чайников

Веб-дизайн All-in-One Настольный справочник для чайников Сью Дженкинс

Моя оценка: 3 из 5 звезд

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

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

Мне надоело расширенное покрытие таблиц. Было много хороших примеров CSS. Глава о SEO была моей любимой, так как она развенчивает мифы и объясняет, что на самом деле работает.

Фазы веб-проекта
Планирование: определение целей, содержания, требований
Контракт: создание подписанного документа с указанием оплаты, сроков и результатов
Дизайн: понимание целевой аудитории; макет макета
Building: создайте функциональный сайт с помощью HTML, CSS, JavaScript и т. д.
Тестирование: тестирование с популярными операционными системами и браузерами; проверить код
Запуск: зарегистрировать домен; купить хостинг; опубликовать сайт
Обслуживание: добавление и обновление содержимого и дизайна

Контракты
Создайте контракт, аналогичный контракту на премиальную веб-разработку.
Получите 25% залог перед началом работы.
Включить в контракт пункт о пересмотре, указав количество внесенных изменений. Счет за дополнительные изменения.
Получите письменное разрешение на карту сайта, макет и окончательный вариант сайта.
Попросите клиента просмотреть тестовый сайт и подписаться перед запуском.
Укажите, что клиент несет ответственность за точность и содержание содержания.

Веб-стандарты и тестирование
Следуйте инструкциям по обеспечению доступности, чтобы сделать сайт более удобным для людей с ограниченными возможностями и поисковых систем.
Проверить ссылки, HTML / XHTML и CSS.
Тестирование в основных браузерах и операционных системах (ОС).

SEO (поисковая оптимизация)
Неэтичные и / или бесполезные методы SEO
заполнение ключевых слов
список ключевых слов
заполнение тегов
заполнение изображений
скрытый текст
чрезмерное количество запросов в поисковые системы
дублирование страниц

методы SEO
Включить ключевые слова в текст.
Свяжите ключевые слова с другими страницами сайта.
Выделите ключевые слова заголовками, жирным шрифтом и курсивом.
Используйте ключевые слова в тегах title и alt.
Используйте метатеги, особенно Description. Ключевые слова не используются большинством движков.
Сделайте заголовки страниц полными, информативными, богатыми ключевыми словами предложениями.
Создайте карту сайта и сделайте ссылку на нее из нижнего колонтитула и заголовка HTML.
Добавьте на сайт систему пользовательского поиска Google.
Добавить навигацию по хлебным крошкам.

Дополнительные примечания
Сайт должен объяснять преимущества продуктов или услуг клиента их идеальному посетителю.
Клиент не всегда прав. Если они делают необоснованные просьбы, объясните, почему идея плохая, а затем предложите альтернативы.
Сделайте изображения как можно меньше (10 КБ или меньше или 30 КБ для более крупной графики).
Автор рекомендует Lunarpages для регистрации домена и хостинга.
Назначьте день для обновлений сайта. Пусть клиенты присылают список всех обновлений сразу, а не думают о них.

Посмотреть все мои обзоры

Руководство по адаптивному веб-дизайну для чайников | by Bradley Nice

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

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

Зачем мне переводить мой сайт на RWD?

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

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

• Он экономит время и деньги, поскольку вам не нужно поддерживать отдельные веб-сайты для настольных компьютеров и мобильных телефонов.
• Адаптивный дизайн хорош для SEO (поискового рейтинга) вашего сайта, так как каждая страница вашего сайта будет иметь один URL, и, таким образом, сок Google сохраняется.Вам не нужно беспокоиться о ситуациях, когда одни сайты ссылаются на ваш мобильный сайт, а другие — на ваш обычный.
• Ваши отчеты Google Analytics дадут более полное представление об использовании вашего сайта, поскольку данные, полученные от пользователей мобильных и настольных компьютеров, будут объединены.
• То же самое относится и к статистике обмена в социальных сетях (лайки, твиты, +1 в Facebook), поскольку мобильная и настольная версии ваших веб-страниц будут иметь один и тот же URL.
• Адаптивные проекты легче поддерживать, поскольку они не включают никаких серверных компонентов.Вам просто нужно изменить базовый CSS страницы, чтобы изменить ее внешний вид (или макет) на определенном устройстве.

Что мне нужно знать, чтобы начать работу с адаптивным дизайном?

Адаптивный дизайн — это чистый HTML и CSS. Вы создаете правила в CSS, которые изменяют стиль в зависимости от размера экрана устройства пользователя.

Например, вы можете написать правило, которое гласит, что если размер экрана пользователя меньше 320 пикселей, не показывать боковую панель или если размер экрана больше 1920 пикселей (широкоэкранный рабочий стол), увеличивать размер шрифта до основной текст — 15 пикселей.

Как проверить, использует ли конкретный веб-сайт адаптивный дизайн?

Это просто. Откройте этот веб-сайт в любом браузере на рабочем столе и измените размер браузера. Если макет сайта изменяется при изменении размера, дизайн адаптивный.

Есть примеры хороших отзывчивых веб-сайтов?

Если я выберу адаптивный дизайн, будет ли мой веб-сайт работать со старыми браузерами?

В основном да. RWD использует медиа-запросы CSS3 и HTML5 (для лучшей семантики), которые не поддерживаются в более старых версиях IE.Однако существуют решения на основе JavaScript — например, response.js и modernize — которые позволяют использовать возможности CSS3 и HTML5 в старых браузерах, включая IE6.

Хорошо ли адаптивный дизайн сочетается с рекламными сетями, такими как Google AdSense?

Если вы используете рекламу на своем веб-сайте, вам следует внимательно выбирать форматы, потому что широкие блоки (например, полноразмерный баннер 728 × 60 пикселей) могут не поместиться на экране мобильного устройства с разрешением 320 пикселей. Я предпочитаю использовать стандартные прямоугольные блоки (например, 300 × 250), поскольку они легко помещаются на экранах смартфонов и широкоформатных рабочих столах.

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

Я бы порекомендовал установить точки останова по крайней мере для следующих окон просмотра в ваших CSS3 Mediaqueries — 320 пикселей (ландшафт iPhone), 480 пикселей (портрет iPhone), 600 пикселей (планшеты Android), 768 пикселей (iPad + ~ вкладки Galaxy) и 1024 пикселей ( iPad в альбомной ориентации и десктопы).

Как начать работу с адаптивным веб-дизайном? Есть какие-нибудь хорошие уроки?

Вот онлайн-ресурсы, которые помогут вам начать работу:

Веб-сайты: Net Magazine, Smashing Magazine, CSS Tricks и Web Designer Wall [эти веб-сайты и блоги часто посвящены адаптивному дизайну]

Видеоуроки: YouTube, Net Tuts [адаптивный дизайн 101]

Презентации: PowerPoint Decks [лучшие онлайн-презентации по RWD]

Книги: Чутко нажимайте.Книга доступна в форматах PDF, Kindle и ePUB]

Подкасты : Shop Talk, 5by5 Web Show и The Industry

Twitter : @RWD, @NetMag и @SmashingMag [аккаунты, за которыми стоит следить в Twitter]

Каковы недостатки использования адаптивного дизайна?

• Дополнительные килобайты на вашей веб-странице, так как им придется загружать стили CSS и файлы JavaScript, которые в противном случае были бы ненужными.
• Изображений. Вы не хотите размещать изображения с более высоким разрешением на своем мобильном сайте, но этого трудно добиться с помощью адаптивного дизайна (если вы не прибегнете к обходным путям на стороне сервера, таким как Adaptive Images и Sencha.io).
• Попытки добавить адаптивный слой к существующему сайту. Иногда имеет смысл начать с нуля, а не делать существующий веб-сайт фиксированной ширины гибким.

Вам также может понравиться: Адаптивные макеты Бесплатно EBOOK

index-of.co.uk/

 Имя Размер
 ASP / -
 AdSense / -
 Эддисон-Уэсли / -
 Adobe / -
 Agile / -
 Алгоритмы / -
 Android / -
 Анимация / -
 Арт-форжеры / -
 Искусственный интеллект/        -
 Сборка / -
 Астрономия / -
 Аудио / -
 Big-Data-Technologies / -
 Биоинформатика / -
 Black-Hole-Exploit-Kit / -
 Черная шляпа/                       -
 C ++ / -
 Casa / -
 Шпаргалка / -
 CheatSheets-QuickRefs / -
 Cisco / -
 Кликджекинг / -
 Книги по облачным вычислениям / -
 Облачные технологии / -
 Компилятор / -
 Компьютерная лингвистика / -
 Компьютерная безопасность/              -
 Компьютерные технологии/            -
 Параллельное программирование / -
 Печенье-начинка / -
 Криптография / -
 Криптология / -
 DG-LIBRE / -
 DLink-маршрутизатор / -
 DSP-Коллекция / -
 Сбор данных/                    -
 Структуры данных / -
 База данных/                       -
 Диджитал-Дизайн / -
 Цифровое телевидение/                     -
 Обнаружение-Статистика / -
 Дистрос-GNU-LINUX / -
 Документы / -
 Dominios-expirados / -
 DotNET / -
 Электронные книги / -
 Египетология / -
 Электроника / -
 Инжиниринг / -
 Английский/                        -
 Так далее/                            -
 Ес-правда / -
 Эксплойт / -
 Фейк-Фарма / -
 Судебная экспертиза / -
 Электронные книги о свободной энергии / -
 Галерея / -
 Разработка игр / -
 Ганар-динеро / -
 Google / -
 Графический дизайн/                 -
 Графика / -
 Гиды / -
 HTML-CSS-AJAX-Javascript / -
 Hack_X_Crack / -
 Хакеры / -
 Взлом-Coleccion / -
 Взлом / -
 Хаки / -
 Оборудование / -
 INFOSEC / -
 IT-менеджмент / -
 ЭТО/                             -
 Поиск информации/          -
 Информация-Теория / -
 Интервью/                      -
 JBoss / -
 Ява/                           -
 JavaScript / -
 Джон-Уайли / -
 Joomla / -
 Лаборатория / -
 Лекции / -
 Уроки для жизни / -
 Linux / -
 Журналы / -
 Вредоносное ПО / -
 Математика/                    -
 МакГроу-Хилл / -
 Медицинский / -
 Микропроцессоры / -
 Microsoft-Compiled-HTML-Help / -
 Microsoft-Windows-Электронные книги / -
 Разное / -
 Блок управления двигателем/                  -
 Msca / -
 Музеи / -
 MySQL / -
 Сеть / -
 OFIMATICA / -
 OReilly / -
 Операционные системы/              -
 PHP / -
 Пентестинг / -
 Фишинг / -
 Телефоны / -
 Photoshop / -
 Физика / -
 Пингоматика / -
 Библиотека программирования / -
 Программирование / -
 Управление проектом/             -
 Психология-общение / -
 Публичное выступление/                -
 Python / -
 КРАСНЫЕ / -
 Обратный инжиниринг/            -
 Обращение-Эксплуатация / -
 Riparazione-Siemens / -
 Руткит / -
 SE / -
 SEO / -
 СЕН / -
 СЕРВИДОРЫ / -
 СИСТЕМАС-ОПЕРАТИВЫ / -
 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ / -
 SQL / -
 SWE / -
 Наука/                        -
 Безопасность/                       -
 Segreteria-Digitale / -
 Смартфон / -
 Социальные взаимодействия/            -
 Программная инженерия / -
 Программное обеспечение-тестирование / -
 Som_pdf / -
 Спам/                           -
 Sslstrip / -
 Стегосплоит / -
 Выживание / -
 Syngress / -
 TDS / -
 Tghy / -
 Теория вычислений / -
 Tmp / -
 Учебники / -
 UPS/                            -
 USB/                            -
 Uml / -
 Различный/                        -
 Видеообучение / -
 WCAG 2.0 / -
 Акварели / -
 Веб приложение/                -
 Обнаружение веб-спама / -
 Webshell / -
 Winasm-studio-tutorial / -
 Окна / -
 Беспроводная сеть/                   -
 WordPress / -
 XML / -
 презентация / -
 чтения / -
 

советов по веб-дизайну для начинающих — все, что я хотел бы знать, когда начинал — Smashing Magazine

Об авторе

Роб Боуэн — штатный писатель в Web Hosting Geeks, давний внештатный дизайнер и растущий видеооператор и режиссер, чей творческий голос работает может… Больше о Роберт ↬

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

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

Дополнительная литература по SmashingMag:

Начало работы

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

Просто сделай это

Помните, прежде всего, чтобы начать.Так часто мы зацикливаемся на предварительных шагах и соображениях и задерживаемся на них, по-видимому, на «Пауза». Будь то потому, что мы не знаем, с чего и как начать, или потому, что мы перегружены количеством шагов, задействованных в начале, мы ждем. Мы пытаемся охватить все, прежде чем выйти вперед, чтобы испытать воду. Но сообщество соглашается: дерзайте!

• Что бы это ни было, сделайте это сейчас.
• Прекратите читать #smtips и создайте что-нибудь, доставляющее сообщение.
• Прекратите откладывать дела на потом и начните уже сейчас!
• Самый страшный момент всегда наступает незадолго до начала.
• Бойтесь, все равно сделайте, потерпите неудачу, повторите.
• Хватит бездельничать; просто начни.
• Не переусердствуйте.

Начните с карандаша и бумаги

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

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

• Начните с пера и бумаги, а не с клавиатуры и мыши.
• Лучшие идеи рождаются на бумаге.
• Всегда начинайте с карандаша и чистого листа бумаги.Это лучший способ получить лучший дизайн.
• Мой лучший совет по дизайну: забудьте про Mac, ПК и приложения и начните рисовать на бумаге красивым острым карандашом.
• Используйте карандаш и бумагу, чтобы создать концепцию, прежде чем использовать компьютер.
• Всегда начинайте рисовать с бумаги. В рисовании есть сила.
• Набросок ваших идей в начале проекта действительно может помочь сформировать хороший дизайн.
• Всегда начинайте с бумаги.
• Делайте наброски на бумаге, а не в программном обеспечении для дизайна, чтобы не ограничивать свои идеи текущими технологическими возможностями.
• При разработке для Интернета придерживайтесь старой школы; спланируйте и создайте прототип своего пользовательского интерфейса и функций в первую очередь на бумаге.
• Выключите компьютер и вернитесь к основам; Вы не сможете превзойти первоначальные наброски, сделанные старомодным пером и бумагой.
• Совет по дизайну: начните с ручки и бумаги и обращайтесь к программному обеспечению только тогда, когда точно знаете, что собираетесь делать.
• Когда я проектирую, мне нравится рисовать идеи на большом листе бумаги и описывать функциональные возможности того, что я пытаюсь построить.

Сроки

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

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

• Хороший дизайн требует времени; установите реалистичные сроки (затем умножьте на два).
• Стремитесь, чтобы у вас не было достаточно времени, чтобы закончить работу над дизайном.
• Слушайте своих клиентов, чтобы вы действительно знали, что им нужно, и , когда им это нужно.

K.I.S.S.

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

• Будь простым, глупым.
• Простое всегда лучше. Сделайте это видимым, а не визуальным.
• Работа дизайнера — общаться максимально простым способом.
• Правило троек — мое любимое правило для лаконичного дизайна: используйте три шрифта (максимум), три изображения и три цвета.
• Мой любимый совет по дизайну — следовать принципу KISS: будь простым, глупым!
• Чистота, ясность и краткость полезнее, чем кричащая и загроможденная! Уберите беспорядок и сделайте его потрясающим.
• Сохраняйте простой дизайн, чтобы люди сосредотачивались на содержании.
• Просто и чисто!
• Для хорошего дизайна я предлагаю использовать максимум два шрифта и несколько цветов, чтобы сделать его простым и избежать путаницы.
• Не усложняйте дизайн. Бритва Оккама говорит, что самое простое объяснение, скорее всего, будет правильным.
• Делать простое сложным — обычное дело. Делать сложное простым — удивительно простым — вот в чем творчество. Это дизайн.
• Если он не служит цели, уберите его.В конце концов, лишняя графика только отвлекает.

Белое пространство

Еще один популярный ответ, который мы получили — и он подпадает под K.I.S.S. зонтик — был про белое пространство. Пустое пространство действительно важно и, кажется, ускользает от многих дизайнеров, которые чувствуют необходимость заполнить чем-то каждый доступный дюйм. Тем не менее, многое нужно сказать об использовании белого пространства и не совершении дизайнерского греха ненужного беспорядка. Белое пространство дает элементам страницы — и тем самым тем, кто просматривает страницу — пространство для дыхания.Загроможденный дизайн вызывает дискомфорт, поэтому добавьте пустое пространство, чтобы снять напряжение.

• Пустое пространство может быть не менее (или более) эффективным, чем изображения. Используйте пустое пространство с умом.
• «Хороший дизайн — это минимум дизайна». (Дитер Рамс)
• Лучше меньше, да лучше.
• Лучший совет по дизайну, который я когда-либо слышал, был «уменьшить, уменьшить, уменьшить». Когда вам больше нечего забрать, тогда вы знаете, что все готово.
• Используйте белое пространство и глубокие гармоничные цвета.
• Не бойтесь белого пространства.
• Не забудьте пустое пространство и следуйте указаниям.
• Белое пространство — это такой же элемент дизайна, как и фактическое содержимое.
• Постарайтесь не загромождать свою страницу слишком большим количеством изображений, фонов и ярких шрифтов. Будь проще.
• Белое пространство — это не потерянное пространство.
• Не думайте, что вам нужно заполнять все доступное пространство; забивание всех средств массовой информации бесполезными фактами не принесет вам никакой пользы.
• Белое пространство — ваш друг, а не враг.

Цвет

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

• Используйте меньше цвета, пожалуйста.
• Вот мгновенная цветовая схема, которую может использовать не дизайнер: начните с основного цвета, затем выберите более темные и светлые варианты и настройте насыщенность, но не оттенок.
• Не бойтесь цвета.
• Выбирая цвета для клиента, делайте это возле окна; солнце для всех одно, а вот освещение в помещении — нет.
• Простота превыше всего в цветовой палитре; Работайте в оттенках для большего количества вариаций. 2011 год — это год меньше значит больше.
• При выборе цветовой гаммы сделайте соседние элементы контрастными, а не совпадающими (например, белые стены и черные шторы).

Кривая обучения

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

• Никогда не прекращайте обучение.
• Обучение подобно горизонту: оно не имеет границ (китайская пословица). Я чувствую, это относится и к дизайну.
• Никогда не прекращайте учиться.
• Развивайте свою страсть к учебе.
• Стремитесь узнавать что-то новое и раздвигайте границы с каждым новым проектом.

Внимание к пользователю

Всегда помните о пользователе. Это много раз всплывало. Юзабилити — это все и завершение всех требований проекта.Форма и блики прекрасны, но если они каким-либо образом ставят под угрозу удобство использования дизайна, их следует пересмотреть. Большинство веб-сайтов в некотором роде интерактивны, поэтому функциональность и пользователь должны иметь приоритет над эстетикой, иначе проект потерпит неудачу (по крайней мере, до некоторой степени).

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

• Создавайте эстетичный дизайн, но не за счет удобства использования.
• Неважно, насколько хорош дизайн; если он не работает и не может быть найден, это бесполезно.
• Думайте, как целевой пользователь.
• Функция прежде формы!
• Все дизайны начинаются с анализа аудитории. Если вы не знаете, для кого вы разрабатываете, откуда вы можете знать, что они получат ?
• Не стоит недооценивать пользователей.
• Дизайн с учетом клиента, но для конечного пользователя .В конце концов, все будут счастливы.
• Это может показаться скучным, но вот мой совет: форма следует за функцией! Это хороший дизайн, если пользователь может достичь того, чего он хочет, так, как он хочет.
• Сначала подумайте о пользователе, а затем проектируйте соответственно.
• Пользовательский опыт важнее всего. Если им нельзя пользоваться, значит, бесполезно.
• Понимание — ключ к созданию простых удобных дизайнов. Поймите пользователей, , почему дизайна и бизнес-целей.

Сохранить… Часто!

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

• Часто используйте Command + S.
• SOS: экономить часто, глупо.
• Простой дизайн и не забывайте почаще сохранять свою работу.
• Не забывайте почаще сохранять свою работу.
• Сохраняйте файлы как можно раньше и чаще.
• Никогда не забывайте экономить. Это самый простой и полезный совет, который я могу дать.
• Вашему дизайнерскому таланту нет равных в случае сбоя системы или компьютерного сбоя. Всегда сохраняйте и делайте резервные копии ваших цифровых шедевров… часто!

Inspiration

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

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

Выходи!

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

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

Don’t Force It

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

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

Layout

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

• Главное оставить как главное.
• Сделайте макет копии как можно больше основой дизайна.Сообщение не имеет значения, если оно неразборчиво.
• Создавайте черно-белые и цветные композиции, чтобы клиенты могли видеть разницу между макетом, цветом и дизайном.
• Вот простое правило хорошего макета и расположения: убедитесь, что все можно разделить на четыре.
• Используйте «тест на косоглазие» для оценки графического макета: структура, контраст, пространственные отношения, удобство использования.

Сетка

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

• Всегда проектируйте в формате сетки; это никогда не подводит. Оставайтесь организованными.
• Создайте прочный фундамент, используя возможности модульной сети, прежде чем переходить к проектированию произвольной формы.Это более интуитивно понятно!
• Невидимая сетка: то, что вы не видите, так же важно, как то, что вы делаете.
• Всегда используйте сетку. Тогда обязательно сломайте его.
• Ваш дизайн не будет выглядеть правильно, пока вы не поймете, что такое сетка.
• Делая верстку страницы, не оставляйте все на волю случая. Всегда используйте сетку.
• Используйте сетку. Это вас не ограничивает; это помогает вам принимать решения.
• Обратите внимание на сетку.

Визуальная иерархия

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

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

Совет посторонних

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

• Не бойтесь спрашивать мнение других.
• Вы не можете проверять слишком много раз. Попросите других людей тоже проверить вашу работу.
• Учитывайте критику со стороны людей вне вашего творческого круга; пользователи и потребители важны.
• Опишите другу ваш новый дизайн-проект и спросите его мнение.Запишите отзыв.

Типографика

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

• Белый текст на темном фоне выглядит круто, но вы не можете его прочитать.
• Всегда используйте хороший шрифт, например Helvetica, и не используйте Arial.Если вы дизайнер, купите потрясающие шрифты.
• Никогда не подчеркивать текст.
• Правильный шрифт выделит ваш дизайн.
• Убедитесь, что ваш веб-сайт по-прежнему работает, когда пользователи увеличивают шрифты. Это огромная (и часто игнорируемая) проблема, которая ломает веб-сайты.
• Получите действительно в типографике. Это отличает любителей от профессионалов.
• Размер вашего шрифта может и будет изменяться и искажаться браузерами, плохими мониторами и поисковыми системами.Запланируйте это.

Оригинальность

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

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

Доверяйте своим инстинктам

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

• Советы по дизайну в совокупности выглядят как мантры.Это контрпродуктивно, если вы такой циничный, как я. Доверяй своим инстинктам. Бунтарь.
• Хватит на это смотреть. Все хорошо!
• Доверяйте своим инстинктам.
• Изучая новую технику, попробуйте ее, прежде чем искать учебное пособие. Так вы часто узнаете больше.
• Доверяйте себе, но всегда спите на этом.
• Доверяйте своей интуиции.

Сделайте перерыв

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

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

Спи спокойно

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

• Больше спи.
• Высыпайтесь.
• Если у вас есть возможность посоветоваться с подушкой, сделайте это! Утро мудрее вечера.

Еще немного для дороги

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

• Перестаньте думать о «кампании» и начните думать о «разговоре».
• Оптимизируйте свой рабочий процесс для элементов, которые вы повторно используете: предустановки, действия, настраиваемые панели и макеты сетки, сэкономьте часы времени.
• У дизайна есть 56 секунд, чтобы привлечь чье-то внимание. Слайд-шоу с кнопками призыва к действию решает эту проблему.
• Дизайн для нужд клиента, а не для пребывания в зоне комфорта.
• Даже линия в один пиксель может изменить восприятие дизайна.
• Творчество означает позволять себе ошибаться. Дизайн означает знание того, какие ошибки следует избегать.
• Литература может помочь в дизайне. Инвестируйте в отличные книги, такие как The Non-Designer’s Design Book и The Smashing Book .
• Задавайте правильные вопросы.
• Сгиба нет.
• Дизайн, как и любовь, заключается в деталях. Внимание к деталям может сделать дизайн отличным.
• Будьте увлечены каждым созданным дизайном. Эта страсть будет иметь значение.
• Если вы сделаете все смелым, ничего не получится.
• Половину своего времени уделяйте обучению, половину своего времени — занятиям и половину — преподаванию. Тогда отдыхай.
• Идентичность — это последовательность.Не забудьте выровнять свои изображения, сообщения, цвета и шрифты на всех дизайнерских носителях.
• Независимо от того, сколько времени потребовалось для создания, дизайна и производства вашего веб-сайта, если есть какие-либо сомнения в том, что он будет работать, начните заново или не работайте.
• Подумайте, прежде чем начинать. Если нет, значит, вы уже проиграли.
• word-wrap — наиболее полезное свойство CSS, которое дизайнеры игнорируют: word-wrap: break-word; .
• «Будьте последовательны»: мать всех советов по дизайну.
• Дизайн с учетом норм.Знайте возможности и ограничения XHTML, Flash, JavaScript и CSS.
• Всегда следуйте четырем основным принципам CRAP: контраст, повторение, выравнивание, близость.
• Обучите своего клиента, обучите его еще немного, а затем обучите его еще больше! Неосведомленный клиент — огромное препятствие на вашем пути к дизайну.
• Не прекращайте задавать вопросы. Ответить.
• Ваши лучшие аналоговые инструменты: ручка, бумага, ластик, линейка, кофе, конечные пользователи и точки зрения других людей.
• Цель не в том, чтобы жить вечно, а в том, чтобы создать то, что будет.
• Отказ не является конечной точкой. Фактически, это отправная точка.

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

Ссылки и подобные

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

(al)

Материальный дизайн для чайников — полное SEO

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

Согласно официальному введению Google в Material Design, цель концепции заключалась в следующем:

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

… это действительно причудливый способ ничего не сказать по существу.

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

«Динамические смещения высоты — это заданная высота, к которой движется компонент, относительно состояния покоя».

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

Это версия Material Design для заметок на скалах. Потому что мы оба знаем, что у вас нет ни времени, ни энергии, чтобы разбираться в хипстерской речи Google из Кремниевой долины.

Приступим.

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

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

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

Более того, его можно использовать для отображения контента. Изображения, текст, видео — все, что вы можете придумать, можно отобразить и впоследствии изменить на фрагменте материала.

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

• Два куска материала не могут занимать одно и то же место одновременно
• Два куска материала не проходят друг через друга
• Материал не сгибается и не складывается
• Материал не может изменить свою глубину (толщина 1dp)

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

• Смелые цвета
• Большая графика
• Очевидная типографская иерархия
• Расчетное использование отрицательного пространства
• Действия пользователя обозначены движением

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

Разве материальный дизайн — это не просто скрученная версия Flat?

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

Однако даже скевоморфизм материального дизайна имеет много общего с плоским дизайном. Это потому, что единственная форма реализма, которую материальный дизайн пытается подражать, — это то, что представлено в печатных СМИ.Под этим я подразумеваю, что все аналоговые элементы в материальном дизайне основаны на бумажных изображениях. Таким образом, хотя вы увидите некоторые приближения «реальных» элементов в дизайне материалов, они все равно будут казаться более иллюстрированными, чем реалистичными.

Материальный дизайн: скевоморфный / плоский Lovechild?

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

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

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

Вот анимированный пример плоского и скевоморфного принципов в материальном дизайне в действии:

Или как насчет этого замечательного сайта-портфолио от Ng Kha Meng.

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

На мобильном телефоне тоже неплохо выглядит:

.

Кстати о мобильных устройствах…

Краткое замечание о согласованности

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

Более того, он предназначен для ознакомления этих пользователей, независимо от их окон просмотра. Это особенно важно для разработчиков Android, поскольку их постоянно критиковали за несогласованность пользовательского интерфейса в своих приложениях. У разработчиков приложений Google теперь есть простой справочник о том, как сохранить привлекательность и согласованность своих интерфейсов. Это касается как веб-приложений, так и мобильных приложений, и теперь стало намного проще реализовать аналогичные интерфейсы на разных платформах благодаря новому программному обеспечению Polymer, предоставленному Google.

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

Галерея дизайна материалов

1. Хранилище времени

2. Материализм

3. Coders.pub

4. Взаимодействие материалов

5. Appica 2

Заключение

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

Хотя есть что сказать о различиях в дизайне, единообразный набор принципов помогает UX, повышая знакомство и делая взаимодействие с пользователем более интуитивным.

Теперь, когда вы немного ближе познакомились с предметом, что вы думаете о небольшом набеге Google на лингвистику дизайна? Здесь, чтобы остаться? Минуете модный тренд? Оставляйте свои мысли в комментариях!

Адаптивный веб-дизайн — Руководство для чайников

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

Один дизайн, несколько экранов

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

Q1 — Почему я должен переключить свой веб-сайт на адаптивный дизайн?

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

Q2 — Какие еще преимущества перехода на RWD?

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

• Он экономит время и деньги, поскольку вам не нужно поддерживать отдельные веб-сайты для настольных компьютеров и мобильных телефонов.
• Адаптивный дизайн хорош для SEO (поискового рейтинга) вашего сайта, так как каждая страница вашего сайта будет иметь один URL, и, таким образом, сок Google сохраняется. Вам не нужно беспокоиться о ситуациях, когда одни сайты ссылаются на ваш сайт для мобильных устройств, а другие — на сайт для настольных компьютеров.
• Ваши отчеты Google Analytics дадут более полное представление об использовании вашего сайта, поскольку данные, полученные от пользователей мобильных и настольных компьютеров, будут объединены.
• То же самое относится и к статистике обмена в социальных сетях (лайки, твиты, +1 в Facebook), поскольку мобильные и настольные версии ваших веб-страниц больше не будут иметь разные URL-адреса.
• Адаптивные проекты легче поддерживать, поскольку они не включают никаких серверных компонентов. Вам просто нужно изменить базовый CSS страницы, чтобы изменить ее внешний вид (или макет) на определенном устройстве.
• Ранние методы проектирования смотрели на строки пользовательского агента, чтобы определить имя мобильного устройства и браузер, который делает запрос. Это было менее точно, и с учетом того, что количество устройств и мобильных браузеров увеличивается с каждым днем, эту матрицу очень сложно поддерживать.Адаптивный дизайн не заботится о пользовательских агентах.

Q3. Что мне нужно знать, чтобы начать работу с адаптивным дизайном?

A3 — Адаптивный дизайн — это чистый HTML и CSS. Вы создаете простые правила в CSS, которые изменяют стиль в зависимости от размера экрана устройства пользователя.

Например, вы можете написать правило, которое гласит, что если размер экрана пользователя меньше 320 пикселей, не показывать боковую панель или если размер экрана больше 1920 пикселей (широкоэкранный рабочий стол), увеличивать размер шрифта до основной текст — 15 пикселей.Вот те же правила, переведенные в код:

@media screen и (max-width: 320px) { .sidebar {display: none} } @media screen и (min-width: 1920px) { тело {font-size: 15px} }

Q4 — Как проверить, использует ли конкретный веб-сайт адаптивный дизайн?

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

Q5 — Можете ли вы поделиться примерами некоторых хороших веб-сайтов, которые реагируют на запросы?

A5 — Это довольно много, но мои фавориты включают The Boston Globe (новостной сайт), Simple Bits (личный блог), Happy Cog (агентство веб-дизайна), Barack Obama (да, сайт президента), Shake Shack ( сеть ресторанов), Nicole & Josh (свадебный сайт), Food Sense (кулинария и рецепты), dConstruct 2012 (конференция по дизайну) и Good to Know (сайт Google по онлайн-безопасности). Вам также следует проверить mediaqueri.es, тщательно подобранная галерея веб-сайтов, использующих адаптивный дизайн.

Q6. Если я выберу адаптивный дизайн, будет ли мой веб-сайт работать со старыми браузерами?

A6 — В основном да. RWD использует медиа-запросы CSS3 и HTML5 (для лучшей семантики), которые не поддерживаются в более старых версиях IE. Однако существуют решения на основе JavaScript, например, response.js и modernizr, которые позволяют использовать возможности CSS3 и HTML5 в старых браузерах, включая IE6.

Q7 — Хорошо ли адаптивный дизайн сочетается с рекламными сетями, такими как Google AdSense?

A7. Если вы используете рекламу на своем веб-сайте, вам следует внимательно выбирать форматы, поскольку широкие блоки (например, полноразмерный баннер 728×60 пикселей) могут не поместиться на экране мобильного устройства с разрешением 320 пикселей.Я предпочитаю использовать стандартные прямоугольные блоки (например, 300×250) в своем блоге, поскольку они легко помещаются на экранах смартфонов и широкоформатных рабочих столах.

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

Q8 — Есть тысячи мобильных устройств. Какие разрешения экрана должен поддерживать мой адаптивный веб-сайт?

А8.Откройте панель управления Google Analytics и выберите Audience -> Technology -> Browser & OS. Теперь переключитесь на вкладку «Разрешение экрана» в отчете и посмотрите разрешение мобильных устройств, которые люди используют для просмотра вашего сайта.

Я бы порекомендовал установить точки останова по крайней мере для следующих окон просмотра в ваших CSS3 Mediaqueries — 320 пикселей (альбомная ориентация iPhone), 480 пикселей (портретная ориентация iPhone), 600 пикселей (планшеты Android), 768 пикселей (iPad + ~ Galaxy Tabs) и 1024 пикселей (iPad). пейзаж и рабочие столы).

Q9 — Как начать работу с адаптивным веб-дизайном? Есть какие-нибудь хорошие уроки?

A9 — Сначала прочтите статью Итана Маркотта, а затем купите его книгу. Итан придумал термин и популяризировал эту технику с тех пор, как он написал эту статью для A List Apart в 2010 году.

Вот дополнительные онлайн-ресурсы, которые помогут вам начать работу:

Q10 — Каковы некоторые из недостатков использования адаптивного дизайна ?

A10 — Адаптивный дизайн может добавить несколько дополнительных килобайт на вашу веб-страницу, поскольку им придется загружать стили CSS и файлы JavaScript, которые в противном случае были бы ненужными.Другая проблема связана с изображениями. Вы не хотите размещать изображения с более высоким разрешением на своем мобильном сайте, но этого трудно добиться с помощью адаптивного дизайна (если вы не прибегнете к обходным путям на стороне сервера, таким как Adaptive Images и Sencha.io).

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

Мобильный веб-дизайн для чайников

Автор: Джанин Уорнер и Дэвид Лафонтен
Wiley Publishing

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

Как произвести большое впечатление на маленьком экране

• Небольшое пространство, большая проблема — узнайте, что отличает мобильное устройство от других и какие конкретные проблемы при проектировании возникают.
• Советы по адаптации существующего сайта для мобильных устройств
• Планирование эффективной мобильной стратегии
• Как создать сайт, который будет хорошо работать на всех мобильных устройствах: смартфонах, телефонах с сенсорным экраном и обычных телефонах
• Профессиональные инструменты — откройте для себя лучший язык разметки для своей аудитории: WML, XHTML MP или HTML5
• Расширьте возможности мобильных устройств — воспользуйтесь преимуществами специальных функций iPhone®, Android и BlackBerry® Storm
• Тестирование, тестирование — узнайте, как тестировать свой мобильный дизайн с помощью онлайн-эмуляторов
• Mobile Multimedia — узнайте, как добавлять аудио и видео и оптимизировать изображения для маленького экрана
• Распространите информацию — изучите маркетинговые возможности, чтобы рассказать о своем мобильном сайте
• Мобильная коммерция и как добавить корзину покупок для мобильных устройств на свой сайт
• Как тестировать мобильные проекты, даже если у вас нет мобильного телефона, с помощью мобильных эмуляторов
• Интервью с ведущими экспертами в области мобильной связи
• Основанный на обширных исследованиях, написании, редактировании и тестировании, Mobile Web Design For Dummies уже получает отличные отзывы.

Авторы Джанин Уорнер и Дэвид Лафонтен объясняют некоторые вещи, которые вы узнаете из книги «Мобильный веб-дизайн для чайников»

Содержание

Часть I Проектирование мобильных устройств

Глава 1. Понимание того, что отличает мобильные устройства от других

Глава 2 Проектирование для мобильного мира

Часть II в соответствии со стандартами мобильного Интернета

Глава 3 Создание простого мобильного сайта

Глава 4 Введение в XHTML и CSS (была Глава 3)

Глава 5 Сравнение мобильных языков разметки

Глава 6 Разработка нескольких мобильных дизайнов

Глава 7 Тестирование и публикация мобильных сайтов

Часть III Мультимедиа, маркетинг и электронная коммерция

Глава 8 Использование изображений и мультимедиа в дизайне мобильных устройств

Глава 9 Создание страниц блога, удобного для мобильных устройств

Глава 10 Мобильный маркетинг и социальные сети

Глава 11 Добавление электронной коммерции на мобильные сайты

Часть IV Часть десятков

Глава 12 Десять проблем и возможностей мобильного интерфейса

Глава 13 Десять великих мобильных сайтов

Приложения

Приложение A: Интервью со специалистами по мобильному дизайну

Приложение B: Оптимизация изображения

.