Как да не засмуквате дизайн, 5-минутно ръководство за недизайнера.

Добрите принципи на дизайна могат да се научат и упражняват от всеки. Това ръководство ще ви даде основни познания за практически съвети за дизайн, които можете да приложите днес (и да впечатлите вашите приятели в дизайна).

Ако не вярвате, че можете да научите дизайн, спомнете си какво каза легендарният ни приятел Дейвид Ерик Грол за научаването на нови неща:

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

Имайки предвид думите на господин Гролс, готови ли сте за вашия крах курс? Закопчайте пеперуда, тук вървим в определен ред:

1. Използвайте много контраст

Цветът на фона и шрифта трябва да е достатъчно различен, за да не натоварва очите. Обикновено черният текст на бели фонове е най-четлив. Стойте далеч от светло сивото, жълтото и зеленото. Ако трябва да присвивате, за да четете, тогава знаете, че имате проблем.

От: https://developer.apple.com/design/tips/

2. Почти черното е по-лесно за четене от черното

Ако имате избор, опитайте да използвате цвят # 333333 RGB (51,51,51) вместо чисто черно за вашия текст. Чисто черно върху бели джигли за окото и прави буквите трудно да се фокусират.

3. Важно съдържание първо

Оформете първо най-важната информация, за да подкрепите ясно случая на първично използване на вашето приложение или уебсайт. Важното съдържание трябва да бъде видимо без увеличение или превъртане или докосване.

От: https://developer.apple.com/design/tips/

Да разгледаме някои примери за добра визуална йерархия в природата.

Instagram (долу вляво) поставя ясен акцент върху снимката / видеоклипа, публикувана от потребителя.

Pinterest (отдолу вдясно) създава визуална йерархия, като приковава лентата им за търсене до върха, последвана от хубавата им мрежа отдолу. Pinterest е много умишлен относно това, че полето за търсене е първият елемент на страницата.

Търсенето е основната функция на приложението, хората използват Pinterest за откриване и разглеждане.

Нека разгледаме още два примера

Spotify (долу вляво) очевидно празнува произведенията на албума и заглавието на песента първо, а плейърът контролира второ. Въпреки че контролите на плейъра са второстепенни, Spotify придава по-голяма тежест на бутона за игра и пауза при бързо движение напред и назад.

Facebook (долу вдясно), изглежда много подобно на Instagram, избира да постави съдържанието на вашия приятел отпред и в центъра.

4. Подравнете всички неща

Най-бързият начин да поправите нещо, което се чувства неприятно или странно, е да се уверите, че подравняването не е изключено. Когато дизайнерите говорят за необходимостта от използване на "мрежа", те се опитват да предупредят екипа за проблема с неправилното привеждане в съответствие.

Фиксирането на подравняването е едно от най-лесните подобрения, които можем да направим на всяко приложение или уебсайт и незабавно прави приложение или уебсайт да изглеждат 10 пъти по-добре.

От: https://developer.apple.com/design/tips/

Да разгледаме друг пример за подравняване, този път от medium.com

Ето едно уеб оформление, което оправих от Medium.com - как ви изглежда това?

Има ли нещо изключено от това оформление?

Съвет: забележете подравняването на левия ръб. Как изглежда?

Вляво подчертах визуалната река, причинена от неправилно подравняване, вдясно просто подравних всички основни блокове на съдържанието.

Удобно подравняване отляво, създавайки визуална река, последователно подравняване вдясноЛошо подравняване вляво, Фиксирано подравняване вдясно

5. Размер на текста с интервал

Ние не проектираме за мравки.

Увеличаването на размера на шрифта ще направи съдържанието ви много по-лесно за четене и усвояване, съчетано с някои либерални интервали.

Добър размер на текста спрямо лош размер на текста от: https://developer.apple.com/design/tips/Добри разстояния спрямо лоши разстояния от: https://developer.apple.com/design/tips/

6. Използвайте изглед на списък за резултати, ако е важен редът

Повечето мобилни и уеб приложения имат някакъв вид търсене и може да има някои здравословни дебати в дизайна за това как да се показват резултатите.

Ако поръчката е важна, тогава списъкът е най-ефективен.

Ако поръчката няма значение и бихте искали да насърчите откриването (като Pinterest или AirBnB), изгледът с решетка ще насърчи модел на поглед в подкрепа на откриването.

Как потребителите преглеждат резултатите от търсенето, представени в макет на мрежа? От C. Siu & B. Chaparro

7. Оформете първо черно-бяло, добавете цвят по-късно

Черно-бялото проектиране ще запази фокуса върху решаването и проектирането на основното преживяване на приложението ви.

Цветът предизвиква силни емоционални реакции и често прекъсва способността ни да се съсредоточим върху основния проблем в дизайна.

8. Създайте удобен дизайн

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

Лука излага областите на телефона, които са най-лесни за достигане и използване (поне за десни дръжки) - Бих искал да виждам, че приложенията имат настройка, в която можете да превключвате интерфейса от дясна доминираща към лява ръка.

Много ефективни мобилни приложения поддържат навигацията и основните действия в долната трета на телефона.

Кредит за изображение: Навигация на Лука Wroblewski с отзивчивост: Оптимизиране за сензорни устройства

9. Палитри за цветни заеми

Цветът е малко неуловимо тъмно изкуство. Горещо препоръчвам да се насочите към Dribbble и да потърсите „Цветни палитри“ или да използвате генератор на цветна палитра като Coolors или Color претенция.

Спестете си часовете на безкраен дебат и второ гадаене.

10. Използвайте Apple и Google OS Конвенции

Apple и Google създадоха невероятни ресурси за всеки, който изгражда софтуер за Android или iOS.

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

Apple има HIG - техните насоки за човешки интерфейс, които очертават всичко, което трябва да знаете как да проектирате приложение за iOS.

Различни снимки от Google Material Design и Apple Human Interface Guidelines

Не забравяйте, че дизайнът изисква практика

Обучението на окото ви да търси проблеми с дизайна отнема малко време и практика, но ще намерите горните съвети ще изминат дълъг път, за да направите всичко, което създавате по-добре проектиран.

Ако ви се стори полезна тази статия, моля, докоснете или кликнете върху „♥ ︎“ и препоръчайте това и го споделете с приятел, който се нуждае от дизайнерска помощ :)