Html — Ui design.


Содержание
Цукерберг рекомендует:  Как живет сообщество GeekUniversity

Dobrovoi Master

10 Бесплатных наборов элементов интерфейса с плоским дизайном

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

Использование плоских элементов интерфейса, незаметно, но уверенно так, перетекло в веб-дизайн с выходом на сцену Windows 8 и её довольно минималистичным стилем «Metro». Плоский дизайн с его минималистическим подходом, сосредоточен прежде всего на удобстве использования на различных типа пользовательских устройств, как на настольных ПК, так и на смартфонах с сенсорным управлением. Отличительной особенностью плоских дизайнов, являются четкие линии, двумерные объекты, яркие цвета, четко выделенные ссылки и шрифт текста без засечек. Дабы не отвлекать внимание пользователей от важных элементов, вся декоративная мишура, полностью отсутствует.

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

Прокачайте ваш дизайн в новом привлекательном стиле при помощи этих замечательных наборов элементов интерфейса.

1. Featherweight UI

Привлекательный комплект бесплатных элементов интерфейса от Sarah Hunt, качественно разработан на базе вектора и разделен на слои, бережно упакованные в PSD файл, все слои обозначены интуитивно-понятными названиями. Текст и цвета легко редактируются. В дизайне использовался шрифт Lato Normal , который можно использовать бесплатно из Google Web Fonts .

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

2. Modern Touch UI Kit

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

3. Vertical Infinity

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

4. Square UI Free

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

5. Flat Design UI Components

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

6. Metro Tiles UI Kit

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

7. Flat Rounded Square UI Kit

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

8. Flat Design UI Pack

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

9. Flatty

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

10. Bootflat 1.0.1

В завершение обзора, предлагаю на ваше рассмотрение, своего рода коллекцию HTML, CSS, JS и компонентов, для быстрой разработки интерфейсов веб-сайтов — «Bootflat», построенную на широко-известной платформе Twitter Bootstrap 3. Интуитивно понятный инструмент, включающий в себя легкие плагины и компоненты, но с богатыми функциями Bootstrap. Поддержка HTML5 и CSS3, отличная цветовая схема и стиль основанный на улучшенном стиле Bootstrap 3. Bootflat полностью адаптивна, а значит не возникнет проблем с отображением элементов на экранах всех типов пользовательских устройств. Все компоненты платформы легко расширяются и редактируются. Bootflat является проектом с открытым исходным кодом, так что смело используйте все его возможности без ограничений и создавайте свой собственный стиль.

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

Буду признателен, если поделитесь ссылкой на эту запись с друзьями или просто рядом с вами обитающими в своих соц-сетях:

You can save loads of development time by working with frontend UI kits. The most popular is Bootstrap although far too many homogeneous sites rely on that framework.

To give you some variety I’ve curated my pick of the best newer open source UI frameworks out there.

These all have their own unique styles and varying levels of support for dynamic components. But if you pair these frameworks with some JavaScript plugins you can build pretty much anything.

Unlimited Downloads: 500,000+ Wireframe Templates, UX Templates, UI Kits & Design Assets

1. UIKit

The UIKit framework is lightweight, easy to customize, and easy to append. It’s follows a modular structure where you’ll build page elements with reusable classes.

It’s perfect for structuring a new page without having to code your own grid or roll your own font stacks. This framework even comes with a unique icon set you can add into your page using a web font.

With UIKit you can run Sass or Less along with any package manager(usually npm).

Plus with a huge list of components you can embed anything from upload fields to breadcrumbs and so much more.

2. Foundation

Zurb’s Foundation library is right up there with Twitter’s Bootstrap. But it seems like Foundation gets less attention due to its less-stylized interface.

With Foundation you have access to custom interface elements, components, and a default grid. Everything you need to build a kick-ass frontend can be found in the Foundation library.

Take a peek at their showcase page if you want to learn more. It features a bunch of huge sites running Foundation with custom grids, responsive features, basically, everything you need in a new web project.

3. Milligram

For a minimalist approach to frontend development check out Milligram. This open source CSS library is super small and comes with a bunch of really simple interface features.

It works through Bower, Yarn, and npm so this can fit into any package management workflow.

Only trouble is that Milligram requires the Normalize library, so you do have to add that to your page. But if you have a CSS minifying tool you can easily combine the two libraries together and reduce your HTTP requests.

4. One-Nexus

Here’s a newer frontend library that actually offers some pretty crazy modules.

The One-Nexus framework is massive. It supports responsive design & touch devices, runs on Sass, and works with automated build tools. However, I do think this is one of the more complex frameworks to start with.


If you’re already familiar with frameworks and the command line then One-Nexus is truly awesome. It has so many modules it’ll make your head spin!

But it may take some time getting used to the setup & getting your initial layout configured just right.

5. Semantic UI

If you’re looking for a tested framework then check out Semantic UI. This is a beautiful frontend library currently in v2.2 with tons of features.

I consider Semantic like the unknown Bootstrap for frontend development. It’s not as popular with mainstream coders, but it has all the same benefits as Bootstrap.

The Semantic library includes buttons, tabs, dropdowns, everything you’d need. Plus is offers simple debugging and a bunch of awesome themes so you can customize your layout from the get-go.

6. Pure CSS

I’ve used Pure CSS on a few small projects and really enjoy it. This is one of the coolest frameworks because it lets you customize your files to include whichever features you need.

You’ll find more info on the getting started page which includes download links plus some setup guides.

Note that Pure’s aesthetics feel very minimalist, but not too simple. They mimic a little bit of Bootstrap along with some pointers from Google’s material design. A fun library to use for any project both personal and commercial.

7. Ink Interface Kit

With the Ink Interface Kit you can build some incredible responsive pages. They’ll look simple and follow a very simple code format, but that’s usually what you want in a frontend framework.

Ink even comes with its own JS library that you can run on top of vanilla JS. It’ll take some adjusting if you’ve never used Ink before. However, it’s a vast library comparable to jQuery in syntax.

This runs on Sass, works with semantic HTML, and feels just like any great frontend framework.

8. GroundworkCSS

I’ve yet to do much testing on GroundworkCSS but this is one hefty responsive framework.

Currently in version 2.x you can download the whole Groundwork library in two styles: basic HTML/CSS/JS or in a template for Ruby on Rails.

Both work the same, and they both provide a robust frontend system for coding usable pages.

Check out their demo layout to get an idea of how this’ll look in your site.

9. Materialize.css

Ever since Google announced their shift towards material design it’s become one of the biggest UI design languages. And while it was originally built for Android, it found its way onto the web with many frameworks like Materialize cloning the style.

The entire framework runs as you’d expect: fully responsive, standards compliant, and supports custom resets for all browsers.

Only difference is that your default elements take on the material design style.

And while this is probably my favorite material framework available, you can browse through others to see what else catches your eye.

10. Topcoat

When it comes to performance you can’t overlook the quality of your code. Topcoat takes this to heart as a framework with performance in mind.

It’s fully themeable and super easy to customize with easy-to-read HTML and CSS. Any edits you make will follow a clear structure with BEM naming conventions for CSS.

The real benefit with Topcoat is the load testing and focus on performance. Anyone who needs a custom layout that loads fast should look into Topcoat.

11. Petal

Petal is one of the newest CSS frameworks on the market. Again it’s fully responsive, 100% open source, and can hold up to any of other major framework in this list.

But it is pretty small and meant to stay that way. It’s based on the Less CSS preprocessor and does require Normalize too.

Ultimately this is a super small framework that should appeal to Less CSS devs. You can take a look at the online docs for code snippets and live examples of page elements too.

Weekly Newsletter

Join 40,000+ subscribers and get the latest design news and resources delivered directly to your inbox every week.

55+ Best Free HTML5 & CSS3 UI Kits Download

Creating a professional web design with advanced features is always the harder job. You must need to make it more unique to attract more clients around the world. These beautiful HTML5 & CSS3 UI Kits will help you to speed up the process. They will save your a lot of time that you can use to make your clients design more professional. If you want to make some changes in these UI Kits then you can do it easily by editing HTML & CSS3 files.

All you need to do is to simply copy and paste the codes into your design. You can give a new look and professional look to your designs by adding these HTML5 & CSS3 UI kits. These are most advanced and professional UI Kits that are used by millions of designers around the world. The beauty of their designs can be seen from the demo version. You can take a look on demo designs and if it really worth to use then you can use them.

Best Free HTML5 & CSS3 UI Kits

