Программы веб дизайн: Программы для веб-дизайнера: где создавать сайты? – Инструменты для веб-дизайна — обзор программ и инструментов для дизайна сайтов — DesignLessons – все о дизайне

Содержание

Программы для веб-дизайнера: где создавать сайты?

← Назад

(Перед вами бесплатный курс Рафаля Томаля «Интро в веб-дизайн». В курсе 7 глав. Если вы здесь впервые, то лучше начните сначала)

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

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

Рис. 7.0: Свой сайт я спроектировал при помощи нескольких базовых инструментов, одного шрифта и трех цветов.

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

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

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

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

Инструменты для веб-дизайна — обзор программ и инструментов для дизайна сайтов

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

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

Базовые программы

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

Семейство Adobe

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

Adobe Photoshop — базовое приложение, которое предназначено как для обработки изображений, так и для создания дизайна в целом. Так как Photoshop до сих пор является самым популярным продуктом среди дизайнеров, верстальщиков и разработчиков (в основном от дизайнеров требуется предоставить макет в формате .psd), владение этим инструментом важно для полноценной работы над проектом.

Из недостатков программы выделяют следующие:

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

Adobe Experience Design (Adobe XD) — относительно новая программа линейки Adobe, специально предназначенная для проектирования интерфейсов. Приложение поддерживает векторную графику и верстку, есть возможность работать с сетками, стандартными блоками и типографикой.

Кроме Adobe Photoshop и Adobe XD у компании есть еще несколько продуктов, которые используются дизайнерами:

Adobe Illustrator — программа для создания векторных изображений, например, логотипов, иллюстраций и так далее.
Adobe After Effects — приложение для создания анимации. В основном используется для демонстрации дизайна или разработки анимированных элементов.
Adobe InDesign — приложение, которое используется для верстки как полиграфии, так и интернет страниц.

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

Sketch

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

В основном Sketch рассчитан на создание сайтов блочной структуры — в программе можно создавать блоки, кнопки, формы и прочее одним движением мыши. Есть возможности для глубокой работы с типографикой, модульными сетками. Главный недостаток программы — ограниченная совместимость с ОС. Sketch разработан специально для Mac OS и не имеет аналога для Windows.

Figma

Еще одна программа на рынке, которая является главным конкурентом Sketch — графический редактор Figma. Данное приложение работает как на Windows, так и на Mac OS, поэтому быстро стало популярным среди веб-дизайнеров. Одно из главных преимуществ программы — возможность работать напрямую через браузер и сохранять результаты своей работы в облаке.

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

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

специфика дизайна. В основном современные сайты имеют блочную структуру, которую удобнее реализовывать с помощью простых элементов. В таком случае Sketch и Figma подходит большинству дизайнеров. Однако если макет включает в себя сложную обработку изображений, без Photoshop не обойтись;
технические возможности разработчиков. Часто верстальщики работают с форматом .psd и не используют другие программы кроме линейки Adobe. В этом случае дизайнерам приходится подстраиваться под других специалистов и выбирать нужное приложение, исходя из возможностей разработчиков;
удобство пользования. Сложность интерфейса — одна из особенностей работы с линейкой продуктов Adobe. Так как инструменты не предназначены напрямую для проектирования интерфейсов, у дизайнеров возникают сложности при создании макетов, в отличие от специализированных программ Sketch или Figma.

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

Графика

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

Платные стоки

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

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

Бесплатные стоки

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

1. Pixabay

Сервис Pixabay — сайт, на котором представлены бесплатные изображения достаточно хорошего качества.

На сайте представлено более 1 миллиона изображений, которые можно использовать в дизайне без указания авторства. Есть как векторная, так и растровая графика.

2. Unsplash

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

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

3. Freepik

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

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

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

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

Работа с цветом

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

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

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

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

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

Типографика, анимация и 3D

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

Дизайнер может загрузить изображение с надписью и сервис определит используемый на нем шрифт, если он есть в базе.

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

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

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

Некоторые веб-дизайнеры занимаются не только проектированием интерфейсов и рекламной графикой с помощью 3D моделирования. Есть довольно сложные для освоения программы, которые позволяют создавать различные 3D модели и использовать изображения в веб-дизайне. Одни из самых популярных программ 3D моделирования — AutoDesk 3Ds Max и Cinema4D.

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

Студия IDBI использует множество различных инструментов для создания дизайна сайтов. Мы можем разрабатывать как сложные интерфейсы с глобальной обработкой изображений и созданием новых, так и легкие сайты с минималистичным дизайном. В работе мы используем и традиционную линейку Adobe, и более современные продукты. Наши работы можно посмотреть в разделе «Портфолио».

обзор 50 лучших на русском языке

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

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

Я немного дополнил этот список от себя и разбил на категории. Теперь представляю его вашему вниманию.

Базовые программы

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

Это даже несмотря на то, что ее еще нет на русском языке и подходит она только для Mac OS. Большинство профессионалов утверждают, что для дизайна интерфейсов она подходит куда лучше, чем фотошоп.

Если говорить о других продуктах Adobe, то изучать их или нет – решать вам. И тем не менее они все еще присутствуют в списках.

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

Помимо продукции Adobe профессионалы рекомендуют обратить внимание на другие марки и их продукты. Macaw признается одной из самых популярных программ для веб-дизайна. В отличие от Sketch она подходит для Виндовс и позволяет программировать без знания кода. Она сама автоматически генерирует html и css. Скачать ее можно бесплатно прямо с официального сайта. Правда только на английском языке.

Издание Creative Bloq в качестве альтернативы Adobe Muse предлагает посмотреть другой современный сервис Pinegrow, он подходит для рисования любого сайта с последующим автоматическим преобразованием картинки в код. Этого же можно добиться и на Jetstrap.

Ну а если вам нужно поработать с приложениями, то в этом вам скорее поможет Foundation for Apps.

Банк графики

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

К примеру, на endlessicons.com можно найти иконки, а на coverr.co видеообложки.

На freepik.com и IconStore можно найти много бесплатных изображений. Векторов и даже PSD-макетов. От себя могу предложить Photoshop-master и Pixabay.

Stripemania.com[/urlspan] – быстро сгенерирует графику. Добавляете свои цвета и получаете полосатую картинку. Хотите создать свой анимированный фон с плавным переходом цвета? С этим поможет справиться сайт [urlspan]gradient-animator.com. Он не только покажет в режиме реального времени результат, но и создаст код, который останется только вставить на сайт.

Findguidelin.es это сборник, на котором можно найти иконки и всю информацию для дизайнеров о популярных брендах: WatsApp, Facebook, Вконтакте и так далее.

Конструктор логотипов и фавиконов

Меня удивило, но на многих популярных и престижных сайтов для дизайнеров можно найти ссылку на сервис, помогающий создать логотипы. На Нетологии, к примеру, предлагают withoomph.com или designrails.com. Я предпочитаю Логастер.

Для быстрого создания фавиконов можете воспользоваться порталом www.favicon.cc. О нем я кстати уже писал. Хорошая штука.

Работа с цветом

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

Сервис Material Palette предлагает выбрать два цвета, а всю остальную схему она достроит за вас: шрифты, разделители и так далее.

На [urlspan]0to255[/urlspan] можно посмотреть различные оттенки, хотя у вас есть и русская альтернатива – Яндекс.

Если вы увидели красивую картинку, то можете при помощи сервиса [urlspan]pictaculous.com[/urlspan] извлечь из нее цветовую схему. Кстати, очень помогает точно решить стоит ли использовать на своем портале то или иное изображение. Если оно не удачно сочетается с основой схемой, то ответ очевиден.

Работа со шрифтами

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

Чтобы подобрать идеальное сочетание шрифтов специалисты рекомендую воспользоваться сервисом: canva.com/font-combinations или typewolf.com.

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

А в онлайн-редакторе на сайте prototypo.io вы можете немного его изменить и сделать уникальным.

Завершающий этап

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

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

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

Если помимо дизайна вы занимаетесь еще и версткой, можете встроить в код утилиту tota11y. Она подсветит ошибки.

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

Курсы для дизайнеров от команды PhotoshopMaster.

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

Ну вот и все. До новых встреч и удачи.

14 инструментов для веб-дизайна и веб-разработки на 2014 год / Habr

Вместе с WEB движущимся семимильными шагами (адаптивным дизайном, CSS препроцессорами, постпроцессорами и другими вещами) может оказаться проблемой попытка не отставать от чего-то нового и полезного.
Ниже Вы найдете 14 инструментов, 7 для веб-дизайнеров и 7 для веб-разработчиков, которые помогут веб-сайту перерасти из концепции в действительность.

