The following text is a partial translation of the original English article, performed by ChatGPT (gpt-3.5-turbo) and this Jekyll plugin:
Мы все знаем, что происходит, когда программист решает, как должен выглядеть веб-сайт или мобильное приложение. В итоге оно выглядит уродливо. А почему так происходит? Я не знаю точно, но, на мой взгляд, дело в левополушарном укладе программистов, которые в основном являются жесткими и логичными математиками. Дизайн пользовательского интерфейса, наоборот, требует творчества и интуиции, которые присущи правой стороне нашего мозга. Некоторые недавние исследования относятся к этому скептически, но мой личный опыт говорит мне, что от программиста нельзя ожидать правильного создания пользовательского интерфейса. Более того, я сам один из этих программистов: несмотря на то, что я рисую, это всегда либо черно-белое, либо уродливое. Но мне все равно приходится разрабатывать свои собственные проекты. Вот список главных уроков, которые я вынес для себя и которые помогают мне выжить с моим левошироким мозгом.
Лидеры. Я смотрю на то, что делают крупные и известные компании. Я проверяю веб-сайты, которыми пользуюсь каждый день, чтобы узнать, что считается “хорошим” в современном веб-дизайне: stackoverflow, github, apple, amazon, craigslist (не шучу) и т.д. Я фактически обращаю внимание на менее чем десять веб-сайтов. Они делают плоские кнопки? Я делаю их плоскими. Они делают шрифты крупнее? Я делаю шрифты крупнее. Они делают фон белым, я тоже делаю его белым. Я просто копирую их. Ведь они знают лучше.
Фреймворки. Их много для веба. Я склонен выбирать самый простой и использовать его. Что ж, я даже создал свой собственный несколько лет назад: Tacit, CSS Framework без классов. Я всегда стараюсь “дизайнировать” как можно меньше и следовать конвенциям, навязанным авторами фреймворка. Если они хотят, чтобы мои кнопки были синими, они будут синими. Я не пытаюсь быть творческим, а просто следую правилам используемых мной фреймворков.
По умолчанию. Всегда существует сильное искушение выравнивать контент “красиво”, центрировать его или размещать в многоколоночных сетках. Я стараюсь не делать этого, несмотря на искушение. Я просто не знаю, как это сделать правильно, поэтому контент “потоком” идет сверху вниз, элемент за элементом, выравниваясь по левому краю. Ну, если это набор таблицы данных, то иногда возникает искушение добавить или удалить пространство между элементами, либо с помощью дополнительного <br/>, либо с помощью margin. Я этого не делаю. Элементы будут расположены так, как мой фреймворк располагает их по умолчанию.
Цвета. Выбор правильных цветов - большая проблема для меня - я не знаю, как это сделать правильно. Я не знаю, какой красный сочетается с каким зеленым. Вот почему я использую Coolors. Я просто нажимаю “space” несколько раз, и они предлагают мне комбинацию из пяти цветов, которые сочетаются друг с другом. Я нахожу самую привлекательную комбинацию и заканчиваю. Пять цветов всегда достаточно для любого веб-приложения.
Жирный, курсив, подчеркивание и все заглавные буквы. Это просто - не использовать их. Никогда. Ну, как можно меньше. Вы точно не должны использовать их, чтобы сделать визуальный элемент более заметным. Для этого у вас есть шрифты. Если вы хотите, чтобы ваш заголовок привлекал внимание, увеличьте размер шрифта. Но не используйте курсив, жирный, или, дай Бог, все заглавные буквы. Я иногда использую их, очень редко, но только чтобы выделить слово в предложении.
Шрифты. Я стараюсь придерживаться настроек по умолчанию, в которых есть с засечками, без засечек и моноширинный шрифты. Если я не могу, я использую Google Fonts, но очень осторожно. Конечно, я использую один шрифт для системы. Знаю ли я, какие два шрифта совместимы? Нет. Знаете ли вы? Даже не пытайтесь принимать правильное решение об этом. Просто один шрифт и всё. И я всегда стараюсь сделать их как можно крупнее. Это, кажется, сейчас тренд, наверное, потому что экраны становятся больше.
Изображения. Я делаю все возможное, чтобы избежать их, если честно. Я всегда стараюсь заменить их текстом или символами Unicode, если необходимо. Когда это абсолютно необходимо, я использую векторную графику SVG. PNG/JPEG растровая графика - мой последний вариант.
Художники. Я абсолютно не обращаю внимания на то, что делают современные веб-художники. Они создают красивые вещи, но мне даже не нужно о них знать. Они только раздражают меня, потому что я не могу создать что-то подобное. Когда кто-то показывает мне веб-сайт с новыми CSS-фишками, я сразу его закрываю. Это не для меня. Мой CSS должен быть как можно короче и примитивнее.
Соответствие. У W3C есть несколько валидаторов для HTML и CSS, которые могут указать на ошибки на веб-сайте, статически анализируя его. Это похоже на то, что делает Checkstyle для нашего кода на Java. Я всегда полагаюсь на их рекомендации. Иногда они звучат слишком строго, но они говорят мне, какие ожидания у тех, кто знает веб-дизайн гораздо лучше меня. Например, в HTML5 мы должны иметь <thead> в нашей <table> или атрибут alt во всех элементах <img>. Я всегда стараюсь следовать этим и другим правилам.
Отзывчивость. Дизайн должен быть подходящим для мобильных устройств. Всегда.
В заключение, я бы предложил: не импровизируйте, не пытайтесь быть творческими, не думайте, что вы понимаете, что красиво, а что нет. Вы этого не знаете. Я тоже. Просто будьте как можно более минималистичными и традиционными, и вы сделаете себе и своим пользователям большую услугу.
Translated by ChatGPT gpt-3.5-turbo/42 on 2023-12-05 at 22:11
