diff --git a/images/gray.png b/images/gray.png new file mode 100644 index 0000000..84073ef Binary files /dev/null and b/images/gray.png differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..70dcb51 Binary files /dev/null and b/images/logo.png differ diff --git a/images/uxui.jpg b/images/uxui.jpg new file mode 100644 index 0000000..60ca473 Binary files /dev/null and b/images/uxui.jpg differ diff --git a/index.css b/index.css index e69de29..a6012e8 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,141 @@ +main +{ + font-size: 13px; + text-align: justify; + -webkit-column-width: 300px; + -moz-column-width: 300px; + column-width: 300px; + -webkit-column-count: 3; + -moz-column-count: 3; + column-count: 3; + -webkit-column-gap: 30px; + -moz-column-gap: 30px; + column-gap: 30px; + column-rule: 2px solid black; + display: inline-block; + white-space: normal; +} + +.news-header +{ + font-size: 80px; + text-align: left; + text-transform: uppercase; + font-family: 'Ultra', serif; +} + +.news-header-small +{ + padding-top: 20px; + font-size: 30px; + text-align: left; + letter-spacing: 14px; + font-family: 'Oranienbaum', serif; +} + +IMG.fig +{ + float: left; + padding: 15px; +} + +hr.main +{ + border: none; + background-color: black; + color: black; + height: 20px; +} + +hr.secondary +{ + border: none; + background-color: grey; + color: grey; + height: 3px; +} + +.article-header +{ + font-family: 'Playfair Display SC', serif; + font-size: 20px; + text-align: center; + font-weight: bold; + text-transform: uppercase; + display: inline-block; + padding: 1%; +} + +article +{ + font-family: 'Roboto Slab', serif; + -webkit-column-width: 100px; + -moz-column-width: 100px; + column-width: 100px; + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; + -webkit-column-gap: 30px; + -moz-column-gap: 30px; + column-gap: 30px; + display: inline-block; + text-indent: 1.5em; +} + +article:first-letter +{ + font-family: 'Playfair Display SC', serif; + font-size: 60px; + font-weight: bold; +} + +.footnote +{ + background: #696969; + color: white; + display: inline-block; + float: right; + padding-left: 7%; + padding-right: 7%; + font-size: 15px; + font-family: 'Oranienbaum', serif; +} + +.block-1 +{ + margin-top: 5px; + padding: 5px; + width: 180px; + border: 7px double black; + font-size: 15px; + display: inline-block; +} + +.block-2 +{ + margin-top: 5px; + padding: 5px; + width: 390px; + font-size: 17px; + border: 5px ridge darkgrey; + float: right; + text-align: justify; + margin-right: 10px; + font-family: 'Oranienbaum', serif; +} + +aside +{ + float: right; + display: inline; + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; +} + +li +{ + font-weight: bold; + font-size: 17px; +} + diff --git a/index.html b/index.html index d810ba7..0183365 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,228 @@ + Новости + + + + + + Logo +
+ Не все ди­зай­не­ры в курсе, что дизайн + де­ла­ет­ся для людей. + Обычно дизайн де­ла­ет­ся для заказчика, + для зарплаты, для кон­ку­рен­тов, для + коллег по цеху.

+ Артемий Лебедев +
+
Новости дизайна
+
Uxguru
+
+
+
+
+ Почему серый текст не должен превышать 46% яркости +
+
+

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

+

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

+

+ Текст пониженной кон­траст­нос­ти + влияет не только на обыч­ных + пользователей, но также на пользователей с плохим зрением + и пожилых людей. Более того, поль­зо­ва­тель + может читать на мо­ни­то­ре, с низким разрешением, + на мобильном устройстве, или про­сто при плохом освещении. + Цве­то­вой контраст вашего + текста влияет на всех пользователей. Но только понимания того + факта, что светло-серый текст трудночитаем – + не­дос­та­точ­но. + Дизайнерам так­же важ­но знать, когда светлый, + становится слишком светлым. Без определенного стандарта, + «сли­шком светлый» — понятие + от­но­си­тель­ное. +

+
+ World Wide Web Consortium (W3C), международная + ор­га­ни­за­ция веб + стан­дар­тов, опуб­ли­ко­ва­ла + WCAG 2.0. Это ру­ко­вод­ства, которые + рас­ска­зы­ва­ют о том, как сде­лать + контент доступным. Они говорят, + что текст обыч­но­го раз­мера, + должен иметь соотношение кон­трас­та, + по крайней мере 4.5:1. +
+ +
+ gray +
+ UX – это не UI +
+
+

+ UX дизайн, или дизайн пользовательского опыта, это процесс, + с помощью которого определяется необходимость. За­тем рисуется + грубый прототип, ко­то­рый позже подтверждается (или нет) + путем тестирования. Ког­да подтверждается и + биз­нес-мо­дель, и + предложение ценности — про­дукт готов. +

+

+ Визуальный дизайн – это то, как сайт выглядит, его личность, + если угодно; бренд. Дизайн вза­имо­дейст­вия – + это то, как люди вза­имо­дейст­ву­ют с + вашим сайтом. Когда кто-то нажимает кнопку, + из­ме­ня­ет­ся ли она таким образом, + что­бы дать понять, что она на­жа­та? + И хотя и UX, и UI дизайнеры создают взаимодействия, + UX ди­зай­не­ров можно считать + ар­хи­тек­то­ра­ми макровзаимодействий, + а UI дизайнеров – создателями + ми­кро­вза­имо­дей­ствий, занимающихся + де­та­ля­ми. +

+ UX and UI +

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

+

+ После того, как вы настроили основное юзабилити, согласно + Аарону Уолтеру, автору книги «Дизайн для эмоций», лояльность + ваших пользователей будет за­ви­сеть от личности вашего + ин­тер­фей­са. Яркий дизайн может при­влечь + к вашему сайту людей, они даже могут задержаться, если там можно + что-то сделать. И когда об­ра­зу­ет­ся личная + связь – они на крюч­ке. Заставляет ли ваш ин­тер­фейс + их смеяться? Цепляет ли он их? Насколько он дерзкий? Аарон говорит: + «Люди простят ваши не­дос­тат­ки, последуют за вами, + и будут петь вам дифирамбы, если вы наградите их положительными + эмоциями.» Вот здесь вступает UI дизайнер. +

+

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

+

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

+

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

+
+
+
+ Почему круглые картинки в профилях акцентируют лицо +
+

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

+
    +
  • Острые углы
    • +
+

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

+

+ Когда пользователь смотрит на круглое фото – он ви­дит всё, + просто смотря в центр. Это потому, что рас­сто­я­ние от центра + круга, до его границ – одинаково. Поль­зо­ва­тель быстрее сможет + на нем сосредоточиться. +

+
    +
  • Фон
    • +
+

+ Самая главная часть изображения профиля – это лицо. Чем меньше фона на изображении, + тем быстрее поль­зо­ва­тель сфокусируется на лице. Квадратные + изо­бра­же­ния отображают больше фона, чем круглые. +

+
    +
  • Картинки без лица
    • +
+

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

+
+
+
Новости из мира дизайна
+
Uber впервые за 4 года обновил дизайн мобильного приложения +
+ Умер иллюстратор Marvel Стив Диллон +
+ Социальная сеть "ВКонтакте" обновила дизайн групп +
+ Дизайн новых купюр 200 и 2000 рублей разработают к апрелю 2017 +
+
+
+