Для веб-дизайнеров

1. Adobe Creative Cloud

Разумеется, что Photoshop и Illustrator являются двумя важными инструментами для любого веб-дизайнера. Вместе с Creative Cloud у вас будет доступ к обоим из них, и плюс к некоторым другим инструментам, таких как: Typekit, InDesign и Kuler. Все инструменты Creative Cloud очень хорошо взаимодействуют друг с другом, и должны иметься у любого дизайнера.

2. UI Faces

Поскольку поиск нужных картинок для макета может быть трудоемок, UI Faces собирает аватары через Twitter и делает их доступными для использования в вашем дизайне.

3. 0to255

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

4. Google Fonts

Типографика в WEB проделала длинный путь со дней Arial, Courier и Georgia. Google Fonts это огромная библиотека свободных, готовых шрифтов которые могут быть загружены на стадии макета.

5. Samuel L. Ipsum

Поклонникам фильма «Змеиный полёт», я представляю «Samuel L. Ipsum» (Сэмюель Л. Ipsum). Это Lorem Ipsum генератор цитат. Имейте в виду, существует три варианта на выбор: цитаты ненормативной лексики ладена из фильмов Джексона, чистые цитаты из фильмов Джексона и обычные ol’ lorem ipsum.

6. Responsive Sketch Pad

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

7. Macaw

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

Для веб-разработчиков

1. Coda 2

Это мой любимый из-за его «все-в-одном» редактор кода, FTP клиент и встроенный MySQL редактор. Coda 2 также включает в себя справочную библиотеку по программированию и визуальный CSS-редактор.

2. CSS Pre-processor

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

3. Front-end Framework

Снова, есть два отличных предложения которые рассмотрим. Вместе Twitter Bootstrap и Zurb’s Foundation поможет сделать прототипирование и разработку для современного WEB быстрее и проще. Оба пакета это адаптивная сеточная система с элементами стилей и javascript по умолчанию, для реализации богатого WEB.

4. Browserstack

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

5. Pingdom

Раскройте DNS и проблемы загрузки с Pingdom. Вы увидите, сколько времени забирает загрузка различных ресурсов на вашем сайте вместе с общим показателем производительности.

6. Chrome Developer Tools

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

7. MAMP Pro

С легкостью крутите сайты локально. MAMP Pro позволяет легко установить и администрировать Apache, MySQL и среду разработки PHP. Если вы работаете над большим количество сайтов для клиентов, вам необходимо иметь такой сервер.

Программы для веб-дизайнера Основы веб-дизайна

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

Adobe Photoshop

Первая версия вышла в 1990 году

Самый популярный графический редактор. Появился очень давно и был №1. Его используют: фотографы, дизайнеры полиграфии, веб-дизайнеры, интерактивные дизайнеры, разработчики видео. Очень мощное приложение в котором есть все. Программа используется и поддерживается везде. В любой студии, компании, полиграфии.

Купить: http://www.adobe.com/ru/products/photoshop.html
Пробная версия: https://creative.adobe.com/ru/products/download/photoshop?promoid=61PM825Y&mv=other

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

Мои личное мнение:

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

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

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

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

Sketch

Первая версия вышла в 2012 году

Векторный графический редактор для Mac

Купить: https://www.sketchapp.com

После Фотошопа, появилась программа Sketch. Разработчики Sketch словно взяли мощный векторный графический редактор и выбросили из него все лишнее. Интерфейс приложения похож на классические программы от Apple.

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

Одна из главных «фишек» Sketch — связанные стили для фигур и текста. Это позволяет объединить разные элементы, придав им одинаковый внешний вид и в несколько кликов менять внешний вид всех ваших объектов. То же самое касается текста. Так же можно создавать символы, превращая выбранный слой в удобный для повторного использования элемент.

Sketch, как по мне, идеальный инструмент для разработки дизайна приложений и сайтов. На сегодняшний день самый передовой инструмент для UI/UX.

Affinity Designer

Affinity Designer — это новый графический редактор для Mac и Win. В сравнении с Photoshop он выходит победителем по нескольким параметрам: скорость работы, плавность и лёгкий интерфейс.