If you’re wondering about the colors of these HTML5 & CSS3 UI Kits then you don’t need to worry about anything. As you can easily change the colors of your website designs by just using hex codes. If you’re fan of PSD files then you may happy to know that some of these files contain extra PSD files that can be founded in these HTML5 & CSS3 UI Kits folders.

If these HTML5 & CSS3 UI Kits really help you to make your design professional then do let us know in the comments section and do share these quality designs with your friends and let them know about it.

Interactive Flat Design UI Kit

This is one of the best and attractive HTML5 & CSS3 UI Kit that comes with many advanced features. It help you to make your designs more creative and unique.

Flat Blog Magazine UI

If you’re going to create one simple website design then this HTML5 Magazine UI Kit is ideal choice for you.

Stylish Availity UI Kit

The Availity UIKit is derived from Bootstrap 3 and allows developers to create stunning web applications for the Availity Spaces platform.

Как стать крутым веб-дизайнером? Все по полочкам: UI/UX, Wireframing, правила хорошего тона, организация работы, вёрстка, самообучение

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


Часть первая: UX всему голова

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

UX — дисциплина, изучающая опыт взаимодействия пользователя с продуктом, восприятие и реакцию, возникающую в результате использования.

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

Давайте для начала посмотрим на картинку. Возможно, это будет для вас шокирующим откровением, но UX — это область, в которую входит как исследование и проектирование, так и визуализация и вёрстка. В результате работы над UX мы должны получить рабочий прототип. Если речь идео о веб-дизайне, таким прототипом является HTML вёрстка. Если взять и вытащить из телефона экран, мы можем увидеть кроме самого экранчика провода, подкладки, клеевые швы. Это и есть интерфейс. Хороший дизайнер разрабатывает интерфейс со всеми потрохами, включая вёрстку. В дальнейшем экран будет подключен к плате телефона (Back-end, PHP, Python, Ruby) или запрограммирован (Front-end, JS). Я понимаю, что кому-то от таких заявлений станет не по себе, особенно старым верстальщикам, для которых вёрстка — это целый мир, отдельная область знаний. Но давайте смотреть на разработку объективно и называть вещи своими именами. А реальность такова, что мы разрабатываем модель, которая в лучшем случае должна пройти тест, и это — ваша задача, как веб-дизайнера. Далее данная модель (HTML вёрстка) может быть непосредственно передана в Back-end разработку или, в случае, если это сложный проект, Front-end разработчику для написания JS кода приложения.

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

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

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

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

Мне неоднократно приходилось наблюдать, как не очень красивые визуально сайты и LP принсили огромные продажи и работали лучше любого заморского Flat интерфейса со стильными иконками и инфографикой. Да да, это были сайты с нелепыми градиентами, огромными кнопками, необработанными фото без ретуши и спрессованными текстовыми блоками. Но они работали. Чудо, скажите вы? Не думаю. Просто дизайнер, который рисовал такой сайт, провел исследование аудитории клиента, просто дизайнер умеет слушать и понимать реальные потребности пользователей продукта, хоть и не обладает особым визуальным вкусом. Или случайно угадал верное направление. Если вы хотите стать по-настоящему крутым веб дизайнером, вы должны иметь 2 блестящие, отполированные стороны одной медали — с одной стороны, вы должны стать хорошим UX специалистом, с другой, вы должны развивать чувство вкуса, чтобы ваши интерфейсы были не только функциональны, но ещё и привлекательны — это UI. Если говорить о том, какой дизайнер лучше — тот, кто рисует с учётом пользовательского опыта, но не красиво или тот, кто рисует изумительные аккуратне интерфейсы, но абсолютно не вникает в проблемы человека, то, однозначно, первый выигрывает. И это понятно, ведь больше денег и клиентов принесет бизнесу именно первый, если говорить простым языком.

Мое скромное мнение: дизайн перестанет существовать ради визуального дизайна, Web 3.0 — это эпоха UX, повышения информативности и удобства.

Задачи UX

Постепенно переходим от теории к практике. Какие же задачи позволяет решить UX?

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

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

Часть вторая: Исследование

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

Вы должны чётко понимать, ПОЧЕМУ вы создаёте именно такую секцию, именно такие элементы, именно такой порядок на Web странице. Все ваши действия должны быть подкреплены железобетонным основанием. Довольно странно будет звучать объяснение на вопрос «Почему здесь эти круглешочки?» в виде — «Потому, что я где-то увидел такие и решил данную форму применить под ваш выдуманный контент, так как у меня не работает фантазия». Странно, не правда ли?

Right Way — исследование. Исследование — это самый первый шаг дизайнера при работе над любым проектом. Нужно чётко вывести группу пользователей, максимально узнать аудиторию, под которую вы разрабатываете интерфейс, узнать потребности этой аудитории. Конечно, основываясь только на своем личном опыте и своих ощущениях довольно сложно прийти к объективно правильному решению в интерфейсе, ведь вы не беспристрастны по отношению к результату вашего творчества и ваш личный опыт относительно конкретного продукта может быть весьма ограниченным. Тем не менее, если вы хорошо изучили продукт, для которого делаете дизайн сайта, то можете сделать какие-то выводы, принять решения. Самый минимум, который вы просто обязаны сделать, если вы фриансер, работаете один и у вас нет своей команды UX специалистов — изучить текущий опыт бизнеса, накидать портрет среднего потребителя продукта. Например, если вы создаёте посадочную страницу для продажи сельскохозяйственной техники, скорее всего, потенциальные клиенты не ищут особых изысков в визуальном исполнении сайта, их более интересуют каталог продукции, фотографии, сроки и способы дставки именно в их регион, цены и возможные скидки. Последний пункт говорит о том, что проектирование UX очень тесно связано с бизнесом. Это то, о чём обычно не говорят веб-дизайнеры, но думают все.

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

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

Наименование персоны Что ценят в первую очередь? Каковы цели посетителей?
Трактористка Глаша
  • Сроки постаки (не опоздать на посев)
  • Удобство доставки в регион (жд, авто, авиа)
  • Качество оборудования (чтобы не сломалось посреди поля)
  • Простота подключения (консультации по сложному агрегату)
  • Максимально быстро внедрить подходящее оборудование в производство
Персона #2 . .
Персона #3 . .

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

Часть третья: Wireframing, каркасное моделирование

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

Для создания каркаса можно воспользоваться специальным приложением или нарисовать от руки на бумаге в клеточку или в точечку, после чего отсканировать и положить в папку с материалами проекта. Я обычно использую онлайн приложение wireframe.cc, так как можно в реальном времени вносить правки и согласовывать с клиентом. Но иногда и прорабатываю структуру страниц на бумаге, если лень садиться за комп.

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

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

Часть четвертая: UI, визуализация

После того, как вы основательно проработали UX, создали несколько каркасов и выбрали наиболее привлекательные варианты, можно приступать к визуализации. Визуализация — это прорисовка каркасов, создание единого стиля, оформление контента. Другими словами, мы начинаем работать над UI. Чаще всего для визуализации используется Adobe Photoshop, Sketch.app, Inkscape+Gimp или другие инструменты. Я советую использовать Adobe XD для визуализации и проработки интерактивного графического прототипа. В дальнейшем в наших уроках мы будем использовать только этот инструмент для создания дизайна, так как здесь можно сразу сделать визуализацию и показать, как будет происходить движение пользователей по страницам. Для работы с векторной графикой я использую Inkscape — здесь я создаю иконки и другую необходимую графику, для работы с растровой графикой — лучшее решение, это Adobe Photoshop.

Правила хорошего тона

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

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

