Тази седмица в дизайна: 12 септември 2014 г.

Съществена част от това, което кара някой да се свърже с дизайна, е емоцията и усещането. И това са две неща, които могат да бъдат трудно предвидими, описани и проектирани. Но има малко наука зад емоцията и усещането и защо може да реагирате по определен начин и това е фокусът ни тази седмица в дизайна.

Всяка седмица планираме да разгледаме основните издания и подобрения на продукти, инструменти и трикове и дори някои от най-популярните неща, за които говорите в социалните медии. И ние ще се радваме да чуем какво се случва и във вашия свят. Пропуснахме ли нещо? Пусни ми ред на [защитено по имейл].

Как шрифтовете ви карат да се чувствате

Има наука за типография. По-конкретно има наука как шрифтовете могат да ви накарат да се чувствате. Следващата Мрежа има страхотен поглед върху това как типът може да ви повлияе и какво дизайнерите могат да направят, за да се възползват по-добре от типа „Наука зад шрифтовете (и как те карат да се чувстваш)“.

Разбиването на науката е по-просто, отколкото можете да си представите:

  1. Помислете как четете. (Това е естествен модел!)
  2. Помислете как правилните шрифтове ви карат да се чувствате. (Те съответстват на тона на това, което четете.)
  3. Помислете как се чувствате подредбата. (Ако елементите са поставени по начини, които не нарушават потока на текст, вие сте по-щастливи.)
  4. Помислете за културните асоциации с шрифтове. (Надписът може да представлява или да ви помогне да се свържете с други обекти или предмети.)

Но какво можете да направите с тази информация? Как можете да го използвате за проектиране с шрифтове, които се асоциират с по-доброто усещане? Разбирането на типографията е мястото, където да започнете. Познаването на основите като категории от шрифтове (serif, sans serif, скрипт и декоративни) и принципите за четливост и четимост са добро начало.

Но има и още няколко неща, които можете да направите:

  • Изберете размер на шрифта по-голям от 12 точки. "Много дизайнери споменават, че 16pt шрифт е новият 12pt шрифт."
  • Имайте предвид дължината на линията. Обърнете внимание, че идеалната дължина на линия за уебсайт за десктоп пада между 50 и 75 знака.
  • Обърнете внимание на разстоянието. Уверете се, че има достатъчно място между редовете текст, за да улесните четенето.

Разбиране на CSS форми

Формата на изображение или блок текст може да ви накара да почувствате нещо по въпроса. Формата също предоставя допълнителна информация за даден елемент, неговата употреба и функция в цялостния дизайн. Но създаването на форми за уеб проекти не винаги е било лесно, особено със сложни изображения.

CSS формите създават решение на този проблем. „Повечето уебсайтове се придържат към обикновена форма: монтиране на съдържание в правоъгълници в други, по-големи правоъгълници, нещо, което повечето потребители вероятно ще намерят по-скучно от умопомрачителното“, пише Зак Ръдърфорд за UX Magazine. „CSS формите, от друга страна, позволяват по-голяма свобода на дизайнерите, които искат да контурират съдържанието си в рамките на или около интересни и визуално привлекателни параметри.“

Но кога трябва да използвате CSS форми във вашите проекти. Отговорът е в статията „Симетрия, размер, скорост и CSS форми.“
Има доста убедителен списък от причини, поради които трябва да работите с CSS форми, освен че е забавно.

  • Новост: „Способността да променяте текста, за да се изтласка в тесни пространства или, като алтернатива, да се разшири в по-широки диапазони, ще предложи по-голяма свобода на дизайнерите, които съчетават своите оформления.“
  • Разширено управление на потребителските потоци: Позволява за оформяне на съдържание във фигури, намаляване на текста по ред или използване на текст като форми, за да се подчертаят други елементи на страницата.
  • Оформянето на съдържанието улеснява визуалното разказване на сюжети: „Опциите за променливост, след като изкопаете идеята за стенен структура за вашето писмено съдържание, са потресаващи.“
  • Симетрия, размер и бързина: „CSS формите могат да се използват, за да поддържат формата на съдържанието ви независимо от прозореца, което го прави универсално симетричен, да не говорим за RWD.“

Проектиране на шрифт

Създаването на шрифтове не е толкова просто, колкото просто скициране на няколко букви на салфетка. Разработката на шрифт и шрифт е многостъпален процес, който трябва да извършите. Но дори и без много опит можете да създадете свой собствен шрифт.

Дизайнерът на типове Тайлер Финк наскоро събра 18-минутно видео по-малко и статия за Creative Market, за да ви преведе през процеса. „Как да направите шрифт“ е хубав поглед върху създаването на нещо самостоятелно (но трябва да имате Mac за този урок).

И докато почти всеки може да го направи, ще трябва да сте готови да имате малко търпение и всеотдайност. Създаването на шрифт не е толкова лесно, колкото 1-2-3.

„Направата на добър и използваем шрифт ще отнеме практика и много часове“, казва Финк в статията. „Не е„ трудно “, ако обичаш да го правиш, и има вероятност, веднага ще разбереш дали това е нещо, което обичаш да правиш. Вероятно ще направите ревизии, потенциално ще включите отзиви от други потребители, ще тествате при различни обстоятелства (различни приложения / печат / уеб) и други. “

Ако създаването на собствен шрифт може би не е чашата ви с чай, помислете за изтеглянето на едно от творенията на Finck. Той е професионален дизайнер от 2005 г. и имаше няколко типа шрифтове на Creative Market.

Просто за забавление

Накрая визуално представяне на това как се чувстват програмните езици. (И за мен това е много точно.)

Бьорн Типлинг надникна и нарисува малка поредица в „Ако езиците за програмиране бяха оръжия“. Публикацията преминава през всеки език за програмиране и как се отнася. Сравненията са доста умни и относими.

„C ++ е набор от нунчуци, мощен и впечатляващ, когато се владее, но отнема много години болка, за да овладееш и често ти се иска да използваш нещо друго“, пише той. По-нататък: „JavaScript е меч без ръкохватка.“

Уверете се, че отидете да прочетете. Много е забавно и дори може да бъде страхотен пикап в късния следобед.

© Copyright 2022 | computer06.com