Как стать лучше в дизайне?

Я веб-разработчик и создал множество веб-сайтов.

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

Я не умею рисовать, но у меня есть неплохой выбор цветовых сочетаний для веб-сайта. Мой вопрос.

Как мне стать лучше в дизайне? Кажется, у меня есть следующие варианты:

• Ищите отличные веб-сайты в Интернете и посмотрите, что они делают.
  
• Попробуйте копировать великолепно выглядящие веб-сайты.
  
• Поэкспериментируйте с некоторыми дизайнами и попытайтесь придумать, как сделать это лучше.
  

Если у вас есть какие-либо советы, пожалуйста, скажите мне. Посмотрите мои дизайны: 1. КартинкаУдары

2. Меметопия

Спасибо, Фаррис

В этой разметке БОЛЕЕ чем достаточно крючков, чтобы выполнить ВСЕ стили, которые вы там делали.

ИСПОЛЬЗУЙТЕ ЗНАЧЕНИЕ тегов.

Используйте классы ТОЛЬКО в том случае, если тег получает РАЗЛИЧНЫЙ стиль, чем стиль i-го брата и сестры.

Если у вас есть список информации, используйте список.

если у вас есть столбцы однородных данных, где каждая строка имеет одинаковую семантическую связь, используйте ТАБЛИЦУ.

используйте заголовки таблиц и подразумевайте ОБЛАСТЬ этих заголовков.

Если у вас есть текст, предоставляющий информацию об этой таблице или инструкции, относящиеся к ней, используйте ЗАГОЛОВОК.

Если у вас есть новый основной раздел с очевидным заголовком, ИСПОЛЬЗУЙТЕ ЗАГОЛОВОК СООТВЕТСТВУЮЩЕГО УРОВНЯ (в данном случае h2). Когда у вас есть новый подраздел с четким подзаголовком, начните этот раздел со следующего заголовка более низкого порядка.

(например, H3). Тогда вы не будете тратить время на раздувание разметки бессмысленными DIV и бесконечными расплывчатыми классами.

Аналогично, если вы не собираетесь показывать какие-то данные, не тратьте время на их отправку!

Единственная причина, по которой я использую DIV, — это основной разделитель разделов для вложенных селекторов (.picture), а два раздела, которые для макета рабочего стола будут размещены в двух столбцах.

(.content и .info) ВСЕ остальные мои теги предназначены для того, чтобы сказать, что ЕСТЬ, а НЕ то, как я хочу, чтобы они выглядели.

Я думаю, что только у .user есть отдельный класс, чтобы отличать его от своих братьев и сестер, а также у .details и .tags, чтобы отличать их друг от друга.

Я хочу стилизовать привязки внутри .tags.

