Углубленное изучение веб-дизайна почти на профессиональном уровне, нужен совет.

Vladimir I

Я уже много лет занимаюсь небольшим веб-хостингом, в основном в качестве хобби. Когда моя полная занятость заняла мою жизнь, скажем, около 3 лет назад, я прекратил все исследования HTML и CSS.

Итак, с учетом вышесказанного, я все еще знаю некоторые основы, но со всей этой информацией я немного ошеломлен.

Итак, для начала я собираюсь изложить свои трудности, дать людям представление о том, где я нахожусь.

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

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

Это будет моя самая сложная задача, но я думаю, она поможет вдохновить на творческое мышление.
У меня очень мало знаний в Photoshop или Illustrator.
Продолжить обучение CSS/HTML не составит большого труда, просто применить креативный макет — моя самая сложная задача.

Это мое понимание того, как все должно идти

Photoshop используется для макетов или создания простой графики.
Illustrator следует использовать для логотипов или графики, требующей векторной графики.
HTML/CSS, чтобы закончить

Итак, вот мои вопросы

Каков ваш типичный рабочий процесс по созданию веб-сайта?
Какие типы инструментов вы используете и почему для выполнения этой работы?
Есть ли у вас какие-либо дополнительные советы или идеи, которые помогут мне работать немного быстрее?

gjoob

Совершенно и полностью отсталый.

Почему? Потому что !) Веб-сайты предназначены для доставки контента пользователям. 2) Веб-сайты — это БОЛЬШЕ, чем то, на что они похожи. HTML существует не для того, чтобы указывать, как все выглядит.

Он существует для того, чтобы сказать, что ЕСТЬ или БЫЛО в профессионально написанном документе.

Существуют грамматические причины существования заголовков, почему они имеют уровни, что составляет абзац, даже причины, по которым текст МОЖЕТ быть выделен жирным шрифтом, и как этот жирный шрифт может быть чем-то вроде имени собственного в юридическом документе или получать «больше внимания», например as Не воруйте эту работу!.

Таким образом, правильный подход должен заключаться в том, чтобы СНАЧАЛА использовать контент, затем семантически размечать этот контент, чтобы сказать, какие вещи ЕСТЬ или БЫЛИ бы в профессионально написанном документе, затем и только затем создавать макет с помощью CSS, а затем накладывать больше CSS поверх него, чтобы дать это показуха.

Когда вы начинаете возиться с программой рисования, беспокоясь о внешнем виде, процесс начинается не с того конца. Вот почему вычурные типы, которым не хватает базового понимания НАСТОЯЩЕГО дизайна и которые сидят и шлепают его на графическом планшете в Photoshop и иллюстраторе, НЕТ дизайнеры. Они просто художники в ЗАБЛУЖДЕНИИ, они знают, что такое дизайн.

Дизайн — это инженерия, включающая в себя искусство, где такие вещи, как доступность, удобство использования и т. д., ТАКЖЕ важны, как и искусство «ну и дела, это не так уж и красиво». Я не говорю, что вы не можете сделать все это красиво, но вы должны провести черту, если это ставит под угрозу доступность на любом уровне.

Вот почему я никогда не видел веб-сайт, который начинал свою жизнь в формате PSD или в редакторе WYSIWYG, который стоил бы летающей фиолетовой рыбы.

Прогрессивное улучшение:

1) Начните со своего контента или разумной копии будущего контента в плоском текстовом редакторе, как будто HTML и CSS даже не существуют.

2) Разметьте это семантически, указав, что это такое, а НЕ то, как вы хотите, чтобы они выглядели.

Если вы выбираете ЛЮБОЙ из своих HTML-тегов на основе внешнего вида по умолчанию, вы выбираете все неправильные теги по совершенно неправильным причинам! Поскольку это семантический шаг, нейтральные/бессмысленные теги, такие как DIV/SPAN, пока не используются.

3) Затем с помощью CSS создайте свой первый (из многих) макетов для экранного мультимедиа.

ТЕПЕРЬ вы можете добавлять DIV, SPAN, классы и идентификаторы для подключения к представлению, но НЕ используйте классы, чтобы сказать, как все будет выглядеть, поскольку это тоже не имеет никакого отношения к HTML.

Скажите, что такое вещь или ПОЧЕМУ она МОЖЕТ получить стиль.

Вот почему такие фреймворки, как bootcrap, — это умственно ослабляющий мусор, который заставляет вас работать усерднее, а не умнее!

Предлагаю начать с макета рабочего стола, чтобы:

4) Вы можете сузить окно, выяснить, где оно прерывается, и использовать медиа-запросы для изменения макета.

5) Намыльте, промойте, повторяйте шаг 4, пока не убедитесь, что поддерживаются все разумные размеры экрана.