Купить: http://affinity.serif.com (в отличии от Adobe, вы покупаете один раз программу и пользуетесь ей всегда)

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

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

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

Некорректная ссылка. Попробуйте другую.ОтменаВставить

Заменить видео

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

Если сегодня о нем мало кто знает, то в недалеком будущем все дизайнеры будут его использовать. Если вы новичок, то начните с Affinity Designer. Если вы бывалый дизайнер, то присмотритесь к этой программе. Уверен, она сильно облегчит вам жизнь.

Благодаря Affinity моя скорость работы после фотошопа увеличилась на процентов 50-60%, в этом приложении все легче делать в 10 раз, чем в фотошопе. Работая в ней, получаешь огромное удовольствие. Эту программу я изучил просто досконально. Реальная каждая кнопочка, каждая функция нужна, важна и хороша.

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

Минусы: Честно, я не нашел для себя. Единственное, что его отличает от Photoshopа, что для тонкой работы с фотографиями разработчики сделали второе приложение Affinity Photo, практически все тоже самое, только заточенное исключительно для фотографов. То есть для фотографий там намного больше возможностей. Ну и это не большая проблема. Когда мне надо отретушировать фотографию, сделать тонкую цветокоррекцию или еще какие другие манипуляции, то я открываю Affinity Photo и делаю. Программы между собой связанны и переносить файлы можно просто через копирования ctrl+c/ctrl+v или же через сохранение проекта. Форматы приложений друг друга поддерживаются и читаются.

Affinity Photo

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

В ней есть полнофункциональный RAW-конвертер. Работа с различными цветовыми пространствами: RGB, CMYK, LAB, Grayscale, плотность 16 бит. Совместимость файлов с Adobe Photoshop PSD, поддержка TIFF, JPEG, PNG, EPS, PDF, SVG и других форматов.

Она действительно сделана на одном движке с Affinity Designer, но в корне отличается. Макеты сайтов в ней рисовать не стоит. Нету например поддержки Artboards, и многих других функций. Тут работа исключительно с фотографиями. В программе есть например возможность склеивать автоматически панорамы, делать 3d панорамы, использовать Liquify инструменты и многое другое. Если вы разрабатываете интерфейс приложения, то вам это все совершенно не нужно.

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

Работая с дизайном, я честно скажу, я редко открываю Affinity Photo, так как Affinity Designer справляется со всеми основными задачами. Для того, чтобы вырезать фотографию например и настроить цвет и яркость, не обязательно открывать Affinity Photo, все базовые функции работы с растровыми изображениями есть в Affinity Designer (вырезать фон, настроить цвета, яркость и прочее.) , но если надо нечто большее (изменить перспективу, использовать Liquify инструмент, нужны тонкие настройки цвета, ретуширование лица и др.) то да, без Affinity Photo не обойтись. Тут все есть для работы с фотографиями.

Figma

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

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

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

Что выбрать?

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

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

Affinity Designer/Photo — идеально подходит для разработки иконок, иллюстраций, баннеров, бронирования SMM, различных макетов полиграфии и всего остального. Рекомендую!

Что касается создания дизайна приложения, то я рекомендую изучать Sketch или Figma.

Руководство по веб-дизайну для разработчиков / RUVDS.com corporate blog / Habr

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

Дизайн

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

▍Макет

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

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

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

▍Цвета

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итоги

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

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

9 интересных сервисов для веб-дизайнера. Специальная подборка / Pixli corporate blog / Habr

В современном веб-дизайне существует достаточно много инструментов для web-дизайна. Это и классика — графические редакторы Photoshop и Sketch, и программы, совмещающие одновременно дизайн и верстку, такие как Macaw и Adobe Muse. И, как мы считаем, будущее web-дизайна — платформы для визуального дизайна сайтов в браузере, одним из примеров которых является Pixli.

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

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

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

Позволяет подобрать наиболее подходящую пару шрифтов Google. В виде меню представлены пары различных семейств:

Sans-Serif/Serif
Serif/Sans-Serif
Sans-Serif/Sans-Serif
Cursive/Sans-Serif
Cursive/Serif
Serif/Serif

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

Дизайнерский инструмент для создания цветовых комбинаций. Позволяет подобрать цвета к сайту. Имеет тонкую настройку, показывает код цвета. В конечном итоге позволяет просмотреть страницу в выбранной цветовой гамме. Самый большой плюс – просмотр гаммы с точки зрения отклонения цветовосприятия. Также позволяет выбрать разные цветовые модели. Сохраняет в палитру Gimp, CSS,PNG и т.д. Имеет конвертер цветов для перевода из одной цветовой модели в другую.

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

Редактор векторной графики, подобный Adobe Illustrator, Sketch и Inkscape. Сделан для современной web-платформы. Позволяет создавать изображения, баннеры, макеты, диаграммы, кнопки и пр. Его можно скачать на локальный компьютер, а можно использовать как онлайн сервис и рисовать в браузере. Позволяет импортировать изображения и шрифты Google.
Функции:

Преобразования: перемещение, изменение размеров, повороты и скашивание с помощью инструментов и вручную.
Группирование объектов.
Заливка: линейные градиенты, радиальные градиенты и образцы. Можно редактировать их непосредственно на холсте.
Символы: создание, редактирование и управление с возможностью повторного использования.
Кривые: ручное рисование или инструменты для рисования Bezier.
Формы: прямоугольники, треугольники, замещающие знаки, круги, звезды, n-полувагоны и кольца. У каждой формы есть доступные для редактирования свойства, такие как закругленные углы или количество рук.
Логические операции: объединяют, вычитают, пересекают и исключают объекты.
SVG и HTML 5: открывают и сохраняют SVG (Z) файлы. SVG — собственный формат Boxy SVG.
Экспорт и импорт PNG, JPEG и GIF.
Шрифты Google: импорт любого шрифта от библиотеки Google Fonts.
Сочетания клавиш: более чем 100 команд с настраиваемыми сочетаниями клавиш.

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

Позволяет сгенерировать превью дизайн-макета в оболочке браузера для того, чтобы презентовать заказчику. Генерирует превью не только в браузерах (Safari Mac, Safari Win, Chrome, IE, Firefox), но и в популярных iДевайсах. Это дает возможность сразу показать заказчику, как его сайт будет выглядеть на телефоне. Одновременно можно создавать несколько превью макетов — это существенно экономит время и генерации портфолио или превью для презентации крупного проекта.

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

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

Выводы

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

Программы для веб-дизайнера: где создавать сайты?

Популярные программы для дизайна

1. Sketch – $99/год (Только под Mac)

2. Figma – Бесплатно or $12/мес (веб-приложение)

3. Adobe XD – Бесплатно (Mac и Windows)

4. InVision Studio – Бесплатно (бета версия, с возможностью раннего доступа)

5. Webflow – Бесплатно или $16/мес (веб-приложение)

6. Adobe Photoshop – $20.99/мес или в составе Creative Cloud ($52.99/мес)

Другие инструменты, которые я использую в работе:

Подведем итоги

Инструменты для веб-дизайна — обзор программ и инструментов для дизайна сайтов

Базовые программы

Семейство Adobe

Sketch

Figma

Графика

Платные стоки

Бесплатные стоки

1. Pixabay

2. Unsplash

3. Freepik

Работа с цветом

Типографика, анимация и 3D

обзор 50 лучших на русском языке

Базовые программы

Банк графики

Конструктор логотипов и фавиконов

Работа с цветом

Работа со шрифтами

Завершающий этап

14 инструментов для веб-дизайна и веб-разработки на 2014 год / Habr

Для веб-дизайнеров

1. Adobe Creative Cloud

2. UI Faces

3. 0to255

4. Google Fonts

5. Samuel L. Ipsum

6. Responsive Sketch Pad

7. Macaw

Для веб-разработчиков

1. Coda 2

2. CSS Pre-processor

3. Front-end Framework

4. Browserstack

5. Pingdom

6. Chrome Developer Tools

7. MAMP Pro

Программы для веб-дизайнера Основы веб-дизайна

Adobe Photoshop

Sketch

Affinity Designer

Affinity Photo

Figma

Что выбрать?

Руководство по веб-дизайну для разработчиков / RUVDS.com corporate blog / Habr

Дизайн

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

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

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

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

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

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

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

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

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

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

▍Макет

▍Цвета

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

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

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

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

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

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

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

Итоги

9 интересных сервисов для веб-дизайнера. Специальная подборка / Pixli corporate blog / Habr

Выводы

Добавить комментарий Отменить ответ