Я говорю «.tags a {» в своем CSS.

Я хочу стилизовать h3 для .info вместо всех h3 на странице, я говорю «.info h3»… обычно в конечном итоге получается не больше и не меньше CSS, чем бросание классов во все, и всегда получается лишь часть разметки!

... и любой, кто говорит вам «держать селекторы плоскими» из-за «скорости рендеринга» — например, ребята из CSS Lint — говорит свою задницу.

Когда 386/40 может обрабатывать сложные таблицы за приемлемое время, жаловаться на сложные селекторы, когда портативные компьютеры работают в диапазоне ГГц, является невежественной идиотской чепухой и пропагандой небрежных привычек разработки!

Да, и хороший сценарий должен подключать разметку, а НЕ наоборот.

99% времени вы используете вкл.событие атрибут в разметке (например, onclick) вы поощряете кликджекинг и обычно используете неряшливый код. Вот почему вкл.событие атрибуты БЛОКИРУЮТСЯ в новых методах политики безопасности контента, когда/если вы погружаетесь в это.
https://www.w3.org/TR/CSP/

ИМХО, одна из тех вещей, которые представляют собой неприятный случай: «Ну, черт возьми, пора!» поскольку я сказал, что эти качества должны были последовать примеру дронта полтора десятилетия назад.

Прежде всего, спасибо за обзор моего сайта.

Я знаю, что довольно плохо разбираюсь в таких вещах, как классы CSS и именование идентификаторов.

Как я могу улучшить именование классов и идентификаторов CSS? Сейчас я называю их Picture-1A, это означает «изображение» и «первое на очереди». Должен ли я использовать верблюжий регистр, например PictureTitle.

И я знаю, что есть некоторые элементы div, которые мне не принадлежат, и я постараюсь над этим поработать.

И теперь я понимаю, что заполнитель — это не метка, но я хочу сэкономить место.

Какой еще совет у вас есть? Спасибо

Глядя на то, что у вас есть, первое, что я бы посоветовал, это НАУЧИТЬСЯ ИСПОЛЬЗОВАТЬ HTML ПРАВИЛЬНО!!! Это означает, что говорите, что ЕСТЬ, а не то, как вы хотите, чтобы они выглядели.



Это также означает, что ПРЕКРАТИТЕ использовать ВСЕ DIV без уважительной причины, ПРЕКРАТИТЕ вводить статический стиль в разметку, ПРЕКРАТИТЕ использовать презентационные классы, такие как «ColFFF»... ПРЕКРАТИТЕ использовать бесполезные и раздражающие расплывчатые классы, такие как «MT10» или «av-3B». ... и из любви к Рождеству ПЕРЕСТАНЬТЕ бросать уроки на ВСЕ и потрудитесь использовать семантику и селекторы !!!

Ваша наценка мешает вам иметь разумное и рациональное развитие.

Я имею в виду просто взять что-нибудь простое, например:

 


<form action="ex/picture/create.php" method="POST" enctype="multipart/form-data">


<div class="Upload-3B"><input type="file" name="picture" /></div>


<div class="MT10"><input type="text" name="title" class="Upload-Textfield" maxlength="140" placeholder="Напишите здесь название (обязательно)" /></div>


<div class="MT10"><input type="text" name="tags" class="Upload-Textfield" id="Tags" placeholder="Напишите здесь теги Макс 5 (обязательно)" /></div>


<div class="MT10"><input type="checkbox" name="original" class="Upload" id="original" /><label for="original">Are you the original poster?</label></div>


<div class="MT10"><input type="checkbox" name="nsfw" class="Upload" id="nsfw" checked="checked" /><label for="nsfw">Is it safe for work?</label></div>


<div class="MT10"><center><input type="submit" name="submit" value="Upload" class="Button-A" /></center></div>


</form>

Код (разметка): Где ваш набор полей? Этикетки? Вы же знаете, что заполнитель НЕ является меткой, верно? Что со всеми этими DIV ни для чего? Конечно, это какое-то сценарное шоу/скрытие может показаться причудливым с художественной точки зрения, но на самом деле это плохой ДИЗАЙН!

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

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



... и вам явно не хватает ВСЕХ этих вещей! Хуже того, отсутствие у вас этих самых базовых концепций ДИЗАЙНА означает, что вы мгновенно сбиваетесь с толку в тот момент, когда хотите надеть штаны большого мальчика дизайна и иметь дело с реальными методологиями ДИЗАЙНА, такими как динамический шрифт в сочетании с эластичным полужидким адаптивным макетом.





Рисовать дурацкие картинки в фотошопе — это не дизайн, равно как и причудливая ерунда в сценариях, или, блин, это яркая ерунда — независимо от того, сколько художников ОБМАНЫВАЮТ себя, думая, что именно это и означает «дизайн». Внешний вид - это только ЧАСТЬ дизайна, и я думаю, что все остальные аспекты - это то, в чем вы ОЧЕНЬ не дотягиваете.



и в процессе говорите большому количеству потенциальных пользователей, чтобы они сами пошли ****; возможно, это приведет к огромным затратам на хостинг и снижению скорости процесса!

Вам также следует внимательно изучить WCAG и прочитать несколько статей о специальных возможностях на NNGroup.

В частности, вам, похоже, необходимо узнать об эмиссионном цветовом пространстве и о том, как оно связано с контрастами читаемости.

(белый на голубом? ДЕЙСТВИТЕЛЬНО?), как глупые причудливые веб-шрифты могут поставить под угрозу читаемость (Например, высокий аспект и заглавные буквы, говорящие пользователям, чтобы они трахались), что заполнитель НЕ является меткой и т. д. и т. п. Ну, знаете, ДИЗАЙН.

Спасибо за ваше понимание. Я постараюсь исправить эти проблемы. Но у меня небольшой вопрос: почему вы использовали таблицы, а не элементы div? Как вы думаете, лучше использовать таблицы? потому что мне нравятся div И кстати, ваш код выглядит намного чище