6) Тогда И ТОЛЬКО ТОГДА УСИЛИВАТЬ тот уже полностью рабочая страница с JavaScript.

Таким образом, если какая-либо часть уравнения — JS, медиа-запросы, макет экрана и даже сам HTML — будет нарушена, заблокирована или не применима к конечному пользователю, страница будет «изящно деградировать».

Это самый быстрый способ создания профессиональных доступных веб-сайтов. Любой, кто советует вам начать возиться с внешностью, наговаривает свою задницу.

-- редактировать --

Что касается инструментов, то для разработки подойдет любой простой текстовый редактор. Мне нравится Notepad 2 от Flo, но notepad++, win32pad, editplus, MS Visual Code, Atom, Sublime — существуют сотни совершенно хороших бесплатных редакторов.

Для тестирования он называется БРАУЗЕРЫ. Большинство из них бесплатны... скачайте их, установите, протестируйте.

... и тестируйте по ходу дела, а не «о, я все сделал в одном браузере», а затем взламываю другие.

Слишком легко загнать себя в угол, потратив долгие часы на исследования и взломы, которых можно было бы избежать, если бы вы с самого начала просто использовали методы, которые работают во ВСЕХ браузерах.

Следовательно, Alt-Tab и F5 должны стать вашими новыми лучшими друзьями.

Вы пишете основной раздел, проверяете его во ВСЕХ браузерах, а затем переходите к следующему разделу.

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

Серверный код, который вам обычно сойдет с рук с помощью тестовых сред, таких как WAMP/XAMPP (я предпочитаю последний), хотя установка подходящей виртуальной машины с обычной установкой сервера на ней может дать вам лучшее приближенное представление о том, как все будет происходить в «реальном мире». работа.

Например, у меня есть установка Debian в VirtualBox, которая составляет 1:1 от установки моего основного хостинга VPS. Оба в основном просто «Идеальная установка» HowToForge для debian/apache/mariadb/ispConfig

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

savaii

nshep Спасибо за freecodecamp, я проверю.

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

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

Другими словами, мне нужно, чтобы веб-дизайн был чем-то вроде процедурного программирования, потому что именно так пользователь переходит к контенту.

sashagorik

Совет: если вы хотите узнать больше о HTML, CSS (и, возможно, JavaScript), хорошим местом будет https://www.freecodecamp.org/

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

MSV1

Я расскажу @deathshadow о «блокноте 2» для кодирования.

Один из самых простых и легких инструментов для написания чего-либо без проблем. Это был один из его постов, где я впервые узнал об этом инструменте.

С тех пор больше ничем не пользовался.

Я не особо разбираюсь в дизайне изображений, в основном передаю эту работу на аутсорсинг, но считаю, что упомянутых вами инструментов должно быть достаточно.

В HTML и CSS появилось много нового, а также гораздо больше устройств для оптимизации вашего веб-сайта, таких как ноутбуки, iPad, телефоны, разные браузеры, разные размеры шрифтов и размеров экрана и т. д.

kl1pper

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

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

Посмотрите на конечного пользователя

Подумайте, как осуществляется доступ к содержимому сайта – кто-нибудь? требуется вход в систему? нужна подписка?

Какой призыв к действию? возьми трубку? электронная почта? Форма обратной связи? регистр? корзина?

У меня есть сайт клиента, который каждый год обновляется под руководством новой группы энтузиастов-добровольцев.

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

2 года назад я выбрал их, 1 год назад я выложил временный дизайн, просто чтобы они заработали, но его так и не заменили, в этом году толпа даже не будет разговаривать, поэтому они Получаем прошлогодний дизайн с небольшими изменениями.

В конечном счете, важно содержание.

Похожие темы	Дата
Книги по дизайну, рекламе, полиграфии	19.10.2024, 18:10
как создать анимацию Анимация смены слоев в виде часовой стрелки в фотошопе?	19.10.2024, 18:10
панель навигации начальной загрузки не отображается на мобильных устройствах	19.10.2024, 18:10
счетчик просмотров постов wp не работает	19.10.2024, 18:10
Вопрос по инструментам поиска коробок для бенто	19.10.2024, 18:10
Этот код JavaScript не хочет работать в моем блоге WP	19.10.2024, 18:10
Нужен совет как сделать подобную конструкцию	19.10.2024, 18:10
[подсказка данных] и простота ввода-вывода	19.10.2024, 18:10
Начинающий блоггер с таким количеством вопросов	19.10.2024, 18:10
Эффекты кнопок CSS не работают в браузерах	19.10.2024, 18:10

Углубленное изучение веб-дизайна почти на профессиональном уровне, нужен совет.

Vladimir I

gjoob

savaii

sashagorik

MSV1

kl1pper

I AM

Интересно