Типографика, текст, ссылки

  • Не используйте слишком большие заголовки;
  • Не используйте шрифт меньше 12px;
  • Не делайте слишком маленький или слишком большой межстрочный интервал;
  • Не растягивайте буквы инструментом «Transform», шрифт должен быть естественно пропорциональным;
  • Не используйте больше 3 шрифтов на странице;
  • Не используйте слишком маленький контраст, не печайтайте светло-серым по белому или тёмно-серым по чёрному;
  • Используйте интервал между символами с осторожностью если знаете, что делаете и выбранный шрифт позволяет сделать текст «воздушным» наиболее элегантно;
  • Не делайте слишком маленьких отступов между абзацами, заголовками и элементами, дайте воздуха дизайну;
  • Не используйте капс без необходимости;
  • Не используйте для основных текстовых блоков слишком сложный декоративный шрифт, это должен быть простой и легкочитаемый шрифт какого-либо семейства Sans или Serif (Serif и Slab — если вы знаете, что делаете);
  • Все ссылки, за исключением пунктов навигации, должны быть подчеркнуты. Старайтесь также оформлять ссылки, которые уже были посещены, более темным цветом, в отличие от дефолтного цвета ссылок;
  • Если иерархия сайта содержит более 3-х уровней, не забывайте о хлебных крошках.

  • Графика, иконки, фотографии

    • Не используйте в дизайне шаблонные фотографии. Лучше сделать самостоятельно, порекомендовать заказчику обратиться к фотографу или найти наиболее «жизненные» фотографии;
    • Не используйте иконки, сделанные из фотографий;
    • Все иконки должны быть выполнены в едином стиле;
    • Не увеличивайте фотографию больше ее оригинального размера;
    • Не масштабируйте графику непропорционально;
    • Не применяйте режимы наложения слоев, отличные от обычного (Normal);
    • Старайтесь не применять фильтры на изображения, которые должны иметь несколько состояний (обычно и при наведении, например). Все наложения, изменения — только посредством наложения нового слоя. Всё должно быть легко воспроизведено в HTML верстке. К ретуши и подготовке фото это не относится;
    • Не масштабируйте фотографию до конвертации в смарт объект;
    • Обрезайте фотографию только посредством обтравочной маски для фигуры, оригинал фотографии, как и в предыдущем пункте, должен быть сохранен в смарт объект;
    • Если вы рисуете иконки в Photoshop, не растрируйте их в уменьшенном размере. Не забывайте, что макету еще предстоит этап верстки и все иконки необходимо будет векторизовать. Оригинальные смарт объекты с иконками должны быть достаточно крупными для качественной трассировки;
    • В идеале, у вас должны быть все плоские иконки и графика в формате SVG, в отдельной папке. Если вы ленивый дизайнер — предусмотрите возможнсть качественной конвертации или экспорта иконок в SVG;
    • Не используйте чистые цвета, обязательно старайтесь добиться наиболее приятного оттенка;
    • Не используйте более 2-х акцентных цветов на странице и не более двух темно-серых (или черного) цветов для текста. В идеале — только 1 акцентный цвет и 1 темно-серый/черный для текста. Я использую цвета 111111 — 222222 для основного шрифта на светлом фоне;
    • Старайтесь закрашивать акцентным цветом только те элементы, которые наиболее важны на странице, акцентируйте на них внимание. Это кнопки, стрелочки, галочки важных пунктов, текстовые ссылки, информативные иконки (мелкие иконки типа «логин», «пароль», «почта» и иконки в формах акцентировать не обязательно);
  • Правила работы в графическом редакторе, организация работы и прочее

    • Называйте слои со смыслом;
    • Старайтесь упорядочивать смысловые блоки и составные элементы интерфейса в группы;
    • Всегда создавайте отдельную папку со всеми используемыми шрифтами в формате TTF или OTF. Иконочные шрифты также должны быть размещены в этой папке;
    • Создавайте макеты 1 в 1 (72 пикс. на дюйм). При 100% отображении макеты должны быть в таком же масштабе, в котором предполагается результат HTML верстки;
    • Обязательно используйте в работе какую-либо систему сеток. Можно разработать самому, но я рекомендую использовать систему сеток Bootstrap. Ширину контента можно кастомиировать от оригинальной ширины Bootstrap сетки, для этого можно использовать плагины для создания сеток в случае, если вы пользователь Photoshop;
    • Не создавайте декоративные элементы, если в этом нет практического смысла. Если это имиджевый сайт и нужна красивая картинка, данное правило можно опустить;
    • Придерживайтесь смысловой визуальной иерархии. Почитать про визуальную иерархию;
    • Используйте правило «внутреннего и внешнего», которое гласит, что расстояния между внутренними элементами блоков должны быть меньше, чем внешнее расстояние между блоками;
    • Не забывайте, что люди чаще всего приходят не на главную страницу сайта, а на внутренние, поэтому продумайте информативные универсальные блоки — шапку, подвал, сайдбары (если есть). Шапка должна быть максимально информативной, но не перенасыщенной. Обязательные элементы: Лого, название проекта, навигация. Поиск по сайту и другие элементы размещаются в зависимости от проекта.
    • Хорошее решение — размещение в футере развернутой навигации или карты сайта со всеми потаенными местами. Футер или подвал — это вообще отдельная тема, достойная отдельной статьи. Постарайтесь продумать подвал до мелочей, старайтесь не делать скудных узких подвалов с логотипом и номером телефона. Здесь опять-же, завист от проекта, но чаще всего футер лучше делать высоким и развернутым. Я очень часто нахожу нужную потаенную информацию именно в подвале и мне нравятся высокие и продуманные подвалы. Не думал, что скажу такое о подвалах.
  • Мы рассмотрели основные утверждения, кторые можно назвать правилами. Давайте теперь рассмотрим самые распространенные мифы веб-дизайна, которые были для кого-то правилами и даже руководством к действию, но сейчас уже не используются профессионалами.

    Мифы веб-дизайна

    • Правило трех кликов. Миф. Если пользователь заинтересовался информацией на главной странице, он сделает сколько угодно кликов для того, чтобы добиться цели. Нам просто нужно ему в этом немного помочь — правильно разместить указатели в навигации на нужный материал. Навигация должна быть простой и понятной;
    • Слайдер контента — это хорошее решение. Весьма спорное утверждение. Я очень часто использовал в качестве формы для вывода контента слайдеры, но есть исследования, подтверждающие, что их мало кто листает и что-то мне подсказывает, что это действительно так. Возможно, в ближайшем будущем эффективность слайдеров контента станет мифом;
    • Чтобы сделать качественный дизайн, нужно много работать. Миф. Правильно определив аудиторию, достаточно одной удачной картинки, заголовка и блока текста, чтобы пользователь искренне заинтересовался продуктом. Встречаются ситуации, когда веб-дизайнер вынужден пичкать что попало в интерфейс (куча секций с CTA, таймеры обратного отсчета, заезженные призывы к действию) по требованию заказчика с обвинениями в том, что дизайнер мало поработал. Это смешно и нелепо. К сожалению, это повсеместная особенность владельцев бизнеса и нужно просто уметь грамотно объяснять, что в веб дизайне правило «чем больше, тем лучше» не работает;
    • Дизайн должен быть оригинальным. Это, конечно, хорошо, если у вас есть месяц в запасе, а у клиента толстый кошелек. Но зачастую все не так. Можно потратить бешеные деньги и время на уникальные иллюстрации, оформление, но прийти к тому-же результату, как если бы таких возможностей не было. Проработайте UX и для отличного результата подобные траты времени и денег будут излишни. Зачастую, пользователи, привыкшие к определенному расположению универсальных блоков (шапка с навигацией, подвал) сбиваются с толку, посещая сайты, где всё «оригинально и необычно». Придерживайтесь стандартов в вебе и вам не придется изобретать велосипец. Кроме того, у стартапов зачастую нет ни времени ни средств для экспериментов. Я считаю, что можно сделать лаконичный дизайн с изюмикой, который будет действительно работать и приносить клиентов, не прибегая к визуальным изыскам.


    Часть пятая: Верстка

    Я считаю, что веб-дизайнер должен уметь верстать. Хотя наверняка найдется много ленивых коллег, которые со мной не согласятся. Обратите внимание, мой канал называется WebDesign Master и даже когда я начинал записывать уроки, довольно четко представлял, что такое веб-дизайн и что в него входит. Конечно, что-то поменялось, что-то осталось неизменным, но я все больше и больше убеждаюсь в том, что такое мировозрение весьма объективно.

    Я не силен во Front-end, ведь настоящий Front-end — это глубокий JavaScript, разработка сложной логики интерфейсов для крупных и серьезных проектов. У меня другой склад ума — не программиста, а дизайнера, поэтому принуждать себя к области, которая не нравится смысла не вижу. Но я всегда смогу «оживить» свой дизайн и сделать рабочий HTML прототип на достаточно высоком уровне, если потребуется. И это довольно шикарная опция для веб-дизайнера, ведь ваш ценник, как специалиста, поднимается, как минимум, вдвое. Не стоит бояться осваивать новые горизонты. Верстка — это не сложно.

    Если вы хотите освоить верстку и базовые навыки Front-end разработчика, советую:

    Материала по HTML верстке более, чем достаточно, поэтому с версткой всё.

    Часть шестая: Самообучение и саморазвитие

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

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

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

    1. Постоянно изучайте работы на ThemeForest — это кладезь современного веб-дизайна. Пытайтесь применить какие-то привлекательные формы отображения контента в ваших работах, но не увлекайтесь и не забывайте о базе — UX, все должно быть в тему;
    2. Будьте постоянным посетителем awwwards.com и смотрите крутые работы, чтобы не расслабляться ;-)
    3. Также, для развития чувства вкуса будет полезно периодически изучать хоршие работы на behance.net. Выделяйте время для того, чтобы практиковаться — повторяйте понравившиеся работы на практике в графическом редакторе, но ни в коем случае не публикуйте свои копии где бы то ни было. Это нужно только для практики и саморазвития;
    4. Критикуйте рекламу на улицах вашего города и думайте, как можно сделать лучше;
    5. Критикуйте UX на улицах и также, думайте, как многие вещи можно было бы сдлать удобнее. Благо, у нас на постсоветском пространстве есть место, где разгуляться на этот счет. Думайте о людях, думайте как люди.

    Премиум уроки от WebDesign Master

    Создание контентного сайта на Jekyll от А до Я

    Создание современного интернет-магазина от А до Я

    11 полезных и бесплатных наборов CSS для UI

    Ранее мы уже представляли вам множество наборов для пользовательских интерфейсов (UI) для дизайнеров, но на нашем ресурсе редко можно было встретить комплексные UI-наборы, разработанные при помощи CSS. Это именно то, за чем гоняются многие дизайнеры. Итак, сегодня мы хотим поделиться с вами 11 бесплатными наборами для UI, разработанных при помощи CSS. В этих наборах вам будут представлены многие важные элементы UI. Эти наборы и представленные в них элементы представляют собой ресурсы, которые понадобятся вам при разработке собственных прототипов. Надеемся, что данная подборка окажется вам полезной.

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

    Gumby Framework предлагает вам огромные кнопки, навигацию и другие наборы UI на CSS, которые довольно просто применить в деле.

    ui.css представляет собой инструмент для создания опрятных пользовательских интерфейсов для сайта. Архив включает в себя css-файл со стилями для всех элементов, включая положения hover и :active.

    Этот набор элементов был разработан и вручную написан с нуля на HTML5, и в нем используются современные CSS3-технологии. Здесь вы можете видеть все необходимые элементы пользовательского интерфейса, а также стэки шрифтов, которые будут великолепно смотреться в современных браузерах, и предоставят вам отличный запасной вариант для Internet Explorer.

    Здесь мы представляем вам набор UI, полностью разработанный при помощи CSS3. Он включает в себя все, начиная от строк поиска, чекбоксов, заканчивая радио-кнопками и многим другим! Для всех элементов представлен необходимый код!

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

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

    Огромный спектр элементов UI, разработанных на практически чистом CSS. Только одно изображение (стрелка выпадающего меню) – никакого javascript, никакой дополнительной разметки.

    Metro UI CSS – это набор стилей для создания сайта с интерфейсом, схожим с Windows 8 Metro UI. Данный набор стилей был разработан в форме отдельного дизайн-решения.

    Вам понравился материал? Поблагодарить легко!
    Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

    Кейсы: разработка спецификаций и гайдлайнов (web ui kit)

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

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

    А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken

    В первой главе я забыл упомянуть, что нужно было действовать исходя из утвержденной цветовой схемы. Задача придумать и предложить новые цвета не стояла. Для выбора цвета иногда использую Adobe Color CC (потребуется (!) авторизация) или ColorScheme.ru. Вставляю код основного цвета, а дальше подбираю к нему оттенки в разных режимах: аналоговый, монохромный, триада и т.д. Очень сильные и гармоничные контрасты можно подобрать, например, в режиме триады. Это я к тому, что мне было откуда почерпнуть гамму оптимальнее, но не было таких пожеланий.

    К шрифту Open Sans, который использовался в текущей версии сайта, у меня тоже возникали вопросы. Кажется, он всё реже встречается в повседневном мире. Сейчас актуальны: Helvetica, Lato, Source Sans Pro, Roboto и т.п… Но это вопрос, оказывается, был в стадии переосмысления маркетологами.

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

    Гайдлайны

    Гайдлайны — это свод правил и/или рекомендаций для формирования внешнего вида продукта. Их формирует дизайнер и в понятном виде описывает для разработчиков. С одной стороны это приговор для первого, т.к. в будущем новые разделы продукта можно визуализировать и без дизайнера, опираясь на графический документ. С другой стороны, в наши дни дополнение работы дизайнера интерфейсов такой документации уже — is a must, сейчас планка находится достаточно высоко. Итак гайдлайны — это рекомендации по: цветам, шрифтам, элементам, состояниям, иконографике, размерам и отступам.

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

    1/15: Шрифт Circe

    Важная новость от команды маркетологов на старте: уходим от Open Sans и берём в качестве основного шрифт Circe.

    Если говорить своими словами: шрифт нетрадиционный для веба, по начертанию ближе к типографскому, имеет в себе “литературное звучание”. Это чисто мои ассоциации. Если сравнивать Open Sans и Circe, то последний немного выигрывает по плотности

    Окей, новый шрифт утверждён. Пожелания по скруглению углов от маркетологов: использовать 6px радиус. Договорились, учту! (кстати, достаточно редкое в моей практике пожелание). Можно начинать проработку всех элементов.

    2/15: Цвета

    Палитра в центре — это поступившая схема от клиента. Цветовая схема слева: я чуть осветлил зелёный (он пригодится нам для онховеров) и разместил его рядом с белым. Так можно приблизительно представить как будет смотреться типовая карточка в дизайне. Оттенки справа — это пример визуализации зеленого рядом с контрастным чёрным. Острой необходимости в таком использовании не предвиделось, это скорее сделано для разнообразия. Общий фон как сайта, так и данного ui kit’a остаётся #EFEFEF (светло-серый), это позволит избежать сильной контрастности на мобильных устройствах.

    3/15: Типографика

    Это рекомендации по использованию размерности текста. Я отрисовал абзац текста, внедрил в него цитату. Сделал несколько типов заголовков. И добавил обычный и пронумерованный списки. Пример scroll bar’a тоже тут, он был добавлен позднее. На самом деле, данные правила текста не обязательно должны быть жёсткими. Если нужно нанести абзац текста мелким 14px шрифтом — да пожалуйста. Главное — соблюдать пропорциональность текста. Например абзац текста мелким шрифтом смотрелся бы странно с крупным заголовком “Оглавление”.

    4/15: Ссылки

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

    5/15: Кнопки

    В данном разделе надо учесть все возможные состояния кнопок и проработать их. Я разделяю типы кнопок на основную “primary” и вторичную “secondary” (или как еще их называют ghost button). По логике основная кнопка ведёт к приоритетному действию, а вторичная кнопка ведёт на экшн, который мы меньше хотим от пользователя. Снова дизайн-манипуляция. Вот пример такого использования:

    Сейчас теории Google Material Design активно используются в дизайне, поэтому в наши дни многие кнопки вновь стали выглядеть как кнопки. К дизайну интерфейсов стали применять некоторую физику из реального мира. Кнопка в обычном состоянии имеет небольшую тень; при наведении мыши тень становится больше и более размытая — кнопка “приподнимается” выше; при клике эта тень исчезает, имитируя “нажатость” кнопки. Вот такая псевдотрёхмерность, которая чуть больше связывает дизайн с реальным миром. Насколько я помню, это пришло из гайдлайнов приложений для smart tv, где пользователи сидят в определенном диапазоне удалённости от телевизора и там жизненно важно использование заметных теней с большим коэффициентом размытия. Это заметно облегчает восприятие происходящего.


    6/15: Ввод текста

    Если референсировать опять-таки на GMD, то можно заметить, что тенденция использования таких инпутов:

    Всё чаще встречается и в web-продуктах. Если Вы предпочитаете Android, разбираетесь или работаете в сфере IT, то с такими инпутами Вы как “рыба в воде”. Но для женской аудитории, которая в основном предпочитает iPhone, такая аскетичная стилистика для элементов ввода текста — скорее боль. Я попытался найти золотую середину и предложил дизайн, когда инпут всё-таки остаётся инпутом, но и имеет некторые корни GMD:

    Любая форма ввода снизу имеет тень-подчёркивание 1px без размытия. При наведении мыши она зеленеет; при клике она утолщается и зеленеет, демонстрируя состояние in action. Иконка карандаша справа — это экспериментальные попытки добавить “излишней понятности”. В некоторых случаях эта иконка может усиливать смысл: обычный инпут — карандаш; поисковый инпут — лупа; инпут ввода пароля — иконка замка, например; и так далее. Пример будет ближе к концу этой статьи.

    7/15: Выпадающие списки

    Их принципы отклика выполняются в том же ключе, что и инпуты. При наведении мыши меняется цвет иконки и нижнее подчёркивание. При развороте выпадающего списка появляется более объемная тень всё так же “приподнимая” выше элемент в плоскости. Если подходить к делу с должным вниманием, то стоит подумать и о развёрнутом состоянии. Иконка переворачивается, активная строка выделяется bold’ом, а при onhover’e подкрашиваем фон светлым оттенком основного зеленого цвета.

    8/15: Слайдеры

    С ними всё предельно прозрачно. Ничего нового тут не изобретаю, стандартный компонент по аналогии оформляется в соответствии с гайдами: шрифты, цвета и размерности. Ползунок можно переместить как drag’ом мыши, так и кликнув в числовое значение, например, когда предлагается указать возраст ребёнка “от” и “до”.

    9/15: Табы / вкладки

    “- Да всё понятно, дальше давай!”

    10/15: Элементы выбора

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

    11/15: Таблица

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

    12/15: Иконографика

    Рекомендации и примеры использования иконок. Я считаю, что интенсивные и заметные иконки GMD поставили эволюцию иконографики в тупик. Когда-то были пиксельные, потом выпуклые, где-то между ними в тренд вошли ios-овские обведенные (outline), рядом ненадолго мелькнул цветной flat-стиль (помните, когда бесконечная псевдо-тень тянулась под углом от объекта?). А потом пришёл Google и заявил как надо делать. И если не уходить глубоко в лирику, то я использую только иконки GMD последнее время за свою многофункциональность и производительность. Много метафор от независимых дизайнеров иконок можете брать тут (free, отдают все размеры, png/svg/zip, hint: удобно кликнуть правой кнопкой мыши и скачать нужный размер). Считаю, что интенсивные иконки более понятны и заметны (и тут должен быть референс на знаки ПДД).

    13/15: Карточки

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

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

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

    14/15: Вход в систему

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

    15/15: Спецификации

    Они находятся в отдельной группе в исходнике. Группу можно сделать видимой и спексы отрисуются. Без них данный user interface kit был бы неполноценным. Соблюдения пропорций размерности и отступов ведёт к сбалансированному интерфейсу. Если я не дам инструкций на этот счёт, то появляется риск, что это будет сделано иначе. И тогда я не смогу гарантировать качественную реализацию.

    Если Вы предпочитаете 8px сетку, то стоит учитывать, что все отступы кратные 8; если используете 10px сетку, как в моём случае, то Вы не найдёте в этом дизайне расстояний между элементами в 13 или 27px, все отступы будут кратны 10-ти.

    Правила существуют и для количества цветов и их оттенков: я не использовал слишком много оттенков серого, например — их вышло не более трёх в данном наборе. Я уверен, с такими собственными правилами интерфейса проще и дизайнерам, и разработчикам. Хотя тут бывают исключения, если система выдаёт обратную связь разными состояниями, то могут потребоваться и красный, и голубой, и т.п. для усиления смыслового различия (например для попап-уведомлений).

    Заключение главы

    • Графическая документация по гайдлайнам — это визуальный язык для разработчиков, чтобы продолжать развитие продукта и не привлекать дизайнера лишний раз.
    • Набор гайдлайнов может разрабатываться с учётом целей будущего продукта. Шрифты, цвета и общая стилистика могут учитывать специфику будущих пользователей ресурса/приложения.
    • Для оптимизации взаимодействия гайдлайны должны содержать рекомендации по размерностям элементов и отступам.
    • Желательно, но не обязательно, чтобы набор также включал в себя примеры готовых решений. Это может быть корзина покупателя, страница товара, френдлента, карточки, лендинг и т.п.
    • Современный подход — это возвращать клиенту не sketch/psd файл, а отдавать html/css код. Я некоторое время назад полностью перешёл в Axure, и он справляется с этой задачей достаточно эффективно.

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

    1. Jan Losert очень крутой, его UI overview для Tapdaq просто идеален
    2. Mateusz Dembek хоть и мельчит немного, но всё равно классно оформил Deskmetrics Ui Style Guide
    3. Greg Dlubacz взял и сделал сильную dark-выворотку с элементами dashboard | и оформил в светлой гамме Retail Banking Service
    4. Cupi Wong не так обширно, но стильно оформил гайды AfterShip
    5. Jeremy Sallée всё очень подробно описывает о дизайне в Nutanix Product Guideline

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

    Читают сейчас

    Похожие публикации

    • 1 июля 2015 в 09:46

    Осторожно, Modern UI

    Flat UI — бесплатный набор плоских элементов веб-интерфейса [обновлено]

    Использование usability gu > +62 9,4k 94 36

    Вакансии

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Комментарии 34

    Circe хороший шрифт и популярность его растёт, хотя лично мне кажется сомнительным его применение на экране в мелких кеглях.

    Но я другое хотел узнать — а «команда маркетологов» точно в курсе, сколько он стоит?

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

    Circle весит под 400кб за один тип. А таких нужно использовать минимум 2, тонкий и жирный (дополнительные на усмотрение). Это же заставляет людей скачивать аж лишний мегабайт… два.

    Учитывая наличие огромного количества фотографий… Жестокие вы люди.

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

    Простите если задел, серьезно. Но Хабр — это не личный бложек и не ваша рекламная страничка с портфолио. Тут принято делиться чем-то полезным. В данном же случае я вижу пример того, как делать НЕ надо. А именно:


    • В современных адаптивных интерфейсах никаких ховеров быть не должно. Догадываетесь почему?
    • Шрифт Circe — ужасный выбор для набора блоков текста. Для заголовков — может быть, но тоже «не фонтан». И это не вкусовщина, его просто мучительно читать, такая уж у него структура символов.
    • У всех активных элементов должна быть очевидная «область контакта», достаточная по размеру для попадания в нее пальцем средней толщины. Это не касается только гиперссылок, но таковые могут иметь место только внутри текстовых блоков (как часть текста) и они не должны являться частью основной навигации (использовать на крайний случай, с пинч-ту-зумом).
    • Ваш визуальный язык общения с пользователем, по возможности, не должен содержать синонимов (минимализм рулит). Не стоит заставлять пользователя изучать разные виды контролов, которые делают одно и то-же — от этого интерфейс кажется сложнее чем он есть на самом деле (а мамаш легко напугать сложным интерфейсом, поверьте). Выберите что-то одно. К примеру, либо чекбоксы, либо тогглеры. У переключателей «on/off» есть своя специфика взаимоотношений с их лейблами, это довольно капризный элемент, без особой необходимости лучше его вообще не использовать.
    • Как будут выглядеть карточки, если «Имя» с «Фамилией» на них разрастается на две строки, а заголовок — на три? Такие карточки вообще работают только на статичном макете, в реальности они станут проблемой при подборе иллюстраций (замучаетесь кадрировать) и текст на них будет обрываться на самом неприличном месте (для выравнивания по высоте).
    • Чередование однопиксельных рамок со скругленными краями и с прямыми — выглядит беспорядочно.
    • Понимаю, что цвета подбирали не вы, но UX-дизайнер должен отстаивать принципы, а именно — достаточный уровень контрастов (минимальный и максимальный).
    • Таблицы без вертикальных разделителей ячеек должны иметь большие отступы между ячейками, поэтому их трудно сделать компактными и поэтому лучше так вообще не делать, если ячеек по горизонтали больше двух.
    • Помимо разрозненных UI-элементов в гайдлайне должны присутствовать принципы их взаимодействия: правила выбора элементов, построения тулбаров, группировки в блоки, вложенности блоков и т. д. Примеров выборочного применения шагов сетки для этого недостаточно. Почитайте гайды от ведущих вендоров: они все делают упор на это.
    • И нужно убрать все рамки и подчеркивания у элементов с заливкой на сером фоне, от них общая картина выглядит грязно. Если элемент без заливки — хорошо бы избавиться от прямых контактов серого с зеленым (болото и тоска). Так, при сохранении общей палитры, картинка будет куда аккуратнее.

    Font Sizes in UI Design: The Complete Gu > Erik D. Kennedy В·В Apr 23, 2020

    One of the most common questions I receive from beginning UI designers is: what font size should I use for my project? Maybe it’s a website, maybe an Android app, maybe iPhone/iPad.

    Ever wish someone had compiled all the rules in one place?

    If you have, dear reader, bookmark the crap out of this page. These are up-to-date (2020) guidelines and best practices for font sizes across all major platforms – iOS 12, Android/Material Design, and responsive web. Here’s a handy table of contents for ya:

    Material Design –
    Mobile

    Material Design –
    Desktop

    (As you browse this guide, you can also navigate via the handy sidebar navigation!)

    One Central Resource

    Material Design has nice guidelines, but they’re like 50 pages long. iOS… well, they don’t even have nice guidelines! And the web is (still) the wild west. Someone tells you to use a typescale based on the golden ratio, and… is this even going to HELP me!? (Short answer: no)

    Three different platforms, three different sets of concerns, and two opposing design languages to follow?

    Yeah, not anymore.

    You can browse this guide by platform, or, for a deeper look into the larger rules at play when it comes to picking type sizes, check out the Principles & Resources section at the end (That section also covers a list of useful typography-related sites).

    Px, pt, sp, and dp: Explained!

    The proliferation of HD screens has wreaked absolute havoc on designer terminology. “Pixel” now means about 3 different things – and now there are “points” and “scaleable pixels” and “density-independent pixels” to worry about too! As a designer, here’s the most important thing to know:

    The Number to Type Into the Box

    Whether you’re using Sketch, Figma, Adobe XD, etc, you’re specifying a font size by typing a number into a textbox. In this guide, I will always give you the number you type into the box. It doesn’t matter if the unit is called “pixels” or “points” or whatever – just type it into the box in Sketch, and the font size will work OK.

    (There is one caveat here – you need to design @1x. If you don’t know what that means, don’t worry – you probably aren’t violating it)

    What is a Pixel?

    “Pixel” is an overloaded term. It can refer to the smallest possible square of light on a screen. Or it can refer to the smallest possible square of light that you can turn on in software on a screen (Yes, those things are sometimes different). Or it can refer to a unit of measurement in websites.

    For the sake of clarity, this gu >font-size: 16px .

    What is a Point?

    A point (“pt”) is Apple’s special term for “the number to type into the box”, so in the iOS chapter, I will speak in points.

    A “point” is a nice unit for designers, because on the hardware level, sometimes one point becomes four hardware pixels (e.g. starting with iPhone 4) – or even nine (e.g. starting with iPhone X) – or, in an awful offense against all that is good and holy in the world, sometimes it becomes nine software pixels, but is then squished into 6.81 device pixels, and a crapload of aliasing is done to display even the simplest straight line. Dang it, iPhone 6+, 7+, and 8+. You’re ruining all our fun.

    Fortunately, as a designer, you basically only need to think about pts, because that’s what you type into the box. Cool? Good.

    What is a dp? What is an sp?

    As if it wasn’t bad enough, Google had to go and coin not one but two new units. Both “dp”, or “density-independent pixel”, and “sp”, or “scaleable pixel” are basically the same as a “pt”, but for Android. The only difference between “sp” and “dp” is that “sp” is for measuring font sizes, and “dp” is for measuring everything else.

    Why use two separate units there? Well, if a user is old and blind and sets their phone’s font size preferences to be 4x bigger than their grandkid’s, you can still refer to those font sizes as the same size in “sp”.

    One detail about the definition of “dp” and “sp” vs. “pt” is – and this does NOT affect us in practice — Android wants a dp to be the same size across every device, so it’s actually locked at 1/160th of an inch. Of course, presuming the same font size user setting, the same could be said about “sp” – it’s 1/160th of an inch. The same cannot be said of iPhones – a “pt” on iPhone X is approximately 1/152nd of an inch. However, point on iPhone 8 is 1/163rd of an inch.

    The more you know, eh? Don’t think to hard about it. For Android apps, just type “dp” into the box and call it a day.

    Что такое UX/UI дизайн, или как сделать посетителю сайта приятно

    Привет, дорогой читатель! Вы наверняка встречали в статьях загадочные аббревиатуры UX и UI дизайн, но возможно, не вникали в смысл. На самом деле в этих буквах нет ничего сложного. Сегодня расскажем, что такое UX/UI дизайн простыми словами, кто этим занимается и как не перепутать эти понятия. Начали!

    Что такое UX-дизайн?

    Термин UX впервые появился в 1993 году в компании Apple. Аббревиатура означает User eXperience, или “пользовательский опыт”. То есть UX-дизайн — это работа, направленная на эффективное взаимодействие пользователя с интерфейсом сайта, мобильного приложения или любой компьютерной программы. Проще говоря, UX-дизайн нужен, чтобы пользователю было удобно и приятно. Ведь если это не так, человек вряд ли будет залезать в дебри структуры ресурса — просто покинет его и уйдет. А вы потеряете прибыль и лиды.

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

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

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

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

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

    Кто такой UX-дизайнер?

    Человек, который все это делает. А именно:

    • прорабатывает цели и задачи клиента и определяет, как их можно достичь (например, привлечь трафик, увеличить продажи, количество клиентов). Внимание заказчику! Чтобы исполнитель лучше понял, что вам нужно, составьте ТЗ для веб-дизайнера. Расскажите, для чего создается сайт, какие продукты вы собираетесь реализовывать, на какую целевую аудиторию рассчитываете. В ответ хороший дизайнер также пришлет вам ТЗ, где распишет свое видение будущего сайта: общую структуру, детальную проработку каждой страницы, дизайн сайта, место для рекламных баннеров и виджетов обратной связи, интерактивные элементы — кнопки корзины, иконки, и их расположение и многое другое;
    • подбирает подходящие UX-инструменты, которые помогут в создании дизайна. Обычно это специальные сервисы и программы, заточенные конкретно под каждый элемент дизайна. Например, Perfect Icons – инструмент для создания иконок соцсетей, который можно применить и в обычной, и в мобильной версии. Или Flat UI Color Picker – инструмент для создания цветовых нюансов будущего сайта. Заказчику не обязательно вникать в эти инструменты, главное — получившийся результат;
    • разрабатывает UX-дизайн прототипа (эскиза, наброска) сайта, опираясь на собственные знания и опыт, пожелания заказчика и возможности инструментов. Лучше составить несколько вариантов и потом сравнить их;
    • далее дизайнер проектирует взаимодействие и тестирует продукт на соответствие тому самому “пользовательскому опыту”- продумывает, как посетитель будет пользоваться сайтом. Для этого составляются несколько вариантов каркасов сайта, карт маршрутов пользователей, проверяется и сравнивается несколько вариантов и выбирается лучший. Также на помощь приходят специальные инструменты: например, UX Checklist. Это реальный чек-лист на соответствие каждого параметра принципам UX-дизайна. Если программа показывает, что сайт оставляет желать лучшего — значит, придется подождать еще немного. Хороший веб-дизайнер не успокоится, пока не доведет дело до конца;
    • согласует получившийся результат с заказчиком, при необходимости вносит правки и выслушивает пожелания. На этом этапе вы вспомните про ТЗ и возблагодарите Бога, что составили его. Дело в том, что получившийся результат и ваши пожелания могут существенно отличаться. Без обид, но вы — не специалист в сфере дизайна. Успешный бизнесмен — да, талантливый менеджер — да, но не дизайнер. Поэтому то, что вы придумали и представляли себе долгими вечерами, специалист может забраковать. Не обижайтесь: это значит, что придуманные вами идеи не помогут развитию вашего бизнеса, а может быть, и оттолкнут посетителей. Придется довериться дизайнеру: он лучше знает, как привлечь трафик и сделать сайт продающим.

    Еще лучше, когда дизайнер работает в связке с другими специалистами: программистами, вебмастерами, маркетологами, рекламщиками (например, в студии веб-дизайна). Они делят ответственность пополам и принимают оптимальное решение в процессе мозгового штурма.

    Что такое UI-дизайн

    Если UХ-дизайн — это скелет будущего сайта, то UI-дизайн — его детальная проработка и визуальное воплощение. Грубо говоря, первое понятие можно сравнить с планировкой дома, второе — с покупкой мебели и деталей интерьера. UI-дизайн (User Interface) переводится как “пользовательский интерфейс”. Это комплекс графических решений, которые определяют, удобно пользователям будет находиться на сайте или не очень.

    Рассмотрим основные правила UI-дизайна:

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


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

    Часто UX- и UI-дизайнер — это один и тот же человек. Универсальный специалист обычно умеет создавать прототипы сайта и прорабатывать его детальное наполнение:

    • разрабатывает дизайн и элементы управления каждой страницы. Дизайнер продумывает даже такие на первый взгляд мелочи, как расположение личного кабинета — слева или справа на верху страницы, цвет кнопки призыва к действию и количество слов, написанных на ней, количество шагов, который должен сделать пользователь, чтобы сделать заказ в интернет-магазине или зарегистрироваться;
    • подбирает подходящие UX-инструменты и программы. В основном это графические редакторы: Photoshop, Illustrator, Sketch, Adobe XD, Figma и другие;
    • следит за тем, чтобы каждая страница и каждый элемент органично смотрелись и вызывали положительные эмоции на всех носителях: стационарном компьютере, планшете или ноутбуке, смартфоне. То есть иметь адаптивную верстку;
    • учитывает основные тренды веб-дизайна: наличие свободного пространства, смелые сочетания шрифтов, четкие крупные шрифты, минимализм и лаконичность. Польза — это здорово, но красоту и приятный взгляду интерфейс тоже никто не отменял. Впрочем, почти всегда UX-дизайн и современные решения идут рука об руку;
    • так же согласовывает проект с заказчиком, при необходимости вносит правки, тестирует и принимает окончательное решение.

    Что еще должен уметь дизайнер?

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

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

    1. Различать специализацию. Веб-дизайнер — понятие широкое. Среди них и визуальные дизайнеры, и графические дизайнеры и, конечно, UX (дизайнеры пользовательского опыта) и UI (дизайнеры интерфейса). Если специалист говорит, что он мегапрофи в любой области — проверьте его слова. Как правило, если человек действительно профи, он сам понимает, какое направление ему ближе, и начинает совершенствоваться именно в этой сфере.
    2. Постоянно развиваться. Тренды дизайна меняются каждый год, чтобы не отставать от модных тенденций, нужно постоянно адаптироваться к изменениям. Для этого дизайнер просто обязан изучать тематические статьи, читать книги, мониторить новости. В то же время слепое поклонение трендам — тоже не есть хорошо. Важно найти баланс между пользой для пользователя и погоней за модой.
    3. Иметь чувство прекрасного. Проверить это можно одним способом — попросить дизайнера показать свое портфолио, лучшие работы. Если ваши вкусы различаются — лучше найдите другого специалиста. Иначе готовьтесь к бесконечным баталиям и непредсказуемому результату.

    Надеюсь, мы сумели объяснить, что такое UX/UI дизайн, простыми словами. Желаем найти хороших специалистов, которые заставят ваш сайт работать. Удачи в продвижении!

    Ui Design

    Tuesday, February 7, 2020

    Html5 Ui Design

    An Intro To The World Of User Experience And User Interface
    A user interface is the system by which people (users) interact with a machine. Detailed UI design . Graphic design . Usability testing . UI implementation . Work flow . Define your product . User Testing • You’re not the user (can’t guess. have to check) . Access Full Source

    Web Design And UI Technologies — Telerik
    Web Design with HTML5, CSS3 and JavaScript free training course overview _x000d_ Telerik Software Academy: http://html5course.telerik.com _x000d_ The website and all video materials are in Bulgarian _x000d_ About Telerik and Telerik Academy; About the Course; Requirements; Course Curriculum . Get Content Here

    Best Windows HTML Editors (WYSIWYG And Text) — Web Design
    This is my list of the best Windows HTML editors in order. I evaluated over 100 Windows HTML editors in 30 categories, and these are the editors that I think are the best of the best. If you’re looking for an HTML editor for Windows, you should find one that meets your needs on this list. . Read Article

    2.4 User Interaction Capabilities — Technology Strategies (TS)
    2.4 User Interaction Capabilities Office of Technology Strategies (TS) Architecture, Strategy, and Design HTML5 is currently the industry standard for user interfaces, (UI) design tools Kendo UI, Handlebars Web Authoring tools CSS, . Return Document

    Analysis On HTML5 UI Design Paradigm Under The Background Of .
    Rev. Téc. Ing. Univ. Zulia. Vol. 39, Nº 11, 205 — 213, 2020 205 doi:10.21311/001.39.11.25 Analysis on HTML5 UI Design Paradigm under the Background of . Read Here

    Infor LN HTML5 Workbench Administration Guide
    Infor LN HTML5 Workbench Administration Guide | 3 A Workbench provides an advanced user interface to Infor Enterprise Server. Workbenches are seamlessly integrated with Infor LN UI and the Infor Ming.leTM environment. Depending on design, a . Read More

    Infor LN UI Difference Study
    About this document Infor LN UI is the HTML5-compliant browser-based user interface for Infor LN 10.3 and higher. This document describes the differences between the current LN UI version and previous versions. . Doc Retrieval

    Design Patterns And Animation With JQuery — TechTarget
    Design patterns and Animation with jQuery with Paul Bakaus. The desktop. The greatest UI innovation ever. Drag & Drop. What about us? We are pioneers. Drag & Drop. in the web? Mixed worlds. • Application features everywhere • Web 2.0 : Customization and Sharing • No user interface standard . Read Here

    Developing Adaptive And Flexible Metro HTML5 . — Intel
    Developing Adaptive and Flexible Metro HTML5/JavaScript* Apps The user interface design needs to take into account all All the UI elements are implemented in plain HTML5/CSS3 elements. For ToH, we would like to support all screen sizes from . Doc Viewer

    HTML5 Header And Footer Elements For Web Designers
    HTML5 HEADER and FOOTER elements are more than just the top and bottom of a web page. Use these elements effectively One common mistake that web designers make when using the HEADER and FOOTER elements is assuming that these are design elements defining the head and foot of a page. But that . Read Article

    Design And Implementation Of HTML5 Photo Album
    3 UI Design of Photo Album Application . Up to now, people post photos many times from their iPhones or android like smartphones. We have not discovered an HTML5 based lication or a way either app . Fetch Doc

    Animated Circular Progress Bar — youtube.com
    Button Animation On Hover — Css3 Hover Effects — Html5 Css3 Creative Button Design — Tutorial — Duration: 7:20. Online Tutorials 297 views. New; 7:20. Html Css Simple User CARD UI Design — User Profile Widget UI Design — Css Hover Effects — Tutorial — Duration: 13:40. . View Video

    Mastering HTML5, CSS3 And JavaScript — Trivera Technologies
    Mastering HTML5, CSS3 & JavaScript is an in‐depth HTML5, CSS3 and JavaScript training course geared for developers who need to understand what the latest in web technologies, performance, optimization, and user interface design patterns and best practices. This comprehensive course . Return Doc

    How To Implement AAA Game UI In HTML And JavaScript
    How to Implement AAA Game UI in HTML and JavaScript SimCity 3. Tips and gotchas. What this talk is not about Building web games in HTML5. This is specific to using HTML to build just the UI http://www.chromium.org/developers/design- . Read More

    Single-page Application — Wikipedia
    A single-page application JavaScript can be used in a web browser to display the user interface (UI), run application logic, SSEs are sent over traditional HTTP and have a variety of features that WebSockets lack by design such as automatic reconnection, . Read Article

    UI Design With Adobe® Illustrator® — Pearsoncmg.com
    UI Design with Adobe® Illustrator® Rick Moore Adobe Press books are published by: Peachpit 1249 Eighth Street Berkeley, CA 94710 510/524-2178 For the web, HTML5 and CSS3 reduce the need for tons of graphics, and responsive design allows for those sites to adapt to the context of the device . Retrieve Doc

    Comparison Of Web Frameworks — Wikipedia
    Comparison of web frameworks This article needs to be updated. Please Yes, Internal UI validation controls: JVx WebUI: Java: Yes: Model Driven: Yes: Yes, pluggable: JUnit: Yes: Single sourcing: Yes, pluggable: JWt: Java: Yes: Yes: Push-pull: Yes: Yes: Yes: Yes: OpenXava: . Read Article

    Responsive Design (2013) — World Wide Web Consortium
    – Use a layout and user interface that works effectively for each device – Try to use the same web page URI for all devices Simpler for users, but requires responsive design W3C HTML5 training . Read More

    UI & UX Design — Mindtree — Mindtree | IT Services .
    UI & UX Design. Confidential — for limited circulation only 2 HTML5 Consulting | Design | Development | Services Portfolio of UX Design Capabilities. Confidential — for limited circulation only iOS User Experience. Confidential . Retrieve Full Source

    BigBlueButton — YouTube
    The HTML5 team gives an update on the progress of developing the BigBlueButton HTMl5 client. (Thanks to Blindside Networks for on using our current prototype, Tyler Copeland, BigBlueButton UI Designer, walks through a wireframe for a revised HTML5 UI design BigBlueButton uploaded a video . View Video

    User Interface Markup Language — Wikipedia
    A user interface markup language is a markup language that renders and making it easier to focus upon design of a user interface in an understandable based on a server-side transformation engine that transforms the XFD into HTML5 compatible data designed to run on any HTML5 . Read Article

    Jquery Mobile Develop And Design — Enrych.co.uk
    Web development essentials ebook jquery, jquery ui, and jquery mobile: recipes and examples developing web applications using html5 free download web design with html, css, javascript and a simple mobile optimized web . View Document

    PDF Download Sergey’s HTML5 & CSS3 Quick Reference: HTML5 .
    Mavrody has been working with web technologies since the mid-nineties, focusing on UI design and development, creative direction, information architecture, interactive media, SERGEY’S HTML5 & CSS3 QUICK REFERENCE: HTML5, CSS3 AND APIS (3RD EDITION) . Read Document

    Python GUI Development With Qt — Design Tips And CSS Styling
    Python GUI Development with Qt — Design tips and CSS styling PythonBo. Python Packaging HTML5 and JavaScript Program as Standalone Program 13:33. Kris Occhipinti 21,666 views. 13:33. Let’s Learn Python #24 — UI with Python, PyQt & Qt Designer — Duration: 26:12. Trevor . View Video

    UI/UX Designer/Front End Developer — Iamrakesh.com
    And/or User Interface Design (UI). i will also convert my UI Design into pixel perfect HTML5, CSS3, Sass), UI enhancement designs for better user experience, Designing Banners (Flash, HTML5, GWD), Guiding other designers and front-end developers and . Get Content Here

    PORTFOLIO — UX Designer / UI Developer — Jon Ross
    UX Designer / UI Developer user experience designer . user interface developer . HTML5 / CSS3 / jQuery amCharts.js . Alvernia University | Alvernia.edu / home (live site) HTML5 / CSS3 / JS App design mockup. . View Doc

    Pro HTML5 And CSS3 Design Patterns
    Going back and forth between server-side programming and UI design for more than a decade, he has been involved in diverse software projects and contributed to different technical publications. Dionysios Synodinos —. 1 1. Pro HTML5 and CSS3 Design Patterns . Access This Document

    The Inner Workings Of The HTML5 Silicon Designer Client
    The Inner Workings of the HTML5 advanced text rendering capabilities of InDesign to HTML5. Because SPI employs some of the This enables our design team to use predefined ui-event tags to implement features with the complete freedom to exclude . Get Document

    Line25

    25 Fresh Free HTML UI Kits

    Whether you’re a web designer, web developer or simply a UI designer, these 25 new free HTML UI kits will surely come in handy. These free HTML UI kits consist of various design blocks with a w >

    Check out these amazing resources for building websites and user interfaces. You’ll need only some basic HTML/CSS knowledge! Download these freebies right away!

    Shards: A modern UI toolkit based on Bootstrap 4

    Shards is a free UI toolkit created with the Bootstrap 4 framework. This toolkit includes various user interface elements that are responsive and follow the Material design principles. The best thing about this free UI kit is that it weights only

    12kb minified and gzipped. You will also get the Sketch and SCSS files.

    Element: A desktop component UI library

    Element is another cool desktop component UI library with tons of useful UI elements to help you build awesome websites and apps. This kit is based on Vue.js and contains grid systems, forms, notifications, dialogs, navigation menus, and more.

    Design Blocks: 170+ HTML components

    Design Blocks is a huge free UI kit containing more than 170 HTML components that are fully responsive! Use this to assemble a website or web app in minutes.

    Photon – Desktop app framework

    Photon is a UI kit you can use to create desktop apps. It is basically a desktop app framework with lots of cool elements designed with simple HTML and CSS coding.

    Google Material Design for Bootstrap

    Material Design for Bootstrap is a great UI kit based on Bootstrap 3. If you love Google Material Design then this front-end framework will become your favorite!

    Uilang – Build UI components

    uilang is a minimal UI kit with tons of awesome components for web designers. Use it to create beautiful user interface components, build prototypes and interactive websites and apps.

    Bootflat – Flat UI kit for Bootstrap

    Bootflat is a free UI kit that follows the flat design trend. It is based on Twitter’s Bootstrap 3.1.0 CSS framework and it’s a fast and easy solution for web developers and designers to create awesome apps.

    Flat design UI – HTML5 + CSS3

    Here is another flat HTML user interface kit. This is a ready-coded UI kit that can be used to build beautiful user interfaces.

    Responsive Flat UI kit – HTML

    Here is a responsive UI kit that also follows the flat design trend. It comes as an HTML UI kit based on Bootstrap 3. It contains buttons, icons, search forms, and more.

    Free PSD & HTML Flat UI kit

    So many free HTML UI kits are based on the flat design trend. This one contains so many amazing web elements you can use in your user interfaces designs. It was created with the help of Twitter Bootstrap and also includes a free PSD file.

    Light UI Kit in CSS & HTML

    This light UI kit was created with HTML and CSS and has a simple design. If you need sliders, buttons, progress bars, input fields, forms, and more, this is the toolkit for you.

    Paper UI Kit

    Paper is a modern UI kit with a clean, flat design. This was built with the help of HTML5 and CSS3 and it is fully responsive and based on Bootstrap. Paper Kit is a flexible user interface toolkit with lots of web elements such as buttons with different styles, links, inputs and more. It contains 19 handcrafted components, 3 customized plugins and 3 example pages. Use this kit for your next project.

    Propeller

    Propeller is a free and fully responsive HTML UI kit. Based on the popular Google Material Design and Bootstrap framework, it offers over 25 components to choose from. Use this amazing framework as a starting point for your web or app projects.

    Startup

    Startup is a free HTML UI kit that is completely responsive and built with the Bootstrap 4 framework. Startup UI Kit consists of 50 UI cards in 10 categories. Mix and match and create your own templates. It can be easily customized, so feel free to change the colors, backgrounds, fonts, sizes, and more.

    Square HTML5 CSS3 UI Kit

    Square is another free HTML UI kit based on the Bootstrap Framework 3.0. Square UI Kit includes many basic UI elements and widgets that are fully responsive. Calendars, buttons, toggles, search forms, you will find everything you need in this UI kit.

    Semantic UI

    Semantic UI is a modern and clean UI kit that can be used as a development framework for your website and app projects. It can be used as an alternative to Twitter Bootstrap.

    UIKit

    UIkit is another cool free HTML toolkit that’s easy to customize and use. You can also extend it! It’s lightweight, modular and helps you develop powerful web interfaces.

    InK – Interface Kit

    Ink is a free HTML UI kit you can use to create amazing, user-friendly web interfaces. It is based on a fluid grid and contains lots of interactive and responsive elements, both common and more unique-looking. Integrate it into your web or app projects with ease and start designing efficiently!

    Flatby – Flat UI Kit

    Flatby is another free HTML UI kit that follows the flat design trend. It uses SCSS type sass for stylesheets.

    Pure UI Kit

    Check out this Pure UI kit that contains lots of responsive CSS modules. Whether you need layouts, bases, grids, forms, buttons, tables, or tools and menus, this kit has everything you want.

    Futurico UI HTML

    Futurico UI HTML contains so many useful web elements packed into a single toolkit. This is the free version, but a premium one with more elements is also available.

    Bootmetro

    Bootmetro is another flexible and easy to use UI kit. Use this awesome framework for building web apps and websites. It has a similar feel to Windows 8.

    HTML KickStart

    HTML KickStart is a cool UI kit created with HTML5, CSS, and jQuery. It contains a bunch of layouts, and elements for creating fully functional user interfaces for both web or mobile projects.

    Yet Another UI Kit

    Save hours designing with this UI kit! Download it and get pre-made color pickers, ratings, progress steps elements, and more.

    Metro UI CSS

    Metro UI kit is a CSS freebie with a design similar to the Windows 8 Metro UI. Check out this components library and ease your design process.

    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих